@teamix-evo/ui 0.2.0 → 0.3.0

package/src/utils/trigger-input.ts

@@ -0,0 +1,53 @@
+import { parse as parseDate, isValid as isValidDate } from 'date-fns';
+
+import { cn } from '@/utils/cn';
+
+/**
+ * Trigger wrapper —— input 可输入模式下,wrapper 承担 border + focus-within 视觉态,
+ * 内部 input 元素去掉自己的边框 / ring,共享 wrapper 的视觉态。
+ * hover / focus 走"灰色 border 加深"(antd 风格),不走蓝色 ring,避免与 popover 弹层视觉抢戏。
+ *
+ * 被 DatePicker / DateRangePicker / TimePicker / TimeRangePicker 共用,
+ * 确保 4 个 picker 的 trigger 视觉完全一致。
+ */
+export const triggerWrapperClass = cn(
+  'flex items-center gap-2 rounded-lg border border-input bg-background px-3 shadow-sm transition-colors',
+  'hover:border-foreground/30 focus-within:border-foreground/60 focus-within:outline-none',
+  '[&:has(input:disabled)]:cursor-not-allowed [&:has(input:disabled)]:opacity-50',
+);
+
+/** Input 元素 className —— 透明、无边框、占满 wrapper 剩余空间。 */
+export const inputElementClass =
+  'min-w-0 grow bg-transparent text-foreground outline-none tabular-nums placeholder:text-muted-foreground disabled:cursor-not-allowed';
+
+/** Trigger 高度尺寸(对齐 Input / Button 三档)。 */
+export const triggerSizeClass = {
+  sm: 'h-7 text-xs',
+  default: 'h-8 text-sm',
+  md: 'h-8 text-sm',
+  lg: 'h-9 text-base',
+} as const;
+
+export type TriggerSize = keyof typeof triggerSizeClass;
+
+/**
+ * 按指定 format 解析日期文本。
+ * - 成功:返回 Date 实例
+ * - 失败(非法、空、Invalid Date):返回 undefined
+ */
+export const tryParseDate = (
+  text: string,
+  format: string,
+): Date | undefined => {
+  const trimmed = text.trim();
+  if (!trimmed) return undefined;
+  const parsed = parseDate(trimmed, format, new Date());
+  return isValidDate(parsed) ? parsed : undefined;
+};
+
+/** 比较两个 Date 是否相等(都为 undefined 也算相等)。 */
+export const datesEqual = (a: Date | undefined, b: Date | undefined) => {
+  if (a == null && b == null) return true;
+  if (a == null || b == null) return false;
+  return a.getTime() === b.getTime();
+};

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

@@ -1,101 +0,0 @@
----
-id: button-group
-name: ButtonGroup
-type: component
-category: form
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 按钮组
----
-
-# ButtonGroup 按钮组
-
-按钮组 — shadcn 2025-10 新增,**等价 antd `Space.Compact`**(v6 替代旧 `Button.Group`)。把多个按钮 / 输入框"粘"在一起共享边线,用于 Split Button、Toolbar、Input + Button 拼装等场景。配 `ButtonGroupText` 渲染只读 addon 文本。
-
-## When to use
-
-- Split Button(主操作 + 右侧下拉箭头)
-- Toolbar(同语义按钮集合,如 "上一页 / 下一页 / 跳转")
-- Input + 按钮拼装(搜索框、单位选择)
-- 多档切换显示(配 `Toggle` 也可,但 ToggleGroup 更专精)
-
-## When NOT to use
-
-- 互斥单选切换 → `ToggleGroup`(语义更强)
-- 不相干的按钮 → 普通 `Button` + flex gap
-
-## Props
-
-<!-- auto:props:begin -->
-
-| 名称          | 类型                         | 默认值         | 必填 | 说明                                                                                      |
-| ------------- | ---------------------------- | -------------- | ---- | ----------------------------------------------------------------------------------------- |
-| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | –    | 排列方向。                                                                                |
-| `attached`    | `boolean`                    | `true`         | –    | 是否把按钮"粘"在一起去除边距(antd `Space.Compact` 等价行为)— `false` 时按钮间留 8px gap。 |
-
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-
-### 同库依赖
-
-> `teamix-evo ui add button-group` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add class-variance-authority@^0.7.0
-```
-
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`attached=true`(默认)子项之间边线共享**:第一项 / 最后一项保留外侧圆角,中间项去除圆角;**不要**在内部再设 `rounded`
-- **混用 Input + Button**:把 Input 直接放进 ButtonGroup,它的 `rounded-md` 也会被组件圈圆角(无需特殊处理)
-- **`ButtonGroupText`** 用于只读 addon(`https://` 前缀、`/月` 后缀);**不要**把它当按钮点击
-- **vertical 模式** 适合工具栏侧边小集合,horizontal 是默认推荐
-- **不要**在 ButtonGroup 内放 spinner / icon-only 与文字按钮混排时,高度需要靠 button `size` 对齐 — 子项尺寸应一致
-
-## Examples
-
-```tsx
-import { ButtonGroup, ButtonGroupText } from '@/components/ui/button-group';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { ChevronDown } from 'lucide-react';
-
-// Split button
-<ButtonGroup>
-  <Button>保存</Button>
-  <Button variant="default" size="icon" icon={<ChevronDown />} aria-label="更多" />
-</ButtonGroup>
-
-// Toolbar
-<ButtonGroup>
-  <Button variant="outline">上一页</Button>
-  <Button variant="outline">1 / 10</Button>
-  <Button variant="outline">下一页</Button>
-</ButtonGroup>
-
-// 带 addon 文本
-<ButtonGroup>
-  <ButtonGroupText>https://</ButtonGroupText>
-  <Input defaultValue="example.com" className="rounded-l-none" />
-  <Button>访问</Button>
-</ButtonGroup>
-
-// 不粘连(留间距)
-<ButtonGroup attached={false}>
-  <Button variant="outline">取消</Button>
-  <Button>确定</Button>
-</ButtonGroup>
-```

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

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ChevronDown } from 'lucide-react';
-import { ButtonGroup, ButtonGroupText } from './button-group';
-import { Button } from '@/components/button/button';
-import { Input } from '@/components/input/input';
-
-const meta: Meta<typeof ButtonGroup> = {
-  title: '表单与输入 · Form/ButtonGroup',
-  component: ButtonGroup,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '按钮组 — 把多个按钮 / 输入框粘在一起共享边线（Split Button、Toolbar、Input + Button 拼装）。配 ButtonGroupText 渲染只读 addon。shadcn 2025-10 新增，等价 antd `Space.Compact`（v6 替代旧 `Button.Group`）。',
-      },
-    },
-  },
-  argTypes: {
-    orientation: {
-      control: 'inline-radio',
-      options: ['horizontal', 'vertical'],
-    },
-    attached: { control: 'boolean' },
-  },
-  args: { orientation: 'horizontal', attached: true },
-};
-
-export default meta;
-type Story = StoryObj<typeof ButtonGroup>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <ButtonGroup {...args}>
-      <Button variant="outline">左</Button>
-      <Button variant="outline">中</Button>
-      <Button variant="outline">右</Button>
-    </ButtonGroup>
-  ),
-};
-
-export const SplitButton: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <ButtonGroup>
-      <Button>保存</Button>
-      <Button size="icon" icon={<ChevronDown />} aria-label="更多保存选项" />
-    </ButtonGroup>
-  ),
-};
-
-export const Pager: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <ButtonGroup>
-      <Button variant="outline">上一页</Button>
-      <Button variant="outline">1 / 10</Button>
-      <Button variant="outline">下一页</Button>
-    </ButtonGroup>
-  ),
-};
-
-export const InputAddon: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <ButtonGroup>
-      <ButtonGroupText>https://</ButtonGroupText>
-      <Input defaultValue="example.com" className="rounded-l-none" />
-      <Button>访问</Button>
-    </ButtonGroup>
-  ),
-};
-
-export const Vertical: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <ButtonGroup orientation="vertical">
-      <Button variant="outline">编辑</Button>
-      <Button variant="outline">复制</Button>
-      <Button variant="outline">删除</Button>
-    </ButtonGroup>
-  ),
-};
-
-export const NotAttached: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <ButtonGroup attached={false}>
-      <Button variant="outline">取消</Button>
-      <Button>确定</Button>
-    </ButtonGroup>
-  ),
-};

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

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-
-const buttonGroupVariants = cva('inline-flex isolate', {
-  variants: {
-    orientation: {
-      horizontal:
-        'flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:-ml-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10',
-      vertical:
-        'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:-mt-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10',
-    },
-    attached: {
-      true: '',
-      false: 'gap-2',
-    },
-  },
-  defaultVariants: { orientation: 'horizontal', attached: true },
-});
-
-export interface ButtonGroupProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof buttonGroupVariants> {
-  /**
-   * 排列方向。
-   * @default "horizontal"
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * 是否把按钮"粘"在一起去除边距(antd `Space.Compact` 等价行为)— `false` 时按钮间留 8px gap。
-   * @default true
-   */
-  attached?: boolean;
-}
-
-/**
- * 按钮组容器 — shadcn 2025-10 新增。语义类似 antd `Space.Compact`(v6 替代旧 `Button.Group`):
- * 把多个 `Button` / `Input` 包在一起共享边线,典型场景:
- *   - Split button(左主操作 + 右下拉箭头)
- *   - Toolbar(同语义按钮集合)
- *   - Input + 按钮拼装(`<Input/><Button>搜索</Button>`)
- *
- * 内部不限定子组件类型 — 任何带 `rounded-md` 的元素都会被组件圈圆角。
- */
-const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ orientation, attached, className, ...props }, ref) => (
-    <div
-      ref={ref}
-      role="group"
-      className={cn(buttonGroupVariants({ orientation, attached }), className)}
-      {...props}
-    />
-  ),
-);
-ButtonGroup.displayName = 'ButtonGroup';
-
-// ─── ButtonGroupText(antd-style addon text)──────────────────────────────
-
-const ButtonGroupText = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement>
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    className={cn(
-      'inline-flex h-9 select-none items-center border border-input bg-muted px-3 text-sm text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-));
-ButtonGroupText.displayName = 'ButtonGroupText';
-
-export { ButtonGroup, ButtonGroupText, buttonGroupVariants };

package/src/components/combobox/combobox.meta.md

@@ -1,102 +0,0 @@
----
-id: combobox
-name: Combobox
-type: component
-category: form
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 组合框
----
-
-# Combobox 组合框
-
-可搜索单选下拉 — `Command + Popover` 复合,等价 antd `AutoComplete` / `Select showSearch` 的核心场景。
-**单选**(刻意不做多选,保持语义简单);多选请直接用 `Command` + 自管 selected 数组。
-
-## When to use
-
-- 选项较多需要搜索筛选(国家 / 时区 / 用户列表 / 标签)
-- 选项动态加载(异步 — 在父组件准备数据后传给 `options`)
-
-## When NOT to use
-
-- 选项 ≤ 7 个 → `Select`(无需搜索)
-- 多选 → `Command` 自定义,或 `CheckboxGroup`
-- 自由文本输入 → `Input` + 自定义 suggestion(超出本组件范围)
-
-## Props
-
-<!-- auto:props:begin -->
-
-| 名称                | 类型                        | 默认值        | 必填 | 说明                                         |
-| ------------------- | --------------------------- | ------------- | ---- | -------------------------------------------- |
-| `options`           | `ComboboxOption[]`          | –             | ✓    | 选项列表(antd `AutoComplete.options` 并集)。 |
-| `value`             | `string`                    | –             | –    | 受控 value(单选)。                           |
-| `onChange`          | `(value: string) => void`   | –             | –    | value 变化回调。                             |
-| `placeholder`       | `string`                    | `"请选择..."` | –    | 触发器占位文本(未选)。                       |
-| `searchPlaceholder` | `string`                    | `"搜索..."`   | –    | 搜索框占位文本。                             |
-| `emptyText`         | `string`                    | `"无匹配项"`  | –    | 无匹配时的提示文本。                         |
-| `className`         | `string`                    | `"w-[200px]"` | –    | 触发器宽度。                                 |
-| `disabled`          | `boolean`                   | –             | –    | 是否禁用。                                   |
-| `size`              | `'sm' \| 'default' \| 'lg'` | `"default"`   | –    | 触发器尺寸。                                 |
-
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-
-### 同库依赖
-
-> `teamix-evo ui add combobox` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry     | 类型      | 描述                                                                                    |
-| --------- | --------- | --------------------------------------------------------------------------------------- |
-| `cn`      | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                      |
-| `button`  | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
-| `command` | component | 命令面板 — cmdk(Linear / Raycast 风格),全局搜索 / 命令执行;Combobox 的底座              |
-| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集                                            |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-
-<!-- auto:deps:end -->
-
-> 选项类型 `ComboboxOption`:`{ value: string; label: ReactNode; disabled?: boolean }`。
-
-## AI 生成纪律
-
-- **`value` 稳定**:用业务 ID,不要用 index
-- **`label` 可富节点**:支持图标 + 文本,不止 string
-- **第二次点击当前 value 会清空**:`onChange('')` 触发,业务侧据此实现"取消选择"
-- **大量选项(>1000) → 自定义虚拟滚动**:本组件未集成 virtualizer
-- **异步加载选项**:父组件 fetch 后传 `options`,加 loading 占位符在 options 列表外
-
-## Examples
-
-```tsx
-import { Combobox, type ComboboxOption } from '@/components/ui/combobox';
-import * as React from 'react';
-
-const frameworks: ComboboxOption[] = [
-  { value: 'next', label: 'Next.js' },
-  { value: 'sveltekit', label: 'SvelteKit' },
-  { value: 'nuxt', label: 'Nuxt' },
-  { value: 'remix', label: 'Remix' },
-  { value: 'astro', label: 'Astro' },
-];
-
-const [v, setV] = React.useState('');
-<Combobox
-  options={frameworks}
-  value={v}
-  onChange={setV}
-  placeholder="选择框架"
-  searchPlaceholder="搜索框架..."
-/>;
-```

package/src/components/combobox/combobox.stories.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Combobox, type ComboboxOption } from './combobox';
-
-const meta: Meta<typeof Combobox> = {
-  title: '表单与输入 · Form/Combobox',
-  component: Combobox,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '可搜索单选下拉 — Command + Popover 复合，对标 antd AutoComplete / Select showSearch。键盘可达、模糊搜索、空态、再次选中清空，适合选项数 > 7 的单选场景。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Combobox>;
-
-const frameworks: ComboboxOption[] = [
-  { value: 'next', label: 'Next.js' },
-  { value: 'sveltekit', label: 'SvelteKit' },
-  { value: 'nuxt', label: 'Nuxt' },
-  { value: 'remix', label: 'Remix' },
-  { value: 'astro', label: 'Astro' },
-  { value: 'qwik', label: 'Qwik', disabled: true },
-];
-
-export const Default: Story = {
-  render: () => {
-    const [v, setV] = React.useState('');
-    return (
-      <Combobox
-        options={frameworks}
-        value={v}
-        onChange={setV}
-        placeholder="选择框架"
-        searchPlaceholder="搜索框架..."
-      />
-    );
-  },
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-3">
-      <Combobox options={frameworks} placeholder="sm" size="sm" />
-      <Combobox options={frameworks} placeholder="default" />
-      <Combobox options={frameworks} placeholder="lg" size="lg" />
-    </div>
-  ),
-};

package/src/components/combobox/combobox.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { Check, ChevronsUpDown } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import { Button } from '@/components/button/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/command/command';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/popover/popover';
-
-export interface ComboboxOption {
-  /** 选项值(受控 value 比对的依据,稳定 ID)。 */
-  value: string;
-  /** 显示文本。 */
-  label: React.ReactNode;
-  /** 禁用此选项。 */
-  disabled?: boolean;
-}
-
-export interface ComboboxProps {
-  /** 选项列表(antd `AutoComplete.options` 并集)。 */
-  options: ComboboxOption[];
-  /** 受控 value(单选)。 */
-  value?: string;
-  /** value 变化回调。 */
-  onChange?: (value: string) => void;
-  /** 触发器占位文本(未选)。 @default "请选择..." */
-  placeholder?: string;
-  /** 搜索框占位文本。 @default "搜索..." */
-  searchPlaceholder?: string;
-  /** 无匹配时的提示文本。 @default "无匹配项" */
-  emptyText?: string;
-  /** 触发器宽度。 @default "w-panel-sm" */
-  className?: string;
-  /** 是否禁用。 */
-  disabled?: boolean;
-  /** 触发器尺寸。 @default "default" */
-  size?: 'sm' | 'default' | 'lg';
-}
-
-/**
- * 可搜索单选下拉 — Command + Popover 复合,等价 antd `AutoComplete` /
- * `Select showSearch` 的核心场景。
- *
- * 多选场景请直接用 Command + 自管 selected 数组(本组件刻意不做多选,保持
- * 单选语义清晰)。
- */
-const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
-  (
-    {
-      options,
-      value,
-      onChange,
-      placeholder = '请选择...',
-      searchPlaceholder = '搜索...',
-      emptyText = '无匹配项',
-      className,
-      disabled,
-      size = 'default',
-    },
-    ref,
-  ) => {
-    const [open, setOpen] = React.useState(false);
-    const selected = options.find((o) => o.value === value);
-
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            ref={ref}
-            variant="outline"
-            size={size}
-            disabled={disabled}
-            role="combobox"
-            aria-expanded={open}
-            className={cn(
-              'w-panel-sm justify-between font-normal',
-              !value && 'text-muted-foreground',
-              className,
-            )}
-          >
-            {selected ? selected.label : placeholder}
-            <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-panel-sm p-0">
-          <Command>
-            <CommandInput placeholder={searchPlaceholder} />
-            <CommandList>
-              <CommandEmpty>{emptyText}</CommandEmpty>
-              <CommandGroup>
-                {options.map((opt) => (
-                  <CommandItem
-                    key={opt.value}
-                    value={opt.value}
-                    disabled={opt.disabled}
-                    onSelect={(v) => {
-                      onChange?.(v === value ? '' : v);
-                      setOpen(false);
-                    }}
-                  >
-                    <Check
-                      className={cn(
-                        'mr-2 size-4',
-                        opt.value === value ? 'opacity-100' : 'opacity-0',
-                      )}
-                    />
-                    {opt.label}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-Combobox.displayName = 'Combobox';
-
-export { Combobox };

package/src/components/input/demo/addon.tsx

@@ -1,15 +0,0 @@
-import { Input } from '@/components/ui/input';
-
-/**
- * 前后置标签：通过 `addonBefore` / `addonAfter` 形成 input-group。
- * 常用于域名拼接、协议前缀、单位后缀。
- */
-export default function Demo() {
-  return (
-    <div className="flex w-96 flex-col gap-3">
-      <Input addonBefore="https://" placeholder="example.com" />
-      <Input addonAfter=".teamix.com" placeholder="alice" />
-      <Input addonBefore="https://" addonAfter=".com" placeholder="my-site" />
-    </div>
-  );
-}

package/src/components/input/demo/with-prefix-suffix.tsx

@@ -1,19 +0,0 @@
-import { Search, Mail } from 'lucide-react';
-import { Input } from '@/components/ui/input';
-
-/**
- * 前置 / 后置图标：通过 `prefix` / `suffix` 传任意 ReactNode（图标或文本）。
- * 视觉对齐由组件内部处理，不要再额外用 padding 兼容图标。
- */
-export default function Demo() {
-  return (
-    <div className="flex w-80 flex-col gap-3">
-      <Input prefix={<Search />} placeholder="搜索..." />
-      <Input
-        prefix={<Mail />}
-        suffix={<span className="text-xs">@teamix.com</span>}
-        placeholder="alice"
-      />
-    </div>
-  );
-}