@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/SortableList/components/DragHandle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DragHandle.mjs","names":[],"sources":["../../../src/SortableList/components/DragHandle.tsx"],"sourcesContent":["'use client';\n\nimport { GripVertical } from 'lucide-react';\nimport { memo, use, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/base-ui/ActionIcon';\n\nimport { SortableItemContext } from './SortableItem';\n\nconst DragHandle = memo<ActionIconProps>(({ style, ...rest }) => {\n  const [grab, setGrab] = useState(false);\n  const { attributes, listeners, ref } = use(SortableItemContext);\n  return (\n    <ActionIcon\n      glass\n      data-cypress=\"draggable-handle\"\n      icon={GripVertical}\n      size={'small'}\n      style={{ cursor: grab ? 'grab' : 'grabbing', ...style }}\n      onMouseDown={() => setGrab(true)}\n      onMouseUp={() => setGrab(false)}\n      {...rest}\n      {...attributes}\n      {...listeners}\n      ref={ref}\n    />\n  );\n});\n\nDragHandle.displayName = 'DragHandle';\n\nexport default DragHandle;\n"],"mappings":";;;;;;;AASA,MAAM,aAAa,MAAuB,EAAE,OAAO,GAAG,WAAW;CAC/D,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,EAAE,YAAY,WAAW,QAAQ,IAAI,mBAAmB;CAC9D,OACE,oBAAC,YAAD;EACE,OAAA;EACA,gBAAa;EACb,MAAM;EACN,MAAM;EACN,OAAO;GAAE,QAAQ,OAAO,SAAS;GAAY,GAAG;EAAM;EACtD,mBAAmB,QAAQ,IAAI;EAC/B,iBAAiB,QAAQ,KAAK;EAC9B,GAAI;EACJ,GAAI;EACJ,GAAI;EACC;CACN,CAAA;AAEL,CAAC;AAED,WAAW,cAAc"}
+{"version":3,"file":"DragHandle.mjs","names":[],"sources":["../../../src/SortableList/components/DragHandle.tsx"],"sourcesContent":["'use client';\n\nimport { GripVertical } from 'lucide-react';\nimport { memo, use, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\n\nimport { SortableItemContext } from './SortableItem';\n\nconst DragHandle = memo<ActionIconProps>(({ style, ...rest }) => {\n  const [grab, setGrab] = useState(false);\n  const { attributes, listeners, ref } = use(SortableItemContext);\n  return (\n    <ActionIcon\n      glass\n      data-cypress=\"draggable-handle\"\n      icon={GripVertical}\n      size={'small'}\n      style={{ cursor: grab ? 'grab' : 'grabbing', ...style }}\n      onMouseDown={() => setGrab(true)}\n      onMouseUp={() => setGrab(false)}\n      {...rest}\n      {...attributes}\n      {...listeners}\n      ref={ref}\n    />\n  );\n});\n\nDragHandle.displayName = 'DragHandle';\n\nexport default DragHandle;\n"],"mappings":";;;;;;;AASA,MAAM,aAAa,MAAuB,EAAE,OAAO,GAAG,WAAW;CAC/D,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,EAAE,YAAY,WAAW,QAAQ,IAAI,mBAAmB;CAC9D,OACE,oBAAC,YAAD;EACE,OAAA;EACA,gBAAa;EACb,MAAM;EACN,MAAM;EACN,OAAO;GAAE,QAAQ,OAAO,SAAS;GAAY,GAAG;EAAM;EACtD,mBAAmB,QAAQ,IAAI;EAC/B,iBAAiB,QAAQ,KAAK;EAC9B,GAAI;EACJ,GAAI;EACJ,GAAI;EACC;CACN,CAAA;AAEL,CAAC;AAED,WAAW,cAAc"}

package/es/SortableList/components/SortableItem.d.mts

@@ -2,11 +2,11 @@ import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
 import "@dnd-kit/core";
 //#region src/SortableList/components/SortableItem.d.ts
-interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
+export interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
   id: string | number;
   variant?: 'borderless' | 'filled' | 'outlined';
 }
 declare const SortableItem: import("react").NamedExoticComponent<SortableItemProps>;
 //#endregion
-export { SortableItemProps, SortableItem as default };
+export { SortableItem as default };
 //# sourceMappingURL=SortableItem.d.mts.map

package/es/SortableList/components/SortableItem.mjs

@@ -1,12 +1,18 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { variants } from "../style.mjs";
+import { stylish } from "../../styles/stylex/stylish.mjs";
+import { styles } from "../style.mjs";
 import { createContext, memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 //#region src/SortableList/components/SortableItem.tsx
+const variantStyles = {
+	borderless: stylish.variantBorderlessWithoutHover,
+	filled: stylish.variantFilledWithoutHover,
+	outlined: stylish.variantOutlinedWithoutHover
+};
 const SortableItemContext = createContext({
 	attributes: {},
 	listeners: void 0,
@@ -29,9 +35,13 @@ const SortableItem = memo(({ variant = "borderless", className, children, id, st
 			horizontal: true,
 			align: "center",
 			as: "li",
-			className: cx(variants({ variant }), className),
 			gap: 4,
 			ref: setNodeRef,
+			className: styleProps([
+				styles.item,
+				variantStyles[variant],
+				variant !== "borderless" && styles.itemVariant
+			], className).className,
 			style: {
 				opacity: isDragging ? .4 : void 0,
 				transform: CSS.Translate.toString(transform),

package/es/SortableList/components/SortableItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.mjs","names":["Flexbox"],"sources":["../../../src/SortableList/components/SortableItem.tsx"],"sourcesContent":["'use client';\n\nimport type { DraggableSyntheticListeners } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { cx } from 'antd-style';\nimport { createContext, memo, useMemo } from 'react';\n\nimport { type FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\n\nimport { variants } from '../style';\n\ninterface Context {\n  attributes: Record<string, any>;\n  listeners: DraggableSyntheticListeners;\n  ref: (node: HTMLElement | null) => void;\n}\n\nexport const SortableItemContext = createContext<Context>({\n  attributes: {},\n  listeners: undefined,\n  ref() {},\n});\n\nexport interface SortableItemProps extends Omit<FlexboxProps, 'id'> {\n  id: string | number;\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst SortableItem = memo<SortableItemProps>(\n  ({ variant = 'borderless', className, children, id, style, ...rest }) => {\n    const {\n      attributes,\n      isDragging,\n      listeners,\n      setNodeRef,\n      setActivatorNodeRef,\n      transform,\n      transition,\n    } = useSortable({ id });\n    const context = useMemo(\n      () => ({\n        attributes,\n        listeners,\n        ref: setActivatorNodeRef,\n      }),\n      [attributes, listeners, setActivatorNodeRef],\n    );\n\n    return (\n      <SortableItemContext value={context}>\n        <Flexbox\n          horizontal\n          align={'center'}\n          as={'li'}\n          className={cx(variants({ variant }), className)}\n          gap={4}\n          ref={setNodeRef}\n          style={{\n            opacity: isDragging ? 0.4 : undefined,\n            transform: CSS.Translate.toString(transform),\n            transition,\n            ...style,\n          }}\n          {...rest}\n        >\n          {children}\n        </Flexbox>\n      </SortableItemContext>\n    );\n  },\n);\n\nSortableItem.displayName = 'SortableItem';\n\nexport default SortableItem;\n"],"mappings":";;;;;;;;;AAmBA,MAAa,sBAAsB,cAAuB;CACxD,YAAY,CAAC;CACb,WAAW,KAAA;CACX,MAAM,CAAC;AACT,CAAC;AAOD,MAAM,eAAe,MAClB,EAAE,UAAU,cAAc,WAAW,UAAU,IAAI,OAAO,GAAG,WAAW;CACvE,MAAM,EACJ,YACA,YACA,WACA,YACA,qBACA,WACA,eACE,YAAY,EAAE,GAAG,CAAC;CACtB,MAAM,UAAU,eACP;EACL;EACA;EACA,KAAK;CACP,IACA;EAAC;EAAY;EAAW;CAAmB,CAC7C;CAEA,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,IAAI;GACJ,WAAW,GAAG,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS;GAC9C,KAAK;GACL,KAAK;GACL,OAAO;IACL,SAAS,aAAa,KAAM,KAAA;IAC5B,WAAW,IAAI,UAAU,SAAS,SAAS;IAC3C;IACA,GAAG;GACL;GACA,GAAI;GAEH;EACM,CAAA;CACU,CAAA;AAEzB,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"SortableItem.mjs","names":["Flexbox"],"sources":["../../../src/SortableList/components/SortableItem.tsx"],"sourcesContent":["'use client';\n\nimport type { DraggableSyntheticListeners } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { createContext, memo, useMemo } from 'react';\n\nimport { type FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\n\nimport { styles } from '../style';\n\ninterface Context {\n  attributes: Record<string, any>;\n  listeners: DraggableSyntheticListeners;\n  ref: (node: HTMLElement | null) => void;\n}\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: stylish.variantFilledWithoutHover,\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nexport const SortableItemContext = createContext<Context>({\n  attributes: {},\n  listeners: undefined,\n  ref() {},\n});\n\nexport interface SortableItemProps extends Omit<FlexboxProps, 'id'> {\n  id: string | number;\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst SortableItem = memo<SortableItemProps>(\n  ({ variant = 'borderless', className, children, id, style, ...rest }) => {\n    const {\n      attributes,\n      isDragging,\n      listeners,\n      setNodeRef,\n      setActivatorNodeRef,\n      transform,\n      transition,\n    } = useSortable({ id });\n    const context = useMemo(\n      () => ({\n        attributes,\n        listeners,\n        ref: setActivatorNodeRef,\n      }),\n      [attributes, listeners, setActivatorNodeRef],\n    );\n\n    return (\n      <SortableItemContext value={context}>\n        <Flexbox\n          horizontal\n          align={'center'}\n          as={'li'}\n          gap={4}\n          ref={setNodeRef}\n          className={\n            styleProps(\n              [styles.item, variantStyles[variant], variant !== 'borderless' && styles.itemVariant],\n              className,\n            ).className\n          }\n          style={{\n            opacity: isDragging ? 0.4 : undefined,\n            transform: CSS.Translate.toString(transform),\n            transition,\n            ...style,\n          }}\n          {...rest}\n        >\n          {children}\n        </Flexbox>\n      </SortableItemContext>\n    );\n  },\n);\n\nSortableItem.displayName = 'SortableItem';\n\nexport default SortableItem;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,QAAQ;CAChB,UAAU,QAAQ;AACpB;AAEA,MAAa,sBAAsB,cAAuB;CACxD,YAAY,CAAC;CACb,WAAW,KAAA;CACX,MAAM,CAAC;AACT,CAAC;AAOD,MAAM,eAAe,MAClB,EAAE,UAAU,cAAc,WAAW,UAAU,IAAI,OAAO,GAAG,WAAW;CACvE,MAAM,EACJ,YACA,YACA,WACA,YACA,qBACA,WACA,eACE,YAAY,EAAE,GAAG,CAAC;CACtB,MAAM,UAAU,eACP;EACL;EACA;EACA,KAAK;CACP,IACA;EAAC;EAAY;EAAW;CAAmB,CAC7C;CAEA,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,IAAI;GACJ,KAAK;GACL,KAAK;GACL,WACE,WACE;IAAC,OAAO;IAAM,cAAc;IAAU,YAAY,gBAAgB,OAAO;GAAW,GACpF,SACF,CAAC,CAAC;GAEJ,OAAO;IACL,SAAS,aAAa,KAAM,KAAA;IAC5B,WAAW,IAAI,UAAU,SAAS,SAAS;IAC3C;IACA,GAAG;GACL;GACA,GAAI;GAEH;EACM,CAAA;CACU,CAAA;AAEzB,CACF;AAEA,aAAa,cAAc"}

package/es/SortableList/style.mjs

@@ -1,44 +1,25 @@
-import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles } from "antd-style";
-import { cva } from "class-variance-authority";
 //#region src/SortableList/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		borderless: staticStylish.variantBorderlessWithoutHover,
-		container: css`
-      padding: 0;
-      list-style: none;
-    `,
-		filled: staticStylish.variantFilledWithoutHover,
-		item: css`
-      overflow: hidden;
-      box-sizing: border-box;
-      border-radius: ${cssVar.borderRadius};
-      list-style: none;
-    `,
-		itemVariant: css`
-      padding-block: 4px;
-      padding-inline: 4px 16px;
-    `,
-		outlined: staticStylish.variantOutlinedWithoutHover
-	};
-});
-const variants = cva(styles.item, {
-	compoundVariants: [{
-		className: styles.itemVariant,
-		variant: "outlined"
-	}, {
-		className: styles.itemVariant,
-		variant: "filled"
-	}],
-	defaultVariants: { variant: "borderless" },
-	variants: { variant: {
-		filled: styles.filled,
-		outlined: styles.outlined,
-		borderless: styles.borderless
-	} }
-});
+const styles = {
+	container: {
+		kmVPX3: "lb1717udv",
+		kB88ic: "lbe8uvvx",
+		$$css: true
+	},
+	item: {
+		kaIpWk: "lb1sbi92r",
+		kB88ic: "lbe8uvvx",
+		kVQacm: "lbb3r6kr",
+		kB7OPa: "lb9f619",
+		$$css: true
+	},
+	itemVariant: {
+		k8WAf4: "lb12ulsxz",
+		kwRFfy: "lbv54qhq",
+		kZCmMZ: "lb135b78x",
+		$$css: true
+	}
+};
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/SortableList/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/SortableList/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    container: css`\n      padding: 0;\n      list-style: none;\n    `,\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    item: css`\n      overflow: hidden;\n      box-sizing: border-box;\n      border-radius: ${cssVar.borderRadius};\n      list-style: none;\n    `,\n    itemVariant: css`\n      padding-block: 4px;\n      padding-inline: 4px 16px;\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  };\n});\n\nexport const variants = cva(styles.item, {\n  compoundVariants: [\n    {\n      className: styles.itemVariant,\n      variant: 'outlined',\n    },\n    {\n      className: styles.itemVariant,\n      variant: 'filled',\n    },\n  ],\n  defaultVariants: {\n    variant: 'borderless',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,YAAYA,cAAkB;EAC9B,WAAW,GAAG;;;;EAId,QAAQA,cAAkB;EAC1B,MAAM,GAAG;;;uBAGU,OAAO,aAAa;;;EAGvC,aAAa,GAAG;;;;EAIhB,UAAUA,cAAkB;CAC9B;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB,CAChB;EACE,WAAW,OAAO;EAClB,SAAS;CACX,GACA;EACE,WAAW,OAAO;EAClB,SAAS;CACX,CACF;CACA,iBAAiB,EACf,SAAS,aACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/SortableList/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  container: {\n    padding: 0,\n    listStyle: 'none',\n  },\n  item: {\n    borderRadius: cssVar.borderRadius,\n    listStyle: 'none',\n    overflow: 'hidden',\n    boxSizing: 'border-box',\n  },\n  itemVariant: {\n    paddingBlock: 4,\n    paddingInlineEnd: 16,\n    paddingInlineStart: 4,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/SortableList/type.d.mts

@@ -2,11 +2,11 @@ import { FlexboxProps } from "../Flex/type.mjs";
 import "../Flex/index.mjs";
 import { ReactNode, Ref } from "react";
 //#region src/SortableList/type.d.ts
-interface SortableListItem {
+export interface SortableListItem {
   [key: string]: any;
   id: string | number;
 }
-interface SortableListProps<T extends SortableListItem = SortableListItem> extends Omit<FlexboxProps, 'onChange'> {
+export interface SortableListProps<T extends SortableListItem = SortableListItem> extends Omit<FlexboxProps, 'onChange'> {
   /**
    * @default 8
    */
@@ -22,5 +22,4 @@ interface SortableListProps<T extends SortableListItem = SortableListItem> exten
   renderOverlay?: (item: T) => ReactNode;
 }
 //#endregion
-export { SortableListItem, SortableListProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Spin/NetworkGlyph.mjs

@@ -0,0 +1,76 @@
+import { styles } from "./style.mjs";
+import { createElement, memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/Spin/NetworkGlyph.tsx
+const layers = [
+	0,
+	1,
+	2
+];
+const unit = 25;
+const nodes = layers.flatMap((layer) => layers.map((row) => ({
+	x: unit + layer * unit,
+	y: unit + row * unit
+})));
+const lines = layers.slice(0, -1).flatMap((layer) => layers.flatMap((from) => layers.map((to) => ({
+	x1: unit + layer * unit,
+	x2: unit + (layer + 1) * unit,
+	y1: unit + from * unit,
+	y2: unit + to * unit
+}))));
+const particles = [
+	0,
+	1,
+	2
+];
+const minRenderedPx = (units, px, floorPx) => Math.max(units, floorPx * 100 / px);
+const NetworkGlyph = memo(({ px }) => {
+	const boxStyle = {
+		"--spin-node-size": `${minRenderedPx(6, px, 2)}px`,
+		"--spin-particle-size": `${minRenderedPx(3, px, 1.5)}px`,
+		"transform": `scale(${px / 100})`
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...stylex.props(styles.network),
+		style: {
+			height: px,
+			width: px
+		},
+		children: /* @__PURE__ */ jsxs("span", {
+			...stylex.props(styles.networkBox),
+			style: boxStyle,
+			children: [
+				/* @__PURE__ */ jsx("svg", {
+					...stylex.props(styles.networkLines),
+					viewBox: "0 0 100 100",
+					children: lines.map((line) => /* @__PURE__ */ jsx("line", {
+						...line,
+						...stylex.props(styles.networkLine)
+					}, `${line.x1}-${line.y1}-${line.y2}`))
+				}),
+				nodes.map(({ x, y }, index) => /* @__PURE__ */ createElement("i", {
+					...stylex.props(styles.networkNode),
+					key: `${x}-${y}`,
+					style: {
+						animationDelay: `${index * .2}s`,
+						left: x,
+						top: y
+					}
+				})),
+				particles.map((index) => /* @__PURE__ */ createElement("i", {
+					...stylex.props(styles.networkParticle),
+					key: index,
+					style: { animationDelay: `${index * .6}s` }
+				})),
+				/* @__PURE__ */ jsx("b", { ...stylex.props(styles.networkCore) }),
+				/* @__PURE__ */ jsx("u", { ...stylex.props(styles.networkRing) })
+			]
+		})
+	});
+});
+NetworkGlyph.displayName = "NetworkGlyph";
+//#endregion
+export { NetworkGlyph as default };
+
+//# sourceMappingURL=NetworkGlyph.mjs.map

package/es/Spin/NetworkGlyph.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkGlyph.mjs","names":[],"sources":["../../src/Spin/NetworkGlyph.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { CSSProperties } from 'react';\nimport { memo } from 'react';\n\nimport { styles } from './style';\n\nconst layers = [0, 1, 2] as const;\nconst unit = 25;\n\nconst nodes = layers.flatMap((layer) =>\n  layers.map((row) => ({ x: unit + layer * unit, y: unit + row * unit })),\n);\n\nconst lines = layers.slice(0, -1).flatMap((layer) =>\n  layers.flatMap((from) =>\n    layers.map((to) => ({\n      x1: unit + layer * unit,\n      x2: unit + (layer + 1) * unit,\n      y1: unit + from * unit,\n      y2: unit + to * unit,\n    })),\n  ),\n);\n\nconst particles = [0, 1, 2] as const;\n\nconst minRenderedPx = (units: number, px: number, floorPx: number) =>\n  Math.max(units, (floorPx * 100) / px);\n\nconst NetworkGlyph = memo<{ px: number }>(({ px }) => {\n  const boxStyle = {\n    '--spin-node-size': `${minRenderedPx(6, px, 2)}px`,\n    '--spin-particle-size': `${minRenderedPx(3, px, 1.5)}px`,\n    'transform': `scale(${px / 100})`,\n  } as CSSProperties;\n\n  return (\n    <span {...stylex.props(styles.network)} style={{ height: px, width: px }}>\n      <span {...stylex.props(styles.networkBox)} style={boxStyle}>\n        <svg {...stylex.props(styles.networkLines)} viewBox=\"0 0 100 100\">\n          {lines.map((line) => (\n            <line\n              key={`${line.x1}-${line.y1}-${line.y2}`}\n              {...line}\n              {...stylex.props(styles.networkLine)}\n            />\n          ))}\n        </svg>\n        {nodes.map(({ x, y }, index) => (\n          <i\n            {...stylex.props(styles.networkNode)}\n            key={`${x}-${y}`}\n            style={{ animationDelay: `${index * 0.2}s`, left: x, top: y }}\n          />\n        ))}\n        {particles.map((index) => (\n          <i\n            {...stylex.props(styles.networkParticle)}\n            key={index}\n            style={{ animationDelay: `${index * 0.6}s` }}\n          />\n        ))}\n        <b {...stylex.props(styles.networkCore)} />\n        <u {...stylex.props(styles.networkRing)} />\n      </span>\n    </span>\n  );\n});\n\nNetworkGlyph.displayName = 'NetworkGlyph';\n\nexport default NetworkGlyph;\n"],"mappings":";;;;;AAIA,MAAM,SAAS;CAAC;CAAG;CAAG;AAAC;AACvB,MAAM,OAAO;AACb,MAAM,QAAQ,OAAO,SAAQ,UAAS,OAAO,KAAI,SAAQ;CACvD,GAAG,OAAO,QAAQ;CAClB,GAAG,OAAO,MAAM;AAClB,EAAE,CAAC;AACH,MAAM,QAAQ,OAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAQ,UAAS,OAAO,SAAQ,SAAQ,OAAO,KAAI,QAAO;CAC1F,IAAI,OAAO,QAAQ;CACnB,IAAI,QAAQ,QAAQ,KAAK;CACzB,IAAI,OAAO,OAAO;CAClB,IAAI,OAAO,KAAK;AAClB,EAAE,CAAC,CAAC;AACJ,MAAM,YAAY;CAAC;CAAG;CAAG;AAAC;AAC1B,MAAM,iBAAiB,OAAe,IAAY,YAAoB,KAAK,IAAI,OAAO,UAAU,MAAM,EAAE;AACxG,MAAM,eAAe,MAEjB,EACF,SACI;CACJ,MAAM,WAAW;EACf,oBAAoB,GAAG,cAAc,GAAG,IAAI,CAAC,EAAE;EAC/C,wBAAwB,GAAG,cAAc,GAAG,IAAI,GAAG,EAAE;EACrD,aAAa,SAAS,KAAK,IAAI;CACjC;CACA,OAAO,oBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,OAAO,OAAO;EAAG,OAAO;GACpD,QAAQ;GACR,OAAO;EACT;EACI,UAAA,qBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,UAAU;GAAG,OAAO;GAAlD,UAAA;IACE,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,YAAY;KAAG,SAAQ;KACjD,UAAA,MAAM,KAAI,SAAQ,oBAAC,QAAD;MAA+C,GAAI;MAAM,GAAI,OAAO,MAAM,OAAO,WAAW;KAAI,GAArF,GAAG,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,KAAK,IAAuD,CAAC;IACjH,CAAA;IACJ,MAAM,KAAK,EACZ,GACA,KACC,UAAU,8BAAC,KAAD;KAAG,GAAI,OAAO,MAAM,OAAO,WAAW;KAAG,KAAK,GAAG,EAAE,GAAG;KAAK,OAAO;MAC7E,gBAAgB,GAAG,QAAQ,GAAI;MAC/B,MAAM;MACN,KAAK;KACP;IAAI,CAAA,CAAC;IACF,UAAU,KAAI,UAAS,8BAAC,KAAD;KAAG,GAAI,OAAO,MAAM,OAAO,eAAe;KAAG,KAAK;KAAO,OAAO,EACxF,gBAAgB,GAAG,QAAQ,GAAI,GACjC;IAAI,CAAA,CAAC;IACH,oBAAC,KAAD,EAAG,GAAI,OAAO,MAAM,OAAO,WAAW,EAAI,CAAA;IAC1C,oBAAC,KAAD,EAAG,GAAI,OAAO,MAAM,OAAO,WAAW,EAAI,CAAA;GACtC;;CACF,CAAA;AACV,CAAC;AACD,aAAa,cAAc"}

package/es/Spin/Spin.d.mts

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

package/es/Spin/Spin.mjs

@@ -0,0 +1,101 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import NetworkGlyph from "./NetworkGlyph.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { LoaderCircle } from "lucide-react";
+//#region src/Spin/Spin.tsx
+const sizeMap = {
+	large: 32,
+	middle: 20,
+	small: 14
+};
+const resolveSize = (size) => typeof size === "number" ? size : sizeMap[size];
+const Spin = memo(({ children, className, indicator, percent, ref, size = "middle", spinning = true, style, tip, variant = "default", ...rest }) => {
+	const px = useMemo(() => resolveSize(size), [size]);
+	const glyph = useMemo(() => {
+		if (indicator) return indicator;
+		if (variant === "network") return /* @__PURE__ */ jsx(NetworkGlyph, { px });
+		if (typeof percent === "number") {
+			const clamped = Math.min(100, Math.max(0, percent));
+			const circumference = 2 * Math.PI * 9;
+			const offset = circumference * (1 - clamped / 100);
+			return /* @__PURE__ */ jsxs("svg", {
+				...stylex.props(styles.glyph, styles.ring),
+				height: px,
+				viewBox: "0 0 24 24",
+				width: px,
+				children: [/* @__PURE__ */ jsx("circle", {
+					...stylex.props(styles.ringTrack),
+					cx: 12,
+					cy: 12,
+					fill: "none",
+					r: 9,
+					strokeWidth: 2.5
+				}), /* @__PURE__ */ jsx("circle", {
+					...stylex.props(styles.ringProgress),
+					cx: 12,
+					cy: 12,
+					fill: "none",
+					r: 9,
+					strokeDasharray: circumference,
+					strokeDashoffset: offset,
+					strokeLinecap: "round",
+					strokeWidth: 2.5
+				})]
+			});
+		}
+		return /* @__PURE__ */ jsx(Icon, {
+			spin: true,
+			...stylex.props(styles.glyph),
+			icon: LoaderCircle,
+			size: px
+		});
+	}, [
+		indicator,
+		variant,
+		percent,
+		px
+	]);
+	if (!spinning) return children ?? null;
+	if (!children) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": true,
+		"aria-live": "polite",
+		ref,
+		role: "status",
+		...styleProps(styles.root, className, style),
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			...stylex.props(styles.glyphBox),
+			children: glyph
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...styleProps(styles.wrapper, className, style),
+		...rest,
+		children: [children, /* @__PURE__ */ jsxs("div", {
+			"aria-busy": true,
+			"aria-live": "polite",
+			...stylex.props(styles.overlay),
+			role: "status",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				...stylex.props(styles.glyphBox),
+				children: glyph
+			}), tip && /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.tip),
+				children: tip
+			})]
+		})]
+	});
+});
+Spin.displayName = "Spin";
+//#endregion
+export { Spin as default };
+
+//# sourceMappingURL=Spin.mjs.map

package/es/Spin/Spin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spin.mjs","names":[],"sources":["../../src/Spin/Spin.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { LoaderCircle } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport NetworkGlyph from './NetworkGlyph';\nimport { styles } from './style';\nimport type { SpinProps, SpinSize } from './type';\n\nconst sizeMap: Record<'small' | 'middle' | 'large', number> = {\n  large: 32,\n  middle: 20,\n  small: 14,\n};\n\nconst resolveSize = (size: SpinSize) => (typeof size === 'number' ? size : sizeMap[size]);\n\nconst Spin = memo<SpinProps>(\n  ({\n    children,\n    className,\n    indicator,\n    percent,\n    ref,\n    size = 'middle',\n    spinning = true,\n    style,\n    tip,\n    variant = 'default',\n    ...rest\n  }) => {\n    const px = useMemo(() => resolveSize(size), [size]);\n\n    const glyph = useMemo(() => {\n      if (indicator) return indicator;\n\n      if (variant === 'network') return <NetworkGlyph px={px} />;\n\n      if (typeof percent === 'number') {\n        const clamped = Math.min(100, Math.max(0, percent));\n        const circumference = 2 * Math.PI * 9;\n        const offset = circumference * (1 - clamped / 100);\n\n        return (\n          <svg\n            {...stylex.props(styles.glyph, styles.ring)}\n            height={px}\n            viewBox=\"0 0 24 24\"\n            width={px}\n          >\n            <circle\n              {...stylex.props(styles.ringTrack)}\n              cx={12}\n              cy={12}\n              fill=\"none\"\n              r={9}\n              strokeWidth={2.5}\n            />\n            <circle\n              {...stylex.props(styles.ringProgress)}\n              cx={12}\n              cy={12}\n              fill=\"none\"\n              r={9}\n              strokeDasharray={circumference}\n              strokeDashoffset={offset}\n              strokeLinecap=\"round\"\n              strokeWidth={2.5}\n            />\n          </svg>\n        );\n      }\n\n      return <Icon spin {...stylex.props(styles.glyph)} icon={LoaderCircle} size={px} />;\n    }, [indicator, variant, percent, px]);\n\n    if (!spinning) return children ?? null;\n\n    if (!children) {\n      return (\n        <div\n          aria-busy\n          aria-live=\"polite\"\n          ref={ref}\n          role=\"status\"\n          {...styleProps(styles.root, className, style)}\n          {...rest}\n        >\n          <span aria-hidden {...stylex.props(styles.glyphBox)}>\n            {glyph}\n          </span>\n        </div>\n      );\n    }\n\n    return (\n      <div ref={ref} {...styleProps(styles.wrapper, className, style)} {...rest}>\n        {children}\n        <div aria-busy aria-live=\"polite\" {...stylex.props(styles.overlay)} role=\"status\">\n          <span aria-hidden {...stylex.props(styles.glyphBox)}>\n            {glyph}\n          </span>\n          {tip && <span {...stylex.props(styles.tip)}>{tip}</span>}\n        </div>\n      </div>\n    );\n  },\n);\n\nSpin.displayName = 'Spin';\n\nexport default Spin;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,UAAwD;CAC5D,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,eAAe,SAAmB,OAAO,SAAS,WAAW,OAAO,QAAQ;AAClF,MAAM,OAAO,MAAiB,EAC5B,UACA,WACA,WACA,SACA,KACA,OAAO,UACP,WAAW,MACX,OACA,KACA,UAAU,WACV,GAAG,WACC;CACJ,MAAM,KAAK,cAAc,YAAY,IAAI,GAAG,CAAC,IAAI,CAAC;CAClD,MAAM,QAAQ,cAAc;EAC1B,IAAI,WAAW,OAAO;EACtB,IAAI,YAAY,WAAW,OAAO,oBAAC,cAAD,EAAkB,GAAK,CAAA;EACzD,IAAI,OAAO,YAAY,UAAU;GAC/B,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC;GAClD,MAAM,gBAAgB,IAAI,KAAK,KAAK;GACpC,MAAM,SAAS,iBAAiB,IAAI,UAAU;GAC9C,OAAO,qBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,OAAO,OAAO,IAAI;IAAG,QAAQ;IAAI,SAAQ;IAAY,OAAO;IAAzF,UAAA,CACD,oBAAC,UAAD;KAAQ,GAAI,OAAO,MAAM,OAAO,SAAS;KAAG,IAAI;KAAI,IAAI;KAAI,MAAK;KAAO,GAAG;KAAG,aAAa;IAAM,CAAA,GACjG,oBAAC,UAAD;KAAQ,GAAI,OAAO,MAAM,OAAO,YAAY;KAAG,IAAI;KAAI,IAAI;KAAI,MAAK;KAAO,GAAG;KAAG,iBAAiB;KAAe,kBAAkB;KAAQ,eAAc;KAAQ,aAAa;IAAM,CAAA,CACjL;;EACX;EACA,OAAO,oBAAC,MAAD;GAAM,MAAA;GAAK,GAAI,OAAO,MAAM,OAAO,KAAK;GAAG,MAAM;GAAc,MAAM;EAAK,CAAA;CACnF,GAAG;EAAC;EAAW;EAAS;EAAS;CAAE,CAAC;CACpC,IAAI,CAAC,UAAU,OAAO,YAAY;CAClC,IAAI,CAAC,UACH,OAAO,oBAAC,OAAD;EAAK,aAAA;EAAU,aAAU;EAAc;EAAK,MAAK;EAAS,GAAI,WAAW,OAAO,MAAM,WAAW,KAAK;EAAG,GAAI;EAC9G,UAAA,oBAAC,QAAD;GAAM,eAAA;GAAY,GAAI,OAAO,MAAM,OAAO,QAAQ;GAC/C,UAAA;EACG,CAAA;CACH,CAAA;CAEX,OAAO,qBAAC,OAAD;EAAU;EAAK,GAAI,WAAW,OAAO,SAAS,WAAW,KAAK;EAAG,GAAI;EAArE,UAAA,CACA,UACD,qBAAC,OAAD;GAAK,aAAA;GAAU,aAAU;GAAS,GAAI,OAAO,MAAM,OAAO,OAAO;GAAG,MAAK;GAAzE,UAAA,CACE,oBAAC,QAAD;IAAM,eAAA;IAAY,GAAI,OAAO,MAAM,OAAO,QAAQ;IAC/C,UAAA;GACG,CAAA,GACL,OAAO,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,GAAG;IAAI,UAAA;GAAU,CAAA,CACpD;EACF,CAAA,CAAA;;AACX,CAAC;AACD,KAAK,cAAc"}

package/es/Spin/index.d.ts

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

package/es/Spin/index.js

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

package/es/Spin/index.mjs

@@ -0,0 +1 @@
+export { default } from "./Spin.mjs";

package/es/Spin/style.mjs

@@ -0,0 +1,136 @@
+//#region src/Spin/style.ts
+const styles = {
+	glyph: {
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	glyphBox: {
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	network: {
+		k1xSpc: "lb1rg5ohu",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	networkBox: {
+		k87sOh: "lb13vifvy",
+		kLqNvP: "lb1o0tod",
+		kVAEAm: "lb10l6tqk",
+		k3nNDw: "lb1hj3fc7",
+		kZKoxP: "lbpyat2d",
+		kzqmXN: "lb1exxlbk",
+		$$css: true
+	},
+	networkCore: {
+		k44tkh: "lb1c74tu6 lb1u6grsq",
+		ko0y90: "lba4qsjk lbg0664w",
+		kKVMdj: "lb1ygz6qe lb1aquc0h",
+		kyAemX: "lb1debuo4 lb1uea3p4",
+		kWkggS: "lb1h45990",
+		k87sOh: "lbyszfof",
+		kLqNvP: "lb4500kp",
+		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lbols6we",
+		kzqmXN: "lb1v4s8kt",
+		$$css: true
+	},
+	networkLine: {
+		kjVXCG: "lb68wf4t",
+		kfJifR: "lbpmuf5a",
+		kSiTet: "lbuzhngd",
+		$$css: true
+	},
+	networkLines: {
+		kpwlN0: "lb10a8y8t",
+		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lbpyat2d",
+		kzqmXN: "lb1exxlbk",
+		$$css: true
+	},
+	networkNode: {
+		k44tkh: "lb1c74tu6 lb1u6grsq",
+		ko0y90: "lba4qsjk lbg0664w",
+		kKVMdj: "lb1mw1q8i lb1aquc0h",
+		kyAemX: "lb1debuo4 lb1uea3p4",
+		kogj98: "lbzvvh78",
+		kaIpWk: "lb16rqkct",
+		kWkggS: "lb1h45990",
+		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lbxdy7cf",
+		kzqmXN: "lb165gwbr",
+		$$css: true
+	},
+	networkParticle: {
+		k44tkh: "lb1c74tu6 lb1u6grsq",
+		ko0y90: "lba4qsjk lbg0664w",
+		kKVMdj: "lb15d5rfv lb1aquc0h",
+		kyAemX: "lb1debuo4 lb1uea3p4",
+		kogj98: "lb1rmkima",
+		kaIpWk: "lb16rqkct",
+		kWkggS: "lb1h45990",
+		k87sOh: "lbbssg55",
+		kLqNvP: "lbemjqv4",
+		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lb11vverv",
+		kzqmXN: "lbsblaa2",
+		$$css: true
+	},
+	networkRing: {
+		k44tkh: "lb6q96wx lb1u6grsq",
+		ko0y90: "lba4qsjk lbg0664w",
+		kKVMdj: "lb1v0ides lb1aquc0h",
+		kyAemX: "lb1esw782 lb1uea3p4",
+		kpwlN0: "lb1vdmwfg",
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb16rqkct",
+		ksu8eU: "lbbsl7fq",
+		kMzoRj: "lbmkeg23",
+		kSiTet: "lbti2d7y",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	overlay: {
+		kpwlN0: "lb10a8y8t",
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lb1c0b5dz",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kjj79g: "lbl56j7k",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	ring: {
+		k4XH5M: "lbwsa1kb",
+		$$css: true
+	},
+	ringProgress: {
+		kjVXCG: "lb1q6ff6i",
+		$$css: true
+	},
+	ringTrack: {
+		kjVXCG: "lb12pnydc",
+		$$css: true
+	},
+	root: {
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	tip: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lbxobqjj",
+		$$css: true
+	},
+	wrapper: {
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Spin/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Spin/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst nodePulse = stylex.keyframes({\n  '0%, 100%': { opacity: 0.3 },\n  '50%': { opacity: 1 },\n});\n\nconst particleFlow = stylex.keyframes({\n  '0%': { opacity: 0.5, transform: 'translateX(0)' },\n  '50%': { opacity: 1 },\n  '100%': { opacity: 0.5, transform: 'translateX(50px)' },\n});\n\nconst coreBreath = stylex.keyframes({\n  '0%, 100%': { opacity: 0.5, transform: 'scale(0.8)' },\n  '50%': { opacity: 1, transform: 'scale(1)' },\n});\n\nconst ringSpin = stylex.keyframes({\n  to: { transform: 'rotate(360deg)' },\n});\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nconst loop = (name: string, duration: string, timing: string) => ({\n  animationDuration: { default: duration, [reducedMotion]: '0s' },\n  animationIterationCount: { default: 'infinite', [reducedMotion]: 1 },\n  animationName: { default: name, [reducedMotion]: 'none' },\n  animationTimingFunction: { default: timing, [reducedMotion]: 'ease' },\n});\n\nexport const styles = stylex.create({\n  glyph: {\n    display: 'inline-flex',\n  },\n  glyphBox: {\n    display: 'inline-flex',\n  },\n  network: {\n    display: 'inline-block',\n    position: 'relative',\n  },\n  networkBox: {\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    position: 'absolute',\n    transformOrigin: '0 0',\n    height: 100,\n    width: 100,\n  },\n  networkCore: {\n    ...loop(coreBreath, '2s', 'ease'),\n    backgroundColor: 'currentcolor',\n    insetBlockStart: 47,\n    insetInlineStart: 47,\n    position: 'absolute',\n    height: 6,\n    width: 6,\n  },\n  networkLine: {\n    stroke: 'currentcolor',\n    strokeWidth: 0.5,\n    opacity: 0.3,\n  },\n  networkLines: {\n    inset: 0,\n    position: 'absolute',\n    height: 100,\n    width: 100,\n  },\n  networkNode: {\n    ...loop(nodePulse, '2s', 'ease'),\n    margin: 'calc(var(--spin-node-size) / -2)',\n    borderRadius: '50%',\n    backgroundColor: 'currentcolor',\n    position: 'absolute',\n    height: 'var(--spin-node-size)',\n    width: 'var(--spin-node-size)',\n  },\n  networkParticle: {\n    ...loop(particleFlow, '2s', 'ease'),\n    margin: 'calc(var(--spin-particle-size) / -2)',\n    borderRadius: '50%',\n    backgroundColor: 'currentcolor',\n    insetBlockStart: 50,\n    insetInlineStart: 25,\n    position: 'absolute',\n    height: 'var(--spin-particle-size)',\n    width: 'var(--spin-particle-size)',\n  },\n  networkRing: {\n    ...loop(ringSpin, '20s', 'linear'),\n    inset: 10,\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'dashed',\n    borderWidth: 1,\n    opacity: 0.4,\n    position: 'absolute',\n  },\n  overlay: {\n    inset: 0,\n    gap: 8,\n    alignItems: 'center',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgContainer} 70%, transparent)`,\n    color: cssVar.colorTextSecondary,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    position: 'absolute',\n  },\n  ring: {\n    rotate: '-90deg',\n  },\n  ringProgress: {\n    stroke: cssVar.colorPrimary,\n  },\n  ringTrack: {\n    stroke: cssVar.colorFillTertiary,\n  },\n  root: {\n    alignItems: 'center',\n    color: cssVar.colorTextSecondary,\n    display: 'inline-flex',\n  },\n  tip: {\n    color: cssVar.colorTextSecondary,\n    fontSize: cssVar.fontSizeSM,\n  },\n  wrapper: {\n    position: 'relative',\n  },\n});\n"],"mappings":";AA0BA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Spin/type.d.mts

@@ -0,0 +1,17 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+//#region src/Spin/type.d.ts
+export type SpinSize = 'small' | 'middle' | 'large' | number;
+export type SpinVariant = 'default' | 'network';
+export interface SpinProps extends Omit<ComponentProps<'div'>, 'children'> {
+  children?: ReactNode;
+  indicator?: ReactNode;
+  percent?: number;
+  ref?: Ref<HTMLDivElement>;
+  size?: SpinSize;
+  spinning?: boolean;
+  style?: CSSProperties;
+  tip?: ReactNode;
+  variant?: SpinVariant;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Statistic/Statistic.d.mts

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

package/es/Statistic/Statistic.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import Skeleton from "../Skeleton/index.mjs";
+import { formatStatisticValue } from "./formatValue.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/Statistic/Statistic.tsx
+const Statistic = memo(({ className, classNames, formatter, loading = false, precision, prefix, ref, styles: customStyles, style, suffix, title, value, ...rest }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...rest,
+		...styleProps(styles.root, className, style),
+		children: [title != null && /* @__PURE__ */ jsx("div", {
+			...styleProps(styles.title, classNames?.title, customStyles?.title),
+			children: title
+		}), loading ? /* @__PURE__ */ jsx(Skeleton, {
+			height: 30,
+			width: 96
+		}) : /* @__PURE__ */ jsxs("div", {
+			...styleProps(styles.value, classNames?.value, customStyles?.value),
+			children: [
+				prefix != null && /* @__PURE__ */ jsx("span", {
+					...stylex.props(styles.affix),
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx("span", { children: formatter ? formatter(value) : formatStatisticValue(value, precision) }),
+				suffix != null && /* @__PURE__ */ jsx("span", {
+					...stylex.props(styles.affix),
+					children: suffix
+				})
+			]
+		})]
+	});
+});
+Statistic.displayName = "Statistic";
+//#endregion
+export { Statistic as default };
+
+//# sourceMappingURL=Statistic.mjs.map

package/es/Statistic/Statistic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic.mjs","names":[],"sources":["../../src/Statistic/Statistic.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo } from 'react';\n\nimport Skeleton from '@/Skeleton';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { formatStatisticValue } from './formatValue';\nimport { styles } from './style';\nimport type { StatisticProps } from './type';\n\nconst Statistic = memo<StatisticProps>(\n  ({\n    className,\n    classNames,\n    formatter,\n    loading = false,\n    precision,\n    prefix,\n    ref,\n    styles: customStyles,\n    style,\n    suffix,\n    title,\n    value,\n    ...rest\n  }) => {\n    return (\n      <div ref={ref} {...rest} {...styleProps(styles.root, className, style)}>\n        {title != null && (\n          <div {...styleProps(styles.title, classNames?.title, customStyles?.title)}>{title}</div>\n        )}\n        {loading ? (\n          <Skeleton height={30} width={96} />\n        ) : (\n          <div {...styleProps(styles.value, classNames?.value, customStyles?.value)}>\n            {prefix != null && <span {...stylex.props(styles.affix)}>{prefix}</span>}\n            <span>{formatter ? formatter(value) : formatStatisticValue(value, precision)}</span>\n            {suffix != null && <span {...stylex.props(styles.affix)}>{suffix}</span>}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nStatistic.displayName = 'Statistic';\n\nexport default Statistic;\n"],"mappings":";;;;;;;;;AASA,MAAM,YAAY,MAAsB,EACtC,WACA,YACA,WACA,UAAU,OACV,WACA,QACA,KACA,QAAQ,cACR,OACA,QACA,OACA,OACA,GAAG,WACC;CACJ,OAAO,qBAAC,OAAD;EAAU;EAAK,GAAI;EAAM,GAAI,WAAW,OAAO,MAAM,WAAW,KAAK;EAArE,UAAA,CACA,SAAS,QAAQ,oBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;GAAI,UAAA;EAAW,CAAA,GACxG,UAAU,oBAAC,UAAD;GAAU,QAAQ;GAAI,OAAO;EAAK,CAAA,IAAI,qBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;GAAxE,UAAA;IAC5C,UAAU,QAAQ,oBAAC,QAAD;KAAM,GAAI,OAAO,MAAM,OAAO,KAAK;KAAI,UAAA;IAAa,CAAA;IACvE,oBAAC,QAAD,EAAA,UAAO,YAAY,UAAU,KAAK,IAAI,qBAAqB,OAAO,SAAS,EAAQ,CAAA;IAClF,UAAU,QAAQ,oBAAC,QAAD;KAAM,GAAI,OAAO,MAAM,OAAO,KAAK;KAAI,UAAA;IAAa,CAAA;GACpE;EACJ,CAAA,CAAA;;AACX,CAAC;AACD,UAAU,cAAc"}

package/es/Statistic/formatValue.d.mts

@@ -0,0 +1,4 @@
+//#region src/Statistic/formatValue.d.ts
+export declare const formatStatisticValue: (value: number | string | undefined, precision?: number) => string;
+//#endregion
+//# sourceMappingURL=formatValue.d.mts.map

package/es/Statistic/formatValue.mjs

@@ -0,0 +1,23 @@
+//#region src/Statistic/formatValue.ts
+const grouping = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+const formatStatisticValue = (value, precision) => {
+	if (value === void 0 || value === null) return "";
+	if (typeof value === "string") {
+		if (!/^-?\d+(\.\d+)?$/.test(value)) return value;
+		return formatStatisticValue(Number(value), precision);
+	}
+	if (!Number.isFinite(value)) return String(value);
+	if (precision !== void 0) return new Intl.NumberFormat("en-US", {
+		maximumFractionDigits: precision,
+		minimumFractionDigits: precision
+	}).format(value);
+	const raw = String(value);
+	if (raw.includes("e")) return raw;
+	const [integer, decimal] = raw.split(".");
+	const grouped = grouping.format(Number(integer));
+	return decimal ? `${grouped}.${decimal}` : grouped;
+};
+//#endregion
+export { formatStatisticValue };
+
+//# sourceMappingURL=formatValue.mjs.map