@jinmi/ui 0.0.0-stage → 6.0.2

package/es/GuideCard/GuideCard.d.mts

@@ -0,0 +1,6 @@
+import { GuideCardProps } from "./type.mjs";
+//#region src/GuideCard/GuideCard.d.ts
+declare const GuideCard: import("react").NamedExoticComponent<GuideCardProps>;
+//#endregion
+export { GuideCard as default };
+//# sourceMappingURL=GuideCard.d.mts.map

package/es/GuideCard/GuideCard.mjs

@@ -0,0 +1,63 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import Img from "../Img/index.mjs";
+import { styles, variants } from "./style.mjs";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { X } from "lucide-react";
+//#region src/GuideCard/GuideCard.tsx
+const GuideCard = memo(({ cover, onClose, shadow, closable = true, afterClose, alt, className, title, desc, width, styles: customStyles, height, coverProps, variant = "filled", closeIconProps, classNames, ref, ...rest }) => {
+	const [show, setShow] = useState(true);
+	const { isDarkMode } = useThemeMode();
+	if (!show) return null;
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({
+			isDarkMode,
+			shadow,
+			variant
+		}), className),
+		ref,
+		...rest,
+		children: [
+			closable && /* @__PURE__ */ jsx(ActionIcon, {
+				size: "small",
+				...closeIconProps,
+				className: cx(styles.close, closeIconProps?.className),
+				icon: X,
+				onClick: (e) => {
+					setShow(false);
+					onClose?.(e);
+					afterClose?.();
+				}
+			}),
+			cover && /* @__PURE__ */ jsx(Img, {
+				alt,
+				className: cx(styles.cover, classNames?.cover),
+				height,
+				src: cover,
+				style: customStyles?.cover,
+				width,
+				...coverProps
+			}),
+			/* @__PURE__ */ jsxs(FlexBasic_default, {
+				className: cx(styles.content, classNames?.content),
+				gap: 8,
+				style: customStyles?.content,
+				children: [title && /* @__PURE__ */ jsx("div", {
+					className: styles.title,
+					children: title
+				}), desc && /* @__PURE__ */ jsx("div", {
+					className: styles.desc,
+					children: desc
+				})]
+			})
+		]
+	});
+});
+GuideCard.displayName = "GuideCard";
+//#endregion
+export { GuideCard as default };
+
+//# sourceMappingURL=GuideCard.mjs.map

package/es/GuideCard/GuideCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuideCard.mjs","names":["Flexbox"],"sources":["../../src/GuideCard/GuideCard.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx, useThemeMode } from 'antd-style';\r\nimport { X } from 'lucide-react';\r\nimport { memo, useState } from 'react';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport { Flexbox } from '@/Flex';\r\nimport Img from '@/Img';\r\n\r\nimport { styles, variants } from './style';\r\nimport type { GuideCardProps } from './type';\r\n\r\nconst GuideCard = memo<GuideCardProps>(\r\n  ({\r\n    cover,\r\n    onClose,\r\n    shadow,\r\n    closable = true,\r\n    afterClose,\r\n    alt,\r\n    className,\r\n    title,\r\n    desc,\r\n    width,\r\n    styles: customStyles,\r\n    height,\r\n    coverProps,\r\n    variant = 'filled',\r\n    closeIconProps,\r\n    classNames,\r\n    ref,\r\n    ...rest\r\n  }) => {\r\n    const [show, setShow] = useState(true);\r\n    const { isDarkMode } = useThemeMode();\r\n\r\n    if (!show) return null;\r\n\r\n    return (\r\n      <Flexbox\r\n        className={cx(variants({ isDarkMode, shadow, variant }), className)}\r\n        ref={ref}\r\n        {...rest}\r\n      >\r\n        {closable && (\r\n          <ActionIcon\r\n            size={'small'}\r\n            {...closeIconProps}\r\n            className={cx(styles.close, closeIconProps?.className)}\r\n            icon={X}\r\n            onClick={(e) => {\r\n              setShow(false);\r\n              onClose?.(e);\r\n              afterClose?.();\r\n            }}\r\n          />\r\n        )}\r\n        {cover && (\r\n          <Img\r\n            alt={alt}\r\n            className={cx(styles.cover, classNames?.cover)}\r\n            height={height}\r\n            src={cover}\r\n            style={customStyles?.cover}\r\n            width={width}\r\n            {...coverProps}\r\n          />\r\n        )}\r\n        <Flexbox\r\n          className={cx(styles.content, classNames?.content)}\r\n          gap={8}\r\n          style={customStyles?.content}\r\n        >\r\n          {title && <div className={styles.title}>{title}</div>}\r\n          {desc && <div className={styles.desc}>{desc}</div>}\r\n        </Flexbox>\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nGuideCard.displayName = 'GuideCard';\r\n\r\nexport default GuideCard;\r\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,OACA,SACA,QACA,WAAW,MACX,YACA,KACA,WACA,OACA,MACA,OACA,QAAQ,cACR,QACA,YACA,UAAU,UACV,gBACA,YACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,IAAI;CACrC,MAAM,EAAE,eAAe,aAAa;CAEpC,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAY;GAAQ;EAAQ,CAAC,GAAG,SAAS;EAC7D;EACL,GAAI;EAHN,UAAA;GAKG,YACC,oBAAC,YAAD;IACE,MAAM;IACN,GAAI;IACJ,WAAW,GAAG,OAAO,OAAO,gBAAgB,SAAS;IACrD,MAAM;IACN,UAAU,MAAM;KACd,QAAQ,KAAK;KACb,UAAU,CAAC;KACX,aAAa;IACf;GACD,CAAA;GAEF,SACC,oBAAC,KAAD;IACO;IACL,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IACrC;IACR,KAAK;IACL,OAAO,cAAc;IACd;IACP,GAAI;GACL,CAAA;GAEH,qBAACA,mBAAD;IACE,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IACjD,KAAK;IACL,OAAO,cAAc;IAHvB,UAAA,CAKG,SAAS,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,GACnD,QAAQ,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAO,UAAA;IAAU,CAAA,CAC1C;;EACF;;AAEb,CACF;AAEA,UAAU,cAAc"}

package/es/GuideCard/index.d.mts

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

package/es/GuideCard/style.mjs

@@ -0,0 +1,83 @@
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/GuideCard/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	borderless: staticStylish.variantBorderlessWithoutHover,
+	close: css`
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+  `,
+	content: css`
+    padding: 16px;
+  `,
+	cover: css`
+    align-self: center;
+  `,
+	desc: css`
+    color: ${cssVar.colorTextDescription};
+  `,
+	filledDark: css`
+    ${staticStylish.variantFilledWithoutHover};
+    background: linear-gradient(
+      to bottom,
+      ${cssVar.colorFillTertiary},
+      ${cssVar.colorFillQuaternary}
+    );
+  `,
+	filledLight: css`
+    ${staticStylish.variantFilledWithoutHover};
+    background: linear-gradient(
+      to bottom,
+      ${cssVar.colorFillQuaternary},
+      ${cssVar.colorFillTertiary}
+    );
+  `,
+	outlined: staticStylish.variantOutlinedWithoutHover,
+	root: css`
+    position: relative;
+    overflow: hidden;
+    border-radius: ${cssVar.borderRadiusLG};
+  `,
+	shadow: staticStylish.shadow,
+	title: css`
+    font-size: 16px;
+    font-weight: bold;
+  `
+}));
+const variants = cva(styles.root, {
+	compoundVariants: [{
+		class: styles.filledDark,
+		isDarkMode: true,
+		variant: "filled"
+	}, {
+		class: styles.filledLight,
+		isDarkMode: false,
+		variant: "filled"
+	}],
+	defaultVariants: {
+		isDarkMode: false,
+		shadow: false,
+		variant: "filled"
+	},
+	variants: {
+		isDarkMode: {
+			false: null,
+			true: null
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		variant: {
+			borderless: styles.borderless,
+			filled: null,
+			outlined: styles.outlined
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

package/es/GuideCard/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/GuideCard/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  borderless: lobeStaticStylish.variantBorderlessWithoutHover,\r\n  close: css`\r\n    position: absolute;\r\n    inset-block-start: 8px;\r\n    inset-inline-end: 8px;\r\n  `,\r\n  content: css`\r\n    padding: 16px;\r\n  `,\r\n  cover: css`\r\n    align-self: center;\r\n  `,\r\n  desc: css`\r\n    color: ${cssVar.colorTextDescription};\r\n  `,\r\n  filledDark: css`\r\n    ${lobeStaticStylish.variantFilledWithoutHover};\r\n    background: linear-gradient(\r\n      to bottom,\r\n      ${cssVar.colorFillTertiary},\r\n      ${cssVar.colorFillQuaternary}\r\n    );\r\n  `,\r\n  filledLight: css`\r\n    ${lobeStaticStylish.variantFilledWithoutHover};\r\n    background: linear-gradient(\r\n      to bottom,\r\n      ${cssVar.colorFillQuaternary},\r\n      ${cssVar.colorFillTertiary}\r\n    );\r\n  `,\r\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\r\n  root: css`\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: ${cssVar.borderRadiusLG};\r\n  `,\r\n  shadow: lobeStaticStylish.shadow,\r\n  title: css`\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n  `,\r\n}));\r\n\r\nexport const variants = cva(styles.root, {\r\n  compoundVariants: [\r\n    {\r\n      class: styles.filledDark,\r\n      isDarkMode: true,\r\n      variant: 'filled',\r\n    },\r\n    {\r\n      class: styles.filledLight,\r\n      isDarkMode: false,\r\n      variant: 'filled',\r\n    },\r\n  ],\r\n  defaultVariants: {\r\n    isDarkMode: false,\r\n    shadow: false,\r\n    variant: 'filled',\r\n  },\r\n\r\n  variants: {\r\n    isDarkMode: {\r\n      false: null,\r\n      true: null,\r\n    },\r\n    shadow: {\r\n      false: null,\r\n      true: styles.shadow,\r\n    },\r\n    variant: {\r\n      borderless: styles.borderless,\r\n      filled: null,\r\n      outlined: styles.outlined,\r\n    },\r\n  },\r\n});\r\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,YAAYA,cAAkB;CAC9B,OAAO,GAAG;;;;;CAKV,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;CAGV,MAAM,GAAG;aACE,OAAO,qBAAqB;;CAEvC,YAAY,GAAG;MACXA,cAAkB,0BAA0B;;;QAG1C,OAAO,kBAAkB;QACzB,OAAO,oBAAoB;;;CAGjC,aAAa,GAAG;MACZA,cAAkB,0BAA0B;;;QAG1C,OAAO,oBAAoB;QAC3B,OAAO,kBAAkB;;;CAG/B,UAAUA,cAAkB;CAC5B,MAAM,GAAG;;;qBAGU,OAAO,eAAe;;CAEzC,QAAQA,cAAkB;CAC1B,OAAO,GAAG;;;;AAIZ,EAAE;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,YAAY;EACZ,SAAS;CACX,GACA;EACE,OAAO,OAAO;EACd,YAAY;EACZ,SAAS;CACX,CACF;CACA,iBAAiB;EACf,YAAY;EACZ,QAAQ;EACR,SAAS;CACX;CAEA,UAAU;EACR,YAAY;GACV,OAAO;GACP,MAAM;EACR;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ;GACR,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}

package/es/GuideCard/type.d.mts

@@ -0,0 +1,37 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { ImgProps } from "../types/index.mjs";
+import { ActionIconProps } from "../base-ui/ActionIcon/type.mjs";
+import "../base-ui/ActionIcon/index.mjs";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { ImageProps } from "antd";
+//#region src/GuideCard/type.d.ts
+interface GuideCardProps extends Omit<FlexboxProps, 'title'> {
+  afterClose?: () => void;
+  alt?: string;
+  classNames?: {
+    content?: string;
+    cover?: string;
+  };
+  closable?: boolean;
+  closeIconProps?: Omit<ActionIconProps, 'icon' | 'onClick'>;
+  cover?: string;
+  coverProps?: ImgProps & ImageProps & {
+    priority?: boolean;
+  };
+  desc?: ReactNode;
+  height?: number;
+  onClose?: ActionIconProps['onClick'];
+  ref?: Ref<HTMLDivElement>;
+  shadow?: boolean;
+  styles?: {
+    content?: CSSProperties;
+    cover?: CSSProperties;
+  };
+  title?: ReactNode;
+  variant?: 'filled' | 'outlined' | 'borderless';
+  width?: number;
+}
+//#endregion
+export { GuideCardProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Header/Header.d.mts

@@ -0,0 +1,6 @@
+import { HeaderProps } from "./type.mjs";
+//#region src/Header/Header.d.ts
+declare const Header: import("react").NamedExoticComponent<HeaderProps>;
+//#endregion
+export { Header as default };
+//# sourceMappingURL=Header.d.mts.map

package/es/Header/Header.mjs

@@ -0,0 +1,86 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+//#region src/Header/Header.tsx
+const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo, actions, actionsStyle, logoStyle, navStyle, className, children, ref, ...rest }) => {
+	const { mobile } = useResponsive();
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		as: "section",
+		className: cx(styles.root, className),
+		distribution: "space-between",
+		ref,
+		width: "auto",
+		...rest,
+		children: mobile ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs(FlexBasic_default, {
+				className: actionsClassName,
+				style: {
+					flex: 0,
+					...navStyle
+				},
+				children: [nav, children]
+			}),
+			/* @__PURE__ */ jsx(FlexBasic_default, {
+				horizontal: true,
+				className: cx(styles.left, logoClassName),
+				style: {
+					flex: 1,
+					overflow: "hidden",
+					...logoStyle
+				},
+				children: logo
+			}),
+			/* @__PURE__ */ jsx(FlexBasic_default, {
+				className: actionsClassName,
+				style: {
+					flex: 0,
+					...actionsStyle
+				},
+				children: actions
+			})
+		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(FlexBasic_default, {
+				horizontal: true,
+				className: cx(styles.left, logoClassName),
+				style: {
+					flex: 0,
+					...logoStyle
+				},
+				children: logo
+			}),
+			/* @__PURE__ */ jsxs(FlexBasic_default, {
+				className: navClassName,
+				style: {
+					flex: 1,
+					marginLeft: 48,
+					overflow: "hidden",
+					...navStyle
+				},
+				children: [nav, children]
+			}),
+			/* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				className: cx(styles.right, actionsClassName),
+				flex: 1,
+				justify: "space-between",
+				style: actionsStyle,
+				children: [/* @__PURE__ */ jsx("div", {}), /* @__PURE__ */ jsx(FlexBasic_default, {
+					horizontal: true,
+					align: "center",
+					gap: 8,
+					children: actions
+				})]
+			})
+		] })
+	});
+});
+Header.displayName = "Header";
+//#endregion
+export { Header as default };
+
+//# sourceMappingURL=Header.mjs.map

package/es/Header/Header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mjs","names":["Flexbox"],"sources":["../../src/Header/Header.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx, useResponsive } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport { Flexbox } from '@/Flex';\r\n\r\nimport { styles } from './style';\r\nimport type { HeaderProps } from './type';\r\n\r\nconst Header = memo<HeaderProps>(\r\n  ({\r\n    actionsClassName,\r\n    navClassName,\r\n    logoClassName,\r\n    nav,\r\n    logo,\r\n    actions,\r\n    actionsStyle,\r\n    logoStyle,\r\n    navStyle,\r\n    className,\r\n    children,\r\n    ref,\r\n    ...rest\r\n  }) => {\r\n    const { mobile } = useResponsive();\r\n\r\n    return (\r\n      <Flexbox\r\n        horizontal\r\n        align={'center'}\r\n        as={'section'}\r\n        className={cx(styles.root, className)}\r\n        distribution={'space-between'}\r\n        ref={ref}\r\n        width={'auto'}\r\n        {...rest}\r\n      >\r\n        {mobile ? (\r\n          <>\r\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...navStyle }}>\r\n              {nav}\r\n              {children}\r\n            </Flexbox>\r\n            <Flexbox\r\n              horizontal\r\n              className={cx(styles.left, logoClassName)}\r\n              style={{ flex: 1, overflow: 'hidden', ...logoStyle }}\r\n            >\r\n              {logo}\r\n            </Flexbox>\r\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...actionsStyle }}>\r\n              {actions}\r\n            </Flexbox>\r\n          </>\r\n        ) : (\r\n          <>\r\n            <Flexbox\r\n              horizontal\r\n              className={cx(styles.left, logoClassName)}\r\n              style={{ flex: 0, ...logoStyle }}\r\n            >\r\n              {logo}\r\n            </Flexbox>\r\n            <Flexbox\r\n              className={navClassName}\r\n              style={{ flex: 1, marginLeft: 48, overflow: 'hidden', ...navStyle }}\r\n            >\r\n              {nav}\r\n              {children}\r\n            </Flexbox>\r\n            <Flexbox\r\n              horizontal\r\n              className={cx(styles.right, actionsClassName)}\r\n              flex={1}\r\n              justify={'space-between'}\r\n              style={actionsStyle}\r\n            >\r\n              <div />\r\n              <Flexbox horizontal align={'center'} gap={8}>\r\n                {actions}\r\n              </Flexbox>\r\n            </Flexbox>\r\n          </>\r\n        )}\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nHeader.displayName = 'Header';\r\n\r\nexport default Header;\r\n"],"mappings":";;;;;;;AAUA,MAAM,SAAS,MACZ,EACC,kBACA,cACA,eACA,KACA,MACA,SACA,cACA,WACA,UACA,WACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CAEjC,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,IAAI;EACJ,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,cAAc;EACT;EACL,OAAO;EACP,GAAI;EAEH,UAAA,SACC,qBAAA,YAAA,EAAA,UAAA;GACE,qBAACA,mBAAD;IAAS,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;IAAS;IAApE,UAAA,CACG,KACA,QACM;;GACT,oBAACA,mBAAD;IACE,YAAA;IACA,WAAW,GAAG,OAAO,MAAM,aAAa;IACxC,OAAO;KAAE,MAAM;KAAG,UAAU;KAAU,GAAG;IAAU;IAElD,UAAA;GACM,CAAA;GACT,oBAACA,mBAAD;IAAS,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;IAAa;IACrE,UAAA;GACM,CAAA;EACT,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;GACE,oBAACA,mBAAD;IACE,YAAA;IACA,WAAW,GAAG,OAAO,MAAM,aAAa;IACxC,OAAO;KAAE,MAAM;KAAG,GAAG;IAAU;IAE9B,UAAA;GACM,CAAA;GACT,qBAACA,mBAAD;IACE,WAAW;IACX,OAAO;KAAE,MAAM;KAAG,YAAY;KAAI,UAAU;KAAU,GAAG;IAAS;IAFpE,UAAA,CAIG,KACA,QACM;;GACT,qBAACA,mBAAD;IACE,YAAA;IACA,WAAW,GAAG,OAAO,OAAO,gBAAgB;IAC5C,MAAM;IACN,SAAS;IACT,OAAO;IALT,UAAA,CAOE,oBAAC,OAAD,CAAM,CAAA,GACN,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;KACvC,UAAA;IACM,CAAA,CACF;;EACT,EAAA,CAAA;CAEG,CAAA;AAEb,CACF;AAEA,OAAO,cAAc"}

package/es/Header/index.d.mts

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

package/es/Header/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Header/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Header/index.mjs

@@ -0,0 +1,2 @@
+import Header from "./Header.mjs";
+export { Header as default };

package/es/Header/style.mjs

@@ -0,0 +1,45 @@
+import { createStaticStyles } from "antd-style";
+//#region src/Header/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	left: css`
+    z-index: 10;
+  `,
+	right: css`
+    z-index: 10;
+
+    &-aside {
+      display: flex;
+      align-items: center;
+
+      ${responsive.sm} {
+        justify-content: center;
+
+        margin-block: 8px;
+        margin-inline: 16px;
+        padding-block-start: 24px;
+        border-block-start: 1px solid ${cssVar.colorBorder};
+      }
+    }
+  `,
+	root: css`
+    grid-area: head;
+    align-self: stretch;
+
+    width: 100%;
+    height: 64px;
+    padding-block: 0;
+    padding-inline: 24px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+
+    background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 40%, transparent);
+
+    ${responsive.sm} {
+      padding-block: 0;
+      padding-inline: 12px;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Header/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Header/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\r\n  left: css`\r\n    z-index: 10;\r\n  `,\r\n  right: css`\r\n    z-index: 10;\r\n\r\n    &-aside {\r\n      display: flex;\r\n      align-items: center;\r\n\r\n      ${responsive.sm} {\r\n        justify-content: center;\r\n\r\n        margin-block: 8px;\r\n        margin-inline: 16px;\r\n        padding-block-start: 24px;\r\n        border-block-start: 1px solid ${cssVar.colorBorder};\r\n      }\r\n    }\r\n  `,\r\n  root: css`\r\n    grid-area: head;\r\n    align-self: stretch;\r\n\r\n    width: 100%;\r\n    height: 64px;\r\n    padding-block: 0;\r\n    padding-inline: 24px;\r\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\r\n\r\n    background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 40%, transparent);\r\n\r\n    ${responsive.sm} {\r\n      padding-block: 0;\r\n      padding-inline: 12px;\r\n    }\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;CAGT,OAAO,GAAG;;;;;;;QAOJ,WAAW,GAAG;;;;;;wCAMkB,OAAO,YAAY;;;;CAIzD,MAAM,GAAG;;;;;;;;kCAQuB,OAAO,qBAAqB;;2CAEnB,OAAO,cAAc;;MAE1D,WAAW,GAAG;;;;;AAKpB,EAAE"}

package/es/Header/type.d.mts

@@ -0,0 +1,19 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { CSSProperties, ReactNode, Ref } from "react";
+//#region src/Header/type.d.ts
+interface HeaderProps extends FlexboxProps {
+  actions?: ReactNode;
+  actionsClassName?: string;
+  actionsStyle?: CSSProperties;
+  logo?: ReactNode;
+  logoClassName?: string;
+  logoStyle?: CSSProperties;
+  nav?: ReactNode;
+  navClassName?: string;
+  navStyle?: CSSProperties;
+  ref?: Ref<HTMLDivElement>;
+}
+//#endregion
+export { HeaderProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Highlighter/FullFeatured.mjs

@@ -0,0 +1,138 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Text from "../Text/Text.mjs";
+import { stopPropagation } from "../utils/dom.mjs";
+import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
+import { getCodeLanguageDisplayName, getCodeLanguageFilename } from "./const.mjs";
+import CopyButton from "../CopyButton/CopyButton.mjs";
+import { LangSelect } from "./LangSelect.mjs";
+import { bodyVariants, headerVariants, variants } from "./style.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronDown, ChevronRight } from "lucide-react";
+//#region src/Highlighter/FullFeatured.tsx
+const HeaderLanguage = memo(({ allowChangeLanguage, displayName, fileName, filetype, icon, language, setLanguage, showLanguage }) => {
+	if (!showLanguage) return null;
+	if (allowChangeLanguage && !fileName) return /* @__PURE__ */ jsx(LangSelect, {
+		value: language.toLowerCase(),
+		onSelect: setLanguage
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		className: "language-title",
+		flex: 1,
+		gap: 4,
+		justify: "flex-start",
+		paddingInline: 8,
+		children: [icon || /* @__PURE__ */ jsx(MaterialFileTypeIcon, {
+			fallbackUnknownType: false,
+			filename: filetype,
+			size: 18,
+			type: "file",
+			variant: "raw"
+		}), /* @__PURE__ */ jsx(Text, {
+			ellipsis: true,
+			fontSize: 13,
+			children: displayName
+		})]
+	});
+}, (prev, next) => prev.allowChangeLanguage === next.allowChangeLanguage && prev.displayName === next.displayName && prev.fileName === next.fileName && prev.filetype === next.filetype && prev.icon === next.icon && prev.language === next.language && prev.setLanguage === next.setLanguage && prev.showLanguage === next.showLanguage);
+const HighlighterFullFeatured = memo(({ content, language, setLanguage, showLanguage, className, classNames, styles: customStyles, style, allowChangeLanguage = false, fileName, icon, actionsRender, copyable, variant, shadow, wrap, defaultExpand = true, children, ...rest }) => {
+	const [expand, setExpand] = useState(defaultExpand);
+	const contentRef = useRef(content);
+	useEffect(() => {
+		contentRef.current = content;
+	}, [content]);
+	const getContent = useCallback(() => contentRef.current, []);
+	const originalActions = useMemo(() => {
+		if (!copyable) return null;
+		return /* @__PURE__ */ jsx(CopyButton, {
+			content: getContent,
+			size: "small"
+		});
+	}, [copyable, getContent]);
+	const actions = useMemo(() => {
+		if (!actionsRender) return originalActions;
+		return actionsRender({
+			actionIconSize: "small",
+			content,
+			getContent,
+			language,
+			originalNode: originalActions
+		});
+	}, [
+		actionsRender,
+		content,
+		getContent,
+		language,
+		originalActions
+	]);
+	const displayName = useMemo(() => {
+		if (fileName) return fileName;
+		return getCodeLanguageDisplayName(language);
+	}, [fileName, language]);
+	const filetype = useMemo(() => {
+		if (fileName) return fileName;
+		return getCodeLanguageFilename(language);
+	}, [fileName, language]);
+	const handleToggleExpand = useCallback(() => {
+		setExpand((prev) => !prev);
+	}, []);
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({
+			shadow,
+			variant,
+			wrap
+		}), className),
+		"data-code-type": "highlighter",
+		style,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+			horizontal: true,
+			align: "center",
+			className: cx(headerVariants({ variant }), classNames?.header),
+			justify: "space-between",
+			style: customStyles?.header,
+			onClick: handleToggleExpand,
+			children: [/* @__PURE__ */ jsx(HeaderLanguage, {
+				allowChangeLanguage,
+				displayName,
+				fileName,
+				filetype,
+				icon,
+				language,
+				setLanguage,
+				showLanguage
+			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				flex: "none",
+				gap: 4,
+				onClick: stopPropagation,
+				children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+					horizontal: true,
+					align: "center",
+					className: "panel-actions",
+					flex: "none",
+					gap: 4,
+					children: actions
+				}), /* @__PURE__ */ jsx(ActionIcon, {
+					icon: expand ? ChevronDown : ChevronRight,
+					size: "small",
+					onClick: handleToggleExpand
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(FlexBasic_default, {
+			className: cx(bodyVariants({ expand }), classNames?.body),
+			style: customStyles?.body,
+			children
+		})]
+	});
+});
+//#endregion
+export { HighlighterFullFeatured, HighlighterFullFeatured as default };
+
+//# sourceMappingURL=FullFeatured.mjs.map

package/es/Highlighter/FullFeatured.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { ChevronDown, ChevronRight } from 'lucide-react';\r\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport CopyButton from '@/CopyButton';\r\nimport { Flexbox } from '@/Flex';\r\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\r\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\r\nimport Text from '@/Text';\r\nimport { stopPropagation } from '@/utils/dom';\r\n\r\nimport LangSelect from './LangSelect';\r\nimport { bodyVariants, headerVariants, variants } from './style';\r\nimport { type HighlighterProps } from './type';\r\n\r\ninterface HeaderLanguageProps {\r\n  allowChangeLanguage: boolean;\r\n  displayName: string;\r\n  fileName?: string;\r\n  filetype: string;\r\n  icon?: ReactNode;\r\n  language: string;\r\n  setLanguage?: (language: string) => void;\r\n  showLanguage?: boolean;\r\n}\r\n\r\nconst HeaderLanguage = memo<HeaderLanguageProps>(\r\n  ({\r\n    allowChangeLanguage,\r\n    displayName,\r\n    fileName,\r\n    filetype,\r\n    icon,\r\n    language,\r\n    setLanguage,\r\n    showLanguage,\r\n  }) => {\r\n    if (!showLanguage) return null;\r\n\r\n    if (allowChangeLanguage && !fileName)\r\n      return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\r\n\r\n    return (\r\n      <Flexbox\r\n        horizontal\r\n        align={'center'}\r\n        className={'language-title'}\r\n        flex={1}\r\n        gap={4}\r\n        justify={'flex-start'}\r\n        paddingInline={8}\r\n      >\r\n        {icon || (\r\n          <MaterialFileTypeIcon\r\n            fallbackUnknownType={false}\r\n            filename={filetype}\r\n            size={18}\r\n            type={'file'}\r\n            variant={'raw'}\r\n          />\r\n        )}\r\n        <Text ellipsis fontSize={13}>\r\n          {displayName}\r\n        </Text>\r\n      </Flexbox>\r\n    );\r\n  },\r\n  (prev, next) =>\r\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\r\n    prev.displayName === next.displayName &&\r\n    prev.fileName === next.fileName &&\r\n    prev.filetype === next.filetype &&\r\n    prev.icon === next.icon &&\r\n    prev.language === next.language &&\r\n    prev.setLanguage === next.setLanguage &&\r\n    prev.showLanguage === next.showLanguage,\r\n);\r\n\r\ninterface HighlighterFullFeaturedProps extends Omit<\r\n  HighlighterProps,\r\n  'children' | 'bodyRender' | 'enableTransformer'\r\n> {\r\n  content: string;\r\n  setLanguage?: (language: string) => void;\r\n}\r\n\r\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\r\n  ({\r\n    content,\r\n    language,\r\n    setLanguage,\r\n    showLanguage,\r\n    className,\r\n    classNames,\r\n    styles: customStyles,\r\n    style,\r\n    allowChangeLanguage = false,\r\n    fileName,\r\n    icon,\r\n    actionsRender,\r\n    copyable,\r\n    variant,\r\n    shadow,\r\n    wrap,\r\n    defaultExpand = true,\r\n    children,\r\n    ...rest\r\n  }) => {\r\n    const [expand, setExpand] = useState(defaultExpand);\r\n    const contentRef = useRef(content);\r\n\r\n    useEffect(() => {\r\n      contentRef.current = content;\r\n    }, [content]);\r\n\r\n    const getContent = useCallback(() => contentRef.current, []);\r\n\r\n    const originalActions = useMemo(() => {\r\n      if (!copyable) return null;\r\n      return <CopyButton content={getContent} size={'small'} />;\r\n    }, [copyable, getContent]);\r\n\r\n    const actions = useMemo(() => {\r\n      if (!actionsRender) return originalActions;\r\n      return actionsRender({\r\n        actionIconSize: 'small',\r\n        content,\r\n        getContent,\r\n        language,\r\n        originalNode: originalActions,\r\n      });\r\n    }, [actionsRender, content, getContent, language, originalActions]);\r\n\r\n    const displayName = useMemo(() => {\r\n      if (fileName) return fileName;\r\n      return getCodeLanguageDisplayName(language);\r\n    }, [fileName, language]);\r\n\r\n    const filetype = useMemo(() => {\r\n      if (fileName) return fileName;\r\n      return getCodeLanguageFilename(language);\r\n    }, [fileName, language]);\r\n\r\n    const handleToggleExpand = useCallback(() => {\r\n      setExpand((prev) => !prev);\r\n    }, []);\r\n\r\n    return (\r\n      <Flexbox\r\n        className={cx(variants({ shadow, variant, wrap }), className)}\r\n        data-code-type=\"highlighter\"\r\n        style={style}\r\n        {...rest}\r\n      >\r\n        <Flexbox\r\n          horizontal\r\n          align={'center'}\r\n          className={cx(headerVariants({ variant }), classNames?.header)}\r\n          justify={'space-between'}\r\n          style={customStyles?.header}\r\n          onClick={handleToggleExpand}\r\n        >\r\n          <HeaderLanguage\r\n            allowChangeLanguage={allowChangeLanguage}\r\n            displayName={displayName}\r\n            fileName={fileName}\r\n            filetype={filetype}\r\n            icon={icon}\r\n            language={language}\r\n            setLanguage={setLanguage}\r\n            showLanguage={showLanguage}\r\n          />\r\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\r\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\r\n              {actions}\r\n            </Flexbox>\r\n            <ActionIcon\r\n              icon={expand ? ChevronDown : ChevronRight}\r\n              size={'small'}\r\n              onClick={handleToggleExpand}\r\n            />\r\n          </Flexbox>\r\n        </Flexbox>\r\n        <Flexbox\r\n          className={cx(bodyVariants({ expand }), classNames?.body)}\r\n          style={customStyles?.body}\r\n        >\r\n          {children}\r\n        </Flexbox>\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nexport default HighlighterFullFeatured;\r\n"],"mappings":"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"}

package/es/Highlighter/Highlighter.d.mts

@@ -0,0 +1,6 @@
+import { HighlighterProps } from "./type.mjs";
+//#region src/Highlighter/Highlighter.d.ts
+declare const Highlighter: import("react").NamedExoticComponent<HighlighterProps>;
+//#endregion
+export { Highlighter, Highlighter as default };
+//# sourceMappingURL=Highlighter.d.mts.map