@jinmi/ui 0.0.0-stage → 6.0.1

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

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

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

@@ -0,0 +1,52 @@
+"use client";
+import Text from "../../Text/Text.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Radio } from "@base-ui/react/radio";
+//#region src/base-ui/Radio/Radio.tsx
+const Radio$1 = memo(({ size = 16, backgroundColor, children, className, classNames, styles: customStyles, style, textProps, disabled, ...rest }) => {
+	const dotStyle = {
+		height: size,
+		width: size,
+		...backgroundColor ? { "--jinmi-radio-bg": backgroundColor } : {},
+		...children ? {} : style,
+		...customStyles?.radio
+	};
+	const dot = /* @__PURE__ */ jsx(Radio.Root, {
+		className: cx(styles.root, children ? classNames?.radio : className, classNames?.radio),
+		disabled,
+		style: dotStyle,
+		...rest,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			className: styles.indicator,
+			style: {
+				height: Math.round(size * .375),
+				width: Math.round(size * .375)
+			}
+		})
+	});
+	if (!children) return dot;
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx(styles.label, className, classNames?.wrapper),
+		style: {
+			gap: Math.floor(size / 2),
+			...style,
+			...customStyles?.wrapper
+		},
+		children: [dot, /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: classNames?.text,
+			style: customStyles?.text,
+			...textProps,
+			type: disabled ? "secondary" : textProps?.type,
+			children
+		})]
+	});
+});
+Radio$1.displayName = "Radio";
+//#endregion
+export { Radio$1 as default };
+
+//# sourceMappingURL=Radio.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.mjs","names":["Radio","BaseRadio"],"sources":["../../../src/base-ui/Radio/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { RadioProps } from './type';\n\nconst Radio = memo<RadioProps>(\n  ({\n    size = 16,\n    backgroundColor,\n    children,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    textProps,\n    disabled,\n    ...rest\n  }) => {\n    const dotStyle: CSSProperties = {\n      height: size,\n      width: size,\n      ...(backgroundColor ? { '--jinmi-radio-bg': backgroundColor } : {}),\n      ...(children ? {} : style),\n      ...customStyles?.radio,\n    };\n\n    const dot = (\n      <BaseRadio.Root\n        className={cx(styles.root, children ? classNames?.radio : className, classNames?.radio)}\n        disabled={disabled}\n        style={dotStyle}\n        {...rest}\n      >\n        <BaseRadio.Indicator\n          className={styles.indicator}\n          style={{ height: Math.round(size * 0.375), width: Math.round(size * 0.375) }}\n        />\n      </BaseRadio.Root>\n    );\n\n    if (!children) return dot;\n\n    return (\n      <label\n        className={cx(styles.label, className, classNames?.wrapper)}\n        style={{ gap: Math.floor(size / 2), ...style, ...customStyles?.wrapper }}\n      >\n        {dot}\n        <Text\n          as={'span'}\n          className={classNames?.text}\n          style={customStyles?.text}\n          {...textProps}\n          type={disabled ? 'secondary' : textProps?.type}\n        >\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"mappings":";;;;;;;;AAWA,MAAMA,UAAQ,MACX,EACC,OAAO,IACP,iBACA,UACA,WACA,YACA,QAAQ,cACR,OACA,WACA,UACA,GAAG,WACC;CACJ,MAAM,WAA0B;EAC9B,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EAAE,oBAAoB,gBAAgB,IAAI,CAAC;EACjE,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CAEA,MAAM,MACJ,oBAACC,MAAU,MAAX;EACE,WAAW,GAAG,OAAO,MAAM,WAAW,YAAY,QAAQ,WAAW,YAAY,KAAK;EAC5E;EACV,OAAO;EACP,GAAI;EAEJ,UAAA,oBAACA,MAAU,WAAX;GACE,WAAW,OAAO;GAClB,OAAO;IAAE,QAAQ,KAAK,MAAM,OAAO,IAAK;IAAG,OAAO,KAAK,MAAM,OAAO,IAAK;GAAE;EAC5E,CAAA;CACa,CAAA;CAGlB,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,SAAD;EACE,WAAW,GAAG,OAAO,OAAO,WAAW,YAAY,OAAO;EAC1D,OAAO;GAAE,KAAK,KAAK,MAAM,OAAO,CAAC;GAAG,GAAG;GAAO,GAAG,cAAc;EAAQ;EAFzE,UAAA,CAIG,KACD,oBAAC,MAAD;GACE,IAAI;GACJ,WAAW,YAAY;GACvB,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;EACG,CAAA,CACD;;AAEX,CACF;AAEA,QAAM,cAAc"}

package/es/base-ui/Radio/RadioGroup.d.mts

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

package/es/base-ui/Radio/RadioGroup.mjs

@@ -0,0 +1,35 @@
+"use client";
+import Radio from "./Radio.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/base-ui/Radio/RadioGroup.tsx
+const RadioGroup$1 = memo(({ options, onChange, gap = 12, horizontal = true, size, textProps, style, ...rest }) => {
+	const items = useMemo(() => options.map((option) => typeof option === "string" ? {
+		label: option,
+		value: option
+	} : option), [options]);
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		style: {
+			display: "flex",
+			flexDirection: horizontal ? "row" : "column",
+			flexWrap: "wrap",
+			gap,
+			...style
+		},
+		onValueChange: onChange,
+		...rest,
+		children: items.map((item) => /* @__PURE__ */ jsx(Radio, {
+			disabled: item.disabled,
+			size,
+			textProps,
+			value: item.value,
+			children: item.label
+		}, item.value))
+	});
+});
+RadioGroup$1.displayName = "RadioGroup";
+//#endregion
+export { RadioGroup$1 as default };
+
+//# sourceMappingURL=RadioGroup.mjs.map

package/es/base-ui/Radio/RadioGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.mjs","names":["RadioGroup","BaseRadioGroup"],"sources":["../../../src/base-ui/Radio/RadioGroup.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport Radio from './Radio';\r\nimport type { RadioGroupOption, RadioGroupProps } from './type';\r\n\r\nconst RadioGroup = memo<RadioGroupProps>(\r\n  ({ options, onChange, gap = 12, horizontal = true, size, textProps, style, ...rest }) => {\r\n    const items = useMemo<RadioGroupOption[]>(\r\n      () =>\r\n        options.map((option) =>\r\n          typeof option === 'string' ? { label: option, value: option } : option,\r\n        ),\r\n      [options],\r\n    );\r\n\r\n    return (\r\n      <BaseRadioGroup\r\n        style={{\r\n          display: 'flex',\r\n          flexDirection: horizontal ? 'row' : 'column',\r\n          flexWrap: 'wrap',\r\n          gap,\r\n          ...style,\r\n        }}\r\n        onValueChange={onChange}\r\n        {...rest}\r\n      >\r\n        {items.map((item) => (\r\n          <Radio\r\n            disabled={item.disabled}\r\n            key={item.value}\r\n            size={size}\r\n            textProps={textProps}\r\n            value={item.value}\r\n          >\r\n            {item.label}\r\n          </Radio>\r\n        ))}\r\n      </BaseRadioGroup>\r\n    );\r\n  },\r\n);\r\n\r\nRadioGroup.displayName = 'RadioGroup';\r\n\r\nexport default RadioGroup;\r\n"],"mappings":";;;;;;AAQA,MAAMA,eAAa,MAChB,EAAE,SAAS,UAAU,MAAM,IAAI,aAAa,MAAM,MAAM,WAAW,OAAO,GAAG,WAAW;CACvF,MAAM,QAAQ,cAEV,QAAQ,KAAK,WACX,OAAO,WAAW,WAAW;EAAE,OAAO;EAAQ,OAAO;CAAO,IAAI,MAClE,GACF,CAAC,OAAO,CACV;CAEA,OACE,oBAACC,YAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe,aAAa,QAAQ;GACpC,UAAU;GACV;GACA,GAAG;EACL;EACA,eAAe;EACf,GAAI;EAEH,UAAA,MAAM,KAAK,SACV,oBAAC,OAAD;GACE,UAAU,KAAK;GAET;GACK;GACX,OAAO,KAAK;GAEX,UAAA,KAAK;EACD,GANA,KAAK,KAML,CACR;CACa,CAAA;AAEpB,CACF;AAEA,aAAW,cAAc"}

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

@@ -0,0 +1,5 @@
+import { RadioGroupOption, RadioGroupProps, RadioProps } from "./type.mjs";
+import Radio from "./Radio.mjs";
+import RadioGroup from "./RadioGroup.mjs";
+import { styles } from "./style.mjs";
+export { Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, styles as radioStyles };

package/es/base-ui/Radio/style.d.mts

@@ -0,0 +1,9 @@
+//#region src/base-ui/Radio/style.d.ts
+declare const styles: {
+  indicator: string;
+  label: string;
+  root: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

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

@@ -0,0 +1,69 @@
+import { focusRing } from "../focusRing.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Radio/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	indicator: css`
+    display: block;
+    flex: none;
+    border-radius: 50%;
+    background: currentcolor;
+  `,
+	label: css`
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+
+    &:has([data-disabled]) {
+      cursor: not-allowed;
+    }
+  `,
+	root: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 50%;
+
+    color: ${cssVar.colorBgLayout};
+
+    background: ${cssVar.colorBgContainer};
+    outline: none;
+
+    transition:
+      background 150ms ${cssVar.motionEaseOut},
+      border-color 150ms ${cssVar.motionEaseOut};
+
+    &:hover:not([data-disabled], [data-checked]) {
+      border-color: ${cssVar.colorBorder};
+    }
+
+    ${focusRing};
+
+    &[data-checked] {
+      border-color: var(--jinmi-radio-bg, ${cssVar.colorPrimary});
+      background: var(--jinmi-radio-bg, ${cssVar.colorPrimary});
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+
+      border-color: ${cssVar.colorFill};
+
+      color: ${cssVar.colorText};
+
+      opacity: 0.25;
+      background: ${cssVar.colorFill};
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Radio/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: block;\n    flex: none;\n    border-radius: 50%;\n    background: currentcolor;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 50%;\n\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    ${focusRing};\n\n    &[data-checked] {\n      border-color: var(--jinmi-radio-bg, ${cssVar.colorPrimary});\n      background: var(--jinmi-radio-bg, ${cssVar.colorPrimary});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;CAMd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;;aAGvC,OAAO,cAAc;;kBAEhB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;MAGnC,UAAU;;;4CAG4B,OAAO,aAAa;0CACtB,OAAO,aAAa;;;;;;sBAMxC,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;AAGrC,EAAE"}

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

@@ -0,0 +1,58 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { TextProps } from "../../Text/type.mjs";
+import "../../Text/index.mjs";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/base-ui/Radio/type.d.ts
+type BaseRadioProps = Omit<ComponentProps<typeof Radio.Root>, 'className' | 'style' | 'render' | 'children'>;
+interface RadioProps extends BaseRadioProps {
+  backgroundColor?: string;
+  children?: ReactNode;
+  className?: string;
+  classNames?: {
+    radio?: string;
+    text?: string;
+    wrapper?: string;
+  };
+  /**
+   * Dot size in pixels
+   * @default 16
+   */
+  size?: number;
+  style?: CSSProperties;
+  styles?: {
+    radio?: CSSProperties;
+    text?: CSSProperties;
+    wrapper?: CSSProperties;
+  };
+  textProps?: Omit<TextProps, 'children' | 'className' | 'style'>;
+}
+interface RadioGroupOption {
+  disabled?: boolean;
+  label: ReactNode;
+  value: string;
+}
+type BaseRadioGroupProps = Omit<RadioGroup.Props<string>, 'className' | 'style' | 'render' | 'children' | 'onValueChange' | 'onChange'>;
+interface RadioGroupProps extends BaseRadioGroupProps {
+  className?: string;
+  /**
+   * Gap between items
+   * @default 12
+   */
+  gap?: FlexboxProps['gap'];
+  /**
+   * Row layout
+   * @default true
+   */
+  horizontal?: boolean;
+  onChange?: (value: string) => void;
+  options: (string | RadioGroupOption)[];
+  size?: number;
+  style?: CSSProperties;
+  textProps?: RadioProps['textProps'];
+}
+//#endregion
+export { RadioGroupOption, RadioGroupProps, RadioProps };
+//# sourceMappingURL=type.d.mts.map

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

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

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

@@ -0,0 +1,111 @@
+"use client";
+import { styles } from "./style.mjs";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import useMergeState from "use-merge-value";
+import { Star } from "lucide-react";
+//#region src/base-ui/Rate/Rate.tsx
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const formatValue = (value) => String(Math.round(value * 100) / 100);
+const Rate = memo(({ allowHalf = false, character, className, color = cssVar.colorWarning, count = 5, defaultValue = 0, disabled = false, gap, onChange, onKeyDown, onPointerLeave, readOnly = false, size = 20, style, value, ...rest }) => {
+	const [mergedValue, setMergedValue] = useMergeState(defaultValue, {
+		onChange,
+		value
+	});
+	const [hoverValue, setHoverValue] = useState(null);
+	const interactive = !readOnly && !disabled;
+	const step = allowHalf ? .5 : 1;
+	const displayValue = clamp(hoverValue ?? mergedValue, 0, count);
+	const label = `${formatValue(clamp(mergedValue, 0, count))} out of ${count}`;
+	const icon = character ?? /* @__PURE__ */ jsx(Star, {
+		fill: "currentColor",
+		size
+	});
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!interactive || event.defaultPrevented) return;
+		const next = {
+			ArrowDown: mergedValue - step,
+			ArrowLeft: mergedValue - step,
+			ArrowRight: mergedValue + step,
+			ArrowUp: mergedValue + step,
+			End: count,
+			Home: 0
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		setMergedValue(clamp(Math.round(next / step) * step, 0, count));
+	};
+	const a11yProps = readOnly ? {
+		"aria-label": label,
+		"role": "img"
+	} : {
+		"aria-disabled": disabled || void 0,
+		"aria-valuemax": count,
+		"aria-valuemin": 0,
+		"aria-valuenow": mergedValue,
+		"aria-valuetext": label,
+		"role": "slider",
+		"tabIndex": disabled ? -1 : 0
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.root, className),
+		style: {
+			gap: gap ?? size / 2,
+			...style
+		},
+		onKeyDown: handleKeyDown,
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setHoverValue(null);
+		},
+		...a11yProps,
+		...rest,
+		children: Array.from({ length: count }, (_, index) => {
+			const fill = clamp(displayValue - index, 0, 1);
+			const targets = allowHalf ? [index + .5, index + 1] : [index + 1];
+			return /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: styles.star,
+				"data-index": index,
+				style: {
+					fontSize: size,
+					height: size
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cx(styles.icon, styles.empty),
+						style: { minWidth: size },
+						children: icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: styles.fill,
+						style: {
+							color,
+							width: `${fill * 100}%`
+						},
+						children: /* @__PURE__ */ jsx("span", {
+							className: styles.icon,
+							style: { minWidth: size },
+							children: icon
+						})
+					}),
+					interactive && targets.map((target) => /* @__PURE__ */ jsx("span", {
+						className: styles.half,
+						"data-half": target % 1 === 0 && allowHalf ? "end" : "start",
+						"data-value": target,
+						style: allowHalf ? void 0 : { width: "100%" },
+						onClick: () => setMergedValue(target),
+						onPointerEnter: () => setHoverValue(target)
+					}, target))
+				]
+			}, index);
+		})
+	});
+});
+Rate.displayName = "Rate";
+//#endregion
+export { Rate as default };
+
+//# sourceMappingURL=Rate.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rate.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Rate/Rate.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cssVar, cx } from 'antd-style';\r\nimport { Star } from 'lucide-react';\r\nimport { type KeyboardEvent, memo, useState } from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport { styles } from './style';\r\nimport type { RateProps } from './type';\r\n\r\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\r\n\r\nconst formatValue = (value: number) => String(Math.round(value * 100) / 100);\r\n\r\nconst Rate = memo<RateProps>(\r\n  ({\r\n    allowHalf = false,\r\n    character,\r\n    className,\r\n    color = cssVar.colorWarning,\r\n    count = 5,\r\n    defaultValue = 0,\r\n    disabled = false,\r\n    gap,\r\n    onChange,\r\n    onKeyDown,\r\n    onPointerLeave,\r\n    readOnly = false,\r\n    size = 20,\r\n    style,\r\n    value,\r\n    ...rest\r\n  }) => {\r\n    const [mergedValue, setMergedValue] = useControlledState(defaultValue, { onChange, value });\r\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\r\n\r\n    const interactive = !readOnly && !disabled;\r\n    const step = allowHalf ? 0.5 : 1;\r\n    const displayValue = clamp(hoverValue ?? mergedValue, 0, count);\r\n    const label = `${formatValue(clamp(mergedValue, 0, count))} out of ${count}`;\r\n    const icon = character ?? <Star fill=\"currentColor\" size={size} />;\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\r\n      onKeyDown?.(event);\r\n      if (!interactive || event.defaultPrevented) return;\r\n\r\n      const next = {\r\n        ArrowDown: mergedValue - step,\r\n        ArrowLeft: mergedValue - step,\r\n        ArrowRight: mergedValue + step,\r\n        ArrowUp: mergedValue + step,\r\n        End: count,\r\n        Home: 0,\r\n      }[event.key];\r\n      if (next === undefined) return;\r\n\r\n      event.preventDefault();\r\n      setMergedValue(clamp(Math.round(next / step) * step, 0, count));\r\n    };\r\n\r\n    const a11yProps = readOnly\r\n      ? { 'aria-label': label, 'role': 'img' }\r\n      : {\r\n          'aria-disabled': disabled || undefined,\r\n          'aria-valuemax': count,\r\n          'aria-valuemin': 0,\r\n          'aria-valuenow': mergedValue,\r\n          'aria-valuetext': label,\r\n          'role': 'slider',\r\n          'tabIndex': disabled ? -1 : 0,\r\n        };\r\n\r\n    return (\r\n      <div\r\n        className={cx(styles.root, className)}\r\n        style={{ gap: gap ?? size / 2, ...style }}\r\n        onKeyDown={handleKeyDown}\r\n        onPointerLeave={(event) => {\r\n          onPointerLeave?.(event);\r\n          setHoverValue(null);\r\n        }}\r\n        {...a11yProps}\r\n        {...rest}\r\n      >\r\n        {Array.from({ length: count }, (_, index) => {\r\n          const fill = clamp(displayValue - index, 0, 1);\r\n          const targets = allowHalf ? [index + 0.5, index + 1] : [index + 1];\r\n\r\n          return (\r\n            <span\r\n              aria-hidden=\"true\"\r\n              className={styles.star}\r\n              data-index={index}\r\n              key={index}\r\n              style={{ fontSize: size, height: size }}\r\n            >\r\n              <span className={cx(styles.icon, styles.empty)} style={{ minWidth: size }}>\r\n                {icon}\r\n              </span>\r\n              <span className={styles.fill} style={{ color, width: `${fill * 100}%` }}>\r\n                <span className={styles.icon} style={{ minWidth: size }}>\r\n                  {icon}\r\n                </span>\r\n              </span>\r\n              {interactive &&\r\n                targets.map((target) => (\r\n                  <span\r\n                    className={styles.half}\r\n                    data-half={target % 1 === 0 && allowHalf ? 'end' : 'start'}\r\n                    data-value={target}\r\n                    key={target}\r\n                    style={allowHalf ? undefined : { width: '100%' }}\r\n                    onClick={() => setMergedValue(target)}\r\n                    onPointerEnter={() => setHoverValue(target)}\r\n                  />\r\n                ))}\r\n            </span>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nRate.displayName = 'Rate';\r\n\r\nexport default Rate;\r\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1,82 @@
+import { brandCssVar } from "../../styles/brandCssVar.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Rate/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	empty: css`
+    /* Group opacity instead of the translucent colorFill so the star's stroke and fill don't double up where they overlap. */
+    color: ${cssVar.colorText};
+    opacity: 0.12;
+  `,
+	fill: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+
+    overflow: hidden;
+    display: flex;
+  `,
+	half: css`
+    position: absolute;
+    inset-block: 0;
+    width: 50%;
+
+    &[data-half='start'] {
+      inset-inline-start: 0;
+    }
+
+    &[data-half='end'] {
+      inset-inline-end: 0;
+    }
+  `,
+	icon: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+  `,
+	root: css`
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+    outline: none;
+
+    &[role='slider'] {
+      cursor: pointer;
+    }
+
+    &[role='slider']:focus-visible {
+      border-radius: 4px;
+      outline: 2px solid ${brandCssVar.colorBrand};
+      outline-offset: 2px;
+    }
+
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+	star: css`
+    position: relative;
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    transition: transform 0.15s ease;
+
+    [role='slider']:not([aria-disabled='true']) > &:hover {
+      transform: scale(1.1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Rate/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  empty: css`\r\n    /* Group opacity instead of the translucent colorFill so the star's stroke and fill don't double up where they overlap. */\r\n    color: ${cssVar.colorText};\r\n    opacity: 0.12;\r\n  `,\r\n  fill: css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    inset-block: 0;\r\n    inset-inline-start: 0;\r\n\r\n    overflow: hidden;\r\n    display: flex;\r\n  `,\r\n  half: css`\r\n    position: absolute;\r\n    inset-block: 0;\r\n    width: 50%;\r\n\r\n    &[data-half='start'] {\r\n      inset-inline-start: 0;\r\n    }\r\n\r\n    &[data-half='end'] {\r\n      inset-inline-end: 0;\r\n    }\r\n  `,\r\n  icon: css`\r\n    display: inline-flex;\r\n    flex: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n  `,\r\n  root: css`\r\n    display: inline-flex;\r\n    align-items: center;\r\n    line-height: 1;\r\n    outline: none;\r\n\r\n    &[role='slider'] {\r\n      cursor: pointer;\r\n    }\r\n\r\n    &[role='slider']:focus-visible {\r\n      border-radius: 4px;\r\n      outline: 2px solid ${brandCssVar.colorBrand};\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    &[aria-disabled='true'] {\r\n      cursor: not-allowed;\r\n      opacity: 0.5;\r\n    }\r\n  `,\r\n  star: css`\r\n    position: relative;\r\n\r\n    display: inline-flex;\r\n    flex: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    transition: transform 0.15s ease;\r\n\r\n    [role='slider']:not([aria-disabled='true']) > &:hover {\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n  `,\r\n}));\r\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;aAEC,OAAO,UAAU;;;CAG5B,MAAM,GAAG;;;;;;;;;;CAUT,MAAM,GAAG;;;;;;;;;;;;;CAaT,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;;;;;;;;;2BAYgB,YAAY,WAAW;;;;;;;;;CAShD,MAAM,GAAG;;;;;;;;;;;;;;;;;;AAkBX,EAAE"}

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

@@ -0,0 +1,19 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/base-ui/Rate/type.d.ts
+interface RateProps extends Omit<ComponentProps<'div'>, 'children' | 'defaultValue' | 'onChange'> {
+  allowHalf?: boolean;
+  character?: ReactNode;
+  color?: string;
+  count?: number;
+  defaultValue?: number;
+  disabled?: boolean;
+  gap?: number;
+  onChange?: (value: number) => void;
+  readOnly?: boolean;
+  ref?: Ref<HTMLDivElement>;
+  size?: number;
+  value?: number;
+}
+//#endregion
+export { RateProps };
+//# sourceMappingURL=type.d.mts.map

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

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

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

@@ -0,0 +1,72 @@
+"use client";
+import { statusColor, styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { Check, Info, TriangleAlert, X } from "lucide-react";
+//#region src/base-ui/Result/Result.tsx
+const statusIcon = {
+	error: /* @__PURE__ */ jsx(X, {
+		size: 36,
+		strokeWidth: 2.5
+	}),
+	info: /* @__PURE__ */ jsx(Info, {
+		size: 36,
+		strokeWidth: 2
+	}),
+	success: /* @__PURE__ */ jsx(Check, {
+		size: 36,
+		strokeWidth: 2.5
+	}),
+	warning: /* @__PURE__ */ jsx(TriangleAlert, {
+		size: 36,
+		strokeWidth: 2
+	})
+};
+const Result = memo(({ children, className, extra, icon, ref, status = "info", style, subTitle, title, ...rest }) => {
+	const iconStyle = useMemo(() => {
+		if (status === "info") return {
+			background: cssVar.colorFillTertiary,
+			color: cssVar.colorTextSecondary
+		};
+		const color = statusColor[status];
+		return {
+			background: `color-mix(in srgb, ${color} 12%, transparent)`,
+			color
+		};
+	}, [status]);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cx(styles.root, className),
+		ref,
+		style,
+		...rest,
+		children: [
+			icon ? /* @__PURE__ */ jsx("div", {
+				className: styles.customIcon,
+				children: icon
+			}) : /* @__PURE__ */ jsx("div", {
+				className: styles.icon,
+				style: iconStyle,
+				children: statusIcon[status]
+			}),
+			title && /* @__PURE__ */ jsx("h3", {
+				className: styles.title,
+				children: title
+			}),
+			subTitle && /* @__PURE__ */ jsx("p", {
+				className: styles.subTitle,
+				children: subTitle
+			}),
+			extra && /* @__PURE__ */ jsx("div", {
+				className: styles.extra,
+				children: extra
+			}),
+			children
+		]
+	});
+});
+Result.displayName = "Result";
+//#endregion
+export { Result as default };
+
+//# sourceMappingURL=Result.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Result.mjs","names":[],"sources":["../../../src/base-ui/Result/Result.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cssVar, cx } from 'antd-style';\r\nimport { Check, Info, TriangleAlert, X } from 'lucide-react';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport { statusColor, styles } from './style';\r\nimport type { ResultProps } from './type';\r\n\r\nconst statusIcon = {\r\n  error: <X size={36} strokeWidth={2.5} />,\r\n  info: <Info size={36} strokeWidth={2} />,\r\n  success: <Check size={36} strokeWidth={2.5} />,\r\n  warning: <TriangleAlert size={36} strokeWidth={2} />,\r\n};\r\n\r\nconst Result = memo<ResultProps>(\r\n  ({ children, className, extra, icon, ref, status = 'info', style, subTitle, title, ...rest }) => {\r\n    const iconStyle = useMemo(() => {\r\n      if (status === 'info') {\r\n        return { background: cssVar.colorFillTertiary, color: cssVar.colorTextSecondary };\r\n      }\r\n      const color = statusColor[status];\r\n      return { background: `color-mix(in srgb, ${color} 12%, transparent)`, color };\r\n    }, [status]);\r\n\r\n    return (\r\n      <section className={cx(styles.root, className)} ref={ref} style={style} {...rest}>\r\n        {icon ? (\r\n          <div className={styles.customIcon}>{icon}</div>\r\n        ) : (\r\n          <div className={styles.icon} style={iconStyle}>\r\n            {statusIcon[status]}\r\n          </div>\r\n        )}\r\n        {title && <h3 className={styles.title}>{title}</h3>}\r\n        {subTitle && <p className={styles.subTitle}>{subTitle}</p>}\r\n        {extra && <div className={styles.extra}>{extra}</div>}\r\n        {children}\r\n      </section>\r\n    );\r\n  },\r\n);\r\n\r\nResult.displayName = 'Result';\r\n\r\nexport default Result;\r\n"],"mappings":";;;;;;;AASA,MAAM,aAAa;CACjB,OAAO,oBAAC,GAAD;EAAG,MAAM;EAAI,aAAa;CAAM,CAAA;CACvC,MAAM,oBAAC,MAAD;EAAM,MAAM;EAAI,aAAa;CAAI,CAAA;CACvC,SAAS,oBAAC,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;CAC7C,SAAS,oBAAC,eAAD;EAAe,MAAM;EAAI,aAAa;CAAI,CAAA;AACrD;AAEA,MAAM,SAAS,MACZ,EAAE,UAAU,WAAW,OAAO,MAAM,KAAK,SAAS,QAAQ,OAAO,UAAU,OAAO,GAAG,WAAW;CAC/F,MAAM,YAAY,cAAc;EAC9B,IAAI,WAAW,QACb,OAAO;GAAE,YAAY,OAAO;GAAmB,OAAO,OAAO;EAAmB;EAElF,MAAM,QAAQ,YAAY;EAC1B,OAAO;GAAE,YAAY,sBAAsB,MAAM;GAAqB;EAAM;CAC9E,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,WAAD;EAAS,WAAW,GAAG,OAAO,MAAM,SAAS;EAAQ;EAAY;EAAO,GAAI;EAA5E,UAAA;GACG,OACC,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAa,UAAA;GAAU,CAAA,IAE9C,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAM,OAAO;IACjC,UAAA,WAAW;GACT,CAAA;GAEN,SAAS,oBAAC,MAAD;IAAI,WAAW,OAAO;IAAQ,UAAA;GAAU,CAAA;GACjD,YAAY,oBAAC,KAAD;IAAG,WAAW,OAAO;IAAW,UAAA;GAAY,CAAA;GACxD,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,UAAA;GAAW,CAAA;GACnD;EACM;;AAEb,CACF;AAEA,OAAO,cAAc"}

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

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