@glob-ui/slider 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Martínez E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,17 @@
-# Temporary Holding Version
+# @glob-ui/slider
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A range input with a visible fill. It is the native `<input type="range">`, so keyboard, forms and screen readers work as usual.
+
+## Install
+
+```bash
+pnpm add @glob-ui/slider
+```
+
+## Documentation
+
+Full docs, examples and the accessibility table: [Slider](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/slider.mdx).
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const sliderVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "size">, VariantProps<typeof sliderVariants> {
+    value?: number;
+    defaultValue?: number;
+    /** Called with the new number on every change. */
+    onValueChange?: (value: number) => void;
+    /** Marks the slider as invalid for assistive technology (use with Field). */
+    "aria-invalid"?: boolean | "true" | "false";
+}
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Slider, type SliderProps, sliderVariants };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const sliderVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "size">, VariantProps<typeof sliderVariants> {
+    value?: number;
+    defaultValue?: number;
+    /** Called with the new number on every change. */
+    onValueChange?: (value: number) => void;
+    /** Marks the slider as invalid for assistive technology (use with Field). */
+    "aria-invalid"?: boolean | "true" | "false";
+}
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Slider, type SliderProps, sliderVariants };

package/dist/index.js

@@ -0,0 +1,120 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Slider: () => Slider,
+  sliderVariants: () => sliderVariants
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/slider.tsx
+var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("@glob-ui/utils");
+var import_hooks = require("@glob-ui/hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
+var sliderVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Native range input: keyboard, form submission, RTL and screen readers come with it.
+    "w-full cursor-pointer appearance-none rounded-glob-sm bg-transparent focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    // Track (WebKit and Firefox). The WebKit fill is a gradient up to --glob-slider-fill.
+    "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full",
+    "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--glob-primary)_var(--glob-slider-fill),var(--glob-surface-hover)_var(--glob-slider-fill))]",
+    "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-glob-surface-hover",
+    "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-glob-primary",
+    // Thumb. The margin centres a 16 px thumb on the 6 px track in WebKit.
+    "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-glob-primary [&::-webkit-slider-thumb]:bg-glob-surface",
+    "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-glob-primary [&::-moz-range-thumb]:bg-glob-surface",
+    "[&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_var(--glob-ring)] [&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_var(--glob-ring)]",
+    "motion-reduce:transition-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-[4px] [&::-moz-range-thumb]:size-3",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Slider = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className, size, value, defaultValue, onValueChange, min = 0, max = 100, disabled, style } = _b, props = __objRest(_b, ["className", "size", "value", "defaultValue", "onValueChange", "min", "max", "disabled", "style"]);
+    const [current, setCurrent] = (0, import_hooks.useControllableState)(value, defaultValue != null ? defaultValue : Number(min), onValueChange);
+    const span = Number(max) - Number(min);
+    const percent = span > 0 ? (current - Number(min)) / span * 100 : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      __spreadValues({
+        ref,
+        type: "range",
+        min,
+        max,
+        value: current,
+        disabled,
+        onChange: (e) => setCurrent(Number(e.target.value)),
+        className: (0, import_utils.cn)(sliderVariants({ size, className })),
+        style: __spreadProps(__spreadValues({}, style), { ["--glob-slider-fill"]: `${percent}%` })
+      }, props)
+    );
+  }
+);
+Slider.displayName = "Slider";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slider,
+  sliderVariants
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/slider.tsx"],"sourcesContent":["export { Slider, sliderVariants } from \"./slider\"\nexport type { SliderProps } from \"./slider\"\n","\"use client\"\n\nimport { forwardRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { useControllableState } from \"@glob-ui/hooks\"\n\nconst sliderVariants = cva(\n  [\n    // Native range input: keyboard, form submission, RTL and screen readers come with it.\n    \"w-full cursor-pointer appearance-none rounded-glob-sm bg-transparent focus-visible:outline-none\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    // Track (WebKit and Firefox). The WebKit fill is a gradient up to --glob-slider-fill.\n    \"[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full\",\n    \"[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--glob-primary)_var(--glob-slider-fill),var(--glob-surface-hover)_var(--glob-slider-fill))]\",\n    \"[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-glob-surface-hover\",\n    \"[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-glob-primary\",\n    // Thumb. The margin centres a 16 px thumb on the 6 px track in WebKit.\n    \"[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-glob-primary [&::-webkit-slider-thumb]:bg-glob-surface\",\n    \"[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-glob-primary [&::-moz-range-thumb]:bg-glob-surface\",\n    \"[&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_var(--glob-ring)] [&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_var(--glob-ring)]\",\n    \"motion-reduce:transition-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-[4px] [&::-moz-range-thumb]:size-3\",\n        md: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport interface SliderProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"size\">,\n    VariantProps<typeof sliderVariants> {\n  value?: number\n  defaultValue?: number\n  /** Called with the new number on every change. */\n  onValueChange?: (value: number) => void\n  /** Marks the slider as invalid for assistive technology (use with Field). */\n  \"aria-invalid\"?: boolean | \"true\" | \"false\"\n}\n\nconst Slider = forwardRef<HTMLInputElement, SliderProps>(\n  ({ className, size, value, defaultValue, onValueChange, min = 0, max = 100, disabled, style, ...props }, ref) => {\n    const [current, setCurrent] = useControllableState<number>(value, defaultValue ?? Number(min), onValueChange)\n    const span = Number(max) - Number(min)\n    const percent = span > 0 ? ((current - Number(min)) / span) * 100 : 0\n\n    return (\n      <input\n        ref={ref}\n        type=\"range\"\n        min={min}\n        max={max}\n        value={current}\n        disabled={disabled}\n        onChange={(e) => setCurrent(Number(e.target.value))}\n        className={cn(sliderVariants({ size, className }))}\n        style={{ ...style, [\"--glob-slider-fill\" as string]: `${percent}%` }}\n        {...props}\n      />\n    )\n  }\n)\nSlider.displayName = \"Slider\"\n\nexport { Slider, sliderVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA2B;AAC3B,sCAAuC;AACvC,mBAAmB;AACnB,mBAAqC;AAiD/B;AA/CN,IAAM,qBAAiB;AAAA,EACrB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAaA,IAAM,aAAS;AAAA,EACb,CAAC,IAAwG,QAAQ;AAAhH,iBAAE,aAAW,MAAM,OAAO,cAAc,eAAe,MAAM,GAAG,MAAM,KAAK,UAAU,MAhDxF,IAgDG,IAA+F,kBAA/F,IAA+F,CAA7F,aAAW,QAAM,SAAO,gBAAc,iBAAe,OAAS,OAAW,YAAU;AACpF,UAAM,CAAC,SAAS,UAAU,QAAI,mCAA6B,OAAO,sCAAgB,OAAO,GAAG,GAAG,aAAa;AAC5G,UAAM,OAAO,OAAO,GAAG,IAAI,OAAO,GAAG;AACrC,UAAM,UAAU,OAAO,KAAM,UAAU,OAAO,GAAG,KAAK,OAAQ,MAAM;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,UAAU,CAAC,MAAM,WAAW,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,QAClD,eAAW,iBAAG,eAAe,EAAE,MAAM,UAAU,CAAC,CAAC;AAAA,QACjD,OAAO,iCAAK,QAAL,EAAY,CAAC,oBAA8B,GAAG,GAAG,OAAO,IAAI;AAAA,SAC/D;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,95 @@
+"use client"
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/slider.tsx
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@glob-ui/utils";
+import { useControllableState } from "@glob-ui/hooks";
+import { jsx } from "react/jsx-runtime";
+var sliderVariants = cva(
+  [
+    // Native range input: keyboard, form submission, RTL and screen readers come with it.
+    "w-full cursor-pointer appearance-none rounded-glob-sm bg-transparent focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    // Track (WebKit and Firefox). The WebKit fill is a gradient up to --glob-slider-fill.
+    "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full",
+    "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--glob-primary)_var(--glob-slider-fill),var(--glob-surface-hover)_var(--glob-slider-fill))]",
+    "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-glob-surface-hover",
+    "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-glob-primary",
+    // Thumb. The margin centres a 16 px thumb on the 6 px track in WebKit.
+    "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-glob-primary [&::-webkit-slider-thumb]:bg-glob-surface",
+    "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-glob-primary [&::-moz-range-thumb]:bg-glob-surface",
+    "[&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_var(--glob-ring)] [&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_var(--glob-ring)]",
+    "motion-reduce:transition-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-[4px] [&::-moz-range-thumb]:size-3",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Slider = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, size, value, defaultValue, onValueChange, min = 0, max = 100, disabled, style } = _b, props = __objRest(_b, ["className", "size", "value", "defaultValue", "onValueChange", "min", "max", "disabled", "style"]);
+    const [current, setCurrent] = useControllableState(value, defaultValue != null ? defaultValue : Number(min), onValueChange);
+    const span = Number(max) - Number(min);
+    const percent = span > 0 ? (current - Number(min)) / span * 100 : 0;
+    return /* @__PURE__ */ jsx(
+      "input",
+      __spreadValues({
+        ref,
+        type: "range",
+        min,
+        max,
+        value: current,
+        disabled,
+        onChange: (e) => setCurrent(Number(e.target.value)),
+        className: cn(sliderVariants({ size, className })),
+        style: __spreadProps(__spreadValues({}, style), { ["--glob-slider-fill"]: `${percent}%` })
+      }, props)
+    );
+  }
+);
+Slider.displayName = "Slider";
+export {
+  Slider,
+  sliderVariants
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider.tsx"],"sourcesContent":["\"use client\"\n\nimport { forwardRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { useControllableState } from \"@glob-ui/hooks\"\n\nconst sliderVariants = cva(\n  [\n    // Native range input: keyboard, form submission, RTL and screen readers come with it.\n    \"w-full cursor-pointer appearance-none rounded-glob-sm bg-transparent focus-visible:outline-none\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    // Track (WebKit and Firefox). The WebKit fill is a gradient up to --glob-slider-fill.\n    \"[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full\",\n    \"[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--glob-primary)_var(--glob-slider-fill),var(--glob-surface-hover)_var(--glob-slider-fill))]\",\n    \"[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-glob-surface-hover\",\n    \"[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-glob-primary\",\n    // Thumb. The margin centres a 16 px thumb on the 6 px track in WebKit.\n    \"[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-glob-primary [&::-webkit-slider-thumb]:bg-glob-surface\",\n    \"[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-glob-primary [&::-moz-range-thumb]:bg-glob-surface\",\n    \"[&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_var(--glob-ring)] [&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_var(--glob-ring)]\",\n    \"motion-reduce:transition-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-[4px] [&::-moz-range-thumb]:size-3\",\n        md: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport interface SliderProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"size\">,\n    VariantProps<typeof sliderVariants> {\n  value?: number\n  defaultValue?: number\n  /** Called with the new number on every change. */\n  onValueChange?: (value: number) => void\n  /** Marks the slider as invalid for assistive technology (use with Field). */\n  \"aria-invalid\"?: boolean | \"true\" | \"false\"\n}\n\nconst Slider = forwardRef<HTMLInputElement, SliderProps>(\n  ({ className, size, value, defaultValue, onValueChange, min = 0, max = 100, disabled, style, ...props }, ref) => {\n    const [current, setCurrent] = useControllableState<number>(value, defaultValue ?? Number(min), onValueChange)\n    const span = Number(max) - Number(min)\n    const percent = span > 0 ? ((current - Number(min)) / span) * 100 : 0\n\n    return (\n      <input\n        ref={ref}\n        type=\"range\"\n        min={min}\n        max={max}\n        value={current}\n        disabled={disabled}\n        onChange={(e) => setCurrent(Number(e.target.value))}\n        className={cn(sliderVariants({ size, className }))}\n        style={{ ...style, [\"--glob-slider-fill\" as string]: `${percent}%` }}\n        {...props}\n      />\n    )\n  }\n)\nSlider.displayName = \"Slider\"\n\nexport { Slider, sliderVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,WAA8B;AACvC,SAAS,UAAU;AACnB,SAAS,4BAA4B;AAiD/B;AA/CN,IAAM,iBAAiB;AAAA,EACrB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAaA,IAAM,SAAS;AAAA,EACb,CAAC,IAAwG,QAAQ;AAAhH,iBAAE,aAAW,MAAM,OAAO,cAAc,eAAe,MAAM,GAAG,MAAM,KAAK,UAAU,MAhDxF,IAgDG,IAA+F,kBAA/F,IAA+F,CAA7F,aAAW,QAAM,SAAO,gBAAc,iBAAe,OAAS,OAAW,YAAU;AACpF,UAAM,CAAC,SAAS,UAAU,IAAI,qBAA6B,OAAO,sCAAgB,OAAO,GAAG,GAAG,aAAa;AAC5G,UAAM,OAAO,OAAO,GAAG,IAAI,OAAO,GAAG;AACrC,UAAM,UAAU,OAAO,KAAM,UAAU,OAAO,GAAG,KAAK,OAAQ,MAAM;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,UAAU,CAAC,MAAM,WAAW,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,QAClD,WAAW,GAAG,eAAe,EAAE,MAAM,UAAU,CAAC,CAAC;AAAA,QACjD,OAAO,iCAAK,QAAL,EAAY,CAAC,oBAA8B,GAAG,GAAG,OAAO,IAAI;AAAA,SAC/D;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@glob-ui/slider",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "dependencies": {
+    "@glob-ui/hooks": "0.2.0",
+    "@glob-ui/utils": "0.2.0",
+    "class-variance-authority": "^0.7.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "A range input with a visible fill. It is the native `<input type=\"range\">`, so keyboard, forms and screen readers work as usual.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "slider"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/slider"
+  },
+  "homepage": "https://github.com/kevin-martineze/GlobUI#readme",
+  "bugs": {
+    "url": "https://github.com/kevin-martineze/GlobUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --no-clean"
+  }
 }