@lobehub/ui 4.3.2 → 4.3.3

package/es/Block/style.mjs

@@ -1,26 +1,72 @@
-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/Block/style.ts
-const useStyles = createStyles(({ css: css$1, stylish, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: stylish.variantBorderlessWithoutHover,
-		clickableBorderless: stylish.variantBorderless,
-		clickableFilled: stylish.variantFilled,
-		clickableOutlined: stylish.variantOutlined,
+		borderless: staticStylish.variantBorderlessWithoutHover,
+		clickableBorderless: staticStylish.variantBorderless,
+		clickableFilled: staticStylish.variantFilled,
+		clickableOutlined: staticStylish.variantOutlined,
 		clickableRoot: css$1`
       cursor: pointer;
     `,
-		filled: stylish.variantFilledWithoutHover,
-		glass: stylish.blur,
-		outlined: stylish.variantOutlinedWithoutHover,
+		filled: staticStylish.variantFilledWithoutHover,
+		glass: staticStylish.blur,
+		outlined: staticStylish.variantOutlinedWithoutHover,
 		root: css$1`
       position: relative;
-      border-radius: ${token.borderRadius}px;
+      border-radius: ${cssVar$1.borderRadius};
     `,
-		shadow: stylish.shadow
+		shadow: staticStylish.shadow
 	};
 });
+const variants = cva(styles.root, {
+	compoundVariants: [
+		{
+			class: styles.clickableBorderless,
+			clickable: true,
+			variant: "borderless"
+		},
+		{
+			class: styles.clickableFilled,
+			clickable: true,
+			variant: "filled"
+		},
+		{
+			class: styles.clickableOutlined,
+			clickable: true,
+			variant: "outlined"
+		}
+	],
+	defaultVariants: {
+		clickable: false,
+		glass: false,
+		shadow: false,
+		variant: "filled"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		clickable: {
+			false: null,
+			true: styles.clickableRoot
+		},
+		glass: {
+			false: null,
+			true: styles.glass
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/Block/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Block/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, stylish, token }) => {\n  return {\n    borderless: stylish.variantBorderlessWithoutHover,\n    clickableBorderless: stylish.variantBorderless,\n    clickableFilled: stylish.variantFilled,\n    clickableOutlined: stylish.variantOutlined,\n    clickableRoot: css`\n      cursor: pointer;\n    `,\n    filled: stylish.variantFilledWithoutHover,\n    glass: stylish.blur,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n      border-radius: ${token.borderRadius}px;\n    `,\n    shadow: stylish.shadow,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,SAAS,YAAY;AACjE,QAAO;EACL,YAAY,QAAQ;EACpB,qBAAqB,QAAQ;EAC7B,iBAAiB,QAAQ;EACzB,mBAAmB,QAAQ;EAC3B,eAAe,KAAG;;;EAGlB,QAAQ,QAAQ;EAChB,OAAO,QAAQ;EACf,UAAU,QAAQ;EAClB,MAAM,KAAG;;uBAEU,MAAM,aAAa;;EAEtC,QAAQ,QAAQ;EACjB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Block/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    clickableBorderless: lobeStaticStylish.variantBorderless,\n    clickableFilled: lobeStaticStylish.variantFilled,\n    clickableOutlined: lobeStaticStylish.variantOutlined,\n    clickableRoot: css`\n      cursor: pointer;\n    `,\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    glass: lobeStaticStylish.blur,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n      border-radius: ${cssVar.borderRadius};\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  compoundVariants: [\n    {\n      class: styles.clickableBorderless,\n      clickable: true,\n      variant: 'borderless',\n    },\n    {\n      class: styles.clickableFilled,\n      clickable: true,\n      variant: 'filled',\n    },\n    {\n      class: styles.clickableOutlined,\n      clickable: true,\n      variant: 'outlined',\n    },\n  ],\n  defaultVariants: {\n    clickable: false,\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    clickable: {\n      false: null,\n      true: styles.clickableRoot,\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,qBAAqBA,cAAkB;EACvC,iBAAiBA,cAAkB;EACnC,mBAAmBA,cAAkB;EACrC,eAAe,KAAG;;;EAGlB,QAAQA,cAAkB;EAC1B,OAAOA,cAAkB;EACzB,UAAUA,cAAkB;EAC5B,MAAM,KAAG;;uBAEUC,SAAO,aAAa;;EAEvC,QAAQD,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,WAAW;GACX,SAAS;GACV;EACD;GACE,OAAO,OAAO;GACd,WAAW;GACX,SAAS;GACV;EACD;GACE,OAAO,OAAO;GACd,WAAW;GACX,SAAS;GACV;EACF;CACD,iBAAiB;EACf,WAAW;EACX,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,WAAW;GACT,OAAO;GACP,MAAM,OAAO;GACd;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Burger/Burger.d.mts

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

package/es/Burger/Burger.mjs

@@ -2,18 +2,26 @@
 
 import Center_default from "../Flex/Center.mjs";
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
-import { useStyles } from "./style.mjs";
-import { memo } from "react";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer, Menu } from "antd";
+import { cx } from "antd-style";
 import { MenuIcon, X } from "lucide-react";
 
 //#region src/Burger/Burger.tsx
 const Burger = memo(({ items, openKeys, selectedKeys, opened, setOpened, className, headerHeight = 64, onClick, iconProps, size, variant, rootClassName, fullscreen, drawerProps, ...rest }) => {
-	const { cx, styles } = useStyles({
-		fullscreen,
-		headerHeight
-	});
+	const cssVariables = useMemo(() => {
+		const vars = { "--burger-header-height": `${headerHeight}px` };
+		if (fullscreen) {
+			vars["--burger-drawer-top"] = "0";
+			vars["--burger-menu-padding-top"] = "0px";
+		} else {
+			vars["--burger-drawer-top"] = `calc(var(--burger-header-height, ${headerHeight}px) + 1px)`;
+			vars["--burger-menu-padding-top"] = `${headerHeight}px`;
+		}
+		return vars;
+	}, [fullscreen, headerHeight]);
 	return /* @__PURE__ */ jsxs(Center_default, {
 		className: cx(styles.container, className),
 		onClick: () => {
@@ -32,7 +40,11 @@ const Burger = memo(({ items, openKeys, selectedKeys, opened, setOpened, classNa
 			width: "100vw",
 			...drawerProps,
 			className: styles.drawer,
-			rootClassName: cx(styles.drawerRoot, rootClassName),
+			rootClassName: cx(fullscreen ? styles.drawerRootFullscreen : styles.drawerRoot, rootClassName),
+			rootStyle: {
+				...cssVariables,
+				...drawerProps?.rootStyle
+			},
 			styles: {
 				body: { padding: 0 },
 				header: { display: "none" }
@@ -43,7 +55,8 @@ const Burger = memo(({ items, openKeys, selectedKeys, opened, setOpened, classNa
 				mode: "inline",
 				onClick,
 				openKeys,
-				selectedKeys
+				selectedKeys,
+				style: cssVariables
 			}), /* @__PURE__ */ jsx("div", { className: styles.fillRect })]
 		})]
 	});

package/es/Burger/Burger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Burger.mjs","names":["Center","ActionIcon"],"sources":["../../src/Burger/Burger.tsx"],"sourcesContent":["'use client';\n\nimport { Drawer, Menu } from 'antd';\nimport { MenuIcon, X } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Center } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { BurgerProps } from './type';\n\nconst Burger = memo<BurgerProps>(\n  ({\n    items,\n    openKeys,\n    selectedKeys,\n    opened,\n    setOpened,\n    className,\n    headerHeight = 64,\n    onClick,\n    iconProps,\n    size,\n    variant,\n    rootClassName,\n    fullscreen,\n    drawerProps,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles({ fullscreen, headerHeight });\n\n    return (\n      <Center\n        className={cx(styles.container, className)}\n        onClick={() => {\n          setOpened(!opened);\n        }}\n        {...rest}\n      >\n        <ActionIcon icon={opened ? X : MenuIcon} size={size} variant={variant} {...iconProps} />\n        <Drawer\n          closeIcon={undefined}\n          open={opened}\n          placement={'left'}\n          width={'100vw'}\n          {...drawerProps}\n          className={styles.drawer}\n          rootClassName={cx(styles.drawerRoot, rootClassName)}\n          styles={{\n            body: { padding: 0 },\n            header: { display: 'none' },\n          }}\n        >\n          <Menu\n            className={styles.menu}\n            items={items}\n            mode={'inline'}\n            onClick={onClick}\n            openKeys={openKeys}\n            selectedKeys={selectedKeys}\n          />\n          <div className={styles.fillRect} />\n        </Drawer>\n      </Center>\n    );\n  },\n);\n\nBurger.displayName = 'Burger';\n\nexport default Burger;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAS,MACZ,EACC,OACA,UACA,cACA,QACA,WACA,WACA,eAAe,IACf,SACA,WACA,MACA,SACA,eACA,YACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,UAAU;EAAE;EAAY;EAAc,CAAC;AAE9D,QACE,qBAACA;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,eAAe;AACb,aAAU,CAAC,OAAO;;EAEpB,GAAI;aAEJ,oBAACC;GAAW,MAAM,SAAS,IAAI;GAAgB;GAAe;GAAS,GAAI;IAAa,EACxF,qBAAC;GACC,WAAW;GACX,MAAM;GACN,WAAW;GACX,OAAO;GACP,GAAI;GACJ,WAAW,OAAO;GAClB,eAAe,GAAG,OAAO,YAAY,cAAc;GACnD,QAAQ;IACN,MAAM,EAAE,SAAS,GAAG;IACpB,QAAQ,EAAE,SAAS,QAAQ;IAC5B;cAED,oBAAC;IACC,WAAW,OAAO;IACX;IACP,MAAM;IACG;IACC;IACI;KACd,EACF,oBAAC,SAAI,WAAW,OAAO,WAAY;IAC5B;GACF;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"Burger.mjs","names":["vars: Record<string, string>","Center","ActionIcon"],"sources":["../../src/Burger/Burger.tsx"],"sourcesContent":["'use client';\n\nimport { Drawer, Menu } from 'antd';\nimport { cx } from 'antd-style';\nimport { MenuIcon, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Center } from '@/Flex';\n\nimport { styles } from './style';\nimport type { BurgerProps } from './type';\n\nconst Burger = memo<BurgerProps>(\n  ({\n    items,\n    openKeys,\n    selectedKeys,\n    opened,\n    setOpened,\n    className,\n    headerHeight = 64,\n    onClick,\n    iconProps,\n    size,\n    variant,\n    rootClassName,\n    fullscreen,\n    drawerProps,\n    ...rest\n  }) => {\n    // Convert props to CSS variables\n    const cssVariables = useMemo<Record<string, string>>(() => {\n      const vars: Record<string, string> = {\n        '--burger-header-height': `${headerHeight}px`,\n      };\n      if (fullscreen) {\n        vars['--burger-drawer-top'] = '0';\n        vars['--burger-menu-padding-top'] = '0px';\n      } else {\n        vars['--burger-drawer-top'] = `calc(var(--burger-header-height, ${headerHeight}px) + 1px)`;\n        vars['--burger-menu-padding-top'] = `${headerHeight}px`;\n      }\n      return vars;\n    }, [fullscreen, headerHeight]);\n\n    return (\n      <Center\n        className={cx(styles.container, className)}\n        onClick={() => {\n          setOpened(!opened);\n        }}\n        {...rest}\n      >\n        <ActionIcon icon={opened ? X : MenuIcon} size={size} variant={variant} {...iconProps} />\n        <Drawer\n          closeIcon={undefined}\n          open={opened}\n          placement={'left'}\n          width={'100vw'}\n          {...drawerProps}\n          className={styles.drawer}\n          rootClassName={cx(\n            fullscreen ? styles.drawerRootFullscreen : styles.drawerRoot,\n            rootClassName,\n          )}\n          rootStyle={{\n            ...cssVariables,\n            ...drawerProps?.rootStyle,\n          }}\n          styles={{\n            body: { padding: 0 },\n            header: { display: 'none' },\n          }}\n        >\n          <Menu\n            className={styles.menu}\n            items={items}\n            mode={'inline'}\n            onClick={onClick}\n            openKeys={openKeys}\n            selectedKeys={selectedKeys}\n            style={cssVariables}\n          />\n          <div className={styles.fillRect} />\n        </Drawer>\n      </Center>\n    );\n  },\n);\n\nBurger.displayName = 'Burger';\n\nexport default Burger;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,SAAS,MACZ,EACC,OACA,UACA,cACA,QACA,WACA,WACA,eAAe,IACf,SACA,WACA,MACA,SACA,eACA,YACA,aACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;EACzD,MAAMA,OAA+B,EACnC,0BAA0B,GAAG,aAAa,KAC3C;AACD,MAAI,YAAY;AACd,QAAK,yBAAyB;AAC9B,QAAK,+BAA+B;SAC/B;AACL,QAAK,yBAAyB,oCAAoC,aAAa;AAC/E,QAAK,+BAA+B,GAAG,aAAa;;AAEtD,SAAO;IACN,CAAC,YAAY,aAAa,CAAC;AAE9B,QACE,qBAACC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,eAAe;AACb,aAAU,CAAC,OAAO;;EAEpB,GAAI;aAEJ,oBAACC;GAAW,MAAM,SAAS,IAAI;GAAgB;GAAe;GAAS,GAAI;IAAa,EACxF,qBAAC;GACC,WAAW;GACX,MAAM;GACN,WAAW;GACX,OAAO;GACP,GAAI;GACJ,WAAW,OAAO;GAClB,eAAe,GACb,aAAa,OAAO,uBAAuB,OAAO,YAClD,cACD;GACD,WAAW;IACT,GAAG;IACH,GAAG,aAAa;IACjB;GACD,QAAQ;IACN,MAAM,EAAE,SAAS,GAAG;IACpB,QAAQ,EAAE,SAAS,QAAQ;IAC5B;cAED,oBAAC;IACC,WAAW,OAAO;IACX;IACP,MAAM;IACG;IACC;IACI;IACd,OAAO;KACP,EACF,oBAAC,SAAI,WAAW,OAAO,WAAY;IAC5B;GACF;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/es/Burger/style.mjs

@@ -1,123 +1,142 @@
-import { createStyles } from "antd-style";
-import { rgba } from "polished";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
 
 //#region src/Burger/style.ts
-const useStyles = createStyles(({ token, css: css$1, stylish, prefixCls }, { fullscreen, headerHeight }) => {
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		container: css$1`
-        cursor: pointer;
-        width: ${token.controlHeight}px;
-        height: ${token.controlHeight}px;
-        border-radius: ${token.borderRadius}px;
-      `,
+      cursor: pointer;
+      width: ${cssVar$1.controlHeight};
+      height: ${cssVar$1.controlHeight};
+      border-radius: ${cssVar$1.borderRadius};
+    `,
 		drawer: css$1`
-        &.${prefixCls}-drawer-content {
-          background: transparent;
-        }
+      &.${prefixCls}-drawer-content {
+        background: transparent;
+      }
 
-        .${prefixCls}-drawer-body {
-          display: flex;
-          flex-direction: column;
-        }
-      `,
+      .${prefixCls}-drawer-body {
+        display: flex;
+        flex-direction: column;
+      }
+    `,
 		drawerRoot: css$1`
-        inset-block-start: ${fullscreen ? 0 : headerHeight + 1}px;
+      inset-block-start: var(--burger-drawer-top, calc(var(--burger-header-height, 64px) + 1px));
 
-        :focus-visible {
-          outline: none;
-        }
-
-        .${prefixCls}-drawer {
-          &-mask {
-            ${stylish.blur};
-            background-color: ${rgba(token.colorBgLayout, .5)};
-          }
+      :focus-visible {
+        outline: none;
+      }
 
-          &-content-wrapper {
-            box-shadow: none;
-          }
-        }
-      `,
-		fillRect: css$1`
-        flex: 1;
-        width: 100%;
-        border-block-start: none;
-      `,
-		menu: css$1`
-        padding-block-start: ${fullscreen ? headerHeight : 0}px;
-        background: transparent;
-        border-inline-end: transparent !important;
-
-        > .${prefixCls}-menu-item-only-child, .${prefixCls}-menu-submenu-title {
-          width: 100%;
-          margin: 0 !important;
-          border-block-start: none;
-          border-radius: 0;
-
-          &:active {
-            color: ${token.colorText};
-            background-color: ${token.colorFill};
-          }
+      .${prefixCls}-drawer {
+        &-mask {
+          ${staticStylish.blur};
+          background-color: color-mix(in srgb, ${cssVar$1.colorBgLayout} 50%, transparent);
         }
 
-        .${prefixCls}-menu-item-only-child:first-child {
-          border-block-start: none;
+        &-content-wrapper {
+          box-shadow: none;
         }
-
-        .${prefixCls}-menu-submenu-title[aria-expanded='true'] {
-          a {
-            font-weight: 600;
-            color: ${token.colorText} !important;
-          }
+      }
+    `,
+		drawerRootFullscreen: css$1`
+      inset-block-start: 0;
+
+      :focus-visible {
+        outline: none;
+      }
+
+      .${prefixCls}-drawer {
+        &-mask {
+          ${staticStylish.blur};
+          background-color: color-mix(in srgb, ${cssVar$1.colorBgLayout} 50%, transparent);
         }
 
-        .${prefixCls}-menu-item-group-title {
-          padding-block: 8px;
-
-          font-size: 12px;
-          font-weight: 500;
-          line-height: 1;
-          text-overflow: ellipsis;
-          text-transform: uppercase;
-          white-space: nowrap;
-
-          background: ${token.colorFillSecondary};
+        &-content-wrapper {
+          box-shadow: none;
         }
+      }
+    `,
+		fillRect: css$1`
+      flex: 1;
+      width: 100%;
+      border-block-start: none;
+    `,
+		menu: css$1`
+      padding-block-start: var(--burger-menu-padding-top, 0);
+      border-inline-end: transparent !important;
+      background: transparent;
 
-        .${prefixCls}-menu-item {
-          width: calc(100% - 16px) !important;
-          margin: 8px !important;
-          border-radius: ${token.borderRadius}px;
+      > .${prefixCls}-menu-item-only-child, .${prefixCls}-menu-submenu-title {
+        width: 100%;
+        margin: 0 !important;
+        border-block-start: none;
+        border-radius: 0;
 
-          &:hover,
-          &:active {
-            color: ${token.colorText} !important;
-            background: ${token.colorFillSecondary} !important;
-          }
+        &:active {
+          color: ${cssVar$1.colorText};
+          background-color: ${cssVar$1.colorFill};
         }
+      }
 
-        .${prefixCls}-menu-item-active {
-          width: calc(100% - 16px) !important;
-          margin: 8px !important;
-          background: ${token.colorFillSecondary};
-          border-radius: ${token.borderRadius}px;
-        }
+      .${prefixCls}-menu-item-only-child:first-child {
+        border-block-start: none;
+      }
 
-        .${prefixCls}-menu-item-selected {
+      .${prefixCls}-menu-submenu-title[aria-expanded='true'] {
+        a {
           font-weight: 600;
-          color: ${token.colorBgLayout};
-          background: ${token.colorText};
-
-          &:hover,
-          &:active {
-            color: ${token.colorBgLayout} !important;
-            background: ${token.colorText} !important;
-          }
+          color: ${cssVar$1.colorText} !important;
+        }
+      }
+
+      .${prefixCls}-menu-item-group-title {
+        padding-block: 8px;
+
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 1;
+        text-overflow: ellipsis;
+        text-transform: uppercase;
+        white-space: nowrap;
+
+        background: ${cssVar$1.colorFillSecondary};
+      }
+
+      .${prefixCls}-menu-item {
+        width: calc(100% - 16px) !important;
+        margin: 8px !important;
+        border-radius: ${cssVar$1.borderRadius};
+
+        &:hover,
+        &:active {
+          color: ${cssVar$1.colorText} !important;
+          background: ${cssVar$1.colorFillSecondary} !important;
+        }
+      }
+
+      .${prefixCls}-menu-item-active {
+        width: calc(100% - 16px) !important;
+        margin: 8px !important;
+        border-radius: ${cssVar$1.borderRadius};
+        background: ${cssVar$1.colorFillSecondary};
+      }
+
+      .${prefixCls}-menu-item-selected {
+        font-weight: 600;
+        color: ${cssVar$1.colorBgLayout};
+        background: ${cssVar$1.colorText};
+
+        &:hover,
+        &:active {
+          color: ${cssVar$1.colorBgLayout} !important;
+          background: ${cssVar$1.colorText} !important;
         }
-      `
+      }
+    `
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Burger/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Burger/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(\n  (\n    { token, css, stylish, prefixCls },\n    { fullscreen, headerHeight }: { fullscreen?: boolean; headerHeight: number },\n  ) => {\n    return {\n      container: css`\n        cursor: pointer;\n        width: ${token.controlHeight}px;\n        height: ${token.controlHeight}px;\n        border-radius: ${token.borderRadius}px;\n      `,\n      drawer: css`\n        &.${prefixCls}-drawer-content {\n          background: transparent;\n        }\n\n        .${prefixCls}-drawer-body {\n          display: flex;\n          flex-direction: column;\n        }\n      `,\n      drawerRoot: css`\n        inset-block-start: ${fullscreen ? 0 : headerHeight + 1}px;\n\n        :focus-visible {\n          outline: none;\n        }\n\n        .${prefixCls}-drawer {\n          &-mask {\n            ${stylish.blur};\n            background-color: ${rgba(token.colorBgLayout, 0.5)};\n          }\n\n          &-content-wrapper {\n            box-shadow: none;\n          }\n        }\n      `,\n\n      fillRect: css`\n        flex: 1;\n        width: 100%;\n        border-block-start: none;\n      `,\n\n      menu: css`\n        padding-block-start: ${fullscreen ? headerHeight : 0}px;\n        background: transparent;\n        border-inline-end: transparent !important;\n\n        > .${prefixCls}-menu-item-only-child, .${prefixCls}-menu-submenu-title {\n          width: 100%;\n          margin: 0 !important;\n          border-block-start: none;\n          border-radius: 0;\n\n          &:active {\n            color: ${token.colorText};\n            background-color: ${token.colorFill};\n          }\n        }\n\n        .${prefixCls}-menu-item-only-child:first-child {\n          border-block-start: none;\n        }\n\n        .${prefixCls}-menu-submenu-title[aria-expanded='true'] {\n          a {\n            font-weight: 600;\n            color: ${token.colorText} !important;\n          }\n        }\n\n        .${prefixCls}-menu-item-group-title {\n          padding-block: 8px;\n\n          font-size: 12px;\n          font-weight: 500;\n          line-height: 1;\n          text-overflow: ellipsis;\n          text-transform: uppercase;\n          white-space: nowrap;\n\n          background: ${token.colorFillSecondary};\n        }\n\n        .${prefixCls}-menu-item {\n          width: calc(100% - 16px) !important;\n          margin: 8px !important;\n          border-radius: ${token.borderRadius}px;\n\n          &:hover,\n          &:active {\n            color: ${token.colorText} !important;\n            background: ${token.colorFillSecondary} !important;\n          }\n        }\n\n        .${prefixCls}-menu-item-active {\n          width: calc(100% - 16px) !important;\n          margin: 8px !important;\n          background: ${token.colorFillSecondary};\n          border-radius: ${token.borderRadius}px;\n        }\n\n        .${prefixCls}-menu-item-selected {\n          font-weight: 600;\n          color: ${token.colorBgLayout};\n          background: ${token.colorText};\n\n          &:hover,\n          &:active {\n            color: ${token.colorBgLayout} !important;\n            background: ${token.colorText} !important;\n          }\n        }\n      `,\n    };\n  },\n);\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,OAAO,YAAK,SAAS,aACvB,EAAE,YAAY,mBACX;AACH,QAAO;EACL,WAAW,KAAG;;iBAEH,MAAM,cAAc;kBACnB,MAAM,cAAc;yBACb,MAAM,aAAa;;EAEtC,QAAQ,KAAG;YACL,UAAU;;;;WAIX,UAAU;;;;;EAKf,YAAY,KAAG;6BACQ,aAAa,IAAI,eAAe,EAAE;;;;;;WAMpD,UAAU;;cAEP,QAAQ,KAAK;gCACK,KAAK,MAAM,eAAe,GAAI,CAAC;;;;;;;;EASzD,UAAU,KAAG;;;;;EAMb,MAAM,KAAG;+BACgB,aAAa,eAAe,EAAE;;;;aAIhD,UAAU,0BAA0B,UAAU;;;;;;;qBAOtC,MAAM,UAAU;gCACL,MAAM,UAAU;;;;WAIrC,UAAU;;;;WAIV,UAAU;;;qBAGA,MAAM,UAAU;;;;WAI1B,UAAU;;;;;;;;;;wBAUG,MAAM,mBAAmB;;;WAGtC,UAAU;;;2BAGM,MAAM,aAAa;;;;qBAIzB,MAAM,UAAU;0BACX,MAAM,mBAAmB;;;;WAIxC,UAAU;;;wBAGG,MAAM,mBAAmB;2BACtB,MAAM,aAAa;;;WAGnC,UAAU;;mBAEF,MAAM,cAAc;wBACf,MAAM,UAAU;;;;qBAInB,MAAM,cAAc;0BACf,MAAM,UAAU;;;;EAIrC;EAEJ"}
+{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/Burger/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    container: css`\n      cursor: pointer;\n      width: ${cssVar.controlHeight};\n      height: ${cssVar.controlHeight};\n      border-radius: ${cssVar.borderRadius};\n    `,\n    drawer: css`\n      &.${prefixCls}-drawer-content {\n        background: transparent;\n      }\n\n      .${prefixCls}-drawer-body {\n        display: flex;\n        flex-direction: column;\n      }\n    `,\n    drawerRoot: css`\n      inset-block-start: var(--burger-drawer-top, calc(var(--burger-header-height, 64px) + 1px));\n\n      :focus-visible {\n        outline: none;\n      }\n\n      .${prefixCls}-drawer {\n        &-mask {\n          ${lobeStaticStylish.blur};\n          background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 50%, transparent);\n        }\n\n        &-content-wrapper {\n          box-shadow: none;\n        }\n      }\n    `,\n    drawerRootFullscreen: css`\n      inset-block-start: 0;\n\n      :focus-visible {\n        outline: none;\n      }\n\n      .${prefixCls}-drawer {\n        &-mask {\n          ${lobeStaticStylish.blur};\n          background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 50%, transparent);\n        }\n\n        &-content-wrapper {\n          box-shadow: none;\n        }\n      }\n    `,\n\n    fillRect: css`\n      flex: 1;\n      width: 100%;\n      border-block-start: none;\n    `,\n\n    menu: css`\n      padding-block-start: var(--burger-menu-padding-top, 0);\n      border-inline-end: transparent !important;\n      background: transparent;\n\n      > .${prefixCls}-menu-item-only-child, .${prefixCls}-menu-submenu-title {\n        width: 100%;\n        margin: 0 !important;\n        border-block-start: none;\n        border-radius: 0;\n\n        &:active {\n          color: ${cssVar.colorText};\n          background-color: ${cssVar.colorFill};\n        }\n      }\n\n      .${prefixCls}-menu-item-only-child:first-child {\n        border-block-start: none;\n      }\n\n      .${prefixCls}-menu-submenu-title[aria-expanded='true'] {\n        a {\n          font-weight: 600;\n          color: ${cssVar.colorText} !important;\n        }\n      }\n\n      .${prefixCls}-menu-item-group-title {\n        padding-block: 8px;\n\n        font-size: 12px;\n        font-weight: 500;\n        line-height: 1;\n        text-overflow: ellipsis;\n        text-transform: uppercase;\n        white-space: nowrap;\n\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      .${prefixCls}-menu-item {\n        width: calc(100% - 16px) !important;\n        margin: 8px !important;\n        border-radius: ${cssVar.borderRadius};\n\n        &:hover,\n        &:active {\n          color: ${cssVar.colorText} !important;\n          background: ${cssVar.colorFillSecondary} !important;\n        }\n      }\n\n      .${prefixCls}-menu-item-active {\n        width: calc(100% - 16px) !important;\n        margin: 8px !important;\n        border-radius: ${cssVar.borderRadius};\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      .${prefixCls}-menu-item-selected {\n        font-weight: 600;\n        color: ${cssVar.colorBgLayout};\n        background: ${cssVar.colorText};\n\n        &:hover,\n        &:active {\n          color: ${cssVar.colorBgLayout} !important;\n          background: ${cssVar.colorText} !important;\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;;AAIA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,WAAW,KAAG;;eAEHA,SAAO,cAAc;gBACpBA,SAAO,cAAc;uBACdA,SAAO,aAAa;;EAEvC,QAAQ,KAAG;UACL,UAAU;;;;SAIX,UAAU;;;;;EAKf,YAAY,KAAG;;;;;;;SAOV,UAAU;;YAEPC,cAAkB,KAAK;iDACcD,SAAO,cAAc;;;;;;;;EAQlE,sBAAsB,KAAG;;;;;;;SAOpB,UAAU;;YAEPC,cAAkB,KAAK;iDACcD,SAAO,cAAc;;;;;;;;EASlE,UAAU,KAAG;;;;;EAMb,MAAM,KAAG;;;;;WAKF,UAAU,0BAA0B,UAAU;;;;;;;mBAOtCA,SAAO,UAAU;8BACNA,SAAO,UAAU;;;;SAItC,UAAU;;;;SAIV,UAAU;;;mBAGAA,SAAO,UAAU;;;;SAI3B,UAAU;;;;;;;;;;sBAUGA,SAAO,mBAAmB;;;SAGvC,UAAU;;;yBAGMA,SAAO,aAAa;;;;mBAI1BA,SAAO,UAAU;wBACZA,SAAO,mBAAmB;;;;SAIzC,UAAU;;;yBAGMA,SAAO,aAAa;sBACvBA,SAAO,mBAAmB;;;SAGvC,UAAU;;iBAEFA,SAAO,cAAc;sBAChBA,SAAO,UAAU;;;;mBAIpBA,SAAO,cAAc;wBAChBA,SAAO,UAAU;;;;EAItC;EACD"}

package/es/Button/Button.mjs

@@ -1,34 +1,19 @@
 'use client';
 
 import Icon_default from "../Icon/Icon.mjs";
-import { useStyles } from "./style.mjs";
-import { isValidElement, useMemo } from "react";
+import { variants } from "./style.mjs";
+import { isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 import { Loader2Icon } from "lucide-react";
 
 //#region src/Button/Button.tsx
 const Button$1 = ({ icon, variant, glass, shadow, loading, className, type, color, danger, children, iconProps, ref, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
-	const defaultVariant = type ? void 0 : variant || (theme.isDarkMode ? "filled" : "outlined");
+	const { isDarkMode } = useThemeMode();
+	const defaultVariant = type ? void 0 : variant || (isDarkMode ? "filled" : "outlined");
 	return /* @__PURE__ */ jsx(Button, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: {
-				glass: false,
-				shadow: false
-			},
-			variants: {
-				glass: {
-					false: null,
-					true: styles.glass
-				},
-				shadow: {
-					false: null,
-					true: styles.shadow
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			glass,
 			shadow
 		}), className),

package/es/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["Button: FC<ButtonProps>","AntdButton","Icon","Button"],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport { Button as AntdButton } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { Loader2Icon } from 'lucide-react';\nimport { type FC, isValidElement, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useStyles } from './style';\nimport type { ButtonProps } from './type';\n\nconst Button: FC<ButtonProps> = ({\n  icon,\n  variant,\n  glass,\n  shadow,\n  loading,\n  className,\n  type,\n  color,\n  danger,\n  children,\n  iconProps,\n  ref,\n  ...rest\n}) => {\n  const { styles, cx, theme } = useStyles();\n\n  const defaultVariant = type ? undefined : variant || (theme.isDarkMode ? 'filled' : 'outlined');\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          glass: false,\n          shadow: false,\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\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    <AntdButton\n      className={cx(\n        variants({\n          glass,\n          shadow,\n        }),\n        className,\n      )}\n      color={color || (defaultVariant === 'filled' ? 'default' : undefined)}\n      danger={danger}\n      icon={\n        icon &&\n        (isValidElement(icon) ? (\n          icon\n        ) : (\n          <Icon icon={icon} {...iconProps} size={iconProps?.size || { size: '1.2em' }} />\n        ))\n      }\n      loading={\n        loading\n          ? {\n              icon: (\n                <Icon\n                  icon={Loader2Icon}\n                  {...iconProps}\n                  size={iconProps?.size || { size: '1.2em' }}\n                  spin\n                />\n              ),\n            }\n          : false\n      }\n      ref={ref}\n      type={type}\n      variant={defaultVariant}\n      {...rest}\n    >\n      {children}\n    </AntdButton>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,YAA2B,EAC/B,MACA,SACA,OACA,QACA,SACA,WACA,MACA,OACA,QACA,UACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CAEzC,MAAM,iBAAiB,OAAO,SAAY,YAAY,MAAM,aAAa,WAAW;AAyBpF,QACE,oBAACC;EACC,WAAW,GAzBE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB;IACf,OAAO;IACP,QAAQ;IACT;GAED,UAAU;IACR,OAAO;KACL,OAAO;KACP,MAAM,OAAO;KACd;IACD,QAAQ;KACN,OAAO;KACP,MAAM,OAAO;KACd;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAKc;GACP;GACA;GACD,CAAC,EACF,UACD;EACD,OAAO,UAAU,mBAAmB,WAAW,YAAY;EACnD;EACR,MACE,SACC,eAAe,KAAK,GACnB,OAEA,oBAACC;GAAW;GAAM,GAAI;GAAW,MAAM,WAAW,QAAQ,EAAE,MAAM,SAAS;IAAI;EAGnF,SACE,UACI,EACE,MACE,oBAACA;GACC,MAAM;GACN,GAAI;GACJ,MAAM,WAAW,QAAQ,EAAE,MAAM,SAAS;GAC1C;IACA,EAEL,GACD;EAED;EACC;EACN,SAAS;EACT,GAAI;EAEH;GACU;;AAIjB,qBAAeC"}
+{"version":3,"file":"Button.mjs","names":["Button: FC<ButtonProps>","AntdButton","Icon","Button"],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport { Button as AntdButton } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { Loader2Icon } from 'lucide-react';\nimport { type FC, isValidElement } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport type { ButtonProps } from './type';\n\nconst Button: FC<ButtonProps> = ({\n  icon,\n  variant,\n  glass,\n  shadow,\n  loading,\n  className,\n  type,\n  color,\n  danger,\n  children,\n  iconProps,\n  ref,\n  ...rest\n}) => {\n  const { isDarkMode } = useThemeMode();\n\n  const defaultVariant = type ? undefined : variant || (isDarkMode ? 'filled' : 'outlined');\n\n  return (\n    <AntdButton\n      className={cx(\n        variants({\n          glass,\n          shadow,\n        }),\n        className,\n      )}\n      color={color || (defaultVariant === 'filled' ? 'default' : undefined)}\n      danger={danger}\n      icon={\n        icon &&\n        (isValidElement(icon) ? (\n          icon\n        ) : (\n          <Icon icon={icon} {...iconProps} size={iconProps?.size || { size: '1.2em' }} />\n        ))\n      }\n      loading={\n        loading\n          ? {\n              icon: (\n                <Icon\n                  icon={Loader2Icon}\n                  {...iconProps}\n                  size={iconProps?.size || { size: '1.2em' }}\n                  spin\n                />\n              ),\n            }\n          : false\n      }\n      ref={ref}\n      type={type}\n      variant={defaultVariant}\n      {...rest}\n    >\n      {children}\n    </AntdButton>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,YAA2B,EAC/B,MACA,SACA,OACA,QACA,SACA,WACA,MACA,OACA,QACA,UACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CAErC,MAAM,iBAAiB,OAAO,SAAY,YAAY,aAAa,WAAW;AAE9E,QACE,oBAACC;EACC,WAAW,GACT,SAAS;GACP;GACA;GACD,CAAC,EACF,UACD;EACD,OAAO,UAAU,mBAAmB,WAAW,YAAY;EACnD;EACR,MACE,SACC,eAAe,KAAK,GACnB,OAEA,oBAACC;GAAW;GAAM,GAAI;GAAW,MAAM,WAAW,QAAQ,EAAE,MAAM,SAAS;IAAI;EAGnF,SACE,UACI,EACE,MACE,oBAACA;GACC,MAAM;GACN,GAAI;GACJ,MAAM,WAAW,QAAQ,EAAE,MAAM,SAAS;GAC1C;IACA,EAEL,GACD;EAED;EACC;EACN,SAAS;EACT,GAAI;EAEH;GACU;;AAIjB,qBAAeC"}

package/es/Button/style.mjs

@@ -1,22 +1,40 @@
-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/Button/style.ts
-const useStyles = createStyles(({ css: css$1, token, stylish, prefixCls }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		glass: stylish.blur,
+		glass: staticStylish.blur,
 		root: css$1`
-      &.${prefixCls}-btn {
-        > .${prefixCls}-btn-icon {
+      &[class*='ant-btn'] {
+        > [class*='ant-btn-icon'] {
           display: flex;
         }
       }
     `,
 		shadow: css$1`
-      box-shadow: ${token.boxShadowTertiary} !important;
+      box-shadow: ${cssVar$1.boxShadowTertiary} !important;
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		glass: false,
+		shadow: false
+	},
+	variants: {
+		glass: {
+			false: null,
+			true: styles.glass
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/Button/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Button/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, stylish, prefixCls }) => {\n  return {\n    glass: stylish.blur,\n    root: css`\n      &.${prefixCls}-btn {\n        > .${prefixCls}-btn-icon {\n          display: flex;\n        }\n      }\n    `,\n    shadow: css`\n      box-shadow: ${token.boxShadowTertiary} !important;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,SAAS,gBAAgB;AAC5E,QAAO;EACL,OAAO,QAAQ;EACf,MAAM,KAAG;UACH,UAAU;aACP,UAAU;;;;;EAKnB,QAAQ,KAAG;oBACK,MAAM,kBAAkB;;EAEzC;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Button/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    glass: lobeStaticStylish.blur,\n    root: css`\n      &[class*='ant-btn'] {\n        > [class*='ant-btn-icon'] {\n          display: flex;\n        }\n      }\n    `,\n    shadow: css`\n      box-shadow: ${cssVar.boxShadowTertiary} !important;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    glass: false,\n    shadow: false,\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\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,OAAOA,cAAkB;EACzB,MAAM,KAAG;;;;;;;EAOT,QAAQ,KAAG;oBACKC,SAAO,kBAAkB;;EAE1C;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,OAAO;EACP,QAAQ;EACT;CAED,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Checkbox/Checkbox.mjs

@@ -1,14 +1,14 @@
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Block_default from "../Block/Block.mjs";
 import Text_default from "../Text/Text.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
 import { CheckIcon, Minus } from "lucide-react";
 
 //#region src/Checkbox/Checkbox.tsx
 const Checkbox = ({ checked, defaultChecked, onChange, size = 16, className, style, children, textProps, backgroundColor, classNames, styles: customStyles, shape = "square", disabled, indeterminate, ...rest }) => {
-	const { styles, cx } = useStyles();
 	const [value, setValue] = useMergeState(defaultChecked || false, {
 		defaultValue: defaultChecked,
 		onChange,

package/es/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["Checkbox: FC<CheckboxProps>","checkboxStyles: CSSProperties","Block","Flexbox","Text"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckIcon, Minus } from 'lucide-react';\nimport type { CSSProperties, FC, MouseEvent } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Text from '@/Text';\n\nimport { useStyles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox: FC<CheckboxProps> = ({\n  checked,\n  defaultChecked,\n  onChange,\n  size = 16,\n  className,\n  style,\n  children,\n  textProps,\n  backgroundColor,\n  classNames,\n  styles: customStyles,\n  shape = 'square',\n  disabled,\n  indeterminate,\n  ...rest\n}) => {\n  const { styles, cx } = useStyles();\n  const [value, setValue] = useMergeState(defaultChecked || false, {\n    defaultValue: defaultChecked,\n    onChange,\n    value: checked,\n  });\n\n  const checkboxStyles: CSSProperties = {\n    borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n    ...style,\n    ...customStyles?.checkbox,\n  };\n\n  const handleClick = (e?: MouseEvent) => {\n    if (!disabled) {\n      e?.preventDefault();\n      setValue(!value);\n    }\n  };\n\n  const isIndeterminate = indeterminate;\n  const isChecked = !isIndeterminate && value;\n\n  const checkIcon = (\n    <Block\n      align={'center'}\n      className={cx(\n        styles.root,\n        isChecked && styles.checked,\n        isIndeterminate && styles.indeterminate,\n        disabled && styles.disabled,\n        className,\n        classNames?.checkbox,\n      )}\n      flex={'none'}\n      height={size}\n      justify={'center'}\n      onClick={handleClick}\n      style={\n        backgroundColor && (isChecked || isIndeterminate)\n          ? { backgroundColor, borderColor: backgroundColor, ...checkboxStyles }\n          : { ...checkboxStyles }\n      }\n      variant={'outlined'}\n      width={size}\n      {...rest}\n    >\n      {isIndeterminate ? (\n        <Minus\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : isChecked ? (\n        <CheckIcon\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : null}\n    </Block>\n  );\n\n  if (!children) return checkIcon;\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={classNames?.wrapper}\n      gap={Math.floor(size / 2)}\n      horizontal\n      onClick={handleClick}\n      style={{\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        userSelect: 'none',\n        ...customStyles?.wrapper,\n      }}\n    >\n      {checkIcon}\n      <Text\n        as={'span'}\n        className={cx(classNames?.text)}\n        style={customStyles?.text}\n        {...textProps}\n        type={disabled ? 'secondary' : textProps?.type}\n      >\n        {children}\n      </Text>\n    </Flexbox>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAWA,MAAMA,YAA+B,EACnC,SACA,gBACA,UACA,OAAO,IACP,WACA,OACA,UACA,WACA,iBACA,YACA,QAAQ,cACR,QAAQ,UACR,UACA,eACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;CAClC,MAAM,CAAC,OAAO,YAAY,cAAc,kBAAkB,OAAO;EAC/D,cAAc;EACd;EACA,OAAO;EACR,CAAC;CAEF,MAAMC,iBAAgC;EACpC,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,EAAE,CAAC,OAAO;EAC3E,GAAG;EACH,GAAG,cAAc;EAClB;CAED,MAAM,eAAe,MAAmB;AACtC,MAAI,CAAC,UAAU;AACb,MAAG,gBAAgB;AACnB,YAAS,CAAC,MAAM;;;CAIpB,MAAM,kBAAkB;CACxB,MAAM,YAAY,CAAC,mBAAmB;CAEtC,MAAM,YACJ,oBAACC;EACC,OAAO;EACP,WAAW,GACT,OAAO,MACP,aAAa,OAAO,SACpB,mBAAmB,OAAO,eAC1B,YAAY,OAAO,UACnB,WACA,YAAY,SACb;EACD,MAAM;EACN,QAAQ;EACR,SAAS;EACT,SAAS;EACT,OACE,oBAAoB,aAAa,mBAC7B;GAAE;GAAiB,aAAa;GAAiB,GAAG;GAAgB,GACpE,EAAE,GAAG,gBAAgB;EAE3B,SAAS;EACT,OAAO;EACP,GAAI;YAEH,kBACC,oBAAC;GACO;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IACtD;IACD,GACA,YACF,oBAAC;GACO;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IACtD;IACD,GACA;GACE;AAGV,KAAI,CAAC,SAAU,QAAO;AAEtB,QACE,qBAACC;EACC,OAAO;EACP,WAAW,YAAY;EACvB,KAAK,KAAK,MAAM,OAAO,EAAE;EACzB;EACA,SAAS;EACT,OAAO;GACL,QAAQ,WAAW,gBAAgB;GACnC,YAAY;GACZ,GAAG,cAAc;GAClB;aAEA,WACD,oBAACC;GACC,IAAI;GACJ,WAAW,GAAG,YAAY,KAAK;GAC/B,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;IACI;GACC;;AAId,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"Checkbox.mjs","names":["Checkbox: FC<CheckboxProps>","checkboxStyles: CSSProperties","Block","Flexbox","Text"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport type { CSSProperties, FC, MouseEvent } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox: FC<CheckboxProps> = ({\n  checked,\n  defaultChecked,\n  onChange,\n  size = 16,\n  className,\n  style,\n  children,\n  textProps,\n  backgroundColor,\n  classNames,\n  styles: customStyles,\n  shape = 'square',\n  disabled,\n  indeterminate,\n  ...rest\n}) => {\n  const [value, setValue] = useMergeState(defaultChecked || false, {\n    defaultValue: defaultChecked,\n    onChange,\n    value: checked,\n  });\n\n  const checkboxStyles: CSSProperties = {\n    borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n    ...style,\n    ...customStyles?.checkbox,\n  };\n\n  const handleClick = (e?: MouseEvent) => {\n    if (!disabled) {\n      e?.preventDefault();\n      setValue(!value);\n    }\n  };\n\n  const isIndeterminate = indeterminate;\n  const isChecked = !isIndeterminate && value;\n\n  const checkIcon = (\n    <Block\n      align={'center'}\n      className={cx(\n        styles.root,\n        isChecked && styles.checked,\n        isIndeterminate && styles.indeterminate,\n        disabled && styles.disabled,\n        className,\n        classNames?.checkbox,\n      )}\n      flex={'none'}\n      height={size}\n      justify={'center'}\n      onClick={handleClick}\n      style={\n        backgroundColor && (isChecked || isIndeterminate)\n          ? { backgroundColor, borderColor: backgroundColor, ...checkboxStyles }\n          : { ...checkboxStyles }\n      }\n      variant={'outlined'}\n      width={size}\n      {...rest}\n    >\n      {isIndeterminate ? (\n        <Minus\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : isChecked ? (\n        <CheckIcon\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : null}\n    </Block>\n  );\n\n  if (!children) return checkIcon;\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={classNames?.wrapper}\n      gap={Math.floor(size / 2)}\n      horizontal\n      onClick={handleClick}\n      style={{\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        userSelect: 'none',\n        ...customStyles?.wrapper,\n      }}\n    >\n      {checkIcon}\n      <Text\n        as={'span'}\n        className={cx(classNames?.text)}\n        style={customStyles?.text}\n        {...textProps}\n        type={disabled ? 'secondary' : textProps?.type}\n      >\n        {children}\n      </Text>\n    </Flexbox>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;AAYA,MAAMA,YAA+B,EACnC,SACA,gBACA,UACA,OAAO,IACP,WACA,OACA,UACA,WACA,iBACA,YACA,QAAQ,cACR,QAAQ,UACR,UACA,eACA,GAAG,WACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc,kBAAkB,OAAO;EAC/D,cAAc;EACd;EACA,OAAO;EACR,CAAC;CAEF,MAAMC,iBAAgC;EACpC,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,EAAE,CAAC,OAAO;EAC3E,GAAG;EACH,GAAG,cAAc;EAClB;CAED,MAAM,eAAe,MAAmB;AACtC,MAAI,CAAC,UAAU;AACb,MAAG,gBAAgB;AACnB,YAAS,CAAC,MAAM;;;CAIpB,MAAM,kBAAkB;CACxB,MAAM,YAAY,CAAC,mBAAmB;CAEtC,MAAM,YACJ,oBAACC;EACC,OAAO;EACP,WAAW,GACT,OAAO,MACP,aAAa,OAAO,SACpB,mBAAmB,OAAO,eAC1B,YAAY,OAAO,UACnB,WACA,YAAY,SACb;EACD,MAAM;EACN,QAAQ;EACR,SAAS;EACT,SAAS;EACT,OACE,oBAAoB,aAAa,mBAC7B;GAAE;GAAiB,aAAa;GAAiB,GAAG;GAAgB,GACpE,EAAE,GAAG,gBAAgB;EAE3B,SAAS;EACT,OAAO;EACP,GAAI;YAEH,kBACC,oBAAC;GACO;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IACtD;IACD,GACA,YACF,oBAAC;GACO;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IACtD;IACD,GACA;GACE;AAGV,KAAI,CAAC,SAAU,QAAO;AAEtB,QACE,qBAACC;EACC,OAAO;EACP,WAAW,YAAY;EACvB,KAAK,KAAK,MAAM,OAAO,EAAE;EACzB;EACA,SAAS;EACT,OAAO;GACL,QAAQ,WAAW,gBAAgB;GACnC,YAAY;GACZ,GAAG,cAAc;GAClB;aAEA,WACD,oBAACC;GACC,IAAI;GACJ,WAAW,GAAG,YAAY,KAAK;GAC/B,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;IACI;GACC;;AAId,SAAS,cAAc;AAEvB,uBAAe"}