@fangxinyan/lumina 0.6.0 → 0.6.2

package/dist/Radio-GVFDPAZM.css

@@ -0,0 +1,97 @@
+/* ============ Radio ============ */
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  color: var(--fg);
+}
+.radio.disabled { opacity: 0.5; cursor: not-allowed; }
+
+.radio-dot {
+  width: 20px; height: 20px;
+  border: none;
+  padding: 0;
+  border-radius: 999px;
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  cursor: inherit;
+  position: relative;
+  flex-shrink: 0;
+  transition: all var(--dur) var(--ease);
+}
+.radio.checked .radio-dot {
+  background: var(--accent);
+  box-shadow: var(--neu-out-sm), 0 2px 8px var(--accent-glow);
+}
+.radio.checked .radio-dot::after {
+  content: "";
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px; height: 8px;
+  border-radius: 999px;
+  background: var(--bg);
+}
+
+.radio-group { display: flex; gap: 14px; }
+.radio-group.vertical { flex-direction: column; gap: 10px; }
+.radio-group.horizontal { flex-direction: row; flex-wrap: wrap; }
+
+.radio-group.segmented {
+  position: relative;
+  display: inline-flex;
+  padding: 4px;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  gap: 2px;
+  flex-wrap: nowrap;
+}
+
+.radio-group.segmented .radio {
+  position: relative;
+  z-index: 1;
+  height: 32px;
+  padding: 6px 14px;
+  border-radius: calc(var(--r-md) - 4px);
+  color: var(--fg-muted);
+  font-size: 12px;
+  gap: 6px;
+  transition: all var(--dur-fast) var(--ease);
+}
+
+.radio-group.segmented .radio:hover { color: var(--fg); }
+.radio-group.segmented .radio.checked {
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+.radio-group.segmented .radio-dot { display: none; }
+.radio-group.segmented .radio-label { line-height: 1; }
+.radio-group.segmented .radio.disabled { opacity: 0.4; }
+.radio-group.segmented.sm .radio { height: 26px; padding: 4px 10px; font-size: 11px; }
+.radio-group.segmented.lg .radio { height: 38px; padding: 8px 18px; font-size: 13px; }
+
+.radio-segment-thumb {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  border-radius: calc(var(--r-md) - 4px);
+  background: var(--bg);
+  box-shadow: var(--neu-out-sm);
+  pointer-events: none;
+  transition:
+    transform var(--dur-slow) var(--ease),
+    width var(--dur-slow) var(--ease),
+    opacity var(--dur-fast) var(--ease);
+  will-change: transform, width;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .radio-segment-thumb {
+    transition: none;
+  }
+}

package/dist/Radio.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var chunkKGSADAOD_cjs = require('./chunk-KGSADAOD.cjs');
+
+
+
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () { return chunkKGSADAOD_cjs.Radio; }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function () { return chunkKGSADAOD_cjs.RadioGroup; }
+});

package/dist/Radio.d.cts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+interface RadioProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange" | "children" | "id"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    className?: string;
+    id?: string;
+}
+declare const RadioRoot: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLLabelElement>>;
+interface RadioOption<T extends string | number = string> {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps<T extends string | number = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    options: RadioOption<T>[];
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    name?: string;
+    direction?: "vertical" | "horizontal";
+    variant?: "default" | "segmented";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+type RadioGroupComponent = <T extends string | number = string>(props: RadioGroupProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+/** `RadioGroup` — mutually exclusive options. */
+declare const RadioGroup: RadioGroupComponent;
+declare const Radio: typeof RadioRoot & {
+    Group: typeof RadioGroup;
+};
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioOption, type RadioProps };

package/dist/Radio.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+interface RadioProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange" | "children" | "id"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    className?: string;
+    id?: string;
+}
+declare const RadioRoot: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLLabelElement>>;
+interface RadioOption<T extends string | number = string> {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps<T extends string | number = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    options: RadioOption<T>[];
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    name?: string;
+    direction?: "vertical" | "horizontal";
+    variant?: "default" | "segmented";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+type RadioGroupComponent = <T extends string | number = string>(props: RadioGroupProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+/** `RadioGroup` — mutually exclusive options. */
+declare const RadioGroup: RadioGroupComponent;
+declare const Radio: typeof RadioRoot & {
+    Group: typeof RadioGroup;
+};
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioOption, type RadioProps };

package/dist/Radio.js

@@ -0,0 +1 @@
+export { Radio, RadioGroup } from './chunk-USQ43DJ5.js';

package/dist/{Select-J3CCVFJ7.css → Select-JVBQAZBG.css}

@@ -128,32 +128,12 @@
 
 /* Menu search — flush with menu, single subtle separator (no nested frame) */
 .menu-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 32px;
-  padding: 0 6px;
+  display: block;
+  padding: 4px 2px 8px;
   margin: -2px -2px 4px;
   border-bottom: 1px solid var(--divider);
-  color: var(--fg-subtle);
-  transition: color var(--dur) var(--ease);
 }
-.menu-search:focus-within { color: var(--accent); }
-.menu-search input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--fg);
-  font-size: 13px;
-  font-family: inherit;
-  height: 100%;
-  padding: 0;
-}
-.menu-search input::placeholder { color: var(--fg-subtle); }
-.menu-search input:focus,
-.menu-search input:focus-visible { box-shadow: none; }
+.menu-search .input-wrap { width: 100%; }
 
 /* Menu state (loading / empty) */
 .menu-state {
@@ -179,8 +159,12 @@
 .menu-state .menu-state-ico .spinner {
   width: 16px;
   height: 16px;
+  display: inline-block;
+  border-radius: 999px;
+  border: 2px solid var(--accent);
   border-color: var(--accent);
   border-right-color: transparent;
+  animation: spin 0.8s linear infinite;
 }
 
 /* Option body — supports description line under label */

package/dist/Select.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
-var chunkZM4P6ELG_cjs = require('./chunk-ZM4P6ELG.cjs');
-require('./chunk-QCNHDDSD.cjs');
-require('./chunk-3XIDJEYR.cjs');
-require('./chunk-DH4NYYJP.cjs');
+var chunkOYMJVU66_cjs = require('./chunk-OYMJVU66.cjs');
+require('./chunk-ZIP7F4UF.cjs');
+require('./chunk-YB3IWIOJ.cjs');
+require('./chunk-6LZ54NPO.cjs');
+require('./chunk-OQBDU5I2.cjs');
+require('./chunk-TJII7BQ2.cjs');
 
 
 
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkZM4P6ELG_cjs.Select; }
+  get: function () { return chunkOYMJVU66_cjs.Select; }
 });
-//# sourceMappingURL=Select.cjs.map
-//# sourceMappingURL=Select.cjs.map

package/dist/Select.d.cts

@@ -18,6 +18,13 @@ interface SelectOptionGroup<T extends string | number = string> {
     options: SelectOption<T>[];
 }
 type SelectItem<T extends string | number = string> = SelectOption<T> | SelectOptionGroup<T>;
+type SelectFilterOption<T extends string | number = string> = boolean | ((input: string, option: SelectOption<T>) => boolean);
+type SelectSingleChangeHandler<T extends string | number = string> = {
+    bivarianceHack(value: any): void;
+}["bivarianceHack"];
+type SelectMultiChangeHandler<T extends string | number = string> = {
+    bivarianceHack(value: T[]): void;
+}["bivarianceHack"];
 interface BaseSelectProps<T extends string | number = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     /** Flat or mixed (groups + options) item list. */
     options: SelectItem<T>[];
@@ -28,10 +35,18 @@ interface BaseSelectProps<T extends string | number = string> extends Omit<React
     invalid?: boolean;
     /** Show a small × to clear the selection (single mode) or all selections (multi). */
     clearable?: boolean;
+    /** Alias for `clearable`. */
+    allowClear?: boolean | {
+        clearIcon?: React.ReactNode;
+    };
     /** Add a search input at the top of the menu. */
     searchable?: boolean;
+    /** Alias for `searchable`. */
+    showSearch?: boolean;
     /** Custom filter — defaults to label/text/value substring match. */
-    filterOption?: (input: string, option: SelectOption<T>) => boolean;
+    filterOption?: SelectFilterOption<T>;
+    /** Field used by the default filter. */
+    optionFilterProp?: "label" | "value" | "text" | string;
     /** Show spinner instead of options. */
     loading?: boolean;
     /** Custom empty content when no options match. */
@@ -43,12 +58,16 @@ interface BaseSelectProps<T extends string | number = string> extends Omit<React
     className?: string;
     /** Class for the popped-out menu. */
     menuClassName?: string;
+    /** Alias for `menuClassName`. */
+    popupClassName?: string;
+    /** Additional alias for `menuClassName`. */
+    dropdownClassName?: string;
 }
 interface SingleSelectProps<T extends string | number = string> extends BaseSelectProps<T> {
     multiple?: false;
     value?: T;
     defaultValue?: T;
-    onChange?: (value: T) => void;
+    onChange?: SelectSingleChangeHandler<T>;
     /** Fired when user clears the selection via the × button. */
     onClear?: () => void;
 }
@@ -56,7 +75,9 @@ interface MultiSelectProps<T extends string | number = string> extends BaseSelec
     multiple: true;
     value?: T[];
     defaultValue?: T[];
-    onChange?: (value: T[]) => void;
+    onChange?: SelectMultiChangeHandler<T>;
+    /** Fired when user clears all selections via the × button. */
+    onClear?: () => void;
     /** Max selected items shown as tags before collapsing to "+N". */
     maxTagCount?: number;
 }
@@ -68,4 +89,4 @@ type SelectComponent = {
 /** `Select` — neumorphic dropdown. Set `multiple` for tag-style multi-select. */
 declare const Select: SelectComponent;
 
-export { type MultiSelectProps, Select, type SelectItem, type SelectOption, type SelectOptionGroup, type SelectProps, type SingleSelectProps };
+export { type MultiSelectProps, Select, type SelectFilterOption, type SelectItem, type SelectMultiChangeHandler, type SelectOption, type SelectOptionGroup, type SelectProps, type SelectSingleChangeHandler, type SingleSelectProps };

package/dist/Select.d.ts

@@ -18,6 +18,13 @@ interface SelectOptionGroup<T extends string | number = string> {
     options: SelectOption<T>[];
 }
 type SelectItem<T extends string | number = string> = SelectOption<T> | SelectOptionGroup<T>;
+type SelectFilterOption<T extends string | number = string> = boolean | ((input: string, option: SelectOption<T>) => boolean);
+type SelectSingleChangeHandler<T extends string | number = string> = {
+    bivarianceHack(value: any): void;
+}["bivarianceHack"];
+type SelectMultiChangeHandler<T extends string | number = string> = {
+    bivarianceHack(value: T[]): void;
+}["bivarianceHack"];
 interface BaseSelectProps<T extends string | number = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     /** Flat or mixed (groups + options) item list. */
     options: SelectItem<T>[];
@@ -28,10 +35,18 @@ interface BaseSelectProps<T extends string | number = string> extends Omit<React
     invalid?: boolean;
     /** Show a small × to clear the selection (single mode) or all selections (multi). */
     clearable?: boolean;
+    /** Alias for `clearable`. */
+    allowClear?: boolean | {
+        clearIcon?: React.ReactNode;
+    };
     /** Add a search input at the top of the menu. */
     searchable?: boolean;
+    /** Alias for `searchable`. */
+    showSearch?: boolean;
     /** Custom filter — defaults to label/text/value substring match. */
-    filterOption?: (input: string, option: SelectOption<T>) => boolean;
+    filterOption?: SelectFilterOption<T>;
+    /** Field used by the default filter. */
+    optionFilterProp?: "label" | "value" | "text" | string;
     /** Show spinner instead of options. */
     loading?: boolean;
     /** Custom empty content when no options match. */
@@ -43,12 +58,16 @@ interface BaseSelectProps<T extends string | number = string> extends Omit<React
     className?: string;
     /** Class for the popped-out menu. */
     menuClassName?: string;
+    /** Alias for `menuClassName`. */
+    popupClassName?: string;
+    /** Additional alias for `menuClassName`. */
+    dropdownClassName?: string;
 }
 interface SingleSelectProps<T extends string | number = string> extends BaseSelectProps<T> {
     multiple?: false;
     value?: T;
     defaultValue?: T;
-    onChange?: (value: T) => void;
+    onChange?: SelectSingleChangeHandler<T>;
     /** Fired when user clears the selection via the × button. */
     onClear?: () => void;
 }
@@ -56,7 +75,9 @@ interface MultiSelectProps<T extends string | number = string> extends BaseSelec
     multiple: true;
     value?: T[];
     defaultValue?: T[];
-    onChange?: (value: T[]) => void;
+    onChange?: SelectMultiChangeHandler<T>;
+    /** Fired when user clears all selections via the × button. */
+    onClear?: () => void;
     /** Max selected items shown as tags before collapsing to "+N". */
     maxTagCount?: number;
 }
@@ -68,4 +89,4 @@ type SelectComponent = {
 /** `Select` — neumorphic dropdown. Set `multiple` for tag-style multi-select. */
 declare const Select: SelectComponent;
 
-export { type MultiSelectProps, Select, type SelectItem, type SelectOption, type SelectOptionGroup, type SelectProps, type SingleSelectProps };
+export { type MultiSelectProps, Select, type SelectFilterOption, type SelectItem, type SelectMultiChangeHandler, type SelectOption, type SelectOptionGroup, type SelectProps, type SelectSingleChangeHandler, type SingleSelectProps };

package/dist/Select.js

@@ -1,6 +1,6 @@
-export { Select } from './chunk-RHZOBQON.js';
-import './chunk-D242UJZO.js';
-import './chunk-ANAQER3T.js';
-import './chunk-BSHHQOFY.js';
-//# sourceMappingURL=Select.js.map
-//# sourceMappingURL=Select.js.map
+export { Select } from './chunk-WKKSAGYH.js';
+import './chunk-DQTSTJ6O.js';
+import './chunk-DUFRASGO.js';
+import './chunk-XTIN5545.js';
+import './chunk-WGZ2KJTZ.js';
+import './chunk-OF3SGLZY.js';

package/dist/Skeleton-CVWH2VWN.css

@@ -0,0 +1,40 @@
+/* ============ Skeleton ============ */
+.skeleton {
+  display: block;
+  background: color-mix(in oklch, var(--accent-soft) 55%, var(--bg-sunken));
+  border-radius: var(--r-sm);
+}
+.skeleton.wave {
+  background: linear-gradient(90deg,
+    color-mix(in oklch, var(--accent-soft) 35%, var(--bg-sunken)),
+    color-mix(in oklch, var(--accent-soft) 75%, var(--bg-sunken)),
+    color-mix(in oklch, var(--accent-soft) 35%, var(--bg-sunken)));
+  background-size: 200% 100%;
+  animation: skel-wave 1.4s ease-in-out infinite;
+}
+.skeleton.pulse { animation: skel-pulse 1.4s ease-in-out infinite; }
+.skeleton.none  { animation: none; }
+.skeleton.circle { border-radius: 999px; }
+@keyframes skel-wave  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+@keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+
+.skeleton-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+}
+.skeleton-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.skeleton-box .skeleton-title {
+  display: block;
+  margin-bottom: 4px;
+}
+.skeleton-box .skeleton-row {
+  display: block;
+}

package/dist/Skeleton.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var chunkHZSIUOCN_cjs = require('./chunk-HZSIUOCN.cjs');
+
+
+
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () { return chunkHZSIUOCN_cjs.Skeleton; }
+});

package/dist/Skeleton.d.cts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface SkeletonAvatarConfig {
+    shape?: "circle" | "square";
+    size?: "sm" | "md" | "lg";
+}
+interface SkeletonTitleConfig {
+    width?: number | string;
+}
+interface SkeletonParagraphConfig {
+    rows?: number;
+    width?: (number | string)[];
+}
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    width?: number | string;
+    height?: number | string;
+    circle?: boolean;
+    /** `wave` is a shimmer sweep; `pulse` fades opacity; `none` disables animation. */
+    animation?: "wave" | "pulse" | "none";
+    avatar?: boolean | SkeletonAvatarConfig;
+    title?: boolean | SkeletonTitleConfig;
+    paragraph?: boolean | SkeletonParagraphConfig;
+    className?: string;
+}
+/**
+ * `Skeleton` — content placeholder during loading.
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLElement>>;
+
+export { Skeleton, type SkeletonAvatarConfig, type SkeletonParagraphConfig, type SkeletonProps, type SkeletonTitleConfig };

package/dist/Skeleton.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface SkeletonAvatarConfig {
+    shape?: "circle" | "square";
+    size?: "sm" | "md" | "lg";
+}
+interface SkeletonTitleConfig {
+    width?: number | string;
+}
+interface SkeletonParagraphConfig {
+    rows?: number;
+    width?: (number | string)[];
+}
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    width?: number | string;
+    height?: number | string;
+    circle?: boolean;
+    /** `wave` is a shimmer sweep; `pulse` fades opacity; `none` disables animation. */
+    animation?: "wave" | "pulse" | "none";
+    avatar?: boolean | SkeletonAvatarConfig;
+    title?: boolean | SkeletonTitleConfig;
+    paragraph?: boolean | SkeletonParagraphConfig;
+    className?: string;
+}
+/**
+ * `Skeleton` — content placeholder during loading.
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLElement>>;
+
+export { Skeleton, type SkeletonAvatarConfig, type SkeletonParagraphConfig, type SkeletonProps, type SkeletonTitleConfig };

package/dist/Skeleton.js

@@ -0,0 +1 @@
+export { Skeleton } from './chunk-5TKC6IEN.js';

package/dist/Slider.cjs

@@ -1,12 +1,10 @@
 'use strict';
 
-var chunkN6ZLZUBF_cjs = require('./chunk-N6ZLZUBF.cjs');
+var chunkIZOHYJUQ_cjs = require('./chunk-IZOHYJUQ.cjs');
 
 
 
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
-  get: function () { return chunkN6ZLZUBF_cjs.Slider; }
+  get: function () { return chunkIZOHYJUQ_cjs.Slider; }
 });
-//# sourceMappingURL=Slider.cjs.map
-//# sourceMappingURL=Slider.cjs.map

package/dist/Slider.js

@@ -1,3 +1 @@
-export { Slider } from './chunk-2TZ2R7L2.js';
-//# sourceMappingURL=Slider.js.map
-//# sourceMappingURL=Slider.js.map
+export { Slider } from './chunk-7JN6FJ55.js';

package/dist/Spin-3GJNMSIH.css

@@ -0,0 +1,94 @@
+/* ============ Spin ============ */
+.spin {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  animation: spin 0.8s linear infinite;
+  display: inline-block;
+}
+
+.spin.accent  { color: var(--accent); }
+.spin.success { color: var(--success); }
+.spin.warning { color: var(--warning); }
+.spin.danger  { color: var(--danger); }
+
+.spin.ring {
+  position: relative;
+  display: inline-block;
+  border: none;
+  border-radius: 50%;
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  animation: none;
+}
+
+.spin.ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: conic-gradient(from 0deg,
+    transparent 0deg,
+    color-mix(in oklch, currentColor 30%, transparent) 40deg,
+    color-mix(in oklch, currentColor 70%, transparent) 100deg,
+    currentColor 220deg,
+    currentColor 340deg,
+    transparent 360deg);
+  -webkit-mask: radial-gradient(circle, transparent 60%, currentColor 61%);
+  mask: radial-gradient(circle, transparent 60%, currentColor 61%);
+  animation: spin 0.9s linear infinite;
+}
+
+.spin.ring.accent::before,
+.spin.ring.success::before,
+.spin.ring.warning::before,
+.spin.ring.danger::before {
+  filter: drop-shadow(0 0 4px color-mix(in oklch, currentColor 50%, transparent));
+}
+
+.spin.dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.34em;
+  border: none;
+  background: none;
+  box-shadow: none;
+  width: auto;
+  height: auto;
+  animation: none;
+  line-height: 1;
+}
+
+.spin.dots i {
+  width: 0.4em;
+  height: 0.4em;
+  border-radius: 999px;
+  background: radial-gradient(circle at 32% 28%,
+    color-mix(in oklch, currentColor 40%, var(--bg)),
+    currentColor 62%,
+    color-mix(in oklch, currentColor 82%, var(--fg)) 100%);
+  box-shadow:
+    0 0.06em 0.14em color-mix(in oklch, currentColor 45%, transparent),
+    0 0 0.35em color-mix(in oklch, currentColor 50%, transparent);
+  display: inline-block;
+  animation: spin-dot-bounce 1.2s ease-in-out infinite;
+}
+
+.spin.dots i:nth-child(2) { animation-delay: 0.15s; }
+.spin.dots i:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes spin-dot-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
+  40% { transform: translateY(-30%); opacity: 1; }
+}
+
+.spin-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--fg-muted);
+}
+
+.spin-label { font-size: 12px; }

package/dist/Spin.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var chunkQKQHZIF3_cjs = require('./chunk-QKQHZIF3.cjs');
+
+
+
+Object.defineProperty(exports, "Spin", {
+  enumerable: true,
+  get: function () { return chunkQKQHZIF3_cjs.Spin; }
+});