@jinmi/ui 0.0.0-stage → 6.0.2

package/es/base-ui/Tabs/style.mjs

@@ -0,0 +1,226 @@
+import { focusRing } from "../focusRing.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Tabs/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	indicator: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 0;
+
+    transition-timing-function: ${cssVar.motionEaseOut};
+    transition-duration: 240ms;
+    transition-property: inset-inline-start, inset-block-start, width, height, transform;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	indicatorPoint: css`
+    inset-block-end: 6px;
+    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);
+
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+
+    background: ${cssVar.colorPrimary};
+
+    [data-orientation='horizontal'] &:dir(rtl) {
+      inset-inline-start: calc(var(--active-tab-right) + var(--active-tab-width) / 2 - 2.5px);
+    }
+  `,
+	indicatorRounded: css`
+    inset-block-start: var(--active-tab-top);
+    inset-inline-start: var(--active-tab-left);
+
+    width: var(--active-tab-width);
+    height: var(--active-tab-height);
+    border-radius: ${cssVar.borderRadius};
+
+    background: ${cssVar.colorBgElevated};
+    box-shadow: ${cssVar.boxShadowTertiary};
+
+    [data-orientation='horizontal'] &:dir(rtl) {
+      inset-inline-start: var(--active-tab-right);
+    }
+  `,
+	indicatorSquare: css`
+    inset-block-end: 0;
+    inset-inline-start: var(--active-tab-left);
+
+    width: var(--active-tab-width);
+    height: 2px;
+
+    background: ${cssVar.colorPrimary};
+
+    [data-orientation='horizontal'] &:dir(rtl) {
+      inset-inline-start: var(--active-tab-right);
+    }
+  `,
+	list: css`
+    position: relative;
+
+    display: inline-flex;
+    flex-wrap: nowrap;
+    gap: 2px;
+    align-items: center;
+
+    &[data-orientation='vertical'] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  `,
+	listRounded: css`
+    gap: 4px;
+    align-self: flex-start;
+
+    padding: 3px;
+    border-radius: ${cssVar.borderRadiusLG};
+
+    background: ${cssVar.colorBgLayout};
+
+    &[data-orientation='vertical'] {
+      align-self: stretch;
+    }
+  `,
+	listSquare: css`
+    gap: 16px;
+    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};
+
+    &[data-orientation='vertical'] {
+      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};
+    }
+  `,
+	panel: css`
+    padding-block-start: 12px;
+    outline: none;
+    border-radius: ${cssVar.borderRadius};
+    ${focusRing};
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &[data-orientation='vertical'] {
+      flex-direction: row;
+    }
+  `,
+	tab: css`
+    cursor: pointer;
+    user-select: none;
+
+    position: relative;
+    z-index: 1;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+
+    box-sizing: border-box;
+    border: 0;
+
+    font-weight: 500;
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+
+    background: transparent;
+    outline: none;
+
+    transition:
+      color 120ms ${cssVar.motionEaseOut},
+      transform 120ms ${cssVar.motionEaseOut};
+
+    &:hover:not([data-disabled]) {
+      color: ${cssVar.colorText};
+    }
+
+    &:active:not([data-disabled]) {
+      transform: scale(0.98);
+    }
+
+    ${focusRing};
+
+    &[data-active] {
+      color: ${cssVar.colorPrimary};
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+      color: ${cssVar.colorTextDisabled};
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	tabLarge: css`
+    height: 36px;
+    padding-inline: 16px;
+    border-radius: ${cssVar.borderRadius};
+    font-size: 14px;
+  `,
+	tabMiddle: css`
+    height: 32px;
+    padding-inline: 12px;
+    border-radius: ${cssVar.borderRadius};
+    font-size: 13px;
+  `,
+	tabPoint: css`
+    height: auto;
+    padding-block: 8px 14px;
+  `,
+	tabSmall: css`
+    height: 26px;
+    padding-inline: 10px;
+    border-radius: ${cssVar.borderRadius};
+    font-size: 12px;
+  `,
+	tabSquare: css`
+    height: auto;
+    padding-block: 8px;
+    border-radius: 0;
+  `
+}));
+const tabVariants = cva(styles.tab, {
+	defaultVariants: {
+		size: "middle",
+		variant: "rounded"
+	},
+	variants: {
+		size: {
+			large: styles.tabLarge,
+			middle: styles.tabMiddle,
+			small: styles.tabSmall
+		},
+		variant: {
+			point: styles.tabPoint,
+			rounded: null,
+			square: styles.tabSquare
+		}
+	}
+});
+const indicatorVariants = cva(styles.indicator, {
+	defaultVariants: { variant: "rounded" },
+	variants: { variant: {
+		point: styles.indicatorPoint,
+		rounded: styles.indicatorRounded,
+		square: styles.indicatorSquare
+	} }
+});
+const listVariants = cva(styles.list, {
+	defaultVariants: { variant: "rounded" },
+	variants: { variant: {
+		point: null,
+		rounded: styles.listRounded,
+		square: styles.listSquare
+	} }
+});
+//#endregion
+export { indicatorVariants, listVariants, styles, tabVariants };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Tabs/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { focusRing } from '@/base-ui/focusRing';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  indicator: css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    z-index: 0;\r\n\r\n    transition-timing-function: ${cssVar.motionEaseOut};\r\n    transition-duration: 240ms;\r\n    transition-property: inset-inline-start, inset-block-start, width, height, transform;\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition-duration: 0s;\r\n    }\r\n  `,\r\n  indicatorPoint: css`\r\n    inset-block-end: 6px;\r\n    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\r\n\r\n    width: 5px;\r\n    height: 5px;\r\n    border-radius: 50%;\r\n\r\n    background: ${cssVar.colorPrimary};\r\n\r\n    [data-orientation='horizontal'] &:dir(rtl) {\r\n      inset-inline-start: calc(var(--active-tab-right) + var(--active-tab-width) / 2 - 2.5px);\r\n    }\r\n  `,\r\n  indicatorRounded: css`\r\n    inset-block-start: var(--active-tab-top);\r\n    inset-inline-start: var(--active-tab-left);\r\n\r\n    width: var(--active-tab-width);\r\n    height: var(--active-tab-height);\r\n    border-radius: ${cssVar.borderRadius};\r\n\r\n    background: ${cssVar.colorBgElevated};\r\n    box-shadow: ${cssVar.boxShadowTertiary};\r\n\r\n    [data-orientation='horizontal'] &:dir(rtl) {\r\n      inset-inline-start: var(--active-tab-right);\r\n    }\r\n  `,\r\n  indicatorSquare: css`\r\n    inset-block-end: 0;\r\n    inset-inline-start: var(--active-tab-left);\r\n\r\n    width: var(--active-tab-width);\r\n    height: 2px;\r\n\r\n    background: ${cssVar.colorPrimary};\r\n\r\n    [data-orientation='horizontal'] &:dir(rtl) {\r\n      inset-inline-start: var(--active-tab-right);\r\n    }\r\n  `,\r\n  list: css`\r\n    position: relative;\r\n\r\n    display: inline-flex;\r\n    flex-wrap: nowrap;\r\n    gap: 2px;\r\n    align-items: center;\r\n\r\n    &[data-orientation='vertical'] {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n  `,\r\n  listRounded: css`\r\n    gap: 4px;\r\n    align-self: flex-start;\r\n\r\n    padding: 3px;\r\n    border-radius: ${cssVar.borderRadiusLG};\r\n\r\n    background: ${cssVar.colorBgLayout};\r\n\r\n    &[data-orientation='vertical'] {\r\n      align-self: stretch;\r\n    }\r\n  `,\r\n  listSquare: css`\r\n    gap: 16px;\r\n    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\r\n\r\n    &[data-orientation='vertical'] {\r\n      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\r\n    }\r\n  `,\r\n  panel: css`\r\n    padding-block-start: 12px;\r\n    outline: none;\r\n    border-radius: ${cssVar.borderRadius};\r\n    ${focusRing};\r\n  `,\r\n  root: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n\r\n    &[data-orientation='vertical'] {\r\n      flex-direction: row;\r\n    }\r\n  `,\r\n  tab: css`\r\n    cursor: pointer;\r\n    user-select: none;\r\n\r\n    position: relative;\r\n    z-index: 1;\r\n\r\n    display: inline-flex;\r\n    flex-shrink: 0;\r\n    gap: 6px;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    box-sizing: border-box;\r\n    border: 0;\r\n\r\n    font-weight: 500;\r\n    color: ${cssVar.colorTextSecondary};\r\n    white-space: nowrap;\r\n\r\n    background: transparent;\r\n    outline: none;\r\n\r\n    transition:\r\n      color 120ms ${cssVar.motionEaseOut},\r\n      transform 120ms ${cssVar.motionEaseOut};\r\n\r\n    &:hover:not([data-disabled]) {\r\n      color: ${cssVar.colorText};\r\n    }\r\n\r\n    &:active:not([data-disabled]) {\r\n      transform: scale(0.98);\r\n    }\r\n\r\n    ${focusRing};\r\n\r\n    &[data-active] {\r\n      color: ${cssVar.colorPrimary};\r\n    }\r\n\r\n    &[data-disabled] {\r\n      cursor: not-allowed;\r\n      color: ${cssVar.colorTextDisabled};\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition-duration: 0s;\r\n    }\r\n  `,\r\n  tabLarge: css`\r\n    height: 36px;\r\n    padding-inline: 16px;\r\n    border-radius: ${cssVar.borderRadius};\r\n    font-size: 14px;\r\n  `,\r\n  tabMiddle: css`\r\n    height: 32px;\r\n    padding-inline: 12px;\r\n    border-radius: ${cssVar.borderRadius};\r\n    font-size: 13px;\r\n  `,\r\n  tabPoint: css`\r\n    height: auto;\r\n    padding-block: 8px 14px;\r\n  `,\r\n  tabSmall: css`\r\n    height: 26px;\r\n    padding-inline: 10px;\r\n    border-radius: ${cssVar.borderRadius};\r\n    font-size: 12px;\r\n  `,\r\n  tabSquare: css`\r\n    height: auto;\r\n    padding-block: 8px;\r\n    border-radius: 0;\r\n  `,\r\n}));\r\n\r\nexport const tabVariants = cva(styles.tab, {\r\n  defaultVariants: {\r\n    size: 'middle',\r\n    variant: 'rounded',\r\n  },\r\n  variants: {\r\n    size: {\r\n      large: styles.tabLarge,\r\n      middle: styles.tabMiddle,\r\n      small: styles.tabSmall,\r\n    },\r\n    variant: {\r\n      point: styles.tabPoint,\r\n      rounded: null,\r\n      square: styles.tabSquare,\r\n    },\r\n  },\r\n});\r\n\r\nexport const indicatorVariants = cva(styles.indicator, {\r\n  defaultVariants: {\r\n    variant: 'rounded',\r\n  },\r\n  variants: {\r\n    variant: {\r\n      point: styles.indicatorPoint,\r\n      rounded: styles.indicatorRounded,\r\n      square: styles.indicatorSquare,\r\n    },\r\n  },\r\n});\r\n\r\nexport const listVariants = cva(styles.list, {\r\n  defaultVariants: {\r\n    variant: 'rounded',\r\n  },\r\n  variants: {\r\n    variant: {\r\n      point: null,\r\n      rounded: styles.listRounded,\r\n      square: styles.listSquare,\r\n    },\r\n  },\r\n});\r\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;;;;;CAMpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;;;;;CAMzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;;;;;CAMpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,cAAc;;;;;;CAMrC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;qBAGS,OAAO,aAAa;MACnC,UAAU;;CAEd,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;MAO1B,UAAU;;;eAGD,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;EACjB;CACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC"}

package/es/base-ui/Tabs/type.d.mts

@@ -0,0 +1,63 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/base-ui/Tabs/type.d.ts
+type TabsVariant = 'rounded' | 'square' | 'point';
+type TabsSize = 'small' | 'middle' | 'large';
+type TabsOrientation = 'horizontal' | 'vertical';
+interface TabsClassNames {
+  indicator?: string;
+  list?: string;
+  panel?: string;
+  root?: string;
+  tab?: string;
+}
+interface TabsStyles {
+  indicator?: CSSProperties;
+  list?: CSSProperties;
+  panel?: CSSProperties;
+  root?: CSSProperties;
+  tab?: CSSProperties;
+}
+interface TabsItem {
+  children?: ReactNode;
+  disabled?: boolean;
+  icon?: ReactNode;
+  key: string;
+  label: ReactNode;
+}
+type TabsRootProps = Omit<ComponentProps<typeof Tabs.Root>, 'className' | 'render'> & {
+  className?: string;
+};
+type TabsListProps = Omit<ComponentProps<typeof Tabs.List>, 'className' | 'render'> & {
+  className?: string;
+  variant?: TabsVariant;
+};
+type TabsTabProps = Omit<ComponentProps<typeof Tabs.Tab>, 'className' | 'render'> & {
+  className?: string;
+  size?: TabsSize;
+  variant?: TabsVariant;
+};
+type TabsPanelProps = Omit<ComponentProps<typeof Tabs.Panel>, 'className' | 'render'> & {
+  className?: string;
+};
+type TabsIndicatorProps = Omit<ComponentProps<typeof Tabs.Indicator>, 'className' | 'render'> & {
+  className?: string;
+  variant?: TabsVariant;
+};
+interface TabsProps {
+  activeKey?: string;
+  className?: string;
+  classNames?: TabsClassNames;
+  defaultActiveKey?: string;
+  items?: TabsItem[];
+  onChange?: (key: string) => void;
+  orientation?: TabsOrientation;
+  ref?: Ref<HTMLDivElement>;
+  size?: TabsSize;
+  style?: CSSProperties;
+  styles?: TabsStyles;
+  variant?: TabsVariant;
+}
+//#endregion
+export { TabsClassNames, TabsIndicatorProps, TabsItem, TabsListProps, TabsOrientation, TabsPanelProps, TabsProps, TabsRootProps, TabsSize, TabsStyles, TabsTabProps, TabsVariant };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Tag/Tag.d.mts

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

package/es/base-ui/Tag/Tag.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
+import { styles, variants } from "./style.mjs";
+import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./utils.mjs";
+import { memo, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { X } from "lucide-react";
+//#region src/base-ui/Tag/Tag.tsx
+const Tag = memo(({ children, className, classNames, closable, closeIcon, color, icon, onClick, onClose, ref, shape = "normal", size = "middle", style, styles: customStyles, variant = "filled", ...rest }) => {
+	const [visible, setVisible] = useState(true);
+	const colors = useMemo(() => {
+		let textColor = cssVar.colorTextSecondary;
+		let backgroundColor;
+		let borderColor;
+		const isBorderless = variant === "borderless";
+		const isFilled = variant === "filled";
+		const isSolid = variant === "solid";
+		const isPresetColor = color && presetColors.includes(color);
+		const isPresetSystemColors = color && presetSystemColors.has(color);
+		const isHexColor = color && color.startsWith("#");
+		if (isPresetColor) {
+			const solidBgColor = colorsPreset(color);
+			textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, "active");
+			backgroundColor = isSolid ? solidBgColor : isBorderless ? "transparent" : colorsPreset(color, "fillTertiary");
+			borderColor = isSolid ? solidBgColor : colorsPreset(color, isFilled ? "fillQuaternary" : "fillTertiary");
+		}
+		if (isPresetSystemColors) {
+			const solidBgColor = colorsPresetSystem(color);
+			textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);
+			backgroundColor = isSolid ? solidBgColor : isBorderless ? "transparent" : colorsPresetSystem(color, "fillTertiary");
+			borderColor = isSolid ? solidBgColor : colorsPresetSystem(color, isFilled ? "fillQuaternary" : "fillTertiary");
+		}
+		if (isHexColor) {
+			textColor = isSolid ? safeReadableColor(color) : isBorderless ? color : cssVar.colorBgLayout;
+			backgroundColor = isSolid ? color : isBorderless ? "transparent" : color;
+			borderColor = isSolid ? color : borderColor;
+		}
+		return {
+			backgroundColor,
+			borderColor,
+			textColor
+		};
+	}, [color, variant]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx(variants({
+			shape,
+			size,
+			variant
+		}), className, classNames?.root),
+		ref,
+		style: {
+			background: colors.backgroundColor,
+			borderColor: colors.borderColor,
+			color: colors.textColor,
+			cursor: onClick ? "pointer" : void 0,
+			...style,
+			...customStyles?.root
+		},
+		onClick,
+		...rest,
+		children: [
+			icon,
+			children,
+			closable && /* @__PURE__ */ jsx("button", {
+				"aria-label": "Close",
+				className: cx(styles.close, classNames?.closeIcon),
+				style: customStyles?.closeIcon,
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					onClose?.(e);
+					setVisible(false);
+				},
+				children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 10 })
+			})
+		]
+	});
+});
+Tag.displayName = "Tag";
+//#endregion
+export { Tag as default };
+
+//# sourceMappingURL=Tag.mjs.map

package/es/base-ui/Tag/Tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","names":[],"sources":["../../../src/base-ui/Tag/Tag.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cssVar, cx } from 'antd-style';\r\nimport { X } from 'lucide-react';\r\nimport { memo, useMemo, useState } from 'react';\r\n\r\nimport { safeReadableColor } from '@/utils/safeReadableColor';\r\n\r\nimport { styles, variants } from './style';\r\nimport type { TagProps } from './type';\r\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from './utils';\r\n\r\nconst Tag = memo<TagProps>(\r\n  ({\r\n    children,\r\n    className,\r\n    classNames,\r\n    closable,\r\n    closeIcon,\r\n    color,\r\n    icon,\r\n    onClick,\r\n    onClose,\r\n    ref,\r\n    shape = 'normal',\r\n    size = 'middle',\r\n    style,\r\n    styles: customStyles,\r\n    variant = 'filled',\r\n    ...rest\r\n  }) => {\r\n    const [visible, setVisible] = useState(true);\r\n\r\n    const colors = useMemo(() => {\r\n      let textColor = cssVar.colorTextSecondary;\r\n      let backgroundColor;\r\n      let borderColor;\r\n      const isBorderless = variant === 'borderless';\r\n      const isFilled = variant === 'filled';\r\n      const isSolid = variant === 'solid';\r\n      const isPresetColor = color && presetColors.includes(color);\r\n      const isPresetSystemColors = color && presetSystemColors.has(color);\r\n      const isHexColor = color && color.startsWith('#');\r\n\r\n      if (isPresetColor) {\r\n        const solidBgColor = colorsPreset(color);\r\n        textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, 'active');\r\n        backgroundColor = isSolid\r\n          ? solidBgColor\r\n          : isBorderless\r\n            ? 'transparent'\r\n            : colorsPreset(color, 'fillTertiary');\r\n        borderColor = isSolid\r\n          ? solidBgColor\r\n          : colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\r\n      }\r\n      if (isPresetSystemColors) {\r\n        const solidBgColor = colorsPresetSystem(color);\r\n        textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);\r\n        backgroundColor = isSolid\r\n          ? solidBgColor\r\n          : isBorderless\r\n            ? 'transparent'\r\n            : colorsPresetSystem(color, 'fillTertiary');\r\n        borderColor = isSolid\r\n          ? solidBgColor\r\n          : colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\r\n      }\r\n      if (isHexColor) {\r\n        textColor = isSolid\r\n          ? safeReadableColor(color)\r\n          : isBorderless\r\n            ? color\r\n            : cssVar.colorBgLayout;\r\n        backgroundColor = isSolid ? color : isBorderless ? 'transparent' : color;\r\n        borderColor = isSolid ? color : borderColor;\r\n      }\r\n\r\n      return {\r\n        backgroundColor,\r\n        borderColor,\r\n        textColor,\r\n      };\r\n    }, [color, variant]);\r\n\r\n    if (!visible) return null;\r\n\r\n    return (\r\n      <span\r\n        className={cx(variants({ shape, size, variant }), className, classNames?.root)}\r\n        ref={ref}\r\n        style={{\r\n          background: colors.backgroundColor,\r\n          borderColor: colors.borderColor,\r\n          color: colors.textColor,\r\n          cursor: onClick ? 'pointer' : undefined,\r\n          ...style,\r\n          ...customStyles?.root,\r\n        }}\r\n        onClick={onClick}\r\n        {...rest}\r\n      >\r\n        {icon}\r\n        {children}\r\n        {closable && (\r\n          <button\r\n            aria-label=\"Close\"\r\n            className={cx(styles.close, classNames?.closeIcon)}\r\n            style={customStyles?.closeIcon}\r\n            type=\"button\"\r\n            onClick={(e) => {\r\n              e.stopPropagation();\r\n              onClose?.(e);\r\n              setVisible(false);\r\n            }}\r\n          >\r\n            {closeIcon ?? <X size={10} />}\r\n          </button>\r\n        )}\r\n      </span>\r\n    );\r\n  },\r\n);\r\n\r\nTag.displayName = 'Tag';\r\n\r\nexport default Tag;\r\n"],"mappings":";;;;;;;;;AAYA,MAAM,MAAM,MACT,EACC,UACA,WACA,YACA,UACA,WACA,OACA,MACA,SACA,SACA,KACA,QAAQ,UACR,OAAO,UACP,OACA,QAAQ,cACR,UAAU,UACV,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,UAAU,YAAY;EAC5B,MAAM,gBAAgB,SAAS,aAAa,SAAS,KAAK;EAC1D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,KAAK;EAClE,MAAM,aAAa,SAAS,MAAM,WAAW,GAAG;EAEhD,IAAI,eAAe;GACjB,MAAM,eAAe,aAAa,KAAK;GACvC,YAAY,UAAU,kBAAkB,YAAY,IAAI,aAAa,OAAO,QAAQ;GACpF,kBAAkB,UACd,eACA,eACE,gBACA,aAAa,OAAO,cAAc;GACxC,cAAc,UACV,eACA,aAAa,OAAO,WAAW,mBAAmB,cAAc;EACtE;EACA,IAAI,sBAAsB;GACxB,MAAM,eAAe,mBAAmB,KAAK;GAC7C,YAAY,UAAU,kBAAkB,YAAY,IAAI,mBAAmB,KAAK;GAChF,kBAAkB,UACd,eACA,eACE,gBACA,mBAAmB,OAAO,cAAc;GAC9C,cAAc,UACV,eACA,mBAAmB,OAAO,WAAW,mBAAmB,cAAc;EAC5E;EACA,IAAI,YAAY;GACd,YAAY,UACR,kBAAkB,KAAK,IACvB,eACE,QACA,OAAO;GACb,kBAAkB,UAAU,QAAQ,eAAe,gBAAgB;GACnE,cAAc,UAAU,QAAQ;EAClC;EAEA,OAAO;GACL;GACA;GACA;EACF;CACF,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,QAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAO;GAAM;EAAQ,CAAC,GAAG,WAAW,YAAY,IAAI;EACxE;EACL,OAAO;GACL,YAAY,OAAO;GACnB,aAAa,OAAO;GACpB,OAAO,OAAO;GACd,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;GACH,GAAG,cAAc;EACnB;EACS;EACT,GAAI;EAZN,UAAA;GAcG;GACA;GACA,YACC,oBAAC,UAAD;IACE,cAAW;IACX,WAAW,GAAG,OAAO,OAAO,YAAY,SAAS;IACjD,OAAO,cAAc;IACrB,MAAK;IACL,UAAU,MAAM;KACd,EAAE,gBAAgB;KAClB,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IAEC,UAAA,aAAa,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;GACtB,CAAA;EAEN;;AAEV,CACF;AAEA,IAAI,cAAc"}

package/es/base-ui/Tag/index.d.mts

@@ -0,0 +1,4 @@
+import { TagClassNames, TagProps, TagShape, TagSize, TagStyles, TagVariant } from "./type.mjs";
+import Tag from "./Tag.mjs";
+import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./utils.mjs";
+export { type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, colorsPreset, colorsPresetSystem, Tag as default, presetColors, presetSystemColors };

package/es/base-ui/Tag/style.mjs

@@ -0,0 +1,123 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Tag/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	borderless: staticStylish.variantBorderlessWithoutHover,
+	close: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 0;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    color: ${cssVar.colorIcon};
+
+    background: none;
+
+    &:hover {
+      color: ${cssVar.colorTextHeading};
+    }
+  `,
+	filled: staticStylish.variantFilledWithoutHover,
+	large: css`
+    height: 28px;
+    padding-inline: 12px;
+    border-radius: 6px;
+  `,
+	middle: css`
+    height: 22px;
+    padding-inline: 8px;
+    border-radius: 3px;
+  `,
+	outlined: staticStylish.variantOutlinedWithoutHover,
+	round: css`
+    && {
+      border-radius: 999px;
+    }
+  `,
+	roundLarge: css`
+    padding-inline: 14px;
+  `,
+	roundMiddle: css`
+    padding-inline: 10px;
+  `,
+	roundSmall: css`
+    padding-inline: 8px;
+  `,
+	root: css`
+    user-select: none;
+
+    display: inline-flex;
+    gap: 0.4em;
+    align-items: center;
+    justify-content: center;
+
+    width: fit-content;
+    margin: 0;
+
+    font-size: ${cssVar.fontSizeSM};
+    line-height: 1.2;
+    white-space: nowrap;
+
+    span {
+      margin: 0;
+      line-height: inherit;
+    }
+  `,
+	small: css`
+    height: 20px;
+    padding-inline: 4px;
+    border-radius: 3px;
+  `
+}));
+const variants = cva(styles.root, {
+	compoundVariants: [
+		{
+			className: styles.roundSmall,
+			shape: "round",
+			size: "small"
+		},
+		{
+			className: styles.roundMiddle,
+			shape: "round",
+			size: "middle"
+		},
+		{
+			className: styles.roundLarge,
+			shape: "round",
+			size: "large"
+		}
+	],
+	defaultVariants: {
+		shape: "normal",
+		size: "middle",
+		variant: "filled"
+	},
+	variants: {
+		shape: {
+			normal: null,
+			round: styles.round
+		},
+		size: {
+			large: styles.large,
+			middle: styles.middle,
+			small: styles.small
+		},
+		variant: {
+			borderless: styles.borderless,
+			filled: styles.filled,
+			outlined: styles.outlined,
+			solid: styles.filled
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Tag/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Tag/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    cursor: pointer;\r\n\r\n    display: inline-flex;\r\n    gap: 0;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n    border: none;\r\n\r\n    color: ${cssVar.colorIcon};\r\n\r\n    background: none;\r\n\r\n    &:hover {\r\n      color: ${cssVar.colorTextHeading};\r\n    }\r\n  `,\r\n  filled: lobeStaticStylish.variantFilledWithoutHover,\r\n  large: css`\r\n    height: 28px;\r\n    padding-inline: 12px;\r\n    border-radius: 6px;\r\n  `,\r\n  middle: css`\r\n    height: 22px;\r\n    padding-inline: 8px;\r\n    border-radius: 3px;\r\n  `,\r\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\r\n  round: css`\r\n    && {\r\n      border-radius: 999px;\r\n    }\r\n  `,\r\n  roundLarge: css`\r\n    padding-inline: 14px;\r\n  `,\r\n  roundMiddle: css`\r\n    padding-inline: 10px;\r\n  `,\r\n  roundSmall: css`\r\n    padding-inline: 8px;\r\n  `,\r\n  root: css`\r\n    user-select: none;\r\n\r\n    display: inline-flex;\r\n    gap: 0.4em;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: fit-content;\r\n    margin: 0;\r\n\r\n    font-size: ${cssVar.fontSizeSM};\r\n    line-height: 1.2;\r\n    white-space: nowrap;\r\n\r\n    span {\r\n      margin: 0;\r\n      line-height: inherit;\r\n    }\r\n  `,\r\n  small: css`\r\n    height: 20px;\r\n    padding-inline: 4px;\r\n    border-radius: 3px;\r\n  `,\r\n}));\r\n\r\nexport const variants = cva(styles.root, {\r\n  compoundVariants: [\r\n    {\r\n      className: styles.roundSmall,\r\n      shape: 'round',\r\n      size: 'small',\r\n    },\r\n    {\r\n      className: styles.roundMiddle,\r\n      shape: 'round',\r\n      size: 'middle',\r\n    },\r\n    {\r\n      className: styles.roundLarge,\r\n      shape: 'round',\r\n      size: 'large',\r\n    },\r\n  ],\r\n  defaultVariants: {\r\n    shape: 'normal',\r\n    size: 'middle',\r\n    variant: 'filled',\r\n  },\r\n  variants: {\r\n    shape: {\r\n      normal: null,\r\n      round: styles.round,\r\n    },\r\n    size: {\r\n      large: styles.large,\r\n      middle: styles.middle,\r\n      small: styles.small,\r\n    },\r\n    variant: {\r\n      borderless: styles.borderless,\r\n      filled: styles.filled,\r\n      outlined: styles.outlined,\r\n      solid: styles.filled,\r\n    },\r\n  },\r\n});\r\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,YAAYA,cAAkB;CAC9B,OAAO,GAAG;;;;;;;;;;;;aAYC,OAAO,UAAU;;;;;eAKf,OAAO,iBAAiB;;;CAGrC,QAAQA,cAAkB;CAC1B,OAAO,GAAG;;;;;CAKV,QAAQ,GAAG;;;;;CAKX,UAAUA,cAAkB;CAC5B,OAAO,GAAG;;;;;CAKV,YAAY,GAAG;;;CAGf,aAAa,GAAG;;;CAGhB,YAAY,GAAG;;;CAGf,MAAM,GAAG;;;;;;;;;;;iBAWM,OAAO,WAAW;;;;;;;;;CASjC,OAAO,GAAG;;;;;AAKZ,EAAE;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB;EAChB;GACE,WAAW,OAAO;GAClB,OAAO;GACP,MAAM;EACR;EACA;GACE,WAAW,OAAO;GAClB,OAAO;GACP,MAAM;EACR;EACA;GACE,WAAW,OAAO;GAClB,OAAO;GACP,MAAM;EACR;CACF;CACA,iBAAiB;EACf,OAAO;EACP,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,QAAQ;GACR,OAAO,OAAO;EAChB;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}

package/es/base-ui/Tag/type.d.mts

@@ -0,0 +1,29 @@
+import { CSSProperties, ComponentProps, MouseEvent, ReactNode, Ref } from "react";
+//#region src/base-ui/Tag/type.d.ts
+type TagShape = 'normal' | 'round';
+type TagSize = 'small' | 'middle' | 'large';
+type TagVariant = 'filled' | 'outlined' | 'borderless' | 'solid';
+interface TagClassNames {
+  closeIcon?: string;
+  root?: string;
+}
+interface TagStyles {
+  closeIcon?: CSSProperties;
+  root?: CSSProperties;
+}
+interface TagProps extends Omit<ComponentProps<'span'>, 'color'> {
+  classNames?: TagClassNames;
+  closable?: boolean;
+  closeIcon?: ReactNode;
+  color?: string;
+  icon?: ReactNode;
+  onClose?: (e: MouseEvent<HTMLSpanElement>) => void;
+  ref?: Ref<HTMLSpanElement>;
+  shape?: TagShape;
+  size?: TagSize;
+  styles?: TagStyles;
+  variant?: TagVariant;
+}
+//#endregion
+export { TagClassNames, TagProps, TagShape, TagSize, TagStyles, TagVariant };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Tag/utils.d.mts

@@ -0,0 +1,8 @@
+//#region src/base-ui/Tag/utils.d.ts
+declare const presetColors: string[];
+declare const presetSystemColors: Set<string>;
+declare const colorsPreset: (type: string, ...keys: string[]) => string;
+declare const colorsPresetSystem: (type: string, ...keys: string[]) => string;
+//#endregion
+export { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors };
+//# sourceMappingURL=utils.d.mts.map

package/es/base-ui/Tag/utils.mjs

@@ -0,0 +1,41 @@
+import { cssVar } from "antd-style";
+import { camelCase } from "es-toolkit/compat";
+//#region src/base-ui/Tag/utils.ts
+const presetColors = [
+	"red",
+	"volcano",
+	"orange",
+	"gold",
+	"yellow",
+	"lime",
+	"green",
+	"cyan",
+	"blue",
+	"geekblue",
+	"purple",
+	"magenta",
+	"gray"
+];
+const presetSystemColors = /* @__PURE__ */ new Set([
+	"error",
+	"warning",
+	"success",
+	"info",
+	"processing"
+]);
+const toKebabCase = (value) => value.replaceAll(/([a-z])([A-Z])/g, "$1-$2").replaceAll(/([a-z])(\d)/g, "$1-$2").replaceAll(/(\d)([A-Z])/g, "$1-$2").replaceAll(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
+const getCssVar = (tokenKey) => {
+	return cssVar[tokenKey] || `var(--ant-${toKebabCase(tokenKey)})`;
+};
+const colorsPreset = (type, ...keys) => getCssVar(camelCase([type, ...keys].join("-")));
+const colorsPresetSystem = (type, ...keys) => {
+	return getCssVar(camelCase([
+		"color",
+		type === "processing" ? "info" : type,
+		...keys
+	].join("-")));
+};
+//#endregion
+export { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors };
+
+//# sourceMappingURL=utils.mjs.map

package/es/base-ui/Tag/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/base-ui/Tag/utils.ts"],"sourcesContent":["import { cssVar } from 'antd-style';\r\nimport { camelCase } from 'es-toolkit/compat';\r\n\r\nexport const presetColors = [\r\n  'red',\r\n  'volcano',\r\n  'orange',\r\n  'gold',\r\n  'yellow',\r\n  'lime',\r\n  'green',\r\n  'cyan',\r\n  'blue',\r\n  'geekblue',\r\n  'purple',\r\n  'magenta',\r\n  'gray',\r\n];\r\n\r\nexport const presetSystemColors = new Set(['error', 'warning', 'success', 'info', 'processing']);\r\n\r\nconst toKebabCase = (value: string) =>\r\n  value\r\n    .replaceAll(/([a-z])([A-Z])/g, '$1-$2')\r\n    .replaceAll(/([a-z])(\\d)/g, '$1-$2')\r\n    .replaceAll(/(\\d)([A-Z])/g, '$1-$2')\r\n    .replaceAll(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')\r\n    .toLowerCase();\r\n\r\nconst getCssVar = (tokenKey: string) => {\r\n  const mapped = (cssVar as Record<string, string>)[tokenKey];\r\n  return mapped || `var(--ant-${toKebabCase(tokenKey)})`;\r\n};\r\n\r\nexport const colorsPreset = (type: string, ...keys: string[]) =>\r\n  getCssVar(camelCase([type, ...keys].join('-')));\r\n\r\nexport const colorsPresetSystem = (type: string, ...keys: string[]) => {\r\n  const t = type === 'processing' ? 'info' : type;\r\n  return getCssVar(camelCase(['color', t, ...keys].join('-')));\r\n};\r\n"],"mappings":";;;AAGA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,qCAAqB,IAAI,IAAI;CAAC;CAAS;CAAW;CAAW;CAAQ;AAAY,CAAC;AAE/F,MAAM,eAAe,UACnB,MACG,WAAW,mBAAmB,OAAO,CAAC,CACtC,WAAW,gBAAgB,OAAO,CAAC,CACnC,WAAW,gBAAgB,OAAO,CAAC,CACnC,WAAW,yBAAyB,OAAO,CAAC,CAC5C,YAAY;AAEjB,MAAM,aAAa,aAAqB;CAEtC,OADgB,OAAkC,aACjC,aAAa,YAAY,QAAQ,EAAE;AACtD;AAEA,MAAa,gBAAgB,MAAc,GAAG,SAC5C,UAAU,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;AAEhD,MAAa,sBAAsB,MAAc,GAAG,SAAmB;CAErE,OAAO,UAAU,UAAU;EAAC;EADlB,SAAS,eAAe,SAAS;EACH,GAAG;CAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;AAC7D"}

package/es/base-ui/Text/Text.d.mts

@@ -0,0 +1,10 @@
+import { TextProps } from "./type.mjs";
+import { ReactNode } from "react";
+//#region src/base-ui/Text/Text.d.ts
+interface IText {
+  <Shiny extends boolean = boolean>(props: TextProps<Shiny>): ReactNode;
+}
+declare const Text: IText;
+//#endregion
+export { IText, Text as default };
+//# sourceMappingURL=Text.d.mts.map