@lobehub/ui 4.3.2 → 4.3.3

package/es/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["Modal","cx","ActionIcon","AntModal","Icon"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { Modal as AntModal, Button, ConfigProvider, Drawer } from 'antd';\nimport { useResponsive } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { ReactNode, memo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Icon from '@/Icon';\n\nimport { useStyles } from './style';\nimport type { ModalProps } from './type';\n\nconst Modal = memo<ModalProps>(\n  ({\n    panelRef,\n    allowFullscreen,\n    children,\n    title = ' ',\n    className,\n    classNames,\n    width = 700,\n    onCancel,\n    open,\n    destroyOnHidden,\n    paddings,\n    height = '75dvh',\n    enableResponsive = true,\n    footer,\n    styles: customStyles,\n    okText,\n    onOk,\n    cancelText,\n    okButtonProps,\n    cancelButtonProps,\n    confirmLoading,\n    ...rest\n  }) => {\n    const [fullscreen, setFullscreen] = useState(false);\n    const { mobile } = useResponsive();\n    const { styles, cx, theme } = useStyles();\n    const hideFooter = footer === false || footer === null;\n    if (enableResponsive && mobile)\n      return (\n        <ConfigProvider\n          theme={{\n            token: {\n              colorBgElevated: theme.colorBgContainer,\n            },\n          }}\n        >\n          <Drawer\n            className={cx(styles.drawerContent, className)}\n            classNames={\n              typeof classNames === 'function'\n                ? classNames\n                : {\n                    ...classNames,\n                    wrapper: cx(styles.wrap, classNames?.wrapper),\n                  }\n            }\n            closeIcon={<ActionIcon icon={X} />}\n            destroyOnHidden={destroyOnHidden}\n            extra={\n              allowFullscreen && (\n                <ActionIcon\n                  icon={fullscreen ? Minimize2 : Maximize2}\n                  onClick={() => setFullscreen(!fullscreen)}\n                />\n              )\n            }\n            footer={\n              hideFooter\n                ? null\n                : (footer as ReactNode) || (\n                    <>\n                      <Button\n                        color={'default'}\n                        onClick={onCancel as any}\n                        variant={'filled'}\n                        {...cancelButtonProps}\n                      >\n                        {cancelText || 'Cancel'}\n                      </Button>\n                      <Button\n                        loading={confirmLoading}\n                        onClick={onOk as any}\n                        type=\"primary\"\n                        {...okButtonProps}\n                        style={{\n                          marginInlineStart: 8,\n                          ...okButtonProps?.style,\n                        }}\n                      >\n                        {okText || 'OK'}\n                      </Button>\n                    </>\n                  )\n            }\n            height={fullscreen ? 'calc(100% - env(safe-area-inset-top))' : height}\n            onClose={onCancel as any}\n            open={open}\n            panelRef={panelRef}\n            placement={'bottom'}\n            styles={\n              typeof customStyles === 'function'\n                ? customStyles\n                : {\n                    ...customStyles,\n                    body: {\n                      paddingBlock: `16px ${footer ? 0 : '16px'}`,\n                      paddingInline: paddings?.desktop ?? 16,\n                      ...customStyles?.body,\n                    },\n                  }\n            }\n            title={title}\n            {...rest}\n          >\n            {children}\n          </Drawer>\n        </ConfigProvider>\n      );\n\n    return (\n      <ConfigProvider\n        theme={{\n          token: {\n            colorBgElevated: theme.colorBgContainer,\n          },\n        }}\n      >\n        <AntModal\n          cancelButtonProps={{\n            color: 'default',\n            variant: 'filled',\n            ...cancelButtonProps,\n          }}\n          cancelText={cancelText}\n          className={cx(styles.content, className)}\n          classNames={\n            typeof classNames === 'function'\n              ? classNames\n              : {\n                  ...classNames,\n                  wrapper: cx(styles.wrap, classNames?.wrapper),\n                }\n          }\n          closable\n          closeIcon={<Icon icon={X} size={20} />}\n          confirmLoading={confirmLoading}\n          destroyOnHidden={destroyOnHidden}\n          footer={hideFooter ? null : footer}\n          maskClosable\n          okButtonProps={okButtonProps}\n          okText={okText}\n          onCancel={onCancel}\n          onOk={onOk}\n          open={open}\n          panelRef={panelRef}\n          styles={\n            typeof customStyles === 'function'\n              ? customStyles\n              : {\n                  ...customStyles,\n                  body: {\n                    maxHeight: height,\n                    overflow: 'hidden auto',\n                    paddingBlock: `0 ${footer === null ? '16px' : 0}`,\n                    paddingInline: paddings?.desktop ?? 16,\n                    ...customStyles?.body,\n                  },\n                }\n          }\n          title={title}\n          width={width}\n          {...rest}\n        >\n          {children}\n        </AntModal>\n      </ConfigProvider>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,UAAQ,MACX,EACC,UACA,iBACA,UACA,QAAQ,KACR,WACA,YACA,QAAQ,KACR,UACA,MACA,iBACA,UACA,SAAS,SACT,mBAAmB,MACnB,QACA,QAAQ,cACR,QACA,MACA,YACA,eACA,mBACA,gBACA,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,UAAI,UAAU,WAAW;CACzC,MAAM,aAAa,WAAW,SAAS,WAAW;AAClD,KAAI,oBAAoB,OACtB,QACE,oBAAC;EACC,OAAO,EACL,OAAO,EACL,iBAAiB,MAAM,kBACxB,EACF;YAED,oBAAC;GACC,WAAWC,KAAG,OAAO,eAAe,UAAU;GAC9C,YACE,OAAO,eAAe,aAClB,aACA;IACE,GAAG;IACH,SAASA,KAAG,OAAO,MAAM,YAAY,QAAQ;IAC9C;GAEP,WAAW,oBAACC,sBAAW,MAAM,IAAK;GACjB;GACjB,OACE,mBACE,oBAACA;IACC,MAAM,aAAa,YAAY;IAC/B,eAAe,cAAc,CAAC,WAAW;KACzC;GAGN,QACE,aACI,OACC,UACC,8CACE,oBAAC;IACC,OAAO;IACP,SAAS;IACT,SAAS;IACT,GAAI;cAEH,cAAc;KACR,EACT,oBAAC;IACC,SAAS;IACT,SAAS;IACT,MAAK;IACL,GAAI;IACJ,OAAO;KACL,mBAAmB;KACnB,GAAG,eAAe;KACnB;cAEA,UAAU;KACJ,IACR;GAGX,QAAQ,aAAa,0CAA0C;GAC/D,SAAS;GACH;GACI;GACV,WAAW;GACX,QACE,OAAO,iBAAiB,aACpB,eACA;IACE,GAAG;IACH,MAAM;KACJ,cAAc,QAAQ,SAAS,IAAI;KACnC,eAAe,UAAU,WAAW;KACpC,GAAG,cAAc;KAClB;IACF;GAEA;GACP,GAAI;GAEH;IACM;GACM;AAGrB,QACE,oBAAC;EACC,OAAO,EACL,OAAO,EACL,iBAAiB,MAAM,kBACxB,EACF;YAED,oBAACC;GACC,mBAAmB;IACjB,OAAO;IACP,SAAS;IACT,GAAG;IACJ;GACW;GACZ,WAAWF,KAAG,OAAO,SAAS,UAAU;GACxC,YACE,OAAO,eAAe,aAClB,aACA;IACE,GAAG;IACH,SAASA,KAAG,OAAO,MAAM,YAAY,QAAQ;IAC9C;GAEP;GACA,WAAW,oBAACG;IAAK,MAAM;IAAG,MAAM;KAAM;GACtB;GACC;GACjB,QAAQ,aAAa,OAAO;GAC5B;GACe;GACP;GACE;GACJ;GACA;GACI;GACV,QACE,OAAO,iBAAiB,aACpB,eACA;IACE,GAAG;IACH,MAAM;KACJ,WAAW;KACX,UAAU;KACV,cAAc,KAAK,WAAW,OAAO,SAAS;KAC9C,eAAe,UAAU,WAAW;KACpC,GAAG,cAAc;KAClB;IACF;GAEA;GACA;GACP,GAAI;GAEH;IACQ;GACI;EAGtB;AAED,QAAM,cAAc;AAEpB,oBAAeJ"}
+{"version":3,"file":"Modal.mjs","names":["Modal","ActionIcon","AntModal","Icon"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { Modal as AntModal, Button, ConfigProvider, Drawer } from 'antd';\nimport { cssVar, cx, useResponsive } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { ReactNode, memo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { ModalProps } from './type';\n\nconst Modal = memo<ModalProps>(\n  ({\n    panelRef,\n    allowFullscreen,\n    children,\n    title = ' ',\n    className,\n    classNames,\n    width = 700,\n    onCancel,\n    open,\n    destroyOnHidden,\n    paddings,\n    height = '75dvh',\n    enableResponsive = true,\n    footer,\n    styles: customStyles,\n    okText,\n    onOk,\n    cancelText,\n    okButtonProps,\n    cancelButtonProps,\n    confirmLoading,\n    ...rest\n  }) => {\n    const [fullscreen, setFullscreen] = useState(false);\n    const { mobile } = useResponsive();\n    const hideFooter = footer === false || footer === null;\n    if (enableResponsive && mobile)\n      return (\n        <ConfigProvider\n          theme={{\n            token: {\n              colorBgElevated: cssVar.colorBgContainer,\n            },\n          }}\n        >\n          <Drawer\n            className={cx(styles.drawerContent, className)}\n            classNames={\n              typeof classNames === 'function'\n                ? classNames\n                : {\n                    ...classNames,\n                    wrapper: cx(styles.wrap, classNames?.wrapper),\n                  }\n            }\n            closeIcon={<ActionIcon icon={X} />}\n            destroyOnHidden={destroyOnHidden}\n            extra={\n              allowFullscreen && (\n                <ActionIcon\n                  icon={fullscreen ? Minimize2 : Maximize2}\n                  onClick={() => setFullscreen(!fullscreen)}\n                />\n              )\n            }\n            footer={\n              hideFooter\n                ? null\n                : (footer as ReactNode) || (\n                    <>\n                      <Button\n                        color={'default'}\n                        onClick={onCancel as any}\n                        variant={'filled'}\n                        {...cancelButtonProps}\n                      >\n                        {cancelText || 'Cancel'}\n                      </Button>\n                      <Button\n                        loading={confirmLoading}\n                        onClick={onOk as any}\n                        type=\"primary\"\n                        {...okButtonProps}\n                        style={{\n                          marginInlineStart: 8,\n                          ...okButtonProps?.style,\n                        }}\n                      >\n                        {okText || 'OK'}\n                      </Button>\n                    </>\n                  )\n            }\n            height={fullscreen ? 'calc(100% - env(safe-area-inset-top))' : height}\n            onClose={onCancel as any}\n            open={open}\n            panelRef={panelRef}\n            placement={'bottom'}\n            styles={\n              typeof customStyles === 'function'\n                ? customStyles\n                : {\n                    ...customStyles,\n                    body: {\n                      paddingBlock: `16px ${footer ? 0 : '16px'}`,\n                      paddingInline: paddings?.desktop ?? 16,\n                      ...customStyles?.body,\n                    },\n                  }\n            }\n            title={title}\n            {...rest}\n          >\n            {children}\n          </Drawer>\n        </ConfigProvider>\n      );\n\n    return (\n      <ConfigProvider\n        theme={{\n          token: {\n            colorBgElevated: cssVar.colorBgContainer,\n          },\n        }}\n      >\n        <AntModal\n          cancelButtonProps={{\n            color: 'default',\n            variant: 'filled',\n            ...cancelButtonProps,\n          }}\n          cancelText={cancelText}\n          className={cx(styles.content, className)}\n          classNames={\n            typeof classNames === 'function'\n              ? classNames\n              : {\n                  ...classNames,\n                  wrapper: cx(styles.wrap, classNames?.wrapper),\n                }\n          }\n          closable\n          closeIcon={<Icon icon={X} size={20} />}\n          confirmLoading={confirmLoading}\n          destroyOnHidden={destroyOnHidden}\n          footer={hideFooter ? null : footer}\n          maskClosable\n          okButtonProps={okButtonProps}\n          okText={okText}\n          onCancel={onCancel}\n          onOk={onOk}\n          open={open}\n          panelRef={panelRef}\n          styles={\n            typeof customStyles === 'function'\n              ? customStyles\n              : {\n                  ...customStyles,\n                  body: {\n                    maxHeight: height,\n                    overflow: 'hidden auto',\n                    paddingBlock: `0 ${footer === null ? '16px' : 0}`,\n                    paddingInline: paddings?.desktop ?? 16,\n                    ...customStyles?.body,\n                  },\n                }\n          }\n          title={title}\n          width={width}\n          {...rest}\n        >\n          {children}\n        </AntModal>\n      </ConfigProvider>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,UAAQ,MACX,EACC,UACA,iBACA,UACA,QAAQ,KACR,WACA,YACA,QAAQ,KACR,UACA,MACA,iBACA,UACA,SAAS,SACT,mBAAmB,MACnB,QACA,QAAQ,cACR,QACA,MACA,YACA,eACA,mBACA,gBACA,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,aAAa,WAAW,SAAS,WAAW;AAClD,KAAI,oBAAoB,OACtB,QACE,oBAAC;EACC,OAAO,EACL,OAAO,EACL,iBAAiB,OAAO,kBACzB,EACF;YAED,oBAAC;GACC,WAAW,GAAG,OAAO,eAAe,UAAU;GAC9C,YACE,OAAO,eAAe,aAClB,aACA;IACE,GAAG;IACH,SAAS,GAAG,OAAO,MAAM,YAAY,QAAQ;IAC9C;GAEP,WAAW,oBAACC,sBAAW,MAAM,IAAK;GACjB;GACjB,OACE,mBACE,oBAACA;IACC,MAAM,aAAa,YAAY;IAC/B,eAAe,cAAc,CAAC,WAAW;KACzC;GAGN,QACE,aACI,OACC,UACC,8CACE,oBAAC;IACC,OAAO;IACP,SAAS;IACT,SAAS;IACT,GAAI;cAEH,cAAc;KACR,EACT,oBAAC;IACC,SAAS;IACT,SAAS;IACT,MAAK;IACL,GAAI;IACJ,OAAO;KACL,mBAAmB;KACnB,GAAG,eAAe;KACnB;cAEA,UAAU;KACJ,IACR;GAGX,QAAQ,aAAa,0CAA0C;GAC/D,SAAS;GACH;GACI;GACV,WAAW;GACX,QACE,OAAO,iBAAiB,aACpB,eACA;IACE,GAAG;IACH,MAAM;KACJ,cAAc,QAAQ,SAAS,IAAI;KACnC,eAAe,UAAU,WAAW;KACpC,GAAG,cAAc;KAClB;IACF;GAEA;GACP,GAAI;GAEH;IACM;GACM;AAGrB,QACE,oBAAC;EACC,OAAO,EACL,OAAO,EACL,iBAAiB,OAAO,kBACzB,EACF;YAED,oBAACC;GACC,mBAAmB;IACjB,OAAO;IACP,SAAS;IACT,GAAG;IACJ;GACW;GACZ,WAAW,GAAG,OAAO,SAAS,UAAU;GACxC,YACE,OAAO,eAAe,aAClB,aACA;IACE,GAAG;IACH,SAAS,GAAG,OAAO,MAAM,YAAY,QAAQ;IAC9C;GAEP;GACA,WAAW,oBAACC;IAAK,MAAM;IAAG,MAAM;KAAM;GACtB;GACC;GACjB,QAAQ,aAAa,OAAO;GAC5B;GACe;GACP;GACE;GACJ;GACA;GACI;GACV,QACE,OAAO,iBAAiB,aACpB,eACA;IACE,GAAG;IACH,MAAM;KACJ,WAAW;KACX,UAAU;KACV,cAAc,KAAK,WAAW,OAAO,SAAS;KAC9C,eAAe,UAAU,WAAW;KACpC,GAAG,cAAc;KAClB;IACF;GAEA;GACA;GACP,GAAI;GAEH;IACQ;GACI;EAGtB;AAED,QAAM,cAAc;AAEpB,oBAAeH"}

package/es/Modal/style.mjs

@@ -1,15 +1,16 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/Modal/style.ts
 const HEADER_HEIGHT = 56;
-const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		content: css$1`
-      .${prefixCls}-modal-footer {
+      [class*='ant-modal-footer'] {
         margin: 0;
         padding: 16px;
       }
-      .${prefixCls}-modal-header {
+
+      [class*='ant-modal-header'] {
         display: flex;
         gap: 4px;
         align-items: center;
@@ -19,26 +20,27 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
         margin-block-end: 0;
         padding: 16px;
       }
-      .${prefixCls}-modal-container {
+
+      [class*='ant-modal-container'] {
         overflow: hidden;
         padding: 0;
-        border: 1px solid ${token.colorSplit};
-        border-radius: ${token.borderRadiusLG}px;
+        border: 1px solid ${cssVar$1.colorSplit};
+        border-radius: ${cssVar$1.borderRadiusLG};
       }
     `,
 		drawerContent: css$1`
-      .${prefixCls}-drawer-close {
+      [class*='ant-drawer-close'] {
         padding: 0;
       }
 
-      .${prefixCls}-drawer-header {
+      [class*='ant-drawer-header'] {
         flex: none;
         height: ${HEADER_HEIGHT}px !important;
         padding-block: 0;
         padding-inline: 16px;
       }
 
-      .${prefixCls}-drawer-footer {
+      [class*='ant-drawer-footer'] {
         display: flex;
         align-items: center;
         justify-content: flex-end;
@@ -54,5 +56,5 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Modal/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Modal/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const HEADER_HEIGHT = 56;\nexport const FOOTER_HEIGHT = 68;\n\nexport const useStyles = createStyles(({ css, token, prefixCls }) => {\n  return {\n    content: css`\n      .${prefixCls}-modal-footer {\n        margin: 0;\n        padding: 16px;\n      }\n      .${prefixCls}-modal-header {\n        display: flex;\n        gap: 4px;\n        align-items: center;\n        justify-content: center;\n\n        height: 56px;\n        margin-block-end: 0;\n        padding: 16px;\n      }\n      .${prefixCls}-modal-container {\n        overflow: hidden;\n        padding: 0;\n        border: 1px solid ${token.colorSplit};\n        border-radius: ${token.borderRadiusLG}px;\n      }\n    `,\n    drawerContent: css`\n      .${prefixCls}-drawer-close {\n        padding: 0;\n      }\n\n      .${prefixCls}-drawer-header {\n        flex: none;\n        height: ${HEADER_HEIGHT}px !important;\n        padding-block: 0;\n        padding-inline: 16px;\n      }\n\n      .${prefixCls}-drawer-footer {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n\n        padding: 16px;\n        border: none;\n      }\n    `,\n    wrap: css`\n      overflow: hidden auto;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,gBAAgB;AAG7B,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,gBAAgB;AACnE,QAAO;EACL,SAAS,KAAG;SACP,UAAU;;;;SAIV,UAAU;;;;;;;;;;SAUV,UAAU;;;4BAGS,MAAM,WAAW;yBACpB,MAAM,eAAe;;;EAG1C,eAAe,KAAG;SACb,UAAU;;;;SAIV,UAAU;;kBAED,cAAc;;;;;SAKvB,UAAU;;;;;;;;;EASf,MAAM,KAAG;;;EAGV;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const HEADER_HEIGHT = 56;\nexport const FOOTER_HEIGHT = 68;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    content: css`\n      [class*='ant-modal-footer'] {\n        margin: 0;\n        padding: 16px;\n      }\n\n      [class*='ant-modal-header'] {\n        display: flex;\n        gap: 4px;\n        align-items: center;\n        justify-content: center;\n\n        height: 56px;\n        margin-block-end: 0;\n        padding: 16px;\n      }\n\n      [class*='ant-modal-container'] {\n        overflow: hidden;\n        padding: 0;\n        border: 1px solid ${cssVar.colorSplit};\n        border-radius: ${cssVar.borderRadiusLG};\n      }\n    `,\n    drawerContent: css`\n      [class*='ant-drawer-close'] {\n        padding: 0;\n      }\n\n      [class*='ant-drawer-header'] {\n        flex: none;\n        height: ${HEADER_HEIGHT}px !important;\n        padding-block: 0;\n        padding-inline: 16px;\n      }\n\n      [class*='ant-drawer-footer'] {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n\n        padding: 16px;\n        border: none;\n      }\n    `,\n    wrap: css`\n      overflow: hidden auto;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,gBAAgB;AAG7B,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,SAAS,KAAG;;;;;;;;;;;;;;;;;;;;4BAoBYA,SAAO,WAAW;yBACrBA,SAAO,eAAe;;;EAG3C,eAAe,KAAG;;;;;;;kBAOJ,cAAc;;;;;;;;;;;;;;EAc5B,MAAM,KAAG;;;EAGV;EACD"}

package/es/MotionProvider/index.d.mts

@@ -1,4 +1,4 @@
-import * as react68 from "react";
+import * as react59 from "react";
 import { Context, ReactNode } from "react";
 import * as motion_react0 from "motion/react";
 import * as m from "motion/react-m";
@@ -6,7 +6,7 @@ import * as m from "motion/react-m";
 //#region src/MotionProvider/index.d.ts
 type MotionComponentType = typeof motion_react0.motion | typeof m;
 declare const MotionComponent: Context<MotionComponentType>;
-declare const MotionProvider: react68.NamedExoticComponent<{
+declare const MotionProvider: react59.NamedExoticComponent<{
   children: ReactNode;
   motion: MotionComponentType;
 }>;

package/es/ScrollShadow/ScrollShadow.mjs

@@ -1,16 +1,16 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { variants } from "./style.mjs";
 import { useScrollOverflow } from "./useScrollOverflow.mjs";
 import { useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 import { mergeRefs } from "react-merge-refs";
 
 //#region src/ScrollShadow/ScrollShadow.tsx
 const ScrollShadow = ({ className, children, orientation = "vertical", hideScrollBar = false, size = 40, offset = 0, visibility = "auto", isEnabled = true, onVisibilityChange, style, ref, ...rest }) => {
-	const { cx, styles } = useStyles(size);
+	const cssVariables = useMemo(() => ({ "--scroll-shadow-size": `${size}%` }), [size]);
 	const domRef = useRef(null);
 	const scrollState = useScrollOverflow({
 		domRef,
@@ -46,51 +46,28 @@ const ScrollShadow = ({ className, children, orientation = "vertical", hideScrol
 		else if (finalScrollState.right) attributes["data-right-scroll"] = true;
 		return attributes;
 	}, [orientation, finalScrollState]);
-	const scrollPosition = useMemo(() => {
-		if (orientation === "vertical") {
-			if (finalScrollState.top && finalScrollState.bottom) return "top-bottom";
-			if (finalScrollState.top) return "top";
-			if (finalScrollState.bottom) return "bottom";
-		} else {
-			if (finalScrollState.left && finalScrollState.right) return "left-right";
-			if (finalScrollState.left) return "left";
-			if (finalScrollState.right) return "right";
-		}
-		return "none";
-	}, [orientation, finalScrollState]);
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: {
-				hideScrollBar: false,
-				orientation: "vertical",
-				scrollPosition: "none"
-			},
-			variants: {
-				orientation: {
-					horizontal: styles.horizontal,
-					vertical: styles.vertical
-				},
-				hideScrollBar: {
-					true: styles.hideScrollBar,
-					false: null
-				},
-				scrollPosition: {
-					"none": null,
-					"top": styles.topShadow,
-					"bottom": styles.bottomShadow,
-					"top-bottom": styles.topBottomShadow,
-					"left": styles.leftShadow,
-					"right": styles.rightShadow,
-					"left-right": styles.leftRightShadow
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			hideScrollBar,
 			orientation,
-			scrollPosition
+			scrollPosition: useMemo(() => {
+				if (orientation === "vertical") {
+					if (finalScrollState.top && finalScrollState.bottom) return "top-bottom";
+					if (finalScrollState.top) return "top";
+					if (finalScrollState.bottom) return "bottom";
+				} else {
+					if (finalScrollState.left && finalScrollState.right) return "left-right";
+					if (finalScrollState.left) return "left";
+					if (finalScrollState.right) return "right";
+				}
+				return "none";
+			}, [orientation, finalScrollState])
 		}), className),
 		ref: mergeRefs([domRef, ref]),
-		style,
+		style: {
+			...cssVariables,
+			...style
+		},
 		...dataAttributes,
 		...rest,
 		children

package/es/ScrollShadow/ScrollShadow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollShadow.mjs","names":["ScrollShadow: FC<ScrollShadowProps>","attributes: Record<string, boolean | string>","Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { type FC, useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 40,\n  offset = 0,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  const { cx, styles } = useStyles(size);\n  const domRef = useRef<HTMLDivElement>(null);\n\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          hideScrollBar: false,\n          orientation: 'vertical',\n          scrollPosition: 'none',\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          orientation: {\n            horizontal: styles.horizontal,\n            vertical: styles.vertical,\n          },\n          hideScrollBar: {\n            true: styles.hideScrollBar,\n            false: null,\n          },\n          scrollPosition: {\n            'none': null,\n            'top': styles.topShadow,\n            'bottom': styles.bottomShadow,\n            'top-bottom': styles.topBottomShadow,\n            'left': styles.leftShadow,\n            'right': styles.rightShadow,\n            'left-right': styles.leftRightShadow,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <Flexbox\n      className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,UAAU,KAAK;CACtC,MAAM,SAAS,OAAuB,KAAK;CAG3C,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA;EACA;EACA,YAAY,CAAC,SAAS;EACvB,CAAC;CAGF,MAAM,mBAAmB,cAAc;AACrC,MAAI,eAAe,SACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,MAAI,eAAe,QACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,SAAO;IACN,CAAC,YAAY,YAAY,CAAC;CAG7B,MAAM,iBAAiB,cAAc;EACnC,MAAMC,aAA+C,EACnD,oBAAoB,aACrB;AAED,MAAI,gBAAgB,YAClB;OAAI,iBAAiB,OAAO,iBAAiB,OAC3C,YAAW,4BAA4B;YAC9B,iBAAiB,IAC1B,YAAW,qBAAqB;YACvB,iBAAiB,OAC1B,YAAW,wBAAwB;aAGjC,iBAAiB,QAAQ,iBAAiB,MAC5C,YAAW,4BAA4B;WAC9B,iBAAiB,KAC1B,YAAW,sBAAsB;WACxB,iBAAiB,MAC1B,YAAW,uBAAuB;AAItC,SAAO;IACN,CAAC,aAAa,iBAAiB,CAAC;CAGnC,MAAM,iBAAiB,cAAc;AACnC,MAAI,gBAAgB,YAAY;AAC9B,OAAI,iBAAiB,OAAO,iBAAiB,OAAQ,QAAO;AAC5D,OAAI,iBAAiB,IAAK,QAAO;AACjC,OAAI,iBAAiB,OAAQ,QAAO;SAC/B;AACL,OAAI,iBAAiB,QAAQ,iBAAiB,MAAO,QAAO;AAC5D,OAAI,iBAAiB,KAAM,QAAO;AAClC,OAAI,iBAAiB,MAAO,QAAO;;AAErC,SAAO;IACN,CAAC,aAAa,iBAAiB,CAAC;AAmCnC,QACE,oBAACC;EACC,WAAW,GAnCE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB;IACf,eAAe;IACf,aAAa;IACb,gBAAgB;IACjB;GAED,UAAU;IACR,aAAa;KACX,YAAY,OAAO;KACnB,UAAU,OAAO;KAClB;IACD,eAAe;KACb,MAAM,OAAO;KACb,OAAO;KACR;IACD,gBAAgB;KACd,QAAQ;KACR,OAAO,OAAO;KACd,UAAU,OAAO;KACjB,cAAc,OAAO;KACrB,QAAQ,OAAO;KACf,SAAS,OAAO;KAChB,cAAc,OAAO;KACtB;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B;GAAE;GAAe;GAAa;GAAgB,CAAC,EAAE,UAAU;EAClF,KAAK,UAA0B,CAAC,QAAQ,IAAI,CAAC;EACtC;EACP,GAAI;EACJ,GAAI;EAEH;GACO;;AAId,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"ScrollShadow.mjs","names":["ScrollShadow: FC<ScrollShadowProps>","attributes: Record<string, boolean | string>","Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\n\nimport { variants } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 40,\n  offset = 0,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--scroll-shadow-size': `${size}%`,\n    }),\n    [size],\n  );\n  const domRef = useRef<HTMLDivElement>(null);\n\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  return (\n    <Flexbox\n      className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,IACjC,GACD,CAAC,KAAK,CACP;CACD,MAAM,SAAS,OAAuB,KAAK;CAG3C,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA;EACA;EACA,YAAY,CAAC,SAAS;EACvB,CAAC;CAGF,MAAM,mBAAmB,cAAc;AACrC,MAAI,eAAe,SACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,MAAI,eAAe,QACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,SAAO;IACN,CAAC,YAAY,YAAY,CAAC;CAG7B,MAAM,iBAAiB,cAAc;EACnC,MAAMC,aAA+C,EACnD,oBAAoB,aACrB;AAED,MAAI,gBAAgB,YAClB;OAAI,iBAAiB,OAAO,iBAAiB,OAC3C,YAAW,4BAA4B;YAC9B,iBAAiB,IAC1B,YAAW,qBAAqB;YACvB,iBAAiB,OAC1B,YAAW,wBAAwB;aAGjC,iBAAiB,QAAQ,iBAAiB,MAC5C,YAAW,4BAA4B;WAC9B,iBAAiB,KAC1B,YAAW,sBAAsB;WACxB,iBAAiB,MAC1B,YAAW,uBAAuB;AAItC,SAAO;IACN,CAAC,aAAa,iBAAiB,CAAC;AAgBnC,QACE,oBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAe;GAAa,gBAflC,cAAc;AACnC,QAAI,gBAAgB,YAAY;AAC9B,SAAI,iBAAiB,OAAO,iBAAiB,OAAQ,QAAO;AAC5D,SAAI,iBAAiB,IAAK,QAAO;AACjC,SAAI,iBAAiB,OAAQ,QAAO;WAC/B;AACL,SAAI,iBAAiB,QAAQ,iBAAiB,MAAO,QAAO;AAC5D,SAAI,iBAAiB,KAAM,QAAO;AAClC,SAAI,iBAAiB,MAAO,QAAO;;AAErC,WAAO;MACN,CAAC,aAAa,iBAAiB,CAAC;GAIsC,CAAC,EAAE,UAAU;EAClF,KAAK,UAA0B,CAAC,QAAQ,IAAI,CAAC;EAC7C,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EACJ,GAAI;EAEH;GACO;;AAId,aAAa,cAAc;AAE3B,2BAAe"}

package/es/ScrollShadow/style.mjs

@@ -1,11 +1,15 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/ScrollShadow/style.ts
-const useStyles = createStyles(({ css: css$1 }, size) => {
-	const shadowSize = size + "%";
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
 		bottomShadow: css$1`
-      mask-image: linear-gradient(180deg, #000 calc(100% - ${shadowSize}), transparent);
+      mask-image: linear-gradient(
+        180deg,
+        #000 calc(100% - var(--scroll-shadow-size, 40%)),
+        transparent
+      );
     `,
 		hideScrollBar: css$1`
       scrollbar-width: none;
@@ -25,16 +29,24 @@ const useStyles = createStyles(({ css: css$1 }, size) => {
         #000,
         #000,
         transparent 0,
-        #000 ${shadowSize},
-        #000 calc(100% - ${shadowSize}),
+        #000 var(--scroll-shadow-size, 40%),
+        #000 calc(100% - var(--scroll-shadow-size, 40%)),
         transparent
       );
     `,
 		leftShadow: css$1`
-      mask-image: linear-gradient(270deg, #000 calc(100% - ${shadowSize}), transparent);
+      mask-image: linear-gradient(
+        270deg,
+        #000 calc(100% - var(--scroll-shadow-size, 40%)),
+        transparent
+      );
     `,
 		rightShadow: css$1`
-      mask-image: linear-gradient(90deg, #000 calc(100% - ${shadowSize}), transparent);
+      mask-image: linear-gradient(
+        90deg,
+        #000 calc(100% - var(--scroll-shadow-size, 40%)),
+        transparent
+      );
     `,
 		root: css$1`
       position: relative;
@@ -45,20 +57,50 @@ const useStyles = createStyles(({ css: css$1 }, size) => {
         #000,
         #000,
         transparent 0,
-        #000 ${shadowSize},
-        #000 calc(100% - ${shadowSize}),
+        #000 var(--scroll-shadow-size, 40%),
+        #000 calc(100% - var(--scroll-shadow-size, 40%)),
         transparent
       );
     `,
 		topShadow: css$1`
-      mask-image: linear-gradient(0deg, #000 calc(100% - ${shadowSize}), transparent);
+      mask-image: linear-gradient(
+        0deg,
+        #000 calc(100% - var(--scroll-shadow-size, 40%)),
+        transparent
+      );
     `,
 		vertical: css$1`
       overflow-y: auto;
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		hideScrollBar: false,
+		orientation: "vertical",
+		scrollPosition: "none"
+	},
+	variants: {
+		orientation: {
+			horizontal: styles.horizontal,
+			vertical: styles.vertical
+		},
+		hideScrollBar: {
+			true: styles.hideScrollBar,
+			false: null
+		},
+		scrollPosition: {
+			"none": null,
+			"top": styles.topShadow,
+			"bottom": styles.bottomShadow,
+			"top-bottom": styles.topBottomShadow,
+			"left": styles.leftShadow,
+			"right": styles.rightShadow,
+			"left-right": styles.leftRightShadow
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/ScrollShadow/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ScrollShadow/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }, size: number) => {\n  const shadowSize = size + '%';\n  return {\n    bottomShadow: css`\n      mask-image: linear-gradient(180deg, #000 calc(100% - ${shadowSize}), transparent);\n    `,\n    hideScrollBar: css`\n      scrollbar-width: none;\n\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    `,\n    horizontal: css`\n      overflow-x: auto;\n    `,\n\n    leftRightShadow: css`\n      mask-image: linear-gradient(\n        to right,\n        #000,\n        #000,\n        transparent 0,\n        #000 ${shadowSize},\n        #000 calc(100% - ${shadowSize}),\n        transparent\n      );\n    `,\n\n    // 水平滚动阴影\n    leftShadow: css`\n      mask-image: linear-gradient(270deg, #000 calc(100% - ${shadowSize}), transparent);\n    `,\n\n    rightShadow: css`\n      mask-image: linear-gradient(90deg, #000 calc(100% - ${shadowSize}), transparent);\n    `,\n\n    root: css`\n      position: relative;\n      overflow: hidden;\n    `,\n\n    topBottomShadow: css`\n      mask-image: linear-gradient(\n        #000,\n        #000,\n        transparent 0,\n        #000 ${shadowSize},\n        #000 calc(100% - ${shadowSize}),\n        transparent\n      );\n    `,\n\n    // 垂直滚动阴影\n    topShadow: css`\n      mask-image: linear-gradient(0deg, #000 calc(100% - ${shadowSize}), transparent);\n    `,\n\n    vertical: css`\n      overflow-y: auto;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,cAAO,SAAiB;CAC/D,MAAM,aAAa,OAAO;AAC1B,QAAO;EACL,cAAc,KAAG;6DACwC,WAAW;;EAEpE,eAAe,KAAG;;;;;;;;;EASlB,YAAY,KAAG;;;EAIf,iBAAiB,KAAG;;;;;;eAMT,WAAW;2BACC,WAAW;;;;EAMlC,YAAY,KAAG;6DAC0C,WAAW;;EAGpE,aAAa,KAAG;4DACwC,WAAW;;EAGnE,MAAM,KAAG;;;;EAKT,iBAAiB,KAAG;;;;;eAKT,WAAW;2BACC,WAAW;;;;EAMlC,WAAW,KAAG;2DACyC,WAAW;;EAGlE,UAAU,KAAG;;;EAGd;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ScrollShadow/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    bottomShadow: css`\n      mask-image: linear-gradient(\n        180deg,\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n    hideScrollBar: css`\n      scrollbar-width: none;\n\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    `,\n    horizontal: css`\n      overflow-x: auto;\n    `,\n\n    leftRightShadow: css`\n      mask-image: linear-gradient(\n        to right,\n        #000,\n        #000,\n        transparent 0,\n        #000 var(--scroll-shadow-size, 40%),\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    // 水平滚动阴影\n    leftShadow: css`\n      mask-image: linear-gradient(\n        270deg,\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    rightShadow: css`\n      mask-image: linear-gradient(\n        90deg,\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    root: css`\n      position: relative;\n      overflow: hidden;\n    `,\n\n    topBottomShadow: css`\n      mask-image: linear-gradient(\n        #000,\n        #000,\n        transparent 0,\n        #000 var(--scroll-shadow-size, 40%),\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    // 垂直滚动阴影\n    topShadow: css`\n      mask-image: linear-gradient(\n        0deg,\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    vertical: css`\n      overflow-y: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    hideScrollBar: false,\n    orientation: 'vertical',\n    scrollPosition: 'none',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    orientation: {\n      horizontal: styles.horizontal,\n      vertical: styles.vertical,\n    },\n    hideScrollBar: {\n      true: styles.hideScrollBar,\n      false: null,\n    },\n    scrollPosition: {\n      'none': null,\n      'top': styles.topShadow,\n      'bottom': styles.bottomShadow,\n      'top-bottom': styles.topBottomShadow,\n      'left': styles.leftShadow,\n      'right': styles.rightShadow,\n      'left-right': styles.leftRightShadow,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,cAAc,KAAG;;;;;;;EAOjB,eAAe,KAAG;;;;;;;;;EASlB,YAAY,KAAG;;;EAIf,iBAAiB,KAAG;;;;;;;;;;;EAapB,YAAY,KAAG;;;;;;;EAQf,aAAa,KAAG;;;;;;;EAQhB,MAAM,KAAG;;;;EAKT,iBAAiB,KAAG;;;;;;;;;;EAYpB,WAAW,KAAG;;;;;;;EAQd,UAAU,KAAG;;;EAGd;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,eAAe;EACf,aAAa;EACb,gBAAgB;EACjB;CAED,UAAU;EACR,aAAa;GACX,YAAY,OAAO;GACnB,UAAU,OAAO;GAClB;EACD,eAAe;GACb,MAAM,OAAO;GACb,OAAO;GACR;EACD,gBAAgB;GACd,QAAQ;GACR,OAAO,OAAO;GACd,UAAU,OAAO;GACjB,cAAc,OAAO;GACrB,QAAQ,OAAO;GACf,SAAS,OAAO;GAChB,cAAc,OAAO;GACtB;EACF;CAEF,CAAC"}

package/es/SearchBar/SearchBar.d.mts

@@ -1,8 +1,8 @@
 import { SearchBarProps } from "./type.mjs";
-import * as react26 from "react";
+import * as react45 from "react";
 
 //#region src/SearchBar/SearchBar.d.ts
-declare const SearchBar: react26.NamedExoticComponent<SearchBarProps>;
+declare const SearchBar: react45.NamedExoticComponent<SearchBarProps>;
 //#endregion
 export { SearchBar };
 //# sourceMappingURL=SearchBar.d.mts.map

package/es/SearchBar/SearchBar.mjs

@@ -4,9 +4,10 @@ import Icon_default from "../Icon/Icon.mjs";
 import Hotkey_default from "../Hotkey/Hotkey.mjs";
 import Input_default from "../Input/Input.mjs";
 import Spotlight_default from "../awesome/Spotlight/Spotlight.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
 import { LucideLoader2, Search } from "lucide-react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -19,7 +20,6 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 		value
 	});
 	const [showTag, setShowTag] = useState(true);
-	const { styles, cx } = useStyles();
 	const inputReference = useRef(null);
 	const hotkey = useMemo(() => shortKey.includes("+") ? shortKey : `mod+${shortKey}`, [shortKey]);
 	useHotkeys(hotkey, () => {

package/es/SearchBar/SearchBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mjs","names":["useControlledState","inputReference: any","Spotlight","Input","Icon","Hotkey"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\nimport Spotlight from '@/awesome/Spotlight';\n\nimport { useStyles } from './style';\nimport type { SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const { styles, cx } = useStyles();\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          placeholder={placeholder ?? 'Type keywords...'}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            className={cx(styles.tag, shortKeyClassName)}\n            compact\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,EAAE,EAC3D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,EAAE,EACvE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAM,EAAE,QAAQ,OAAO,WAAW;CAClC,MAAMC,iBAAsB,OAAyB,KAAK;CAC1D,MAAM,SAAS,cACN,SAAS,SAAS,IAAI,GAAG,WAAW,OAAO,YAClD,CAAC,SAAS,CACX;AAED,YACE,cACM;AACJ,MAAI,CAAC,eAAgB;AACrB,iBAAe,SAAS,OAAO;IAEjC;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;EACjB,CACF;AAED,QACE,qBAAC;EAAI,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAS;;GAClD,aAAa,oBAACC,sBAAY;GAC3B,oBAACC;IACC;IACA,WAAW;IACX,SAAS,MAAM;AACb,cAAS,EAAE;AACX,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,KAAK;;IAElB,WAAW,MAAM;AACf,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,EAAE;;IAEf,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,gBAAW,MAAM;;IAEnB,eAAe,MAAM;AACnB,oBAAe,EAAE;AACjB,gBAAW,WAAW;;IAExB,aAAa,eAAe;IAC5B,QACE,oBAACC;KACC,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,GAAG;MACzB;IAEJ,KAAK;IACL,OAAO;IACP,OAAO;IACP,GAAI;KACJ;GACD,kBAAkB,WAAW,CAAC,cAC7B,oBAACC;IACC,WAAW,GAAG,OAAO,KAAK,kBAAkB;IAC5C;IACA,MAAM;IACN,OAAO;KACP;;GAEA;EAGX;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"SearchBar.mjs","names":["useControlledState","inputReference: any","Spotlight","Input","Icon","Hotkey"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\nimport Spotlight from '@/awesome/Spotlight';\n\nimport { styles } from './style';\nimport type { SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          placeholder={placeholder ?? 'Type keywords...'}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            className={cx(styles.tag, shortKeyClassName)}\n            compact\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,EAAE,EAC3D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,EAAE,EACvE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAMC,iBAAsB,OAAyB,KAAK;CAC1D,MAAM,SAAS,cACN,SAAS,SAAS,IAAI,GAAG,WAAW,OAAO,YAClD,CAAC,SAAS,CACX;AAED,YACE,cACM;AACJ,MAAI,CAAC,eAAgB;AACrB,iBAAe,SAAS,OAAO;IAEjC;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;EACjB,CACF;AAED,QACE,qBAAC;EAAI,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAS;;GAClD,aAAa,oBAACC,sBAAY;GAC3B,oBAACC;IACC;IACA,WAAW;IACX,SAAS,MAAM;AACb,cAAS,EAAE;AACX,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,KAAK;;IAElB,WAAW,MAAM;AACf,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,EAAE;;IAEf,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,gBAAW,MAAM;;IAEnB,eAAe,MAAM;AACnB,oBAAe,EAAE;AACjB,gBAAW,WAAW;;IAExB,aAAa,eAAe;IAC5B,QACE,oBAACC;KACC,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,GAAG;MACzB;IAEJ,KAAK;IACL,OAAO;IACP,OAAO;IACP,GAAI;KACJ;GACD,kBAAkB,WAAW,CAAC,cAC7B,oBAACC;IACC,WAAW,GAAG,OAAO,KAAK,kBAAkB;IAC5C;IACA,MAAM;IACN,OAAO;KACP;;GAEA;EAGX;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/SearchBar/style.mjs

@@ -1,21 +1,22 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
 
 //#region src/SearchBar/style.ts
-const useStyles = createStyles(({ css: css$1, token, stylish, cx: cx$1 }) => ({
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	icon: css$1`
-    color: ${token.colorTextPlaceholder};
+    color: ${cssVar$1.colorTextPlaceholder};
   `,
 	search: css$1`
     position: relative;
     max-width: 100%;
   `,
-	tag: cx$1(stylish.blur, css$1`
+	tag: cx(staticStylish.blur, css$1`
       position: absolute;
       inset-block-start: 50%;
       inset-inline-end: 6px;
       transform: translateY(-50%);
 
-      color: ${token.colorTextDescription};
+      color: ${cssVar$1.colorTextDescription};
 
       kbd {
         color: inherit;
@@ -24,5 +25,5 @@ const useStyles = createStyles(({ css: css$1, token, stylish, cx: cx$1 }) => ({
 }));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/SearchBar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/SearchBar/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, stylish, cx }) => ({\n  icon: css`\n    color: ${token.colorTextPlaceholder};\n  `,\n  search: css`\n    position: relative;\n    max-width: 100%;\n  `,\n  tag: cx(\n    stylish.blur,\n    css`\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-end: 6px;\n      transform: translateY(-50%);\n\n      color: ${token.colorTextDescription};\n\n      kbd {\n        color: inherit;\n      }\n    `,\n  ),\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,SAAS,gBAAU;CACtE,MAAM,KAAG;aACE,MAAM,qBAAqB;;CAEtC,QAAQ,KAAG;;;;CAIX,KAAKA,KACH,QAAQ,MACR,KAAG;;;;;;eAMQ,MAAM,qBAAqB;;;;;MAMvC;CACF,EAAE"}
+{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/SearchBar/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  icon: css`\n    color: ${cssVar.colorTextPlaceholder};\n  `,\n  search: css`\n    position: relative;\n    max-width: 100%;\n  `,\n  tag: cx(\n    lobeStaticStylish.blur,\n    css`\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-end: 6px;\n      transform: translateY(-50%);\n\n      color: ${cssVar.colorTextDescription};\n\n      kbd {\n        color: inherit;\n      }\n    `,\n  ),\n}));\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,MAAM,KAAG;aACEA,SAAO,qBAAqB;;CAEvC,QAAQ,KAAG;;;;CAIX,KAAK,GACHC,cAAkB,MAClB,KAAG;;;;;;eAMQD,SAAO,qBAAqB;;;;;MAMxC;CACF,EAAE"}

package/es/Segmented/Segmented.d.mts

@@ -1,8 +1,8 @@
 import { SegmentedProps } from "./type.mjs";
-import * as react24 from "react";
+import * as react44 from "react";
 
 //#region src/Segmented/Segmented.d.ts
-declare const Segmented: react24.NamedExoticComponent<SegmentedProps>;
+declare const Segmented: react44.NamedExoticComponent<SegmentedProps>;
 //#endregion
 export { Segmented };
 //# sourceMappingURL=Segmented.d.mts.map

package/es/Segmented/Segmented.mjs

@@ -1,37 +1,15 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
-import { memo, useMemo } from "react";
+import { variants } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Segmented } from "antd";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#region src/Segmented/Segmented.tsx
 const Segmented$1 = memo(({ ref, padding, style, className, variant = "filled", shadow, glass, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx(Segmented, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: {
-				glass: false,
-				shadow: false,
-				variant: "filled"
-			},
-			variants: {
-				variant: {
-					filled: styles.filled,
-					outlined: styles.outlined,
-					borderless: styles.borderless
-				},
-				glass: {
-					false: null,
-					true: styles.glass
-				},
-				shadow: {
-					false: null,
-					true: styles.shadow
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			glass,
 			shadow,
 			variant

package/es/Segmented/Segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segmented.mjs","names":["Segmented","AntdSegmented"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport { Segmented as AntdSegmented } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { useStyles } from './style';\nimport type { SegmentedProps } from './type';\n\nconst Segmented = memo<SegmentedProps>(\n  ({ ref, padding, style, className, variant = 'filled', shadow, glass, ...rest }) => {\n    const { cx, styles } = useStyles();\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            glass: false,\n            shadow: false,\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n            glass: {\n              false: null,\n              true: styles.glass,\n            },\n            shadow: {\n              false: null,\n              true: styles.shadow,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    return (\n      <AntdSegmented\n        className={cx(variants({ glass, shadow, variant }), className)}\n        ref={ref}\n        style={{\n          padding,\n          ...style,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":";;;;;;;;;AASA,MAAMA,cAAY,MACf,EAAE,KAAK,SAAS,OAAO,WAAW,UAAU,UAAU,QAAQ,OAAO,GAAG,WAAW;CAClF,MAAM,EAAE,IAAI,WAAW,WAAW;AA8BlC,QACE,oBAACC;EACC,WAAW,GA/BE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB;IACf,OAAO;IACP,QAAQ;IACR,SAAS;IACV;GAED,UAAU;IACR,SAAS;KACP,QAAQ,OAAO;KACf,UAAU,OAAO;KACjB,YAAY,OAAO;KACpB;IACD,OAAO;KACL,OAAO;KACP,MAAM,OAAO;KACd;IACD,QAAQ;KACN,OAAO;KACP,MAAM,OAAO;KACd;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B;GAAE;GAAO;GAAQ;GAAS,CAAC,EAAE,UAAU;EACzD;EACL,OAAO;GACL;GACA,GAAG;GACJ;EACD,GAAI;GACJ;EAGP;AAED,YAAU,cAAc;AAExB,wBAAeD"}
+{"version":3,"file":"Segmented.mjs","names":["Segmented","AntdSegmented"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport { Segmented as AntdSegmented } from 'antd';\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { SegmentedProps } from './type';\n\nconst Segmented = memo<SegmentedProps>(\n  ({ ref, padding, style, className, variant = 'filled', shadow, glass, ...rest }) => {\n    return (\n      <AntdSegmented\n        className={cx(variants({ glass, shadow, variant }), className)}\n        ref={ref}\n        style={{\n          padding,\n          ...style,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":";;;;;;;;;AASA,MAAMA,cAAY,MACf,EAAE,KAAK,SAAS,OAAO,WAAW,UAAU,UAAU,QAAQ,OAAO,GAAG,WAAW;AAClF,QACE,oBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAO;GAAQ;GAAS,CAAC,EAAE,UAAU;EACzD;EACL,OAAO;GACL;GACA,GAAG;GACJ;EACD,GAAI;GACJ;EAGP;AAED,YAAU,cAAc;AAExB,wBAAeD"}

package/es/Segmented/style.mjs

@@ -1,23 +1,47 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Segmented/style.ts
-const useStyles = createStyles(({ css: css$1, stylish, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: stylish.variantBorderlessWithoutHover,
+		borderless: staticStylish.variantBorderlessWithoutHover,
 		filled: css$1`
-      background: ${token.colorBgLayout};
-      border: 1px solid ${token.colorFillQuaternary};
+      border: 1px solid ${cssVar$1.colorFillQuaternary};
+      background: ${cssVar$1.colorBgLayout};
     `,
-		glass: stylish.blur,
+		glass: staticStylish.blur,
 		outlined: css$1`
+      border: 1px solid ${cssVar$1.colorBorderSecondary};
       background: transparent;
-      border: 1px solid ${token.colorBorderSecondary};
     `,
 		root: css$1``,
-		shadow: stylish.shadow
+		shadow: staticStylish.shadow
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		glass: false,
+		shadow: false,
+		variant: "filled"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		glass: {
+			false: null,
+			true: styles.glass
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/Segmented/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Segmented/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, stylish, token }) => {\n  return {\n    borderless: stylish.variantBorderlessWithoutHover,\n    filled: css`\n      background: ${token.colorBgLayout};\n      border: 1px solid ${token.colorFillQuaternary};\n    `,\n    glass: stylish.blur,\n    outlined: css`\n      background: transparent;\n      border: 1px solid ${token.colorBorderSecondary};\n    `,\n    root: css``,\n    shadow: stylish.shadow,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,SAAS,YAAY;AACjE,QAAO;EACL,YAAY,QAAQ;EACpB,QAAQ,KAAG;oBACK,MAAM,cAAc;0BACd,MAAM,oBAAoB;;EAEhD,OAAO,QAAQ;EACf,UAAU,KAAG;;0BAES,MAAM,qBAAqB;;EAEjD,MAAM,KAAG;EACT,QAAQ,QAAQ;EACjB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      border: 1px solid ${cssVar.colorFillQuaternary};\n      background: ${cssVar.colorBgLayout};\n    `,\n    glass: lobeStaticStylish.blur,\n    outlined: css`\n      border: 1px solid ${cssVar.colorBorderSecondary};\n      background: transparent;\n    `,\n    root: css``,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    glass: {\n      false: null,\n      true: styles.glass,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAYA,cAAkB;EAC9B,QAAQ,KAAG;0BACWC,SAAO,oBAAoB;oBACjCA,SAAO,cAAc;;EAErC,OAAOD,cAAkB;EACzB,UAAU,KAAG;0BACSC,SAAO,qBAAqB;;;EAGlD,MAAM,KAAG;EACT,QAAQD,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Select/Select.d.mts

@@ -1,8 +1,8 @@
 import { SelectProps } from "./type.mjs";
-import * as react23 from "react";
+import * as react1 from "react";
 
 //#region src/Select/Select.d.ts
-declare const Input: react23.NamedExoticComponent<SelectProps>;
+declare const Input: react1.NamedExoticComponent<SelectProps>;
 //#endregion
 export { Input };
 //# sourceMappingURL=Select.d.mts.map