@teamix-evo/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,258 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Loader2Icon, MailIcon, SearchIcon } from 'lucide-react';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupClear,
+  InputGroupInput,
+  InputGroupPasswordToggle,
+  InputGroupShowCount,
+  InputGroupText,
+  InputGroupTextarea,
+} from './index';
+
+const meta: Meta<typeof InputGroup> = {
+  title: '数据录入 · Data Entry/InputGroup 输入框组合',
+  component: InputGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '复合输入容器：通过 `InputGroupAddon` + `InputGroupInput | InputGroupTextarea` 自由组合图标 / 按钮 / 文本插槽。配套 helper 原子 `InputGroupClear` / `InputGroupPasswordToggle` / `InputGroupShowCount` 覆盖清除、密码切换、字符计数高频场景。',
+      },
+      source: { type: 'dynamic' },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 前置图标插槽，聚焦时整体高亮。 */
+export const WithLeadingIcon: Story = {
+  render: () => (
+    <InputGroup className="w-64">
+      <InputGroupAddon>
+        <InputGroupText>
+          <SearchIcon />
+        </InputGroupText>
+      </InputGroupAddon>
+      <InputGroupInput placeholder="搜索..." />
+    </InputGroup>
+  ),
+};
+
+/**
+ * 搜索场景：左侧 SearchIcon + 右侧 InputGroupClear 受控清除按钮。
+ * 仅当 value 非空时显示清除按钮。
+ */
+export const Search: Story = {
+  render: function SearchStory() {
+    const [value, setValue] = useState('');
+    return (
+      <InputGroup className="w-64">
+        <InputGroupAddon>
+          <InputGroupText>
+            <SearchIcon />
+          </InputGroupText>
+        </InputGroupAddon>
+        <InputGroupInput
+          placeholder="搜索..."
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <InputGroupAddon align="inline-end">
+          <InputGroupClear
+            visible={value.length > 0}
+            onClick={() => setValue('')}
+          />
+        </InputGroupAddon>
+      </InputGroup>
+    );
+  },
+};
+
+/**
+ * 一键清除：使用 `InputGroupClear` helper 受控显示清除按钮，
+ * 仅当 `visible` 为 true 时渲染，点击由父级清空 `value`。
+ */
+export const Clear: Story = {
+  render: function ClearStory() {
+    const [value, setValue] = useState('hello world');
+    return (
+      <InputGroup className="w-64">
+        <InputGroupInput
+          placeholder="输入后展示清除按钮"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <InputGroupAddon align="inline-end">
+          <InputGroupClear
+            visible={value.length > 0}
+            onClick={() => setValue('')}
+          />
+        </InputGroupAddon>
+      </InputGroup>
+    );
+  },
+};
+
+/**
+ * 密码输入：使用 `InputGroupPasswordToggle` 受控版，由父级同时控制 `type` 与 `visible`。
+ */
+export const Password: Story = {
+  render: function PasswordStory() {
+    const [visible, setVisible] = useState(false);
+    return (
+      <InputGroup className="w-64">
+        <InputGroupInput
+          type={visible ? 'text' : 'password'}
+          placeholder="请输入密码"
+        />
+        <InputGroupAddon align="inline-end">
+          <InputGroupPasswordToggle
+            visible={visible}
+            onVisibleChange={setVisible}
+          />
+        </InputGroupAddon>
+      </InputGroup>
+    );
+  },
+};
+
+/** 金额输入：后置货币符号，展示带格式化的数值输入。 */
+export const Currency: Story = {
+  render: function CurrencyStory() {
+    const [value, setValue] = useState('1234.56');
+    const format = (v: string) => {
+      const num = parseFloat(v.replace(/,/g, ''));
+      if (isNaN(num)) return v;
+      return num.toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+    };
+    return (
+      <InputGroup className="w-64">
+        <InputGroupInput
+          placeholder="请输入金额"
+          value={format(value)}
+          onChange={(e) => setValue(e.target.value.replace(/,/g, ''))}
+        />
+        <InputGroupAddon align="inline-end">
+          <InputGroupText>¥</InputGroupText>
+        </InputGroupAddon>
+      </InputGroup>
+    );
+  },
+};
+
+/** 邮箱输入：左侧邮件图标 + 右侧域名后缀文本。 */
+export const Email: Story = {
+  render: () => (
+    <InputGroup className="w-80">
+      <InputGroupAddon>
+        <InputGroupText>
+          <MailIcon />
+        </InputGroupText>
+      </InputGroupAddon>
+      <InputGroupInput placeholder="username" />
+      <InputGroupAddon align="inline-end">
+        <InputGroupText>@example.com</InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
+/** 校验中：右侧旋转 loading 图标，对齐 cloud-design `state="loading"`。 */
+export const Loading: Story = {
+  render: () => (
+    <InputGroup className="w-64">
+      <InputGroupInput placeholder="校验中..." defaultValue="abc@" />
+      <InputGroupAddon align="inline-end">
+        <InputGroupText>
+          <Loader2Icon className="animate-spin" />
+        </InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
+/**
+ * 单行字符计数：使用 `InputGroupShowCount` 显示 `current/max`。
+ * 超过 maxLength 时计数自动转 destructive 色。
+ */
+export const WithCount: Story = {
+  render: function WithCountStory() {
+    const [value, setValue] = useState('');
+    const max = 20;
+    return (
+      <InputGroup className="w-80">
+        <InputGroupInput
+          placeholder="请输入标题"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          maxLength={max}
+        />
+        <InputGroupAddon align="inline-end">
+          <InputGroupShowCount current={value.length} max={max} />
+        </InputGroupAddon>
+      </InputGroup>
+    );
+  },
+};
+
+/**
+ * 多行 + 字符计数：textarea 配合 `block-end` 对齐的计数行，
+ * 对齐 cloud-design `hasLimitHint` 的视觉位置。
+ */
+export const MultilineWithCount: Story = {
+  render: function MultilineWithCountStory() {
+    const [value, setValue] = useState('');
+    const max = 100;
+    return (
+      <InputGroup className="w-80">
+        <InputGroupTextarea
+          placeholder="请输入备注..."
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          rows={4}
+          className="field-sizing-fixed"
+        />
+        <InputGroupAddon align="block-end" className="justify-end">
+          <InputGroupShowCount current={value.length} max={max} />
+        </InputGroupAddon>
+      </InputGroup>
+    );
+  },
+};
+
+/** 禁用状态的输入框组合。 */
+export const Disabled: Story = {
+  render: () => (
+    <InputGroup className="w-64">
+      <InputGroupAddon>
+        <InputGroupText>
+          <SearchIcon />
+        </InputGroupText>
+      </InputGroupAddon>
+      <InputGroupInput placeholder="不可编辑" disabled />
+    </InputGroup>
+  ),
+};
+
+/** 错误态：内部 `InputGroupInput` 透传 `aria-invalid`，整体边框转 destructive 色。 */
+export const Invalid: Story = {
+  render: () => (
+    <InputGroup className="w-64">
+      <InputGroupAddon>
+        <InputGroupText>
+          <MailIcon />
+        </InputGroupText>
+      </InputGroupAddon>
+      <InputGroupInput placeholder="请输入邮箱" aria-invalid="true" />
+    </InputGroup>
+  ),
+};

package/src/components/input-ip/index.tsx

@@ -0,0 +1,288 @@
+/**
+ * IP 地址输入框 InputIP
+ *
+ * 分段式 IPv4 地址输入，支持自动跳段、范围校验和可选 CIDR 掩码选择。
+ *
+ * @when
+ * - 需要用户输入 IPv4 地址时
+ * - 需要带 CIDR 前缀长度的网段输入时（如 192.168.1.0/24）
+ */
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/select';
+
+// ─── Variants ───────────────────────────────────────────────────────────────
+
+const inputIpVariants = cva(
+  [
+    // `w-fit` 显式锁定“宽度 = 内容”，避免被 flex/grid 父容器 cross-axis stretch 拉满。
+    // 消费方需要铺满父容器时，可通过 className="w-full" 覆盖。
+    'inline-flex w-fit items-center rounded-md border border-input bg-transparent transition-colors',
+    'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    'aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-1 aria-[invalid=true]:ring-destructive/20',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'h-6 text-xs',
+        default: 'h-8 text-xs',
+        lg: 'h-9 text-sm',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+export type InputIPSize = NonNullable<
+  VariantProps<typeof inputIpVariants>['size']
+>;
+
+export interface InputIPProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    'onChange' | 'defaultValue'
+  > {
+  /** 尺寸。 @default "default" */
+  size?: InputIPSize;
+  /** 受控值，格式 "x.x.x.x" 或 "x.x.x.x/prefix"。 */
+  value?: string;
+  /** 非受控初值。 */
+  defaultValue?: string;
+  /** 值变化回调。 */
+  onChange?: (value: string) => void;
+  /** 是否显示 CIDR 前缀选择。 @default false */
+  showCidr?: boolean;
+  /** CIDR 前缀可选范围。 @default [0..32] */
+  cidrOptions?: number[];
+  /** 禁用态。 @default false */
+  disabled?: boolean;
+  /** placeholder，按段用 "." 分隔。 @default "0.0.0.0" */
+  placeholder?: string;
+}
+
+function parseIp(val: string | undefined): { octets: string[]; cidr: string } {
+  if (!val) return { octets: ['', '', '', ''], cidr: '' };
+  const parts = val.split('/');
+  const ip = parts[0] || '';
+  const cidr = parts[1] ?? '';
+  const segs = ip.split('.');
+  return {
+    octets: [segs[0] ?? '', segs[1] ?? '', segs[2] ?? '', segs[3] ?? ''],
+    cidr,
+  };
+}
+
+function clampOctet(val: string): string {
+  if (val === '') return '';
+  const num = parseInt(val, 10);
+  if (isNaN(num)) return '';
+  return String(Math.min(255, Math.max(0, num)));
+}
+
+const DEFAULT_CIDR_OPTIONS = Array.from({ length: 33 }, (_, i) => i);
+
+const InputIP = React.forwardRef<HTMLDivElement, InputIPProps>(
+  (
+    {
+      className,
+      size = 'default',
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      showCidr = false,
+      cidrOptions = DEFAULT_CIDR_OPTIONS,
+      disabled = false,
+      placeholder = '0.0.0.0',
+      'aria-invalid': ariaInvalid,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const parsed = parseIp(isControlled ? controlledValue : undefined);
+    const [internalOctets, setInternalOctets] = React.useState<string[]>(
+      () => parseIp(defaultValue).octets,
+    );
+    const [internalCidr, setInternalCidr] = React.useState<string>(
+      () => parseIp(defaultValue).cidr,
+    );
+
+    const octets = isControlled ? parsed.octets : internalOctets;
+    const cidr = isControlled ? parsed.cidr : internalCidr;
+
+    const inputRefs = React.useRef<(HTMLInputElement | null)[]>([]);
+    const placeholderParts = placeholder.split('.');
+
+    function emitChange(newOctets: string[], newCidr: string) {
+      const ip = newOctets.join('.');
+      const full = showCidr && newCidr ? `${ip}/${newCidr}` : ip;
+      onChange?.(full);
+    }
+
+    function handleOctetChange(index: number, rawValue: string) {
+      const numeric = rawValue.replace(/[^0-9]/g, '').slice(0, 3);
+      const clamped = clampOctet(numeric);
+      const next = [...octets];
+      next[index] = clamped;
+
+      if (!isControlled) setInternalOctets(next);
+      emitChange(next, cidr);
+
+      if (
+        clamped.length === 3 ||
+        (clamped.length > 0 && parseInt(clamped, 10) > 25)
+      ) {
+        if (index < 3) {
+          inputRefs.current[index + 1]?.focus();
+          inputRefs.current[index + 1]?.select();
+        }
+      }
+    }
+
+    function handleKeyDown(index: number, e: React.KeyboardEvent) {
+      const currentValue = octets[index] ?? '';
+      if (e.key === '.' || e.key === 'ArrowRight') {
+        if (
+          e.key === '.' ||
+          (e.key === 'ArrowRight' &&
+            (e.currentTarget as HTMLInputElement).selectionStart ===
+              currentValue.length)
+        ) {
+          if (index < 3) {
+            e.preventDefault();
+            inputRefs.current[index + 1]?.focus();
+            inputRefs.current[index + 1]?.select();
+          }
+        }
+      } else if (e.key === 'ArrowLeft') {
+        if (
+          (e.currentTarget as HTMLInputElement).selectionStart === 0 &&
+          index > 0
+        ) {
+          e.preventDefault();
+          inputRefs.current[index - 1]?.focus();
+        }
+      } else if (e.key === 'Backspace') {
+        if (currentValue === '' && index > 0) {
+          e.preventDefault();
+          inputRefs.current[index - 1]?.focus();
+        }
+      }
+    }
+
+    function handleCidrChange(newCidr: string) {
+      if (!isControlled) setInternalCidr(newCidr);
+      emitChange(octets, newCidr);
+    }
+
+    function handlePaste(e: React.ClipboardEvent) {
+      const text = e.clipboardData.getData('text').trim();
+      const ipMatch = text.match(
+        /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})(?:\/(\d{1,2}))?$/,
+      );
+      if (ipMatch) {
+        e.preventDefault();
+        const newOctets = [
+          clampOctet(ipMatch[1]!),
+          clampOctet(ipMatch[2]!),
+          clampOctet(ipMatch[3]!),
+          clampOctet(ipMatch[4]!),
+        ];
+        const newCidr = ipMatch[5] ?? cidr;
+        if (!isControlled) {
+          setInternalOctets(newOctets);
+          setInternalCidr(newCidr);
+        }
+        emitChange(newOctets, newCidr);
+        inputRefs.current[3]?.focus();
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        data-slot="input-ip"
+        aria-invalid={ariaInvalid}
+        data-disabled={disabled || undefined}
+        className={cn(
+          inputIpVariants({ size }),
+          disabled && 'cursor-not-allowed opacity-50',
+          className,
+        )}
+        onPaste={handlePaste}
+        {...props}
+      >
+        {octets.map((octet, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && (
+              <span className="select-none text-muted-foreground">.</span>
+            )}
+            <input
+              ref={(el) => {
+                inputRefs.current[i] = el;
+              }}
+              type="text"
+              inputMode="numeric"
+              aria-label={`IP 地址第 ${i + 1} 段`}
+              className={cn(
+                'w-10 cursor-text border-0 bg-transparent text-center outline-none placeholder:text-muted-foreground/60',
+                size === 'sm' && 'w-8',
+                size === 'lg' && 'w-12',
+              )}
+              value={octet}
+              placeholder={placeholderParts[i] ?? '0'}
+              disabled={disabled}
+              onChange={(e) => handleOctetChange(i, e.target.value)}
+              onKeyDown={(e) => handleKeyDown(i, e)}
+            />
+          </React.Fragment>
+        ))}
+        {showCidr && (
+          <>
+            <span className="select-none px-0.5 text-muted-foreground">/</span>
+            <Select
+              value={cidr || undefined}
+              onValueChange={handleCidrChange}
+              disabled={disabled}
+            >
+              <SelectTrigger
+                aria-label="CIDR 前缀长度"
+                data-embedded="true"
+                className={cn(
+                  // 内嵌于 InputIP：去除自身 border / shadow / focus ring，
+                  // 由外层容器的 focus-within 状态统一接管。
+                  // `data-embedded="true"` 使 uni-manager 主题的全局 hover 阴影规则豁免。
+                  'gap-0.5 border-0 bg-transparent px-1 shadow-none ring-0 focus-visible:border-0 focus-visible:ring-0 data-[size=default]:h-full data-[size=sm]:h-full',
+                  size === 'sm' && 'min-w-9 text-xs',
+                  size === 'default' && 'min-w-10 text-xs',
+                  size === 'lg' && 'min-w-11 text-sm',
+                )}
+              >
+                <SelectValue placeholder="/" />
+              </SelectTrigger>
+              <SelectContent>
+                {cidrOptions.map((n) => (
+                  <SelectItem key={n} value={String(n)}>
+                    {n}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </>
+        )}
+      </div>
+    );
+  },
+);
+InputIP.displayName = 'InputIP';
+
+export { InputIP };

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

@@ -0,0 +1,48 @@
+# InputIP
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+IP 地址输入框 InputIP
+分段式 IPv4 地址输入，支持自动跳段、范围校验和可选 CIDR 掩码选择。
+
+## 使用场景
+
+- 需要用户输入 IPv4 地址时
+- 需要带 CIDR 前缀长度的网段输入时（如 192.168.1.0/24）
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `size` | `InputIPSize` | `"default"` | – | 尺寸。 |
+| `value` | `string` | – | – | 受控值，格式 "x.x.x.x" 或 "x.x.x.x/prefix"。 |
+| `defaultValue` | `string` | – | – | 非受控初值。 |
+| `onChange` | `(value: string) => void` | – | – | 值变化回调。 |
+| `showCidr` | `boolean` | `false` | – | 是否显示 CIDR 前缀选择。 |
+| `cidrOptions` | `number[]` | `[0..32]` | – | CIDR 前缀可选范围。 |
+| `disabled` | `boolean` | `false` | – | 禁用态。 |
+| `placeholder` | `string` | `"0.0.0.0"` | – | placeholder，按段用 "." 分隔。 |
+
+## 示例
+
+### Sizes
+
+三种尺寸。
+
+```tsx
+<div className="flex flex-col gap-3">
+  <InputIP size="sm" className="w-44" defaultValue="10.0.0.1" />
+  <InputIP size="default" className="w-52" defaultValue="172.16.0.1" />
+  <InputIP size="lg" className="w-60" defaultValue="192.168.1.1" />
+</div>
+```
+
+### Invalid
+
+错误态（校验失败）。
+
+```tsx
+<InputIP className="w-52" defaultValue="999.0.0.1" aria-invalid="true" />
+```

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

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputIP } from './index';
+
+const meta: Meta<typeof InputIP> = {
+  title: '数据录入 · Data Entry/InputIP IP地址输入',
+  component: InputIP,
+  tags: ['autodocs'],
+  parameters: {
+    docs: { source: { type: 'dynamic' } },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 基础 IPv4 地址输入。容器 inline-flex 自适应宽度，不需额外设定。 */
+export const Default: Story = {
+  render: () => <InputIP />,
+};
+
+/** 受控模式，外部管理 value。 */
+export const Controlled: Story = {
+  render: function ControlledStory() {
+    const [value, setValue] = useState('192.168.1.1');
+    return (
+      <div className="flex flex-col gap-2">
+        <InputIP value={value} onChange={setValue} />
+        <span className="text-xs text-muted-foreground">当前值：{value}</span>
+      </div>
+    );
+  },
+};
+
+/** 带 CIDR 前缀选择的网段输入。右侧 CIDR 选择器使用 ui Select。 */
+export const WithCidr: Story = {
+  render: function CidrStory() {
+    const [value, setValue] = useState('192.168.1.0/24');
+    return (
+      <div className="flex flex-col gap-2">
+        <InputIP showCidr value={value} onChange={setValue} />
+        <span className="text-xs text-muted-foreground">当前值：{value}</span>
+      </div>
+    );
+  },
+};
+
+/** 三种尺寸。 */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <InputIP size="sm" className="w-44" defaultValue="10.0.0.1" />
+      <InputIP size="default" className="w-52" defaultValue="172.16.0.1" />
+      <InputIP size="lg" className="w-60" defaultValue="192.168.1.1" />
+    </div>
+  ),
+};
+
+/** 禁用态。 */
+export const Disabled: Story = {
+  render: () => <InputIP className="w-52" defaultValue="10.0.0.1" disabled />,
+};
+
+/** 错误态（校验失败）。 */
+export const Invalid: Story = {
+  render: () => (
+    <InputIP className="w-52" defaultValue="999.0.0.1" aria-invalid="true" />
+  ),
+};