@meta-1/design 0.0.166 → 0.0.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.166",
+  "version": "0.0.168",
   "keywords": [
     "easykit",
     "design",
@@ -25,6 +25,7 @@
     "@radix-ui/react-alert-dialog": "1.1.2",
     "@radix-ui/react-avatar": "1.1.1",
     "@radix-ui/react-checkbox": "1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-dismissable-layer": "1.1.1",
     "@radix-ui/react-dropdown-menu": "2.1.2",

package/src/components/ui/context-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@meta-1/design/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

package/src/components/uix/tags-input/README.md

@@ -0,0 +1,136 @@
+# TagsInput 组件
+
+一个功能丰富的标签输入组件，支持添加、删除标签，带有验证、最大数量限制等特性。
+
+## 功能特性
+
+- ✅ 受控/非受控模式
+- ✅ 键盘操作（Enter 添加，Backspace 删除）
+- ✅ 自定义分隔符（默认逗号）
+- ✅ 标签验证
+- ✅ 最大标签数量限制
+- ✅ 最大标签长度限制
+- ✅ 禁止重复标签
+- ✅ 自定义标签渲染
+- ✅ 完整的事件回调
+- ✅ 禁用状态
+- ✅ 自定义样式
+
+## 基础用法
+
+```tsx
+import { TagsInput } from "@meta-1/design";
+
+function App() {
+  const [tags, setTags] = useState<string[]>([]);
+
+  return (
+    <TagsInput
+      value={tags}
+      onChange={setTags}
+      placeholder="输入标签后按 Enter..."
+    />
+  );
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| value | `string[]` | - | 受控模式的标签值 |
+| defaultValue | `string[]` | `[]` | 非受控模式的默认值 |
+| onChange | `(value: string[]) => void` | - | 标签变化回调 |
+| placeholder | `string` | - | 输入框占位符 |
+| className | `string` | - | 容器类名 |
+| inputClassName | `string` | - | 输入框类名 |
+| tagClassName | `string` | - | 标签类名 |
+| maxTags | `number` | - | 最大标签数量 |
+| maxLength | `number` | - | 单个标签最大长度 |
+| allowDuplicates | `boolean` | `false` | 是否允许重复标签 |
+| separator | `string \| RegExp` | `","` | 分隔符 |
+| validate | `(tag: string) => boolean` | - | 标签验证函数 |
+| disabled | `boolean` | `false` | 是否禁用 |
+| onTagAdd | `(tag: string) => void` | - | 添加标签回调 |
+| onTagRemove | `(tag: string) => void` | - | 删除标签回调 |
+| renderTag | `(tag: string, index: number, remove: () => void) => ReactNode` | - | 自定义标签渲染 |
+
+## 使用示例
+
+### 最大数量限制
+
+```tsx
+<TagsInput
+  maxTags={5}
+  value={tags}
+  onChange={setTags}
+  placeholder="最多 5 个标签"
+/>
+```
+
+### 自定义验证
+
+```tsx
+<TagsInput
+  validate={(tag) => /^[a-zA-Z0-9]+$/.test(tag)}
+  value={tags}
+  onChange={setTags}
+  placeholder="只允许字母和数字"
+/>
+```
+
+### 禁止重复
+
+```tsx
+<TagsInput
+  allowDuplicates={false}
+  value={tags}
+  onChange={setTags}
+  placeholder="不允许重复标签"
+/>
+```
+
+### 自定义标签渲染
+
+```tsx
+<TagsInput
+  renderTag={(tag, index, remove) => (
+    <div className="custom-tag">
+      #{tag}
+      <button onClick={remove}>×</button>
+    </div>
+  )}
+  value={tags}
+  onChange={setTags}
+/>
+```
+
+### 事件回调
+
+```tsx
+<TagsInput
+  onTagAdd={(tag) => console.log("添加:", tag)}
+  onTagRemove={(tag) => console.log("删除:", tag)}
+  value={tags}
+  onChange={setTags}
+/>
+```
+
+## 键盘操作
+
+- **Enter**: 添加当前输入的标签
+- **Backspace**: 当输入框为空时，删除最后一个标签
+- **分隔符** (默认逗号): 添加标签
+
+## 样式自定义
+
+组件支持通过 `className`、`inputClassName` 和 `tagClassName` 来自定义样式：
+
+```tsx
+<TagsInput
+  className="border-primary"
+  tagClassName="bg-primary text-primary-foreground"
+  inputClassName="text-lg"
+/>
+```
+

package/src/components/uix/tags-input/index.tsx

@@ -0,0 +1,212 @@
+import { forwardRef, type KeyboardEvent, useEffect, useRef, useState } from "react";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@meta-1/design/lib";
+
+export interface TagsInputProps {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  tagClassName?: string;
+  maxTags?: number;
+  maxLength?: number;
+  allowDuplicates?: boolean;
+  separator?: string | RegExp;
+  validate?: (tag: string) => boolean;
+  disabled?: boolean;
+  onTagAdd?: (tag: string) => void;
+  onTagRemove?: (tag: string) => void;
+  renderTag?: (tag: string, index: number, remove: () => void) => React.ReactNode;
+}
+
+export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>((props, ref) => {
+  const {
+    value,
+    defaultValue = [],
+    onChange,
+    placeholder,
+    className,
+    inputClassName,
+    tagClassName,
+    maxTags,
+    maxLength,
+    allowDuplicates = false,
+    separator = ",",
+    validate,
+    disabled = false,
+    onTagAdd,
+    onTagRemove,
+    renderTag,
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [inputValue, setInputValue] = useState("");
+  const [tags, setTags] = useState<string[]>(value || defaultValue);
+
+  const isControlled = value !== undefined;
+  const currentTags = isControlled ? value : tags;
+
+  useEffect(() => {
+    if (isControlled) {
+      setTags(value);
+    }
+  }, [value, isControlled]);
+
+  const handleChange = (newTags: string[]) => {
+    if (!isControlled) {
+      setTags(newTags);
+    }
+    onChange?.(newTags);
+  };
+
+  const addTag = (tag: string) => {
+    const trimmedTag = tag.trim();
+
+    if (!trimmedTag) return;
+
+    // 验证标签
+    if (validate && !validate(trimmedTag)) return;
+
+    // 检查最大数量
+    if (maxTags && currentTags.length >= maxTags) return;
+
+    // 检查重复
+    if (!allowDuplicates && currentTags.includes(trimmedTag)) return;
+
+    const newTags = [...currentTags, trimmedTag];
+    handleChange(newTags);
+    onTagAdd?.(trimmedTag);
+    setInputValue("");
+  };
+
+  const removeTag = (index: number) => {
+    const tag = currentTags[index];
+    const newTags = currentTags.filter((_, i) => i !== index);
+    handleChange(newTags);
+    onTagRemove?.(tag);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+
+    // Enter 或分隔符键
+    if (e.key === "Enter" || (typeof separator === "string" && e.key === separator)) {
+      e.preventDefault();
+      if (value) {
+        addTag(value);
+      }
+      return;
+    }
+
+    // Backspace 删除最后一个标签
+    if (e.key === "Backspace" && !value && currentTags.length > 0) {
+      e.preventDefault();
+      removeTag(currentTags.length - 1);
+      return;
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+
+    // 检查是否包含分隔符
+    if (separator) {
+      const parts = typeof separator === "string" ? value.split(separator) : value.split(separator);
+
+      if (parts.length > 1) {
+        // 添加所有非空部分（除了最后一个）
+        parts.slice(0, -1).forEach((part) => {
+          if (part.trim()) {
+            addTag(part);
+          }
+        });
+        // 保留最后一部分作为输入值
+        setInputValue(parts[parts.length - 1]);
+        return;
+      }
+    }
+
+    // 检查最大长度
+    if (maxLength && value.length > maxLength) return;
+
+    setInputValue(value);
+  };
+
+  const handleBlur = () => {
+    if (inputValue.trim()) {
+      addTag(inputValue);
+    }
+  };
+
+  const handleContainerClick = () => {
+    inputRef.current?.focus();
+  };
+
+  const defaultRenderTag = (tag: string, index: number, remove: () => void) => (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-sm transition-colors",
+        "hover:bg-secondary/80",
+        disabled && "pointer-events-none opacity-50",
+        tagClassName,
+      )}
+      key={`${tag}-${index}`}
+    >
+      <span className="max-w-[200px] truncate">{tag}</span>
+      {!disabled && (
+        <button
+          className="inline-flex items-center justify-center rounded-sm opacity-70 hover:opacity-100 focus:outline-none"
+          onClick={(e) => {
+            e.stopPropagation();
+            remove();
+          }}
+          type="button"
+        >
+          <XIcon className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-9 w-full flex-wrap gap-1.5 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow]",
+        "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        "dark:bg-input/30",
+        className,
+      )}
+      onClick={handleContainerClick}
+      ref={ref}
+    >
+      {currentTags.map((tag, index) =>
+        renderTag
+          ? renderTag(tag, index, () => removeTag(index))
+          : defaultRenderTag(tag, index, () => removeTag(index)),
+      )}
+
+      <input
+        className={cn(
+          "min-w-[120px] flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+          "disabled:pointer-events-none disabled:cursor-not-allowed",
+          inputClassName,
+        )}
+        disabled={disabled || (maxTags !== undefined && currentTags.length >= maxTags)}
+        onBlur={handleBlur}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder={currentTags.length === 0 ? placeholder : undefined}
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+      />
+    </div>
+  );
+});
+
+TagsInput.displayName = "TagsInput";

package/src/index.ts

@@ -28,6 +28,23 @@ export {
   CommandSeparator,
   CommandShortcut,
 } from "./components/ui/command";
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./components/ui/context-menu";
 export * from "./components/ui/dropdown-menu";
 export {
   HoverCard,
@@ -78,10 +95,10 @@ export {
 } from "./components/ui/table";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 export { Textarea } from "./components/ui/textarea";
+// extend
 export type { ActionProps } from "./components/uix/action";
 export { Action } from "./components/uix/action";
 export type { AlertProps } from "./components/uix/alert";
-// extend
 export { Alert } from "./components/uix/alert";
 export type { ConfirmProps } from "./components/uix/alert-dialog";
 export { useAlert } from "./components/uix/alert-dialog";
@@ -141,6 +158,8 @@ export type { StepsItemProps, StepsProps } from "./components/uix/steps";
 export { Steps, StepsItem } from "./components/uix/steps";
 export type { SwitchProps } from "./components/uix/switch";
 export { Switch } from "./components/uix/switch";
+export type { TagsInputProps } from "./components/uix/tags-input";
+export { TagsInput } from "./components/uix/tags-input";
 export type { TooltipProps } from "./components/uix/tooltip";
 export { Tooltip } from "./components/uix/tooltip";
 export type { TreeData, TreeProps } from "./components/uix/tree";