@lobehub/ui 4.3.2 → 4.3.3

package/es/ColorSwatches/ColorSwatches.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatches.mjs","names":["ColorSwatches: FC<ColorSwatchesProps>","Flexbox","Tooltip","Center","Icon"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { readableColor, rgba } from 'polished';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\n\nimport { useStyles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useMergeState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n  const { cx, styles, theme } = useStyles(size);\n\n  const isCustomActive = useMemo(\n    () => active && active !== theme.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors, theme.colorPrimary],\n  );\n\n  return (\n    <Flexbox gap={6} horizontal ref={ref} style={{ flexWrap: 'wrap', ...style }} {...rest}>\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || theme.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          const isTransparent = c.color === 'transparent' || chroma(c.color).alpha() === 0;\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                className={cx(\n                  styles.container,\n                  isTransparent && styles.transparent,\n                  isActive && styles.active,\n                )}\n                onClick={() => setActive(c.color || undefined)}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,\n                }}\n              >\n                {isActive && (\n                  <Icon\n                    color={rgba(readableColor(color), 0.33)}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <ColorPicker\n            arrow={false}\n            className={cx(\n              styles.picker,\n              enableColorSwatches && styles.conic,\n              isCustomActive && styles.active,\n            )}\n            defaultValue={theme.colorPrimary}\n            disabledAlpha\n            format={'hex'}\n            onChangeComplete={(c) => {\n              if (c.toHexString() === theme.colorPrimary) {\n                setActive('');\n              } else {\n                setActive(c.toHexString());\n              }\n            }}\n            presets={\n              enableColorSwatches\n                ? undefined\n                : [\n                    {\n                      colors: colors.map((c) => c.color),\n                      label: texts?.presets || 'Presets',\n                    },\n                  ]\n            }\n            style={{\n              borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,\n            }}\n            value={enableColorSwatches ? undefined : active}\n          />\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAMA,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,cAAc,cAAc;EACtD;EACA;EACA;EACD,CAAC;CACF,MAAM,EAAE,IAAI,QAAQ,UAAU,UAAU,KAAK;CAE7C,MAAM,iBAAiB,cACf,UAAU,WAAW,MAAM,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,OAAO,EACxF;EAAC;EAAQ;EAAQ,MAAM;EAAa,CACrC;AAED,QACE,qBAACC;EAAQ,KAAK;EAAG;EAAgB;EAAK,OAAO;GAAE,UAAU;GAAQ,GAAG;GAAO;EAAE,GAAI;aAC9E,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,MAAM;GAC/B,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GACpD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK;AAC/E,UACE,oBAACC;IAA0B,OAAO,EAAE;cAClC,oBAACC;KACC,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,OACpB;KACD,eAAe,UAAU,EAAE,SAAS,OAAU;KAC9C,OAAO;MACL,YAAY,gBAAgB,SAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,MAAM;MAClD;eAEA,YACC,oBAACC;MACC,OAAO,KAAK,cAAc,MAAM,EAAE,IAAK;MACvC,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;OAAG;MAClC,OAAO,EACL,eAAe,QAChB;OACD;MAEG;MAvBG,GAAG,OAAO,EAwBd;IAEZ,EACH,qBACC,oBAACF;GAAQ,OAAO,OAAO,UAAU;aAC/B,oBAAC;IACC,OAAO;IACP,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,OAC1B;IACD,cAAc,MAAM;IACpB;IACA,QAAQ;IACR,mBAAmB,MAAM;AACvB,SAAI,EAAE,aAAa,KAAK,MAAM,aAC5B,WAAU,GAAG;SAEb,WAAU,EAAE,aAAa,CAAC;;IAG9B,SACE,sBACI,SACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,MAAM;KAClC,OAAO,OAAO,WAAW;KAC1B,CACF;IAEP,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,MAAM,cAClD;IACD,OAAO,sBAAsB,SAAY;KACzC;IACM;GAEJ;;AAId,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"ColorSwatches.mjs","names":["ColorSwatches: FC<ColorSwatchesProps>","Flexbox","Tooltip","Center","Icon"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { readableColor, rgba } from 'polished';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\n\nimport { styles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const [active, setActive] = useMergeState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      gap={6}\n      horizontal\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || theme.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          // Get actual color value for readableColor (CSS variables can't be parsed)\n          const actualColorForReadable = c.color?.startsWith('var(') ? theme.colorPrimary : color;\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                className={cx(\n                  styles.container,\n                  isTransparent && styles.transparent,\n                  isActive && styles.active,\n                )}\n                onClick={() => setActive(c.color || undefined)}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n              >\n                {isActive && (\n                  <Icon\n                    color={rgba(readableColor(actualColorForReadable), 0.33)}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <ColorPicker\n            arrow={false}\n            className={cx(\n              styles.picker,\n              enableColorSwatches && styles.conic,\n              isCustomActive && styles.active,\n            )}\n            defaultValue={cssVar.colorPrimary}\n            disabledAlpha\n            format={'hex'}\n            onChangeComplete={(c) => {\n              if (c.toHexString() === cssVar.colorPrimary) {\n                setActive('');\n              } else {\n                setActive(c.toHexString());\n              }\n            }}\n            presets={\n              enableColorSwatches\n                ? undefined\n                : [\n                    {\n                      colors: colors.map((c) => c.color),\n                      label: texts?.presets || 'Presets',\n                    },\n                  ]\n            }\n            style={{\n              borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n            }}\n            value={enableColorSwatches ? undefined : active}\n          />\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAMA,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,CAAC,QAAQ,aAAa,cAAc,cAAc;EACtD;EACA;EACA;EACD,CAAC;CAGF,MAAM,eAAe,eACZ,EACL,yBAAyB,GAAG,KAAK,KAClC,GACD,CAAC,KAAK,CACP;CAED,MAAM,iBAAiB,cACf,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,OAAO,EACzF,CAAC,QAAQ,OAAO,CACjB;AAED,QACE,qBAACC;EACC,KAAK;EACL;EACK;EACL,OAAO;GACL,GAAG;GACH,UAAU;GACV,GAAG;GACJ;EACD,GAAI;aAEH,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,MAAM;GAC/B,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GAEpD,MAAM,gBACJ,EAAE,UAAU,iBACX,EAAE,SACD,CAAC,EAAE,MAAM,WAAW,OAAO,WACpB;AACL,QAAI;AACF,YAAO,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK;YAC7B;AACN,YAAO;;OAEP;GAER,MAAM,yBAAyB,EAAE,OAAO,WAAW,OAAO,GAAG,MAAM,eAAe;AAClF,UACE,oBAACC;IAA0B,OAAO,EAAE;cAClC,oBAACC;KACC,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,OACpB;KACD,eAAe,UAAU,EAAE,SAAS,OAAU;KAC9C,OAAO;MACL,YAAY,gBAAgB,SAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;MACnD;eAEA,YACC,oBAACC;MACC,OAAO,KAAK,cAAc,uBAAuB,EAAE,IAAK;MACxD,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;OAAG;MAClC,OAAO,EACL,eAAe,QAChB;OACD;MAEG;MAvBG,GAAG,OAAO,EAwBd;IAEZ,EACH,qBACC,oBAACF;GAAQ,OAAO,OAAO,UAAU;aAC/B,oBAAC;IACC,OAAO;IACP,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,OAC1B;IACD,cAAc,OAAO;IACrB;IACA,QAAQ;IACR,mBAAmB,MAAM;AACvB,SAAI,EAAE,aAAa,KAAK,OAAO,aAC7B,WAAU,GAAG;SAEb,WAAU,EAAE,aAAa,CAAC;;IAG9B,SACE,sBACI,SACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,MAAM;KAClC,OAAO,OAAO,WAAW;KAC1B,CACF;IAEP,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,OAAO,cACnD;IACD,OAAO,sBAAsB,SAAY;KACzC;IACM;GAEJ;;AAId,cAAc,cAAc;AAE5B,4BAAe"}

package/es/ColorSwatches/style.mjs

@@ -1,26 +1,27 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/ColorSwatches/style.ts
-const useStyles = createStyles(({ css: css$1, token, prefixCls }, size) => {
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		active: css$1`
-      box-shadow: inset 0 0 0 1px ${token.colorFill};
+      box-shadow: inset 0 0 0 1px ${cssVar$1.colorFill};
     `,
 		conic: css$1`
       background: conic-gradient(
-        ${token.red},
-        ${token.volcano},
-        ${token.orange},
-        ${token.gold},
-        ${token.yellow},
-        ${token.lime},
-        ${token.green},
-        ${token.cyan},
-        ${token.blue},
-        ${token.geekblue},
-        ${token.purple},
-        ${token.magenta},
-        ${token.red}
+        ${cssVar$1.red},
+        ${cssVar$1.volcano},
+        ${cssVar$1.orange},
+        ${cssVar$1.gold},
+        ${cssVar$1.yellow},
+        ${cssVar$1.lime},
+        ${cssVar$1.green},
+        ${cssVar$1.cyan},
+        ${cssVar$1.blue},
+        ${cssVar$1.geekblue},
+        ${cssVar$1.purple},
+        ${cssVar$1.magenta},
+        ${cssVar$1.red}
       );
       .${prefixCls}-color-picker-color-block {
         opacity: 0;
@@ -31,37 +32,37 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }, size) => {
 
       flex: none;
 
-      width: ${size}px;
-      min-width: ${size}px;
-      height: ${size}px;
-      min-height: ${size}px;
+      width: var(--color-swatches-size, 24px);
+      min-width: var(--color-swatches-size, 24px);
+      height: var(--color-swatches-size, 24px);
+      min-height: var(--color-swatches-size, 24px);
 
-      background: ${token.colorBgContainer};
-      box-shadow: inset 0 0 0 1px ${token.colorFillSecondary};
+      background: ${cssVar$1.colorBgContainer};
+      box-shadow: inset 0 0 0 1px ${cssVar$1.colorFillSecondary};
 
       &:hover {
         box-shadow:
           inset 0 0 0 1px rgba(0, 0, 0, 5%),
-          0 0 0 2px ${token.colorText};
+          0 0 0 2px ${cssVar$1.colorText};
       }
     `,
 		picker: css$1`
       overflow: hidden;
       flex: none;
 
-      width: ${size}px;
-      min-width: ${size}px;
-      height: ${size}px;
-      min-height: ${size}px;
+      width: var(--color-swatches-size, 24px);
+      min-width: var(--color-swatches-size, 24px);
+      height: var(--color-swatches-size, 24px);
+      min-height: var(--color-swatches-size, 24px);
       padding: 0;
-
       border: none;
-      box-shadow: inset 0 0 0 1px ${token.colorFillSecondary};
+
+      box-shadow: inset 0 0 0 1px ${cssVar$1.colorFillSecondary};
 
       &:hover {
         box-shadow:
-          inset 0 0 0 1px ${token.colorFillSecondary},
-          0 0 0 2px ${token.colorText};
+          inset 0 0 0 1px ${cssVar$1.colorFillSecondary},
+          0 0 0 2px ${cssVar$1.colorText};
       }
 
       .${prefixCls}-color-picker-color-block {
@@ -73,9 +74,9 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }, size) => {
     `,
 		transparent: css$1`
       background-image: conic-gradient(
-        ${token.colorFillSecondary} 25%,
+        ${cssVar$1.colorFillSecondary} 25%,
         transparent 25% 50%,
-        ${token.colorFillSecondary} 50% 75%,
+        ${cssVar$1.colorFillSecondary} 50% 75%,
         transparent 75% 100%
       );
       background-size: 50% 50%;
@@ -84,5 +85,5 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }, size) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/ColorSwatches/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ColorSwatches/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, prefixCls }, size: number) => {\n  return {\n    active: css`\n      box-shadow: inset 0 0 0 1px ${token.colorFill};\n    `,\n    conic: css`\n      background: conic-gradient(\n        ${token.red},\n        ${token.volcano},\n        ${token.orange},\n        ${token.gold},\n        ${token.yellow},\n        ${token.lime},\n        ${token.green},\n        ${token.cyan},\n        ${token.blue},\n        ${token.geekblue},\n        ${token.purple},\n        ${token.magenta},\n        ${token.red}\n      );\n      .${prefixCls}-color-picker-color-block {\n        opacity: 0;\n      }\n    `,\n\n    container: css`\n      cursor: pointer;\n\n      flex: none;\n\n      width: ${size}px;\n      min-width: ${size}px;\n      height: ${size}px;\n      min-height: ${size}px;\n\n      background: ${token.colorBgContainer};\n      box-shadow: inset 0 0 0 1px ${token.colorFillSecondary};\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px rgba(0, 0, 0, 5%),\n          0 0 0 2px ${token.colorText};\n      }\n    `,\n\n    picker: css`\n      overflow: hidden;\n      flex: none;\n\n      width: ${size}px;\n      min-width: ${size}px;\n      height: ${size}px;\n      min-height: ${size}px;\n      padding: 0;\n\n      border: none;\n      box-shadow: inset 0 0 0 1px ${token.colorFillSecondary};\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px ${token.colorFillSecondary},\n          0 0 0 2px ${token.colorText};\n      }\n\n      .${prefixCls}-color-picker-color-block {\n        width: 100%;\n        height: 100%;\n        border: none;\n        border-radius: inherit;\n      }\n    `,\n\n    transparent: css`\n      background-image: conic-gradient(\n        ${token.colorFillSecondary} 25%,\n        transparent 25% 50%,\n        ${token.colorFillSecondary} 50% 75%,\n        transparent 75% 100%\n      );\n      background-size: 50% 50%;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,aAAa,SAAiB;AACjF,QAAO;EACL,QAAQ,KAAG;oCACqB,MAAM,UAAU;;EAEhD,OAAO,KAAG;;UAEJ,MAAM,IAAI;UACV,MAAM,QAAQ;UACd,MAAM,OAAO;UACb,MAAM,KAAK;UACX,MAAM,OAAO;UACb,MAAM,KAAK;UACX,MAAM,MAAM;UACZ,MAAM,KAAK;UACX,MAAM,KAAK;UACX,MAAM,SAAS;UACf,MAAM,OAAO;UACb,MAAM,QAAQ;UACd,MAAM,IAAI;;SAEX,UAAU;;;;EAKf,WAAW,KAAG;;;;;eAKH,KAAK;mBACD,KAAK;gBACR,KAAK;oBACD,KAAK;;oBAEL,MAAM,iBAAiB;oCACP,MAAM,mBAAmB;;;;;sBAKvC,MAAM,UAAU;;;EAIlC,QAAQ,KAAG;;;;eAIA,KAAK;mBACD,KAAK;gBACR,KAAK;oBACD,KAAK;;;;oCAIW,MAAM,mBAAmB;;;;4BAIjC,MAAM,mBAAmB;sBAC/B,MAAM,UAAU;;;SAG7B,UAAU;;;;;;;EAQf,aAAa,KAAG;;UAEV,MAAM,mBAAmB;;UAEzB,MAAM,mBAAmB;;;;;EAKhC;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/ColorSwatches/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    active: css`\n      box-shadow: inset 0 0 0 1px ${cssVar.colorFill};\n    `,\n    conic: css`\n      background: conic-gradient(\n        ${cssVar.red},\n        ${cssVar.volcano},\n        ${cssVar.orange},\n        ${cssVar.gold},\n        ${cssVar.yellow},\n        ${cssVar.lime},\n        ${cssVar.green},\n        ${cssVar.cyan},\n        ${cssVar.blue},\n        ${cssVar.geekblue},\n        ${cssVar.purple},\n        ${cssVar.magenta},\n        ${cssVar.red}\n      );\n      .${prefixCls}-color-picker-color-block {\n        opacity: 0;\n      }\n    `,\n\n    container: css`\n      cursor: pointer;\n\n      flex: none;\n\n      width: var(--color-swatches-size, 24px);\n      min-width: var(--color-swatches-size, 24px);\n      height: var(--color-swatches-size, 24px);\n      min-height: var(--color-swatches-size, 24px);\n\n      background: ${cssVar.colorBgContainer};\n      box-shadow: inset 0 0 0 1px ${cssVar.colorFillSecondary};\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px rgba(0, 0, 0, 5%),\n          0 0 0 2px ${cssVar.colorText};\n      }\n    `,\n\n    picker: css`\n      overflow: hidden;\n      flex: none;\n\n      width: var(--color-swatches-size, 24px);\n      min-width: var(--color-swatches-size, 24px);\n      height: var(--color-swatches-size, 24px);\n      min-height: var(--color-swatches-size, 24px);\n      padding: 0;\n      border: none;\n\n      box-shadow: inset 0 0 0 1px ${cssVar.colorFillSecondary};\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px ${cssVar.colorFillSecondary},\n          0 0 0 2px ${cssVar.colorText};\n      }\n\n      .${prefixCls}-color-picker-color-block {\n        width: 100%;\n        height: 100%;\n        border: none;\n        border-radius: inherit;\n      }\n    `,\n\n    transparent: css`\n      background-image: conic-gradient(\n        ${cssVar.colorFillSecondary} 25%,\n        transparent 25% 50%,\n        ${cssVar.colorFillSecondary} 50% 75%,\n        transparent 75% 100%\n      );\n      background-size: 50% 50%;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,QAAQ,KAAG;oCACqBA,SAAO,UAAU;;EAEjD,OAAO,KAAG;;UAEJA,SAAO,IAAI;UACXA,SAAO,QAAQ;UACfA,SAAO,OAAO;UACdA,SAAO,KAAK;UACZA,SAAO,OAAO;UACdA,SAAO,KAAK;UACZA,SAAO,MAAM;UACbA,SAAO,KAAK;UACZA,SAAO,KAAK;UACZA,SAAO,SAAS;UAChBA,SAAO,OAAO;UACdA,SAAO,QAAQ;UACfA,SAAO,IAAI;;SAEZ,UAAU;;;;EAKf,WAAW,KAAG;;;;;;;;;;oBAUEA,SAAO,iBAAiB;oCACRA,SAAO,mBAAmB;;;;;sBAKxCA,SAAO,UAAU;;;EAInC,QAAQ,KAAG;;;;;;;;;;;oCAWqBA,SAAO,mBAAmB;;;;4BAIlCA,SAAO,mBAAmB;sBAChCA,SAAO,UAAU;;;SAG9B,UAAU;;;;;;;EAQf,aAAa,KAAG;;UAEVA,SAAO,mBAAmB;;UAE1BA,SAAO,mBAAmB;;;;;EAKjC;EACD"}

package/es/ConfigProvider/index.d.mts

@@ -1,7 +1,7 @@
 import { MotionComponentType } from "../MotionProvider/index.mjs";
 import { TranslationResourcesInput } from "../i18n/types.mjs";
 import { CDN, CdnApi } from "../utils/genCdnUrl.mjs";
-import * as react64 from "react";
+import * as react54 from "react";
 import { ElementType, ReactNode } from "react";
 
 //#region src/ConfigProvider/index.d.ts
@@ -19,7 +19,7 @@ interface ConfigProviderProps {
   motion: MotionComponentType;
   resources?: TranslationResourcesInput;
 }
-declare const ConfigProvider: react64.NamedExoticComponent<ConfigProviderProps>;
+declare const ConfigProvider: react54.NamedExoticComponent<ConfigProviderProps>;
 type CdnFn = ({
   pkg,
   version,

package/es/CopyButton/CopyButton.d.mts

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

package/es/DatePicker/DatePicker.d.mts

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

package/es/DatePicker/DatePicker.mjs

@@ -1,34 +1,20 @@
 '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 { DatePicker } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/DatePicker/DatePicker.tsx
 const DatePicker$1 = memo(({ variant, shadow, className, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(DatePicker, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: { shadow: false },
-			variants: {
-				variant: {
-					filled: styles.filled,
-					outlined: styles.outlined,
-					borderless: styles.borderless,
-					underlined: null
-				},
-				shadow: {
-					false: null,
-					true: styles.shadow
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			shadow,
-			variant: variant || (theme.isDarkMode ? "filled" : "outlined")
+			variant: variant || (isDarkMode ? "filled" : "outlined")
 		}), className),
-		variant: variant || (theme.isDarkMode ? "filled" : "outlined"),
+		variant: variant || (isDarkMode ? "filled" : "outlined"),
 		...rest
 	});
 });

package/es/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":["DatePicker","AntDatePicker"],"sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { DatePicker as AntDatePicker } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { useStyles } from './style';\nimport { DatePickerProps } from './type';\n\nconst DatePicker = memo<DatePickerProps>(({ variant, shadow, className, ...rest }) => {\n  const { styles, cx, theme } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          shadow: false,\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            underlined: null,\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    <AntDatePicker\n      className={cx(\n        variants({ shadow, variant: variant || (theme.isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      variant={variant || (theme.isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;AASA,MAAMA,eAAa,MAAuB,EAAE,SAAS,QAAQ,WAAW,GAAG,WAAW;CACpF,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;AA0BzC,QACE,oBAACC;EACC,WAAW,GA1BE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,QAAQ,OACT;GAED,UAAU;IACR,SAAS;KACP,QAAQ,OAAO;KACf,UAAU,OAAO;KACjB,YAAY,OAAO;KACnB,YAAY;KACb;IACD,QAAQ;KACN,OAAO;KACP,MAAM,OAAO;KACd;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAKc;GAAE;GAAQ,SAAS,YAAY,MAAM,aAAa,WAAW;GAAa,CAAC,EACpF,UACD;EACD,SAAS,YAAY,MAAM,aAAa,WAAW;EACnD,GAAI;GACJ;EAEJ;AAEF,aAAW,cAAc;AAEzB,yBAAeD"}
+{"version":3,"file":"DatePicker.mjs","names":["DatePicker","AntDatePicker"],"sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { DatePicker as AntDatePicker } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport { DatePickerProps } from './type';\n\nconst DatePicker = memo<DatePickerProps>(({ variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntDatePicker\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;AASA,MAAMA,eAAa,MAAuB,EAAE,SAAS,QAAQ,WAAW,GAAG,WAAW;CACpF,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC;EACC,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACD,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAEJ;AAEF,aAAW,cAAc;AAEzB,yBAAeD"}

package/es/DatePicker/style.mjs

@@ -1,16 +1,33 @@
-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/DatePicker/style.ts
-const useStyles = createStyles(({ css: css$1, stylish }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
-		borderless: stylish.variantBorderless,
-		filled: stylish.variantFilled,
-		outlined: stylish.variantOutlined,
+		borderless: staticStylish.variantBorderless,
+		filled: staticStylish.variantFilled,
+		outlined: staticStylish.variantOutlined,
 		root: css$1``,
-		shadow: stylish.shadow
+		shadow: staticStylish.shadow
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: { shadow: false },
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless,
+			underlined: null
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/DatePicker/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DatePicker/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, stylish }) => {\n  return {\n    borderless: stylish.variantBorderless,\n    filled: stylish.variantFilled,\n    outlined: stylish.variantOutlined,\n    root: css``,\n    shadow: stylish.shadow,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,cAAc;AAC1D,QAAO;EACL,YAAY,QAAQ;EACpB,QAAQ,QAAQ;EAChB,UAAU,QAAQ;EAClB,MAAM,KAAG;EACT,QAAQ,QAAQ;EACjB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/DatePicker/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 }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderless,\n    filled: lobeStaticStylish.variantFilled,\n    outlined: lobeStaticStylish.variantOutlined,\n    root: css``,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\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      underlined: null,\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,iBAAU;AACpD,QAAO;EACL,YAAYA,cAAkB;EAC9B,QAAQA,cAAkB;EAC1B,UAAUA,cAAkB;EAC5B,MAAM,KAAG;EACT,QAAQA,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,OACT;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;GACb;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/DraggablePanel/DraggablePanel.mjs

@@ -2,15 +2,16 @@
 
 import Center_default from "../Flex/Center.mjs";
 import Icon_default from "../Icon/Icon.mjs";
-import { useStyles } from "./style.mjs";
+import { handleVariants, panelVariants, styles, toggleVariants } from "./style.mjs";
 import { reversePlacement } from "./utils.mjs";
 import { memo, use, useCallback, useEffect, useMemo, useReducer, useRef, useTransition } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConfigProvider } from "antd";
+import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
-import { cva } from "class-variance-authority";
 import { useHover } from "ahooks";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import isEqual from "fast-deep-equal";
 import { Resizable } from "re-resizable";
 
 //#region src/DraggablePanel/DraggablePanel.tsx
@@ -52,12 +53,10 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 	const internalPlacement = useMemo(() => {
 		return direction === "rtl" && ["left", "right"].includes(placement) ? placement === "left" ? "right" : "left" : placement;
 	}, [direction, placement]);
-	const { styles, cx } = useStyles({
-		backgroundColor,
-		headerHeight,
-		showBorder,
-		showHandleWideArea
-	});
+	const cssVariables = useMemo(() => ({
+		"--draggable-panel-bg": backgroundColor || "",
+		"--draggable-panel-header-height": `${headerHeight}px`
+	}), [backgroundColor, headerHeight]);
 	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
@@ -89,54 +88,6 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 		};
 	}, []);
 	const canResizing = resize !== false && isExpand;
-	const variants = useMemo(() => cva(styles.root, {
-		compoundVariants: [
-			{
-				class: styles.bottomFloat,
-				mode: "float",
-				placement: "bottom"
-			},
-			{
-				class: styles.topFloat,
-				mode: "float",
-				placement: "top"
-			},
-			{
-				class: styles.leftFloat,
-				mode: "float",
-				placement: "left"
-			},
-			{
-				class: styles.rightFloat,
-				mode: "float",
-				placement: "right"
-			}
-		],
-		variants: {
-			placement: {
-				top: isExpand && styles.borderBottom,
-				right: isExpand && styles.borderLeft,
-				bottom: isExpand && styles.borderTop,
-				left: isExpand && styles.borderRight
-			},
-			mode: {
-				fixed: styles.fixed,
-				float: null
-			}
-		}
-	}), [styles, isExpand]);
-	const handleVariants = useMemo(() => cva(styles.handleRoot, { variants: { placement: {
-		bottom: styles.handleBottom,
-		left: styles.handleLeft,
-		right: styles.handleRight,
-		top: styles.handleTop
-	} } }), [styles]);
-	const toggleVariants = useMemo(() => cva(styles.toggleRoot, { variants: { placement: {
-		bottom: styles.toggleTop,
-		left: styles.toggleRight,
-		right: styles.toggleLeft,
-		top: styles.toggleBottom
-	} } }), [styles]);
 	const resizing = useMemo(() => ({
 		bottom: false,
 		bottomLeft: false,
@@ -207,7 +158,10 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 		setIsExpand
 	]);
 	const handle = useMemo(() => /* @__PURE__ */ jsx(Center_default, {
-		className: toggleVariants({ placement: internalPlacement }),
+		className: toggleVariants({
+			placement: internalPlacement,
+			showHandleWideArea
+		}),
 		style: { opacity: isExpand ? pin ? void 0 : 0 : showHandleWhenCollapsed ? 1 : 0 },
 		children: /* @__PURE__ */ jsx(Center_default, {
 			className: classNames?.handle,
@@ -264,6 +218,7 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 		onResizeStart: handleResizeStart,
 		onResizeStop: handleResizeStop,
 		style: {
+			...cssVariables,
 			opacity: isPending ? .95 : 1,
 			transition: state.isResizing ? "unset" : void 0,
 			...style
@@ -290,20 +245,22 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 	]);
 	if (fullscreen) return /* @__PURE__ */ jsx("div", {
 		className: cx(styles.fullscreen, className),
+		style: cssVariables,
 		children
 	});
 	return /* @__PURE__ */ jsxs("aside", {
-		className: cx(variants({
+		className: cx(panelVariants({
+			isExpand,
 			mode,
-			placement: internalPlacement
+			placement: internalPlacement,
+			showBorder
 		}), className),
 		dir,
 		ref,
+		style: cssVariables,
 		children: [expandable && state.showExpand && handle, destroyOnClose ? isExpand && inner : inner]
 	});
-}, (prevProps, nextProps) => {
-	return prevProps.placement === nextProps.placement && prevProps.mode === nextProps.mode && prevProps.expand === nextProps.expand && prevProps.pin === nextProps.pin && prevProps.fullscreen === nextProps.fullscreen && prevProps.size === nextProps.size && prevProps.defaultSize === nextProps.defaultSize && prevProps.minWidth === nextProps.minWidth && prevProps.minHeight === nextProps.minHeight && prevProps.maxWidth === nextProps.maxWidth && prevProps.maxHeight === nextProps.maxHeight && prevProps.expandable === nextProps.expandable && prevProps.resize === nextProps.resize && prevProps.showHandleWhenCollapsed === nextProps.showHandleWhenCollapsed && prevProps.destroyOnClose === nextProps.destroyOnClose && prevProps.showBorder === nextProps.showBorder && prevProps.showHandleHighlight === nextProps.showHandleHighlight && prevProps.showHandleWideArea === nextProps.showHandleWideArea && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.className === nextProps.className && prevProps.dir === nextProps.dir && prevProps.headerHeight === nextProps.headerHeight && prevProps.onSizeChange === nextProps.onSizeChange && prevProps.onSizeDragging === nextProps.onSizeDragging && prevProps.onExpandChange === nextProps.onExpandChange && prevProps.children === nextProps.children;
-});
+}, isEqual);
 DraggablePanel.displayName = "DraggablePanel";
 var DraggablePanel_default = DraggablePanel;
 

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState","defaultSize: Size","Center","Icon"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n  memo,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useTransition,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { useStyles } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { reversePlacement } from './utils';\n\n// Constants\nconst DEFAULT_HEIGHT = 180;\nconst DEFAULT_WIDTH = 280;\nconst DEFAULT_HEADER_HEIGHT = 0;\nconst DEFAULT_PIN = true;\nconst DEFAULT_MODE = 'fixed';\nconst DEFAULT_EXPANDABLE = true;\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_SHOW_HANDLE_WIDE_AREA = true;\n\n// State reducer for better state management\ninterface DraggablePanelState {\n  isResizing: boolean;\n  showExpand: boolean;\n}\n\ntype DraggablePanelAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { payload: boolean; type: 'SET_SHOW_EXPAND' };\n\nfunction draggablePanelReducer(\n  state: DraggablePanelState,\n  action: DraggablePanelAction,\n): DraggablePanelState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true, showExpand: false };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false, showExpand: true };\n    }\n    case 'SET_SHOW_EXPAND': {\n      return { ...state, showExpand: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    headerHeight = DEFAULT_HEADER_HEIGHT,\n    fullscreen,\n    maxHeight,\n    pin = DEFAULT_PIN,\n    mode = DEFAULT_MODE,\n    children,\n    placement = 'right',\n    resize,\n    style,\n    showBorder = true,\n    showHandleHighlight = false,\n    showHandleWideArea = DEFAULT_SHOW_HANDLE_WIDE_AREA,\n    backgroundColor,\n    size,\n    defaultSize: customizeDefaultSize,\n    minWidth,\n    minHeight,\n    maxWidth,\n    onSizeChange,\n    onSizeDragging,\n    expandable = DEFAULT_EXPANDABLE,\n    expand,\n    defaultExpand = DEFAULT_EXPAND,\n    onExpandChange,\n    className,\n    showHandleWhenCollapsed,\n    destroyOnClose,\n    styles: customStyles,\n    classNames,\n    dir,\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n    const isVertical = placement === 'top' || placement === 'bottom';\n    const [isPending, startTransition] = useTransition();\n\n    // Use ref for hover timeout to avoid memory leaks\n    const hoverTimeoutRef = useRef<any>(undefined);\n\n    // inherit direction from Ant Design ConfigProvider\n    const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n    const direction = dir ?? antdDirection;\n\n    // Handle RTL direction\n    const internalPlacement = useMemo(() => {\n      return direction === 'rtl' && ['left', 'right'].includes(placement)\n        ? placement === 'left'\n          ? 'right'\n          : 'left'\n        : placement;\n    }, [direction, placement]);\n\n    const { styles, cx } = useStyles({\n      backgroundColor,\n      headerHeight,\n      showBorder,\n      showHandleWideArea,\n    });\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Initialize state with useReducer for better performance\n    const initialState: DraggablePanelState = {\n      isResizing: false,\n      showExpand: true,\n    };\n\n    const [state, dispatch] = useReducer(draggablePanelReducer, initialState);\n\n    // Auto-expand on hover if not pinned with optimized transition\n    useEffect(() => {\n      if (pin) return;\n\n      // Clear previous timeout\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current);\n      }\n\n      if (isHovering && !isExpand) {\n        startTransition(() => {\n          setIsExpand(true);\n        });\n      } else if (!isHovering && isExpand) {\n        // Add a small delay before collapsing to prevent flickering\n        hoverTimeoutRef.current = setTimeout(() => {\n          startTransition(() => {\n            setIsExpand(false);\n          });\n        }, 150);\n      }\n    }, [pin, isHovering, isExpand, setIsExpand]);\n\n    // Cleanup timeout on unmount\n    useEffect(() => {\n      return () => {\n        if (hoverTimeoutRef.current) {\n          clearTimeout(hoverTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    const canResizing = resize !== false && isExpand;\n\n    // Style variants for the panel\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          compoundVariants: [\n            {\n              class: styles.bottomFloat,\n              mode: 'float',\n              placement: 'bottom',\n            },\n            {\n              class: styles.topFloat,\n              mode: 'float',\n              placement: 'top',\n            },\n            {\n              class: styles.leftFloat,\n              mode: 'float',\n              placement: 'left',\n            },\n            {\n              class: styles.rightFloat,\n              mode: 'float',\n              placement: 'right',\n            },\n          ],\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            placement: {\n              top: isExpand && styles.borderBottom,\n              right: isExpand && styles.borderLeft,\n              bottom: isExpand && styles.borderTop,\n              left: isExpand && styles.borderRight,\n            },\n            mode: {\n              fixed: styles.fixed,\n              float: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles, isExpand],\n    );\n\n    // Style variants for the handle\n    const handleVariants = useMemo(\n      () =>\n        cva(styles.handleRoot, {\n          variants: {\n            placement: {\n              bottom: styles.handleBottom,\n              left: styles.handleLeft,\n              right: styles.handleRight,\n              top: styles.handleTop,\n            },\n          },\n        }),\n      [styles],\n    );\n\n    // Style variants for the toggle button\n    const toggleVariants = useMemo(\n      () =>\n        cva(styles.toggleRoot, {\n          variants: {\n            placement: {\n              bottom: styles.toggleTop,\n              left: styles.toggleRight,\n              right: styles.toggleLeft,\n              top: styles.toggleBottom,\n            },\n          },\n        }),\n      [styles],\n    );\n\n    // Configure resizing handles\n    const resizing = useMemo(\n      () => ({\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: false,\n        right: false,\n        top: false,\n        topLeft: false,\n        topRight: false,\n        [reversePlacement(internalPlacement)]: true,\n        ...(resize as Enable),\n      }),\n      [internalPlacement, resize],\n    );\n\n    // Calculate default size based on orientation\n    const defaultSize: Size = useMemo(() => {\n      if (isVertical)\n        return {\n          height: DEFAULT_HEIGHT,\n          width: '100%',\n          ...customizeDefaultSize,\n        };\n\n      return {\n        height: '100%',\n        width: DEFAULT_WIDTH,\n        ...customizeDefaultSize,\n      };\n    }, [isVertical, customizeDefaultSize]);\n\n    // Determine appropriate size props based on expand state\n    const sizeProps = useMemo(() => {\n      if (!isExpand) {\n        return isVertical\n          ? { minHeight: 0, size: { height: 0 } }\n          : { minWidth: 0, size: { width: 0 } };\n      }\n\n      return {\n        defaultSize,\n        maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : maxHeight,\n        maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : maxWidth,\n        minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : minHeight,\n        minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : minWidth,\n        size: size as Size,\n      };\n    }, [isExpand, isVertical, defaultSize, maxHeight, maxWidth, minHeight, minWidth, size]);\n\n    // Determine the appropriate arrow icon based on placement\n    const Arrow = useMemo(() => {\n      switch (internalPlacement) {\n        case 'top': {\n          return ChevronDown;\n        }\n        case 'bottom': {\n          return ChevronUp;\n        }\n        case 'right': {\n          return ChevronLeft;\n        }\n        case 'left': {\n          return ChevronRight;\n        }\n        default: {\n          return ChevronLeft;\n        }\n      }\n    }, [internalPlacement]);\n\n    // Toggle expand state with transition for better performance\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      startTransition(() => {\n        setIsExpand(!isExpand);\n      });\n    }, [expandable, isExpand, setIsExpand]);\n\n    // Toggle handle component\n    const handle = useMemo(\n      () => (\n        <Center\n          className={toggleVariants({ placement: internalPlacement })}\n          style={{ opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0 }}\n        >\n          <Center\n            className={classNames?.handle}\n            onClick={toggleExpand}\n            style={customStyles?.handle}\n          >\n            <Icon\n              className={styles.handlerIcon}\n              icon={Arrow}\n              size={16}\n              style={{\n                marginBottom: internalPlacement === 'top' ? 4 : 0,\n                marginLeft: internalPlacement === 'right' ? 4 : 0,\n                marginRight: internalPlacement === 'left' ? 4 : 0,\n                marginTop: internalPlacement === 'bottom' ? 4 : 0,\n                transform: `rotate(${isExpand ? 180 : 0}deg)`,\n                transition: 'transform 0.3s ease',\n              }}\n            />\n          </Center>\n        </Center>\n      ),\n      [\n        toggleVariants,\n        internalPlacement,\n        isExpand,\n        pin,\n        showHandleWhenCollapsed,\n        classNames?.handle,\n        toggleExpand,\n        customStyles?.handle,\n        styles.handlerIcon,\n        Arrow,\n      ],\n    );\n\n    // Handle resize events with memoization\n    const handleResize = useCallback(\n      (_: unknown, _direction: unknown, reference_: HTMLElement, delta: NumberSize) => {\n        onSizeDragging?.(delta, {\n          height: reference_.style.height,\n          width: reference_.style.width,\n        });\n      },\n      [onSizeDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop = useCallback(\n      (e: unknown, direction: unknown, reference_: HTMLElement, delta: NumberSize) => {\n        dispatch({ type: 'STOP_RESIZE' });\n        onSizeChange?.(delta, {\n          height: reference_.style.height,\n          width: reference_.style.width,\n        });\n      },\n      [onSizeChange],\n    );\n\n    // Main panel content\n    const inner = useMemo(\n      () => (\n        <Resizable\n          {...sizeProps}\n          className={cx(styles.panel, classNames?.content)}\n          enable={canResizing ? (resizing as Enable) : undefined}\n          handleClasses={\n            canResizing\n              ? {\n                  [reversePlacement(internalPlacement)]: cx(\n                    handleVariants({\n                      placement: reversePlacement(internalPlacement),\n                    }),\n                    showHandleHighlight && styles.handleHighlight,\n                  ),\n                }\n              : {}\n          }\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n          style={{\n            opacity: isPending ? 0.95 : 1,\n            transition: state.isResizing ? 'unset' : undefined,\n            ...style,\n          }}\n        >\n          {children}\n        </Resizable>\n      ),\n      [\n        sizeProps,\n        styles.panel,\n        classNames?.content,\n        canResizing,\n        resizing,\n        internalPlacement,\n        handleVariants,\n        showHandleHighlight,\n        styles.handleHighlight,\n        handleResize,\n        handleResizeStart,\n        handleResizeStop,\n        state.isResizing,\n        isPending,\n        style,\n        children,\n        cx,\n      ],\n    );\n\n    // For fullscreen mode, return a simpler layout\n    if (fullscreen) {\n      return <div className={cx(styles.fullscreen, className)}>{children}</div>;\n    }\n\n    return (\n      <aside\n        className={cx(variants({ mode, placement: internalPlacement }), className)}\n        dir={dir}\n        ref={ref}\n      >\n        {expandable && state.showExpand && handle}\n        {destroyOnClose ? isExpand && inner : inner}\n      </aside>\n    );\n  },\n  // Custom comparison function to avoid unnecessary re-renders\n  (prevProps, nextProps) => {\n    // Only re-render if critical props change\n    return (\n      prevProps.placement === nextProps.placement &&\n      prevProps.mode === nextProps.mode &&\n      prevProps.expand === nextProps.expand &&\n      prevProps.pin === nextProps.pin &&\n      prevProps.fullscreen === nextProps.fullscreen &&\n      prevProps.size === nextProps.size &&\n      prevProps.defaultSize === nextProps.defaultSize &&\n      prevProps.minWidth === nextProps.minWidth &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxWidth === nextProps.maxWidth &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.expandable === nextProps.expandable &&\n      prevProps.resize === nextProps.resize &&\n      prevProps.showHandleWhenCollapsed === nextProps.showHandleWhenCollapsed &&\n      prevProps.destroyOnClose === nextProps.destroyOnClose &&\n      prevProps.showBorder === nextProps.showBorder &&\n      prevProps.showHandleHighlight === nextProps.showHandleHighlight &&\n      prevProps.showHandleWideArea === nextProps.showHandleWideArea &&\n      prevProps.backgroundColor === nextProps.backgroundColor &&\n      prevProps.className === nextProps.className &&\n      prevProps.dir === nextProps.dir &&\n      prevProps.headerHeight === nextProps.headerHeight &&\n      prevProps.onSizeChange === nextProps.onSizeChange &&\n      prevProps.onSizeDragging === nextProps.onSizeDragging &&\n      prevProps.onExpandChange === nextProps.onExpandChange &&\n      prevProps.children === nextProps.children\n    );\n  },\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}
+{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState","defaultSize: Size","Center","Icon"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n  memo,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useTransition,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { reversePlacement } from './utils';\n\n// Constants\nconst DEFAULT_HEIGHT = 180;\nconst DEFAULT_WIDTH = 280;\nconst DEFAULT_HEADER_HEIGHT = 0;\nconst DEFAULT_PIN = true;\nconst DEFAULT_MODE = 'fixed';\nconst DEFAULT_EXPANDABLE = true;\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_SHOW_HANDLE_WIDE_AREA = true;\n\n// State reducer for better state management\ninterface DraggablePanelState {\n  isResizing: boolean;\n  showExpand: boolean;\n}\n\ntype DraggablePanelAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { payload: boolean; type: 'SET_SHOW_EXPAND' };\n\nfunction draggablePanelReducer(\n  state: DraggablePanelState,\n  action: DraggablePanelAction,\n): DraggablePanelState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true, showExpand: false };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false, showExpand: true };\n    }\n    case 'SET_SHOW_EXPAND': {\n      return { ...state, showExpand: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    headerHeight = DEFAULT_HEADER_HEIGHT,\n    fullscreen,\n    maxHeight,\n    pin = DEFAULT_PIN,\n    mode = DEFAULT_MODE,\n    children,\n    placement = 'right',\n    resize,\n    style,\n    showBorder = true,\n    showHandleHighlight = false,\n    showHandleWideArea = DEFAULT_SHOW_HANDLE_WIDE_AREA,\n    backgroundColor,\n    size,\n    defaultSize: customizeDefaultSize,\n    minWidth,\n    minHeight,\n    maxWidth,\n    onSizeChange,\n    onSizeDragging,\n    expandable = DEFAULT_EXPANDABLE,\n    expand,\n    defaultExpand = DEFAULT_EXPAND,\n    onExpandChange,\n    className,\n    showHandleWhenCollapsed,\n    destroyOnClose,\n    styles: customStyles,\n    classNames,\n    dir,\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n    const isVertical = placement === 'top' || placement === 'bottom';\n    const [isPending, startTransition] = useTransition();\n\n    // Use ref for hover timeout to avoid memory leaks\n    const hoverTimeoutRef = useRef<any>(undefined);\n\n    // inherit direction from Ant Design ConfigProvider\n    const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n    const direction = dir ?? antdDirection;\n\n    // Handle RTL direction\n    const internalPlacement = useMemo(() => {\n      return direction === 'rtl' && ['left', 'right'].includes(placement)\n        ? placement === 'left'\n          ? 'right'\n          : 'left'\n        : placement;\n    }, [direction, placement]);\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-panel-bg': backgroundColor || '',\n        '--draggable-panel-header-height': `${headerHeight}px`,\n      }),\n      [backgroundColor, headerHeight],\n    );\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Initialize state with useReducer for better performance\n    const initialState: DraggablePanelState = {\n      isResizing: false,\n      showExpand: true,\n    };\n\n    const [state, dispatch] = useReducer(draggablePanelReducer, initialState);\n\n    // Auto-expand on hover if not pinned with optimized transition\n    useEffect(() => {\n      if (pin) return;\n\n      // Clear previous timeout\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current);\n      }\n\n      if (isHovering && !isExpand) {\n        startTransition(() => {\n          setIsExpand(true);\n        });\n      } else if (!isHovering && isExpand) {\n        // Add a small delay before collapsing to prevent flickering\n        hoverTimeoutRef.current = setTimeout(() => {\n          startTransition(() => {\n            setIsExpand(false);\n          });\n        }, 150);\n      }\n    }, [pin, isHovering, isExpand, setIsExpand]);\n\n    // Cleanup timeout on unmount\n    useEffect(() => {\n      return () => {\n        if (hoverTimeoutRef.current) {\n          clearTimeout(hoverTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    const canResizing = resize !== false && isExpand;\n\n    // Configure resizing handles\n    const resizing = useMemo(\n      () => ({\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: false,\n        right: false,\n        top: false,\n        topLeft: false,\n        topRight: false,\n        [reversePlacement(internalPlacement)]: true,\n        ...(resize as Enable),\n      }),\n      [internalPlacement, resize],\n    );\n\n    // Calculate default size based on orientation\n    const defaultSize: Size = useMemo(() => {\n      if (isVertical)\n        return {\n          height: DEFAULT_HEIGHT,\n          width: '100%',\n          ...customizeDefaultSize,\n        };\n\n      return {\n        height: '100%',\n        width: DEFAULT_WIDTH,\n        ...customizeDefaultSize,\n      };\n    }, [isVertical, customizeDefaultSize]);\n\n    // Determine appropriate size props based on expand state\n    const sizeProps = useMemo(() => {\n      if (!isExpand) {\n        return isVertical\n          ? { minHeight: 0, size: { height: 0 } }\n          : { minWidth: 0, size: { width: 0 } };\n      }\n\n      return {\n        defaultSize,\n        maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : maxHeight,\n        maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : maxWidth,\n        minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : minHeight,\n        minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : minWidth,\n        size: size as Size,\n      };\n    }, [isExpand, isVertical, defaultSize, maxHeight, maxWidth, minHeight, minWidth, size]);\n\n    // Determine the appropriate arrow icon based on placement\n    const Arrow = useMemo(() => {\n      switch (internalPlacement) {\n        case 'top': {\n          return ChevronDown;\n        }\n        case 'bottom': {\n          return ChevronUp;\n        }\n        case 'right': {\n          return ChevronLeft;\n        }\n        case 'left': {\n          return ChevronRight;\n        }\n        default: {\n          return ChevronLeft;\n        }\n      }\n    }, [internalPlacement]);\n\n    // Toggle expand state with transition for better performance\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      startTransition(() => {\n        setIsExpand(!isExpand);\n      });\n    }, [expandable, isExpand, setIsExpand]);\n\n    // Toggle handle component\n    const handle = useMemo(\n      () => (\n        <Center\n          className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n          style={{ opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0 }}\n        >\n          <Center\n            className={classNames?.handle}\n            onClick={toggleExpand}\n            style={customStyles?.handle}\n          >\n            <Icon\n              className={styles.handlerIcon}\n              icon={Arrow}\n              size={16}\n              style={{\n                marginBottom: internalPlacement === 'top' ? 4 : 0,\n                marginLeft: internalPlacement === 'right' ? 4 : 0,\n                marginRight: internalPlacement === 'left' ? 4 : 0,\n                marginTop: internalPlacement === 'bottom' ? 4 : 0,\n                transform: `rotate(${isExpand ? 180 : 0}deg)`,\n                transition: 'transform 0.3s ease',\n              }}\n            />\n          </Center>\n        </Center>\n      ),\n      [\n        toggleVariants,\n        internalPlacement,\n        isExpand,\n        pin,\n        showHandleWhenCollapsed,\n        classNames?.handle,\n        toggleExpand,\n        customStyles?.handle,\n        styles.handlerIcon,\n        Arrow,\n      ],\n    );\n\n    // Handle resize events with memoization\n    const handleResize = useCallback(\n      (_: unknown, _direction: unknown, reference_: HTMLElement, delta: NumberSize) => {\n        onSizeDragging?.(delta, {\n          height: reference_.style.height,\n          width: reference_.style.width,\n        });\n      },\n      [onSizeDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop = useCallback(\n      (e: unknown, direction: unknown, reference_: HTMLElement, delta: NumberSize) => {\n        dispatch({ type: 'STOP_RESIZE' });\n        onSizeChange?.(delta, {\n          height: reference_.style.height,\n          width: reference_.style.width,\n        });\n      },\n      [onSizeChange],\n    );\n\n    // Main panel content\n    const inner = useMemo(\n      () => (\n        <Resizable\n          {...sizeProps}\n          className={cx(styles.panel, classNames?.content)}\n          enable={canResizing ? (resizing as Enable) : undefined}\n          handleClasses={\n            canResizing\n              ? {\n                  [reversePlacement(internalPlacement)]: cx(\n                    handleVariants({\n                      placement: reversePlacement(internalPlacement),\n                    }),\n                    showHandleHighlight && styles.handleHighlight,\n                  ),\n                }\n              : {}\n          }\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n          style={{\n            ...cssVariables,\n            opacity: isPending ? 0.95 : 1,\n            transition: state.isResizing ? 'unset' : undefined,\n            ...style,\n          }}\n        >\n          {children}\n        </Resizable>\n      ),\n      [\n        sizeProps,\n        styles.panel,\n        classNames?.content,\n        canResizing,\n        resizing,\n        internalPlacement,\n        handleVariants,\n        showHandleHighlight,\n        styles.handleHighlight,\n        handleResize,\n        handleResizeStart,\n        handleResizeStop,\n        state.isResizing,\n        isPending,\n        style,\n        children,\n        cx,\n      ],\n    );\n\n    // For fullscreen mode, return a simpler layout\n    if (fullscreen) {\n      return (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    return (\n      <aside\n        className={cx(\n          panelVariants({\n            isExpand,\n            mode,\n            placement: internalPlacement,\n            showBorder,\n          }),\n          className,\n        )}\n        dir={dir}\n        ref={ref}\n        style={cssVariables}\n      >\n        {expandable && state.showExpand && handle}\n        {destroyOnClose ? isExpand && inner : inner}\n      </aside>\n    );\n  },\n  isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}

package/es/DraggablePanel/components/DraggablePanelBody.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react7 from "react";
+import * as react20 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelBody.d.ts
 type DraggablePanelBodyProps = DivProps;
-declare const DraggablePanelBody: react7.NamedExoticComponent<DivProps>;
+declare const DraggablePanelBody: react20.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelBody, DraggablePanelBodyProps };
 //# sourceMappingURL=DraggablePanelBody.d.mts.map

package/es/DraggablePanel/components/DraggablePanelBody.mjs

@@ -1,13 +1,13 @@
 'use client';
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/DraggablePanel/components/DraggablePanelBody.tsx
 const DraggablePanelBody = memo(({ className, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		className: cx(styles.body, className),
 		flex: 1,

package/es/DraggablePanel/components/DraggablePanelBody.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanelBody.mjs","names":["Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelBody.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nconst DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return <Flexbox className={cx(styles.body, className)} flex={1} {...rest} />;\n});\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport default DraggablePanelBody;\n"],"mappings":";;;;;;;;AAWA,MAAM,qBAAqB,MAA+B,EAAE,WAAW,GAAG,WAAW;CACnF,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QAAO,oBAACA;EAAQ,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,MAAM;EAAG,GAAI;GAAQ;EAC5E;AAEF,mBAAmB,cAAc;AAEjC,iCAAe"}
+{"version":3,"file":"DraggablePanelBody.mjs","names":["Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelBody.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { styles } from './style';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nconst DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, ...rest }) => {\n  return <Flexbox className={cx(styles.body, className)} flex={1} {...rest} />;\n});\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport default DraggablePanelBody;\n"],"mappings":";;;;;;;;;AAYA,MAAM,qBAAqB,MAA+B,EAAE,WAAW,GAAG,WAAW;AACnF,QAAO,oBAACA;EAAQ,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,MAAM;EAAG,GAAI;GAAQ;EAC5E;AAEF,mBAAmB,cAAc;AAEjC,iCAAe"}

package/es/DraggablePanel/components/DraggablePanelContainer.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react8 from "react";
+import * as react21 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelContainer.d.ts
 type DraggablePanelContainerProps = DivProps;
-declare const DraggablePanelContainer: react8.NamedExoticComponent<DivProps>;
+declare const DraggablePanelContainer: react21.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelContainer, DraggablePanelContainerProps };
 //# sourceMappingURL=DraggablePanelContainer.d.mts.map

package/es/DraggablePanel/components/DraggablePanelContainer.mjs

@@ -1,13 +1,13 @@
 'use client';
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/DraggablePanel/components/DraggablePanelContainer.tsx
 const DraggablePanelContainer = memo(({ className, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		className: cx(styles.container, className),
 		...rest

package/es/DraggablePanel/components/DraggablePanelContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanelContainer.mjs","names":["Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelContainer.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nconst DraggablePanelContainer = memo<DraggablePanelContainerProps>(({ className, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return <Flexbox className={cx(styles.container, className)} {...rest} />;\n});\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport default DraggablePanelContainer;\n"],"mappings":";;;;;;;;AAWA,MAAM,0BAA0B,MAAoC,EAAE,WAAW,GAAG,WAAW;CAC7F,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QAAO,oBAACA;EAAQ,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;GAAQ;EACxE;AAEF,wBAAwB,cAAc;AAEtC,sCAAe"}
+{"version":3,"file":"DraggablePanelContainer.mjs","names":["Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelContainer.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { styles } from './style';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nconst DraggablePanelContainer = memo<DraggablePanelContainerProps>(({ className, ...rest }) => {\n  return <Flexbox className={cx(styles.container, className)} {...rest} />;\n});\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport default DraggablePanelContainer;\n"],"mappings":";;;;;;;;;AAYA,MAAM,0BAA0B,MAAoC,EAAE,WAAW,GAAG,WAAW;AAC7F,QAAO,oBAACA;EAAQ,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;GAAQ;EACxE;AAEF,wBAAwB,cAAc;AAEtC,sCAAe"}