@aloudata/aloudata-design 2.19.5 → 3.0.0-beta.2

package/dist/Slider/index.js

@@ -1,10 +1,100 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import { Slider as AntdSlider } from 'antd';
-import classnames from 'classnames';
-import React from 'react';
+import { cn } from "../lib/utils.js";
+import React, { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+//#region src/Slider/index.tsx
+function SliderThumbWithTooltip({ tooltip, value, className }) {
+	const [hovered, setHovered] = useState(false);
+	const thumbRef = useRef(null);
+	const showTooltip = tooltip?.open !== void 0 ? tooltip.open : hovered;
+	const formattedValue = tooltip?.formatter ? tooltip.formatter(value) : value;
+	return /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
+		ref: thumbRef,
+		className: cn("tw-relative", className),
+		onPointerEnter: () => setHovered(true),
+		onPointerLeave: () => setHovered(false),
+		children: tooltip && showTooltip && /* @__PURE__ */ jsx("div", {
+			className: "tw-absolute tw-bottom-full tw-left-1/2 tw-mb-2 -tw-translate-x-1/2 tw-whitespace-nowrap tw-rounded-r-50 tw-bg-[var(--alias-colors-bg-tooltip)] tw-px-2 tw-py-1 tw-text-xs tw-text-[var(--alias-colors-text-inverse-default)]",
+			children: formattedValue
+		})
+	});
+}
 function Slider(props) {
-  return /*#__PURE__*/React.createElement(AntdSlider, _extends({}, props, {
-    className: classnames('ald-slider', props.className)
-  }));
+	const { className, style, disabled, min = 0, max = 100, step = 1, range, vertical, marks, tooltip } = props;
+	const [currentValues, setCurrentValues] = useState(() => {
+		if (range) return props.value || props.defaultValue || [min, max];
+		const v = props.value;
+		if (v !== void 0) return [v];
+		return [props.defaultValue ?? min];
+	});
+	const handleValueChange = (values) => {
+		setCurrentValues(values);
+		if (range && "onChange" in props && props.onChange) props.onChange([values[0], values[1]]);
+		else if (!range && "onChange" in props && props.onChange) props.onChange(values[0]);
+	};
+	const handleValueCommit = (values) => {
+		if (range && "onAfterChange" in props && props.onAfterChange) props.onAfterChange([values[0], values[1]]);
+		else if (!range && "onAfterChange" in props && props.onAfterChange) props.onAfterChange(values[0]);
+	};
+	const defaultVal = range ? props.defaultValue || [min, max] : [props.defaultValue ?? min];
+	const controlledVal = range ? props.value : props.value !== void 0 ? [props.value] : void 0;
+	const controlledValKey = controlledVal ? controlledVal.join(",") : void 0;
+	React.useEffect(() => {
+		if (controlledValKey !== void 0) setCurrentValues(controlledValKey.split(",").map(Number));
+	}, [controlledValKey]);
+	const thumbClass = "tw-block tw-size-[10px] tw-cursor-pointer tw-rounded-full tw-bg-[var(--interaction-default-normal)] tw-shadow-[0_0_0_1px_var(--interaction-default-normal)] hover:tw-shadow-[0_0_0_3px_var(--interaction-default-hover)] focus-visible:tw-shadow-[0_0_0_3px_var(--interaction-default-active)] focus-visible:tw-outline-none";
+	const markEntries = marks ? Object.entries(marks) : [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw-relative", vertical ? "tw-h-full" : "tw-w-full"),
+		children: [/* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+			className: cn("ald-slider tw-relative tw-flex tw-touch-none tw-select-none tw-items-center", vertical ? "tw-h-full tw-w-5 tw-flex-col" : "tw-h-5 tw-w-full", disabled && "tw-pointer-events-none tw-opacity-50", className),
+			style,
+			min,
+			max,
+			step,
+			disabled,
+			orientation: vertical ? "vertical" : "horizontal",
+			defaultValue: defaultVal,
+			value: controlledVal,
+			onValueChange: handleValueChange,
+			onValueCommit: handleValueCommit,
+			children: [
+				/* @__PURE__ */ jsx(SliderPrimitive.Track, {
+					className: cn("tw-relative tw-grow tw-rounded-full tw-bg-[var(--interaction-neutral-subtle-normal)]", vertical ? "tw-w-1" : "tw-h-1"),
+					children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "tw-absolute tw-rounded-full tw-bg-[var(--interaction-default-normal)] hover:tw-bg-[var(--interaction-default-hover)]" })
+				}),
+				tooltip ? /* @__PURE__ */ jsx(SliderThumbWithTooltip, {
+					tooltip,
+					value: currentValues[0] ?? min,
+					className: thumbClass
+				}) : /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: thumbClass }),
+				range && (tooltip ? /* @__PURE__ */ jsx(SliderThumbWithTooltip, {
+					tooltip,
+					value: currentValues[1] ?? max,
+					className: thumbClass
+				}) : /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: thumbClass }))
+			]
+		}), markEntries.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "ald-slider-marks tw-relative tw-mt-2 tw-w-full",
+			children: markEntries.map(([key, mark]) => {
+				const percent = (Number(key) - min) / (max - min) * 100;
+				const isNode = typeof mark === "object" && mark !== null && "label" in mark;
+				const label = isNode ? mark.label : mark;
+				const markStyle = isNode ? mark.style : void 0;
+				return /* @__PURE__ */ jsx("span", {
+					className: "ald-slider-mark tw-absolute tw-text-xs tw-text-[var(--content-secondary)]",
+					style: {
+						left: `${percent}%`,
+						transform: "translateX(-50%)",
+						...markStyle
+					},
+					children: label
+				}, key);
+			})
+		})]
+	});
 }
-export default Slider;
+//#endregion
+export { Slider as default };
+
+//# sourceMappingURL=index.js.map

package/dist/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Slider/index.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider';\nimport React, { useRef, useState } from 'react';\nimport { cn } from '../lib/utils';\n\ninterface SliderBaseProps {\n  className?: string;\n  style?: React.CSSProperties;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  vertical?: boolean;\n  marks?: Record<\n    number,\n    React.ReactNode | { style?: React.CSSProperties; label?: React.ReactNode }\n  >;\n  included?: boolean;\n  tooltip?: { open?: boolean; formatter?: (value?: number) => React.ReactNode };\n}\n\ninterface SliderSingleProps extends SliderBaseProps {\n  range?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  onAfterChange?: (value: number) => void;\n}\n\ninterface SliderRangeProps extends SliderBaseProps {\n  range: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  onChange?: (value: [number, number]) => void;\n  onAfterChange?: (value: [number, number]) => void;\n}\n\nfunction SliderThumbWithTooltip({\n  tooltip,\n  value,\n  className,\n}: {\n  tooltip?: SliderBaseProps['tooltip'];\n  value: number;\n  className: string;\n}) {\n  const [hovered, setHovered] = useState(false);\n  const thumbRef = useRef<HTMLSpanElement>(null);\n\n  const showTooltip = tooltip?.open !== undefined ? tooltip.open : hovered;\n  const formattedValue = tooltip?.formatter ? tooltip.formatter(value) : value;\n\n  return (\n    <SliderPrimitive.Thumb\n      ref={thumbRef}\n      className={cn('tw-relative', className)}\n      onPointerEnter={() => setHovered(true)}\n      onPointerLeave={() => setHovered(false)}\n    >\n      {tooltip && showTooltip && (\n        <div className=\"tw-absolute tw-bottom-full tw-left-1/2 tw-mb-2 -tw-translate-x-1/2 tw-whitespace-nowrap tw-rounded-r-50 tw-bg-[var(--alias-colors-bg-tooltip)] tw-px-2 tw-py-1 tw-text-xs tw-text-[var(--alias-colors-text-inverse-default)]\">\n          {formattedValue}\n        </div>\n      )}\n    </SliderPrimitive.Thumb>\n  );\n}\n\nfunction Slider(props: SliderSingleProps | SliderRangeProps) {\n  const {\n    className,\n    style,\n    disabled,\n    min = 0,\n    max = 100,\n    step = 1,\n    range,\n    vertical,\n    marks,\n    tooltip,\n  } = props;\n\n  const [currentValues, setCurrentValues] = useState<number[]>(() => {\n    if (range) {\n      return (\n        (props as SliderRangeProps).value ||\n        (props as SliderRangeProps).defaultValue || [min, max]\n      );\n    }\n    const v = (props as SliderSingleProps).value;\n    if (v !== undefined) return [v];\n    return [(props as SliderSingleProps).defaultValue ?? min];\n  });\n\n  const handleValueChange = (values: number[]) => {\n    setCurrentValues(values);\n    if (range && 'onChange' in props && props.onChange) {\n      (props.onChange as (v: [number, number]) => void)([values[0], values[1]]);\n    } else if (!range && 'onChange' in props && props.onChange) {\n      (props.onChange as (v: number) => void)(values[0]);\n    }\n  };\n\n  const handleValueCommit = (values: number[]) => {\n    if (range && 'onAfterChange' in props && props.onAfterChange) {\n      (props.onAfterChange as (v: [number, number]) => void)([\n        values[0],\n        values[1],\n      ]);\n    } else if (!range && 'onAfterChange' in props && props.onAfterChange) {\n      (props.onAfterChange as (v: number) => void)(values[0]);\n    }\n  };\n\n  const defaultVal = range\n    ? (props as SliderRangeProps).defaultValue || [min, max]\n    : [(props as SliderSingleProps).defaultValue ?? min];\n\n  const controlledVal = range\n    ? (props as SliderRangeProps).value\n    : (props as SliderSingleProps).value !== undefined\n    ? [(props as SliderSingleProps).value!]\n    : undefined;\n\n  // Sync controlled values — use stringified key to detect content changes\n  const controlledValKey = controlledVal ? controlledVal.join(',') : undefined;\n  React.useEffect(() => {\n    if (controlledValKey !== undefined) {\n      setCurrentValues(controlledValKey.split(',').map(Number));\n    }\n  }, [controlledValKey]);\n\n  const thumbClass =\n    'tw-block tw-size-[10px] tw-cursor-pointer tw-rounded-full tw-bg-[var(--interaction-default-normal)] tw-shadow-[0_0_0_1px_var(--interaction-default-normal)] hover:tw-shadow-[0_0_0_3px_var(--interaction-default-hover)] focus-visible:tw-shadow-[0_0_0_3px_var(--interaction-default-active)] focus-visible:tw-outline-none';\n\n  const markEntries = marks ? Object.entries(marks) : [];\n\n  return (\n    <div className={cn('tw-relative', vertical ? 'tw-h-full' : 'tw-w-full')}>\n      <SliderPrimitive.Root\n        className={cn(\n          'ald-slider tw-relative tw-flex tw-touch-none tw-select-none tw-items-center',\n          vertical ? 'tw-h-full tw-w-5 tw-flex-col' : 'tw-h-5 tw-w-full',\n          disabled && 'tw-pointer-events-none tw-opacity-50',\n          className,\n        )}\n        style={style}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={vertical ? 'vertical' : 'horizontal'}\n        defaultValue={defaultVal}\n        value={controlledVal}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n      >\n        <SliderPrimitive.Track\n          className={cn(\n            'tw-relative tw-grow tw-rounded-full tw-bg-[var(--interaction-neutral-subtle-normal)]',\n            vertical ? 'tw-w-1' : 'tw-h-1',\n          )}\n        >\n          <SliderPrimitive.Range className=\"tw-absolute tw-rounded-full tw-bg-[var(--interaction-default-normal)] hover:tw-bg-[var(--interaction-default-hover)]\" />\n        </SliderPrimitive.Track>\n        {tooltip ? (\n          <SliderThumbWithTooltip\n            tooltip={tooltip}\n            value={currentValues[0] ?? min}\n            className={thumbClass}\n          />\n        ) : (\n          <SliderPrimitive.Thumb className={thumbClass} />\n        )}\n        {range &&\n          (tooltip ? (\n            <SliderThumbWithTooltip\n              tooltip={tooltip}\n              value={currentValues[1] ?? max}\n              className={thumbClass}\n            />\n          ) : (\n            <SliderPrimitive.Thumb className={thumbClass} />\n          ))}\n      </SliderPrimitive.Root>\n      {markEntries.length > 0 && (\n        <div className=\"ald-slider-marks tw-relative tw-mt-2 tw-w-full\">\n          {markEntries.map(([key, mark]) => {\n            const numKey = Number(key);\n            const percent = ((numKey - min) / (max - min)) * 100;\n            const isNode =\n              typeof mark === 'object' &&\n              mark !== null &&\n              'label' in (mark as Record<string, unknown>);\n            const label = isNode\n              ? (mark as { label?: React.ReactNode }).label\n              : (mark as React.ReactNode);\n            const markStyle = isNode\n              ? (mark as { style?: React.CSSProperties }).style\n              : undefined;\n\n            return (\n              <span\n                key={key}\n                className=\"ald-slider-mark tw-absolute tw-text-xs tw-text-[var(--content-secondary)]\"\n                style={{\n                  left: `${percent}%`,\n                  transform: 'translateX(-50%)',\n                  ...markStyle,\n                }}\n              >\n                {label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default Slider;\n"],"mappings":"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"}

package/dist/Space/CompactContext.d.ts

@@ -0,0 +1,20 @@
+import { SizeType } from '../ConfigProvider/sizeContext';
+export interface CompactItemContextValue {
+    compactSize?: SizeType;
+    compactDirection?: 'horizontal' | 'vertical';
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+}
+declare const CompactItemContext: import('react').Context<CompactItemContextValue | null>;
+/**
+ * Simplified version of antd's useCompactItemContext.
+ * During v3 migration, this replaces `import { useCompactItemContext } from 'antd/lib/space/Compact'`.
+ * Returns no-op values by default (no compact mode).
+ */
+export declare function useCompactItemContext(prefixCls: string, _direction?: string): {
+    compactSize: SizeType;
+    compactItemClassnames: {
+        [x: string]: boolean | undefined;
+    } | undefined;
+};
+export default CompactItemContext;

package/dist/Space/CompactContext.js

@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react";
+//#region src/Space/CompactContext.tsx
+var CompactItemContext = createContext(null);
+/**
+* Simplified version of antd's useCompactItemContext.
+* During v3 migration, this replaces `import { useCompactItemContext } from 'antd/lib/space/Compact'`.
+* Returns no-op values by default (no compact mode).
+*/
+function useCompactItemContext(prefixCls, _direction) {
+	const ctx = useContext(CompactItemContext);
+	return {
+		compactSize: ctx?.compactSize,
+		compactItemClassnames: ctx ? {
+			[`${prefixCls}-compact-item`]: true,
+			[`${prefixCls}-compact-first-item`]: ctx.isFirstItem,
+			[`${prefixCls}-compact-last-item`]: ctx.isLastItem,
+			[`${prefixCls}-compact-item-${ctx.compactDirection || "horizontal"}`]: true
+		} : void 0
+	};
+}
+//#endregion
+export { CompactItemContext as default, useCompactItemContext };
+
+//# sourceMappingURL=CompactContext.js.map

package/dist/Space/CompactContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactContext.js","names":[],"sources":["../../src/Space/CompactContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { SizeType } from '../ConfigProvider/sizeContext';\n\nexport interface CompactItemContextValue {\n  compactSize?: SizeType;\n  compactDirection?: 'horizontal' | 'vertical';\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n}\n\nconst CompactItemContext = createContext<CompactItemContextValue | null>(null);\n\n/**\n * Simplified version of antd's useCompactItemContext.\n * During v3 migration, this replaces `import { useCompactItemContext } from 'antd/lib/space/Compact'`.\n * Returns no-op values by default (no compact mode).\n */\nexport function useCompactItemContext(prefixCls: string, _direction?: string) {\n  const ctx = useContext(CompactItemContext);\n\n  const compactSize = ctx?.compactSize;\n  const compactItemClassnames = ctx\n    ? {\n        [`${prefixCls}-compact-item`]: true,\n        [`${prefixCls}-compact-first-item`]: ctx.isFirstItem,\n        [`${prefixCls}-compact-last-item`]: ctx.isLastItem,\n        [`${prefixCls}-compact-item-${ctx.compactDirection || 'horizontal'}`]:\n          true,\n      }\n    : undefined;\n\n  return {\n    compactSize,\n    compactItemClassnames,\n  };\n}\n\nexport default CompactItemContext;\n"],"mappings":";;AAUA,IAAM,qBAAqB,cAA8C,KAAK;;;;;;AAO9E,SAAgB,sBAAsB,WAAmB,YAAqB;CAC5E,MAAM,MAAM,WAAW,mBAAmB;AAa1C,QAAO;EACL,aAZkB,KAAK;EAavB,uBAZ4B,MAC1B;IACG,GAAG,UAAU,iBAAiB;IAC9B,GAAG,UAAU,uBAAuB,IAAI;IACxC,GAAG,UAAU,sBAAsB,IAAI;IACvC,GAAG,UAAU,gBAAgB,IAAI,oBAAoB,iBACpD;GACH,GACD;EAKH"}

package/dist/Space/index.d.ts

@@ -1,4 +1,29 @@
-import Space, { SpaceContext, SpaceProps } from 'antd/lib/space';
-export type { SpaceSize } from 'antd/lib/space';
-export type { SpaceProps, SpaceContext };
+import { default as React } from 'react';
+import { SizeType } from '../ConfigProvider/sizeContext';
+export type SpaceSize = 'small' | 'middle' | 'large' | number;
+export interface SpaceProps {
+    className?: string;
+    style?: React.CSSProperties;
+    direction?: 'horizontal' | 'vertical';
+    size?: SpaceSize | [SpaceSize, SpaceSize];
+    align?: 'start' | 'end' | 'center' | 'baseline';
+    wrap?: boolean;
+    children?: React.ReactNode;
+    split?: React.ReactNode;
+}
+export interface SpaceCompactProps {
+    className?: string;
+    style?: React.CSSProperties;
+    size?: SizeType;
+    direction?: 'horizontal' | 'vertical';
+    block?: boolean;
+    children?: React.ReactNode;
+}
+export declare const SpaceContext: React.Context<{
+    latestIndex: number;
+}>;
+declare function Space(props: SpaceProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Space {
+    var Compact: (props: SpaceCompactProps) => import("react/jsx-runtime").JSX.Element;
+}
 export default Space;

package/dist/Space/index.js

@@ -1,2 +1,64 @@
-import Space from 'antd/lib/space';
-export default Space;
+import { cn } from "../lib/utils.js";
+import CompactItemContext from "./CompactContext.js";
+import React, { createContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Space/index.tsx
+var sizeMap = {
+	small: 8,
+	middle: 16,
+	large: 24
+};
+function getGapSize(size) {
+	if (typeof size === "number") return size;
+	return sizeMap[size] || 8;
+}
+var SpaceContext = createContext({ latestIndex: 0 });
+function Space(props) {
+	const { className, style, direction = "horizontal", size = "small", align, wrap = false, children, split } = props;
+	const [horizontalSize, verticalSize] = Array.isArray(size) ? [getGapSize(size[0]), getGapSize(size[1])] : [getGapSize(size), getGapSize(size)];
+	const childNodes = React.Children.toArray(children).filter((child) => child !== null && child !== void 0);
+	const mergedAlign = align === void 0 && direction === "horizontal" ? "center" : align;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("ald-space tw-inline-flex", direction === "vertical" && "tw-flex-col", wrap && "tw-flex-wrap", mergedAlign === "center" && "tw-items-center", mergedAlign === "start" && "tw-items-start", mergedAlign === "end" && "tw-items-end", mergedAlign === "baseline" && "tw-items-baseline", className),
+		style: {
+			gap: `${verticalSize}px ${horizontalSize}px`,
+			...style
+		},
+		children: /* @__PURE__ */ jsx(SpaceContext.Provider, {
+			value: { latestIndex: childNodes.length - 1 },
+			children: childNodes.map((child, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: "ald-space-item",
+				children: child
+			}), split && i < childNodes.length - 1 && /* @__PURE__ */ jsx("span", {
+				className: "ald-space-item-split",
+				children: split
+			})] }, i))
+		})
+	});
+}
+function Compact(props) {
+	const { className, style, size, direction = "horizontal", block = false, children } = props;
+	const childNodes = React.Children.toArray(children).filter((child) => child !== null && child !== void 0);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("ald-space-compact tw-inline-flex", direction === "vertical" && "tw-flex-col", block && "tw-flex", className),
+		style,
+		children: childNodes.map((child, i) => {
+			const isFirstItem = i === 0;
+			const isLastItem = i === childNodes.length - 1;
+			return /* @__PURE__ */ jsx(CompactItemContext.Provider, {
+				value: {
+					compactSize: size,
+					compactDirection: direction,
+					isFirstItem,
+					isLastItem
+				},
+				children: child
+			}, i);
+		})
+	});
+}
+Space.Compact = Compact;
+//#endregion
+export { Space as default };
+
+//# sourceMappingURL=index.js.map

package/dist/Space/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Space/index.tsx"],"sourcesContent":["import React, { createContext } from 'react';\nimport { cn } from '../lib/utils';\nimport CompactItemContext from './CompactContext';\nimport type { SizeType } from '../ConfigProvider/sizeContext';\n\nexport type SpaceSize = 'small' | 'middle' | 'large' | number;\n\nexport interface SpaceProps {\n  className?: string;\n  style?: React.CSSProperties;\n  direction?: 'horizontal' | 'vertical';\n  size?: SpaceSize | [SpaceSize, SpaceSize];\n  align?: 'start' | 'end' | 'center' | 'baseline';\n  wrap?: boolean;\n  children?: React.ReactNode;\n  split?: React.ReactNode;\n}\n\nexport interface SpaceCompactProps {\n  className?: string;\n  style?: React.CSSProperties;\n  size?: SizeType;\n  direction?: 'horizontal' | 'vertical';\n  block?: boolean;\n  children?: React.ReactNode;\n}\n\nconst sizeMap: Record<string, number> = {\n  small: 8,\n  middle: 16,\n  large: 24,\n};\n\nfunction getGapSize(size: SpaceSize): number {\n  if (typeof size === 'number') return size;\n  return sizeMap[size] || 8;\n}\n\nexport const SpaceContext = createContext<{ latestIndex: number }>({\n  latestIndex: 0,\n});\n\nfunction Space(props: SpaceProps) {\n  const {\n    className,\n    style,\n    direction = 'horizontal',\n    size = 'small',\n    align,\n    wrap = false,\n    children,\n    split,\n  } = props;\n\n  const [horizontalSize, verticalSize] = Array.isArray(size)\n    ? [getGapSize(size[0]), getGapSize(size[1])]\n    : [getGapSize(size), getGapSize(size)];\n\n  const childNodes = React.Children.toArray(children).filter(\n    (child) => child !== null && child !== undefined,\n  );\n\n  const mergedAlign =\n    align === undefined && direction === 'horizontal' ? 'center' : align;\n\n  return (\n    <div\n      className={cn(\n        'ald-space tw-inline-flex',\n        direction === 'vertical' && 'tw-flex-col',\n        wrap && 'tw-flex-wrap',\n        mergedAlign === 'center' && 'tw-items-center',\n        mergedAlign === 'start' && 'tw-items-start',\n        mergedAlign === 'end' && 'tw-items-end',\n        mergedAlign === 'baseline' && 'tw-items-baseline',\n        className,\n      )}\n      style={{\n        gap: `${verticalSize}px ${horizontalSize}px`,\n        ...style,\n      }}\n    >\n      <SpaceContext.Provider value={{ latestIndex: childNodes.length - 1 }}>\n        {childNodes.map((child, i) => (\n          <React.Fragment key={i}>\n            <div className=\"ald-space-item\">{child}</div>\n            {split && i < childNodes.length - 1 && (\n              <span className=\"ald-space-item-split\">{split}</span>\n            )}\n          </React.Fragment>\n        ))}\n      </SpaceContext.Provider>\n    </div>\n  );\n}\n\nfunction Compact(props: SpaceCompactProps) {\n  const {\n    className,\n    style,\n    size,\n    direction = 'horizontal',\n    block = false,\n    children,\n  } = props;\n\n  const childNodes = React.Children.toArray(children).filter(\n    (child) => child !== null && child !== undefined,\n  );\n\n  return (\n    <div\n      className={cn(\n        'ald-space-compact tw-inline-flex',\n        direction === 'vertical' && 'tw-flex-col',\n        block && 'tw-flex',\n        className,\n      )}\n      style={style}\n    >\n      {childNodes.map((child, i) => {\n        const isFirstItem = i === 0;\n        const isLastItem = i === childNodes.length - 1;\n\n        return (\n          <CompactItemContext.Provider\n            key={i}\n            value={{\n              compactSize: size,\n              compactDirection: direction,\n              isFirstItem,\n              isLastItem,\n            }}\n          >\n            {child}\n          </CompactItemContext.Provider>\n        );\n      })}\n    </div>\n  );\n}\n\nSpace.Compact = Compact;\n\nexport default Space;\n"],"mappings":";;;;;AA2BA,IAAM,UAAkC;CACtC,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,SAAS,WAAW,MAAyB;AAC3C,KAAI,OAAO,SAAS,SAAU,QAAO;AACrC,QAAO,QAAQ,SAAS;;AAG1B,IAAa,eAAe,cAAuC,EACjE,aAAa,GACd,CAAC;AAEF,SAAS,MAAM,OAAmB;CAChC,MAAM,EACJ,WACA,OACA,YAAY,cACZ,OAAO,SACP,OACA,OAAO,OACP,UACA,UACE;CAEJ,MAAM,CAAC,gBAAgB,gBAAgB,MAAM,QAAQ,KAAK,GACtD,CAAC,WAAW,KAAK,GAAG,EAAE,WAAW,KAAK,GAAG,CAAC,GAC1C,CAAC,WAAW,KAAK,EAAE,WAAW,KAAK,CAAC;CAExC,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS,CAAC,QACjD,UAAU,UAAU,QAAQ,UAAU,OACxC;CAED,MAAM,cACJ,UAAU,UAAa,cAAc,eAAe,WAAW;AAEjE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,4BACA,cAAc,cAAc,eAC5B,QAAQ,gBACR,gBAAgB,YAAY,mBAC5B,gBAAgB,WAAW,kBAC3B,gBAAgB,SAAS,gBACzB,gBAAgB,cAAc,qBAC9B,UACD;EACD,OAAO;GACL,KAAK,GAAG,aAAa,KAAK,eAAe;GACzC,GAAG;GACJ;YAED,oBAAC,aAAa,UAAd;GAAuB,OAAO,EAAE,aAAa,WAAW,SAAS,GAAG;aACjE,WAAW,KAAK,OAAO,MACtB,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,oBAAC,OAAD;IAAK,WAAU;cAAkB;IAAY,CAAA,EAC5C,SAAS,IAAI,WAAW,SAAS,KAChC,oBAAC,QAAD;IAAM,WAAU;cAAwB;IAAa,CAAA,CAExC,EAAA,EALI,EAKJ,CACjB;GACoB,CAAA;EACpB,CAAA;;AAIV,SAAS,QAAQ,OAA0B;CACzC,MAAM,EACJ,WACA,OACA,MACA,YAAY,cACZ,QAAQ,OACR,aACE;CAEJ,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS,CAAC,QACjD,UAAU,UAAU,QAAQ,UAAU,OACxC;AAED,QACE,oBAAC,OAAD;EACE,WAAW,GACT,oCACA,cAAc,cAAc,eAC5B,SAAS,WACT,UACD;EACM;YAEN,WAAW,KAAK,OAAO,MAAM;GAC5B,MAAM,cAAc,MAAM;GAC1B,MAAM,aAAa,MAAM,WAAW,SAAS;AAE7C,UACE,oBAAC,mBAAmB,UAApB;IAEE,OAAO;KACL,aAAa;KACb,kBAAkB;KAClB;KACA;KACD;cAEA;IAC2B,EATvB,EASuB;IAEhC;EACE,CAAA;;AAIV,MAAM,UAAU"}

package/dist/Spin/CustomIcon/index.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import { default as React } from 'react';
+import { SizeType } from '../../ConfigProvider/sizeContext';
 import { TDirection } from '..';
-import type { SizeType } from '../../ConfigProvider/sizeContext';
 interface ICustomIconProps {
     size?: SizeType;
     tip?: React.ReactNode;
@@ -9,5 +9,5 @@ interface ICustomIconProps {
     className?: string;
     inContainer?: boolean;
 }
-declare const Icon: (props: ICustomIconProps) => React.JSX.Element | null;
+declare const Icon: (props: ICustomIconProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Icon;

package/dist/Spin/CustomIcon/index.js

@@ -1,39 +1,28 @@
-import classNames from 'classnames';
-import React from 'react';
-import { LoadingDuotone } from "../../Icon";
-import { getUUID } from "../../_utils/hooks/useId";
-var Icon = function Icon(props) {
-  var size = props.size,
-    tip = props.tip,
-    direction = props.direction,
-    _props$spinning = props.spinning,
-    spinning = _props$spinning === void 0 ? true : _props$spinning,
-    className = props.className,
-    inContainer = props.inContainer;
-  if (!spinning) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, {
-    key: getUUID().toString()
-  }, inContainer && /*#__PURE__*/React.createElement("div", {
-    className: "spinner-mask"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames('spinner', className, {
-      'spinner-horizontal': direction === 'horizontal',
-      'spinner-center': inContainer
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('spinner-inner', {
-      'spinner-inner-small': size === 'small',
-      'spinner-inner-large': size === 'large',
-      'spinner-inner-middle': size !== 'small' && size !== 'large'
-    })
-  }, size === 'small' && /*#__PURE__*/React.createElement(LoadingDuotone, {
-    size: 20
-  }), size === 'large' && /*#__PURE__*/React.createElement(LoadingDuotone, {
-    size: 64
-  }), size !== 'small' && size !== 'large' && /*#__PURE__*/React.createElement(LoadingDuotone, {
-    size: 40
-  })), tip && /*#__PURE__*/React.createElement("div", {
-    className: "spinner-text"
-  }, tip)));
+import { cn } from "../../lib/utils.js";
+import Memo from "../../Icon/components/LoadingDuotone.js";
+import { getUUID } from "../../_utils/hooks/useId.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Spin/CustomIcon/index.tsx
+var Icon = (props) => {
+	const { size, tip, direction, spinning = true, className, inContainer } = props;
+	if (!spinning) return null;
+	return /* @__PURE__ */ jsxs(React.Fragment, { children: [inContainer && /* @__PURE__ */ jsx("div", { className: "spinner-mask tw-absolute tw-inset-0 tw-size-full tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-opacity-40" }), /* @__PURE__ */ jsxs("div", {
+		className: cn("spinner tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-center tw-gap-4", direction === "horizontal" && "spinner-horizontal tw-flex-row tw-gap-[6px]", inContainer && "spinner-center tw-absolute tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("spinner-inner tw-flex tw-animate-spin tw-items-center", size === "small" && "spinner-inner-small tw-size-5", size === "large" && "spinner-inner-large tw-size-16", size !== "small" && size !== "large" && "spinner-inner-middle tw-size-10"),
+			children: [
+				size === "small" && /* @__PURE__ */ jsx(Memo, { size: 20 }),
+				size === "large" && /* @__PURE__ */ jsx(Memo, { size: 64 }),
+				size !== "small" && size !== "large" && /* @__PURE__ */ jsx(Memo, { size: 40 })
+			]
+		}), tip && /* @__PURE__ */ jsx("div", {
+			className: "ald-spinner-text tw-text-[var(--alias-colors-text-subtle)]",
+			children: tip
+		})]
+	})] }, getUUID().toString());
 };
-export default Icon;
+//#endregion
+export { Icon as default };
+
+//# sourceMappingURL=index.js.map

package/dist/Spin/CustomIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Spin/CustomIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport type { SizeType } from '../../ConfigProvider/sizeContext';\nimport { LoadingDuotone } from '../../Icon';\nimport { cn } from '../../lib/utils';\nimport { getUUID } from '../../_utils/hooks/useId';\nimport { TDirection } from '..';\n\ninterface ICustomIconProps {\n  size?: SizeType;\n  tip?: React.ReactNode;\n  direction: TDirection;\n  spinning?: boolean;\n  className?: string;\n  inContainer?: boolean;\n}\n\nconst Icon = (props: ICustomIconProps) => {\n  const {\n    size,\n    tip,\n    direction,\n    spinning = true,\n    className,\n    inContainer,\n  } = props;\n  if (!spinning) return null;\n  return (\n    <React.Fragment key={getUUID().toString()}>\n      {inContainer && (\n        <div className=\"spinner-mask tw-absolute tw-inset-0 tw-size-full tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-opacity-40\" />\n      )}\n      <div\n        className={cn(\n          'spinner tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-center tw-gap-4',\n          direction === 'horizontal' &&\n            'spinner-horizontal tw-flex-row tw-gap-[6px]',\n          inContainer &&\n            'spinner-center tw-absolute tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2',\n          className,\n        )}\n      >\n        <div\n          className={cn(\n            'spinner-inner tw-flex tw-animate-spin tw-items-center',\n            size === 'small' && 'spinner-inner-small tw-size-5',\n            size === 'large' && 'spinner-inner-large tw-size-16',\n            size !== 'small' &&\n              size !== 'large' &&\n              'spinner-inner-middle tw-size-10',\n          )}\n        >\n          {size === 'small' && <LoadingDuotone size={20} />}\n          {size === 'large' && <LoadingDuotone size={64} />}\n          {size !== 'small' && size !== 'large' && <LoadingDuotone size={40} />}\n        </div>\n        {tip && (\n          <div className=\"ald-spinner-text tw-text-[var(--alias-colors-text-subtle)]\">\n            {tip}\n          </div>\n        )}\n      </div>\n    </React.Fragment>\n  );\n};\nexport default Icon;\n"],"mappings":";;;;;;AAgBA,IAAM,QAAQ,UAA4B;CACxC,MAAM,EACJ,MACA,KACA,WACA,WAAW,MACX,WACA,gBACE;AACJ,KAAI,CAAC,SAAU,QAAO;AACtB,QACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,eACC,oBAAC,OAAD,EAAK,WAAU,kHAAmH,CAAA,EAEpI,qBAAC,OAAD;EACE,WAAW,GACT,oFACA,cAAc,gBACZ,+CACF,eACE,6FACF,UACD;YARH,CAUE,qBAAC,OAAD;GACE,WAAW,GACT,yDACA,SAAS,WAAW,iCACpB,SAAS,WAAW,kCACpB,SAAS,WACP,SAAS,WACT,kCACH;aARH;IAUG,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IAChD,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IAChD,SAAS,WAAW,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IACjE;MACL,OACC,oBAAC,OAAD;GAAK,WAAU;aACZ;GACG,CAAA,CAEJ;IACS,EAAA,EAlCI,SAAS,CAAC,UAAU,CAkCxB"}

package/dist/Spin/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type TDirection = 'vertical' | 'horizontal';
 export interface SpinProps {
     size?: 'small' | 'large' | 'middle';
@@ -10,5 +10,5 @@ export interface SpinProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare function CustomSpin(props: SpinProps): React.JSX.Element | null;
+declare function CustomSpin(props: SpinProps): import("react/jsx-runtime").JSX.Element | null;
 export default CustomSpin;

package/dist/Spin/index.js

@@ -1,64 +1,49 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import classNames from 'classnames';
-import React, { isValidElement } from 'react';
-import { cloneElement, isFragment, isReactComponent } from "../_utils/reactNode";
-import CustomIcon from "./CustomIcon";
+import { cn } from "../lib/utils.js";
+import { cloneElement as cloneElement$1, isFragment, isReactComponent } from "../_utils/reactNode.js";
+import Icon from "./CustomIcon/index.js";
+import React, { isValidElement } from "react";
+//#region src/Spin/index.tsx
 function CustomSpin(props) {
-  var size = props.size,
-    tip = props.tip,
-    _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'vertical' : _props$direction,
-    children = props.children,
-    spinning = props.spinning,
-    wrapperClassName = props.wrapperClassName,
-    className = props.className,
-    style = props.style;
-  if (!children) {
-    return CustomIcon({
-      size: size,
-      tip: tip,
-      direction: direction,
-      spinning: spinning,
-      className: className
-    });
-  }
-  if (! /*#__PURE__*/isValidElement(children)) {
-    return children;
-  }
-  if (isFragment(children) || isReactComponent(children)) {
-    return /*#__PURE__*/React.createElement('div', {
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        position: 'relative'
-      }),
-      className: classNames(wrapperClassName)
-    }, [children, CustomIcon({
-      size: size,
-      tip: tip,
-      direction: direction,
-      inContainer: true,
-      spinning: spinning,
-      className: className
-    })]);
-  } else {
-    return cloneElement(children, {
-      style: _objectSpread({
-        position: 'relative'
-      }, children.props.style),
-      className: classNames(wrapperClassName, children.props.className),
-      children: [children.props.children, CustomIcon({
-        size: size,
-        tip: tip,
-        direction: direction,
-        spinning: spinning,
-        inContainer: true,
-        className: className
-      })]
-    });
-  }
+	const { size, tip, direction = "vertical", children, spinning, wrapperClassName, className, style } = props;
+	if (!children) return Icon({
+		size,
+		tip,
+		direction,
+		spinning,
+		className
+	});
+	if (!isValidElement(children)) return children;
+	if (isFragment(children) || isReactComponent(children)) return React.createElement("div", {
+		style: {
+			...style,
+			position: "relative"
+		},
+		className: cn(wrapperClassName)
+	}, [children, Icon({
+		size,
+		tip,
+		direction,
+		inContainer: true,
+		spinning,
+		className
+	})]);
+	else return cloneElement$1(children, {
+		style: {
+			position: "relative",
+			...children.props.style
+		},
+		className: cn(wrapperClassName, children.props.className),
+		children: [children.props.children, Icon({
+			size,
+			tip,
+			direction,
+			spinning,
+			inContainer: true,
+			className
+		})]
+	});
 }
-export default CustomSpin;
+//#endregion
+export { CustomSpin as default };
+
+//# sourceMappingURL=index.js.map

package/dist/Spin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Spin/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, { ReactElement, isValidElement } from 'react';\nimport {\n  cloneElement,\n  isFragment,\n  isReactComponent,\n} from '../_utils/reactNode';\nimport CustomIcon from './CustomIcon';\n\nexport type TDirection = 'vertical' | 'horizontal';\n\nexport interface SpinProps {\n  size?: 'small' | 'large' | 'middle';\n  direction?: TDirection;\n  children?: React.ReactElement;\n  tip?: React.ReactNode;\n  spinning?: boolean;\n  wrapperClassName?: string;\n  className?: string;\n  style?: React.CSSProperties;\n}\nfunction CustomSpin(props: SpinProps) {\n  const {\n    size,\n    tip,\n    direction = 'vertical',\n    children,\n    spinning,\n    wrapperClassName,\n    className,\n    style,\n  } = props;\n  if (!children) {\n    return CustomIcon({ size, tip, direction, spinning, className });\n  }\n  if (!isValidElement(children)) {\n    return children;\n  }\n  if (isFragment(children) || isReactComponent(children)) {\n    return React.createElement(\n      'div',\n      {\n        style: { ...style, position: 'relative' },\n        className: cn(wrapperClassName),\n      },\n      [\n        children,\n        CustomIcon({\n          size,\n          tip,\n          direction,\n          inContainer: true,\n          spinning,\n          className,\n        }),\n      ],\n    );\n  } else {\n    return cloneElement(children, {\n      style: {\n        position: 'relative',\n        ...(children as ReactElement).props.style,\n      },\n      className: cn(\n        wrapperClassName,\n        (children as ReactElement).props.className,\n      ),\n      children: [\n        (children as ReactElement).props.children,\n        CustomIcon({\n          size,\n          tip,\n          direction,\n          spinning,\n          inContainer: true,\n          className,\n        }),\n      ],\n    });\n  }\n}\nexport default CustomSpin;\n"],"mappings":";;;;;AAqBA,SAAS,WAAW,OAAkB;CACpC,MAAM,EACJ,MACA,KACA,YAAY,YACZ,UACA,UACA,kBACA,WACA,UACE;AACJ,KAAI,CAAC,SACH,QAAO,KAAW;EAAE;EAAM;EAAK;EAAW;EAAU;EAAW,CAAC;AAElE,KAAI,CAAC,eAAe,SAAS,CAC3B,QAAO;AAET,KAAI,WAAW,SAAS,IAAI,iBAAiB,SAAS,CACpD,QAAO,MAAM,cACX,OACA;EACE,OAAO;GAAE,GAAG;GAAO,UAAU;GAAY;EACzC,WAAW,GAAG,iBAAiB;EAChC,EACD,CACE,UACA,KAAW;EACT;EACA;EACA;EACA,aAAa;EACb;EACA;EACD,CAAC,CACH,CACF;KAED,QAAO,eAAa,UAAU;EAC5B,OAAO;GACL,UAAU;GACV,GAAI,SAA0B,MAAM;GACrC;EACD,WAAW,GACT,kBACC,SAA0B,MAAM,UAClC;EACD,UAAU,CACP,SAA0B,MAAM,UACjC,KAAW;GACT;GACA;GACA;GACA;GACA,aAAa;GACb;GACD,CAAC,CACH;EACF,CAAC"}

package/dist/StatusLight/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface IProps {
     size?: 'middle' | 'small';
     style?: 'dot' | 'icon';
@@ -8,5 +8,5 @@ export interface IProps {
     status?: 'info' | 'neutral' | 'danger' | 'success' | 'warning';
     className?: string;
 }
-declare function StatusLight({ size, style, dotColor, icon, text, status, className, }: IProps): React.JSX.Element;
+declare function StatusLight({ size, style, dotColor, icon, text, status, className, }: IProps): import("react/jsx-runtime").JSX.Element;
 export default StatusLight;