@fangxinyan/lumina 0.3.0 → 0.5.0

package/dist/Form.d.ts

@@ -0,0 +1,85 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type FormLayout = "horizontal" | "vertical" | "inline";
+type Rule = {
+    required?: boolean;
+    message?: string;
+    pattern?: RegExp;
+    min?: number;
+    max?: number;
+    len?: number;
+    type?: "string" | "number" | "email" | "url" | "array";
+    whitespace?: boolean;
+    validator?: (rule: Rule, value: unknown) => Promise<void> | void;
+};
+interface ErrorField {
+    name: string;
+    errors: string[];
+}
+interface FormInstance<V extends Record<string, unknown> = Record<string, unknown>> {
+    getFieldValue: <T = unknown>(name: string) => T;
+    getFieldsValue: (names?: string[]) => V;
+    setFieldValue: (name: string, value: unknown) => void;
+    setFieldsValue: (values: Partial<V>) => void;
+    resetFields: (names?: string[]) => void;
+    validateFields: (names?: string[]) => Promise<V>;
+    isFieldTouched: (name: string) => boolean;
+    getFieldError: (name: string) => string[];
+    /** Programmatic submit — runs validate then onFinish/onFinishFailed. */
+    submit: () => void;
+}
+/** `Form.useForm()` — create a form instance. Same shape as antd's hook. */
+declare function useForm<V extends Record<string, unknown> = Record<string, unknown>>(): [FormInstance<V>];
+interface FormProps<V extends Record<string, unknown> = Record<string, unknown>> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onChange" | "onSubmit"> {
+    form?: FormInstance<V>;
+    layout?: FormLayout;
+    initialValues?: Partial<V>;
+    onFinish?: (values: V) => void;
+    onFinishFailed?: (info: {
+        values: Partial<V>;
+        errorFields: ErrorField[];
+    }) => void;
+    onValuesChange?: (changed: Partial<V>, all: V) => void;
+    /** Show the `*` mark before required field labels. Default true. */
+    requiredMark?: boolean;
+    /** Disable all fields inside. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const FormRoot: <V extends Record<string, unknown> = Record<string, unknown>>(props: FormProps<V>) => react_jsx_runtime.JSX.Element;
+interface FormItemProps {
+    /** Field key. Omit for layout-only wrappers (no value binding). */
+    name?: string;
+    label?: React.ReactNode;
+    rules?: Rule[];
+    /** Render no wrapper — emit only the (bound) child. */
+    noStyle?: boolean;
+    /** Inject value into this prop name on the child. Default `"value"`. */
+    valuePropName?: string;
+    /** Listen for changes on this event name. Default `"onChange"`. */
+    trigger?: string;
+    /** Event names that trigger validation. Default `["onChange"]`. */
+    validateTrigger?: string | string[];
+    /** Initial value (used when the form instance has no value yet). */
+    initialValue?: unknown;
+    /** Extra help text shown under the field. Hidden when an error is shown. */
+    help?: React.ReactNode;
+    /** Supplementary description below the help line. */
+    extra?: React.ReactNode;
+    /** Explicitly mark the field as required (cosmetic). */
+    required?: boolean;
+    /** Hide the entire item (still keeps the field in the form). */
+    hidden?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const FormItem: React.FC<FormItemProps>;
+declare const Form: typeof FormRoot & {
+    Item: typeof FormItem;
+    useForm: typeof useForm;
+};
+
+export { type ErrorField, Form, type FormInstance, FormItem, type FormItemProps, type FormLayout, type FormProps, type Rule, useForm };

package/dist/Form.js

@@ -0,0 +1,3 @@
+export { Form, FormItem, useForm } from './chunk-IHACXMOI.js';
+//# sourceMappingURL=Form.js.map
+//# sourceMappingURL=Form.js.map

package/dist/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Form.js"}

package/dist/Icon.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
-var chunkYVO7XO4W_cjs = require('./chunk-YVO7XO4W.cjs');
+var chunkYCHUHMNP_cjs = require('./chunk-YCHUHMNP.cjs');
 
 
 
 Object.defineProperty(exports, "ICON_NAMES", {
   enumerable: true,
-  get: function () { return chunkYVO7XO4W_cjs.ICON_NAMES; }
+  get: function () { return chunkYCHUHMNP_cjs.ICON_NAMES; }
 });
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
-  get: function () { return chunkYVO7XO4W_cjs.Icon; }
+  get: function () { return chunkYCHUHMNP_cjs.Icon; }
 });
 //# sourceMappingURL=Icon.cjs.map
 //# sourceMappingURL=Icon.cjs.map

package/dist/Icon.d.cts

@@ -3,7 +3,7 @@ import * as React from 'react';
 /**
  * Name of a built-in icon. To add your own, pass `children` (raw SVG paths) instead.
  */
-type IconName = "search" | "plus" | "minus" | "check" | "x" | "chevDown" | "chevRight" | "chevLeft" | "chevUp" | "arrowRight" | "settings" | "user" | "bell" | "mail" | "heart" | "star" | "home" | "folder" | "file" | "image" | "play" | "pause" | "volume" | "trash" | "edit" | "copy" | "download" | "upload" | "info" | "alert" | "check2" | "eye" | "eyeOff" | "sparkle" | "moon" | "sun" | "palette" | "layers" | "grid" | "list" | "zap" | "filter" | "mic" | "send" | "calendar" | "clock" | "menu" | "more" | "sliders";
+type IconName = "search" | "plus" | "minus" | "check" | "x" | "chevDown" | "chevRight" | "chevLeft" | "chevUp" | "arrowRight" | "settings" | "user" | "bell" | "mail" | "heart" | "star" | "home" | "folder" | "file" | "image" | "play" | "pause" | "volume" | "trash" | "edit" | "copy" | "download" | "upload" | "info" | "alert" | "check2" | "eye" | "eyeOff" | "sparkle" | "moon" | "sun" | "palette" | "layers" | "grid" | "list" | "zap" | "filter" | "mic" | "send" | "calendar" | "clock" | "menu" | "more" | "sliders" | "aim" | "swap" | "camera" | "qq";
 interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke"> {
     name: IconName;
     size?: number;

package/dist/Icon.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 /**
  * Name of a built-in icon. To add your own, pass `children` (raw SVG paths) instead.
  */
-type IconName = "search" | "plus" | "minus" | "check" | "x" | "chevDown" | "chevRight" | "chevLeft" | "chevUp" | "arrowRight" | "settings" | "user" | "bell" | "mail" | "heart" | "star" | "home" | "folder" | "file" | "image" | "play" | "pause" | "volume" | "trash" | "edit" | "copy" | "download" | "upload" | "info" | "alert" | "check2" | "eye" | "eyeOff" | "sparkle" | "moon" | "sun" | "palette" | "layers" | "grid" | "list" | "zap" | "filter" | "mic" | "send" | "calendar" | "clock" | "menu" | "more" | "sliders";
+type IconName = "search" | "plus" | "minus" | "check" | "x" | "chevDown" | "chevRight" | "chevLeft" | "chevUp" | "arrowRight" | "settings" | "user" | "bell" | "mail" | "heart" | "star" | "home" | "folder" | "file" | "image" | "play" | "pause" | "volume" | "trash" | "edit" | "copy" | "download" | "upload" | "info" | "alert" | "check2" | "eye" | "eyeOff" | "sparkle" | "moon" | "sun" | "palette" | "layers" | "grid" | "list" | "zap" | "filter" | "mic" | "send" | "calendar" | "clock" | "menu" | "more" | "sliders" | "aim" | "swap" | "camera" | "qq";
 interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "stroke"> {
     name: IconName;
     size?: number;

package/dist/Icon.js

@@ -1,3 +1,3 @@
-export { ICON_NAMES, Icon } from './chunk-GEYMWUW6.js';
+export { ICON_NAMES, Icon } from './chunk-QOGROEVD.js';
 //# sourceMappingURL=Icon.js.map
 //# sourceMappingURL=Icon.js.map

package/dist/Image.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
-var chunkEHO2JH2L_cjs = require('./chunk-EHO2JH2L.cjs');
-require('./chunk-YVO7XO4W.cjs');
+var chunkHXSAH4Y6_cjs = require('./chunk-HXSAH4Y6.cjs');
+require('./chunk-YCHUHMNP.cjs');
 
 
 
 Object.defineProperty(exports, "Image", {
   enumerable: true,
-  get: function () { return chunkEHO2JH2L_cjs.Image; }
+  get: function () { return chunkHXSAH4Y6_cjs.Image; }
 });
 Object.defineProperty(exports, "ImageGrid", {
   enumerable: true,
-  get: function () { return chunkEHO2JH2L_cjs.ImageGrid; }
+  get: function () { return chunkHXSAH4Y6_cjs.ImageGrid; }
 });
 //# sourceMappingURL=Image.cjs.map
 //# sourceMappingURL=Image.cjs.map

package/dist/Image.js

@@ -1,4 +1,4 @@
-export { Image, ImageGrid } from './chunk-YXKJOPYT.js';
-import './chunk-GEYMWUW6.js';
+export { Image, ImageGrid } from './chunk-OM76QWUN.js';
+import './chunk-QOGROEVD.js';
 //# sourceMappingURL=Image.js.map
 //# sourceMappingURL=Image.js.map

package/dist/Input.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
-var chunkMKR4X57L_cjs = require('./chunk-MKR4X57L.cjs');
-require('./chunk-YVO7XO4W.cjs');
+var chunkYFBHVTKN_cjs = require('./chunk-YFBHVTKN.cjs');
+require('./chunk-YCHUHMNP.cjs');
 
 
 
 Object.defineProperty(exports, "Input", {
   enumerable: true,
-  get: function () { return chunkMKR4X57L_cjs.Input; }
+  get: function () { return chunkYFBHVTKN_cjs.Input; }
 });
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
-  get: function () { return chunkMKR4X57L_cjs.Textarea; }
+  get: function () { return chunkYFBHVTKN_cjs.Textarea; }
 });
 //# sourceMappingURL=Input.cjs.map
 //# sourceMappingURL=Input.cjs.map

package/dist/Input.js

@@ -1,4 +1,4 @@
-export { Input, Textarea } from './chunk-WBMF7WM3.js';
-import './chunk-GEYMWUW6.js';
+export { Input, Textarea } from './chunk-WUOFJPZ4.js';
+import './chunk-QOGROEVD.js';
 //# sourceMappingURL=Input.js.map
 //# sourceMappingURL=Input.js.map

package/dist/InputNumber-VXQIWLQC.css

@@ -0,0 +1,40 @@
+/* ============ InputNumber ============ */
+.ipn-steppers {
+  display: inline-flex;
+  flex-direction: column;
+  align-self: stretch;
+  margin: 4px -6px 4px 6px;
+  width: 16px;
+  border-left: 1px solid var(--divider);
+  overflow: hidden;
+  border-top-right-radius: calc(var(--r-md) - 4px);
+  border-bottom-right-radius: calc(var(--r-md) - 4px);
+}
+.input-wrap.sm .ipn-steppers { margin: 3px -4px 3px 6px; width: 14px; }
+.input-wrap.lg .ipn-steppers { margin: 5px -6px 5px 8px; width: 18px; }
+
+.ipn-step {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--fg-subtle);
+  cursor: pointer;
+  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+}
+.ipn-step.up:not(.down) { border-bottom: 1px solid var(--divider); }
+.ipn-step.up            { border-bottom: 1px solid var(--divider); }
+.ipn-step:hover:not(:disabled) {
+  color: var(--accent-ink);
+  background: var(--bg-sunken);
+}
+.ipn-step:active:not(:disabled) {
+  color: var(--accent);
+}
+.ipn-step:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}

package/dist/InputNumber.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var chunkBCPAY65C_cjs = require('./chunk-BCPAY65C.cjs');
+require('./chunk-YFBHVTKN.cjs');
+require('./chunk-YCHUHMNP.cjs');
+
+
+
+Object.defineProperty(exports, "InputNumber", {
+  enumerable: true,
+  get: function () { return chunkBCPAY65C_cjs.InputNumber; }
+});
+//# sourceMappingURL=InputNumber.cjs.map
+//# sourceMappingURL=InputNumber.cjs.map

package/dist/InputNumber.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"InputNumber.cjs"}

package/dist/InputNumber.d.cts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+interface InputNumberProps {
+    /** Controlled value. `null` = empty field. */
+    value?: number | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: number;
+    /** Fires with the parsed number (or `null` when the input is emptied). */
+    onChange?: (value: number | null) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /** Fires when the Enter key is pressed (matches antd's `onPressEnter`). */
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+    min?: number;
+    max?: number;
+    /** Step for up/down buttons + arrow keys. Default 1. */
+    step?: number;
+    /** Number of decimal places to round to. Omit for no rounding. */
+    precision?: number;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string;
+    /** Show the up/down stepper buttons. Default true. */
+    controls?: boolean;
+    invalid?: boolean;
+    className?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    autoFocus?: boolean;
+    id?: string;
+    name?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * `InputNumber` — numeric input with up/down stepper buttons. Arrow-key
+ * and mouse-wheel increments; min / max clamping; optional rounding.
+ *
+ * @example
+ * ```tsx
+ * <InputNumber min={0} max={100} step={1} defaultValue={10} onChange={...} />
+ * ```
+ */
+declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<HTMLInputElement>>;
+
+export { InputNumber, type InputNumberProps };

package/dist/InputNumber.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+interface InputNumberProps {
+    /** Controlled value. `null` = empty field. */
+    value?: number | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: number;
+    /** Fires with the parsed number (or `null` when the input is emptied). */
+    onChange?: (value: number | null) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /** Fires when the Enter key is pressed (matches antd's `onPressEnter`). */
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+    min?: number;
+    max?: number;
+    /** Step for up/down buttons + arrow keys. Default 1. */
+    step?: number;
+    /** Number of decimal places to round to. Omit for no rounding. */
+    precision?: number;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string;
+    /** Show the up/down stepper buttons. Default true. */
+    controls?: boolean;
+    invalid?: boolean;
+    className?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    autoFocus?: boolean;
+    id?: string;
+    name?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * `InputNumber` — numeric input with up/down stepper buttons. Arrow-key
+ * and mouse-wheel increments; min / max clamping; optional rounding.
+ *
+ * @example
+ * ```tsx
+ * <InputNumber min={0} max={100} step={1} defaultValue={10} onChange={...} />
+ * ```
+ */
+declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<HTMLInputElement>>;
+
+export { InputNumber, type InputNumberProps };

package/dist/InputNumber.js

@@ -0,0 +1,5 @@
+export { InputNumber } from './chunk-E62JFAHW.js';
+import './chunk-WUOFJPZ4.js';
+import './chunk-QOGROEVD.js';
+//# sourceMappingURL=InputNumber.js.map
+//# sourceMappingURL=InputNumber.js.map

package/dist/InputNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"InputNumber.js"}

package/dist/Modal.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-var chunkAR4M7QGF_cjs = require('./chunk-AR4M7QGF.cjs');
-require('./chunk-RSZNFKCQ.cjs');
-require('./chunk-YVO7XO4W.cjs');
+var chunkSMHXSEBD_cjs = require('./chunk-SMHXSEBD.cjs');
+require('./chunk-RWHWEQQX.cjs');
+require('./chunk-YCHUHMNP.cjs');
 
 
 
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
-  get: function () { return chunkAR4M7QGF_cjs.Modal; }
+  get: function () { return chunkSMHXSEBD_cjs.Modal; }
 });
 //# sourceMappingURL=Modal.cjs.map
 //# sourceMappingURL=Modal.cjs.map

package/dist/Modal.js

@@ -1,5 +1,5 @@
-export { Modal } from './chunk-MTCLJHXU.js';
-import './chunk-5UOBYRYJ.js';
-import './chunk-GEYMWUW6.js';
+export { Modal } from './chunk-TZLM5GF4.js';
+import './chunk-JXHMJUVI.js';
+import './chunk-QOGROEVD.js';
 //# sourceMappingURL=Modal.js.map
 //# sourceMappingURL=Modal.js.map

package/dist/Pagination.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
-var chunkAWLBLRQX_cjs = require('./chunk-AWLBLRQX.cjs');
-require('./chunk-RVSWH4RH.cjs');
-require('./chunk-HNVRMOL3.cjs');
+var chunk77TZHI76_cjs = require('./chunk-77TZHI76.cjs');
+require('./chunk-T4PI2ZX7.cjs');
+require('./chunk-RQV7SMIZ.cjs');
 require('./chunk-RZ2E3XEU.cjs');
-require('./chunk-YVO7XO4W.cjs');
+require('./chunk-YCHUHMNP.cjs');
 
 
 
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
-  get: function () { return chunkAWLBLRQX_cjs.Pagination; }
+  get: function () { return chunk77TZHI76_cjs.Pagination; }
 });
 //# sourceMappingURL=Pagination.cjs.map
 //# sourceMappingURL=Pagination.cjs.map

package/dist/Pagination.js

@@ -1,7 +1,7 @@
-export { Pagination } from './chunk-WQFC5EMC.js';
-import './chunk-URLSZPS5.js';
-import './chunk-276NALYW.js';
+export { Pagination } from './chunk-AESLEYST.js';
+import './chunk-6XZ362VL.js';
+import './chunk-LXNR6TQK.js';
 import './chunk-V2DIQ3RH.js';
-import './chunk-GEYMWUW6.js';
+import './chunk-QOGROEVD.js';
 //# sourceMappingURL=Pagination.js.map
 //# sourceMappingURL=Pagination.js.map

package/dist/Select.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
-var chunkRVSWH4RH_cjs = require('./chunk-RVSWH4RH.cjs');
-require('./chunk-HNVRMOL3.cjs');
+var chunkT4PI2ZX7_cjs = require('./chunk-T4PI2ZX7.cjs');
+require('./chunk-RQV7SMIZ.cjs');
 require('./chunk-RZ2E3XEU.cjs');
-require('./chunk-YVO7XO4W.cjs');
+require('./chunk-YCHUHMNP.cjs');
 
 
 
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkRVSWH4RH_cjs.Select; }
+  get: function () { return chunkT4PI2ZX7_cjs.Select; }
 });
 //# sourceMappingURL=Select.cjs.map
 //# sourceMappingURL=Select.cjs.map

package/dist/Select.js

@@ -1,6 +1,6 @@
-export { Select } from './chunk-URLSZPS5.js';
-import './chunk-276NALYW.js';
+export { Select } from './chunk-6XZ362VL.js';
+import './chunk-LXNR6TQK.js';
 import './chunk-V2DIQ3RH.js';
-import './chunk-GEYMWUW6.js';
+import './chunk-QOGROEVD.js';
 //# sourceMappingURL=Select.js.map
 //# sourceMappingURL=Select.js.map

package/dist/{Slider-X4PVA65R.css → Slider-3JKA5EW6.css}

@@ -1,14 +1,25 @@
 /* ============ Slider ============ */
 .slider {
   position: relative;
-  height: 36px;
   width: 100%;
   display: flex;
   align-items: center;
+  gap: 10px;
   cursor: pointer;
+  min-height: 36px;
 }
 .slider.has-marks { padding-bottom: 26px; }
 .slider.disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Rail: positioning context for track + thumbs + marks */
+.slider-rail {
+  position: relative;
+  flex: 1 1 0%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+}
+
 .slider-track {
   position: relative;
   width: 100%;
@@ -16,8 +27,10 @@
   border-radius: 999px;
   background: var(--bg);
   box-shadow: var(--neu-in-sm);
-  overflow: hidden;
+  touch-action: none;
+  z-index: 1;
 }
+
 .slider-fill {
   position: absolute;
   top: 0; bottom: 0;
@@ -25,7 +38,9 @@
   box-shadow: 0 0 12px var(--accent-glow);
   border-radius: 999px;
   transition: left var(--dur-fast) var(--ease), right var(--dur-fast) var(--ease);
+  pointer-events: none;
 }
+
 .slider-thumb {
   position: absolute;
   top: 50%;
@@ -36,43 +51,45 @@
   transform: translate(-50%, -50%);
   transition: all var(--dur-fast) var(--ease);
   display: grid; place-items: center;
-  pointer-events: none;
+  z-index: 3;
+  outline: none;
+  touch-action: none;
 }
-.slider.has-marks .slider-thumb { top: calc(50% - 13px); }
-.slider.has-marks .slider-track { margin-top: -26px; }
 .slider-thumb::after {
   content: "";
   width: 6px; height: 6px;
   border-radius: 999px;
-  background: var(--accent);
+  background: var(--slider-thumb-color, var(--accent));
+}
+.slider-thumb:focus-visible {
+  box-shadow: var(--neu-out-sm), 0 0 0 3px var(--accent-glow);
 }
 .slider:hover .slider-thumb { transform: translate(-50%, -50%) scale(1.08); }
-.slider input[type="range"] {
-  position: absolute;
-  inset: 0;
-  width: 100%; height: 100%;
-  opacity: 0;
-  cursor: inherit;
-  margin: 0;
-  pointer-events: auto;
+
+.slider-value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent-ink);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
-/* In range mode (two stacked inputs), split the hit zones by half so the user can drag either thumb */
-.slider input[type="range"]:nth-of-type(1):not(:only-of-type) { right: 50%; }
-.slider input[type="range"]:nth-of-type(2) { left: 50%; }
-.slider.has-marks input[type="range"] { height: calc(100% - 26px); }
-.slider-value { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); margin-left: 10px; }
+
+/* Tone variants */
+.slider.success .slider-thumb { --slider-thumb-color: var(--success); }
 .slider.success .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--success) 70%, white), var(--success)); box-shadow: 0 0 10px color-mix(in oklch, var(--success) 35%, transparent); }
-.slider.success .slider-thumb::after { background: var(--success); }
+.slider.success .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--success) 35%, transparent); }
+.slider.warning .slider-thumb { --slider-thumb-color: var(--warning); }
 .slider.warning .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--warning) 70%, white), var(--warning)); box-shadow: 0 0 10px color-mix(in oklch, var(--warning) 35%, transparent); }
-.slider.warning .slider-thumb::after { background: var(--warning); }
+.slider.warning .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--warning) 35%, transparent); }
+.slider.danger .slider-thumb { --slider-thumb-color: var(--danger); }
 .slider.danger  .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 70%, white), var(--danger));  box-shadow: 0 0 10px color-mix(in oklch, var(--danger) 35%, transparent); }
-.slider.danger  .slider-thumb::after { background: var(--danger); }
+.slider.danger  .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--danger) 35%, transparent); }
 
 /* Marks */
 .slider-marks {
   position: absolute;
   left: 0; right: 0;
-  bottom: 0;
+  bottom: -26px;
   height: 22px;
   pointer-events: none;
 }
@@ -94,8 +111,10 @@
   border-radius: 999px;
   background: var(--bg);
   box-shadow: var(--neu-in-sm);
-  margin-top: -18px;
-  position: relative;
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1;
 }
 .slider-mark.active .slider-mark-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }

package/dist/Slider.cjs

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

package/dist/Slider.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 
-type SliderSingleValue = number;
 type SliderRangeValue = [number, number];
-type SliderValue = SliderSingleValue | SliderRangeValue;
+type SliderValue = number | SliderRangeValue;
 interface SliderBaseProps {
     min?: number;
     max?: number;
@@ -10,6 +9,8 @@ interface SliderBaseProps {
     disabled?: boolean;
     showValue?: boolean;
     tone?: "accent" | "success" | "warning" | "danger";
+    /** Custom gradient colors mapped from min→max. Overrides `tone` for fill & thumb. */
+    colors?: string[];
     /** Tick marks with labels. Clicking a mark snaps to it. */
     marks?: Record<number, React.ReactNode>;
     className?: string;
@@ -27,7 +28,9 @@ interface SliderRangeProps extends SliderBaseProps {
     onChange?: (value: SliderRangeValue) => void;
 }
 type SliderProps = SliderSingleProps | SliderRangeProps;
-/** `Slider` — neumorphic range input with grooved track. */
-declare const Slider: React.FC<SliderProps>;
+/** `Slider` — neumorphic range input with grooved track.
+ * @example <Slider defaultValue={40} showValue />
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Slider, type SliderProps, type SliderRangeProps, type SliderRangeValue, type SliderSingleProps, type SliderSingleValue, type SliderValue };
+export { Slider, type SliderProps, type SliderRangeProps, type SliderRangeValue, type SliderSingleProps, type SliderValue };