@anker-in/headless-ui 1.1.9-temp.120303 → 1.1.9-tmp-01

package/dist/esm/components/container.js

@@ -1,2 +1,2 @@
-import{Fragment as u,jsx as o}from"react/jsx-runtime";import m from"react";import{cn as i}from"../helpers/utils.js";import{Slot as b}from"@radix-ui/react-slot";const g=({children:e})=>o(u,{children:e}),h=m.forwardRef(({...e},t)=>{const{asChild:p,children:n,className:s,childClassName:a,spaceY:c="none",spaceTop:r="none",spaceBottom:l="none",...x}=e,f=p?b:"div",C={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},y={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},R={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return o(f,{...x,ref:t,className:i(s,"ipc_container","relative z-10 w-full overflow-hidden bg-white"),children:o("div",{className:i("lg-desktop:max-w-full mx-auto size-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",a,C?.[c]||c,y?.[r]||r,R?.[l]||l),children:n})})}),d=m.forwardRef(({...e},t)=>{const{children:p,mode:n="section"}=e,a={section:h,fragment:g}[n];return o(a,{...e,ref:t,children:p})});d.displayName="Container";export{d as Container};
+import{Fragment as h,jsx as t}from"react/jsx-runtime";import m from"react";import{cn as i}from"../helpers/utils.js";import{Slot as b}from"@radix-ui/react-slot";const g=({children:e})=>t(h,{children:e}),u=m.forwardRef(({...e},o)=>{const{asChild:p,children:n,className:s,childClassName:a,spaceY:c="none",spaceTop:r="none",spaceBottom:l="none",...x}=e,f=p?b:"div",C={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},y={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},R={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return t(f,{...x,ref:o,className:i(s,"ipc_container","relative z-10 w-full"),children:t("div",{className:i("lg-desktop:max-w-full mx-auto size-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",a,C?.[c]||c,y?.[r]||r,R?.[l]||l),children:n})})}),d=m.forwardRef(({...e},o)=>{const{children:p,mode:n="section"}=e,a={section:u,fragment:g}[n];return t(a,{...e,ref:o,children:p})});d.displayName="Container";export{d as Container};
 //# sourceMappingURL=container.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/container.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n  asChild?: boolean\n  children?: React.ReactNode\n  className?: string\n  childClassName?: string\n  spaceY?: SpaceY\n  spaceTop?: SpaceTop\n  spaceBottom?: SpaceBottom\n  mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    childClassName,\n    spaceY = 'none',\n    spaceTop = 'none',\n    spaceBottom = 'none',\n    ...containerProps\n  } = props\n\n  const Comp = asChild ? Slot : 'div'\n\n  const spaceY_map: any = {\n    default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n    none: '',\n  }\n\n  const spaceTop_map: any = {\n    default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n    none: '',\n  }\n\n  const spaceBottom_map: any = {\n    default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n    none: '',\n  }\n\n  return (\n    <Comp\n      {...containerProps}\n      ref={forwardedRef}\n      className={cn(className, 'ipc_container', 'relative z-10 w-full overflow-hidden bg-white')}\n    >\n      <div\n        className={cn(\n          'lg-desktop:max-w-full mx-auto size-full',\n          'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n          childClassName,\n          spaceY_map?.[spaceY] || spaceY,\n          spaceTop_map?.[spaceTop] || spaceTop,\n          spaceBottom_map?.[spaceBottom] || spaceBottom\n        )}\n      >\n        {children}\n      </div>\n    </Comp>\n  )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const { children, mode = 'section' } = props\n\n  const componentsMap: {\n    [P in Mode]: React.ComponentType<any> | string\n  } = {\n    section: Section,\n    fragment: Fragment,\n  }\n\n  const Component = componentsMap![mode!]\n\n  return (\n    <Component {...props} ref={forwardedRef}>\n      {children}\n    </Component>\n  )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
-  "mappings": "AAkBS,mBAAAA,EAAA,OAAAC,MAAA,oBAlBT,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAerB,MAAMJ,EAAW,CAAC,CAAE,SAAAK,CAAS,IACpBJ,EAAAD,EAAA,CAAG,SAAAK,EAAS,EAGfC,EAAUJ,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAJ,EACA,UAAAK,EACA,eAAAC,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIR,EAEES,EAAOP,EAAUL,EAAO,MAExBa,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,OACElB,EAACe,EAAA,CACE,GAAGD,EACJ,IAAKP,EACL,UAAWL,EAAGO,EAAW,gBAAiB,+CAA+C,EAEzF,SAAAT,EAAC,OACC,UAAWE,EACT,0CACA,8EACAQ,EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAT,EACH,EACF,CAEJ,CAAC,EAEKe,EAAYlB,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAH,EAAU,KAAAgB,EAAO,SAAU,EAAId,EASjCe,EALF,CACF,QAAShB,EACT,SAAUN,CACZ,EAEiCqB,CAAK,EAEtC,OACEpB,EAACqB,EAAA,CAAW,GAAGf,EAAO,IAAKC,EACxB,SAAAH,EACH,CAEJ,CAAC,EAEDe,EAAU,YAAc",
+  "sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n  asChild?: boolean\n  children?: React.ReactNode\n  className?: string\n  childClassName?: string\n  spaceY?: SpaceY\n  spaceTop?: SpaceTop\n  spaceBottom?: SpaceBottom\n  mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    childClassName,\n    spaceY = 'none',\n    spaceTop = 'none',\n    spaceBottom = 'none',\n    ...containerProps\n  } = props\n\n  const Comp = asChild ? Slot : 'div'\n\n  const spaceY_map: any = {\n    default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n    none: '',\n  }\n\n  const spaceTop_map: any = {\n    default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n    none: '',\n  }\n\n  const spaceBottom_map: any = {\n    default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n    none: '',\n  }\n\n  return (\n    <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n      <div\n        className={cn(\n          'lg-desktop:max-w-full mx-auto size-full',\n          'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n          childClassName,\n          spaceY_map?.[spaceY] || spaceY,\n          spaceTop_map?.[spaceTop] || spaceTop,\n          spaceBottom_map?.[spaceBottom] || spaceBottom\n        )}\n      >\n        {children}\n      </div>\n    </Comp>\n  )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const { children, mode = 'section' } = props\n\n  const componentsMap: {\n    [P in Mode]: React.ComponentType<any> | string\n  } = {\n    section: Section,\n    fragment: Fragment,\n  }\n\n  const Component = componentsMap![mode!]\n\n  return (\n    <Component {...props} ref={forwardedRef}>\n      {children}\n    </Component>\n  )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
+  "mappings": "AAkBS,mBAAAA,EAAA,OAAAC,MAAA,oBAlBT,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAerB,MAAMJ,EAAW,CAAC,CAAE,SAAAK,CAAS,IACpBJ,EAAAD,EAAA,CAAG,SAAAK,EAAS,EAGfC,EAAUJ,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAJ,EACA,UAAAK,EACA,eAAAC,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIR,EAEES,EAAOP,EAAUL,EAAO,MAExBa,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,OACElB,EAACe,EAAA,CAAM,GAAGD,EAAgB,IAAKP,EAAc,UAAWL,EAAGO,EAAW,gBAAiB,sBAAsB,EAC3G,SAAAT,EAAC,OACC,UAAWE,EACT,0CACA,8EACAQ,EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAT,EACH,EACF,CAEJ,CAAC,EAEKe,EAAYlB,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAH,EAAU,KAAAgB,EAAO,SAAU,EAAId,EASjCe,EALF,CACF,QAAShB,EACT,SAAUN,CACZ,EAEiCqB,CAAK,EAEtC,OACEpB,EAACqB,EAAA,CAAW,GAAGf,EAAO,IAAKC,EACxB,SAAAH,EACH,CAEJ,CAAC,EAEDe,EAAU,YAAc",
   "names": ["Fragment", "jsx", "React", "cn", "Slot", "children", "Section", "props", "forwardedRef", "asChild", "className", "childClassName", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "Container", "mode", "Component"]
 }

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

@@ -6,7 +6,7 @@ declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    overlayClassName?: string | undefined;
+    overlayClassName?: string;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/drop-down.d.ts

@@ -7,17 +7,17 @@ declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPor
 declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
 declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean | undefined;
+    inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean | undefined;
+    inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean | undefined;
+    inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuShortcut: {

package/dist/esm/{src/components/gird.d.ts → components/grid.d.ts}

@@ -11,6 +11,11 @@ interface GridItemProps {
     start?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     end?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
 }
+/**
+ * Grid - 网格布局
+ *
+ * @description 基于CSS Grid的12列网格布局容器组件，提供灵活的响应式布局方案
+ */
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
 export { Grid, GridItem };

package/dist/esm/components/grid.js

@@ -0,0 +1,2 @@
+import{jsx as d}from"react/jsx-runtime";import a from"react";import{cn as l}from"../helpers/utils.js";const i={1:"col-span-1",2:"col-span-2",3:"col-span-3",4:"col-span-4",5:"col-span-5",6:"col-span-6",7:"col-span-7",8:"col-span-8",9:"col-span-9",10:"col-span-10",11:"col-span-11",12:"col-span-12"},m={1:"col-start-1",2:"col-start-2",3:"col-start-3",4:"col-start-4",5:"col-start-5",6:"col-start-6",7:"col-start-7",8:"col-start-8",9:"col-start-9",10:"col-start-10",11:"col-start-11",12:"col-start-12"},f={2:"col-end-2",3:"col-end-3",4:"col-end-4",5:"col-end-5",6:"col-end-6",7:"col-end-7",8:"col-end-8",9:"col-end-9",10:"col-end-10",11:"col-end-11",12:"col-end-12",13:"col-end-13"},r=a.forwardRef(({className:o,children:s},c)=>d("div",{ref:c,className:l("laptop:gap-4 grid grid-cols-12 gap-3",o),children:s}));r.displayName="Grid";const n=a.forwardRef(({className:o,children:s,span:c=12,start:t,end:e},p)=>d("div",{ref:p,className:l(i[c],t&&m[t],e&&f[e],o),children:s}));n.displayName="GridItem";export{r as Grid,n as GridItem};
+//# sourceMappingURL=grid.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/grid.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { ReactNode } from 'react'\nimport { cn } from '../helpers/utils.js'\n\ntype Element = React.ElementRef<'div'>\n\ninterface GridProps {\n  children?: ReactNode\n  className?: string\n}\n\ninterface GridItemProps {\n  children?: ReactNode\n  className?: string\n  span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 // \u9650\u5236\u4E3A\u5177\u4F53\u7684\u6570\u5B57\u7C7B\u578B\n  start?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 // \u8D77\u59CB\u5217\u4F4D\u7F6E\n  end?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 // \u7ED3\u675F\u5217\u4F4D\u7F6E\n}\n\nconst colSpanClasses = {\n  1: 'col-span-1',\n  2: 'col-span-2',\n  3: 'col-span-3',\n  4: 'col-span-4',\n  5: 'col-span-5',\n  6: 'col-span-6',\n  7: 'col-span-7',\n  8: 'col-span-8',\n  9: 'col-span-9',\n  10: 'col-span-10',\n  11: 'col-span-11',\n  12: 'col-span-12',\n} as const\n\nconst colStartClasses = {\n  1: 'col-start-1',\n  2: 'col-start-2',\n  3: 'col-start-3',\n  4: 'col-start-4',\n  5: 'col-start-5',\n  6: 'col-start-6',\n  7: 'col-start-7',\n  8: 'col-start-8',\n  9: 'col-start-9',\n  10: 'col-start-10',\n  11: 'col-start-11',\n  12: 'col-start-12',\n} as const\n\nconst colEndClasses = {\n  2: 'col-end-2',\n  3: 'col-end-3',\n  4: 'col-end-4',\n  5: 'col-end-5',\n  6: 'col-end-6',\n  7: 'col-end-7',\n  8: 'col-end-8',\n  9: 'col-end-9',\n  10: 'col-end-10',\n  11: 'col-end-11',\n  12: 'col-end-12',\n  13: 'col-end-13',\n} as const\n\n/**\n * Grid - \u7F51\u683C\u5E03\u5C40\n *\n * @description \u57FA\u4E8ECSS Grid\u768412\u5217\u7F51\u683C\u5E03\u5C40\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u7075\u6D3B\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u65B9\u6848\n */\nconst Grid = React.forwardRef<Element, GridProps>(({ className, children }, forwardedRef) => {\n  return (\n    <div ref={forwardedRef} className={cn('laptop:gap-4 grid grid-cols-12 gap-3', className)}>\n      {children}\n    </div>\n  )\n})\nGrid.displayName = 'Grid'\n\nconst GridItem = React.forwardRef<Element, GridItemProps>(\n  ({ className, children, span = 12, start, end }, forwardedRef) => {\n    return (\n      <div\n        ref={forwardedRef}\n        className={cn(colSpanClasses[span], start && colStartClasses[start], end && colEndClasses[end], className)}\n      >\n        {children}\n      </div>\n    )\n  }\n)\nGridItem.displayName = 'GridItem'\n\nexport { Grid, GridItem }\nexport type { GridProps, GridItemProps }\n"],
+  "mappings": "AAuEI,cAAAA,MAAA,oBAvEJ,OAAOC,MAAW,QAElB,OAAS,MAAAC,MAAU,sBAiBnB,MAAMC,EAAiB,CACrB,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,GAAI,cACJ,GAAI,cACJ,GAAI,aACN,EAEMC,EAAkB,CACtB,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,GAAI,eACJ,GAAI,eACJ,GAAI,cACN,EAEMC,EAAgB,CACpB,EAAG,YACH,EAAG,YACH,EAAG,YACH,EAAG,YACH,EAAG,YACH,EAAG,YACH,EAAG,YACH,EAAG,YACH,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,YACN,EAOMC,EAAOL,EAAM,WAA+B,CAAC,CAAE,UAAAM,EAAW,SAAAC,CAAS,EAAGC,IAExET,EAAC,OAAI,IAAKS,EAAc,UAAWP,EAAG,uCAAwCK,CAAS,EACpF,SAAAC,EACH,CAEH,EACDF,EAAK,YAAc,OAEnB,MAAMI,EAAWT,EAAM,WACrB,CAAC,CAAE,UAAAM,EAAW,SAAAC,EAAU,KAAAG,EAAO,GAAI,MAAAC,EAAO,IAAAC,CAAI,EAAGJ,IAE7CT,EAAC,OACC,IAAKS,EACL,UAAWP,EAAGC,EAAeQ,CAAI,EAAGC,GAASR,EAAgBQ,CAAK,EAAGC,GAAOR,EAAcQ,CAAG,EAAGN,CAAS,EAExG,SAAAC,EACH,CAGN,EACAE,EAAS,YAAc",
+  "names": ["jsx", "React", "cn", "colSpanClasses", "colStartClasses", "colEndClasses", "Grid", "className", "children", "forwardedRef", "GridItem", "span", "start", "end"]
+}

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

@@ -5,7 +5,6 @@ declare const headingVariants: (props?: ({
     size?: 1 | "none" | 2 | 3 | 4 | 5 | null | undefined;
     weight?: "bold" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
     align?: "left" | "right" | "center" | null | undefined;
-    colorVariant?: "primary" | "secondary" | "white" | "tertiary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/esm/components/heading.js

@@ -1,2 +1,2 @@
-import{jsx as n}from"react/jsx-runtime";import{cn as y}from"../helpers/index.js";import{Slot as k}from"@radix-ui/react-slot";import{cva as b}from"class-variance-authority";import H from"react";import{convertLexicalToHTML as P}from"@payloadcms/richtext-lexical/html";const S=b("text-balance leading-tight tracking-[-0.04em]",{variants:{size:{none:"tracking-[-0.04em]",1:"lg-desktop:text-[16px] text-[14px] leading-[120%]",2:"lg-desktop:text-[24px] text-[20px] leading-[120%]",3:"desktop:text-[32px] text-[24px] leading-[120%]",4:"desktop:text-[40px] lg-desktop:text-[48px] text-[32px] leading-[100%]",5:"desktop:text-[56px] lg-desktop:text-[64px] text-[40px] leading-[100%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"},colorVariant:{primary:"text-info-primary",secondary:"text-info-secondary",tertiary:"text-info-tertiary",white:"text-info-white"}},defaultVariants:{size:"none",weight:"bold",colorVariant:"primary"}}),i=H.forwardRef((r,l)=>{const{children:e,className:d,size:p="none",align:s,weight:x,colorVariant:g,asChild:m,as:c="h2",color:o,html:t,...h}=r,a=t?{dangerouslySetInnerHTML:{__html:typeof t=="string"?t:P({data:t})}}:null,f=o?{style:{color:o}}:null;return n(k,{...h,ref:l,className:y(S({size:p,weight:x,align:s,colorVariant:g}),d),...a,...f,children:m?e:n(c,{children:a?null:e})})});i.displayName="Heading";export{i as Heading};
+import{jsx as n}from"react/jsx-runtime";import{cn as f}from"../helpers/index.js";import{Slot as k}from"@radix-ui/react-slot";import{cva as b}from"class-variance-authority";import y from"react";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";const P=b("text-balance leading-tight tracking-[-0.04em]",{variants:{size:{none:"tracking-[-0.04em]",1:"lg-desktop:text-[16px] text-[14px] leading-[120%]",2:"lg-desktop:text-[24px] text-[20px] leading-[120%]",3:"desktop:text-[32px] text-[24px] leading-[120%]",4:"desktop:text-[40px] lg-desktop:text-[48px] text-[32px] leading-[100%]",5:"desktop:text-[56px] lg-desktop:text-[64px] text-[40px] leading-[100%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),i=y.forwardRef((l,r)=>{const{children:t,className:d,size:s="none",align:p,weight:g,asChild:x,as:m="h2",color:o,html:e,...c}=l,a=e?{dangerouslySetInnerHTML:{__html:typeof e=="string"?e:H({data:e})}}:null,h=o?{style:{color:o}}:null;return n(k,{...c,ref:r,className:f(P({size:s,weight:g,align:p}),d),...a,...h,children:x?t:n(m,{children:a?null:t})})});i.displayName="Heading";export{i as Heading};
 //# sourceMappingURL=heading.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/heading.tsx"],
-  "sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('text-balance leading-tight tracking-[-0.04em]', {\n  variants: {\n    size: {\n      none: 'tracking-[-0.04em]',\n      1: 'lg-desktop:text-[16px] text-[14px] leading-[120%]',\n      2: 'lg-desktop:text-[24px] text-[20px] leading-[120%]',\n      3: 'desktop:text-[32px] text-[24px] leading-[120%]',\n      4: 'desktop:text-[40px] lg-desktop:text-[48px] text-[32px] leading-[100%]',\n      5: 'desktop:text-[56px] lg-desktop:text-[64px] text-[40px] leading-[100%]',\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    colorVariant: {\n      primary: 'text-info-primary',\n      secondary: 'text-info-secondary',\n      tertiary: 'text-info-tertiary',\n      white: 'text-info-white',\n    },\n  },\n  defaultVariants: {\n    size: 'none',\n    weight: 'bold',\n    colorVariant: 'primary',\n  },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  asChild?: boolean\n  color?: string\n  html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n  const {\n    children,\n    className,\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    align,\n    weight,\n    colorVariant,\n    asChild,\n    as: Tag = 'h2',\n    color,\n    html,\n    ...headingProps\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  return (\n    <Slot\n      {...headingProps}\n      ref={forwardedRef}\n      className={cn(\n        headingVariants({\n          size,\n          weight,\n          align,\n          colorVariant,\n        }),\n        className\n      )}\n      {...htmlContentProps}\n      {...styleProps}\n    >\n      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n    </Slot>\n  )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
-  "mappings": "AAgG4B,cAAAA,MAAA,oBAhG5B,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAW,QAClB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkBH,EAAI,gDAAiD,CAC3E,SAAU,CACR,KAAM,CACJ,KAAM,qBACN,EAAG,oDACH,EAAG,oDACH,EAAG,iDACH,EAAG,wEACH,EAAG,uEACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,EACA,aAAc,CACZ,QAAS,oBACT,UAAW,sBACX,SAAU,qBACV,MAAO,iBACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,OACR,aAAc,SAChB,CACF,CAAC,EAWKI,EAAUH,EAAM,WAAyC,CAACI,EAAOC,IAAiB,CACtF,KAAM,CACJ,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,KACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIZ,EAEEa,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,KACJ,OACElB,EAACE,EAAA,CACE,GAAGkB,EACJ,IAAKX,EACL,UAAWR,EACTK,EAAgB,CACd,KAAAM,EACA,OAAAE,EACA,MAAAD,EACA,aAAAE,CACF,CAAC,EACDJ,CACF,EACC,GAAGU,EACH,GAAGC,EAEH,SAAAN,EAAUN,EAAWV,EAACiB,EAAA,CAAK,SAAAI,EAAmB,KAAOX,EAAS,EACjE,CAEJ,CAAC,EAEDH,EAAQ,YAAc",
-  "names": ["jsx", "cn", "Slot", "cva", "React", "convertLexicalToHTML", "headingVariants", "Heading", "props", "forwardedRef", "children", "className", "size", "align", "weight", "colorVariant", "asChild", "Tag", "color", "html", "headingProps", "htmlContentProps", "styleProps"]
+  "sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('text-balance leading-tight tracking-[-0.04em]', {\n  variants: {\n    size: {\n      none: 'tracking-[-0.04em]',\n      1: 'lg-desktop:text-[16px] text-[14px] leading-[120%]',\n      2: 'lg-desktop:text-[24px] text-[20px] leading-[120%]',\n      3: 'desktop:text-[32px] text-[24px] leading-[120%]',\n      4: 'desktop:text-[40px] lg-desktop:text-[48px] text-[32px] leading-[100%]',\n      5: 'desktop:text-[56px] lg-desktop:text-[64px] text-[40px] leading-[100%]',\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 HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  asChild?: boolean\n  color?: string\n  html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n  const {\n    children,\n    className,\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    align,\n    weight,\n    asChild,\n    as: Tag = 'h2',\n    color,\n    html,\n    ...headingProps\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  return (\n    <Slot\n      {...headingProps}\n      ref={forwardedRef}\n      className={cn(\n        headingVariants({\n          size,\n          weight,\n          align,\n        }),\n        className\n      )}\n      {...htmlContentProps}\n      {...styleProps}\n    >\n      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n    </Slot>\n  )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
+  "mappings": "AAuF4B,cAAAA,MAAA,oBAvF5B,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAW,QAClB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkBH,EAAI,gDAAiD,CAC3E,SAAU,CACR,KAAM,CACJ,KAAM,qBACN,EAAG,oDACH,EAAG,oDACH,EAAG,iDACH,EAAG,wEACH,EAAG,uEACL,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,EAWKI,EAAUH,EAAM,WAAyC,CAACI,EAAOC,IAAiB,CACtF,KAAM,CACJ,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,KACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOb,EAAqB,CAAE,KAAMa,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KACJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWR,EACTK,EAAgB,CACd,KAAAM,EACA,OAAAE,EACA,MAAAD,CACF,CAAC,EACDF,CACF,EACC,GAAGS,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EAEDH,EAAQ,YAAc",
+  "names": ["jsx", "cn", "Slot", "cva", "React", "convertLexicalToHTML", "headingVariants", "Heading", "props", "forwardedRef", "children", "className", "size", "align", "weight", "asChild", "Tag", "color", "html", "headingProps", "htmlContentProps", "styleProps"]
 }

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

@@ -41,35 +41,35 @@ type InputNumberProps = {
 } & VariantProps<typeof InputNumberVariants> & ComponentPropsWithout<'div', RemovedProps>;
 declare const InputNumber: React.ForwardRefExoticComponent<{
     /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
-    asChild?: boolean | undefined;
+    asChild?: boolean;
     /** 类名*/
-    className?: string | undefined;
+    className?: string;
     /** 输入框下方提示文本，会根据不同的 status 呈现不同的样式*/
-    tips?: string | undefined;
+    tips?: string;
     /** 文本框状态*/
-    status?: ColorType | undefined;
+    status?: ColorType;
     /** 数字输入框的值 */
-    value?: number | undefined;
+    value?: number;
     /** 数字输入框的初始值 */
-    defaultValue?: number | undefined;
+    defaultValue?: number;
     /** 数值改变步数 */
-    step?: number | undefined;
+    step?: number;
     /** 最小值 */
-    min?: number | undefined;
+    min?: number;
     /** 最大值 */
-    max?: number | undefined;
+    max?: number;
     /** 是否禁用*/
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /** 是否只读*/
-    readonly?: boolean | undefined;
+    readonly?: boolean;
     /** 样式*/
-    style?: React.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /** 值变化时触发*/
-    onChange?: ((value: number) => void) | undefined;
+    onChange?: (value: number) => void;
     /** 失去焦点时触发*/
-    onBlur?: ((value: number, e: FocusEvent) => void) | undefined;
+    onBlur?: (value: number, e: FocusEvent) => void;
     /** 按下回车键时触发*/
-    onEnter?: ((value: number, e: KeyboardEvent) => void) | undefined;
+    onEnter?: (value: number, e: KeyboardEvent) => void;
 } & VariantProps<(props?: ({
     status?: "default" | "error" | "success" | "warning" | null | undefined;
     disabled?: boolean | null | undefined;

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

@@ -24,19 +24,19 @@ type LinkProps = {
 } & VariantProps<typeof linkVariants> & ComponentPropsWithout<'a', RemovedProps>;
 declare const Link: React.ForwardRefExoticComponent<{
     /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
-    asChild?: boolean | undefined;
+    asChild?: boolean;
     /** 类名*/
-    className?: string | undefined;
+    className?: string;
     /** 禁用链接 */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /** 后置图标*/
     suffixIcon?: ReactNode;
     /** 跳转链接*/
-    href?: string | undefined;
+    href?: string;
     /** 样式*/
-    style?: React.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /** 点击事件，禁用状态无法触发*/
-    onClick?: Function | undefined;
+    onClick?: Function;
 } & VariantProps<(props?: ({
     size?: "base" | "lg" | null | undefined;
     variant?: "primary" | "secoundry" | null | undefined;

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\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": "aAsCQ,cAAAA,EAiCA,QAAAC,MAjCA,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,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/tabs.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import type { Align, Shape } from '../types/props.js';
 declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    align?: Align | undefined;
-    shape?: Shape | undefined;
+    align?: Align;
+    shape?: Shape;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/tabs.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as s from"react";import{cn as d}from"../helpers/index.js";import*as o from"@radix-ui/react-tabs";import{cva as c}from"class-variance-authority";const m=s.createContext({align:"left",shape:"square"}),b=s.forwardRef(({children:t,align:e="left",shape:a="square",...n},i)=>r(o.Root,{ref:i,...n,children:r(m.Provider,{value:{align:e,shape:a},children:t})}));b.displayName="Tabs";const P=c("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),C=c("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),g=s.forwardRef(({className:t,...e},a)=>{const{align:n,shape:i}=s.useContext(m);return r(o.List,{ref:a,className:d("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",P({align:n,shape:i}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});g.displayName=o.List.displayName;const u=s.forwardRef(({className:t,onClick:e,...a},n)=>{const{shape:i}=s.useContext(m),T=p=>{e?.(p);const l=p?.currentTarget,f=p?.currentTarget?.parentElement;if(l&&f){const y=l.offsetLeft,R=l.offsetWidth,v=f.offsetWidth,x=y-v/2+R/2;f.scrollTo({left:x,behavior:"smooth"})}};return r(o.Trigger,{ref:n,className:d("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",t,C({shape:i})),onClick:T,...a})});u.displayName=o.Trigger.displayName;const h=s.forwardRef(({className:t,...e},a)=>r(o.Content,{ref:a,className:d(t),...e}));h.displayName=o.Content.displayName;export{b as Tabs,h as TabsContent,g as TabsList,u as TabsTrigger};
+"use client";import{jsx as n}from"react/jsx-runtime";import*as o from"react";import{cn as d}from"../helpers/index.js";import*as s from"@radix-ui/react-tabs";import{cva as c}from"class-variance-authority";const m=o.createContext({align:"left",shape:"square"}),b=o.forwardRef(({children:t,align:e="left",shape:a="square",...i},r)=>n(s.Root,{ref:r,...i,children:n(m.Provider,{value:{align:e,shape:a},children:t})}));b.displayName="Tabs";const P=c("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),C=c("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),g=o.forwardRef(({className:t,...e},a)=>{const{align:i,shape:r}=o.useContext(m);return n(s.List,{ref:a,className:d("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",P({align:i,shape:r}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});g.displayName=s.List.displayName;const u=o.forwardRef(({className:t,onClick:e,...a},i)=>{const{shape:r}=o.useContext(m),T=p=>{e?.(p);const l=p?.currentTarget,f=p?.currentTarget?.parentElement;if(l&&f){const R=l.offsetLeft,y=l.offsetWidth,v=f.offsetWidth,x=R-v/2+y/2;f.scrollTo({left:x,behavior:"smooth"})}};return n(s.Trigger,{ref:i,className:d("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",t,C({shape:r})),onClick:T,...a})});u.displayName=s.Trigger.displayName;const h=o.forwardRef(({className:t,...e},a)=>n(s.Content,{ref:a,className:d(t),...e}));h.displayName=s.Content.displayName;export{b as Tabs,h as TabsContent,g as TabsList,u as TabsTrigger};
 //# sourceMappingURL=tabs.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tabs.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    const tabElement = e?.currentTarget\n    const container = (e?.currentTarget as any)?.parentElement\n    if (tabElement && container) {\n      const tabLeft = (tabElement as any).offsetLeft\n      const tabWidth = (tabElement as any).offsetWidth\n      const containerWidth = container.offsetWidth\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n    // e.currentTarget.scrollIntoView({\n    //   behavior: 'smooth',\n    //   inline: 'center',\n    //   block: 'nearest',\n    // })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
-  "mappings": "aAyBI,cAAAA,MAAA,oBAvBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,IAC3DX,EAACG,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,SAAAV,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBR,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKU,EAAWb,EAAM,WAGrB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKQ,EACL,UAAWT,EACT,4DACAU,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcX,EAAc,KAAK,YAE1C,MAAMe,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,QAAAI,EAAS,GAAGT,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOM,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC5De,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAaF,GAAG,eAAuB,cAC7C,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAWF,EAAmB,WAC9BG,EAAYH,EAAmB,YAC/BI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CAMF,EACA,OACE3B,EAACG,EAAc,QAAd,CACC,IAAKQ,EACL,UAAWT,EACT,8PACAa,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASG,EACR,GAAGV,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAcf,EAAc,QAAQ,YAEhD,MAAMyB,EAAc3B,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQX,EAACG,EAAc,QAAd,CAAsB,IAAKQ,EAAK,UAAWT,EAAGa,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GkB,EAAY,YAAczB,EAAc,QAAQ",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    const tabElement = e?.currentTarget\n    const container = e?.currentTarget?.parentElement\n    if (tabElement && container) {\n      const tabLeft = tabElement.offsetLeft\n      const tabWidth = tabElement.offsetWidth\n      const containerWidth = container.offsetWidth\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n    // e.currentTarget.scrollIntoView({\n    //   behavior: 'smooth',\n    //   inline: 'center',\n    //   block: 'nearest',\n    // })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
+  "mappings": "aAyBI,cAAAA,MAAA,oBAvBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,IAC3DX,EAACG,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,SAAAV,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBR,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKU,EAAWb,EAAM,WAGrB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKQ,EACL,UAAWT,EACT,4DACAU,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcX,EAAc,KAAK,YAE1C,MAAMe,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,QAAAI,EAAS,GAAGT,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOM,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC5De,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAYF,GAAG,eAAe,cACpC,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAUF,EAAW,WACrBG,EAAWH,EAAW,YACtBI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CAMF,EACA,OACE3B,EAACG,EAAc,QAAd,CACC,IAAKQ,EACL,UAAWT,EACT,8PACAa,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASG,EACR,GAAGV,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAcf,EAAc,QAAQ,YAEhD,MAAMyB,EAAc3B,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQX,EAACG,EAAc,QAAd,CAAsB,IAAKQ,EAAK,UAAWT,EAAGa,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GkB,EAAY,YAAczB,EAAc,QAAQ",
   "names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "TabListContext", "Tabs", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alignFromParent", "shapeFromParent", "TabsTrigger", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo", "TabsContent"]
 }

package/dist/esm/helpers/ScrollLoadVideo.js

@@ -1,2 +1,2 @@
-import{jsx as l,jsxs as j}from"react/jsx-runtime";import{useEffect as m,useState as g,useRef as v,useCallback as V}from"react";import{cn as n}from"../helpers/utils.js";import{debounce as M}from"es-toolkit";const c=new Set,T=({src:r,poster:u,alt:E="Scroll Loaded Video",className:h="",videoWrapperClassName:y="",videoClassName:p="",autoplay:N=!1,muted:z=!0,loop:S=!0,controls:k=!1,playsInline:I=!0,videoRef:a=null,...U})=>{const[s,L]=g(!1),[t,d]=g(!1),b=v(null),f=v(null),o=v("");m(()=>{c.has(r)&&(L(!0),d(!0),o.current=r)},[r]),m(()=>{if(t&&s){const e=a?.current||f.current;e&&(e.muted=!0,e.play().catch(i=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",i)}))}},[t,s,a]);const w=V(()=>{const e=r;if(!e||o.current===e&&t)return;if(c.has(e)){d(!0),o.current=e;return}o.current=e;const i=document.createElement("video");i.preload="metadata",i.onloadedmetadata=()=>{d(!0),c.add(e)},i.src=e},[t,r]);m(()=>{if(!b.current||t)return;const e=M(()=>{if(window.scrollY>10)return L(!0),w(),window.removeEventListener("scroll",e)},100);return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[w,t]);const H=V(()=>{d(!0),o.current&&c.add(o.current);const e=a?.current||f.current;e&&(e.muted=!0,e.play())},[]);return j("div",{ref:b,className:n("relative size-full",h),children:[u&&l("div",{className:n("absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out",y,{"opacity-100":!t,"overflow-visible opacity-0":t}),children:l("img",{src:u,alt:E,style:{width:"100%",height:"100%",objectFit:"cover"},className:n(p),loading:"lazy"})}),l("div",{className:n("size-full transition-opacity duration-500 ease-in-out",{"opacity-100":t,"opacity-0":!t}),style:{visibility:s?"visible":"hidden"},children:s&&l("div",{className:n("relative size-full",y),children:l("video",{ref:a||f,src:o.current||r,poster:u,className:n("size-full object-cover",p),onLoadedMetadata:H,autoPlay:N,muted:z,loop:S,controls:k,playsInline:I,...U},o.current)})})]})};var R=T;export{R as default};
+import{jsx as l,jsxs as j}from"react/jsx-runtime";import{useEffect as m,useState as g,useRef as v,useCallback as V}from"react";import{cn as n}from"../helpers/utils.js";import{debounce as M}from"es-toolkit";const c=new Set,T=({src:r,poster:u,alt:E="Scroll Loaded Video",className:h="",videoWrapperClassName:p="",videoClassName:y="",autoplay:N=!1,muted:S=!0,loop:k=!0,controls:z=!1,playsInline:I=!0,videoRef:a=null,...U})=>{const[s,L]=g(!1),[t,d]=g(!1),b=v(null),f=v(null),o=v("");m(()=>{c.has(r)&&(L(!0),d(!0),o.current=r)},[r]),m(()=>{if(t&&s){const e=a?.current||f.current;e&&(e.muted=!0,e.play().catch(i=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",i)}))}},[t,s,a]);const w=V(()=>{const e=r;if(!e||o.current===e&&t)return;if(c.has(e)){d(!0),o.current=e;return}o.current=e;const i=document.createElement("video");i.preload="metadata",i.onloadedmetadata=()=>{d(!0),c.add(e)},i.src=e},[t,r]);m(()=>{if(!b.current||t)return;const e=M(()=>{if(window.scrollY>10)return L(!0),w(),window.removeEventListener("scroll",e)},100);return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[w,t]);const H=V(()=>{d(!0),o.current&&c.add(o.current);const e=a?.current||f.current;e&&(e.muted=!0,e.play())},[]);return j("div",{ref:b,className:n("relative size-full",h),children:[u&&l("div",{className:n("absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out",p,{"opacity-100":!t,"overflow-visible opacity-0":t}),children:l("img",{src:u,alt:E,style:{width:"100%",height:"100%",objectFit:"cover"},className:n(y)})}),l("div",{className:n("size-full transition-opacity duration-500 ease-in-out",{"opacity-100":t,"opacity-0":!t}),style:{visibility:s?"visible":"hidden"},children:s&&l("div",{className:n("relative size-full",p),children:l("video",{ref:a||f,src:o.current||r,poster:u,className:n("size-full object-cover",y),onLoadedMetadata:H,autoPlay:N,muted:S,loop:k,controls:z,playsInline:I,...U},o.current)})})]})};var R=T;export{R as default};
 //# sourceMappingURL=ScrollLoadVideo.js.map

package/dist/esm/helpers/ScrollLoadVideo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/ScrollLoadVideo.tsx"],
-  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'es-toolkit'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u5185\u90E8\u89C6\u9891\u5F15\u7528\uFF0C\u5982\u679C\u5916\u90E8\u6CA1\u6709\u4F20\u5165 videoRef\n  const internalVideoRef = useRef<HTMLVideoElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u5F53\u89C6\u9891\u5DF2\u52A0\u8F7D\u4E14\u5DF2\u5F00\u59CB\u52A0\u8F7D\u65F6\uFF0C\u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n  useEffect(() => {\n    if (isVideoLoaded && isVideoStartLoad) {\n      const videoElement = videoRef?.current || internalVideoRef.current\n      if (videoElement) {\n        // \u786E\u4FDD\u9759\u97F3\u4EE5\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\n        videoElement.muted = true\n        // \u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n        videoElement.play().catch((error: unknown) => {\n          console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n        })\n      }\n    }\n  }, [isVideoLoaded, isVideoStartLoad, videoRef])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    // @ts-ignore\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n    const videoElement = videoRef?.current || internalVideoRef.current\n    if (videoElement) {\n      videoElement.muted = true\n      videoElement.play()\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n            loading=\"lazy\"\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef || internalVideoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'es-toolkit'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u5185\u90E8\u89C6\u9891\u5F15\u7528\uFF0C\u5982\u679C\u5916\u90E8\u6CA1\u6709\u4F20\u5165 videoRef\n  const internalVideoRef = useRef<HTMLVideoElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u5F53\u89C6\u9891\u5DF2\u52A0\u8F7D\u4E14\u5DF2\u5F00\u59CB\u52A0\u8F7D\u65F6\uFF0C\u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n  useEffect(() => {\n    if (isVideoLoaded && isVideoStartLoad) {\n      const videoElement = videoRef?.current || internalVideoRef.current\n      if (videoElement) {\n        // \u786E\u4FDD\u9759\u97F3\u4EE5\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\n        videoElement.muted = true\n        // \u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n        videoElement.play().catch((error: unknown) => {\n          console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n        })\n      }\n    }\n  }, [isVideoLoaded, isVideoStartLoad, videoRef])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n    const videoElement = videoRef?.current || internalVideoRef.current\n    if (videoElement) {\n      videoElement.muted = true\n      videoElement.play()\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef || internalVideoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useEffect", "useState", "useRef", "useCallback", "cn", "debounce", "globalLoadedVideoUrls", "ScrollLoadVideo", "src", "poster", "alt", "className", "videoWrapperClassName", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "isVideoStartLoad", "setIsVideoStartLoad", "isVideoLoaded", "setIsVideoLoaded", "ref", "internalVideoRef", "currentVideoUrl", "videoElement", "error", "preloadVideo", "videoUrl", "scrollHandler", "handleVideoLoad", "ScrollLoadVideo_default"]
 }

package/dist/esm/shared/Styles.d.ts

@@ -8,8 +8,8 @@ export interface ContainerProps {
     };
 }
 export interface StylesProps {
-    /** 自定义样式字符串 */
-    style?: string;
+    /** 自定义样式字符串或对象 */
+    style?: string | React.CSSProperties;
     /** 唯一标识符 */
     uid?: string;
     /** 是否禁用 */
@@ -34,6 +34,6 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
  * @param defaultLayoutProps - 默认样式属性
  */
 export declare function withLayout<P extends object>(WrappedComponent: React.ComponentType<P>, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<P, keyof StylesProps> & Partial<StylesProps & ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 }> & React.RefAttributes<any>>;

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 I,jsx as o,jsxs as B}from"react/jsx-runtime";import f,{useMemo as d}from"react";import{simpleHash as C}from"./simpleHash.js";import $ from"./getKeyPropsString.js";import{Grid as R,GridItem as N}from"../components/gird.js";import{Container as k}from"../components/container.js";import w from"./ErrorBoundary.js";const h={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"},x={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"},m=t=>{const n=$(t);return`style_${C(n)}`},T=t=>{const{style:n,uid:s,disabled:r}=t;return{style:n,uid:s,disabled:r}},G=({style:t,uid:n=m({}),disabled:s=!1})=>!t||s?null:o("style",{suppressHydrationWarning:!0,"data-style-id":n,children:`.block-${n} { ${t} }`}),K=(t,n)=>{const s=d(()=>t?.uid||m({...t,data:n}),[n,t]),r=d(()=>o(G,{...t,uid:s}),[t,s]);return{className:`block-${s} `,StyleComponent:r,uid:s}},j=t=>{const{desktopSpan:n,mobileSpan:s}=t?.container||{},r=s?h[s]:"",a=n?x[n]:"";return`${r} ${a}`.trim()};function D(t,n){const s=f.forwardRef((r,a)=>{const l=T(r),y=e=>e?typeof e=="string"?e:Object.entries(e).map(([g,P])=>`${g.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${P}`).join("; ")+";":"",c=[n?.style,l?.style].map(y).filter(e=>!!e).map(e=>e.trim().endsWith(";")?e:`${e};`).join(" "),u={...n,...l,...c&&{style:c}},{className:i,StyleComponent:p}=K(u,r?.data),S=e=>o(k,{className:`${i} ${e?.className}`,children:o(R,{className:"container_grid",children:o(N,{className:j(e),children:o(t,{...e,ref:a})})})}),b=e=>o(t,{...e,className:`${i} ${e?.className}`,ref:a});return o(I,{children:B(w,{children:[p,Reflect.ownKeys(r?.container||{})?.length>0?S(r):b(r)]})})});return s.displayName=t.displayName||t.name||"Component",s}export{T as getStylesProps,K as useStyles,D 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"],
-  "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"]
+  "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\u6216\u5BF9\u8C61 */\n  style?: string | React.CSSProperties\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 propsStyleProps = getStylesProps(props)\n\n    // \u5C06 style \u5BF9\u8C61\u8F6C\u6362\u4E3A\u5B57\u7B26\u4E32\n    const styleToString = (style: string | React.CSSProperties | undefined): string => {\n      if (!style) return ''\n      if (typeof style === 'string') return style\n      return (\n        Object.entries(style)\n          .map(([key, value]) => {\n            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()\n            return `${cssKey}: ${value}`\n          })\n          .join('; ') + ';'\n      )\n    }\n\n    // \u5408\u5E76 style \u5B57\u6BB5\uFF0C\u907F\u514D\u8986\u76D6\uFF0C\u786E\u4FDD\u6BCF\u4E2A\u6837\u5F0F\u90FD\u4EE5\u5206\u53F7\u7ED3\u5C3E\n    const mergedStyle = [defaultLayoutProps?.style, propsStyleProps?.style]\n      .map(styleToString)\n      .filter((style): style is string => Boolean(style))\n      .map(style => (style.trim().endsWith(';') ? style : `${style};`))\n      .join(' ')\n\n    const finalStyleProps = {\n      ...defaultLayoutProps,\n      ...propsStyleProps,\n      ...(mergedStyle && { style: mergedStyle }),\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,OA8FH,YAAAA,EA9FG,OAAAC,EA+FD,QAAAC,MA/FC,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,EAAkBlB,EAAeF,CAAK,EAGtCqB,EAAiBlB,GAChBA,EACD,OAAOA,GAAU,SAAiBA,EAEpC,OAAO,QAAQA,CAAK,EACjB,IAAI,CAAC,CAACmB,EAAKC,CAAK,IAER,GADQD,EAAI,QAAQ,WAAY,KAAK,EAAE,YAAY,CAC1C,KAAKC,CAAK,EAC3B,EACA,KAAK,IAAI,EAAI,IARC,GAafC,EAAc,CAACN,GAAoB,MAAOE,GAAiB,KAAK,EACnE,IAAIC,CAAa,EACjB,OAAQlB,GAA2B,EAAQA,CAAM,EACjD,IAAIA,GAAUA,EAAM,KAAK,EAAE,SAAS,GAAG,EAAIA,EAAQ,GAAGA,CAAK,GAAI,EAC/D,KAAK,GAAG,EAELsB,EAAkB,CACtB,GAAGP,EACH,GAAGE,EACH,GAAII,GAAe,CAAE,MAAOA,CAAY,CAC1C,EAEM,CAAE,UAAAE,EAAW,eAAAhB,CAAe,EAAIH,EAAUkB,EAAkBzB,GAAe,IAAI,EAE/E2B,EAAwB3B,GAE1Bb,EAACQ,EAAA,CAAU,UAAW,GAAG+B,CAAS,IAAK1B,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,EAIES,EAA2B5B,GAE7Bb,EAAC8B,EAAA,CACE,GAAIjB,EACL,UAAW,GAAG0B,CAAS,IAAK1B,GAAe,SAAS,GACpD,IAAKmB,EACP,EAIJ,OACEhC,EAAAD,EAAA,CACE,SAAAE,EAACQ,EAAA,CACE,UAAAc,EACA,QAAQ,QAASV,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxD2B,EAAqB3B,CAAK,EAC1B4B,EAAwB5B,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", "propsStyleProps", "styleToString", "key", "value", "mergedStyle", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
 }

package/dist/esm/stories/InlineVideo.stories.d.ts

@@ -1,5 +1,31 @@
 import type { StoryObj } from '@storybook/react';
-declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
+import InlineVideo from '../biz-components/InlineVideo/index.js';
+declare const meta: {
+    title: string;
+    component: typeof InlineVideo;
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        data: {
+            description: string;
+            control: "object";
+        };
+        className: {
+            description: string;
+            control: "text";
+        };
+    };
+};
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/dist/esm/stories/MarqueeReview.stories.d.ts

@@ -14,7 +14,36 @@ import type { StoryObj } from '@storybook/react';
  * - 用户证言
  * - 客户反馈墙
  */
-declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("../biz-components/index.js").MarqueeReviewProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    } & import("react").RefAttributes<any>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        data: {
+            description: string;
+            control: {
+                type: "object";
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: "text";
+            };
+        };
+    };
+};
 export default meta;
 type Story = StoryObj<typeof meta>;
 /**