@jinmi/ui 0.0.0-stage → 6.0.1

package/es/FileTypeIcon/FileTypeIcon.mjs

@@ -0,0 +1,63 @@
+"use client";
+import Center from "../Flex/Center.mjs";
+import { styles } from "./style.mjs";
+import FileIcon from "./components/FileIcon.mjs";
+import FolderIcon from "./components/FolderIcon.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx, useThemeMode } from "antd-style";
+//#region src/FileTypeIcon/FileTypeIcon.tsx
+const FileTypeIcon = ({ icon, color, filetype, type = "file", size = 48, style, variant, className, ref, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const isMono = variant === "mono";
+	const filetypeShort = useMemo(() => filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype, [filetype]);
+	const fontSize = useMemo(() => {
+		if (filetypeShort && filetypeShort.length > 3) return 24 / (4 + (filetypeShort.length - 3));
+		return 6;
+	}, [filetypeShort]);
+	const iconColor = useMemo(() => isMono ? isDarkMode ? cssVar.colorFill : cssVar.colorBgContainer : color || cssVar.geekblue, [
+		isMono,
+		isDarkMode,
+		color
+	]);
+	const content = type === "file" ? /* @__PURE__ */ jsx(FileIcon, {
+		filetypeShort,
+		fontSize,
+		hasIcon: !!icon,
+		iconColor,
+		isMono,
+		size,
+		...rest
+	}) : /* @__PURE__ */ jsx(FolderIcon, {
+		filetype,
+		fontSize,
+		hasIcon: !!icon,
+		iconColor,
+		isMono,
+		size,
+		...rest
+	});
+	if (!icon) return content;
+	return /* @__PURE__ */ jsxs(Center, {
+		className: cx(styles.container, className),
+		flex: "none",
+		height: size,
+		ref,
+		style,
+		width: size,
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: styles.inner,
+			style: {
+				fontSize: size / 2.4,
+				top: type === "file" ? "20%" : "16%"
+			},
+			children: icon
+		}), content]
+	});
+};
+FileTypeIcon.displayName = "FileTypeIcon";
+//#endregion
+export { FileTypeIcon as default };
+
+//# sourceMappingURL=FileTypeIcon.mjs.map

package/es/FileTypeIcon/FileTypeIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTypeIcon.mjs","names":[],"sources":["../../src/FileTypeIcon/FileTypeIcon.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cssVar, cx, useThemeMode } from 'antd-style';\r\nimport { type FC, useMemo } from 'react';\r\n\r\nimport { Center } from '@/Flex';\r\n\r\nimport FileIcon from './components/FileIcon';\r\nimport FolderIcon from './components/FolderIcon';\r\nimport { styles } from './style';\r\nimport type { FileTypeIconProps } from './type';\r\n\r\nconst FileTypeIcon: FC<FileTypeIconProps> = ({\r\n  icon,\r\n  color,\r\n  filetype,\r\n  type = 'file',\r\n  size = 48,\r\n  style,\r\n  variant,\r\n  className,\r\n  ref,\r\n  ...rest\r\n}) => {\r\n  const { isDarkMode } = useThemeMode();\r\n  const isMono = variant === 'mono';\r\n\r\n  const filetypeShort = useMemo(\r\n    () => (filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype),\r\n    [filetype],\r\n  );\r\n\r\n  const fontSize = useMemo(() => {\r\n    if (filetypeShort && filetypeShort.length > 3) {\r\n      return 24 / (4 + (filetypeShort.length - 3));\r\n    }\r\n    return 6;\r\n  }, [filetypeShort]);\r\n\r\n  const iconColor = useMemo(\r\n    () =>\r\n      isMono ? (isDarkMode ? cssVar.colorFill : cssVar.colorBgContainer) : color || cssVar.geekblue,\r\n    [isMono, isDarkMode, color],\r\n  );\r\n\r\n  const content =\r\n    type === 'file' ? (\r\n      <FileIcon\r\n        filetypeShort={filetypeShort}\r\n        fontSize={fontSize}\r\n        hasIcon={!!icon}\r\n        iconColor={iconColor}\r\n        isMono={isMono}\r\n        size={size}\r\n        {...rest}\r\n      />\r\n    ) : (\r\n      <FolderIcon\r\n        filetype={filetype}\r\n        fontSize={fontSize}\r\n        hasIcon={!!icon}\r\n        iconColor={iconColor}\r\n        isMono={isMono}\r\n        size={size}\r\n        {...rest}\r\n      />\r\n    );\r\n\r\n  if (!icon) return content;\r\n\r\n  return (\r\n    <Center\r\n      className={cx(styles.container, className)}\r\n      flex={'none'}\r\n      height={size}\r\n      ref={ref}\r\n      style={style}\r\n      width={size}\r\n      {...rest}\r\n    >\r\n      <div\r\n        className={styles.inner}\r\n        style={{\r\n          fontSize: size / 2.4,\r\n          top: type === 'file' ? '20%' : '16%',\r\n        }}\r\n      >\r\n        {icon}\r\n      </div>\r\n      {content}\r\n    </Center>\r\n  );\r\n};\r\n\r\nFileTypeIcon.displayName = 'FileTypeIcon';\r\n\r\nexport default FileTypeIcon;\r\n"],"mappings":";;;;;;;;;AAYA,MAAM,gBAAuC,EAC3C,MACA,OACA,UACA,OAAO,QACP,OAAO,IACP,OACA,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,SAAS,YAAY;CAE3B,MAAM,gBAAgB,cACb,YAAY,SAAS,SAAS,IAAI,SAAS,MAAM,GAAG,CAAC,IAAI,UAChE,CAAC,QAAQ,CACX;CAEA,MAAM,WAAW,cAAc;EAC7B,IAAI,iBAAiB,cAAc,SAAS,GAC1C,OAAO,MAAM,KAAK,cAAc,SAAS;EAE3C,OAAO;CACT,GAAG,CAAC,aAAa,CAAC;CAElB,MAAM,YAAY,cAEd,SAAU,aAAa,OAAO,YAAY,OAAO,mBAAoB,SAAS,OAAO,UACvF;EAAC;EAAQ;EAAY;CAAK,CAC5B;CAEA,MAAM,UACJ,SAAS,SACP,oBAAC,UAAD;EACiB;EACL;EACV,SAAS,CAAC,CAAC;EACA;EACH;EACF;EACN,GAAI;CACL,CAAA,IAED,oBAAC,YAAD;EACY;EACA;EACV,SAAS,CAAC,CAAC;EACA;EACH;EACF;EACN,GAAI;CACL,CAAA;CAGL,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,qBAAC,QAAD;EACE,WAAW,GAAG,OAAO,WAAW,SAAS;EACzC,MAAM;EACN,QAAQ;EACH;EACE;EACP,OAAO;EACP,GAAI;EAPN,UAAA,CASE,oBAAC,OAAD;GACE,WAAW,OAAO;GAClB,OAAO;IACL,UAAU,OAAO;IACjB,KAAK,SAAS,SAAS,QAAQ;GACjC;GAEC,UAAA;EACE,CAAA,GACJ,OACK;;AAEZ;AAEA,aAAa,cAAc"}

package/es/FileTypeIcon/components/FileIcon.mjs

@@ -0,0 +1,45 @@
+import { styles } from "../style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+//#region src/FileTypeIcon/components/FileIcon.tsx
+const FileIcon = ({ size, isMono, hasIcon, iconColor, filetypeShort, className, fontSize, style, ...rest }) => {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cx(styles.icon, !hasIcon && className),
+		height: size,
+		style: hasIcon ? void 0 : style,
+		viewBox: "0 0 24 24",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
+				fill: iconColor
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2l6 6h-4a2 2 0 01-2-2V2z",
+				fill: isMono ? cssVar.colorFill : "#fff",
+				fillOpacity: ".5"
+			}),
+			filetypeShort && /* @__PURE__ */ jsx("text", {
+				fill: isMono ? cssVar.colorTextSecondary : "#fff",
+				fontSize,
+				fontWeight: "bold",
+				textAnchor: "middle",
+				x: "50%",
+				y: "70%",
+				children: filetypeShort.toUpperCase()
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z",
+				fill: "transparent",
+				stroke: cssVar.colorFillSecondary,
+				strokeWidth: .5
+			})
+		]
+	});
+};
+//#endregion
+export { FileIcon as default };
+
+//# sourceMappingURL=FileIcon.mjs.map

package/es/FileTypeIcon/components/FileIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.mjs","names":[],"sources":["../../../src/FileTypeIcon/components/FileIcon.tsx"],"sourcesContent":["import { cssVar, cx } from 'antd-style';\r\nimport { type FC } from 'react';\r\n\r\nimport type { SvgProps } from '@/types';\r\n\r\nimport { styles } from '../style';\r\n\r\ninterface FileIconProps extends SvgProps {\r\n  filetypeShort?: string;\r\n  fontSize?: number;\r\n  hasIcon?: boolean;\r\n  iconColor?: string;\r\n  isMono?: boolean;\r\n  size?: number;\r\n}\r\n\r\nconst FileIcon: FC<FileIconProps> = ({\r\n  size,\r\n  isMono,\r\n  hasIcon,\r\n  iconColor,\r\n  filetypeShort,\r\n  className,\r\n  fontSize,\r\n  style,\r\n  ...rest\r\n}) => {\r\n  return (\r\n    <svg\r\n      className={cx(styles.icon, !hasIcon && className)}\r\n      height={size}\r\n      style={hasIcon ? undefined : style}\r\n      viewBox=\"0 0 24 24\"\r\n      width={size}\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      {...rest}\r\n    >\r\n      <path d=\"M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z\" fill={iconColor} />\r\n      <path\r\n        d=\"M14 2l6 6h-4a2 2 0 01-2-2V2z\"\r\n        fill={isMono ? cssVar.colorFill : '#fff'}\r\n        fillOpacity=\".5\"\r\n      />\r\n      {filetypeShort && (\r\n        <text\r\n          fill={isMono ? cssVar.colorTextSecondary : '#fff'}\r\n          fontSize={fontSize}\r\n          fontWeight=\"bold\"\r\n          textAnchor=\"middle\"\r\n          x=\"50%\"\r\n          y=\"70%\"\r\n        >\r\n          {filetypeShort.toUpperCase()}\r\n        </text>\r\n      )}\r\n      <path\r\n        d=\"M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6z\"\r\n        fill={'transparent'}\r\n        stroke={cssVar.colorFillSecondary}\r\n        strokeWidth={0.5}\r\n      />\r\n    </svg>\r\n  );\r\n};\r\n\r\nexport default FileIcon;\r\n"],"mappings":";;;;AAgBA,MAAM,YAA+B,EACnC,MACA,QACA,SACA,WACA,eACA,WACA,UACA,OACA,GAAG,WACC;CACJ,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,CAAC,WAAW,SAAS;EAChD,QAAQ;EACR,OAAO,UAAU,KAAA,IAAY;EAC7B,SAAQ;EACR,OAAO;EACP,OAAM;EACN,GAAI;EAPN,UAAA;GASE,oBAAC,QAAD;IAAM,GAAE;IAA4D,MAAM;GAAY,CAAA;GACtF,oBAAC,QAAD;IACE,GAAE;IACF,MAAM,SAAS,OAAO,YAAY;IAClC,aAAY;GACb,CAAA;GACA,iBACC,oBAAC,QAAD;IACE,MAAM,SAAS,OAAO,qBAAqB;IACjC;IACV,YAAW;IACX,YAAW;IACX,GAAE;IACF,GAAE;IAED,UAAA,cAAc,YAAY;GACvB,CAAA;GAER,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;IACN,QAAQ,OAAO;IACf,aAAa;GACd,CAAA;EACE;;AAET"}

package/es/FileTypeIcon/components/FolderIcon.mjs

@@ -0,0 +1,33 @@
+import { styles } from "../style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+//#region src/FileTypeIcon/components/FolderIcon.tsx
+const FolderIcon = ({ size, isMono, hasIcon, iconColor, filetype, className, fontSize, style, ...rest }) => {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cx(styles.icon, !hasIcon && className),
+		height: size,
+		style: hasIcon ? void 0 : style,
+		viewBox: "0 0 24 24",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z",
+			fill: iconColor,
+			stroke: cssVar.colorFillSecondary,
+			strokeWidth: .5
+		}), !hasIcon && filetype && /* @__PURE__ */ jsx("text", {
+			fill: isMono ? cssVar.colorTextSecondary : "#fff",
+			fontSize,
+			fontWeight: "bold",
+			textAnchor: "middle",
+			x: "50%",
+			y: "70%",
+			children: filetype.toUpperCase()
+		})]
+	});
+};
+//#endregion
+export { FolderIcon as default };
+
+//# sourceMappingURL=FolderIcon.mjs.map

package/es/FileTypeIcon/components/FolderIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderIcon.mjs","names":[],"sources":["../../../src/FileTypeIcon/components/FolderIcon.tsx"],"sourcesContent":["import { cssVar, cx } from 'antd-style';\r\nimport { type FC } from 'react';\r\n\r\nimport type { SvgProps } from '@/types';\r\n\r\nimport { styles } from '../style';\r\n\r\ninterface FolderIconProps extends SvgProps {\r\n  filetype?: string;\r\n  fontSize?: number;\r\n  hasIcon?: boolean;\r\n  iconColor?: string;\r\n  isMono?: boolean;\r\n  size?: number;\r\n}\r\n\r\nconst FolderIcon: FC<FolderIconProps> = ({\r\n  size,\r\n  isMono,\r\n  hasIcon,\r\n  iconColor,\r\n  filetype,\r\n  className,\r\n  fontSize,\r\n  style,\r\n  ...rest\r\n}) => {\r\n  return (\r\n    <svg\r\n      className={cx(styles.icon, !hasIcon && className)}\r\n      height={size}\r\n      style={hasIcon ? undefined : style}\r\n      viewBox=\"0 0 24 24\"\r\n      width={size}\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      {...rest}\r\n    >\r\n      <path\r\n        d=\"M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z\"\r\n        fill={iconColor}\r\n        stroke={cssVar.colorFillSecondary}\r\n        strokeWidth={0.5}\r\n      />\r\n      {!hasIcon && filetype && (\r\n        <text\r\n          fill={isMono ? cssVar.colorTextSecondary : '#fff'}\r\n          fontSize={fontSize}\r\n          fontWeight=\"bold\"\r\n          textAnchor=\"middle\"\r\n          x=\"50%\"\r\n          y=\"70%\"\r\n        >\r\n          {filetype.toUpperCase()}\r\n        </text>\r\n      )}\r\n    </svg>\r\n  );\r\n};\r\n\r\nexport default FolderIcon;\r\n"],"mappings":";;;;AAgBA,MAAM,cAAmC,EACvC,MACA,QACA,SACA,WACA,UACA,WACA,UACA,OACA,GAAG,WACC;CACJ,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,CAAC,WAAW,SAAS;EAChD,QAAQ;EACR,OAAO,UAAU,KAAA,IAAY;EAC7B,SAAQ;EACR,OAAO;EACP,OAAM;EACN,GAAI;EAPN,UAAA,CASE,oBAAC,QAAD;GACE,GAAE;GACF,MAAM;GACN,QAAQ,OAAO;GACf,aAAa;EACd,CAAA,GACA,CAAC,WAAW,YACX,oBAAC,QAAD;GACE,MAAM,SAAS,OAAO,qBAAqB;GACjC;GACV,YAAW;GACX,YAAW;GACX,GAAE;GACF,GAAE;GAED,UAAA,SAAS,YAAY;EAClB,CAAA,CAEL;;AAET"}

package/es/FileTypeIcon/index.d.mts

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

package/es/FileTypeIcon/index.d.ts

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

package/es/FileTypeIcon/index.js

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

package/es/FileTypeIcon/index.mjs

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

package/es/FileTypeIcon/style.mjs

@@ -0,0 +1,22 @@
+import { createStaticStyles } from "antd-style";
+//#region src/FileTypeIcon/style.ts
+const styles = createStaticStyles(({ css }) => {
+	return {
+		container: css`
+      position: relative;
+    `,
+		icon: css`
+      position: relative;
+      flex: none;
+      line-height: 1;
+    `,
+		inner: css`
+      position: absolute;
+      z-index: 1;
+    `
+	};
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/FileTypeIcon/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FileTypeIcon/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css }) => {\r\n  return {\r\n    container: css`\r\n      position: relative;\r\n    `,\r\n    icon: css`\r\n      position: relative;\r\n      flex: none;\r\n      line-height: 1;\r\n    `,\r\n    inner: css`\r\n      position: absolute;\r\n      z-index: 1;\r\n    `,\r\n  };\r\n});\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO;EACL,WAAW,GAAG;;;EAGd,MAAM,GAAG;;;;;EAKT,OAAO,GAAG;;;;CAIZ;AACF,CAAC"}

package/es/FileTypeIcon/type.d.mts

@@ -0,0 +1,16 @@
+import { DivProps, SvgProps } from "../types/index.mjs";
+import { ReactNode, Ref } from "react";
+//#region src/FileTypeIcon/type.d.ts
+type IconProps = SvgProps & DivProps;
+interface FileTypeIconProps extends IconProps {
+  color?: string;
+  filetype?: string;
+  icon?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+  size?: number;
+  type?: 'file' | 'folder';
+  variant?: 'color' | 'mono';
+}
+//#endregion
+export { FileTypeIconProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Flex/Center.d.mts

@@ -0,0 +1,7 @@
+import { CenterProps } from "./type.mjs";
+import { FC } from "react";
+//#region src/Flex/Center.d.ts
+declare const Center: FC<CenterProps>;
+//#endregion
+export { Center as default };
+//# sourceMappingURL=Center.d.mts.map

package/es/Flex/Center.mjs

@@ -0,0 +1,14 @@
+import FlexBasic_default from "./FlexBasic.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Flex/Center.tsx
+const Center = ({ children, ref, ...props }) => /* @__PURE__ */ jsx(FlexBasic_default, {
+	...props,
+	align: "center",
+	justify: "center",
+	ref,
+	children
+});
+//#endregion
+export { Center as default };
+
+//# sourceMappingURL=Center.mjs.map

package/es/Flex/Center.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center.mjs","names":["FlexBasic"],"sources":["../../src/Flex/Center.tsx"],"sourcesContent":["import { type FC } from 'react';\r\n\r\nimport FlexBasic from './FlexBasic';\r\nimport type { CenterProps } from './type';\r\n\r\nconst Center: FC<CenterProps> = ({ children, ref, ...props }) => (\r\n  <FlexBasic {...props} align=\"center\" justify=\"center\" ref={ref}>\r\n    {children}\r\n  </FlexBasic>\r\n);\r\n\r\nexport default Center;\r\n"],"mappings":";;;AAKA,MAAM,UAA2B,EAAE,UAAU,KAAK,GAAG,YACnD,oBAACA,mBAAD;CAAW,GAAI;CAAO,OAAM;CAAS,SAAQ;CAAc;CACxD;AACQ,CAAA"}

package/es/Flex/FlexBasic.d.mts

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

package/es/Flex/FlexBasic.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from "./utils.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Flex/FlexBasic.tsx
+const FlexBasic = ({ visible, flex, gap, direction, horizontal, align, justify, distribution, height, width, allowShrink, padding, paddingInline, paddingBlock, prefixCls, as: Container = "div", className, style, children, wrap, ref, ...props }) => {
+	const justifyContent = justify || distribution;
+	const calcWidth = () => {
+		if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent)) return "100%";
+		return getCssValue(width);
+	};
+	const finalWidth = calcWidth();
+	const mergedStyle = {
+		...flex !== void 0 ? { "--jinmi-flex": String(flex) } : {},
+		...direction || horizontal ? { "--jinmi-flex-direction": getFlexDirection(direction, horizontal) } : {},
+		...wrap !== void 0 ? { "--jinmi-flex-wrap": wrap } : {},
+		...justifyContent !== void 0 ? { "--jinmi-flex-justify": justifyContent } : {},
+		...align !== void 0 ? { "--jinmi-flex-align": align } : {},
+		...finalWidth !== void 0 ? { "--jinmi-flex-width": finalWidth } : {},
+		...height !== void 0 ? { "--jinmi-flex-height": getCssValue(height) } : {},
+		...padding !== void 0 ? { "--jinmi-flex-padding": getCssValue(padding) } : {},
+		...paddingInline !== void 0 ? { "--jinmi-flex-padding-inline": getCssValue(paddingInline) } : {},
+		...paddingBlock !== void 0 ? { "--jinmi-flex-padding-block": getCssValue(paddingBlock) } : {},
+		...gap !== void 0 ? { "--jinmi-flex-gap": getCssValue(gap) } : {},
+		...allowShrink ? { minWidth: 0 } : {},
+		...style
+	};
+	const baseClassName = "jinmi-flex";
+	const mergedClassName = [
+		baseClassName,
+		visible === false ? `${baseClassName}--hidden` : void 0,
+		prefixCls ? `${prefixCls}-flex` : void 0,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Container, {
+		ref,
+		...props,
+		className: mergedClassName,
+		style: mergedStyle,
+		children
+	});
+};
+var FlexBasic_default = memo(FlexBasic);
+//#endregion
+export { FlexBasic_default as default };
+
+//# sourceMappingURL=FlexBasic.mjs.map

package/es/Flex/FlexBasic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexBasic.mjs","names":[],"sources":["../../src/Flex/FlexBasic.tsx"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, type ElementType, type FC, memo } from 'react';\n\nimport type { FlexBasicProps } from './type';\nimport { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from './utils';\n\nconst FlexBasic: FC<FlexBasicProps> = ({\n  visible,\n  flex,\n  gap,\n  direction,\n  horizontal,\n  align,\n  justify,\n  distribution,\n  height,\n  width,\n  allowShrink,\n  padding,\n  paddingInline,\n  paddingBlock,\n  prefixCls,\n  as: Container = 'div' as ElementType,\n  className,\n  style,\n  children,\n  wrap,\n  ref,\n  ...props\n}) => {\n  const justifyContent = justify || distribution;\n\n  const calcWidth = () => {\n    if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent))\n      return '100%';\n\n    return getCssValue(width);\n  };\n  const finalWidth = calcWidth();\n\n  const cssVars: Record<string, string | number> = {\n    ...(flex !== undefined ? { '--jinmi-flex': String(flex) } : {}),\n    ...(direction || horizontal\n      ? { '--jinmi-flex-direction': getFlexDirection(direction, horizontal) }\n      : {}),\n    ...(wrap !== undefined ? { '--jinmi-flex-wrap': wrap } : {}),\n    ...(justifyContent !== undefined ? { '--jinmi-flex-justify': justifyContent } : {}),\n    ...(align !== undefined ? { '--jinmi-flex-align': align } : {}),\n    ...(finalWidth !== undefined ? { '--jinmi-flex-width': finalWidth } : {}),\n    ...(height !== undefined ? { '--jinmi-flex-height': getCssValue(height) } : {}),\n    ...(padding !== undefined ? { '--jinmi-flex-padding': getCssValue(padding) } : {}),\n    ...(paddingInline !== undefined\n      ? { '--jinmi-flex-padding-inline': getCssValue(paddingInline) }\n      : {}),\n    ...(paddingBlock !== undefined\n      ? { '--jinmi-flex-padding-block': getCssValue(paddingBlock) }\n      : {}),\n    ...(gap !== undefined ? { '--jinmi-flex-gap': getCssValue(gap) } : {}),\n  };\n\n  const mergedStyle: CSSProperties = {\n    ...(cssVars as CSSProperties),\n    ...(allowShrink ? { minWidth: 0 } : {}),\n    ...style,\n  };\n\n  const baseClassName = 'jinmi-flex';\n  const mergedClassName = [\n    baseClassName,\n    visible === false ? `${baseClassName}--hidden` : undefined,\n    prefixCls ? `${prefixCls}-flex` : undefined,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Container ref={ref} {...props} className={mergedClassName} style={mergedStyle}>\n      {children}\n    </Container>\n  );\n};\n\nexport default memo(FlexBasic);\n"],"mappings":";;;;;AAOA,MAAM,aAAiC,EACrC,SACA,MACA,KACA,WACA,YACA,OACA,SACA,cACA,QACA,OACA,aACA,SACA,eACA,cACA,WACA,IAAI,YAAY,OAChB,WACA,OACA,UACA,MACA,KACA,GAAG,YACC;CACJ,MAAM,iBAAiB,WAAW;CAElC,MAAM,kBAAkB;EACtB,IAAI,aAAa,WAAW,UAAU,KAAK,CAAC,SAAS,oBAAoB,cAAc,GACrF,OAAO;EAET,OAAO,YAAY,KAAK;CAC1B;CACA,MAAM,aAAa,UAAU;CAsB7B,MAAM,cAA6B;EAnBjC,GAAI,SAAS,KAAA,IAAY,EAAE,gBAAgB,OAAO,IAAI,EAAE,IAAI,CAAC;EAC7D,GAAI,aAAa,aACb,EAAE,0BAA0B,iBAAiB,WAAW,UAAU,EAAE,IACpE,CAAC;EACL,GAAI,SAAS,KAAA,IAAY,EAAE,qBAAqB,KAAK,IAAI,CAAC;EAC1D,GAAI,mBAAmB,KAAA,IAAY,EAAE,wBAAwB,eAAe,IAAI,CAAC;EACjF,GAAI,UAAU,KAAA,IAAY,EAAE,sBAAsB,MAAM,IAAI,CAAC;EAC7D,GAAI,eAAe,KAAA,IAAY,EAAE,sBAAsB,WAAW,IAAI,CAAC;EACvE,GAAI,WAAW,KAAA,IAAY,EAAE,uBAAuB,YAAY,MAAM,EAAE,IAAI,CAAC;EAC7E,GAAI,YAAY,KAAA,IAAY,EAAE,wBAAwB,YAAY,OAAO,EAAE,IAAI,CAAC;EAChF,GAAI,kBAAkB,KAAA,IAClB,EAAE,+BAA+B,YAAY,aAAa,EAAE,IAC5D,CAAC;EACL,GAAI,iBAAiB,KAAA,IACjB,EAAE,8BAA8B,YAAY,YAAY,EAAE,IAC1D,CAAC;EACL,GAAI,QAAQ,KAAA,IAAY,EAAE,oBAAoB,YAAY,GAAG,EAAE,IAAI,CAAC;EAKpE,GAAI,cAAc,EAAE,UAAU,EAAE,IAAI,CAAC;EACrC,GAAG;CACL;CAEA,MAAM,gBAAgB;CACtB,MAAM,kBAAkB;EACtB;EACA,YAAY,QAAQ,GAAG,cAAc,YAAY,KAAA;EACjD,YAAY,GAAG,UAAU,SAAS,KAAA;EAClC;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,oBAAC,WAAD;EAAgB;EAAK,GAAI;EAAO,WAAW;EAAiB,OAAO;EAChE;CACQ,CAAA;AAEf;AAEA,IAAA,oBAAe,KAAK,SAAS"}

package/es/Flex/Flexbox.d.mts

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

package/es/Flex/index.d.mts

@@ -0,0 +1,5 @@
+import { CenterProps, ContentPosition, FlexBasicProps, FlexDirection, FlexboxProps } from "./type.mjs";
+import Center from "./Center.mjs";
+import _default from "./FlexBasic.mjs";
+import "./Flexbox.mjs";
+export { Center, type CenterProps, type ContentPosition, _default as FlexBasic, type FlexBasicProps, type FlexDirection, _default as Flexbox, type FlexboxProps };

package/es/Flex/index.d.ts

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

package/es/Flex/index.js

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

package/es/Flex/index.mjs

@@ -0,0 +1,3 @@
+import FlexBasic_default from "./FlexBasic.mjs";
+import Center from "./Center.mjs";
+export { Center, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox };

package/es/Flex/type.d.mts

@@ -0,0 +1,115 @@
+import { CSSProperties, DOMAttributes, ElementType, HTMLAttributes, ReactNode, Ref } from "react";
+//#region src/Flex/type.d.ts
+type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start' | 'stretch' | 'baseline';
+type FlexDirection = 'vertical' | 'vertical-reverse' | 'horizontal' | 'horizontal-reverse';
+type DivProps = DOMAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>;
+type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
+/**
+ * Flexbox 布局组件的接口
+ */
+interface IFlexbox {
+  /**
+   * 交叉轴对齐方式
+   * @default "stretch"
+   */
+  align?: ContentPosition;
+  /**
+   * 允许在 flex 布局中正常收缩（通过将根节点的 min-width 设为 0 实现）
+   *
+   * 在 Flex 容器（或作为 flex item）中，启用该选项可避免内容导致的溢出，
+   * 让元素可以正常 shrink（常见于文本省略、滚动容器等场景）。
+   * @default false
+   */
+  allowShrink?: boolean;
+  /**
+   * 渲染的 HTML 元素类型
+   * @default "div"
+   */
+  as?: ElementType;
+  /**
+   * 子元素
+   */
+  children?: ReactNode;
+  /**
+   * 自定义类名
+   */
+  className?: string;
+  /**
+   * 主轴方向
+   * @default "horizontal"
+   */
+  direction?: FlexDirection;
+  /**
+   * 内容分布
+   */
+  distribution?: CSSProperties['justifyContent'];
+  /**
+   * flex 值
+   * @default "0 1 auto"
+   */
+  flex?: number | string;
+  /**
+   * 主轴方向上的间距
+   * @default 0
+   */
+  gap?: CommonSpaceNumber | number | string;
+  /**
+   * 高度
+   * @default "auto"
+   */
+  height?: number | string;
+  /**
+   * 是否横向
+   * @default false
+   */
+  horizontal?: boolean;
+  /**
+   * 主轴对齐方式
+   */
+  justify?: CSSProperties['justifyContent'];
+  /**
+   * 内边距
+   * @default 0
+   */
+  padding?: string | number | CommonSpaceNumber;
+  /**
+   * 块内边距
+   */
+  paddingBlock?: string | number;
+  /**
+   * 内联内边距
+   */
+  paddingInline?: string | number;
+  /**
+   * 类名前缀
+   */
+  prefixCls?: string;
+  /**
+   * ref 引用
+   */
+  ref?: Ref<HTMLElement>;
+  /**
+   * 自定义样式
+   */
+  style?: CSSProperties;
+  /**
+   * 是否显示
+   * @default true
+   */
+  visible?: boolean;
+  /**
+   * 宽度
+   * @default "auto"
+   */
+  width?: number | string;
+  /**
+   * 换行方式
+   */
+  wrap?: CSSProperties['flexWrap'];
+}
+interface FlexBasicProps extends IFlexbox, DivProps {}
+type FlexboxProps = FlexBasicProps;
+type CenterProps = Omit<FlexBasicProps, 'distribution' | 'direction' | 'align'>;
+//#endregion
+export { CenterProps, CommonSpaceNumber, ContentPosition, DivProps, FlexBasicProps, FlexDirection, FlexboxProps, IFlexbox };
+//# sourceMappingURL=type.d.mts.map

package/es/Flex/utils.mjs

@@ -0,0 +1,25 @@
+//#region src/Flex/utils.ts
+const getFlexDirection = (direction, isHorizontal) => {
+	if (isHorizontal) return "row";
+	switch (direction) {
+		case "horizontal": return "row";
+		case "horizontal-reverse": return "row-reverse";
+		case "vertical":
+		default: return "column";
+		case "vertical-reverse": return "column-reverse";
+	}
+};
+const isSpaceDistribution = (distribution) => {
+	if (!distribution) return;
+	return [
+		"space-between",
+		"space-around",
+		"space-evenly"
+	].includes(distribution);
+};
+const isHorizontal = (direction, isHorizontal) => getFlexDirection(direction, isHorizontal) === "row";
+const getCssValue = (value) => typeof value === "number" ? `${value}px` : value;
+//#endregion
+export { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution };
+
+//# sourceMappingURL=utils.mjs.map

package/es/Flex/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Flex/utils.ts"],"sourcesContent":["import type { FlexDirection } from './type';\n\nexport const getPrefix = (prefixCls?: string) => {\n  if (prefixCls) return prefixCls;\n  return 'jinmi';\n};\n\nexport const getFlexDirection = (direction?: FlexDirection, isHorizontal?: boolean) => {\n  if (isHorizontal) return 'row';\n\n  switch (direction) {\n    case 'horizontal': {\n      return 'row';\n    }\n    case 'horizontal-reverse': {\n      return 'row-reverse';\n    }\n    case 'vertical':\n    default: {\n      return 'column';\n    }\n    case 'vertical-reverse': {\n      return 'column-reverse';\n    }\n  }\n};\n\nexport const isSpaceDistribution = (distribution?: string) => {\n  if (!distribution) return;\n  return ['space-between', 'space-around', 'space-evenly'].includes(distribution);\n};\n\nexport const isHorizontal = (direction?: FlexDirection, isHorizontal?: boolean) =>\n  getFlexDirection(direction, isHorizontal) === 'row';\n\nexport const isVertical = (direction?: FlexDirection, isHorizontal?: boolean) =>\n  getFlexDirection(direction, isHorizontal) === 'column';\n\nexport const getCssValue = (value: string | number | undefined) =>\n  typeof value === 'number' ? `${value}px` : value;\n"],"mappings":";AAOA,MAAa,oBAAoB,WAA2B,iBAA2B;CACrF,IAAI,cAAc,OAAO;CAEzB,QAAQ,WAAR;EACE,KAAK,cACH,OAAO;EAET,KAAK,sBACH,OAAO;EAET,KAAK;EACL,SACE,OAAO;EAET,KAAK,oBACH,OAAO;CAEX;AACF;AAEA,MAAa,uBAAuB,iBAA0B;CAC5D,IAAI,CAAC,cAAc;CACnB,OAAO;EAAC;EAAiB;EAAgB;CAAc,CAAC,CAAC,SAAS,YAAY;AAChF;AAEA,MAAa,gBAAgB,WAA2B,iBACtD,iBAAiB,WAAW,YAAY,MAAM;AAKhD,MAAa,eAAe,UAC1B,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM"}

package/es/FluentEmoji/FluentEmoji.d.mts

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

package/es/FluentEmoji/FluentEmoji.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { useCdnFn } from "../ConfigProvider/index.mjs";
+import Center from "../Flex/Center.mjs";
+import Img from "../Img/index.mjs";
+import { styles } from "./style.mjs";
+import { genEmojiUrl } from "./utils.mjs";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/FluentEmoji/FluentEmoji.tsx
+const FluentEmoji = ({ emoji, className, style, type = "3d", size = 40, unoptimized, ref, ...rest }) => {
+	const [loadingFail, setLoadingFail] = useState(false);
+	const genCdnUrl = useCdnFn();
+	const emojiUrl = useMemo(() => genEmojiUrl(emoji, type), [type, emoji]);
+	if (type === "raw" || !emojiUrl || loadingFail) return /* @__PURE__ */ jsx(Center, {
+		className: cx(styles.container, className),
+		flex: "none",
+		height: size,
+		ref,
+		role: "img",
+		style: {
+			fontSize: size * .9,
+			...style
+		},
+		width: size,
+		...rest,
+		children: emoji
+	});
+	return /* @__PURE__ */ jsx(Img, {
+		alt: emoji,
+		className,
+		height: size,
+		loading: "lazy",
+		ref,
+		src: genCdnUrl(emojiUrl),
+		style: {
+			flex: "none",
+			...style
+		},
+		unoptimized,
+		width: size,
+		onError: () => setLoadingFail(true),
+		...rest
+	});
+};
+FluentEmoji.displayName = "FluentEmoji";
+//#endregion
+export { FluentEmoji as default };
+
+//# sourceMappingURL=FluentEmoji.mjs.map

package/es/FluentEmoji/FluentEmoji.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentEmoji.mjs","names":[],"sources":["../../src/FluentEmoji/FluentEmoji.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { type FC, useMemo, useState } from 'react';\r\n\r\nimport { useCdnFn } from '@/ConfigProvider';\r\nimport { Center } from '@/Flex';\r\nimport Img from '@/Img';\r\n\r\nimport { styles } from './style';\r\nimport type { FluentEmojiProps } from './type';\r\nimport { genEmojiUrl } from './utils';\r\n\r\nconst FluentEmoji: FC<FluentEmojiProps> = ({\r\n  emoji,\r\n  className,\r\n  style,\r\n  type = '3d',\r\n  size = 40,\r\n  unoptimized,\r\n  ref,\r\n  ...rest\r\n}) => {\r\n  const [loadingFail, setLoadingFail] = useState(false);\r\n  const genCdnUrl = useCdnFn();\r\n\r\n  const emojiUrl = useMemo(() => genEmojiUrl(emoji, type), [type, emoji]);\r\n\r\n  if (type === 'raw' || !emojiUrl || loadingFail)\r\n    return (\r\n      <Center\r\n        className={cx(styles.container, className)}\r\n        flex={'none'}\r\n        height={size}\r\n        ref={ref}\r\n        role={'img'}\r\n        style={{ fontSize: size * 0.9, ...style }}\r\n        width={size}\r\n        {...rest}\r\n      >\r\n        {emoji}\r\n      </Center>\r\n    );\r\n\r\n  return (\r\n    <Img\r\n      alt={emoji}\r\n      className={className}\r\n      height={size}\r\n      loading={'lazy'}\r\n      ref={ref}\r\n      src={genCdnUrl(emojiUrl)}\r\n      style={{ flex: 'none', ...style }}\r\n      unoptimized={unoptimized}\r\n      width={size}\r\n      onError={() => setLoadingFail(true)}\r\n      {...rest}\r\n    />\r\n  );\r\n};\r\n\r\nFluentEmoji.displayName = 'FluentEmoji';\r\n\r\nexport default FluentEmoji;\r\n"],"mappings":";;;;;;;;;;AAaA,MAAM,eAAqC,EACzC,OACA,WACA,OACA,OAAO,MACP,OAAO,IACP,aACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,YAAY,SAAS;CAE3B,MAAM,WAAW,cAAc,YAAY,OAAO,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;CAEtE,IAAI,SAAS,SAAS,CAAC,YAAY,aACjC,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,OAAO,WAAW,SAAS;EACzC,MAAM;EACN,QAAQ;EACH;EACL,MAAM;EACN,OAAO;GAAE,UAAU,OAAO;GAAK,GAAG;EAAM;EACxC,OAAO;EACP,GAAI;EAEH,UAAA;CACK,CAAA;CAGZ,OACE,oBAAC,KAAD;EACE,KAAK;EACM;EACX,QAAQ;EACR,SAAS;EACJ;EACL,KAAK,UAAU,QAAQ;EACvB,OAAO;GAAE,MAAM;GAAQ,GAAG;EAAM;EACnB;EACb,OAAO;EACP,eAAe,eAAe,IAAI;EAClC,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/es/FluentEmoji/index.d.mts

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

package/es/FluentEmoji/index.d.ts

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

package/es/FluentEmoji/index.js

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

package/es/FluentEmoji/index.mjs

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

package/es/FluentEmoji/style.mjs

@@ -0,0 +1,13 @@
+import { createStaticStyles } from "antd-style";
+//#region src/FluentEmoji/style.ts
+const styles = createStaticStyles(({ css }) => {
+	return { container: css`
+      position: relative;
+      line-height: 1;
+      text-align: center;
+    ` };
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/FluentEmoji/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FluentEmoji/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css }) => {\r\n  return {\r\n    container: css`\r\n      position: relative;\r\n      line-height: 1;\r\n      text-align: center;\r\n    `,\r\n  };\r\n});\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO,EACL,WAAW,GAAG;;;;MAKhB;AACF,CAAC"}

package/es/FluentEmoji/type.d.mts

@@ -0,0 +1,14 @@
+import { DivProps } from "../types/index.mjs";
+import { EmojiType } from "./utils.mjs";
+import { Ref } from "react";
+//#region src/FluentEmoji/type.d.ts
+interface FluentEmojiProps extends DivProps {
+  emoji: string;
+  ref?: Ref<HTMLImageElement>;
+  size?: number;
+  type?: EmojiType;
+  unoptimized?: boolean;
+}
+//#endregion
+export { FluentEmojiProps };
+//# sourceMappingURL=type.d.mts.map

package/es/FluentEmoji/utils.d.mts

@@ -0,0 +1,5 @@
+//#region src/FluentEmoji/utils.d.ts
+type EmojiType = 'anim' | 'flat' | 'modern' | 'mono' | 'raw' | '3d';
+//#endregion
+export { EmojiType };
+//# sourceMappingURL=utils.d.mts.map