@anker-in/headless-ui 1.1.9-alpha.1764674322345 → 1.1.9-alpha.1764730875779

package/dist/esm/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/index.ts"],
-  "sourcesContent": ["export { default as Button } from './button.js'\nexport { default as Badge } from './badge.js'\nexport { Input, InputSlot } from './input.js'\n\nexport { default as Checkbox } from './checkbox.js'\n\nexport { default as Skeleton } from './skeleton.js'\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n} from './dialog.js'\nexport { Popover, PopoverTrigger, PopoverContent } from './popover.js'\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio.js'\nexport { Text, type TextProps } from './text.js'\nexport { Grid, GridItem, type GridProps, type GridItemProps } from './gird.js'\nexport { Heading, type HeadingProps } from './heading.js'\nexport { Container, type ContainerProps } from './container.js'\nexport { Color, type ColorProps } from './color.js'\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n} from './drawer.js'\nexport { default as Link, type LinkProps } from './link.js'\nexport { Avatar, AvatarImage, AvatarFallback } from './avatar.js'\nexport { default as InputNumber, type InputNumberProps } from './input-number.js'\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n} from './drop-down.js'\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js'\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n} from './carousel.js'\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.js'\nexport { Alert, AlertTitle, AlertDescription } from './alert.js'\nexport { default as Picture } from './picture.js'\nexport { default as Theme } from './theme.js'\nexport { default as Board } from './board.js'\nexport { default as LoadingDots } from './loadingDots.js'\nexport { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js'\n"],
+  "sourcesContent": ["export { default as Button } from './button.js'\nexport { default as Badge } from './badge.js'\nexport { Input, InputSlot } from './input.js'\n\nexport { default as Checkbox } from './checkbox.js'\n\nexport { default as Skeleton } from './skeleton.js'\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n} from './dialog.js'\nexport { Popover, PopoverTrigger, PopoverContent } from './popover.js'\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio.js'\nexport { Text, type TextProps } from './text.js'\nexport { Grid, GridItem, type GridProps, type GridItemProps } from './grid.js'\nexport { Heading, type HeadingProps } from './heading.js'\nexport { Container, type ContainerProps } from './container.js'\nexport { Color, type ColorProps } from './color.js'\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n} from './drawer.js'\nexport { default as Link, type LinkProps } from './link.js'\nexport { Avatar, AvatarImage, AvatarFallback } from './avatar.js'\nexport { default as InputNumber, type InputNumberProps } from './input-number.js'\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n} from './drop-down.js'\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js'\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n} from './carousel.js'\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.js'\nexport { Alert, AlertTitle, AlertDescription } from './alert.js'\nexport { default as Picture } from './picture.js'\nexport { default as Theme } from './theme.js'\nexport { default as Board } from './board.js'\nexport { default as LoadingDots } from './loadingDots.js'\nexport { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js'\n"],
   "mappings": "AAAA,OAAoB,WAAXA,MAAyB,cAClC,OAAoB,WAAXA,MAAwB,aACjC,OAAS,SAAAC,EAAO,aAAAC,MAAiB,aAEjC,OAAoB,WAAXF,MAA2B,gBAEpC,OAAoB,WAAXA,MAA2B,gBACpC,OACE,UAAAG,EACA,gBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAS,WAAAC,EAAS,kBAAAC,EAAgB,kBAAAC,MAAsB,eACxD,OAAS,cAAAC,EAAY,kBAAAC,MAAsE,aAC3F,OAAS,QAAAC,MAA4B,YACrC,OAAS,QAAAC,EAAM,YAAAC,MAAoD,YACnE,OAAS,WAAAC,MAAkC,eAC3C,OAAS,aAAAC,MAAsC,iBAC/C,OAAS,SAAAC,MAA8B,aACvC,OACE,UAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAoB,WAAXjC,MAAuC,YAChD,OAAS,UAAAkC,GAAQ,eAAAC,GAAa,kBAAAC,OAAsB,cACpD,OAAoB,WAAXpC,OAAqD,oBAC9D,OACE,gBAAAqC,GACA,uBAAAC,GACA,uBAAAC,GACA,oBAAAC,GACA,4BAAAC,GACA,yBAAAC,GACA,qBAAAC,GACA,yBAAAC,GACA,wBAAAC,GACA,qBAAAC,GACA,sBAAAC,GACA,mBAAAC,GACA,0BAAAC,GACA,0BAAAC,GACA,0BAAAC,OACK,iBACP,OAAS,QAAAC,GAAM,cAAAC,GAAY,cAAAC,GAAY,aAAAC,GAAW,mBAAAC,GAAiB,eAAAC,OAAmB,YACtF,OAEE,YAAAC,GACA,mBAAAC,GACA,gBAAAC,GACA,oBAAAC,GACA,gBAAAC,OACK,gBACP,OAAS,QAAAC,GAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,YACzD,OAAS,SAAAC,GAAO,cAAAC,GAAY,oBAAAC,OAAwB,aACpD,OAAoB,WAAXrE,OAA0B,eACnC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAA8B,mBACvC,OAAS,oBAAAsE,OAAoD",
   "names": ["default", "Input", "InputSlot", "Dialog", "DialogPortal", "DialogOverlay", "DialogClose", "DialogTrigger", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription", "Popover", "PopoverTrigger", "PopoverContent", "RadioGroup", "RadioGroupItem", "Text", "Grid", "GridItem", "Heading", "Container", "Color", "Drawer", "DrawerPortal", "DrawerOverlay", "DrawerTrigger", "DrawerClose", "DrawerContent", "DrawerHeader", "DrawerFooter", "DrawerTitle", "DrawerDescription", "Avatar", "AvatarImage", "AvatarFallback", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuCheckboxItem", "DropdownMenuRadioItem", "DropdownMenuLabel", "DropdownMenuSeparator", "DropdownMenuShortcut", "DropdownMenuGroup", "DropdownMenuPortal", "DropdownMenuSub", "DropdownMenuSubContent", "DropdownMenuSubTrigger", "DropdownMenuRadioGroup", "Card", "CardHeader", "CardFooter", "CardTitle", "CardDescription", "CardContent", "Carousel", "CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Alert", "AlertTitle", "AlertDescription", "ExposureDetector"]
 }

package/dist/esm/components/input-number.d.ts

@@ -39,6 +39,11 @@ type InputNumberProps = {
     /** 按下回车键时触发*/
     onEnter?: (value: number, e: KeyboardEvent) => void;
 } & VariantProps<typeof InputNumberVariants> & ComponentPropsWithout<'div', RemovedProps>;
+/**
+ * InputNumber - 数字输入框
+ *
+ * @description 专用于数字输入的组件，支持步进调节、最值限制、状态提示和键盘操作
+ */
 declare const InputNumber: React.ForwardRefExoticComponent<{
     /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
     asChild?: boolean | undefined;

package/dist/esm/components/input-number.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/input-number.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { PlusIcon, MinusIcon } from '@radix-ui/react-icons'\nimport React, { useState, useEffect, forwardRef } from 'react'\nimport type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\n// \u5B9A\u4E49 InputNumber \u7684\u6837\u5F0F\u53D8\u4F53\nconst InputNumberVariants = cva('size-full border bg-transparent text-center text-base outline-none', {\n  variants: {\n    status: {\n      default: 'border-lines-1 group-hover:border-lines-2',\n      success: 'border-lines-3 group-hover:border-lines-3',\n      warning: 'border-lines-4 group-hover:border-lines-4',\n      error: 'border-lines-5 group-hover:border-lines-5',\n    },\n    disabled: {\n      true: 'border-lines-1 group-hover:border-lines-1 text-info-quaternary cursor-not-allowed',\n    },\n  },\n})\n\ntype ColorType = 'default' | 'success' | 'warning' | 'error' | null\n\n// \u5B9A\u4E49\u7EC4\u4EF6\u7C7B\u578B\uFF0C\u7EE7\u627F div \u6807\u7B7E\u6807\u51C6\u5C5E\u6027\ntype InputNumberElement = React.ElementRef<'div'>\n\ntype InputNumberProps = {\n  /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u7C7B\u540D*/\n  className?: string\n  /** \u8F93\u5165\u6846\u4E0B\u65B9\u63D0\u793A\u6587\u672C\uFF0C\u4F1A\u6839\u636E\u4E0D\u540C\u7684 status \u5448\u73B0\u4E0D\u540C\u7684\u6837\u5F0F*/\n  tips?: string\n  /** \u6587\u672C\u6846\u72B6\u6001*/\n  status?: ColorType\n  /** \u6570\u5B57\u8F93\u5165\u6846\u7684\u503C */\n  value?: number\n  /** \u6570\u5B57\u8F93\u5165\u6846\u7684\u521D\u59CB\u503C */\n  defaultValue?: number\n  /** \u6570\u503C\u6539\u53D8\u6B65\u6570 */\n  step?: number\n  /** \u6700\u5C0F\u503C */\n  min?: number\n  /** \u6700\u5927\u503C */\n  max?: number\n  /** \u662F\u5426\u7981\u7528*/\n  disabled?: boolean\n  /** \u662F\u5426\u53EA\u8BFB*/\n  readonly?: boolean\n  /** \u6837\u5F0F*/\n  style?: React.CSSProperties\n  /** \u503C\u53D8\u5316\u65F6\u89E6\u53D1*/\n  onChange?: (value: number) => void\n  /** \u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1*/\n  onBlur?: (value: number, e: FocusEvent) => void\n  /** \u6309\u4E0B\u56DE\u8F66\u952E\u65F6\u89E6\u53D1*/\n  onEnter?: (value: number, e: KeyboardEvent) => void\n} & VariantProps<typeof InputNumberVariants> &\n  ComponentPropsWithout<'div', RemovedProps>\n\nconst InputNumber = forwardRef<InputNumberElement, InputNumberProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      step = 1,\n      min = 0,\n      max,\n      tips,\n      style,\n      children,\n      asChild = false,\n      disabled = false,\n      readonly = false,\n      status = 'default',\n      className,\n      onChange,\n      onBlur,\n      onEnter,\n    },\n    ref\n  ) => {\n    const [inputValue, setInputValue] = useState<number | string>(defaultValue)\n\n    const Comp = asChild ? Slot : 'div'\n\n    const baseClassName = cn('border-lines-1 flex size-12 items-center justify-center border text-base', {\n      'group-hover:border-lines-2': !disabled,\n      'text-info-quaternary cursor-not-allowed': disabled,\n    })\n\n    const textColor = (type: ColorType, flag: boolean) => {\n      if (flag) return 'text-lines-1'\n      return {\n        default: 'text-lines-1',\n        success: 'text-lines-3',\n        warning: 'text-lines-4',\n        error: 'text-lines-5',\n      }[type || 'default']\n    }\n\n    const isValue = (params: string) => {\n      return params === '' || /^[0-9]+$/.test(params)\n    }\n\n    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      if (disabled || readonly) return\n      const value = e.target.value\n      // \u5141\u8BB8\u7A7A\u5B57\u7B26\u4E32\uFF0C\u6216\u4EC5\u5305\u542B\u6574\u6570\u7684\u5B57\u7B26\u4E32\n      if (isValue(value)) {\n        setInputValue(value)\n        if (value !== '') {\n          let newValue = Number(value)\n          if (max !== undefined && newValue > max) {\n            newValue = max\n          }\n          if (min !== undefined && newValue < min) {\n            newValue = min\n          }\n          onChange?.(newValue)\n        }\n      }\n    }\n\n    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n      if (disabled || readonly) return\n      if (inputValue === '' || isNaN(Number(inputValue))) {\n        const newValue = min !== undefined ? min : 0\n        setInputValue(newValue)\n        onBlur?.(newValue, e)\n      } else {\n        const newValue = Number(inputValue)\n        setInputValue(newValue)\n        onBlur?.(newValue, e)\n      }\n    }\n\n    const increment = () => {\n      if (disabled || readonly) return\n      let newValue = Number(inputValue) + (step ? Math.ceil(Number(step)) : 1)\n      if (max !== undefined && newValue > max) {\n        newValue = max\n      }\n      setInputValue(newValue)\n      onChange?.(newValue)\n    }\n\n    const decrement = () => {\n      if (disabled || readonly) return\n      let newValue = Number(inputValue) - (step ? Math.ceil(Number(step)) : 1)\n      if (min !== undefined && newValue < min) {\n        newValue = min\n      }\n      setInputValue(newValue)\n      onChange?.(newValue)\n    }\n\n    const handleKeyDown = (e: any) => {\n      if (disabled || readonly) return\n      if (e.key === 'Enter') {\n        const initalValue = e.target?.value\n        onEnter?.(initalValue, e)\n      }\n    }\n\n    useEffect(() => {\n      setInputValue(value || 0)\n    }, [value])\n\n    return (\n      <Comp\n        ref={ref}\n        {...(style ? { style: style } : null)}\n        className={cn({ 'group flex items-center': !asChild }, className)}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            <button onClick={increment} className={baseClassName}>\n              <PlusIcon />\n            </button>\n            <div className=\"relative mx-1.5 h-[52px] w-[105px]\">\n              <input\n                type=\"text\"\n                value={inputValue}\n                disabled={disabled}\n                readOnly={readonly}\n                onBlur={handleBlur}\n                onKeyDown={handleKeyDown}\n                onChange={handleInputChange}\n                className={cn(InputNumberVariants({ status, disabled }))}\n              />\n              {tips ? (\n                <span className={cn(textColor(status, disabled), 'absolute -bottom-4 left-0 w-full truncate text-xs')}>\n                  {tips}\n                </span>\n              ) : null}\n            </div>\n            <button onClick={decrement} className={baseClassName}>\n              <MinusIcon />\n            </button>\n          </>\n        )}\n      </Comp>\n    )\n  }\n)\n\nInputNumber.displayName = 'InputNumber'\n\nexport default InputNumber\nexport type { InputNumberProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { PlusIcon, MinusIcon } from '@radix-ui/react-icons'\nimport React, { useState, useEffect, forwardRef } from 'react'\nimport type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\n// \u5B9A\u4E49 InputNumber \u7684\u6837\u5F0F\u53D8\u4F53\nconst InputNumberVariants = cva('size-full border bg-transparent text-center text-base outline-none', {\n  variants: {\n    status: {\n      default: 'border-lines-1 group-hover:border-lines-2',\n      success: 'border-lines-3 group-hover:border-lines-3',\n      warning: 'border-lines-4 group-hover:border-lines-4',\n      error: 'border-lines-5 group-hover:border-lines-5',\n    },\n    disabled: {\n      true: 'border-lines-1 group-hover:border-lines-1 text-info-quaternary cursor-not-allowed',\n    },\n  },\n})\n\ntype ColorType = 'default' | 'success' | 'warning' | 'error' | null\n\n// \u5B9A\u4E49\u7EC4\u4EF6\u7C7B\u578B\uFF0C\u7EE7\u627F div \u6807\u7B7E\u6807\u51C6\u5C5E\u6027\ntype InputNumberElement = React.ElementRef<'div'>\n\ntype InputNumberProps = {\n  /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u7C7B\u540D*/\n  className?: string\n  /** \u8F93\u5165\u6846\u4E0B\u65B9\u63D0\u793A\u6587\u672C\uFF0C\u4F1A\u6839\u636E\u4E0D\u540C\u7684 status \u5448\u73B0\u4E0D\u540C\u7684\u6837\u5F0F*/\n  tips?: string\n  /** \u6587\u672C\u6846\u72B6\u6001*/\n  status?: ColorType\n  /** \u6570\u5B57\u8F93\u5165\u6846\u7684\u503C */\n  value?: number\n  /** \u6570\u5B57\u8F93\u5165\u6846\u7684\u521D\u59CB\u503C */\n  defaultValue?: number\n  /** \u6570\u503C\u6539\u53D8\u6B65\u6570 */\n  step?: number\n  /** \u6700\u5C0F\u503C */\n  min?: number\n  /** \u6700\u5927\u503C */\n  max?: number\n  /** \u662F\u5426\u7981\u7528*/\n  disabled?: boolean\n  /** \u662F\u5426\u53EA\u8BFB*/\n  readonly?: boolean\n  /** \u6837\u5F0F*/\n  style?: React.CSSProperties\n  /** \u503C\u53D8\u5316\u65F6\u89E6\u53D1*/\n  onChange?: (value: number) => void\n  /** \u5931\u53BB\u7126\u70B9\u65F6\u89E6\u53D1*/\n  onBlur?: (value: number, e: FocusEvent) => void\n  /** \u6309\u4E0B\u56DE\u8F66\u952E\u65F6\u89E6\u53D1*/\n  onEnter?: (value: number, e: KeyboardEvent) => void\n} & VariantProps<typeof InputNumberVariants> &\n  ComponentPropsWithout<'div', RemovedProps>\n\n/**\n * InputNumber - \u6570\u5B57\u8F93\u5165\u6846\n *\n * @description \u4E13\u7528\u4E8E\u6570\u5B57\u8F93\u5165\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u6B65\u8FDB\u8C03\u8282\u3001\u6700\u503C\u9650\u5236\u3001\u72B6\u6001\u63D0\u793A\u548C\u952E\u76D8\u64CD\u4F5C\n */\nconst InputNumber = forwardRef<InputNumberElement, InputNumberProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      step = 1,\n      min = 0,\n      max,\n      tips,\n      style,\n      children,\n      asChild = false,\n      disabled = false,\n      readonly = false,\n      status = 'default',\n      className,\n      onChange,\n      onBlur,\n      onEnter,\n    },\n    ref\n  ) => {\n    const [inputValue, setInputValue] = useState<number | string>(defaultValue)\n\n    const Comp = asChild ? Slot : 'div'\n\n    const baseClassName = cn('border-lines-1 flex size-12 items-center justify-center border text-base', {\n      'group-hover:border-lines-2': !disabled,\n      'text-info-quaternary cursor-not-allowed': disabled,\n    })\n\n    const textColor = (type: ColorType, flag: boolean) => {\n      if (flag) return 'text-lines-1'\n      return {\n        default: 'text-lines-1',\n        success: 'text-lines-3',\n        warning: 'text-lines-4',\n        error: 'text-lines-5',\n      }[type || 'default']\n    }\n\n    const isValue = (params: string) => {\n      return params === '' || /^[0-9]+$/.test(params)\n    }\n\n    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      if (disabled || readonly) return\n      const value = e.target.value\n      // \u5141\u8BB8\u7A7A\u5B57\u7B26\u4E32\uFF0C\u6216\u4EC5\u5305\u542B\u6574\u6570\u7684\u5B57\u7B26\u4E32\n      if (isValue(value)) {\n        setInputValue(value)\n        if (value !== '') {\n          let newValue = Number(value)\n          if (max !== undefined && newValue > max) {\n            newValue = max\n          }\n          if (min !== undefined && newValue < min) {\n            newValue = min\n          }\n          onChange?.(newValue)\n        }\n      }\n    }\n\n    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n      if (disabled || readonly) return\n      if (inputValue === '' || isNaN(Number(inputValue))) {\n        const newValue = min !== undefined ? min : 0\n        setInputValue(newValue)\n        onBlur?.(newValue, e)\n      } else {\n        const newValue = Number(inputValue)\n        setInputValue(newValue)\n        onBlur?.(newValue, e)\n      }\n    }\n\n    const increment = () => {\n      if (disabled || readonly) return\n      let newValue = Number(inputValue) + (step ? Math.ceil(Number(step)) : 1)\n      if (max !== undefined && newValue > max) {\n        newValue = max\n      }\n      setInputValue(newValue)\n      onChange?.(newValue)\n    }\n\n    const decrement = () => {\n      if (disabled || readonly) return\n      let newValue = Number(inputValue) - (step ? Math.ceil(Number(step)) : 1)\n      if (min !== undefined && newValue < min) {\n        newValue = min\n      }\n      setInputValue(newValue)\n      onChange?.(newValue)\n    }\n\n    const handleKeyDown = (e: any) => {\n      if (disabled || readonly) return\n      if (e.key === 'Enter') {\n        const initalValue = e.target?.value\n        onEnter?.(initalValue, e)\n      }\n    }\n\n    useEffect(() => {\n      setInputValue(value || 0)\n    }, [value])\n\n    return (\n      <Comp\n        ref={ref}\n        {...(style ? { style: style } : null)}\n        className={cn({ 'group flex items-center': !asChild }, className)}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            <button onClick={increment} className={baseClassName}>\n              <PlusIcon />\n            </button>\n            <div className=\"relative mx-1.5 h-[52px] w-[105px]\">\n              <input\n                type=\"text\"\n                value={inputValue}\n                disabled={disabled}\n                readOnly={readonly}\n                onBlur={handleBlur}\n                onKeyDown={handleKeyDown}\n                onChange={handleInputChange}\n                className={cn(InputNumberVariants({ status, disabled }))}\n              />\n              {tips ? (\n                <span className={cn(textColor(status, disabled), 'absolute -bottom-4 left-0 w-full truncate text-xs')}>\n                  {tips}\n                </span>\n              ) : null}\n            </div>\n            <button onClick={decrement} className={baseClassName}>\n              <MinusIcon />\n            </button>\n          </>\n        )}\n      </Comp>\n    )\n  }\n)\n\nInputNumber.displayName = 'InputNumber'\n\nexport default InputNumber\nexport type { InputNumberProps }\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "cn", "Slot", "PlusIcon", "MinusIcon", "useState", "useEffect", "forwardRef", "cva", "InputNumberVariants", "InputNumber", "value", "defaultValue", "step", "min", "max", "tips", "style", "children", "asChild", "disabled", "readonly", "status", "className", "onChange", "onBlur", "onEnter", "ref", "inputValue", "setInputValue", "Comp", "baseClassName", "textColor", "type", "flag", "isValue", "params", "handleInputChange", "newValue", "handleBlur", "increment", "decrement", "handleKeyDown", "initalValue", "input_number_default"]
 }

package/dist/esm/components/input.d.ts

@@ -18,5 +18,10 @@ interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
  * 用来在 Input 组件中插入额外的内容，比如icon ，按钮
  */
 declare const InputSlot: React.ForwardRefExoticComponent<InputSlotProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Input - 输入框
+ *
+ * @description 文本输入组件，支持各种输入类型、不同尺寸和插槽功能
+ */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input, InputSlot };

package/dist/esm/components/input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/input.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst inputVariants = cva(\n  'border-input text-info-primary bg-background flex w-full flex-row items-center overflow-hidden rounded-md border focus-visible:outline-none',\n  {\n    variants: {\n      size: {\n        sm: 'h-8 text-sm',\n        base: 'h-10',\n        lg: 'h-12 text-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'base',\n    },\n  }\n)\n\nexport interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {}\n\ntype InputSlotElement = React.ElementRef<'div'>\ninterface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {\n  /**\n   * \u63D2\u69FD\u7684\u4F4D\u7F6E\n   * default: right\n   */\n  side?: 'left' | 'right'\n}\n\n/**\n * InputSlot\n * \u7528\u6765\u5728 Input \u7EC4\u4EF6\u4E2D\u63D2\u5165\u989D\u5916\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982icon \uFF0C\u6309\u94AE\n */\nconst InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, forwardedRef) => {\n  const { className, side = 'right', children, ...slotProps } = props\n\n  return (\n    <div\n      ref={forwardedRef}\n      {...slotProps}\n      className={cn('flex h-full items-center', className, {\n        '-order-1': side === 'left',\n        'order-2': side === 'right',\n      })}\n    >\n      {children}\n    </div>\n  )\n})\n\nconst Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(\n  ({ className, type, size, children, ...props }, ref) => {\n    if (!React.isValidElement(children)) {\n      return <input type={type} className={cn(inputVariants({ size }), 'px-3', className)} ref={ref} {...props} />\n    }\n    return (\n      <div className={cn(inputVariants({ size }), className)}>\n        <input\n          type={type}\n          className={cn(\n            'placeholder:text-muted-foreground flex size-full px-3 file:border-0 file:bg-transparent file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50'\n          )}\n          ref={ref}\n          {...props}\n        />\n        {children}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\nInputSlot.displayName = 'InputSlot'\n\nexport { Input, InputSlot }\n"],
-  "mappings": "aA0CI,cAAAA,EAmBE,QAAAC,MAnBF,oBAxCJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,OAAS,OAAAC,MAA8B,2BAEvC,MAAMC,EAAgBD,EACpB,8IACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,cACJ,KAAM,OACN,GAAI,cACN,CACF,EACA,gBAAiB,CACf,KAAM,MACR,CACF,CACF,EAiBME,EAAYJ,EAAM,WAA6C,CAACK,EAAOC,IAAiB,CAC5F,KAAM,CAAE,UAAAC,EAAW,KAAAC,EAAO,QAAS,SAAAC,EAAU,GAAGC,CAAU,EAAIL,EAE9D,OACEP,EAAC,OACC,IAAKQ,EACJ,GAAGI,EACJ,UAAWT,EAAG,2BAA4BM,EAAW,CACnD,WAAYC,IAAS,OACrB,UAAWA,IAAS,OACtB,CAAC,EAEA,SAAAC,EACH,CAEJ,CAAC,EAEKE,EAAQX,EAAM,WAClB,CAAC,CAAE,UAAAO,EAAW,KAAAK,EAAM,KAAAC,EAAM,SAAAJ,EAAU,GAAGJ,CAAM,EAAGS,IACzCd,EAAM,eAAeS,CAAQ,EAIhCV,EAAC,OAAI,UAAWE,EAAGE,EAAc,CAAE,KAAAU,CAAK,CAAC,EAAGN,CAAS,EACnD,UAAAT,EAAC,SACC,KAAMc,EACN,UAAWX,EACT,qLACF,EACA,IAAKa,EACJ,GAAGT,EACN,EACCI,GACH,EAbOX,EAAC,SAAM,KAAMc,EAAM,UAAWX,EAAGE,EAAc,CAAE,KAAAU,CAAK,CAAC,EAAG,OAAQN,CAAS,EAAG,IAAKO,EAAM,GAAGT,EAAO,CAgBhH,EACAM,EAAM,YAAc,QACpBP,EAAU,YAAc",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst inputVariants = cva(\n  'border-input text-info-primary bg-background flex w-full flex-row items-center overflow-hidden rounded-md border focus-visible:outline-none',\n  {\n    variants: {\n      size: {\n        sm: 'h-8 text-sm',\n        base: 'h-10',\n        lg: 'h-12 text-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'base',\n    },\n  }\n)\n\nexport interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {}\n\ntype InputSlotElement = React.ElementRef<'div'>\ninterface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {\n  /**\n   * \u63D2\u69FD\u7684\u4F4D\u7F6E\n   * default: right\n   */\n  side?: 'left' | 'right'\n}\n\n/**\n * InputSlot\n * \u7528\u6765\u5728 Input \u7EC4\u4EF6\u4E2D\u63D2\u5165\u989D\u5916\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982icon \uFF0C\u6309\u94AE\n */\nconst InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, forwardedRef) => {\n  const { className, side = 'right', children, ...slotProps } = props\n\n  return (\n    <div\n      ref={forwardedRef}\n      {...slotProps}\n      className={cn('flex h-full items-center', className, {\n        '-order-1': side === 'left',\n        'order-2': side === 'right',\n      })}\n    >\n      {children}\n    </div>\n  )\n})\n\n/**\n * Input - \u8F93\u5165\u6846\n *\n * @description \u6587\u672C\u8F93\u5165\u7EC4\u4EF6\uFF0C\u652F\u6301\u5404\u79CD\u8F93\u5165\u7C7B\u578B\u3001\u4E0D\u540C\u5C3A\u5BF8\u548C\u63D2\u69FD\u529F\u80FD\n */\nconst Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(\n  ({ className, type, size, children, ...props }, ref) => {\n    if (!React.isValidElement(children)) {\n      return <input type={type} className={cn(inputVariants({ size }), 'px-3', className)} ref={ref} {...props} />\n    }\n    return (\n      <div className={cn(inputVariants({ size }), className)}>\n        <input\n          type={type}\n          className={cn(\n            'placeholder:text-muted-foreground flex size-full px-3 file:border-0 file:bg-transparent file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50'\n          )}\n          ref={ref}\n          {...props}\n        />\n        {children}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\nInputSlot.displayName = 'InputSlot'\n\nexport { Input, InputSlot }\n"],
+  "mappings": "aA0CI,cAAAA,EAwBE,QAAAC,MAxBF,oBAxCJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,OAAS,OAAAC,MAA8B,2BAEvC,MAAMC,EAAgBD,EACpB,8IACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,cACJ,KAAM,OACN,GAAI,cACN,CACF,EACA,gBAAiB,CACf,KAAM,MACR,CACF,CACF,EAiBME,EAAYJ,EAAM,WAA6C,CAACK,EAAOC,IAAiB,CAC5F,KAAM,CAAE,UAAAC,EAAW,KAAAC,EAAO,QAAS,SAAAC,EAAU,GAAGC,CAAU,EAAIL,EAE9D,OACEP,EAAC,OACC,IAAKQ,EACJ,GAAGI,EACJ,UAAWT,EAAG,2BAA4BM,EAAW,CACnD,WAAYC,IAAS,OACrB,UAAWA,IAAS,OACtB,CAAC,EAEA,SAAAC,EACH,CAEJ,CAAC,EAOKE,EAAQX,EAAM,WAClB,CAAC,CAAE,UAAAO,EAAW,KAAAK,EAAM,KAAAC,EAAM,SAAAJ,EAAU,GAAGJ,CAAM,EAAGS,IACzCd,EAAM,eAAeS,CAAQ,EAIhCV,EAAC,OAAI,UAAWE,EAAGE,EAAc,CAAE,KAAAU,CAAK,CAAC,EAAGN,CAAS,EACnD,UAAAT,EAAC,SACC,KAAMc,EACN,UAAWX,EACT,qLACF,EACA,IAAKa,EACJ,GAAGT,EACN,EACCI,GACH,EAbOX,EAAC,SAAM,KAAMc,EAAM,UAAWX,EAAGE,EAAc,CAAE,KAAAU,CAAK,CAAC,EAAG,OAAQN,CAAS,EAAG,IAAKO,EAAM,GAAGT,EAAO,CAgBhH,EACAM,EAAM,YAAc,QACpBP,EAAU,YAAc",
   "names": ["jsx", "jsxs", "React", "cn", "cva", "inputVariants", "InputSlot", "props", "forwardedRef", "className", "side", "children", "slotProps", "Input", "type", "size", "ref"]
 }

package/dist/esm/components/link.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 declare const linkVariants: (props?: ({
     size?: "base" | "lg" | null | undefined;
-    variant?: "primary" | "secoundry" | null | undefined;
+    variant?: "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type LinkProps = {
     /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
@@ -22,6 +22,11 @@ type LinkProps = {
     /** 点击事件，禁用状态无法触发*/
     onClick?: Function;
 } & VariantProps<typeof linkVariants> & ComponentPropsWithout<'a', RemovedProps>;
+/**
+ * Link - 链接
+ *
+ * @description 可点击的链接组件，支持不同尺寸、样式变体、禁用状态和后置图标
+ */
 declare const Link: React.ForwardRefExoticComponent<{
     /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
     asChild?: boolean | undefined;
@@ -39,7 +44,7 @@ declare const Link: React.ForwardRefExoticComponent<{
     onClick?: Function | undefined;
 } & VariantProps<(props?: ({
     size?: "base" | "lg" | null | undefined;
-    variant?: "primary" | "secoundry" | null | undefined;
+    variant?: "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & ComponentPropsWithout<"a", RemovedProps> & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;
 export type { LinkProps };

package/dist/esm/components/link.js

@@ -1,2 +1,2 @@
-import{Fragment as C,jsx as i,jsxs as P}from"react/jsx-runtime";import u from"react";import{Slot as d}from"@radix-ui/react-slot";import{cn as h}from"../helpers/index.js";import{cva as x}from"class-variance-authority";const v=x("tracking  hover:text-brand-0 font-bold underline transition-colors",{variants:{size:{base:"text-text-2",lg:"text-text-3"},variant:{secoundry:"text-info-secondary hover:text-info-primary",primary:"text-info-primary hover:text-brand-0"}}}),a=u.forwardRef(({children:p,size:s="base",variant:l="primary",className:m,asChild:c=!1,href:o,style:r,disabled:e=!1,suffixIcon:t,onClick:f,...y},k)=>i(c?d:"a",{ref:k,onClick:n=>{if(!e&&f?.(n),e||!o){n.preventDefault();return}},href:e?void 0:o,className:h(v({size:s,variant:l}),m,{"flex items-center":t,"cursor-pointer":!e,"text-info-quaternary cursor-not-allowed hover:text-info-quaternary":e}),...r?{style:r}:null,...y,children:P(C,{children:[p,t&&i("span",{className:"svg",children:t})]})}));a.displayName="Link";var V=a;export{V as default};
+"use client";import{Fragment as C,jsx as i,jsxs as P}from"react/jsx-runtime";import u from"react";import{Slot as d}from"@radix-ui/react-slot";import{cn as h}from"../helpers/index.js";import{cva as x}from"class-variance-authority";const v=x("tracking  hover:text-brand-0 font-bold underline transition-colors",{variants:{size:{base:"text-text-2",lg:"text-text-3"},variant:{secondary:"text-info-secondary hover:text-info-primary",primary:"text-info-primary hover:text-brand-0"}}}),a=u.forwardRef(({children:p,size:s="base",variant:l="primary",className:m,asChild:c=!1,href:o,style:r,disabled:e=!1,suffixIcon:t,onClick:f,...y},k)=>i(c?d:"a",{ref:k,onClick:n=>{if(!e&&f?.(n),e||!o){n.preventDefault();return}},href:e?void 0:o,className:h(v({size:s,variant:l}),m,{"flex items-center":t,"cursor-pointer":!e,"text-info-quaternary cursor-not-allowed hover:text-info-quaternary":e}),...r?{style:r}:null,...y,children:P(C,{children:[p,t&&i("span",{className:"svg",children:t})]})}));a.displayName="Link";var V=a;export{V as default};
 //# sourceMappingURL=link.js.map

package/dist/esm/components/link.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/link.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { ReactNode } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../helpers/index.js'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\n// \u5B9A\u4E49 link \u7684\u6837\u5F0F\u53D8\u4F53\nconst linkVariants = cva('tracking  hover:text-brand-0 font-bold underline transition-colors', {\n  variants: {\n    size: {\n      base: 'text-text-2', // \u4E2D\n      lg: 'text-text-3', // \u5927\n    },\n    variant: {\n      secoundry: 'text-info-secondary hover:text-info-primary',\n      primary: 'text-info-primary hover:text-brand-0',\n    },\n  },\n})\n// \u5B9A\u4E49\u7EC4\u4EF6\u7C7B\u578B\uFF0C\u7EE7\u627F a \u6807\u7B7E\u6807\u51C6\u5C5E\u6027\ntype LinkElement = React.ElementRef<'a'>\ntype LinkProps = {\n  /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u7C7B\u540D*/\n  className?: string\n  /** \u7981\u7528\u94FE\u63A5 */\n  disabled?: boolean\n  /** \u540E\u7F6E\u56FE\u6807*/\n  suffixIcon?: ReactNode\n  /** \u8DF3\u8F6C\u94FE\u63A5*/\n  href?: string\n  /** \u6837\u5F0F*/\n  style?: React.CSSProperties\n  /** \u70B9\u51FB\u4E8B\u4EF6\uFF0C\u7981\u7528\u72B6\u6001\u65E0\u6CD5\u89E6\u53D1*/\n  onClick?: Function\n} & VariantProps<typeof linkVariants> &\n  ComponentPropsWithout<'a', RemovedProps>\n\nconst Link = React.forwardRef<LinkElement, LinkProps>(\n  (\n    {\n      children,\n      size = 'base',\n      variant = 'primary',\n      className,\n      asChild = false,\n      href,\n      style,\n      disabled = false,\n      suffixIcon,\n      onClick,\n      ...props // \u8FD9\u91CC\u4F1A\u5305\u542B href\u3001target\u3001rel \u7B49\u6807\u51C6 anchor \u5C5E\u6027\n    }: LinkProps,\n    forwardedRef\n  ) => {\n    const Comp = asChild ? Slot : 'a'\n\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n      !disabled && onClick?.(event)\n      if (disabled || !href) {\n        event.preventDefault()\n        return\n      }\n    }\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        onClick={handleClick}\n        href={disabled ? undefined : href}\n        className={cn(linkVariants({ size, variant }), className, {\n          'flex items-center': suffixIcon,\n          'cursor-pointer': !disabled,\n          'text-info-quaternary cursor-not-allowed hover:text-info-quaternary': disabled,\n        })}\n        {...(style ? { style: style } : null)}\n        {...props}\n      >\n        <>\n          {children}\n          {suffixIcon && <span className=\"svg\">{suffixIcon}</span>}\n        </>\n      </Comp>\n    )\n  }\n)\nLink.displayName = 'Link'\n\nexport default Link\nexport type { LinkProps }\n"],
-  "mappings": "AAgFQ,mBAAAA,EAEiB,OAAAC,EAFjB,QAAAC,MAAA,oBAhFR,OAAOC,MAAW,QAElB,OAAS,QAAAC,MAAY,uBACrB,OAAS,MAAAC,MAAU,sBACnB,OAA4B,OAAAC,MAAW,2BAIvC,MAAMC,EAAeD,EAAI,qEAAsE,CAC7F,SAAU,CACR,KAAM,CACJ,KAAM,cACN,GAAI,aACN,EACA,QAAS,CACP,UAAW,8CACX,QAAS,sCACX,CACF,CACF,CAAC,EAqBKE,EAAOL,EAAM,WACjB,CACE,CACE,SAAAM,EACA,KAAAC,EAAO,OACP,QAAAC,EAAU,UACV,UAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,IAaEnB,EAXWY,EAAUT,EAAO,IAW3B,CACC,IAAKgB,EACL,QAXiBC,GAA+C,CAElE,GADA,CAACL,GAAYE,IAAUG,CAAK,EACxBL,GAAY,CAACF,EAAM,CACrBO,EAAM,eAAe,EACrB,MACF,CACF,EAMI,KAAML,EAAW,OAAYF,EAC7B,UAAWT,EAAGE,EAAa,CAAE,KAAAG,EAAM,QAAAC,CAAQ,CAAC,EAAGC,EAAW,CACxD,oBAAqBK,EACrB,iBAAkB,CAACD,EACnB,qEAAsEA,CACxE,CAAC,EACA,GAAID,EAAQ,CAAE,MAAOA,CAAM,EAAI,KAC/B,GAAGI,EAEJ,SAAAjB,EAAAF,EAAA,CACG,UAAAS,EACAQ,GAAchB,EAAC,QAAK,UAAU,MAAO,SAAAgB,EAAW,GACnD,EACF,CAGN,EACAT,EAAK,YAAc,OAEnB,IAAOc,EAAQd",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { ReactNode } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../helpers/index.js'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\n// \u5B9A\u4E49 link \u7684\u6837\u5F0F\u53D8\u4F53\nconst linkVariants = cva('tracking  hover:text-brand-0 font-bold underline transition-colors', {\n  variants: {\n    size: {\n      base: 'text-text-2', // \u4E2D\n      lg: 'text-text-3', // \u5927\n    },\n    variant: {\n      secondary: 'text-info-secondary hover:text-info-primary',\n      primary: 'text-info-primary hover:text-brand-0',\n    },\n  },\n})\n// \u5B9A\u4E49\u7EC4\u4EF6\u7C7B\u578B\uFF0C\u7EE7\u627F a \u6807\u7B7E\u6807\u51C6\u5C5E\u6027\ntype LinkElement = React.ElementRef<'a'>\ntype LinkProps = {\n  /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u7C7B\u540D*/\n  className?: string\n  /** \u7981\u7528\u94FE\u63A5 */\n  disabled?: boolean\n  /** \u540E\u7F6E\u56FE\u6807*/\n  suffixIcon?: ReactNode\n  /** \u8DF3\u8F6C\u94FE\u63A5*/\n  href?: string\n  /** \u6837\u5F0F*/\n  style?: React.CSSProperties\n  /** \u70B9\u51FB\u4E8B\u4EF6\uFF0C\u7981\u7528\u72B6\u6001\u65E0\u6CD5\u89E6\u53D1*/\n  onClick?: Function\n} & VariantProps<typeof linkVariants> &\n  ComponentPropsWithout<'a', RemovedProps>\n\n/**\n * Link - \u94FE\u63A5\n *\n * @description \u53EF\u70B9\u51FB\u7684\u94FE\u63A5\u7EC4\u4EF6\uFF0C\u652F\u6301\u4E0D\u540C\u5C3A\u5BF8\u3001\u6837\u5F0F\u53D8\u4F53\u3001\u7981\u7528\u72B6\u6001\u548C\u540E\u7F6E\u56FE\u6807\n */\nconst Link = React.forwardRef<LinkElement, LinkProps>(\n  (\n    {\n      children,\n      size = 'base',\n      variant = 'primary',\n      className,\n      asChild = false,\n      href,\n      style,\n      disabled = false,\n      suffixIcon,\n      onClick,\n      ...props // \u8FD9\u91CC\u4F1A\u5305\u542B href\u3001target\u3001rel \u7B49\u6807\u51C6 anchor \u5C5E\u6027\n    }: LinkProps,\n    forwardedRef\n  ) => {\n    const Comp = asChild ? Slot : 'a'\n\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n      !disabled && onClick?.(event)\n      if (disabled || !href) {\n        event.preventDefault()\n        return\n      }\n    }\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        onClick={handleClick}\n        href={disabled ? undefined : href}\n        className={cn(linkVariants({ size, variant }), className, {\n          'flex items-center': suffixIcon,\n          'cursor-pointer': !disabled,\n          'text-info-quaternary cursor-not-allowed hover:text-info-quaternary': disabled,\n        })}\n        {...(style ? { style: style } : null)}\n        {...props}\n      >\n        <>\n          {children}\n          {suffixIcon && <span className=\"svg\">{suffixIcon}</span>}\n        </>\n      </Comp>\n    )\n  }\n)\nLink.displayName = 'Link'\n\nexport default Link\nexport type { LinkProps }\n"],
+  "mappings": "aAsFQ,mBAAAA,EAEiB,OAAAC,EAFjB,QAAAC,MAAA,oBArFR,OAAOC,MAAW,QAElB,OAAS,QAAAC,MAAY,uBACrB,OAAS,MAAAC,MAAU,sBACnB,OAA4B,OAAAC,MAAW,2BAIvC,MAAMC,EAAeD,EAAI,qEAAsE,CAC7F,SAAU,CACR,KAAM,CACJ,KAAM,cACN,GAAI,aACN,EACA,QAAS,CACP,UAAW,8CACX,QAAS,sCACX,CACF,CACF,CAAC,EA0BKE,EAAOL,EAAM,WACjB,CACE,CACE,SAAAM,EACA,KAAAC,EAAO,OACP,QAAAC,EAAU,UACV,UAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,IAaEnB,EAXWY,EAAUT,EAAO,IAW3B,CACC,IAAKgB,EACL,QAXiBC,GAA+C,CAElE,GADA,CAACL,GAAYE,IAAUG,CAAK,EACxBL,GAAY,CAACF,EAAM,CACrBO,EAAM,eAAe,EACrB,MACF,CACF,EAMI,KAAML,EAAW,OAAYF,EAC7B,UAAWT,EAAGE,EAAa,CAAE,KAAAG,EAAM,QAAAC,CAAQ,CAAC,EAAGC,EAAW,CACxD,oBAAqBK,EACrB,iBAAkB,CAACD,EACnB,qEAAsEA,CACxE,CAAC,EACA,GAAID,EAAQ,CAAE,MAAOA,CAAM,EAAI,KAC/B,GAAGI,EAEJ,SAAAjB,EAAAF,EAAA,CACG,UAAAS,EACAQ,GAAchB,EAAC,QAAK,UAAU,MAAO,SAAAgB,EAAW,GACnD,EACF,CAGN,EACAT,EAAK,YAAc,OAEnB,IAAOc,EAAQd",
   "names": ["Fragment", "jsx", "jsxs", "React", "Slot", "cn", "cva", "linkVariants", "Link", "children", "size", "variant", "className", "asChild", "href", "style", "disabled", "suffixIcon", "onClick", "props", "forwardedRef", "event", "link_default"]
 }

package/dist/esm/components/loadingDots.d.ts

@@ -2,5 +2,10 @@ import type { FC } from 'react';
 interface LoadingProps {
     className?: string;
 }
+/**
+ * LoadingDots - 加载动画点
+ *
+ * @description 三个点的加载动画组件，提供优雅的等待状态视觉反馈
+ */
 declare const LoadingDots: FC<LoadingProps>;
 export default LoadingDots;

package/dist/esm/components/loadingDots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/loadingDots.tsx"],
-  "sourcesContent": ["import { cn } from '../helpers/utils.js'\nimport type { FC } from 'react'\n\ninterface LoadingProps {\n  className?: string\n}\n\nconst LoadingDots: FC<LoadingProps> = props => {\n  const { className } = props\n  return (\n    <>\n      <style>{`span.root {\n  min-height: 19px;\n  align-items: center;\n  text-align: center;\n  line-height: 7;\n  display: inline-flex !important;\n}\n\nspan.root .dot {\n  height: 8px;\n  width: 8px;\n  border-radius: 100%;\n  background-color: currentColor;\n  animation-name: blink;\n  animation-duration: 1.6s;\n  animation-iteration-count: infinite;\n  animation-fill-mode: both;\n  margin: 0 2px;\n}\n\n.root .dot:nth-of-type(2) {\n  animation-delay: 0.2s;\n}\n\n.root .dot::nth-of-type(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes blink {\n  0% {\n    opacity: 0.2;\n  }\n  20% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.2;\n  }\n}\n\n    `}</style>\n      <span className={cn('root', className)}>\n        <span className=\"dot\" key={`dot_1`} />\n        <span className=\"dot\" key={`dot_2`} />\n        <span className=\"dot\" key={`dot_3`} />\n      </span>\n    </>\n  )\n}\n\nexport default LoadingDots\n"],
-  "mappings": "AAUI,mBAAAA,EACE,OAAAC,EAyCA,QAAAC,MA1CF,oBAVJ,OAAS,MAAAC,MAAU,sBAOnB,MAAMC,EAAgCC,GAAS,CAC7C,KAAM,CAAE,UAAAC,CAAU,EAAID,EACtB,OACEH,EAAAF,EAAA,CACE,UAAAC,EAAC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAwCR,EACAC,EAAC,QAAK,UAAWC,EAAG,OAAQG,CAAS,EACnC,UAAAL,EAAC,QAAK,UAAU,OAAW,OAAS,EACpCA,EAAC,QAAK,UAAU,OAAW,OAAS,EACpCA,EAAC,QAAK,UAAU,OAAW,OAAS,GACtC,GACF,CAEJ,EAEA,IAAOM,EAAQH",
+  "sourcesContent": ["import { cn } from '../helpers/utils.js'\nimport type { FC } from 'react'\n\ninterface LoadingProps {\n  className?: string\n}\n\n/**\n * LoadingDots - \u52A0\u8F7D\u52A8\u753B\u70B9\n *\n * @description \u4E09\u4E2A\u70B9\u7684\u52A0\u8F7D\u52A8\u753B\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u4F18\u96C5\u7684\u7B49\u5F85\u72B6\u6001\u89C6\u89C9\u53CD\u9988\n */\nconst LoadingDots: FC<LoadingProps> = props => {\n  const { className } = props\n  return (\n    <>\n      <style>{`span.root {\n  min-height: 19px;\n  align-items: center;\n  text-align: center;\n  line-height: 7;\n  display: inline-flex !important;\n}\n\nspan.root .dot {\n  height: 8px;\n  width: 8px;\n  border-radius: 100%;\n  background-color: currentColor;\n  animation-name: blink;\n  animation-duration: 1.6s;\n  animation-iteration-count: infinite;\n  animation-fill-mode: both;\n  margin: 0 2px;\n}\n\n.root .dot:nth-of-type(2) {\n  animation-delay: 0.2s;\n}\n\n.root .dot::nth-of-type(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes blink {\n  0% {\n    opacity: 0.2;\n  }\n  20% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.2;\n  }\n}\n\n    `}</style>\n      <span className={cn('root', className)}>\n        <span className=\"dot\" key={`dot_1`} />\n        <span className=\"dot\" key={`dot_2`} />\n        <span className=\"dot\" key={`dot_3`} />\n      </span>\n    </>\n  )\n}\n\nexport default LoadingDots\n"],
+  "mappings": "AAeI,mBAAAA,EACE,OAAAC,EAyCA,QAAAC,MA1CF,oBAfJ,OAAS,MAAAC,MAAU,sBAYnB,MAAMC,EAAgCC,GAAS,CAC7C,KAAM,CAAE,UAAAC,CAAU,EAAID,EACtB,OACEH,EAAAF,EAAA,CACE,UAAAC,EAAC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAwCR,EACAC,EAAC,QAAK,UAAWC,EAAG,OAAQG,CAAS,EACnC,UAAAL,EAAC,QAAK,UAAU,OAAW,OAAS,EACpCA,EAAC,QAAK,UAAU,OAAW,OAAS,EACpCA,EAAC,QAAK,UAAU,OAAW,OAAS,GACtC,GACF,CAEJ,EAEA,IAAOM,EAAQH",
   "names": ["Fragment", "jsx", "jsxs", "cn", "LoadingDots", "props", "className", "loadingDots_default"]
 }

package/dist/esm/components/picture.d.ts

@@ -10,5 +10,10 @@ export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement>
     deviceSizes?: number[];
     alt?: string;
 }
+/**
+ * Picture - 图片
+ *
+ * @description 响应式图片组件，支持多种分辨率、质量控制和自动alt文本解析功能
+ */
 declare const Picture: React.ForwardRefExoticComponent<PictureProps & React.RefAttributes<HTMLPictureElement>>;
 export default Picture;

package/dist/esm/components/picture.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n\n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img\n          key=\"default\"\n          src={defaultImg}\n          className={`w-full ${imgClassName}`}\n          loading={loading}\n          alt={parsedAlt}\n          {...rest}\n        />,\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt, loading])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\n/**\n * Picture - \u56FE\u7247\n *\n * @description \u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u5206\u8FA8\u7387\u3001\u8D28\u91CF\u63A7\u5236\u548C\u81EA\u52A8alt\u6587\u672C\u89E3\u6790\u529F\u80FD\n */\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n\n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img\n          key=\"default\"\n          src={defaultImg}\n          className={`w-full ${imgClassName}`}\n          loading={loading}\n          alt={parsedAlt}\n          {...rest}\n        />,\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt, loading])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "parseAltFromUrl", "url", "removeAltFromUrl", "urlObj", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "cleanSrc", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "defaultSrc", "matchingSrc", "breakpoint", "sourceList", "parsedAlt", "sources", "defaultImg", "picture_default"]
 }

package/dist/esm/components/radio.d.ts

@@ -8,6 +8,11 @@ interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGro
     /** 尺寸 */
     size?: 'sm' | 'base' | 'lg';
 }
+/**
+ * RadioGroup - 单选组
+ *
+ * @description 用于单项选择的单选按钮组组件，支持不同尺寸和键盘导航
+ */
 declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, VariantProps<typeof radioGroupVariants> {
 }

package/dist/esm/components/radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/radio.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { Text } from './text.js'\nimport { CheckIcon } from '@radix-ui/react-icons'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../helpers/index.js'\n\nconst RadioContext = React.createContext<{ size?: 'sm' | 'base' | 'lg' }>({\n  size: 'base',\n})\n\nconst radioGroupVariants = cva(\n  'border-primary text-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aspect-square rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'size-[14px]',\n        base: 'size-4',\n        lg: 'size-5',\n      },\n    },\n    defaultVariants: {\n      size: 'base',\n    },\n  }\n)\n\ninterface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n  /** \u5C3A\u5BF8 */\n  size?: 'sm' | 'base' | 'lg'\n}\n\nconst RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(\n  ({ className, children, size, ...props }, ref) => {\n    return (\n      <RadioGroupPrimitive.Root className={cn('text-info-primary grid gap-2', className)} {...props} ref={ref}>\n        <RadioContext.Provider value={{ size }}>{children}</RadioContext.Provider>\n      </RadioGroupPrimitive.Root>\n    )\n  }\n)\nRadioGroup.displayName = 'RadioGroup'\n\ninterface RadioGroupItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n    VariantProps<typeof radioGroupVariants> {}\n\nconst RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(\n  ({ className, size, children, ...props }, ref) => {\n    const { size: sizeFromParent } = React.useContext(RadioContext)\n\n    const ItemRadio = (\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        className={cn(\n          radioGroupVariants({\n            size: size ?? sizeFromParent,\n          }),\n          className\n        )}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"flex size-full items-center justify-center text-current\">\n          <CheckIcon />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n    )\n\n    if (children) {\n      return (\n        <Text as=\"label\" className={cn('flex items-center gap-1', className)}>\n          {ItemRadio}\n          {children}\n        </Text>\n      )\n    }\n    return ItemRadio\n  }\n)\nRadioGroupItem.displayName = 'RadioGroupItem'\n\nexport { RadioGroup, RadioGroupItem }\nexport type { RadioGroupProps, RadioGroupItemProps }\n"],
-  "mappings": "aAsCQ,cAAAA,EAkCA,QAAAC,MAlCA,oBApCR,UAAYC,MAAW,QACvB,UAAYC,MAAyB,8BACrC,OAAS,QAAAC,MAAY,YACrB,OAAS,aAAAC,MAAiB,wBAC1B,OAAS,OAAAC,MAA8B,2BACvC,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAAeN,EAAM,cAA+C,CACxE,KAAM,MACR,CAAC,EAEKO,EAAqBH,EACzB,gTACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,cACJ,KAAM,SACN,GAAI,QACN,CACF,EACA,gBAAiB,CACf,KAAM,MACR,CACF,CACF,EAOMI,EAAaR,EAAM,WACvB,CAAC,CAAE,UAAAS,EAAW,SAAAC,EAAU,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAEtCf,EAACG,EAAoB,KAApB,CAAyB,UAAWI,EAAG,+BAAgCI,CAAS,EAAI,GAAGG,EAAO,IAAKC,EAClG,SAAAf,EAACQ,EAAa,SAAb,CAAsB,MAAO,CAAE,KAAAK,CAAK,EAAI,SAAAD,EAAS,EACpD,CAGN,EACAF,EAAW,YAAc,aAMzB,MAAMM,EAAiBd,EAAM,WAC3B,CAAC,CAAE,UAAAS,EAAW,KAAAE,EAAM,SAAAD,EAAU,GAAGE,CAAM,EAAGC,IAAQ,CAChD,KAAM,CAAE,KAAME,CAAe,EAAIf,EAAM,WAAWM,CAAY,EAExDU,EACJlB,EAACG,EAAoB,KAApB,CACC,IAAKY,EACL,UAAWR,EACTE,EAAmB,CACjB,KAAMI,GAAQI,CAChB,CAAC,EACDN,CACF,EACC,GAAGG,EAEJ,SAAAd,EAACG,EAAoB,UAApB,CAA8B,UAAU,0DACvC,SAAAH,EAACK,EAAA,EAAU,EACb,EACF,EAGF,OAAIO,EAEAX,EAACG,EAAA,CAAK,GAAG,QAAQ,UAAWG,EAAG,0BAA2BI,CAAS,EAChE,UAAAO,EACAN,GACH,EAGGM,CACT,CACF,EACAF,EAAe,YAAc",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { Text } from './text.js'\nimport { CheckIcon } from '@radix-ui/react-icons'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../helpers/index.js'\n\nconst RadioContext = React.createContext<{ size?: 'sm' | 'base' | 'lg' }>({\n  size: 'base',\n})\n\nconst radioGroupVariants = cva(\n  'border-primary text-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aspect-square rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'size-[14px]',\n        base: 'size-4',\n        lg: 'size-5',\n      },\n    },\n    defaultVariants: {\n      size: 'base',\n    },\n  }\n)\n\ninterface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n  /** \u5C3A\u5BF8 */\n  size?: 'sm' | 'base' | 'lg'\n}\n\n/**\n * RadioGroup - \u5355\u9009\u7EC4\n *\n * @description \u7528\u4E8E\u5355\u9879\u9009\u62E9\u7684\u5355\u9009\u6309\u94AE\u7EC4\u7EC4\u4EF6\uFF0C\u652F\u6301\u4E0D\u540C\u5C3A\u5BF8\u548C\u952E\u76D8\u5BFC\u822A\n */\nconst RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(\n  ({ className, children, size, ...props }, ref) => {\n    return (\n      <RadioGroupPrimitive.Root className={cn('text-info-primary grid gap-2', className)} {...props} ref={ref}>\n        <RadioContext.Provider value={{ size }}>{children}</RadioContext.Provider>\n      </RadioGroupPrimitive.Root>\n    )\n  }\n)\nRadioGroup.displayName = 'RadioGroup'\n\ninterface RadioGroupItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, VariantProps<typeof radioGroupVariants> {}\n\nconst RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(\n  ({ className, size, children, ...props }, ref) => {\n    const { size: sizeFromParent } = React.useContext(RadioContext)\n\n    const ItemRadio = (\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        className={cn(\n          radioGroupVariants({\n            size: size ?? sizeFromParent,\n          }),\n          className\n        )}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"flex size-full items-center justify-center text-current\">\n          <CheckIcon />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n    )\n\n    if (children) {\n      return (\n        <Text as=\"label\" className={cn('flex items-center gap-1', className)}>\n          {ItemRadio}\n          {children}\n        </Text>\n      )\n    }\n    return ItemRadio\n  }\n)\nRadioGroupItem.displayName = 'RadioGroupItem'\n\nexport { RadioGroup, RadioGroupItem }\nexport type { RadioGroupProps, RadioGroupItemProps }\n"],
+  "mappings": "aA2CQ,cAAAA,EAiCA,QAAAC,MAjCA,oBAzCR,UAAYC,MAAW,QACvB,UAAYC,MAAyB,8BACrC,OAAS,QAAAC,MAAY,YACrB,OAAS,aAAAC,MAAiB,wBAC1B,OAAS,OAAAC,MAA8B,2BACvC,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAAeN,EAAM,cAA+C,CACxE,KAAM,MACR,CAAC,EAEKO,EAAqBH,EACzB,gTACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,cACJ,KAAM,SACN,GAAI,QACN,CACF,EACA,gBAAiB,CACf,KAAM,MACR,CACF,CACF,EAYMI,EAAaR,EAAM,WACvB,CAAC,CAAE,UAAAS,EAAW,SAAAC,EAAU,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAEtCf,EAACG,EAAoB,KAApB,CAAyB,UAAWI,EAAG,+BAAgCI,CAAS,EAAI,GAAGG,EAAO,IAAKC,EAClG,SAAAf,EAACQ,EAAa,SAAb,CAAsB,MAAO,CAAE,KAAAK,CAAK,EAAI,SAAAD,EAAS,EACpD,CAGN,EACAF,EAAW,YAAc,aAKzB,MAAMM,EAAiBd,EAAM,WAC3B,CAAC,CAAE,UAAAS,EAAW,KAAAE,EAAM,SAAAD,EAAU,GAAGE,CAAM,EAAGC,IAAQ,CAChD,KAAM,CAAE,KAAME,CAAe,EAAIf,EAAM,WAAWM,CAAY,EAExDU,EACJlB,EAACG,EAAoB,KAApB,CACC,IAAKY,EACL,UAAWR,EACTE,EAAmB,CACjB,KAAMI,GAAQI,CAChB,CAAC,EACDN,CACF,EACC,GAAGG,EAEJ,SAAAd,EAACG,EAAoB,UAApB,CAA8B,UAAU,0DACvC,SAAAH,EAACK,EAAA,EAAU,EACb,EACF,EAGF,OAAIO,EAEAX,EAACG,EAAA,CAAK,GAAG,QAAQ,UAAWG,EAAG,0BAA2BI,CAAS,EAChE,UAAAO,EACAN,GACH,EAGGM,CACT,CACF,EACAF,EAAe,YAAc",
   "names": ["jsx", "jsxs", "React", "RadioGroupPrimitive", "Text", "CheckIcon", "cva", "cn", "RadioContext", "radioGroupVariants", "RadioGroup", "className", "children", "size", "props", "ref", "RadioGroupItem", "sizeFromParent", "ItemRadio"]
 }

package/dist/esm/components/skeleton.d.ts

@@ -4,6 +4,11 @@ interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
     /** 是否正在加载 , 默认是true*/
     loading?: boolean;
 }
+/**
+ * Skeleton - 骨架屏
+ *
+ * @description 用于内容加载时显示占位符的骨架屏组件，提供流畅的加载体验
+ */
 declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
 export default Skeleton;
 export type { SkeletonProps };

package/dist/esm/components/skeleton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/skeleton.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\ntype SkeletonElement = React.ElementRef<'span'>\n\ninterface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {\n  /** \u662F\u5426\u6B63\u5728\u52A0\u8F7D , \u9ED8\u8BA4\u662Ftrue*/\n  loading?: boolean\n}\n\nconst Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {\n  const { children, className, loading = true, ...skeletonProps } = props\n\n  if (!loading) return children\n  const Tag = React.isValidElement(children) ? Slot : 'span'\n\n  return (\n    <Tag\n      ref={forwardedRef}\n      className={cn(\n        `bg-skeleton !pointer-events-none animate-pulse !cursor-default !select-none !border-none !bg-none !decoration-clone \n        !bg-clip-border !text-transparent !shadow-none !outline-none before:!invisible after:!invisible\n        empty:block data-[inline-skeleton=true]:leading-[0] [&>*]:!invisible\n        `,\n        className\n      )}\n      data-inline-skeleton={React.isValidElement(children) ? undefined : true}\n      tabIndex={-1}\n      {...skeletonProps}\n    >\n      {children}\n    </Tag>\n  )\n})\n\nSkeleton.displayName = 'Skeleton'\n\nexport default Skeleton\nexport type { SkeletonProps }\n"],
-  "mappings": "AAmBI,cAAAA,MAAA,oBAnBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAUrB,MAAMC,EAAWH,EAAM,WAA2C,CAACI,EAAOC,IAAiB,CACzF,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAU,GAAM,GAAGC,CAAc,EAAIL,EAElE,GAAI,CAACI,EAAS,OAAOF,EACrB,MAAMI,EAAMV,EAAM,eAAeM,CAAQ,EAAIJ,EAAO,OAEpD,OACEH,EAACW,EAAA,CACC,IAAKL,EACL,UAAWJ,EACT;AAAA;AAAA;AAAA,UAIAM,CACF,EACA,uBAAsBP,EAAM,eAAeM,CAAQ,EAAI,OAAY,GACnE,SAAU,GACT,GAAGG,EAEH,SAAAH,EACH,CAEJ,CAAC,EAEDH,EAAS,YAAc,WAEvB,IAAOQ,EAAQR",
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\ntype SkeletonElement = React.ElementRef<'span'>\n\ninterface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {\n  /** \u662F\u5426\u6B63\u5728\u52A0\u8F7D , \u9ED8\u8BA4\u662Ftrue*/\n  loading?: boolean\n}\n\n/**\n * Skeleton - \u9AA8\u67B6\u5C4F\n *\n * @description \u7528\u4E8E\u5185\u5BB9\u52A0\u8F7D\u65F6\u663E\u793A\u5360\u4F4D\u7B26\u7684\u9AA8\u67B6\u5C4F\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u6D41\u7545\u7684\u52A0\u8F7D\u4F53\u9A8C\n */\nconst Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {\n  const { children, className, loading = true, ...skeletonProps } = props\n\n  if (!loading) return children\n  const Tag = React.isValidElement(children) ? Slot : 'span'\n\n  return (\n    <Tag\n      ref={forwardedRef}\n      className={cn(\n        `bg-skeleton !pointer-events-none animate-pulse !cursor-default !select-none !border-none !bg-none !decoration-clone \n        !bg-clip-border !text-transparent !shadow-none !outline-none before:!invisible after:!invisible\n        empty:block data-[inline-skeleton=true]:leading-[0] [&>*]:!invisible\n        `,\n        className\n      )}\n      data-inline-skeleton={React.isValidElement(children) ? undefined : true}\n      tabIndex={-1}\n      {...skeletonProps}\n    >\n      {children}\n    </Tag>\n  )\n})\n\nSkeleton.displayName = 'Skeleton'\n\nexport default Skeleton\nexport type { SkeletonProps }\n"],
+  "mappings": "AAwBI,cAAAA,MAAA,oBAxBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAerB,MAAMC,EAAWH,EAAM,WAA2C,CAACI,EAAOC,IAAiB,CACzF,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAU,GAAM,GAAGC,CAAc,EAAIL,EAElE,GAAI,CAACI,EAAS,OAAOF,EACrB,MAAMI,EAAMV,EAAM,eAAeM,CAAQ,EAAIJ,EAAO,OAEpD,OACEH,EAACW,EAAA,CACC,IAAKL,EACL,UAAWJ,EACT;AAAA;AAAA;AAAA,UAIAM,CACF,EACA,uBAAsBP,EAAM,eAAeM,CAAQ,EAAI,OAAY,GACnE,SAAU,GACT,GAAGG,EAEH,SAAAH,EACH,CAEJ,CAAC,EAEDH,EAAS,YAAc,WAEvB,IAAOQ,EAAQR",
   "names": ["jsx", "React", "cn", "Slot", "Skeleton", "props", "forwardedRef", "children", "className", "loading", "skeletonProps", "Tag", "skeleton_default"]
 }

package/dist/esm/components/text.d.ts

@@ -27,6 +27,11 @@ interface CommonTextProps extends VariantProps<typeof textVariants> {
     html?: string | SerializedEditorState<SerializedLexicalNode>;
 }
 type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps);
+/**
+ * Text - 文本
+ *
+ * @description 用于显示文本内容的组件，支持多种尺寸、字重、对齐方式和HTML内容
+ */
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
 export { Text };
 export type { TextProps };

package/dist/esm/components/text.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/text.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('text-pretty tracking-[-0.02em]', {\n  variants: {\n    size: {\n      none: 'tracking',\n      1: 'text-[12px] leading-[140%]',\n      2: 'text-[14px] leading-[140%]',\n      3: 'text-[16px] leading-[140%]',\n      4: 'text-[18px] leading-[140%]',\n    },\n    weight: {\n      medium: 'font-medium',\n      semibold: 'font-semibold',\n      bold: 'font-bold',\n      extraBold: 'font-extrabold',\n      black: 'font-black',\n    },\n    align: {\n      left: 'text-left',\n      center: 'text-center',\n      right: 'text-right',\n    },\n  },\n  defaultVariants: {\n    size: 'none',\n    weight: 'bold',\n  },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n  as?: 'div' | 'label' | 'p' | 'span'\n  asChild?: boolean\n  color?: string\n  /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n  html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n  const {\n    children,\n    size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n    weight,\n    align,\n    className,\n    asChild,\n    as: Tag = 'span',\n    color,\n    html,\n    ...textProps\n  } = props\n\n  const htmlContentProps = html\n    ? {\n        dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n      }\n    : null\n\n  const styleProps = color\n    ? {\n        style: {\n          color,\n        },\n      }\n    : null\n\n  return (\n    <Slot\n      {...textProps}\n      ref={forwardedRef}\n      className={cn(\n        textVariants({\n          size,\n          weight: size === 'none' ? (weight ?? 'medium') : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n          align,\n        }),\n        className\n      )}\n      {...htmlContentProps}\n      {...styleProps}\n    >\n      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n    </Slot>\n  )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
-  "mappings": "AA+F4B,cAAAA,MAAA,oBA/F5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,iCAAkC,CACzD,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKI,EAAON,EAAM,WAAmC,CAACO,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOd,EAAqB,CAAE,KAAMc,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWJ,EACTC,EAAa,CACX,KAAAK,EACA,OAAQA,IAAS,OAAUC,GAAU,SAAYA,EACjD,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDH,EAAK,YAAc",
+  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('text-pretty tracking-[-0.02em]', {\n  variants: {\n    size: {\n      none: 'tracking',\n      1: 'text-[12px] leading-[140%]',\n      2: 'text-[14px] leading-[140%]',\n      3: 'text-[16px] leading-[140%]',\n      4: 'text-[18px] leading-[140%]',\n    },\n    weight: {\n      medium: 'font-medium',\n      semibold: 'font-semibold',\n      bold: 'font-bold',\n      extraBold: 'font-extrabold',\n      black: 'font-black',\n    },\n    align: {\n      left: 'text-left',\n      center: 'text-center',\n      right: 'text-right',\n    },\n  },\n  defaultVariants: {\n    size: 'none',\n    weight: 'bold',\n  },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n  as?: 'div' | 'label' | 'p' | 'span'\n  asChild?: boolean\n  color?: string\n  /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n  html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\n/**\n * Text - \u6587\u672C\n *\n * @description \u7528\u4E8E\u663E\u793A\u6587\u672C\u5185\u5BB9\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u5C3A\u5BF8\u3001\u5B57\u91CD\u3001\u5BF9\u9F50\u65B9\u5F0F\u548CHTML\u5185\u5BB9\n */\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n  const {\n    children,\n    size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n    weight,\n    align,\n    className,\n    asChild,\n    as: Tag = 'span',\n    color,\n    html,\n    ...textProps\n  } = props\n\n  const htmlContentProps = html\n    ? {\n        dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n      }\n    : null\n\n  const styleProps = color\n    ? {\n        style: {\n          color,\n        },\n      }\n    : null\n\n  return (\n    <Slot\n      {...textProps}\n      ref={forwardedRef}\n      className={cn(\n        textVariants({\n          size,\n          weight: size === 'none' ? (weight ?? 'medium') : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n          align,\n        }),\n        className\n      )}\n      {...htmlContentProps}\n      {...styleProps}\n    >\n      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n    </Slot>\n  )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
+  "mappings": "AAoG4B,cAAAA,MAAA,oBApG5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,iCAAkC,CACzD,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAuBKI,EAAON,EAAM,WAAmC,CAACO,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOd,EAAqB,CAAE,KAAMc,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWJ,EACTC,EAAa,CACX,KAAAK,EACA,OAAQA,IAAS,OAAUC,GAAU,SAAYA,EACjD,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDH,EAAK,YAAc",
   "names": ["jsx", "React", "Slot", "cva", "convertLexicalToHTML", "cn", "textVariants", "Text", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
 }

package/dist/esm/components/theme.d.ts

@@ -4,9 +4,10 @@ interface ThemeProps {
     children: React.ReactNode;
 }
 /**
- * @deprecated
- * @param param
- * @returns
+ * Theme - 主题配置
+ *
+ * @description 全局主题配置组件，用于设置品牌主题样式
+ * @deprecated 已作废，不推荐使用，直接导入 design token 或者 覆盖css 变量 进行主题定制
  */
 declare const Theme: ({ brand, children }: ThemeProps) => import("react/jsx-runtime").JSX.Element;
 export default Theme;

package/dist/esm/components/theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/theme.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\n\ninterface ThemeProps {\n  brand: string\n  children: React.ReactNode\n}\n/**\n * @deprecated\n * @param param\n * @returns\n */\nconst Theme = ({ brand, children }: ThemeProps) => {\n  React.useLayoutEffect(() => {\n    document.querySelector('html')?.setAttribute('data-brand-theme', brand)\n  }, [])\n  return <>{children}</>\n}\n\nexport default Theme\n"],
-  "mappings": "aAgBS,mBAAAA,EAAA,OAAAC,MAAA,oBAfT,UAAYC,MAAW,QAWvB,MAAMC,EAAQ,CAAC,CAAE,MAAAC,EAAO,SAAAC,CAAS,KAC/BH,EAAM,gBAAgB,IAAM,CAC1B,SAAS,cAAc,MAAM,GAAG,aAAa,mBAAoBE,CAAK,CACxE,EAAG,CAAC,CAAC,EACEH,EAAAD,EAAA,CAAG,SAAAK,EAAS,GAGrB,IAAOC,EAAQH",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\n\ninterface ThemeProps {\n  brand: string\n  children: React.ReactNode\n}\n/**\n * Theme - \u4E3B\u9898\u914D\u7F6E\n *\n * @description \u5168\u5C40\u4E3B\u9898\u914D\u7F6E\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u8BBE\u7F6E\u54C1\u724C\u4E3B\u9898\u6837\u5F0F\n * @deprecated \u5DF2\u4F5C\u5E9F\uFF0C\u4E0D\u63A8\u8350\u4F7F\u7528\uFF0C\u76F4\u63A5\u5BFC\u5165 design token \u6216\u8005 \u8986\u76D6css \u53D8\u91CF \u8FDB\u884C\u4E3B\u9898\u5B9A\u5236\n */\nconst Theme = ({ brand, children }: ThemeProps) => {\n  React.useLayoutEffect(() => {\n    document.querySelector('html')?.setAttribute('data-brand-theme', brand)\n  }, [])\n  return <>{children}</>\n}\n\nexport default Theme\n"],
+  "mappings": "aAiBS,mBAAAA,EAAA,OAAAC,MAAA,oBAhBT,UAAYC,MAAW,QAYvB,MAAMC,EAAQ,CAAC,CAAE,MAAAC,EAAO,SAAAC,CAAS,KAC/BH,EAAM,gBAAgB,IAAM,CAC1B,SAAS,cAAc,MAAM,GAAG,aAAa,mBAAoBE,CAAK,CACxE,EAAG,CAAC,CAAC,EACEH,EAAAD,EAAA,CAAG,SAAAK,EAAS,GAGrB,IAAOC,EAAQH",
   "names": ["Fragment", "jsx", "React", "Theme", "brand", "children", "theme_default"]
 }

package/dist/esm/shared/Styles.js

@@ -1,2 +1,2 @@
-import{Fragment as G,jsx as a,jsxs as x}from"react/jsx-runtime";import b,{useMemo as c}from"react";import{simpleHash as p}from"./simpleHash.js";import P from"./getKeyPropsString.js";import{Grid as S,GridItem as g}from"../components/gird.js";import{Container as C}from"../components/container.js";import f from"./ErrorBoundary.js";const N={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},R={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},i=t=>{const e=P(t);return`style_${p(e)}`},k=t=>{const{style:e,uid:n,disabled:s}=t;return{style:e,uid:n,disabled:s}},$=({style:t,uid:e=i({}),disabled:n=!1})=>!t||n?null:a("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),w=(t,e)=>{const n=c(()=>t?.uid||i({...t,data:e}),[e,t]),s=c(()=>a($,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:s,uid:n}},h=t=>{const{desktopSpan:e,mobileSpan:n}=t?.container||{},s=n?N[n]:"",r=e?R[e]:"";return`${s} ${r}`.trim()};function L(t,e){const n=b.forwardRef((s,r)=>{const d={...e,...k(s)},{className:l,StyleComponent:m}=w(d,s?.data),y=o=>a(C,{className:`${l} ${o?.className}`,children:a(S,{className:"container_grid",children:a(g,{className:h(o),children:a(t,{...o,ref:r})})})}),u=o=>a(t,{...o,className:`${l} ${o?.className}`,ref:r});return a(G,{children:x(f,{children:[m,Reflect.ownKeys(s?.container||{})?.length>0?y(s):u(s)]})})});return n.displayName=t.displayName||t.name||"Component",n}export{k as getStylesProps,w as useStyles,L as withLayout};
+import{Fragment as G,jsx as a,jsxs as x}from"react/jsx-runtime";import b,{useMemo as c}from"react";import{simpleHash as p}from"./simpleHash.js";import P from"./getKeyPropsString.js";import{Grid as S,GridItem as g}from"../components/grid.js";import{Container as C}from"../components/container.js";import f from"./ErrorBoundary.js";const N={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},R={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},i=t=>{const e=P(t);return`style_${p(e)}`},k=t=>{const{style:e,uid:n,disabled:s}=t;return{style:e,uid:n,disabled:s}},$=({style:t,uid:e=i({}),disabled:n=!1})=>!t||n?null:a("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),w=(t,e)=>{const n=c(()=>t?.uid||i({...t,data:e}),[e,t]),s=c(()=>a($,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:s,uid:n}},h=t=>{const{desktopSpan:e,mobileSpan:n}=t?.container||{},s=n?N[n]:"",r=e?R[e]:"";return`${s} ${r}`.trim()};function L(t,e){const n=b.forwardRef((s,r)=>{const d={...e,...k(s)},{className:l,StyleComponent:m}=w(d,s?.data),y=o=>a(C,{className:`${l} ${o?.className}`,children:a(S,{className:"container_grid",children:a(g,{className:h(o),children:a(t,{...o,ref:r})})})}),u=o=>a(t,{...o,className:`${l} ${o?.className}`,ref:r});return a(G,{children:x(f,{children:[m,Reflect.ownKeys(s?.container||{})?.length>0?y(s):u(s)]})})});return n.displayName=t.displayName||t.name||"Component",n}export{k as getStylesProps,w as useStyles,L as withLayout};
 //# sourceMappingURL=Styles.js.map

package/dist/esm/shared/Styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/shared/Styles.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/gird.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n  12: 'col-start-1 col-end-13',\n  10: 'col-start-2 col-end-12',\n  8: 'col-start-3 col-end-11',\n  6: 'col-start-4 col-end-10',\n  4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n  12: 'tablet:col-start-1 tablet:col-end-13',\n  10: 'tablet:col-start-2 tablet:col-end-12',\n  8: 'tablet:col-start-3 tablet:col-end-11',\n  6: 'tablet:col-start-4 tablet:col-end-10',\n  4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n  container?: {\n    /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    desktopSpan: number\n    /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    mobileSpan: number\n  }\n}\n\nexport interface StylesProps {\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n  style?: string\n  /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n  uid?: string\n  /** \u662F\u5426\u7981\u7528 */\n  disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n  const keyString = getKeyPropsString(props)\n  return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n  const { style, uid, disabled } = props\n  return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n  if (!style || disabled) {\n    return null\n  }\n\n  return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n  const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n  const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n  return {\n    className: `block-${uid} `,\n    StyleComponent,\n    uid,\n  } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n  const { desktopSpan, mobileSpan } = props?.container || {}\n  const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n  const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n  return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n  const withLayout = React.forwardRef<\n    any,\n    Omit<P, keyof StylesProps> &\n      Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n  >((props, ref) => {\n    const finalStyleProps = {\n      ...defaultLayoutProps,\n      ...getStylesProps(props),\n    }\n\n    const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n    const WithContainerWrapper = (props: any) => {\n      return (\n        <Container className={`${className} ${(props as any)?.className}`}>\n          <Grid className=\"container_grid\">\n            <GridItem className={getContainerClassName(props)}>\n              <WrappedComponent {...(props as unknown as P)} ref={ref} />\n            </GridItem>\n          </Grid>\n        </Container>\n      )\n    }\n\n    const WithoutContainerWrapper = (props: any) => {\n      return (\n        <WrappedComponent\n          {...(props as unknown as P)}\n          className={`${className} ${(props as any)?.className}`}\n          ref={ref}\n        />\n      )\n    }\n\n    return (\n      <>\n        <ErrorBoundary>\n          {StyleComponent}\n          {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n            ? WithContainerWrapper(props)\n            : WithoutContainerWrapper(props)}\n        </ErrorBoundary>\n      </>\n    )\n  })\n\n  // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n  withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n  return withLayout\n}\n"],
+  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n  12: 'col-start-1 col-end-13',\n  10: 'col-start-2 col-end-12',\n  8: 'col-start-3 col-end-11',\n  6: 'col-start-4 col-end-10',\n  4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n  12: 'tablet:col-start-1 tablet:col-end-13',\n  10: 'tablet:col-start-2 tablet:col-end-12',\n  8: 'tablet:col-start-3 tablet:col-end-11',\n  6: 'tablet:col-start-4 tablet:col-end-10',\n  4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n  container?: {\n    /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    desktopSpan: number\n    /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    mobileSpan: number\n  }\n}\n\nexport interface StylesProps {\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n  style?: string\n  /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n  uid?: string\n  /** \u662F\u5426\u7981\u7528 */\n  disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n  const keyString = getKeyPropsString(props)\n  return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n  const { style, uid, disabled } = props\n  return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n  if (!style || disabled) {\n    return null\n  }\n\n  return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n  const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n  const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n  return {\n    className: `block-${uid} `,\n    StyleComponent,\n    uid,\n  } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n  const { desktopSpan, mobileSpan } = props?.container || {}\n  const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n  const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n  return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n  const withLayout = React.forwardRef<\n    any,\n    Omit<P, keyof StylesProps> &\n      Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n  >((props, ref) => {\n    const finalStyleProps = {\n      ...defaultLayoutProps,\n      ...getStylesProps(props),\n    }\n\n    const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n    const WithContainerWrapper = (props: any) => {\n      return (\n        <Container className={`${className} ${(props as any)?.className}`}>\n          <Grid className=\"container_grid\">\n            <GridItem className={getContainerClassName(props)}>\n              <WrappedComponent {...(props as unknown as P)} ref={ref} />\n            </GridItem>\n          </Grid>\n        </Container>\n      )\n    }\n\n    const WithoutContainerWrapper = (props: any) => {\n      return (\n        <WrappedComponent\n          {...(props as unknown as P)}\n          className={`${className} ${(props as any)?.className}`}\n          ref={ref}\n        />\n      )\n    }\n\n    return (\n      <>\n        <ErrorBoundary>\n          {StyleComponent}\n          {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n            ? WithContainerWrapper(props)\n            : WithoutContainerWrapper(props)}\n        </ErrorBoundary>\n      </>\n    )\n  })\n\n  // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n  withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n  return withLayout\n}\n"],
   "mappings": "AAkES,OAsEH,YAAAA,EAtEG,OAAAC,EAuED,QAAAC,MAvEC,oBAlET,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,kBAC3B,OAAOC,MAAuB,yBAC9B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,wBAC/B,OAAS,aAAAC,MAAiB,6BAC1B,OAAOC,MAAmB,qBAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAGMC,EAAkD,CACtD,GAAI,uCACJ,GAAI,uCACJ,EAAG,uCACH,EAAG,uCACH,EAAG,qCACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,EAAYT,EAAkBQ,CAAK,EACzC,MAAO,SAAST,EAAWU,CAAS,CAAC,EACvC,EAKaC,EAAqDF,GAAwC,CACxG,KAAM,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIL,EACjC,MAAO,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAML,EAAY,CAAC,CAAC,EAAG,SAAAM,EAAW,EAAM,IAClF,CAACF,GAASE,EACL,KAGFlB,EAAC,SAAM,yBAAwB,GAAC,gBAAeiB,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EI,EAAY,CAACC,EAAkCC,IAA+B,CACzF,MAAML,EAAMd,EAAQ,IAAMkB,GAAY,KAAOT,EAAY,CAAE,GAAGS,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,EAAiBpB,EAAQ,IAAMH,EAACmB,EAAA,CAAQ,GAAGE,EAAY,IAAKJ,EAAK,EAAI,CAACI,EAAYJ,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAM,EACA,IAAAN,CACF,CACF,EAEMO,EAAyBX,GAAkD,CAC/E,KAAM,CAAE,YAAAY,EAAa,WAAAC,CAAW,EAAIb,GAAO,WAAa,CAAC,EACnDc,EAAgBD,EAAahB,EAAkBgB,CAAU,EAAI,GAC7DE,EAAiBH,EAAcd,EAAwBc,CAAW,EAAI,GAC5E,MAAO,GAAGE,CAAa,IAAIC,CAAc,GAAG,KAAK,CACnD,EAOO,SAASC,EACdC,EACAC,EACA,CACA,MAAMF,EAAa3B,EAAM,WAIvB,CAACW,EAAOmB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGF,EACH,GAAGhB,EAAeF,CAAK,CACzB,EAEM,CAAE,UAAAqB,EAAW,eAAAX,CAAe,EAAIH,EAAUa,EAAkBpB,GAAe,IAAI,EAE/EsB,EAAwBtB,GAE1Bb,EAACQ,EAAA,CAAU,UAAW,GAAG0B,CAAS,IAAKrB,GAAe,SAAS,GAC7D,SAAAb,EAACM,EAAA,CAAK,UAAU,iBACd,SAAAN,EAACO,EAAA,CAAS,UAAWiB,EAAsBX,CAAK,EAC9C,SAAAb,EAAC8B,EAAA,CAAkB,GAAIjB,EAAwB,IAAKmB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BvB,GAE7Bb,EAAC8B,EAAA,CACE,GAAIjB,EACL,UAAW,GAAGqB,CAAS,IAAKrB,GAAe,SAAS,GACpD,IAAKmB,EACP,EAIJ,OACEhC,EAAAD,EAAA,CACE,SAAAE,EAACQ,EAAA,CACE,UAAAc,EACA,QAAQ,QAASV,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDsB,EAAqBtB,CAAK,EAC1BuB,EAAwBvB,CAAK,GACnC,EACF,CAEJ,CAAC,EAGD,OAAAgB,EAAW,YAAcC,EAAiB,aAAeA,EAAiB,MAAQ,YAC3ED,CACT",
   "names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
 }

package/dist/esm/stories/grid.stories.js

@@ -1,4 +1,4 @@
-import{Fragment as x,jsx as t,jsxs as s}from"react/jsx-runtime";import"react";import{Grid as p,GridItem as e}from"../components/gird.js";const m={title:"Layout/Grid",component:p,subcomponents:{GridItem:e},parameters:{layout:"fullscreen",docs:{description:{component:`
+import{Fragment as x,jsx as t,jsxs as s}from"react/jsx-runtime";import"react";import{Grid as p,GridItem as e}from"../components/grid.js";const m={title:"Layout/Grid",component:p,subcomponents:{GridItem:e},parameters:{layout:"fullscreen",docs:{description:{component:`
 Grid \u5E03\u5C40\u7EC4\u4EF6\uFF0C\u57FA\u4E8E CSS Grid \u5B9E\u73B0\u7684 12 \u5217\u7F51\u683C\u7CFB\u7EDF\u3002
 
 ### \u5B9E\u73B0\u7EC6\u8282

package/dist/esm/stories/grid.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/grid.stories.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Grid, GridItem } from '../components/gird.js'\n\nconst meta = {\n  title: 'Layout/Grid',\n  component: Grid,\n  subcomponents: {\n    GridItem,\n  },\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nGrid \u5E03\u5C40\u7EC4\u4EF6\uFF0C\u57FA\u4E8E CSS Grid \u5B9E\u73B0\u7684 12 \u5217\u7F51\u683C\u7CFB\u7EDF\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- Grid \u7EC4\u4EF6\u4F7F\u7528 CSS Grid \u5E03\u5C40\uFF0C\u9ED8\u8BA4\u4E3A 12 \u5217\u7F51\u683C\n- \u9ED8\u8BA4\u95F4\u8DDD\u4E3A gap-3 (12px)\uFF0C\u5728 md \u65AD\u70B9\u540E\u53D8\u4E3A gap-4 (16px)\n- \u4F7F\u7528 Tailwind CSS \u7684\u7F51\u683C\u7C7B\u5B9E\u73B0\uFF0C\u65E0\u9700\u989D\u5916\u7684 CSS\n\n### \u5BBD\u5EA6 \u548C \u81EA\u5B9A\u4E49\u5B9A\u4F4D\u5F00\u59CB\u548C\u7ED3\u675F\u4F4D\u7F6E\n- \u4F7F\u7528 start \u548C end \u5C5E\u6027\u6765\u6307\u5B9A\u7F51\u683C\u9879\u7684\u5F00\u59CB\u548C\u7ED3\u675F\u4F4D\u7F6E\uFF081-13\uFF09\n- \u4F7F\u7528 span \u5C5E\u6027\u6765\u6307\u5B9A\u7F51\u683C\u9879\u7684\u8DE8\u5EA6\uFF081-12\uFF09\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Grid>\n\nexport default meta\n\ntype Story = StoryObj<typeof Grid>\n\n// \u57FA\u7840\u5E03\u5C40\nexport const Basic = () => (\n  <div className=\"p-4\">\n    <Grid>\n      <GridItem span={12} className=\"bg-blue-100 p-4 text-center\">\n        span-12\n      </GridItem>\n      <GridItem span={6} className=\"bg-blue-200 p-4 text-center\">\n        span-6\n      </GridItem>\n      <GridItem span={6} className=\"bg-blue-300 p-4 text-center\">\n        span-6\n      </GridItem>\n      <GridItem span={4} className=\"bg-blue-400 p-4 text-center\">\n        span-4\n      </GridItem>\n      <GridItem span={4} className=\"bg-blue-500 p-4 text-center\">\n        span-4\n      </GridItem>\n      <GridItem span={4} className=\"bg-blue-600 p-4 text-center\">\n        span-4\n      </GridItem>\n      <GridItem span={3} className=\"bg-blue-700 p-4 text-center text-white\">\n        span-3\n      </GridItem>\n      <GridItem span={3} className=\"bg-blue-800 p-4 text-center text-white\">\n        span-3\n      </GridItem>\n      <GridItem span={3} className=\"bg-blue-900 p-4 text-center text-white\">\n        span-3\n      </GridItem>\n      <GridItem span={3} className=\"bg-blue-950 p-4 text-center text-white\">\n        span-3\n      </GridItem>\n    </Grid>\n  </div>\n)\n\ntype GridStart = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\ntype GridEnd = 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13\n\nexport const CustomPosition = ({\n  baseStart = 2,\n  baseEnd = 6,\n  showBoundaryExamples = true,\n  gridGap = '',\n  colorScheme = 'blue',\n}: any) => (\n  <div className=\"p-4\">\n    <Grid className={gridGap}>\n      {/* \u57FA\u672C\u5B9A\u4F4D\u793A\u4F8B */}\n      <GridItem\n        start={baseStart as GridStart}\n        end={baseEnd as GridEnd}\n        className={`bg-${colorScheme}-200 p-4 text-center`}\n      >\n        start-{baseStart} end-{baseEnd}\n      </GridItem>\n      <GridItem start={(baseEnd + 1) as GridStart} end={12} className={`bg-${colorScheme}-300 p-4 text-center`}>\n        start-{baseEnd + 1} end-12\n      </GridItem>\n\n      {/* \u8DE8\u8D8A\u6574\u884C\u793A\u4F8B */}\n      <GridItem start={1} end={13} className={`bg-${colorScheme}-400 p-4 text-center`}>\n        start-1 end-13 (\u6574\u884C)\n      </GridItem>\n\n      {/* \u5355\u683C\u793A\u4F8B */}\n      <GridItem start={1} end={2} className={`bg-${colorScheme}-500 p-4 text-center text-white`}>\n        1\u683C (start-1)\n      </GridItem>\n      <GridItem start={3} end={4} className={`bg-${colorScheme}-500 p-4 text-center text-white`}>\n        1\u683C (start-3)\n      </GridItem>\n\n      {/* \u4E0D\u89C4\u5219\u8DE8\u5EA6\u793A\u4F8B */}\n      <GridItem start={5} end={10} className={`bg-${colorScheme}-600 p-4 text-center text-white`}>\n        start-5 end-10\n      </GridItem>\n      <GridItem start={10} end={13} className={`bg-${colorScheme}-700 p-4 text-center text-white`}>\n        end-13\n      </GridItem>\n\n      {/* \u4F7F\u7528 span \u7684\u793A\u4F8B */}\n      <GridItem start={1} span={3} className={`bg-${colorScheme}-800 p-4 text-center text-white`}>\n        start-1 span-3\n      </GridItem>\n      <GridItem start={4} span={9} className={`bg-${colorScheme}-900 p-4 text-center text-white`}>\n        start-4 span-9\n      </GridItem>\n\n      {/* \u8FB9\u754C\u60C5\u51B5\u793A\u4F8B */}\n      {showBoundaryExamples && (\n        <>\n          <GridItem start={12} span={1} className=\"bg-yellow-500 p-4 text-center text-white\">\n            \u6700\u540E1\u683C\n          </GridItem>\n          <GridItem start={1} span={1} className=\"bg-yellow-600 p-4 text-center text-white\">\n            \u7B2C1\u683C\n          </GridItem>\n        </>\n      )}\n    </Grid>\n  </div>\n)\n\n// \u81EA\u5B9A\u4E49\u95F4\u8DDD\nexport const CustomGap = () => (\n  <div className=\"p-4\">\n    <Grid className=\"gap-8\">\n      <GridItem span={6} className=\"bg-purple-200 p-4 text-center\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n      <GridItem span={6} className=\"bg-purple-300 p-4 text-center\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n      <GridItem span={4} className=\"bg-purple-400 p-4 text-center\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n      <GridItem span={4} className=\"bg-purple-500 p-4 text-center text-white\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n      <GridItem span={4} className=\"bg-purple-600 p-4 text-center text-white\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n    </Grid>\n  </div>\n)\n\n// \u4E0D\u540C\u7684\u6A2A\u5411\u548C\u7EB5\u5411\u95F4\u8DDD\nexport const DifferentGaps = () => (\n  <div className=\"p-4\">\n    <Grid className=\"gap-x-8 gap-y-2\">\n      <GridItem span={6} className=\"bg-orange-200 p-4 text-center\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n      <GridItem span={6} className=\"bg-orange-300 p-4 text-center\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n      <GridItem span={4} className=\"bg-orange-400 p-4 text-center\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n      <GridItem span={4} className=\"bg-orange-500 p-4 text-center text-white\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n      <GridItem span={4} className=\"bg-orange-600 p-4 text-center text-white\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n    </Grid>\n  </div>\n)\n"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Grid, GridItem } from '../components/grid.js'\n\nconst meta = {\n  title: 'Layout/Grid',\n  component: Grid,\n  subcomponents: {\n    GridItem,\n  },\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nGrid \u5E03\u5C40\u7EC4\u4EF6\uFF0C\u57FA\u4E8E CSS Grid \u5B9E\u73B0\u7684 12 \u5217\u7F51\u683C\u7CFB\u7EDF\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- Grid \u7EC4\u4EF6\u4F7F\u7528 CSS Grid \u5E03\u5C40\uFF0C\u9ED8\u8BA4\u4E3A 12 \u5217\u7F51\u683C\n- \u9ED8\u8BA4\u95F4\u8DDD\u4E3A gap-3 (12px)\uFF0C\u5728 md \u65AD\u70B9\u540E\u53D8\u4E3A gap-4 (16px)\n- \u4F7F\u7528 Tailwind CSS \u7684\u7F51\u683C\u7C7B\u5B9E\u73B0\uFF0C\u65E0\u9700\u989D\u5916\u7684 CSS\n\n### \u5BBD\u5EA6 \u548C \u81EA\u5B9A\u4E49\u5B9A\u4F4D\u5F00\u59CB\u548C\u7ED3\u675F\u4F4D\u7F6E\n- \u4F7F\u7528 start \u548C end \u5C5E\u6027\u6765\u6307\u5B9A\u7F51\u683C\u9879\u7684\u5F00\u59CB\u548C\u7ED3\u675F\u4F4D\u7F6E\uFF081-13\uFF09\n- \u4F7F\u7528 span \u5C5E\u6027\u6765\u6307\u5B9A\u7F51\u683C\u9879\u7684\u8DE8\u5EA6\uFF081-12\uFF09\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Grid>\n\nexport default meta\n\ntype Story = StoryObj<typeof Grid>\n\n// \u57FA\u7840\u5E03\u5C40\nexport const Basic = () => (\n  <div className=\"p-4\">\n    <Grid>\n      <GridItem span={12} className=\"bg-blue-100 p-4 text-center\">\n        span-12\n      </GridItem>\n      <GridItem span={6} className=\"bg-blue-200 p-4 text-center\">\n        span-6\n      </GridItem>\n      <GridItem span={6} className=\"bg-blue-300 p-4 text-center\">\n        span-6\n      </GridItem>\n      <GridItem span={4} className=\"bg-blue-400 p-4 text-center\">\n        span-4\n      </GridItem>\n      <GridItem span={4} className=\"bg-blue-500 p-4 text-center\">\n        span-4\n      </GridItem>\n      <GridItem span={4} className=\"bg-blue-600 p-4 text-center\">\n        span-4\n      </GridItem>\n      <GridItem span={3} className=\"bg-blue-700 p-4 text-center text-white\">\n        span-3\n      </GridItem>\n      <GridItem span={3} className=\"bg-blue-800 p-4 text-center text-white\">\n        span-3\n      </GridItem>\n      <GridItem span={3} className=\"bg-blue-900 p-4 text-center text-white\">\n        span-3\n      </GridItem>\n      <GridItem span={3} className=\"bg-blue-950 p-4 text-center text-white\">\n        span-3\n      </GridItem>\n    </Grid>\n  </div>\n)\n\ntype GridStart = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\ntype GridEnd = 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13\n\nexport const CustomPosition = ({\n  baseStart = 2,\n  baseEnd = 6,\n  showBoundaryExamples = true,\n  gridGap = '',\n  colorScheme = 'blue',\n}: any) => (\n  <div className=\"p-4\">\n    <Grid className={gridGap}>\n      {/* \u57FA\u672C\u5B9A\u4F4D\u793A\u4F8B */}\n      <GridItem\n        start={baseStart as GridStart}\n        end={baseEnd as GridEnd}\n        className={`bg-${colorScheme}-200 p-4 text-center`}\n      >\n        start-{baseStart} end-{baseEnd}\n      </GridItem>\n      <GridItem start={(baseEnd + 1) as GridStart} end={12} className={`bg-${colorScheme}-300 p-4 text-center`}>\n        start-{baseEnd + 1} end-12\n      </GridItem>\n\n      {/* \u8DE8\u8D8A\u6574\u884C\u793A\u4F8B */}\n      <GridItem start={1} end={13} className={`bg-${colorScheme}-400 p-4 text-center`}>\n        start-1 end-13 (\u6574\u884C)\n      </GridItem>\n\n      {/* \u5355\u683C\u793A\u4F8B */}\n      <GridItem start={1} end={2} className={`bg-${colorScheme}-500 p-4 text-center text-white`}>\n        1\u683C (start-1)\n      </GridItem>\n      <GridItem start={3} end={4} className={`bg-${colorScheme}-500 p-4 text-center text-white`}>\n        1\u683C (start-3)\n      </GridItem>\n\n      {/* \u4E0D\u89C4\u5219\u8DE8\u5EA6\u793A\u4F8B */}\n      <GridItem start={5} end={10} className={`bg-${colorScheme}-600 p-4 text-center text-white`}>\n        start-5 end-10\n      </GridItem>\n      <GridItem start={10} end={13} className={`bg-${colorScheme}-700 p-4 text-center text-white`}>\n        end-13\n      </GridItem>\n\n      {/* \u4F7F\u7528 span \u7684\u793A\u4F8B */}\n      <GridItem start={1} span={3} className={`bg-${colorScheme}-800 p-4 text-center text-white`}>\n        start-1 span-3\n      </GridItem>\n      <GridItem start={4} span={9} className={`bg-${colorScheme}-900 p-4 text-center text-white`}>\n        start-4 span-9\n      </GridItem>\n\n      {/* \u8FB9\u754C\u60C5\u51B5\u793A\u4F8B */}\n      {showBoundaryExamples && (\n        <>\n          <GridItem start={12} span={1} className=\"bg-yellow-500 p-4 text-center text-white\">\n            \u6700\u540E1\u683C\n          </GridItem>\n          <GridItem start={1} span={1} className=\"bg-yellow-600 p-4 text-center text-white\">\n            \u7B2C1\u683C\n          </GridItem>\n        </>\n      )}\n    </Grid>\n  </div>\n)\n\n// \u81EA\u5B9A\u4E49\u95F4\u8DDD\nexport const CustomGap = () => (\n  <div className=\"p-4\">\n    <Grid className=\"gap-8\">\n      <GridItem span={6} className=\"bg-purple-200 p-4 text-center\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n      <GridItem span={6} className=\"bg-purple-300 p-4 text-center\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n      <GridItem span={4} className=\"bg-purple-400 p-4 text-center\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n      <GridItem span={4} className=\"bg-purple-500 p-4 text-center text-white\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n      <GridItem span={4} className=\"bg-purple-600 p-4 text-center text-white\">\n        \u95F4\u8DDD 32px (gap-8)\n      </GridItem>\n    </Grid>\n  </div>\n)\n\n// \u4E0D\u540C\u7684\u6A2A\u5411\u548C\u7EB5\u5411\u95F4\u8DDD\nexport const DifferentGaps = () => (\n  <div className=\"p-4\">\n    <Grid className=\"gap-x-8 gap-y-2\">\n      <GridItem span={6} className=\"bg-orange-200 p-4 text-center\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n      <GridItem span={6} className=\"bg-orange-300 p-4 text-center\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n      <GridItem span={4} className=\"bg-orange-400 p-4 text-center\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n      <GridItem span={4} className=\"bg-orange-500 p-4 text-center text-white\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n      <GridItem span={4} className=\"bg-orange-600 p-4 text-center text-white\">\n        \u6A2A\u5411 32px \u7EB5\u5411 8px\n      </GridItem>\n    </Grid>\n  </div>\n)\n"],
   "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "Grid", "GridItem", "meta", "grid_stories_default", "Basic", "CustomPosition", "baseStart", "baseEnd", "showBoundaryExamples", "gridGap", "colorScheme", "CustomGap", "DifferentGaps"]
 }