import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }

"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"

import { cn } from "@/lib/utils"

const Label = ({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) => {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }

import * as React from 'react';

import { cn } from '@/lib/utils';
// 1. 扩展原始的 Props 接口
export interface InputProps extends React.InputHTMLAttributes<HTMLElement> {}


// 2. 使用 forwardRef 创建组件，forwardRef接收两个参数，第一个是 ref 的类型，第二个是 props 的类型
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        data-slot="input"
        ref={ref}
        className={cn(
          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
          className
        )}
        {...props}
      />
    );
  }
);

export { Input };

import * as React from 'react';
import { cn } from '@/lib/utils';
import { Icon } from '@/components/ui/Icon';

// 1. 扩展 Props 接口
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  prefix?: string;
  suffix?: string;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, prefix, suffix, ...props }, ref) => {
    // 2. 总是渲染带容器的结构，以统一 DOM 结构和样式行为
    return (
      <div
        className={cn(
          // 将原 input 的大部分外观样式移到外层 div 上
          'flex h-9 items-center rounded-md border border-input bg-transparent px-3 text-sm shadow-xs ring-offset-background transition-[color,box-shadow]',
          // 处理焦点状态
          'focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50',
          // 处理校验失败状态
          'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
          // 处理禁用状态
          props.disabled && 'cursor-not-allowed opacity-50'
        )}
      >
        {prefix && <Icon name={prefix} className="mr-2 h-4 w-4 text-muted-foreground" />}
        <input
          type={type}
          // 3. 重置内部 input 的样式，让它"隐形"在容器中
          className={cn(
            'h-full w-full flex-1 bg-transparent p-0 text-base placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed md:text-sm',
            className // 外部 className 应用在这里
          )}
          ref={ref}
          {...props}
        />
        {suffix && <Icon name={suffix} className="ml-2 h-4 w-4 text-muted-foreground" />}
      </div>
    );
  }
);
Input.displayName = 'Input';

export { Input };

// ... imports ...

// 1. 扩展 Props 接口
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  prefix?: string;
  suffix?: string;
  allowClear?: boolean;
  onClear?: () => void;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, prefix, suffix, allowClear, onClear, value, ...props }, ref) => {
    
    // 2. 判断清除按钮是否显示
    const showClear = allowClear && value && String(value).length > 0;

    // 3. 决定最终的 suffix 内容：优先显示清除按钮
    const finalSuffix = showClear ? (
      <button
        type="button"
        onClick={onClear}
        className="ml-2 focus:outline-none"
        aria-label="Clear input"
      >
        <Icon name="lucide:x-circle" className="h-4 w-4 text-muted-foreground hover:text-foreground" />
      </button>
    ) : suffix ? (
      <Icon name={suffix} className="ml-2 h-4 w-4 text-muted-foreground" />
    ) : null;

    return (
      <div /* ... 容器 div 结构 ... */ >
        {prefix && <Icon name={prefix} className="mr-2 h-4 w-4 text-muted-foreground" />}
        <input
          type={type}
          className={cn( /* ... 内部 input 样式 ... */ )}
          ref={ref}
          value={value} // 确保 value 被传递
          {...props}
        />
        {finalSuffix} {/* <-- 使用 finalSuffix */}
      </div>
    );
  }
);
Input.displayName = 'Input';

export { Input };

'use client';

import { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

function ControlledExample() {
  const [value, setValue] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  return (
    <div className="w-full max-w-sm space-y-2">
      <h3 className="font-semibold">受控组件示例</h3>
      <Label htmlFor="controlled-input">输入：</Label>
      <Input
        id="controlled-input"
        placeholder="值由 React state 控制..."
        value={value}
        allowClear
        onChange={handleChange}
      />
      <p className="text-muted-foreground text-sm">
        来自 React state 的当前值:{' '}
        <span className="text-primary font-mono">{value}</span>
      </p>
    </div>
  );
}

export default function FormPatternsPage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center gap-12 p-24">
      <ControlledExample />
    </main>
  );
}

import { useRef } from 'react'; // 引入 useRef
import { Button } from '@/components/ui/Button';

function UncontrolledExample() {
  // 1. 创建一个 ref 来引用 input DOM 元素
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = () => {
    // 3. 在需要时，通过 ref 直接从 DOM 读取值
    alert(`从 DOM 中读取的值: ${inputRef.current?.value}`);
  };

  return (
    <div className="w-full max-w-sm space-y-2">
      <h3 className="font-semibold">非受控组件示例</h3>
      <Label htmlFor="uncontrolled-input">输入：</Label>
      <Input
        id="uncontrolled-input"
        // 2. 将 ref 传递给 Input 组件
        ref={inputRef}
        placeholder="值由 DOM 自身管理..."
        defaultValue="这是一个初始值"
      />
      <Button onClick={handleSubmit} className="mt-2">
        提交并读取值
      </Button>
    </div>
  );
}

export default function FormPatternsPage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center gap-12 p-24">
      <ControlledExample />
      <UncontrolledExample /> {/* <-- 添加新示例 */}
    </main>
  );
}

import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { Input } from './input';

const meta: Meta<typeof Input> = {
  title: 'UI/Input',
  component: Input,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  // 为我们的 props 配置交互式控件和文档
  argTypes: {
    prefix: {
      control: 'text',
      description: '输入框前缀图标的名称 (例如: "lucide:search")',
    },
    suffix: {
      control: 'text',
      description: '输入框后缀图标的名称 (例如: "lucide:calendar")',
    },
    allowClear: {
      control: 'boolean',
      description: '是否启用一键清除功能 (需要以受控模式使用)',
    },
    disabled: {
      control: 'boolean',
      description: '是否禁用输入框',
    },
    // 将 onClear 标记为一个 action，以便在 Storybook 的 Actions 面板中追踪其调用
    onClear: { action: 'onClear' },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

// 后续的故事定义将写在这里...

import * as React from 'react'; // 引入 React 用于受控组件的 Story
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { Input } from './Input';

// ... 此前定义的 meta 对象 ...
const meta: Meta<typeof Input> = { /* ... */ };
export default meta;
type Story = StoryObj<typeof meta>;


// 1. 基础的、可交互的 Story
export const Default: Story = {
  args: {
    placeholder: '请输入内容...',
  },
};

// 2. 带前缀图标的 Story
export const WithPrefix: Story = {
  args: {
    placeholder: '搜索...',
    prefix: 'lucide:search',
  },
};

// 3. 带后缀图标的 Story
export const WithSuffix: Story = {
  args: {
    placeholder: '选择日期',
    suffix: 'lucide:calendar',
    type: 'date',
  },
};

// 4. (关键) 演示 allowClear 功能的受控 Story
export const WithClearButton: Story = {
  // 我们必须使用 render 函数来模拟一个受控组件的父级环境
  render: function Render(args) {
    // 使用 React Hook 来管理 value 状态
    const [value, setValue] = React.useState('这是一段可以被清除的文本');

    return (
      <Input
        {...args}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onClear={() => setValue('')} // 将 onClear 回调连接到状态更新
      />
    );
  },
  name: '可清除 (受控模式)', // 为 Story 设置一个更清晰的显示名称
  args: {
    allowClear: true,
    className: 'w-80', // 给一个更宽的尺寸以便展示
  },
};

// 5. 禁用状态的 Story
export const Disabled: Story = {
    args: {
        placeholder: '此输入框已被禁用',
        prefix: 'lucide:lock',
        disabled: true,
    }
}