@anker-in/headless-ui 1.1.33 → 1.1.34-alpha.1768461697532

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Progress Bar Variants
+ */
+declare const progressVariants: (props?: ({
+    variant?: "default" | "withHandle" | null | undefined;
+    size?: "base" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ProgressClassNames {
+    /** 根容器的样式类名 */
+    root?: string;
+    /** 进度条的样式类名 */
+    progressBar?: string;
+    /** 拖拽手柄的样式类名 */
+    handle?: string;
+}
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'>, VariantProps<typeof progressVariants> {
+    /** 当前进度值 */
+    value: number;
+    /** 最大值，默认为 100 */
+    max?: number;
+    /** 最小值，默认为 0 */
+    min?: number;
+    /** 进度条的 aria-label，用于屏幕阅读器 */
+    'aria-label'?: string;
+    /** 进度条的 aria-labelledby，关联到标签元素的ID */
+    'aria-labelledby'?: string;
+    /** 进度条描述，用于屏幕阅读器 */
+    'aria-describedby'?: string;
+    /** 值改变时的回调函数（仅在withHandle变体时有效） */
+    onValueChange?: (value: number) => void;
+    /** 是否禁用交互（仅在withHandle变体时有效） */
+    disabled?: boolean;
+    /** 拖拽步长，默认为1 */
+    step?: number;
+    /** 自定义样式类名，用于覆盖不同部分的默认样式 */
+    classNames?: ProgressClassNames;
+}
+/**
+ * Progress - 进度条
+ *
+ * @description 用于显示任务完成进度的可视化组件，支持多种尺寸、颜色变体和无障碍访问
+ */
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export default Progress;

package/dist/esm/components/progress.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as z,jsxs as U}from"react/jsx-runtime";import*as a from"react";import{cva as w}from"class-variance-authority";import{cn as E}from"../helpers/index.js";const $=w("rounded-box relative w-full ",{variants:{variant:{default:"bg-container-secondary-0 overflow-hidden",withHandle:"bg-container-secondary-0"},size:{base:"h-2",lg:"h-3"}},defaultVariants:{variant:"default",size:"base"}}),A=w("rounded-box h-full ",{variants:{variant:{default:"bg-info-primary ",withHandle:"bg-info-primary "}},defaultVariants:{variant:"default"}}),S=w("border-info-white bg-info-primary size-4 rounded-full border shadow-sm",{variants:{size:{base:"size-4",lg:"tablet:size-5 size-4"}},defaultVariants:{size:"base"}}),L=a.forwardRef(({value:x,max:r=100,min:t=0,variant:g,size:D,className:N,classNames:m,onValueChange:o,disabled:l=!1,step:p=1,"aria-label":T,"aria-labelledby":X,"aria-describedby":k,...B},u)=>{const d=a.useRef(null),[f,R]=a.useState(!1),c=a.useRef(null),P=Math.max(t,Math.min(r,x)),v=(P-t)/(r-t)*100,V=g==="withHandle",s=V&&!l&&o,b=a.useCallback(e=>{if(!c.current||!o)return;const n=c.current,i=e-n.left,h=Math.max(0,Math.min(1,i/n.width)),M=t+h*(r-t),y=Math.max(t,Math.min(r,M));o(y)},[t,r,o]),H=a.useCallback(e=>{if(!c.current||!o)return;const n=c.current,i=e-n.left,h=Math.max(0,Math.min(1,i/n.width)),M=t+h*(r-t),y=Math.round(M/p)*p,O=Math.max(t,Math.min(r,y));o(O),c.current=null},[t,r,p,o]),C=a.useCallback(e=>{!s||!d.current||(e.preventDefault(),c.current=d.current.getBoundingClientRect(),R(!0),b(e.clientX))},[s,b]);a.useEffect(()=>{if(!f||!s)return;const e=i=>{b(i.clientX)},n=i=>{H(i.clientX),R(!1)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n)}},[f,s,b,H]);const I=a.useCallback(e=>{d&&(d.current=e),u&&(typeof u=="function"?u(e):u.current=e)},[u]);return U("div",{ref:I,role:s?"slider":"progressbar","aria-valuenow":P,"aria-valuemin":t,"aria-valuemax":r,"aria-label":T,"aria-labelledby":X,"aria-describedby":k,"aria-disabled":l,className:E($({variant:g,size:D}),l&&"cursor-not-allowed opacity-50",s&&!l&&"cursor-pointer",N,m?.root),onMouseDown:s?C:void 0,...B,children:[z("div",{className:E(A({variant:g}),m?.progressBar),style:{width:`${Math.max(0,Math.min(100,v))}%`},"data-testid":"progress-bar"}),V&&v>0&&z("div",{className:E(S({size:D}),l&&"opacity-50",f&&"scale-110 shadow-lg",s&&!l&&"cursor-grab hover:scale-105 active:cursor-grabbing",m?.handle),"data-testid":"progress-handle",style:{position:"absolute",left:`${Math.max(0,Math.min(100,v))}%`,top:"50%",transform:"translate(-50%, -50%)",transition:f?"none":"all 0.2s ease-in-out"}})]})});L.displayName="Progress";var F=L;export{F as default};
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/progress.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Progress Bar Variants\n */\nconst progressVariants = cva('rounded-box relative w-full ', {\n  variants: {\n    variant: {\n      default: 'bg-container-secondary-0 overflow-hidden',\n      withHandle: 'bg-container-secondary-0',\n    },\n    size: {\n      base: 'h-2',\n      lg: 'h-3',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'base',\n  },\n})\n\nconst progressBarVariants = cva('rounded-box h-full ', {\n  variants: {\n    variant: {\n      default: 'bg-info-primary ',\n      withHandle: 'bg-info-primary ',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nconst handleVariants = cva('border-info-white bg-info-primary size-4 rounded-full border shadow-sm', {\n  variants: {\n    size: {\n      base: 'size-4',\n      lg: 'tablet:size-5 size-4',\n    },\n  },\n  defaultVariants: {\n    size: 'base',\n  },\n})\n\nexport interface ProgressClassNames {\n  /** \u6839\u5BB9\u5668\u7684\u6837\u5F0F\u7C7B\u540D */\n  root?: string\n  /** \u8FDB\u5EA6\u6761\u7684\u6837\u5F0F\u7C7B\u540D */\n  progressBar?: string\n  /** \u62D6\u62FD\u624B\u67C4\u7684\u6837\u5F0F\u7C7B\u540D */\n  handle?: string\n}\n\nexport interface ProgressProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'>, VariantProps<typeof progressVariants> {\n  /** \u5F53\u524D\u8FDB\u5EA6\u503C */\n  value: number\n  /** \u6700\u5927\u503C\uFF0C\u9ED8\u8BA4\u4E3A 100 */\n  max?: number\n  /** \u6700\u5C0F\u503C\uFF0C\u9ED8\u8BA4\u4E3A 0 */\n  min?: number\n  /** \u8FDB\u5EA6\u6761\u7684 aria-label\uFF0C\u7528\u4E8E\u5C4F\u5E55\u9605\u8BFB\u5668 */\n  'aria-label'?: string\n  /** \u8FDB\u5EA6\u6761\u7684 aria-labelledby\uFF0C\u5173\u8054\u5230\u6807\u7B7E\u5143\u7D20\u7684ID */\n  'aria-labelledby'?: string\n  /** \u8FDB\u5EA6\u6761\u63CF\u8FF0\uFF0C\u7528\u4E8E\u5C4F\u5E55\u9605\u8BFB\u5668 */\n  'aria-describedby'?: string\n  /** \u503C\u6539\u53D8\u65F6\u7684\u56DE\u8C03\u51FD\u6570\uFF08\u4EC5\u5728withHandle\u53D8\u4F53\u65F6\u6709\u6548\uFF09 */\n  onValueChange?: (value: number) => void\n  /** \u662F\u5426\u7981\u7528\u4EA4\u4E92\uFF08\u4EC5\u5728withHandle\u53D8\u4F53\u65F6\u6709\u6548\uFF09 */\n  disabled?: boolean\n  /** \u62D6\u62FD\u6B65\u957F\uFF0C\u9ED8\u8BA4\u4E3A1 */\n  step?: number\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\uFF0C\u7528\u4E8E\u8986\u76D6\u4E0D\u540C\u90E8\u5206\u7684\u9ED8\u8BA4\u6837\u5F0F */\n  classNames?: ProgressClassNames\n}\n\n/**\n * Progress - \u8FDB\u5EA6\u6761\n *\n * @description \u7528\u4E8E\u663E\u793A\u4EFB\u52A1\u5B8C\u6210\u8FDB\u5EA6\u7684\u53EF\u89C6\u5316\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u5C3A\u5BF8\u3001\u989C\u8272\u53D8\u4F53\u548C\u65E0\u969C\u788D\u8BBF\u95EE\n */\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  (\n    {\n      value,\n      max = 100,\n      min = 0,\n      variant,\n      size,\n      className,\n      classNames,\n      onValueChange,\n      disabled = false,\n      step = 1,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    },\n    ref\n  ) => {\n    const progressRef = React.useRef<HTMLDivElement>(null)\n    const [isDragging, setIsDragging] = React.useState(false)\n    const dragRectRef = React.useRef<DOMRect | null>(null)\n\n    // \u786E\u4FDD value \u5728\u6709\u6548\u8303\u56F4\u5185\n    const normalizedValue = Math.max(min, Math.min(max, value))\n    // \u8BA1\u7B97\u767E\u5206\u6BD4\n    const percentage = ((normalizedValue - min) / (max - min)) * 100\n    // \u662F\u5426\u663E\u793Ahandle\n    const isWithHandle = variant === 'withHandle'\n    // \u662F\u5426\u53EF\u4EA4\u4E92\n    const isInteractive = isWithHandle && !disabled && onValueChange\n\n    // \u62D6\u62FD\u65F6\u4F7F\u7528\u7F13\u5B58\u7684 rect \u907F\u514D\u91CD\u590D\u8BA1\u7B97\n    const handleDragMove = React.useCallback(\n      (clientX: number) => {\n        if (!dragRectRef.current || !onValueChange) return\n\n        const rect = dragRectRef.current\n        const offsetX = clientX - rect.left\n        const percentage = Math.max(0, Math.min(1, offsetX / rect.width))\n        const rawValue = min + percentage * (max - min)\n        const clampedValue = Math.max(min, Math.min(max, rawValue))\n\n        onValueChange(clampedValue)\n      },\n      [min, max, onValueChange]\n    )\n\n    // \u62D6\u62FD\u7ED3\u675F\u65F6\u5E94\u7528\u6B65\u957F\n    const handleDragEnd = React.useCallback(\n      (clientX: number) => {\n        if (!dragRectRef.current || !onValueChange) return\n\n        const rect = dragRectRef.current\n        const offsetX = clientX - rect.left\n        const percentage = Math.max(0, Math.min(1, offsetX / rect.width))\n        const rawValue = min + percentage * (max - min)\n        const steppedValue = Math.round(rawValue / step) * step\n        const clampedValue = Math.max(min, Math.min(max, steppedValue))\n\n        onValueChange(clampedValue)\n        dragRectRef.current = null // \u6E05\u7406\u7F13\u5B58\n      },\n      [min, max, step, onValueChange]\n    )\n\n    // \u9F20\u6807\u6309\u4E0B\u4E8B\u4EF6\n    const handleMouseDown = React.useCallback(\n      (event: React.MouseEvent) => {\n        if (!isInteractive || !progressRef.current) return\n\n        event.preventDefault()\n        // \u53EA\u5728\u5F00\u59CB\u62D6\u62FD\u65F6\u83B7\u53D6\u4E00\u6B21 rect\uFF0C\u907F\u514D\u62D6\u62FD\u8FC7\u7A0B\u4E2D\u91CD\u590D\u8BA1\u7B97\n        dragRectRef.current = progressRef.current.getBoundingClientRect()\n        setIsDragging(true)\n        handleDragMove(event.clientX)\n      },\n      [isInteractive, handleDragMove]\n    )\n\n    // \u5168\u5C40\u9F20\u6807\u79FB\u52A8\u4E8B\u4EF6\n    React.useEffect(() => {\n      if (!isDragging || !isInteractive) return\n\n      const handleMouseMove = (event: MouseEvent) => {\n        handleDragMove(event.clientX)\n      }\n\n      const handleMouseUp = (event: MouseEvent) => {\n        handleDragEnd(event.clientX)\n        setIsDragging(false)\n      }\n\n      document.addEventListener('mousemove', handleMouseMove)\n      document.addEventListener('mouseup', handleMouseUp)\n\n      return () => {\n        document.removeEventListener('mousemove', handleMouseMove)\n        document.removeEventListener('mouseup', handleMouseUp)\n      }\n    }, [isDragging, isInteractive, handleDragMove, handleDragEnd])\n\n    // \u5408\u5E76refs\n    const combinedRef = React.useCallback(\n      (node: HTMLDivElement) => {\n        if (progressRef) {\n          // @ts-ignore\n          progressRef.current = node\n        }\n        if (ref) {\n          if (typeof ref === 'function') {\n            ref(node)\n          } else {\n            ref.current = node\n          }\n        }\n      },\n      [ref]\n    )\n\n    return (\n      <div\n        ref={combinedRef}\n        role={isInteractive ? 'slider' : 'progressbar'}\n        aria-valuenow={normalizedValue}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled}\n        className={cn(\n          progressVariants({ variant, size }),\n          disabled && 'cursor-not-allowed opacity-50',\n          isInteractive && !disabled && 'cursor-pointer',\n          className,\n          classNames?.root\n        )}\n        onMouseDown={isInteractive ? handleMouseDown : undefined}\n        {...props}\n      >\n        <div\n          className={cn(progressBarVariants({ variant }), classNames?.progressBar)}\n          style={{\n            width: `${Math.max(0, Math.min(100, percentage))}%`,\n          }}\n          data-testid=\"progress-bar\"\n        />\n        {isWithHandle && percentage > 0 && (\n          <div\n            className={cn(\n              handleVariants({ size }),\n              disabled && 'opacity-50',\n              isDragging && 'scale-110 shadow-lg',\n              isInteractive && !disabled && 'cursor-grab hover:scale-105 active:cursor-grabbing',\n              classNames?.handle\n            )}\n            data-testid=\"progress-handle\"\n            style={{\n              position: 'absolute',\n              left: `${Math.max(0, Math.min(100, percentage))}%`,\n              top: '50%',\n              transform: 'translate(-50%, -50%)',\n              transition: isDragging ? 'none' : 'all 0.2s ease-in-out',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nProgress.displayName = 'Progress'\n\nexport default Progress\n"],
+  "mappings": "aAkNM,OAoBE,OAAAA,EApBF,QAAAC,MAAA,oBAhNN,UAAYC,MAAW,QACvB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,MAAAC,MAAU,sBAKnB,MAAMC,EAAmBF,EAAI,+BAAgC,CAC3D,SAAU,CACR,QAAS,CACP,QAAS,2CACT,WAAY,0BACd,EACA,KAAM,CACJ,KAAM,MACN,GAAI,KACN,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,MACR,CACF,CAAC,EAEKG,EAAsBH,EAAI,sBAAuB,CACrD,SAAU,CACR,QAAS,CACP,QAAS,mBACT,WAAY,kBACd,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CAAC,EAEKI,EAAiBJ,EAAI,yEAA0E,CACnG,SAAU,CACR,KAAM,CACJ,KAAM,SACN,GAAI,sBACN,CACF,EACA,gBAAiB,CACf,KAAM,MACR,CACF,CAAC,EAwCKK,EAAWN,EAAM,WACrB,CACE,CACE,MAAAO,EACA,IAAAC,EAAM,IACN,IAAAC,EAAM,EACN,QAAAC,EACA,KAAAC,EACA,UAAAC,EACA,WAAAC,EACA,cAAAC,EACA,SAAAC,EAAW,GACX,KAAAC,EAAO,EACP,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EACpB,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAActB,EAAM,OAAuB,IAAI,EAC/C,CAACuB,EAAYC,CAAa,EAAIxB,EAAM,SAAS,EAAK,EAClDyB,EAAczB,EAAM,OAAuB,IAAI,EAG/C0B,EAAkB,KAAK,IAAIjB,EAAK,KAAK,IAAID,EAAKD,CAAK,CAAC,EAEpDoB,GAAeD,EAAkBjB,IAAQD,EAAMC,GAAQ,IAEvDmB,EAAelB,IAAY,aAE3BmB,EAAgBD,GAAgB,CAACb,GAAYD,EAG7CgB,EAAiB9B,EAAM,YAC1B+B,GAAoB,CACnB,GAAI,CAACN,EAAY,SAAW,CAACX,EAAe,OAE5C,MAAMkB,EAAOP,EAAY,QACnBQ,EAAUF,EAAUC,EAAK,KACzBL,EAAa,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGM,EAAUD,EAAK,KAAK,CAAC,EAC1DE,EAAWzB,EAAMkB,GAAcnB,EAAMC,GACrC0B,EAAe,KAAK,IAAI1B,EAAK,KAAK,IAAID,EAAK0B,CAAQ,CAAC,EAE1DpB,EAAcqB,CAAY,CAC5B,EACA,CAAC1B,EAAKD,EAAKM,CAAa,CAC1B,EAGMsB,EAAgBpC,EAAM,YACzB+B,GAAoB,CACnB,GAAI,CAACN,EAAY,SAAW,CAACX,EAAe,OAE5C,MAAMkB,EAAOP,EAAY,QACnBQ,EAAUF,EAAUC,EAAK,KACzBL,EAAa,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGM,EAAUD,EAAK,KAAK,CAAC,EAC1DE,EAAWzB,EAAMkB,GAAcnB,EAAMC,GACrC4B,EAAe,KAAK,MAAMH,EAAWlB,CAAI,EAAIA,EAC7CmB,EAAe,KAAK,IAAI1B,EAAK,KAAK,IAAID,EAAK6B,CAAY,CAAC,EAE9DvB,EAAcqB,CAAY,EAC1BV,EAAY,QAAU,IACxB,EACA,CAAChB,EAAKD,EAAKQ,EAAMF,CAAa,CAChC,EAGMwB,EAAkBtC,EAAM,YAC3BuC,GAA4B,CACvB,CAACV,GAAiB,CAACP,EAAY,UAEnCiB,EAAM,eAAe,EAErBd,EAAY,QAAUH,EAAY,QAAQ,sBAAsB,EAChEE,EAAc,EAAI,EAClBM,EAAeS,EAAM,OAAO,EAC9B,EACA,CAACV,EAAeC,CAAc,CAChC,EAGA9B,EAAM,UAAU,IAAM,CACpB,GAAI,CAACuB,GAAc,CAACM,EAAe,OAEnC,MAAMW,EAAmBD,GAAsB,CAC7CT,EAAeS,EAAM,OAAO,CAC9B,EAEME,EAAiBF,GAAsB,CAC3CH,EAAcG,EAAM,OAAO,EAC3Bf,EAAc,EAAK,CACrB,EAEA,gBAAS,iBAAiB,YAAagB,CAAe,EACtD,SAAS,iBAAiB,UAAWC,CAAa,EAE3C,IAAM,CACX,SAAS,oBAAoB,YAAaD,CAAe,EACzD,SAAS,oBAAoB,UAAWC,CAAa,CACvD,CACF,EAAG,CAAClB,EAAYM,EAAeC,EAAgBM,CAAa,CAAC,EAG7D,MAAMM,EAAc1C,EAAM,YACvB2C,GAAyB,CACpBrB,IAEFA,EAAY,QAAUqB,GAEpBtB,IACE,OAAOA,GAAQ,WACjBA,EAAIsB,CAAI,EAERtB,EAAI,QAAUsB,EAGpB,EACA,CAACtB,CAAG,CACN,EAEA,OACEtB,EAAC,OACC,IAAK2C,EACL,KAAMb,EAAgB,SAAW,cACjC,gBAAeH,EACf,gBAAejB,EACf,gBAAeD,EACf,aAAYS,EACZ,kBAAiBC,EACjB,mBAAkBC,EAClB,gBAAeJ,EACf,UAAWb,EACTC,EAAiB,CAAE,QAAAO,EAAS,KAAAC,CAAK,CAAC,EAClCI,GAAY,gCACZc,GAAiB,CAACd,GAAY,iBAC9BH,EACAC,GAAY,IACd,EACA,YAAagB,EAAgBS,EAAkB,OAC9C,GAAGlB,EAEJ,UAAAtB,EAAC,OACC,UAAWI,EAAGE,EAAoB,CAAE,QAAAM,CAAQ,CAAC,EAAGG,GAAY,WAAW,EACvE,MAAO,CACL,MAAO,GAAG,KAAK,IAAI,EAAG,KAAK,IAAI,IAAKc,CAAU,CAAC,CAAC,GAClD,EACA,cAAY,eACd,EACCC,GAAgBD,EAAa,GAC5B7B,EAAC,OACC,UAAWI,EACTG,EAAe,CAAE,KAAAM,CAAK,CAAC,EACvBI,GAAY,aACZQ,GAAc,sBACdM,GAAiB,CAACd,GAAY,qDAC9BF,GAAY,MACd,EACA,cAAY,kBACZ,MAAO,CACL,SAAU,WACV,KAAM,GAAG,KAAK,IAAI,EAAG,KAAK,IAAI,IAAKc,CAAU,CAAC,CAAC,IAC/C,IAAK,MACL,UAAW,wBACX,WAAYJ,EAAa,OAAS,sBACpC,EACF,GAEJ,CAEJ,CACF,EAEAjB,EAAS,YAAc,WAEvB,IAAOsC,EAAQtC",
+  "names": ["jsx", "jsxs", "React", "cva", "cn", "progressVariants", "progressBarVariants", "handleVariants", "Progress", "value", "max", "min", "variant", "size", "className", "classNames", "onValueChange", "disabled", "step", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "props", "ref", "progressRef", "isDragging", "setIsDragging", "dragRectRef", "normalizedValue", "percentage", "isWithHandle", "isInteractive", "handleDragMove", "clientX", "rect", "offsetX", "rawValue", "clampedValue", "handleDragEnd", "steppedValue", "handleMouseDown", "event", "handleMouseMove", "handleMouseUp", "combinedRef", "node", "progress_default"]
+}

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import type { Align, Shape } from '../types/props.js';
+type tabShape = Shape | 'default';
 declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     align?: Align;
-    shape?: Shape;
+    shape?: tabShape;
 } & 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 n}from"react/jsx-runtime";import*as o from"react";import{cn as m}from"../helpers/index.js";import*as s from"@radix-ui/react-tabs";import{cva as d}from"class-variance-authority";const c=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(c.Provider,{value:{align:e,shape:a},children:t})}));b.displayName="Tabs";const P=d("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),C=d("",{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(c);return n(s.List,{ref:a,className:m("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(c),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:m("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-[#080A0F]",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:m(t),...e}));h.displayName=s.Content.displayName;export{b as Tabs,h as TabsContent,g as TabsList,u as TabsTrigger};
+"use client";import{jsx as r}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="default",...i},n)=>r(s.Root,{ref:n,...i,children:r(m.Provider,{value:{align:e,shape:a},children:t})}));b.displayName="Tabs";const P=c("rounded-tabs",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"default"}}),C=c("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),u=o.forwardRef(({className:t,...e},a)=>{const{align:i,shape:n}=o.useContext(m);return r(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:n}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});u.displayName=s.List.displayName;const g=o.forwardRef(({className:t,onClick:e,...a},i)=>{const{shape:n}=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 r(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-[#080A0F]",t,C({shape:n})),onClick:T,...a})});g.displayName=s.Trigger.displayName;const h=o.forwardRef(({className:t,...e},a)=>r(s.Content,{ref:a,className:d(t),...e}));h.displayName=s.Content.displayName;export{b as Tabs,h as TabsContent,u as TabsList,g 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?.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-[#080A0F]',\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",
+  "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\ntype tabShape = Shape | 'default'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: tabShape\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?: tabShape\n  }\n>(({ children, align = 'left', shape = 'default', ...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('rounded-tabs', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      default: '',\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'default',\n  },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n  variants: {\n    shape: {\n      default: '',\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'default',\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  }\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-[#080A0F]',\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": "aA2BI,cAAAA,MAAA,oBAzBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAKpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,UAAW,GAAGC,CAAM,EAAGC,IAC5DX,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,eAAgB,CAC3C,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,GACT,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,SACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,eAAgB,CAC9C,SAAU,CACR,MAAO,CACL,QAAS,GACT,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,SACT,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,CACF,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/index.d.ts

@@ -1,2 +1,3 @@
 export { cn } from './utils.js';
 export { noop } from './utils.js';
+export { formatPrice, languageTerritory, PRICE_SYMBOL } from './priceFormatting.js';

package/dist/esm/helpers/index.js

@@ -1,2 +1,2 @@
-import{cn as p}from"./utils.js";import{noop as f}from"./utils.js";export{p as cn,f as noop};
+import{cn as e}from"./utils.js";import{noop as f}from"./utils.js";import{formatPrice as p,languageTerritory as a,PRICE_SYMBOL as n}from"./priceFormatting.js";export{n as PRICE_SYMBOL,e as cn,p as formatPrice,a as languageTerritory,f as noop};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/index.ts"],
-  "sourcesContent": ["export { cn } from './utils.js'\nexport { noop } from './utils.js'\n"],
-  "mappings": "AAAA,OAAS,MAAAA,MAAU,aACnB,OAAS,QAAAC,MAAY",
-  "names": ["cn", "noop"]
+  "sourcesContent": ["export { cn } from './utils.js'\nexport { noop } from './utils.js'\nexport { formatPrice, languageTerritory, PRICE_SYMBOL } from './priceFormatting.js'\n"],
+  "mappings": "AAAA,OAAS,MAAAA,MAAU,aACnB,OAAS,QAAAC,MAAY,aACrB,OAAS,eAAAC,EAAa,qBAAAC,EAAmB,gBAAAC,MAAoB",
+  "names": ["cn", "noop", "formatPrice", "languageTerritory", "PRICE_SYMBOL"]
 }

package/dist/esm/helpers/priceFormatting.d.ts

@@ -0,0 +1,11 @@
+export declare const PRICE_SYMBOL: any;
+export declare const languageTerritory: (locale: string) => string;
+export declare function formatPrice({ amount, currencyCode, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, currencyDisplay, }: {
+    amount: number;
+    currencyCode: string;
+    locale: string;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    removeTrailingZeros?: boolean;
+    currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'];
+}): string | null;

package/dist/esm/helpers/priceFormatting.js

@@ -0,0 +1,2 @@
+const d={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",nl:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},o=n=>({us:"en-US",uk:"en-GB",ca:"en-CA",eu:"en",fr:"fr-FR",au:"en-AU",my:"en-my","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE","ca-fr":"fr-FR",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl",dk:"en-dk",fi:"en-fi",no:"en-no",is:"en-is",se:"en-se","eu-pl":"pl-PL",es:"es-es",pl:"pl-PL",nz:"en-NZ","sg-en":"en-SG","sa-en":"en-SA","vn-vi":"vi-VN",ie:"en-IE",tw:"zh-TW"})[n]||"";function f({amount:n,currencyCode:c,locale:r,maximumFractionDigits:u,minimumFractionDigits:t,removeTrailingZeros:a=!1,currencyDisplay:i="symbol"}){const l=r==="nl"?"EUR":c||"USD",s=o(r);if(!s)return null;let e=new Intl.NumberFormat(s,{style:"currency",currency:l,currencyDisplay:i,minimumFractionDigits:u===0?0:t,maximumFractionDigits:u})?.format?.(n);return["eu-de","eu-en","de","eu"].includes(r)&&(e=e?.toString()?.replace?.(/[\s]/g,"")),a&&(e=e?.replace?.(/(\.\d*?[1-9])0+\b/,"$1")?.replace?.(/\.0+\b/,"")?.replace?.(/(,\d*?[1-9])0+\b/,"$1")?.replace?.(/,0+\b/,"")),e}export{d as PRICE_SYMBOL,f as formatPrice,o as languageTerritory};
+//# sourceMappingURL=priceFormatting.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/priceFormatting.ts"],
+  "sourcesContent": ["export const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  nl: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-US',\n    uk: 'en-GB',\n    ca: 'en-CA',\n    eu: 'en',\n    fr: 'fr-FR',\n    au: 'en-AU',\n    my: 'en-my',\n    'eu-es': 'de-DE',\n    'eu-fr': 'de-DE',\n    'eu-it': 'de-DE',\n    'eu-de': 'de-DE',\n    'eu-en': 'en-US',\n    'cz-en': 'de-DE',\n    'ca-fr': 'fr-FR',\n    nl: 'de-DE',\n    de: 'de-DE',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    dk: 'en-dk',\n    fi: 'en-fi',\n    no: 'en-no',\n    is: 'en-is',\n    se: 'en-se',\n    'eu-pl': 'pl-PL',\n    es: 'es-es',\n    pl: 'pl-PL',\n    nz: 'en-NZ',\n    'sg-en': 'en-SG',\n    'sa-en': 'en-SA',\n    'vn-vi': 'vi-VN',\n    ie: 'en-IE',\n    tw: 'zh-TW',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n  currencyDisplay = 'symbol',\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n  currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay']\n}) {\n  const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n  const localeLanguage = languageTerritory(locale)\n  if (!localeLanguage) {\n    return null\n  }\n  const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n    style: 'currency',\n    currency: code,\n    currencyDisplay: currencyDisplay,\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency?.format?.(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    formattedValue = formattedValue\n      ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      ?.replace?.(/\\.0+\\b/, '')\n      ?.replace?.(/(,\\d*?[1-9])0+\\b/, '$1')\n      ?.replace?.(/,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n"],
+  "mappings": "AAAO,MAAMA,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASC,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,EAAsB,GACtB,gBAAAC,EAAkB,QACpB,EAQG,CACD,MAAMC,EAAOR,IAAW,KAAO,MAAQG,GAAgB,MACjDM,EAAiBV,EAAkBC,CAAM,EAC/C,GAAI,CAACS,EACH,OAAO,KAUT,IAAIC,EARmB,IAAI,KAAK,aAAaD,EAAgB,CAC3D,MAAO,WACP,SAAUD,EACV,gBAAiBD,EACjB,sBAAuBH,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,GAEoC,SAASF,CAAM,EAEpD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASF,CAAM,IAChDU,EAAiBA,GAAgB,SAAS,GAAG,UAAU,QAAS,EAAE,GAGhEJ,IACFI,EAAiBA,GACb,UAAU,oBAAqB,IAAI,GACnC,UAAU,SAAU,EAAE,GACtB,UAAU,mBAAoB,IAAI,GAClC,UAAU,QAAS,EAAE,GAGpBA,CACT",
+  "names": ["PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "currencyDisplay", "code", "localeLanguage", "formattedValue"]
+}

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

@@ -29,11 +29,12 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
     readonly uid: string;
 };
 /**
- * 高阶组件， 用于给组件用style 标签的形式追加样式
+ * 高阶组件通过 withLayout 包装组件，自动应用样式和容器布局
+ *
  * @param WrappedComponent - 需要包装的组件
  * @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;
-    data?: Record<string, any>;
+export declare function withLayout<P>(WrappedComponent: React.ComponentType<P>, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & {
+    style?: string | React.CSSProperties;
+    container?: ContainerProps["container"];
 }> & React.RefAttributes<any>>;

package/dist/esm/shared/Styles.js

@@ -1,2 +1,2 @@
-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/grid.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};
+import{Fragment as L,jsx as o,jsxs as I}from"react/jsx-runtime";import f,{useMemo as y}from"react";import{simpleHash as $}from"./simpleHash.js";import R from"./getKeyPropsString.js";import{Grid as N,GridItem as h}from"../components/grid.js";import{Container as k}from"../components/container.js";import w from"./ErrorBoundary.js";const x={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"},T={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"},d=t=>{const n=R(t);return`style_${$(n)}`},G=t=>{const{style:n,uid:r,disabled:s}=t;return{style:n,uid:r,disabled:s}},K=({style:t,uid:n=d({}),disabled:r=!1})=>!t||r?null:o("style",{suppressHydrationWarning:!0,"data-style-id":n,children:`.block-${n} { ${t} }`}),W=(t,n)=>{const r=y(()=>t?.uid||d({...t,data:n}),[n,t]),s=y(()=>o(K,{...t,uid:r}),[t,r]);return{className:`block-${r} `,StyleComponent:s,uid:r}},B=t=>{const{desktopSpan:n,mobileSpan:r}=t?.container||{},s=r?x[r]:"",a=n?T[n]:"";return`${s} ${a}`.trim()};function M(t,n){const r=f.forwardRef((s,a)=>{const c=G(s),p=e=>e?typeof e=="string"?e:Object.entries(e).map(([C,P])=>`${C.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${P}`).join("; ")+";":"",i=[n?.style,c?.style].map(p).filter(e=>!!e).map(e=>e.trim().endsWith(";")?e:`${e};`).join(" "),u={...n,...c,...i&&{style:i}},{className:m,StyleComponent:S}=W(u,s?.data),b=e=>o(k,{className:`${m} ${e?.className||""}`,children:o(N,{className:"container_grid",children:o(h,{className:B(e),children:o(t,{...e,ref:a})})})}),g=e=>o(t,{...e,className:`${m} ${e?.className||""}`,ref:a}),{style:_,...l}=s;return o(L,{children:I(w,{children:[S,Reflect.ownKeys(l?.container||{})?.length>0?b(l):g(l)]})})});return r.displayName=`WithLayout${t.displayName||t.name||"Component"}`,r}export{G as getStylesProps,W as useStyles,M 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/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n  12: 'col-start-1 col-end-13',\n  10: 'col-start-2 col-end-12',\n  8: 'col-start-3 col-end-11',\n  6: 'col-start-4 col-end-10',\n  4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n  12: 'tablet:col-start-1 tablet:col-end-13',\n  10: 'tablet:col-start-2 tablet:col-end-12',\n  8: 'tablet:col-start-3 tablet:col-end-11',\n  6: 'tablet:col-start-4 tablet:col-end-10',\n  4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n  container?: {\n    /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    desktopSpan: number\n    /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    mobileSpan: number\n  }\n}\n\nexport interface StylesProps {\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32\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": "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",
-  "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"]
+  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n  12: 'col-start-1 col-end-13',\n  10: 'col-start-2 col-end-12',\n  8: 'col-start-3 col-end-11',\n  6: 'col-start-4 col-end-10',\n  4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n  12: 'tablet:col-start-1 tablet:col-end-13',\n  10: 'tablet:col-start-2 tablet:col-end-12',\n  8: 'tablet:col-start-3 tablet:col-end-11',\n  6: 'tablet:col-start-4 tablet:col-end-10',\n  4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n  container?: {\n    /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    desktopSpan: number\n    /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    mobileSpan: number\n  }\n}\n\nexport interface StylesProps {\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32\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\u901A\u8FC7 withLayout \u5305\u88C5\u7EC4\u4EF6\uFF0C\u81EA\u52A8\u5E94\u7528\u6837\u5F0F\u548C\u5BB9\u5668\u5E03\u5C40\n *\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P>(\n  WrappedComponent: React.ComponentType<P>,\n  defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n  // \u4F7F\u7528\u60A8\u7684\u7B80\u6D01\u65B9\u6CD5\uFF1A\u76F4\u63A5\u7528\u6CDB\u578B\u4FDD\u7559\u7C7B\u578B\n  const withLayout = React.forwardRef<\n    any,\n    P & { style?: string | React.CSSProperties; container?: ContainerProps['container'] }\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): 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?.className || ''}`}>\n          <Grid className=\"container_grid\">\n            <GridItem className={getContainerClassName(props)}>\n              <WrappedComponent {...props} ref={ref} />\n            </GridItem>\n          </Grid>\n        </Container>\n      )\n    }\n\n    const WithoutContainerWrapper = (props: any) => {\n      return <WrappedComponent {...props} className={`${className} ${props?.className || ''}`} ref={ref} />\n    }\n\n    // @ts-ignore\n    // eslint-disable-next-line no-unused-vars\n    const { style: _style, ...withOutStyleProps } = props\n\n    return (\n      <>\n        <ErrorBoundary>\n          {StyleComponent}\n          {Reflect.ownKeys((withOutStyleProps as any)?.container || {})?.length > 0\n            ? WithContainerWrapper(withOutStyleProps)\n            : WithoutContainerWrapper(withOutStyleProps)}\n        </ErrorBoundary>\n      </>\n    )\n  })\n\n  withLayout.displayName = `WithLayout${WrappedComponent.displayName || WrappedComponent.name || 'Component'}`\n  return withLayout\n}\n"],
+  "mappings": "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",
+  "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", "_style", "withOutStyleProps"]
 }

package/dist/esm/types/props.d.ts

@@ -1,8 +1,5 @@
 export interface ComponentCommonProps {
-    wrapperClassName?: string;
-    style?: string;
     event?: any;
-    condition?: any;
     className?: string;
     id?: string;
     key?: string;

package/dist/tokens/base.css

@@ -29,9 +29,9 @@
   --info-quaternary-color: #767880;
   --info-white-color: #FFFFFF;
 
-  --container-primary-color: #ffffff;
+  --container-primary-color: #EAEAEC;
   --container-secondary-color-0: #F5F6F7;
-  --container-secondary-color-1: #EAEAEC;
+  --container-secondary-color-1: #ffffff;
 
   --bg-color-0: #F5F6F7;
   --bg-color-1: #ffffff;
@@ -56,9 +56,10 @@
   --line-height-normal: 1.4;
   --line-height-loose: 1.6;
 
-  --tabs-list-bg-color: var(--container-secondary-color-1);
+  --tabs-list-bg-color: var(--container-primary-color);
 
   --box-radius: 12px;
+  --tabs-radius: 0px;
 }
 
 

package/dist/tokens/eufy.css

@@ -10,6 +10,7 @@
 
   --radius: 40px;
   --brand-color-0: #005d8e; 
+  --tabs-radius: 28px;
 }
 
 .aiui-dark {

package/dist/tokens/soundcore.css

@@ -3,10 +3,11 @@
 
   --brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
 
-  --btn-radius: 24px;
-  --box-radius: 16px;
-
   --radius: 0em;
 
   --brand-color-0: #17bbef;
+
+  --btn-radius: 24px;
+  --box-radius: 16px;
+  --tabs-radius: 28px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.1.33",
+  "version": "1.1.34-alpha.1768461697532",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -78,6 +78,7 @@
     "esbuild-copy-static-files": "^0.1.0",
     "esbuild-style-plugin": "^1.6.3",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-require-extensions": "^0.1.3",
@@ -90,7 +91,8 @@
     "postcss-prefix-selector": "^2.1.1",
     "prettier": "^3.5.3",
     "react-test-renderer": "^18.3.1",
-    "stylelint": "^16.6.0"
+    "stylelint": "^16.6.0",
+    "glob": "^13.0.0"
   },
   "dependencies": {
     "@payloadcms/richtext-lexical": "^3.39.1",
@@ -104,10 +106,12 @@
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.11",
     "@radix-ui/react-visually-hidden": "^1.2.2",
+    "@types/js-cookie": "^3.0.6",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.19",
     "decimal.js": "^10.6.0",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.5.2",
@@ -117,13 +121,14 @@
     "es-toolkit": "^1.36.0",
     "fitty": "^2.4.2",
     "framer-motion": "^12.23.24",
+    "js-cookie": "^3.0.5",
     "jump.js": "^1.0.2",
     "postcss": "^8.4.38",
     "react-fast-marquee": "^1.6.5",
     "react-intersection-observer": "^9.4.0",
     "react-responsive": "10.0.1",
     "react-youtube": "^10.1.0",
-    "swiper": "^11.1.3",
+    "swiper": "^11.2.10",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "vaul": "^1.1.2"