@lobehub/ui 3.4.2 → 3.4.3

package/es/Button/Button.mjs

@@ -0,0 +1,59 @@
+'use client';
+
+import Icon_default from "../Icon/Icon.mjs";
+import { useStyles } from "./style.mjs";
+import { Button } from "antd";
+import { isValidElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+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");
+	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])({
+			glass,
+			shadow
+		}), className),
+		color: color || (defaultVariant === "filled" ? "default" : void 0),
+		danger,
+		icon: icon && (isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon_default, {
+			icon,
+			...iconProps,
+			size: iconProps?.size || { size: "1.2em" }
+		})),
+		loading: loading ? { icon: /* @__PURE__ */ jsx(Icon_default, {
+			icon: Loader2Icon,
+			...iconProps,
+			size: iconProps?.size || { size: "1.2em" },
+			spin: true
+		}) } : false,
+		ref,
+		type,
+		variant: defaultVariant,
+		...rest,
+		children
+	});
+};
+var Button_default = Button$1;
+
+//#endregion
+export { Button_default as default };
+//# sourceMappingURL=Button.mjs.map

package/es/Button/Button.mjs.map

@@ -0,0 +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"}

package/es/Button/index.d.mts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "./type.mjs";
+import { Button } from "./Button.mjs";
+export { ButtonProps, Button as default };

package/es/Button/index.mjs

@@ -0,0 +1,3 @@
+import Button_default from "./Button.mjs";
+
+export { Button_default as default };

package/es/Button/style.mjs

@@ -0,0 +1,22 @@
+import { createStyles } from "antd-style";
+
+//#region src/Button/style.ts
+const useStyles = createStyles(({ css: css$1, token, stylish, prefixCls }) => {
+	return {
+		glass: stylish.blur,
+		root: css$1`
+      &.${prefixCls}-btn {
+        > .${prefixCls}-btn-icon {
+          display: flex;
+        }
+      }
+    `,
+		shadow: css$1`
+      box-shadow: ${token.boxShadowTertiary} !important;
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Button/style.mjs.map

@@ -0,0 +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"}

package/es/Button/type.d.mts

@@ -0,0 +1,16 @@
+import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
+import { ButtonProps } from "antd";
+import { Ref } from "react";
+
+//#region src/Button/type.d.ts
+interface ButtonProps$1 extends Omit<ButtonProps, 'icon'> {
+  glass?: boolean;
+  icon?: IconProps['icon'];
+  iconProps?: Partial<Omit<IconProps, 'icon'>>;
+  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+  shadow?: boolean;
+}
+//#endregion
+export { ButtonProps$1 as ButtonProps };
+//# sourceMappingURL=type.d.mts.map

package/es/CodeEditor/CodeEditor.d.mts

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

package/es/CodeEditor/CodeEditor.mjs

@@ -0,0 +1,65 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import SyntaxHighlighter_default from "../Highlighter/SyntaxHighlighter/index.mjs";
+import { memo, useMemo } from "react";
+import useMergeState from "use-merge-value";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/CodeEditor/CodeEditor.tsx
+const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultValue = "", onChange, placeholder = "", style, className, onValueChange, value, language = "markdown", variant = "borderless", width, height, flex, ref, ...rest }) => {
+	const { styles, cx, theme } = useStyles();
+	const [code, setCode] = useMergeState(defaultValue, {
+		defaultValue,
+		onChange: onValueChange,
+		value
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(useMemo(() => cva(styles.root, {
+			defaultVariants: { variant: "borderless" },
+			variants: { variant: {
+				filled: styles.filled,
+				outlined: styles.outlined,
+				borderless: styles.borderless
+			} }
+		}), [styles])({ variant }), className),
+		flex,
+		height,
+		style,
+		width,
+		children: [value ? /* @__PURE__ */ jsx(SyntaxHighlighter_default, {
+			className: cx(styles.highlight, classNames?.highlight),
+			language,
+			style: customStyles?.highlight,
+			variant,
+			children: value
+		}) : /* @__PURE__ */ jsx("pre", {
+			className: cx(styles.highlight, classNames?.highlight),
+			style: { color: theme.colorTextDescription },
+			children: placeholder || " "
+		}), /* @__PURE__ */ jsx("textarea", {
+			autoCapitalize: "off",
+			autoComplete: "off",
+			autoCorrect: "off",
+			autoFocus,
+			className: cx(styles.textarea, classNames?.textarea),
+			"data-gramm": false,
+			onChange: (e) => {
+				onChange?.(e);
+				setCode(e.target.value);
+			},
+			ref,
+			style: customStyles?.textarea,
+			value: code,
+			...rest
+		})]
+	});
+});
+CodeEditor.displayName = "CodeEditor";
+var CodeEditor_default = CodeEditor;
+
+//#endregion
+export { CodeEditor_default as default };
+//# sourceMappingURL=CodeEditor.mjs.map

package/es/CodeEditor/CodeEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.mjs","names":["Flexbox","SyntaxHighlighter"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { useStyles } from '@/CodeEditor/style';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\n\nimport { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const { styles, cx, theme } = useStyles();\n    const [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            variant: 'borderless',\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          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        flex={flex}\n        height={height}\n        style={style}\n        width={width}\n      >\n        {value ? (\n          <SyntaxHighlighter\n            className={cx(styles.highlight, classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n          >\n            {value}\n          </SyntaxHighlighter>\n        ) : (\n          <pre\n            className={cx(styles.highlight, classNames?.highlight)}\n            style={{\n              color: theme.colorTextDescription,\n            }}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          className={cx(styles.textarea, classNames?.textarea)}\n          data-gramm={false}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          ref={ref}\n          style={customStyles?.textarea}\n          value={code}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CACzC,MAAM,CAAC,MAAM,WAAW,cAAc,cAAc;EAClD;EACA,UAAU;EACV;EACD,CAAC;AAqBF,QACE,qBAACA;EACC,WAAW,GArBE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,SAAS,cACV;GAED,UAAU,EACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB,EACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B,EAAE,SAAS,CAAC,EAAE,UAAU;EACzC;EACE;EACD;EACA;aAEN,QACC,oBAACC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GAC5C;GACV,OAAO,cAAc;GACZ;aAER;IACiB,GAEpB,oBAAC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GACtD,OAAO,EACL,OAAO,MAAM,sBACd;aAEA,eAAe;IACZ,EAGR,oBAAC;GACC,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,WAAW,GAAG,OAAO,UAAU,YAAY,SAAS;GACpD,cAAY;GACZ,WAAW,MAAM;AACf,eAAW,EAAE;AACb,YAAQ,EAAE,OAAO,MAAM;;GAEpB;GACL,OAAO,cAAc;GACrB,OAAO;GACP,GAAI;IACJ;GACM;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}

package/es/CodeEditor/index.d.mts

@@ -0,0 +1,3 @@
+import { CodeEditorProps } from "./type.mjs";
+import { CodeEditor } from "./CodeEditor.mjs";
+export { CodeEditorProps, CodeEditor as default };

package/es/CodeEditor/index.mjs

@@ -0,0 +1,3 @@
+import CodeEditor_default from "./CodeEditor.mjs";
+
+export { CodeEditor_default as default };

package/es/CodeEditor/style.mjs

@@ -0,0 +1,87 @@
+import { createStyles } from "antd-style";
+
+//#region src/CodeEditor/style.ts
+const useStyles = createStyles(({ stylish, cx: cx$1, css: css$1, token }) => {
+	return {
+		borderless: cx$1(stylish.variantBorderlessWithoutHover, css$1`
+        border-radius: 0;
+
+        pre,
+        textarea {
+          padding: 0;
+        }
+      `),
+		filled: stylish.variantFilledWithoutHover,
+		highlight: css$1`
+      pointer-events: none;
+    `,
+		outlined: stylish.variantOutlinedWithoutHover,
+		root: css$1`
+      position: relative;
+
+      overflow: hidden auto;
+
+      width: 100%;
+      height: fit-content;
+
+      font-size: 12px;
+
+      border-radius: ${token.borderRadius}px;
+
+      pre,
+      textarea {
+        margin: 0;
+        padding: 16px;
+      }
+
+      textarea,
+      pre,
+      code {
+        overflow: hidden;
+
+        font-family: ${token.fontFamilyCode};
+        font-size: inherit;
+        line-height: inherit;
+        word-break: inherit;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+      }
+    `,
+		textarea: css$1`
+      resize: none;
+
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      overflow: hidden;
+
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+
+      color: transparent;
+      text-align: start;
+
+      background: transparent;
+      border: none;
+      outline: none;
+      caret-color: ${token.colorText};
+
+      &::placeholder {
+        color: ${token.colorTextQuaternary};
+      }
+
+      &:focus {
+        border: none;
+        outline: none;
+        box-shadow: none;
+      }
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/CodeEditor/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/CodeEditor/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ stylish, cx, css, token }) => {\n  return {\n    borderless: cx(\n      stylish.variantBorderlessWithoutHover,\n      css`\n        border-radius: 0;\n\n        pre,\n        textarea {\n          padding: 0;\n        }\n      `,\n    ),\n    filled: stylish.variantFilledWithoutHover,\n    highlight: css`\n      pointer-events: none;\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n\n      overflow: hidden auto;\n\n      width: 100%;\n      height: fit-content;\n\n      font-size: 12px;\n\n      border-radius: ${token.borderRadius}px;\n\n      pre,\n      textarea {\n        margin: 0;\n        padding: 16px;\n      }\n\n      textarea,\n      pre,\n      code {\n        overflow: hidden;\n\n        font-family: ${token.fontFamilyCode};\n        font-size: inherit;\n        line-height: inherit;\n        word-break: inherit;\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n    `,\n    textarea: css`\n      resize: none;\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      overflow: hidden;\n\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n\n      color: transparent;\n      text-align: start;\n\n      background: transparent;\n      border: none;\n      outline: none;\n      caret-color: ${token.colorText};\n\n      &::placeholder {\n        color: ${token.colorTextQuaternary};\n      }\n\n      &:focus {\n        border: none;\n        outline: none;\n        box-shadow: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,SAAS,UAAI,YAAK,YAAY;AACrE,QAAO;EACL,YAAYA,KACV,QAAQ,+BACR,KAAG;;;;;;;QAQJ;EACD,QAAQ,QAAQ;EAChB,WAAW,KAAG;;;EAGd,UAAU,QAAQ;EAClB,MAAM,KAAG;;;;;;;;;;uBAUU,MAAM,aAAa;;;;;;;;;;;;;uBAanB,MAAM,eAAe;;;;;;;;EAQxC,UAAU,KAAG;;;;;;;;;;;;;;;;;;;;qBAoBI,MAAM,UAAU;;;iBAGpB,MAAM,oBAAoB;;;;;;;;;EASxC;EACD"}

package/es/CodeEditor/type.d.mts

@@ -0,0 +1,27 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { TextAreaProps } from "../types/index.mjs";
+import { CSSProperties, Ref } from "react";
+
+//#region src/CodeEditor/type.d.ts
+interface CodeEditorProps extends TextAreaProps, Pick<FlexboxProps, 'width' | 'height' | 'flex'> {
+  classNames?: {
+    highlight?: string;
+    textarea?: string;
+  };
+  defaultValue?: string;
+  language: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  ref?: Ref<HTMLTextAreaElement>;
+  style?: CSSProperties;
+  styles?: {
+    highlight?: CSSProperties;
+    textarea?: CSSProperties;
+  };
+  value: string;
+  variant?: 'filled' | 'outlined' | 'borderless';
+}
+//#endregion
+export { CodeEditorProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Collapse/Collapse.d.mts

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

package/es/Collapse/Collapse.mjs

@@ -0,0 +1,114 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Icon_default from "../Icon/Icon.mjs";
+import { DEFAULT_PADDING, getPadding, useStyles } from "./style.mjs";
+import { Collapse, ConfigProvider } from "antd";
+import { isValidElement, memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+//#region src/Collapse/Collapse.tsx
+const Collapse$1 = memo(({ style, variant = "filled", gap = 0, className, padding = DEFAULT_PADDING, size, collapsible = true, items, styles: customStyles, classNames, ref, ...rest }) => {
+	const { cx, styles } = useStyles();
+	const variants = useMemo(() => cva(styles.root, {
+		compoundVariants: [{
+			class: styles.gapOutlined,
+			gap: true,
+			variant: "outlined"
+		}],
+		defaultVariants: {
+			collapsible: true,
+			gap: false
+		},
+		variants: {
+			variant: {
+				filled: styles.filled,
+				outlined: styles.outlined,
+				borderless: styles.borderless
+			},
+			gap: {
+				false: null,
+				true: styles.gapRoot
+			},
+			collapsible: {
+				false: styles.hideCollapsibleIcon,
+				true: null
+			}
+		}
+	}), [styles]);
+	const antdItems = useMemo(() => items.map(({ icon, desc, label, ...itemRest }) => {
+		let content = /* @__PURE__ */ jsx("div", {
+			className: cx(styles.title, !icon && !desc && classNames?.header, classNames?.title),
+			style: {
+				...!icon && !desc ? customStyles?.header : {},
+				...customStyles?.title
+			},
+			children: label
+		});
+		if (icon) content = /* @__PURE__ */ jsxs(FlexBasic_default, {
+			className: cx(styles.title, !desc && classNames?.header),
+			gap: 8,
+			horizontal: true,
+			style: desc ? void 0 : customStyles?.header,
+			children: [isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon_default, {
+				icon,
+				size: { size: "1.1em" }
+			}), content]
+		});
+		if (desc) content = /* @__PURE__ */ jsxs(FlexBasic_default, {
+			className: classNames?.header,
+			style: customStyles?.header,
+			children: [content, /* @__PURE__ */ jsx("div", {
+				className: cx(styles.desc, classNames?.desc),
+				style: customStyles?.desc,
+				children: desc
+			})]
+		});
+		return {
+			label: content,
+			...itemRest
+		};
+	}), [
+		items,
+		classNames,
+		customStyles,
+		styles
+	]);
+	return /* @__PURE__ */ jsx(ConfigProvider, {
+		theme: { components: { Collapse: {
+			contentPadding: getPadding(typeof padding === "object" ? padding?.body : padding),
+			headerPadding: getPadding(typeof padding === "object" ? padding?.header : padding)
+		} } },
+		children: /* @__PURE__ */ jsx(Collapse, {
+			className: cx(variants({
+				collapsible,
+				gap: !!gap,
+				variant
+			}), className),
+			collapsible: collapsible ? "header" : "icon",
+			expandIcon: ({ isActive }) => /* @__PURE__ */ jsx(Icon_default, {
+				className: styles.icon,
+				icon: ChevronDown,
+				size: 16,
+				style: { rotate: isActive ? void 0 : "-90deg" }
+			}),
+			ghost: true,
+			items: antdItems,
+			ref,
+			size,
+			style: {
+				gap,
+				...style
+			},
+			...rest
+		})
+	});
+});
+Collapse$1.displayName = "Collapse";
+var Collapse_default = Collapse$1;
+
+//#endregion
+export { Collapse_default as default };
+//# sourceMappingURL=Collapse.mjs.map

package/es/Collapse/Collapse.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.mjs","names":["Collapse","Flexbox","Icon","AntdCollapse"],"sources":["../../src/Collapse/Collapse.tsx"],"sourcesContent":["'use client';\n\nimport { Collapse as AntdCollapse, ConfigProvider } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { DEFAULT_PADDING, getPadding, useStyles } from './style';\nimport type { CollapseProps } from './type';\n\nconst Collapse = memo<CollapseProps>(\n  ({\n    style,\n    variant = 'filled',\n    gap = 0,\n    className,\n    padding = DEFAULT_PADDING,\n    size,\n    collapsible = true,\n    items,\n    styles: customStyles,\n    classNames,\n    ref,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          compoundVariants: [\n            {\n              class: styles.gapOutlined,\n              gap: true,\n              variant: 'outlined',\n            },\n          ],\n          defaultVariants: {\n            collapsible: true,\n            gap: 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            },\n            gap: {\n              false: null,\n              true: styles.gapRoot,\n            },\n            collapsible: {\n              false: styles.hideCollapsibleIcon,\n              true: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const antdItems = useMemo(\n      () =>\n        items.map(({ icon, desc, label, ...itemRest }) => {\n          let content = (\n            <div\n              className={cx(styles.title, !icon && !desc && classNames?.header, classNames?.title)}\n              style={{\n                ...(!icon && !desc ? customStyles?.header : {}),\n                ...customStyles?.title,\n              }}\n            >\n              {label}\n            </div>\n          );\n\n          if (icon) {\n            content = (\n              <Flexbox\n                className={cx(styles.title, !desc && classNames?.header)}\n                gap={8}\n                horizontal\n                style={desc ? undefined : customStyles?.header}\n              >\n                {isValidElement(icon) ? icon : <Icon icon={icon} size={{ size: '1.1em' }} />}\n                {content}\n              </Flexbox>\n            );\n          }\n\n          if (desc) {\n            content = (\n              <Flexbox className={classNames?.header} style={customStyles?.header}>\n                {content}\n                <div className={cx(styles.desc, classNames?.desc)} style={customStyles?.desc}>\n                  {desc}\n                </div>\n              </Flexbox>\n            );\n          }\n\n          return {\n            label: content,\n            ...itemRest,\n          };\n        }),\n      [items, classNames, customStyles, styles],\n    );\n\n    return (\n      <ConfigProvider\n        theme={{\n          components: {\n            Collapse: {\n              contentPadding: getPadding(typeof padding === 'object' ? padding?.body : padding),\n              headerPadding: getPadding(typeof padding === 'object' ? padding?.header : padding),\n            },\n          },\n        }}\n      >\n        <AntdCollapse\n          className={cx(variants({ collapsible, gap: !!gap, variant }), className)}\n          collapsible={collapsible ? 'header' : 'icon'}\n          expandIcon={({ isActive }) => (\n            <Icon\n              className={styles.icon}\n              icon={ChevronDown}\n              size={16}\n              style={{ rotate: isActive ? undefined : '-90deg' }}\n            />\n          )}\n          ghost\n          items={antdItems}\n          ref={ref}\n          size={size}\n          style={{\n            gap,\n            ...style,\n          }}\n          {...rest}\n        />\n      </ConfigProvider>\n    );\n  },\n);\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,aAAW,MACd,EACC,OACA,UAAU,UACV,MAAM,GACN,WACA,UAAU,iBACV,MACA,cAAc,MACd,OACA,QAAQ,cACR,YACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,kBAAkB,CAChB;GACE,OAAO,OAAO;GACd,KAAK;GACL,SAAS;GACV,CACF;EACD,iBAAiB;GACf,aAAa;GACb,KAAK;GACN;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,KAAK;IACH,OAAO;IACP,MAAM,OAAO;IACd;GACD,aAAa;IACX,OAAO,OAAO;IACd,MAAM;IACP;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,YAAY,cAEd,MAAM,KAAK,EAAE,MAAM,MAAM,OAAO,GAAG,eAAe;EAChD,IAAI,UACF,oBAAC;GACC,WAAW,GAAG,OAAO,OAAO,CAAC,QAAQ,CAAC,QAAQ,YAAY,QAAQ,YAAY,MAAM;GACpF,OAAO;IACL,GAAI,CAAC,QAAQ,CAAC,OAAO,cAAc,SAAS,EAAE;IAC9C,GAAG,cAAc;IAClB;aAEA;IACG;AAGR,MAAI,KACF,WACE,qBAACC;GACC,WAAW,GAAG,OAAO,OAAO,CAAC,QAAQ,YAAY,OAAO;GACxD,KAAK;GACL;GACA,OAAO,OAAO,SAAY,cAAc;cAEvC,eAAe,KAAK,GAAG,OAAO,oBAACC;IAAW;IAAM,MAAM,EAAE,MAAM,SAAS;KAAI,EAC3E;IACO;AAId,MAAI,KACF,WACE,qBAACD;GAAQ,WAAW,YAAY;GAAQ,OAAO,cAAc;cAC1D,SACD,oBAAC;IAAI,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;IAAE,OAAO,cAAc;cACrE;KACG;IACE;AAId,SAAO;GACL,OAAO;GACP,GAAG;GACJ;GACD,EACJ;EAAC;EAAO;EAAY;EAAc;EAAO,CAC1C;AAED,QACE,oBAAC;EACC,OAAO,EACL,YAAY,EACV,UAAU;GACR,gBAAgB,WAAW,OAAO,YAAY,WAAW,SAAS,OAAO,QAAQ;GACjF,eAAe,WAAW,OAAO,YAAY,WAAW,SAAS,SAAS,QAAQ;GACnF,EACF,EACF;YAED,oBAACE;GACC,WAAW,GAAG,SAAS;IAAE;IAAa,KAAK,CAAC,CAAC;IAAK;IAAS,CAAC,EAAE,UAAU;GACxE,aAAa,cAAc,WAAW;GACtC,aAAa,EAAE,eACb,oBAACD;IACC,WAAW,OAAO;IAClB,MAAM;IACN,MAAM;IACN,OAAO,EAAE,QAAQ,WAAW,SAAY,UAAU;KAClD;GAEJ;GACA,OAAO;GACF;GACC;GACN,OAAO;IACL;IACA,GAAG;IACJ;GACD,GAAI;IACJ;GACa;EAGtB;AAED,WAAS,cAAc;AAEvB,uBAAeF"}

package/es/Collapse/index.d.mts

@@ -0,0 +1,3 @@
+import { CollapseItemType, CollapseProps } from "./type.mjs";
+import { Collapse } from "./Collapse.mjs";
+export { CollapseItemType, CollapseProps, Collapse as default };

package/es/Collapse/index.mjs

@@ -0,0 +1,3 @@
+import Collapse_default from "./Collapse.mjs";
+
+export { Collapse_default as default };

package/es/Collapse/style.mjs

@@ -0,0 +1,140 @@
+import { createStyles } from "antd-style";
+
+//#region src/Collapse/style.ts
+const DEFAULT_PADDING = "12px 16px";
+const getPadding = (padding) => !padding && padding !== 0 ? DEFAULT_PADDING : `${typeof padding === "string" ? padding : `${padding}px`} !important`;
+const useStyles = createStyles(({ css: css$1, token, prefixCls, stylish, isDarkMode }) => {
+	return {
+		borderless: css$1`
+      &.${prefixCls}-collapse {
+        .${prefixCls}-collapse-header {
+          padding-inline: 0;
+        }
+        .${prefixCls}-collapse-content {
+          padding-inline: 0;
+          .${prefixCls}-collapse-content-box {
+            padding-inline: 0;
+          }
+        }
+      }
+    `,
+		desc: css$1`
+      font-size: 12px;
+      color: ${token.colorTextDescription};
+    `,
+		filled: css$1`
+      &.${prefixCls}-collapse {
+        .${prefixCls}-collapse-item {
+          background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary};
+          .${prefixCls}-collapse-content {
+            margin-inline: 3px;
+            margin-block-end: 3px;
+            border-radius: ${token.borderRadius}px;
+            ${stylish.variantOutlinedWithoutHover};
+            background: ${isDarkMode ? token.colorFillQuaternary : token.colorBgContainer};
+            ${isDarkMode ? void 0 : stylish.shadow};
+          }
+        }
+      }
+    `,
+		gapOutlined: css$1`
+      &.${prefixCls}-collapse {
+        background: transparent;
+        .${prefixCls}-collapse-item {
+          border: 1px solid ${token.colorFillSecondary};
+          background: ${token.colorBgContainer};
+        }
+
+        .${prefixCls}-collapse-item:not(:first-child) {
+          .${prefixCls}-collapse-header {
+            border-block-start: none;
+          }
+        }
+      }
+    `,
+		gapRoot: css$1`
+      &.${prefixCls}-collapse {
+        display: flex;
+        flex-direction: column;
+        border: none;
+        box-shadow: none;
+        .${prefixCls}-collapse-item {
+          border: none;
+          border-radius: ${token.borderRadiusLG}px;
+        }
+      }
+    `,
+		hideCollapsibleIcon: css$1`
+      .${prefixCls}-collapse-expand-icon {
+        display: none !important;
+      }
+    `,
+		icon: css$1`
+      cursor: pointer;
+      transition: all 100ms ${token.motionEaseOut};
+    `,
+		outlined: css$1`
+      &.${prefixCls}-collapse {
+        border: 1px solid ${token.colorFillSecondary};
+        background: ${token.colorBgContainer};
+        .${prefixCls}-collapse-item .${prefixCls}-collapse-header {
+          transition: none;
+        }
+        .${prefixCls}-collapse-item-active .${prefixCls}-collapse-header {
+          border-block-end: 1px solid ${token.colorFillTertiary};
+        }
+        .${prefixCls}-collapse-item:not(:first-child) {
+          .${prefixCls}-collapse-header {
+            border-block-start: 1px solid ${token.colorFillTertiary};
+          }
+        }
+      }
+    `,
+		root: css$1`
+      &.${prefixCls}-collapse {
+        display: flex;
+        flex-direction: column;
+        background: transparent;
+
+        .${prefixCls}-collapse-header {
+          overflow: hidden;
+          display: flex;
+          flex: none;
+          gap: 0.75em;
+          align-items: flex-start;
+
+          border-radius: 0 !important;
+
+          .${prefixCls}-collapse-header-text {
+            flex: 1;
+          }
+
+          .${prefixCls}-collapse-expand-icon {
+            align-items: center;
+            min-height: 28px;
+            padding: 0;
+          }
+
+          .${prefixCls}-collapse-extra {
+            display: flex;
+            align-items: center;
+            min-height: 28px;
+          }
+        }
+
+        .${prefixCls}-collapse-content {
+          background: transparent;
+        }
+      }
+    `,
+		title: css$1`
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 28px;
+    `
+	};
+});
+
+//#endregion
+export { DEFAULT_PADDING, getPadding, useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Collapse/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Collapse/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const DEFAULT_PADDING = '12px 16px';\n\nexport const getPadding = (padding?: number | string) =>\n  !padding && padding !== 0\n    ? DEFAULT_PADDING\n    : `${typeof padding === 'string' ? padding : `${padding}px`} !important`;\n\nexport const useStyles = createStyles(({ css, token, prefixCls, stylish, isDarkMode }) => {\n  return {\n    borderless: css`\n      &.${prefixCls}-collapse {\n        .${prefixCls}-collapse-header {\n          padding-inline: 0;\n        }\n        .${prefixCls}-collapse-content {\n          padding-inline: 0;\n          .${prefixCls}-collapse-content-box {\n            padding-inline: 0;\n          }\n        }\n      }\n    `,\n    desc: css`\n      font-size: 12px;\n      color: ${token.colorTextDescription};\n    `,\n    filled: css`\n      &.${prefixCls}-collapse {\n        .${prefixCls}-collapse-item {\n          background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary};\n          .${prefixCls}-collapse-content {\n            margin-inline: 3px;\n            margin-block-end: 3px;\n            border-radius: ${token.borderRadius}px;\n            ${stylish.variantOutlinedWithoutHover};\n            background: ${isDarkMode ? token.colorFillQuaternary : token.colorBgContainer};\n            ${isDarkMode ? undefined : stylish.shadow};\n          }\n        }\n      }\n    `,\n    gapOutlined: css`\n      &.${prefixCls}-collapse {\n        background: transparent;\n        .${prefixCls}-collapse-item {\n          border: 1px solid ${token.colorFillSecondary};\n          background: ${token.colorBgContainer};\n        }\n\n        .${prefixCls}-collapse-item:not(:first-child) {\n          .${prefixCls}-collapse-header {\n            border-block-start: none;\n          }\n        }\n      }\n    `,\n    gapRoot: css`\n      &.${prefixCls}-collapse {\n        display: flex;\n        flex-direction: column;\n        border: none;\n        box-shadow: none;\n        .${prefixCls}-collapse-item {\n          border: none;\n          border-radius: ${token.borderRadiusLG}px;\n        }\n      }\n    `,\n    hideCollapsibleIcon: css`\n      .${prefixCls}-collapse-expand-icon {\n        display: none !important;\n      }\n    `,\n    icon: css`\n      cursor: pointer;\n      transition: all 100ms ${token.motionEaseOut};\n    `,\n    outlined: css`\n      &.${prefixCls}-collapse {\n        border: 1px solid ${token.colorFillSecondary};\n        background: ${token.colorBgContainer};\n        .${prefixCls}-collapse-item .${prefixCls}-collapse-header {\n          transition: none;\n        }\n        .${prefixCls}-collapse-item-active .${prefixCls}-collapse-header {\n          border-block-end: 1px solid ${token.colorFillTertiary};\n        }\n        .${prefixCls}-collapse-item:not(:first-child) {\n          .${prefixCls}-collapse-header {\n            border-block-start: 1px solid ${token.colorFillTertiary};\n          }\n        }\n      }\n    `,\n    root: css`\n      &.${prefixCls}-collapse {\n        display: flex;\n        flex-direction: column;\n        background: transparent;\n\n        .${prefixCls}-collapse-header {\n          overflow: hidden;\n          display: flex;\n          flex: none;\n          gap: 0.75em;\n          align-items: flex-start;\n\n          border-radius: 0 !important;\n\n          .${prefixCls}-collapse-header-text {\n            flex: 1;\n          }\n\n          .${prefixCls}-collapse-expand-icon {\n            align-items: center;\n            min-height: 28px;\n            padding: 0;\n          }\n\n          .${prefixCls}-collapse-extra {\n            display: flex;\n            align-items: center;\n            min-height: 28px;\n          }\n        }\n\n        .${prefixCls}-collapse-content {\n          background: transparent;\n        }\n      }\n    `,\n    title: css`\n      font-size: 16px;\n      font-weight: 500;\n      line-height: 28px;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,kBAAkB;AAE/B,MAAa,cAAc,YACzB,CAAC,WAAW,YAAY,IACpB,kBACA,GAAG,OAAO,YAAY,WAAW,UAAU,GAAG,QAAQ,IAAI;AAEhE,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,WAAW,SAAS,iBAAiB;AACxF,QAAO;EACL,YAAY,KAAG;UACT,UAAU;WACT,UAAU;;;WAGV,UAAU;;aAER,UAAU;;;;;;EAMnB,MAAM,KAAG;;eAEE,MAAM,qBAAqB;;EAEtC,QAAQ,KAAG;UACL,UAAU;WACT,UAAU;wBACG,aAAa,MAAM,sBAAsB,MAAM,kBAAkB;aAC5E,UAAU;;;6BAGM,MAAM,aAAa;cAClC,QAAQ,4BAA4B;0BACxB,aAAa,MAAM,sBAAsB,MAAM,iBAAiB;cAC5E,aAAa,SAAY,QAAQ,OAAO;;;;;EAKlD,aAAa,KAAG;UACV,UAAU;;WAET,UAAU;8BACS,MAAM,mBAAmB;wBAC/B,MAAM,iBAAiB;;;WAGpC,UAAU;aACR,UAAU;;;;;;EAMnB,SAAS,KAAG;UACN,UAAU;;;;;WAKT,UAAU;;2BAEM,MAAM,eAAe;;;;EAI5C,qBAAqB,KAAG;SACnB,UAAU;;;;EAIf,MAAM,KAAG;;8BAEiB,MAAM,cAAc;;EAE9C,UAAU,KAAG;UACP,UAAU;4BACQ,MAAM,mBAAmB;sBAC/B,MAAM,iBAAiB;WAClC,UAAU,kBAAkB,UAAU;;;WAGtC,UAAU,yBAAyB,UAAU;wCAChB,MAAM,kBAAkB;;WAErD,UAAU;aACR,UAAU;4CACqB,MAAM,kBAAkB;;;;;EAKhE,MAAM,KAAG;UACH,UAAU;;;;;WAKT,UAAU;;;;;;;;;aASR,UAAU;;;;aAIV,UAAU;;;;;;aAMV,UAAU;;;;;;;WAOZ,UAAU;;;;;EAKjB,OAAO,KAAG;;;;;EAKX;EACD"}