@lobehub/ui 3.4.2 → 3.4.3

package/es/Mermaid/Mermaid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mermaid.mjs","names":["CopyButton","SyntaxMermaid","FullFeatured","Flexbox","Tag"],"sources":["../../src/Mermaid/Mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { useStyles } from '@/Highlighter/style';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxMermaid from './SyntaxMermaid';\nimport { MermaidProps } from './type';\n\nconst Mermaid = memo<MermaidProps>(\n  ({\n    children,\n    actionIconSize,\n    fullFeatured,\n    copyable = true,\n    showLanguage = true,\n    language = 'mermaid',\n    style,\n    styles: customStyles,\n    classNames,\n    variant = 'filled',\n    shadow,\n    enablePanZoom = true,\n    defaultExpand = true,\n    className,\n    bodyRender,\n    fileName,\n    actionsRender,\n    theme,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shadow: false,\n            variant: 'filled',\n            wrap: 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            shadow: {\n              false: null,\n              true: styles.shadow,\n            },\n            wrap: {\n              false: styles.nowrap,\n              true: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const tirmedChildren = children.trim();\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton content={getCopyContent} size={actionIconSize || { blockSize: 28, size: 16 }} />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, originalActions, tirmedChildren]);\n\n    const defaultBody = useMemo(\n      () => (\n        <SyntaxMermaid\n          className={classNames?.content}\n          enablePanZoom={enablePanZoom}\n          style={customStyles?.content}\n          theme={theme}\n          variant={variant}\n        >\n          {tirmedChildren}\n        </SyntaxMermaid>\n      ),\n      [enablePanZoom, theme, tirmedChildren, variant, classNames?.content, customStyles?.content],\n    );\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({ content: tirmedChildren, originalNode: defaultBody });\n    }, [bodyRender, defaultBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          language={language}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          style={style}\n          styles={customStyles}\n          variant={variant}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <div\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox align={'center'} className={styles.actions} flex={'none'} gap={4} horizontal>\n          {actions}\n        </Flexbox>\n        {showLanguage && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}\n        {body}\n      </div>\n    );\n  },\n);\n\nMermaid.displayName = 'Mermaid';\n\nexport default Mermaid;\n\nexport { type MermaidProps } from './type';\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,UAAU,MACb,EACC,UACA,gBACA,cACA,WAAW,MACX,eAAe,MACf,WAAW,WACX,OACA,QAAQ,cACR,YACA,UAAU,UACV,QACA,gBAAgB,MAChB,gBAAgB,MAChB,WACA,YACA,UACA,eACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,QAAQ;GACR,SAAS;GACT,MAAM;GACP;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACD,MAAM;IACJ,OAAO,OAAO;IACd,MAAM;IACP;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,iBAAiB,SAAS,MAAM;CACtC,MAAM,iBAAiB,OAAO,eAAe;AAE7C,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,EAAE,CAAC;CAEpE,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,oBAACA;GAAW,SAAS;GAAgB,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;IAAI;IAAI;IAE7F;EAAC;EAAgB;EAAU;EAAe,CAAC;CAE9C,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,cAAc;GACf,CAAC;IACD;EAAC;EAAgB;EAAe;EAAgB;EAAiB;EAAe,CAAC;CAEpF,MAAM,cAAc,cAEhB,oBAACC;EACC,WAAW,YAAY;EACR;EACf,OAAO,cAAc;EACd;EACE;YAER;GACa,EAElB;EAAC;EAAe;EAAO;EAAgB;EAAS,YAAY;EAAS,cAAc;EAAQ,CAC5F;CAED,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,WAAW;GAAE,SAAS;GAAgB,cAAc;GAAa,CAAC;IACxE;EAAC;EAAY;EAAa;EAAe,CAAC;AAE7C,KAAI,aACF,QACE,oBAACC;EACgB;EACJ;EACC;EACZ,SAAS;EACC;EACK;EACL;EACA;EACF;EACM;EACP;EACP,QAAQ;EACC;EACT,GAAI;YAEH;GACY;AAGnB,QACE,qBAAC;EACC,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,kBAAe;EACR;EACP,GAAI;;GAEJ,oBAACC;IAAQ,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAAG;cACxE;KACO;GACT,gBAAgB,oBAACC;IAAI,WAAW,OAAO;cAAO,SAAS,aAAa;KAAO;GAC3E;;GACG;EAGX;AAED,QAAQ,cAAc;AAEtB,sBAAe"}

package/es/Mermaid/SyntaxMermaid/index.d.mts

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

package/es/Mermaid/SyntaxMermaid/index.mjs

@@ -0,0 +1,73 @@
+'use client';
+
+import Image_default from "../../Image/index.mjs";
+import { mermaidThemes } from "../const.mjs";
+import { useMermaid } from "../../hooks/useMermaid.mjs";
+import { memo, useEffect, useId, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { kebabCase } from "lodash-es";
+
+//#region src/Mermaid/SyntaxMermaid/index.tsx
+const SyntaxMermaid = memo(({ ref, children, theme: customTheme, variant, className, style }) => {
+	const isDefaultTheme = customTheme === "lobe-theme" || !customTheme;
+	const background = useMemo(() => {
+		if (isDefaultTheme) return;
+		return mermaidThemes.find((item) => item.id === customTheme)?.background;
+	}, [isDefaultTheme, customTheme]);
+	const { data, isLoading } = useMermaid(children, {
+		id: kebabCase(`mermaid-${useId()}`),
+		theme: isDefaultTheme ? void 0 : customTheme
+	});
+	const [blobUrl, setBlobUrl] = useState();
+	useEffect(() => {
+		return () => {
+			if (blobUrl) URL.revokeObjectURL(blobUrl);
+		};
+	}, [blobUrl]);
+	useEffect(() => {
+		if (isLoading || !data) return;
+		let finalSvgString = data;
+		if (typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox")) {
+			const svgDoc = new DOMParser().parseFromString(data, "image/svg+xml");
+			const svgElement = svgDoc.documentElement;
+			if (svgElement && svgElement.hasAttribute("viewBox")) {
+				const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
+				if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {
+					svgElement.setAttribute("width", viewBoxParts[2]);
+					svgElement.setAttribute("height", viewBoxParts[3]);
+				}
+				finalSvgString = new XMLSerializer().serializeToString(svgDoc);
+			}
+		}
+		const svgBlob = new Blob([finalSvgString], { type: "image/svg+xml" });
+		setBlobUrl(URL.createObjectURL(svgBlob));
+	}, [isLoading, data]);
+	if (!blobUrl) return null;
+	return /* @__PURE__ */ jsx(Image_default, {
+		alt: "mermaid",
+		className,
+		maxHeight: 480,
+		minWidth: 300,
+		objectFit: "contain",
+		ref,
+		src: blobUrl,
+		style: {
+			background: variant === "filled" ? background : void 0,
+			borderRadius: 0,
+			margin: 0,
+			minWidth: 300,
+			padding: variant === "borderless" ? 0 : 16,
+			position: "relative",
+			width: "100%",
+			...style
+		},
+		variant: "borderless",
+		width: "100%"
+	});
+}, (prevProps, nextProps) => prevProps.children === nextProps.children);
+SyntaxMermaid.displayName = "SyntaxMermaid";
+var SyntaxMermaid_default = SyntaxMermaid;
+
+//#endregion
+export { SyntaxMermaid_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/Mermaid/SyntaxMermaid/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Image"],"sources":["../../../src/Mermaid/SyntaxMermaid/index.tsx"],"sourcesContent":["'use client';\n\nimport { kebabCase } from 'lodash-es';\nimport { memo, useEffect, useId, useMemo, useState } from 'react';\n\nimport Image from '@/Image';\nimport { useMermaid } from '@/hooks/useMermaid';\n\nimport { mermaidThemes } from '../const';\nimport type { SyntaxMermaidProps } from '../type';\n\nconst SyntaxMermaid = memo<SyntaxMermaidProps>(\n  ({ ref, children, theme: customTheme, variant, className, style }) => {\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n    const background = useMemo(() => {\n      if (isDefaultTheme) return;\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\n    }, [isDefaultTheme, customTheme]);\n\n    const id = useId();\n    const mermaidId = kebabCase(`mermaid-${id}`);\n    const { data, isLoading } = useMermaid(children, {\n      id: mermaidId,\n      theme: isDefaultTheme ? undefined : customTheme,\n    });\n    const [blobUrl, setBlobUrl] = useState<string>();\n\n    // 组件卸载时清理 Blob URL，避免内存泄漏\n    useEffect(() => {\n      return () => {\n        if (blobUrl) URL.revokeObjectURL(blobUrl);\n      };\n    }, [blobUrl]);\n\n    useEffect(() => {\n      if (isLoading || !data) return;\n      let finalSvgString = data;\n\n      // 修复Firefox点击预览mermaid图时宽高为0导致不显示的异常\n      if (\n        typeof window !== 'undefined' &&\n        typeof navigator !== 'undefined' &&\n        navigator.userAgent.includes('Firefox')\n      ) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n        const svgElement = svgDoc.documentElement;\n        if (svgElement && svgElement.hasAttribute('viewBox')) {\n          const viewBox = svgElement.getAttribute('viewBox')!;\n          const viewBoxParts = viewBox.split(' ');\n          if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {\n            svgElement.setAttribute('width', viewBoxParts[2]);\n            svgElement.setAttribute('height', viewBoxParts[3]);\n          }\n          finalSvgString = new XMLSerializer().serializeToString(svgDoc);\n        }\n      }\n\n      // // 创建Blob对象\n      const svgBlob = new Blob([finalSvgString], { type: 'image/svg+xml' });\n      // // 创建并保存Blob URL\n      const url = URL.createObjectURL(svgBlob);\n      setBlobUrl(url);\n    }, [isLoading, data]);\n\n    if (!blobUrl) return null;\n\n    return (\n      <Image\n        alt={'mermaid'}\n        className={className}\n        maxHeight={480}\n        minWidth={300}\n        objectFit={'contain'}\n        ref={ref}\n        src={blobUrl}\n        style={{\n          background: variant === 'filled' ? background : undefined,\n          borderRadius: 0,\n          margin: 0,\n          minWidth: 300,\n          padding: variant === 'borderless' ? 0 : 16,\n          position: 'relative',\n          width: '100%',\n          ...style,\n        }}\n        variant={'borderless'}\n        width={'100%'}\n      />\n    );\n  },\n  (prevProps, nextProps) => prevProps.children === nextProps.children,\n);\n\nSyntaxMermaid.displayName = 'SyntaxMermaid';\n\nexport default SyntaxMermaid;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gBAAgB,MACnB,EAAE,KAAK,UAAU,OAAO,aAAa,SAAS,WAAW,YAAY;CACpE,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;AAC/B,MAAI,eAAgB;AACpB,SAAO,cAAc,MAAM,SAAS,KAAK,OAAO,YAAY,EAAE;IAC7D,CAAC,gBAAgB,YAAY,CAAC;CAIjC,MAAM,EAAE,MAAM,cAAc,WAAW,UAAU;EAC/C,IAFgB,UAAU,WADjB,OAAO,GAC0B;EAG1C,OAAO,iBAAiB,SAAY;EACrC,CAAC;CACF,MAAM,CAAC,SAAS,cAAc,UAAkB;AAGhD,iBAAgB;AACd,eAAa;AACX,OAAI,QAAS,KAAI,gBAAgB,QAAQ;;IAE1C,CAAC,QAAQ,CAAC;AAEb,iBAAgB;AACd,MAAI,aAAa,CAAC,KAAM;EACxB,IAAI,iBAAiB;AAGrB,MACE,OAAO,WAAW,eAClB,OAAO,cAAc,eACrB,UAAU,UAAU,SAAS,UAAU,EACvC;GAEA,MAAM,SADS,IAAI,WAAW,CACR,gBAAgB,MAAM,gBAAgB;GAC5D,MAAM,aAAa,OAAO;AAC1B,OAAI,cAAc,WAAW,aAAa,UAAU,EAAE;IAEpD,MAAM,eADU,WAAW,aAAa,UAAU,CACrB,MAAM,IAAI;AACvC,QAAI,MAAM,QAAQ,aAAa,IAAI,aAAa,WAAW,GAAG;AAC5D,gBAAW,aAAa,SAAS,aAAa,GAAG;AACjD,gBAAW,aAAa,UAAU,aAAa,GAAG;;AAEpD,qBAAiB,IAAI,eAAe,CAAC,kBAAkB,OAAO;;;EAKlE,MAAM,UAAU,IAAI,KAAK,CAAC,eAAe,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrE,aADY,IAAI,gBAAgB,QAAQ,CACzB;IACd,CAAC,WAAW,KAAK,CAAC;AAErB,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAACA;EACC,KAAK;EACM;EACX,WAAW;EACX,UAAU;EACV,WAAW;EACN;EACL,KAAK;EACL,OAAO;GACL,YAAY,YAAY,WAAW,aAAa;GAChD,cAAc;GACd,QAAQ;GACR,UAAU;GACV,SAAS,YAAY,eAAe,IAAI;GACxC,UAAU;GACV,OAAO;GACP,GAAG;GACJ;EACD,SAAS;EACT,OAAO;GACP;IAGL,WAAW,cAAc,UAAU,aAAa,UAAU,SAC5D;AAED,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Mermaid/const.d.mts

@@ -0,0 +1,10 @@
+//#region src/Mermaid/const.d.ts
+interface MermaidThemeItem {
+  background?: string;
+  displayName: string;
+  id: string;
+}
+declare const mermaidThemes: MermaidThemeItem[];
+//#endregion
+export { mermaidThemes };
+//# sourceMappingURL=const.d.mts.map

package/es/Mermaid/const.mjs

@@ -0,0 +1,36 @@
+//#region src/Mermaid/const.ts
+const mermaidThemes = [
+	{
+		displayName: "Lobe Theme",
+		id: "lobe-theme"
+	},
+	{
+		background: "#fbf9ff",
+		displayName: "Mermaid Default",
+		id: "default"
+	},
+	{
+		background: "#fffcf8",
+		displayName: "Mermaid Base",
+		id: "base"
+	},
+	{
+		background: "#000",
+		displayName: "Mermaid Dark",
+		id: "dark"
+	},
+	{
+		background: "#f9ffeb",
+		displayName: "Mermaid Forest",
+		id: "forest"
+	},
+	{
+		background: "#fff",
+		displayName: "Mermaid Neutral",
+		id: "neutral"
+	}
+];
+
+//#endregion
+export { mermaidThemes };
+//# sourceMappingURL=const.mjs.map

package/es/Mermaid/const.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.mjs","names":["mermaidThemes: MermaidThemeItem[]"],"sources":["../../src/Mermaid/const.ts"],"sourcesContent":["interface MermaidThemeItem {\n  background?: string;\n  displayName: string;\n  id: string;\n}\n\nexport const mermaidThemes: MermaidThemeItem[] = [\n  {\n    displayName: 'Lobe Theme',\n    id: 'lobe-theme',\n  },\n  {\n    background: '#fbf9ff',\n    displayName: 'Mermaid Default',\n    id: 'default',\n  },\n  {\n    background: '#fffcf8',\n    displayName: 'Mermaid Base',\n    id: 'base',\n  },\n  {\n    background: '#000',\n    displayName: 'Mermaid Dark',\n    id: 'dark',\n  },\n  {\n    background: '#f9ffeb',\n    displayName: 'Mermaid Forest',\n    id: 'forest',\n  },\n  {\n    background: '#fff',\n    displayName: 'Mermaid Neutral',\n    id: 'neutral',\n  },\n];\n"],"mappings":";AAMA,MAAaA,gBAAoC;CAC/C;EACE,aAAa;EACb,IAAI;EACL;CACD;EACE,YAAY;EACZ,aAAa;EACb,IAAI;EACL;CACD;EACE,YAAY;EACZ,aAAa;EACb,IAAI;EACL;CACD;EACE,YAAY;EACZ,aAAa;EACb,IAAI;EACL;CACD;EACE,YAAY;EACZ,aAAa;EACb,IAAI;EACL;CACD;EACE,YAAY;EACZ,aAAa;EACb,IAAI;EACL;CACF"}

package/es/Mermaid/index.d.mts

@@ -0,0 +1,5 @@
+import { mermaidThemes } from "./const.mjs";
+import { MermaidProps, SyntaxMermaidProps } from "./type.mjs";
+import { Mermaid } from "./Mermaid.mjs";
+import { SyntaxMermaid } from "./SyntaxMermaid/index.mjs";
+export { MermaidProps, SyntaxMermaid, SyntaxMermaidProps, Mermaid as default, mermaidThemes };

package/es/Mermaid/index.mjs

@@ -0,0 +1,5 @@
+import { mermaidThemes } from "./const.mjs";
+import SyntaxMermaid_default from "./SyntaxMermaid/index.mjs";
+import Mermaid_default from "./Mermaid.mjs";
+
+export { SyntaxMermaid_default as SyntaxMermaid, Mermaid_default as default, mermaidThemes };

package/es/Mermaid/type.d.mts

@@ -0,0 +1,53 @@
+import { DivProps } from "../types/index.mjs";
+import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { MermaidConfig } from "mermaid/dist/config.type";
+
+//#region src/Mermaid/type.d.ts
+interface SyntaxMermaidProps {
+  children: string;
+  className?: string;
+  enablePanZoom?: MermaidProps['enablePanZoom'];
+  ref?: Ref<HTMLDivElement>;
+  style?: CSSProperties;
+  theme?: MermaidProps['theme'];
+  variant?: MermaidProps['variant'];
+}
+interface MermaidProps extends DivProps {
+  actionIconSize?: ActionIconProps['size'];
+  actionsRender?: (props: {
+    actionIconSize: ActionIconProps['size'];
+    content: string;
+    getContent: () => string;
+    originalNode: ReactNode;
+  }) => ReactNode;
+  bodyRender?: (props: {
+    content: string;
+    originalNode: ReactNode;
+  }) => ReactNode;
+  children: string;
+  classNames?: {
+    body?: string;
+    content?: string;
+    header?: string;
+  };
+  copyable?: boolean;
+  defaultExpand?: boolean;
+  enablePanZoom?: boolean;
+  fileName?: string;
+  fullFeatured?: boolean;
+  language?: string;
+  shadow?: boolean;
+  showLanguage?: boolean;
+  styles?: {
+    body?: CSSProperties;
+    content?: CSSProperties;
+    header?: CSSProperties;
+  };
+  theme?: 'lobe-theme' | MermaidConfig['theme'];
+  variant?: 'filled' | 'outlined' | 'borderless';
+}
+//#endregion
+export { MermaidProps, SyntaxMermaidProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Modal/Modal.d.mts

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

package/es/Modal/Modal.mjs

@@ -0,0 +1,118 @@
+'use client';
+
+import Icon_default from "../Icon/Icon.mjs";
+import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
+import { useStyles } from "./style.mjs";
+import { Button, ConfigProvider, Drawer, Modal } from "antd";
+import { memo, useState } from "react";
+import { useResponsive } from "antd-style";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Maximize2, Minimize2, X } from "lucide-react";
+
+//#region src/Modal/Modal.tsx
+const Modal$1 = memo(({ panelRef, allowFullscreen, children, title = " ", className, classNames, width = 700, onCancel, open, destroyOnHidden, paddings, height = "75dvh", enableResponsive = true, footer, styles: customStyles, okText, onOk, cancelText, okButtonProps, cancelButtonProps, confirmLoading, ...rest }) => {
+	const [fullscreen, setFullscreen] = useState(false);
+	const { mobile } = useResponsive();
+	const { styles, cx: cx$1, theme } = useStyles();
+	const hideFooter = footer === false || footer === null;
+	if (enableResponsive && mobile) return /* @__PURE__ */ jsx(ConfigProvider, {
+		theme: { token: { colorBgElevated: theme.colorBgContainer } },
+		children: /* @__PURE__ */ jsx(Drawer, {
+			className: cx$1(styles.drawerContent, className),
+			classNames: typeof classNames === "function" ? classNames : {
+				...classNames,
+				wrapper: cx$1(styles.wrap, classNames?.wrapper)
+			},
+			closeIcon: /* @__PURE__ */ jsx(ActionIcon_default, { icon: X }),
+			destroyOnHidden,
+			extra: allowFullscreen && /* @__PURE__ */ jsx(ActionIcon_default, {
+				icon: fullscreen ? Minimize2 : Maximize2,
+				onClick: () => setFullscreen(!fullscreen)
+			}),
+			footer: hideFooter ? null : footer || /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				color: "default",
+				onClick: onCancel,
+				variant: "filled",
+				...cancelButtonProps,
+				children: cancelText || "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				loading: confirmLoading,
+				onClick: onOk,
+				type: "primary",
+				...okButtonProps,
+				style: {
+					marginInlineStart: 8,
+					...okButtonProps?.style
+				},
+				children: okText || "OK"
+			})] }),
+			height: fullscreen ? "calc(100% - env(safe-area-inset-top))" : height,
+			onClose: onCancel,
+			open,
+			panelRef,
+			placement: "bottom",
+			styles: typeof customStyles === "function" ? customStyles : {
+				...customStyles,
+				body: {
+					paddingBlock: `16px ${footer ? 0 : "16px"}`,
+					paddingInline: paddings?.desktop ?? 16,
+					...customStyles?.body
+				}
+			},
+			title,
+			...rest,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(ConfigProvider, {
+		theme: { token: { colorBgElevated: theme.colorBgContainer } },
+		children: /* @__PURE__ */ jsx(Modal, {
+			cancelButtonProps: {
+				color: "default",
+				variant: "filled",
+				...cancelButtonProps
+			},
+			cancelText,
+			className: cx$1(styles.content, className),
+			classNames: typeof classNames === "function" ? classNames : {
+				...classNames,
+				wrapper: cx$1(styles.wrap, classNames?.wrapper)
+			},
+			closable: true,
+			closeIcon: /* @__PURE__ */ jsx(Icon_default, {
+				icon: X,
+				size: 20
+			}),
+			confirmLoading,
+			destroyOnHidden,
+			footer: hideFooter ? null : footer,
+			maskClosable: true,
+			okButtonProps,
+			okText,
+			onCancel,
+			onOk,
+			open,
+			panelRef,
+			styles: typeof customStyles === "function" ? customStyles : {
+				...customStyles,
+				body: {
+					maxHeight: height,
+					overflow: "hidden auto",
+					paddingBlock: `0 ${footer === null ? "16px" : 0}`,
+					paddingInline: paddings?.desktop ?? 16,
+					...customStyles?.body
+				}
+			},
+			title,
+			width,
+			...rest,
+			children
+		})
+	});
+});
+Modal$1.displayName = "Modal";
+var Modal_default = Modal$1;
+
+//#endregion
+export { Modal_default as default };
+//# sourceMappingURL=Modal.mjs.map

package/es/Modal/Modal.mjs.map

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

package/es/Modal/index.d.mts

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

package/es/Modal/index.mjs

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

package/es/Modal/style.mjs

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

package/es/Modal/style.mjs.map

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

package/es/Modal/type.d.mts

@@ -0,0 +1,14 @@
+import { ModalProps } from "antd";
+
+//#region src/Modal/type.d.ts
+type ModalProps$1 = Omit<ModalProps, 'okType' | 'wrapClassName'> & {
+  allowFullscreen?: boolean;
+  enableResponsive?: boolean;
+  paddings?: {
+    desktop?: number;
+    mobile?: number;
+  };
+};
+//#endregion
+export { ModalProps$1 as ModalProps };
+//# sourceMappingURL=type.d.mts.map

package/es/ScrollShadow/ScrollShadow.d.mts

@@ -0,0 +1,8 @@
+import { ScrollShadowProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/ScrollShadow/ScrollShadow.d.ts
+declare const ScrollShadow: FC<ScrollShadowProps>;
+//#endregion
+export { ScrollShadow };
+//# sourceMappingURL=ScrollShadow.d.mts.map

package/es/ScrollShadow/ScrollShadow.mjs

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

package/es/ScrollShadow/ScrollShadow.mjs.map

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

package/es/ScrollShadow/index.d.mts

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

package/es/ScrollShadow/index.mjs

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