@teamix-evo/ui 0.1.1

package/src/components/input/input.stories.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Mail, Search } from 'lucide-react';
+import { Input } from './input';
+
+const meta: Meta<typeof Input> = {
+  title: '表单与输入 · Form/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '输入框 — 文本 / 邮箱 / 密码 / 搜索等单行输入。shadcn 原生 `<input>` 风格 + antd 扩展:`size` 三档、`prefix` / `suffix` 前后缀、`addonBefore` / `addonAfter` 外联组、`clearable` 一键清空、`showCount` + `maxLength` 字数统计。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'search', 'tel', 'url'],
+    },
+    clearable: { control: 'boolean' },
+    showCount: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    maxLength: { control: 'number' },
+  },
+  args: {
+    size: 'default',
+    type: 'text',
+    clearable: false,
+    showCount: false,
+    disabled: false,
+    placeholder: '请输入...',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-72">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Playground: Story = {};
+
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Input size="sm" placeholder="Small" />
+      <Input size="default" placeholder="Default" />
+      <Input size="lg" placeholder="Large" />
+    </div>
+  ),
+};
+
+export const PrefixSuffix: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Input prefix={<Search />} placeholder="搜索..." />
+      <Input type="email" suffix={<Mail />} placeholder="you@example.com" />
+      <Input prefix="¥" suffix="USD" placeholder="0.00" />
+    </div>
+  ),
+};
+
+export const Addon: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Input
+        addonBefore="https://"
+        defaultValue="teamix-evo"
+        addonAfter=".com"
+      />
+      <Input addonBefore="@" placeholder="username" />
+      <Input addonAfter="kg" defaultValue="42" />
+    </div>
+  ),
+};
+
+export const Clearable: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [v, setV] = React.useState('Hello');
+    return (
+      <Input
+        clearable
+        value={v}
+        onChange={(e) => setV(e.target.value)}
+        placeholder="可清除..."
+      />
+    );
+  },
+};
+
+export const ShowCount: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <Input showCount maxLength={140} placeholder="发布动态" />,
+};
+
+export const Disabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Input disabled placeholder="禁用态" />
+      <Input disabled defaultValue="只读内容" />
+    </div>
+  ),
+};

package/src/components/input/input.tsx

@@ -0,0 +1,213 @@
+import * as React from 'react';
+import { X } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+export interface InputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'prefix' | 'suffix'
+  > {
+  /** 输入框前置图标 / 文本(antd `prefix` 并集)。 */
+  prefix?: React.ReactNode;
+  /** 输入框后置图标 / 文本(antd `suffix` 并集)。 */
+  suffix?: React.ReactNode;
+  /**
+   * 显示清除按钮,有内容时点击清空(antd `allowClear` 并集)。
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * 显示字符计数(antd `showCount` 并集);需配合 `maxLength` 一起使用。
+   * @default false
+   */
+  showCount?: boolean;
+  /** 输入框前置标签(antd `addonBefore` 并集),与外层组合形成 input-group。 */
+  addonBefore?: React.ReactNode;
+  /** 输入框后置标签(antd `addonAfter` 并集)。 */
+  addonAfter?: React.ReactNode;
+  /**
+   * 尺寸。
+   * @default "default"
+   */
+  size?: 'sm' | 'default' | 'lg';
+  /** 受控值,用于 clearable / showCount 的逻辑;未传时回退到 uncontrolled 行为。 */
+  value?: string;
+  /** uncontrolled 初始值。 */
+  defaultValue?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type = 'text',
+      prefix,
+      suffix,
+      clearable = false,
+      showCount = false,
+      addonBefore,
+      addonAfter,
+      size = 'default',
+      value,
+      defaultValue,
+      onChange,
+      maxLength,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    // Track the current value for clearable / showCount; mirror uncontrolled
+    // input via internal state when `value` prop isn't provided.
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<string>(
+      defaultValue ?? '',
+    );
+    const current = isControlled ? value : internal;
+
+    const innerRef = React.useRef<HTMLInputElement | null>(null);
+    React.useImperativeHandle(
+      ref,
+      () => innerRef.current as HTMLInputElement,
+    );
+
+    const h =
+      size === 'sm'
+        ? 'h-8 text-xs'
+        : size === 'lg'
+          ? 'h-10 text-base'
+          : 'h-9 text-sm';
+
+    const hasAffix = prefix != null || suffix != null || clearable;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) setInternal(e.target.value);
+      onChange?.(e);
+    };
+
+    const handleClear = () => {
+      if (!isControlled) setInternal('');
+      // Synthetic event for callers wiring onChange to a setter
+      const target = innerRef.current;
+      if (target) {
+        const proto = Object.getPrototypeOf(target);
+        const desc = Object.getOwnPropertyDescriptor(proto, 'value');
+        desc?.set?.call(target, '');
+        target.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    };
+
+    // Inner input + (optional) prefix/suffix wrapper
+    const innerInput = hasAffix ? (
+      <div
+        className={cn(
+          'flex items-center gap-2 rounded-md border border-input bg-background px-3 shadow-sm transition-colors focus-within:ring-1 focus-within:ring-ring',
+          h,
+          disabled && 'cursor-not-allowed opacity-50',
+          (addonBefore || addonAfter) && 'rounded-none border-x-0',
+          addonBefore && !addonAfter && 'rounded-l-none border-l-0',
+          addonAfter && !addonBefore && 'rounded-r-none border-r-0',
+          !addonBefore && !addonAfter && '',
+          className,
+        )}
+      >
+        {prefix ? (
+          <span className="flex shrink-0 items-center text-muted-foreground [&_svg]:size-4">
+            {prefix}
+          </span>
+        ) : null}
+        <input
+          ref={innerRef}
+          type={type}
+          value={isControlled ? value : undefined}
+          defaultValue={!isControlled ? defaultValue : undefined}
+          maxLength={maxLength}
+          disabled={disabled}
+          onChange={handleChange}
+          className="grow bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+          {...props}
+        />
+        {clearable && current && current.length > 0 && !disabled ? (
+          <button
+            type="button"
+            onClick={handleClear}
+            aria-label="Clear"
+            className="shrink-0 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <X className="size-4" />
+          </button>
+        ) : null}
+        {suffix ? (
+          <span className="flex shrink-0 items-center text-muted-foreground [&_svg]:size-4">
+            {suffix}
+          </span>
+        ) : null}
+      </div>
+    ) : (
+      <input
+        ref={innerRef}
+        type={type}
+        value={isControlled ? value : undefined}
+        defaultValue={!isControlled ? defaultValue : undefined}
+        maxLength={maxLength}
+        disabled={disabled}
+        onChange={handleChange}
+        className={cn(
+          'flex w-full rounded-md border border-input bg-background px-3 py-1 shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          h,
+          (addonBefore || addonAfter) && 'rounded-none',
+          addonBefore && !addonAfter && 'rounded-l-none',
+          addonAfter && !addonBefore && 'rounded-r-none',
+          className,
+        )}
+        {...props}
+      />
+    );
+
+    // Wrap with addons if any
+    const addonWrapper =
+      addonBefore || addonAfter ? (
+        <div className="flex">
+          {addonBefore ? (
+            <span
+              className={cn(
+                'inline-flex shrink-0 items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-muted-foreground',
+                h,
+              )}
+            >
+              {addonBefore}
+            </span>
+          ) : null}
+          {innerInput}
+          {addonAfter ? (
+            <span
+              className={cn(
+                'inline-flex shrink-0 items-center rounded-r-md border border-l-0 border-input bg-muted px-3 text-muted-foreground',
+                h,
+              )}
+            >
+              {addonAfter}
+            </span>
+          ) : null}
+        </div>
+      ) : (
+        innerInput
+      );
+
+    if (showCount && maxLength) {
+      return (
+        <div className="space-y-1">
+          {addonWrapper}
+          <div className="text-right text-xs text-muted-foreground tabular-nums">
+            {current?.length ?? 0} / {maxLength}
+          </div>
+        </div>
+      );
+    }
+    return addonWrapper;
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/input-group/input-group.meta.md

@@ -0,0 +1,92 @@
+---
+id: input-group
+name: InputGroup
+type: component
+category: form
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# InputGroup
+
+输入框 + addon 统一容器 — shadcn 2025-10 新增。**等价 antd `Input` 的 `prefix` / `suffix` / `addonBefore` / `addonAfter` 集合**,但拆为更通用的复合插槽:`InputGroupAddon`(图标 / 文本 / 按钮)+ `InputGroupInput` / `InputGroupTextarea`(主体)。
+
+## When to use
+
+- 输入框需要前 / 后缀(`https://` `.com`、`$`、`/月`)
+- 输入框 + 操作按钮(搜索、清空、复制)
+- 输入框 + 图标(搜索图标、loading spinner)
+- Textarea + 上传 / 录音类辅助按钮
+
+## When NOT to use
+
+- 仅需输入框 → `Input`
+- 仅需 textarea → `Textarea`
+- 多个按钮拼接 → `ButtonGroup`
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `disabled` | `boolean` | – | – | 整组禁用样式(子项请单独传 `disabled`,这里仅影响视觉上的 opacity)。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add input-group` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+_无 — 本组件不依赖任何 npm 包。_
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+- **顺序按 JSX 写**:`<InputGroup>` 内的子节点顺序就是渲染顺序 — `<Addon position="before" />` 必须在 `<Input />` 前面,反之亦然
+- **不要在 InputGroupAddon 里再放 Input** — addon 是辅助槽,主输入必须用 `InputGroupInput` / `InputGroupTextarea`
+- **`variant="icon"`** 给图标用(无背景、紧凑);**`variant="text"`** 给纯文本前后缀(muted 背景);**`variant="button"`** 给嵌入 Button(去内边距 + 去圆角,避免双重边线)
+- **disabled**:整组传 `disabled` 仅影响外观;子项的真实 disabled 需要单独传(防止误整组禁用)
+- **嵌入 `Button`**:用 `<InputGroupAddon variant="button">` 包,Button 自身 `variant="ghost"` 效果最自然
+
+## Examples
+
+```tsx
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupTextarea,
+} from '@/components/ui/input-group';
+import { Button } from '@/components/ui/button';
+import { Search, Send } from 'lucide-react';
+
+// 前缀图标 + 后缀按钮
+<InputGroup>
+  <InputGroupAddon position="before" variant="icon">
+    <Search className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput placeholder="搜索文档..." />
+  <InputGroupAddon position="after" variant="button">
+    <Button variant="ghost" size="sm">搜索</Button>
+  </InputGroupAddon>
+</InputGroup>
+
+// 前后缀文本(URL 输入)
+<InputGroup>
+  <InputGroupAddon position="before">https://</InputGroupAddon>
+  <InputGroupInput defaultValue="example" />
+  <InputGroupAddon position="after">.com</InputGroupAddon>
+</InputGroup>
+
+// Textarea + 发送按钮
+<InputGroup>
+  <InputGroupTextarea rows={3} placeholder="发表评论..." />
+  <InputGroupAddon position="after" variant="button">
+    <Button size="icon" icon={<Send />} aria-label="发送" />
+  </InputGroupAddon>
+</InputGroup>
+```

package/src/components/input-group/input-group.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Search, Send } from 'lucide-react';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupTextarea,
+} from './input-group';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof InputGroup> = {
+  title: '表单与输入 · Form/InputGroup',
+  component: InputGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '输入框 + addon 统一容器 — 拆为通用复合插槽:InputGroupAddon(图标 / 文本 / 按钮)+ InputGroupInput / InputGroupTextarea(主体)。shadcn 2025-10 新增,等价 antd Input 的 prefix / suffix / addonBefore / addonAfter 集合。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+
+export const Playground: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <InputGroup className="w-80">
+      <InputGroupAddon position="before" variant="icon">
+        <Search className="size-4" />
+      </InputGroupAddon>
+      <InputGroupInput placeholder="搜索文档..." />
+    </InputGroup>
+  ),
+};
+
+export const Url: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <InputGroup className="w-80">
+      <InputGroupAddon position="before">https://</InputGroupAddon>
+      <InputGroupInput defaultValue="example" />
+      <InputGroupAddon position="after">.com</InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
+export const SearchWithButton: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <InputGroup className="w-96">
+      <InputGroupAddon position="before" variant="icon">
+        <Search className="size-4" />
+      </InputGroupAddon>
+      <InputGroupInput placeholder="输入关键词..." />
+      <InputGroupAddon position="after" variant="button">
+        <Button variant="ghost" size="sm">
+          搜索
+        </Button>
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
+export const TextareaWithSend: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <InputGroup className="w-96 items-end">
+      <InputGroupTextarea rows={3} placeholder="发表评论..." />
+      <InputGroupAddon position="after" variant="button">
+        <Button size="icon" icon={<Send />} aria-label="发送" />
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <InputGroup className="w-80" disabled>
+      <InputGroupAddon position="before">@</InputGroupAddon>
+      <InputGroupInput defaultValue="alice" disabled />
+    </InputGroup>
+  ),
+};

package/src/components/input-group/input-group.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+
+export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 整组禁用样式(子项请单独传 `disabled`,这里仅影响视觉上的 opacity)。
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Input + addon 统一容器 — shadcn 2025-10 新增,等价 antd `Input` 的
+ * `prefix` / `suffix` / `addonBefore` / `addonAfter` 集合,但拆为更通用的
+ * **复合插槽**:`<InputGroupAddon position="before|after">`(addon)+
+ * `<InputGroupInput>` / `<InputGroupTextarea>`(主体),按需嵌套图标 / 按钮 / 文本。
+ */
+const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  ({ className, disabled, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-disabled={disabled ? '' : undefined}
+      className={cn(
+        'flex w-full items-stretch overflow-hidden rounded-md border border-input bg-background shadow-sm',
+        'focus-within:ring-1 focus-within:ring-ring',
+        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+InputGroup.displayName = 'InputGroup';
+
+export interface InputGroupAddonProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 位于输入框的哪一侧。
+   * @default "before"
+   */
+  position?: 'before' | 'after';
+  /**
+   * `text` = 默认 muted 文本背景 / `icon` = 紧凑、透明背景(图标专用)/
+   * `button` = 用于嵌入 `<Button>`(去内边距)。
+   * @default "text"
+   */
+  variant?: 'text' | 'icon' | 'button';
+}
+
+const InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(
+  ({ position = 'before', variant = 'text', className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-position={position}
+      className={cn(
+        'flex shrink-0 items-center',
+        variant === 'text' &&
+          'border-input bg-muted px-3 text-sm text-muted-foreground',
+        variant === 'icon' && 'px-2 text-muted-foreground',
+        variant === 'button' && '[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none',
+        position === 'before' && variant !== 'icon' && 'border-r',
+        position === 'after' && variant !== 'icon' && 'border-l',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+InputGroupAddon.displayName = 'InputGroupAddon';
+
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type = 'text', ...props }, ref) => (
+  <input
+    ref={ref}
+    type={type}
+    className={cn(
+      'flex h-9 w-full min-w-0 flex-1 bg-transparent px-3 py-1 text-sm placeholder:text-muted-foreground',
+      'focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroupInput.displayName = 'InputGroupInput';
+
+const InputGroupTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, rows = 3, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    rows={rows}
+    className={cn(
+      'flex w-full min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground',
+      'focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroupTextarea.displayName = 'InputGroupTextarea';
+
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea };