@pittorica/slider-react 0.24.0 → 0.25.0

package/dist/Slider.d.ts

@@ -1,7 +1,7 @@
-import { type Ref } from 'react';
+import { type ElementType } from 'react';
 import { type BoxProps } from '@pittorica/box-react';
 import type { PittoricaColor } from '@pittorica/text-react';
-export interface SliderProps extends Omit<BoxProps, 'onChange' | 'value' | 'defaultValue'> {
+export type SliderProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'onChange' | 'value' | 'defaultValue'> & {
     value?: number;
     defaultValue?: number;
     min?: number;
@@ -10,14 +10,13 @@ export interface SliderProps extends Omit<BoxProps, 'onChange' | 'value' | 'defa
     disabled?: boolean;
     color?: PittoricaColor;
     onValueChange?: (value: number) => void;
-}
+};
 /**
  * Slider component for numeric input via dragging.
+ * Fully polymorphic and agnostic using Box foundation.
  */
 export declare const Slider: {
-    ({ value: controlledValue, defaultValue, min, max, step, disabled, color, onValueChange, className, style, ref, ...props }: SliderProps & {
-        ref?: Ref<HTMLDivElement>;
-    }): import("react/jsx-runtime").JSX.Element;
+    <E extends ElementType = "div">({ value: controlledValue, defaultValue, min, max, step, disabled, color, onValueChange, className, style, as, ...props }: SliderProps<E>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Slider.d.ts.map

package/dist/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,GAAG,EAKT,MAAM,OAAO,CAAC;AAIf,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,QAAQ,EACR,UAAU,GAAG,OAAO,GAAG,cAAc,CACtC;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,MAAM;gIAahB,WAAW,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;KAAE;;CAuF7C,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAIjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,IAAI,CAC3D,QAAQ,CAAC,CAAC,CAAC,EACX,UAAU,GAAG,OAAO,GAAG,cAAc,CACtC,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,oIAazC,WAAW,CAAC,CAAC,CAAC;;CAkFhB,CAAC"}

package/dist/index.js

@@ -1,152 +1,142 @@
-import { jsx as T, jsxs as D } from "react/jsx-runtime";
-import { useState as F, useRef as U, useCallback as W } from "react";
-function A(e) {
-  var i, r, t = "";
-  if (typeof e == "string" || typeof e == "number") t += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var s = e.length;
-    for (i = 0; i < s; i++) e[i] && (r = A(e[i])) && (t && (t += " "), t += r);
-  } else for (r in e) e[r] && (t && (t += " "), t += r);
+import { jsx as w, jsxs as E } from "react/jsx-runtime";
+import { useState as D, useRef as U, useCallback as W } from "react";
+function A(i) {
+  var e, a, t = "";
+  if (typeof i == "string" || typeof i == "number") t += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var s = i.length;
+    for (e = 0; e < s; e++) i[e] && (a = A(i[e])) && (t && (t += " "), t += a);
+  } else for (a in i) i[a] && (t && (t += " "), t += a);
   return t;
 }
-function q() {
-  for (var e, i, r = 0, t = "", s = arguments.length; r < s; r++) (e = arguments[r]) && (i = A(e)) && (t && (t += " "), t += i);
+function I() {
+  for (var i, e, a = 0, t = "", s = arguments.length; a < s; a++) (i = arguments[a]) && (e = A(i)) && (t && (t += " "), t += e);
   return t;
 }
-function B(e) {
-  var i, r, t = "";
-  if (typeof e == "string" || typeof e == "number") t += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var s = e.length;
-    for (i = 0; i < s; i++) e[i] && (r = B(e[i])) && (t && (t += " "), t += r);
-  } else for (r in e) e[r] && (t && (t += " "), t += r);
+function B(i) {
+  var e, a, t = "";
+  if (typeof i == "string" || typeof i == "number") t += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var s = i.length;
+    for (e = 0; e < s; e++) i[e] && (a = B(i[e])) && (t && (t += " "), t += a);
+  } else for (a in i) i[a] && (t && (t += " "), t += a);
   return t;
 }
-function I() {
-  for (var e, i, r = 0, t = "", s = arguments.length; r < s; r++) (e = arguments[r]) && (i = B(e)) && (t && (t += " "), t += i);
+function V() {
+  for (var i, e, a = 0, t = "", s = arguments.length; a < s; a++) (i = arguments[a]) && (e = B(i)) && (t && (t += " "), t += e);
   return t;
 }
-const E = ({
-  ref: e,
-  as: i = "div",
-  children: r,
-  display: t,
-  m: s,
-  mt: c,
-  mr: n,
-  mb: p,
-  ml: v,
-  p: g,
-  pt: y,
-  pr: b,
-  pb: $,
-  pl: w,
-  width: m,
-  height: u,
-  position: h,
-  style: x,
-  className: N,
-  href: L,
-  target: S,
-  rel: M,
-  htmlFor: l,
-  type: f,
-  name: d,
-  disabled: o,
-  ...j
+const S = ({
+  as: i,
+  children: e,
+  display: a,
+  m: t,
+  mt: s,
+  mr: p,
+  mb: n,
+  ml: c,
+  mx: u,
+  my: g,
+  p: b,
+  pt: $,
+  pr: x,
+  pb: N,
+  pl: f,
+  px: d,
+  py: m,
+  width: h,
+  height: y,
+  position: T,
+  style: M,
+  className: L,
+  disabled: P,
+  ...l
 }) => {
-  const a = {};
-  t && (a.display = t), m && (a.width = m), u && (a.height = u), h && (a.position = h), s && (a.margin = `var(--pittorica-space-${s})`), c && (a.marginTop = `var(--pittorica-space-${c})`), n && (a.marginRight = `var(--pittorica-space-${n})`), p && (a.marginBottom = `var(--pittorica-space-${p})`), v && (a.marginLeft = `var(--pittorica-space-${v})`), g && (a.padding = `var(--pittorica-space-${g})`), y && (a.paddingTop = `var(--pittorica-space-${y})`), b && (a.paddingRight = `var(--pittorica-space-${b})`), $ && (a.paddingBottom = `var(--pittorica-space-${$})`), w && (a.paddingLeft = `var(--pittorica-space-${w})`);
-  const P = {
-    ...x,
-    ...a
+  const v = i || "div", r = {};
+  a && (r.display = a), h && (r.width = h), y && (r.height = y), T && (r.position = T), t && (r.margin = `var(--pittorica-space-${t})`), s && (r.marginTop = `var(--pittorica-space-${s})`), p && (r.marginRight = `var(--pittorica-space-${p})`), n && (r.marginBottom = `var(--pittorica-space-${n})`), c && (r.marginLeft = `var(--pittorica-space-${c})`), u && (r.marginLeft = `var(--pittorica-space-${u})`, r.marginRight = `var(--pittorica-space-${u})`), g && (r.marginTop = `var(--pittorica-space-${g})`, r.marginBottom = `var(--pittorica-space-${g})`), b && (r.padding = `var(--pittorica-space-${b})`), $ && (r.paddingTop = `var(--pittorica-space-${$})`), x && (r.paddingRight = `var(--pittorica-space-${x})`), N && (r.paddingBottom = `var(--pittorica-space-${N})`), f && (r.paddingLeft = `var(--pittorica-space-${f})`), d && (r.paddingLeft = `var(--pittorica-space-${d})`, r.paddingRight = `var(--pittorica-space-${d})`), m && (r.paddingTop = `var(--pittorica-space-${m})`, r.paddingBottom = `var(--pittorica-space-${m})`);
+  const o = {
+    ...M,
+    ...r
   };
-  return /* @__PURE__ */ T(
-    i,
+  return /* @__PURE__ */ w(
+    v,
     {
-      ref: e,
-      className: I("pittorica-box", N),
-      style: P,
-      href: L,
-      target: S,
-      rel: M,
-      htmlFor: l,
-      type: f,
-      name: d,
-      disabled: o,
-      ...j,
-      children: r
+      className: V("pittorica-box", L),
+      style: o,
+      disabled: P,
+      ...l,
+      children: e
     }
   );
 };
-E.displayName = "Box";
-const V = ({
-  value: e,
-  defaultValue: i = 0,
-  min: r = 0,
+S.displayName = "Box";
+const X = ({
+  value: i,
+  defaultValue: e = 0,
+  min: a = 0,
   max: t = 100,
   step: s = 1,
-  disabled: c = !1,
+  disabled: p = !1,
   color: n = "indigo",
-  onValueChange: p,
-  className: v,
+  onValueChange: c,
+  className: u,
   style: g,
-  ref: y,
-  ...b
+  as: b,
+  ...$
 }) => {
-  const [$, w] = F(i), m = U(null), u = e !== void 0, h = u ? e : $, x = (h - r) / (t - r) * 100, N = W(
-    (l, f) => {
-      const d = m.current || f;
-      if (!d) return;
-      const o = d.getBoundingClientRect();
+  const [x, N] = D(e), f = U(null), d = i !== void 0, m = d ? i : x, h = (m - a) / (t - a) * 100, y = W(
+    (l, v) => {
+      const r = f.current || v;
+      if (!r) return;
+      const o = r.getBoundingClientRect();
       if (!o || o.width <= 0) return;
-      const P = Math.max(0, Math.min((typeof l == "number" ? l : 0) - (o.left || 0), o.width)) / o.width * (t - r) + r, k = Math.round(P / s) * s, R = Math.max(r, Math.min(t, k));
-      Number.isNaN(R) || (u || w(R), p == null || p(R));
+      const j = Math.max(0, Math.min((typeof l == "number" ? l : 0) - (o.left || 0), o.width)) / o.width * (t - a) + a, k = Math.round(j / s) * s, R = Math.max(a, Math.min(t, k));
+      Number.isNaN(R) || (d || N(R), c == null || c(R));
     },
-    [t, r, s, u, p]
-  ), L = (l) => {
-    if (c) return;
-    N(l.clientX, l.currentTarget);
-    const f = (o) => N(o.clientX), d = () => {
-      globalThis.removeEventListener("pointermove", f), globalThis.removeEventListener("pointerup", d);
+    [t, a, s, d, c]
+  ), T = (l) => {
+    if (p) return;
+    y(l.clientX, l.currentTarget);
+    const v = (o) => y(o.clientX), r = () => {
+      globalThis.removeEventListener("pointermove", v), globalThis.removeEventListener("pointerup", r);
     };
-    globalThis.addEventListener("pointermove", f), globalThis.addEventListener("pointerup", d);
-  }, M = n !== "inherit" && !(n != null && n.startsWith("#")) && !(n != null && n.startsWith("rgb")) ? `var(--pittorica-${n}-9)` : n;
-  return /* @__PURE__ */ D(
-    E,
+    globalThis.addEventListener("pointermove", v), globalThis.addEventListener("pointerup", r);
+  }, L = n !== "inherit" && !(n != null && n.startsWith("#")) && !(n != null && n.startsWith("rgb")) ? `var(--pittorica-${n}-9)` : n;
+  return /* @__PURE__ */ E(
+    S,
     {
-      ...b,
-      ref: y,
-      className: q("pittorica-slider-root", v),
-      "data-disabled": c,
-      onPointerDown: L,
-      style: { "--pittorica-source-color": M, ...g },
+      as: b || "div",
+      className: I("pittorica-slider-root", u),
+      "data-disabled": p,
+      onPointerDown: T,
+      style: { "--pittorica-source-color": L, ...g },
+      ...$,
       children: [
-        /* @__PURE__ */ T("div", { className: "pittorica-slider-track", ref: m, children: /* @__PURE__ */ T(
+        /* @__PURE__ */ w("div", { className: "pittorica-slider-track", ref: f, children: /* @__PURE__ */ w(
           "div",
           {
             className: "pittorica-slider-range",
-            style: { width: `${x}%` }
+            style: { width: `${h}%` }
           }
         ) }),
-        /* @__PURE__ */ T(
+        /* @__PURE__ */ w(
           "div",
           {
             role: "slider",
-            "aria-valuemin": r,
+            "aria-valuemin": a,
             "aria-valuemax": t,
-            "aria-valuenow": h,
-            "aria-disabled": c,
-            tabIndex: c ? -1 : 0,
+            "aria-valuenow": m,
+            "aria-disabled": p,
+            tabIndex: p ? -1 : 0,
             className: "pittorica-slider-thumb",
-            style: { position: "absolute", left: `calc(${x}% - 8px)` }
+            style: { position: "absolute", left: `calc(${h}% - 8px)` }
           }
         )
       ]
     }
   );
 };
-V.displayName = "Slider";
+X.displayName = "Slider";
 export {
-  V as Slider
+  X as Slider
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pittorica/slider-react",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,8 +10,8 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "@pittorica/box-react": "0.24.0",
-    "@pittorica/text-react": "0.24.0"
+    "@pittorica/box-react": "0.25.0",
+    "@pittorica/text-react": "0.25.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -23,8 +23,8 @@
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
     "vitest": "^2.1.9",
-    "@pittorica/theme-react": "0.24.0",
-    "pittorica": "0.24.0"
+    "@pittorica/theme-react": "0.25.0",
+    "pittorica": "0.25.0"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -35,7 +35,6 @@
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.json",
     "clean": "rm -rf dist",
-    "dev": "vite",
     "test": "vitest run",
     "test:watch": "vitest"
   }