@pittorica/slider-react 0.24.0 → 0.26.0

package/README.md

@@ -4,16 +4,32 @@ The `Slider` component.
 
 ## Installation
 
-```bash
+\`\`\`bash
 npm install @pittorica/slider-react
-```
+\`\`\`
 
 ## Usage
 
-```jsx
+\`\`\`jsx
 import { Slider } from '@pittorica/slider-react';
-// TODO: Add usage example
-```
+
+function MyForm() {
+return (
+
+<form>
+<Slider
+min={0}
+max={100}
+defaultValue={50}
+color="source" // Default color is now 'source'
+required // Mark as required
+label="Volume"
+/>
+<button type="submit">Submit</button>
+</form>
+);
+}
+\`\`\`
 
 ## License
 

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,14 @@ export interface SliderProps extends Omit<BoxProps, 'onChange' | 'value' | 'defa
     disabled?: boolean;
     color?: PittoricaColor;
     onValueChange?: (value: number) => void;
-}
+    required?: boolean;
+};
 /**
  * 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, required, 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;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,8IAczC,WAAW,CAAC,CAAC,CAAC;;CAoFhB,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export type { SliderProps } from './Slider.js';
-export { Slider } from './Slider.js';
+export * from './Slider.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -1,152 +1,147 @@
-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 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 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 = B(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 j(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 = j(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 = j(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 k = ({
+  as: i,
+  children: e,
+  display: a,
+  m: t,
+  mt: s,
+  mr: p,
+  mb: n,
+  ml: c,
+  mx: u,
+  my: f,
+  p: $,
+  pt: b,
+  pr: x,
+  pb: N,
+  pl: T,
+  px: m,
+  py: d,
+  width: g,
+  height: h,
+  position: y,
+  style: L,
+  className: P,
+  disabled: R,
+  required: S,
+  ...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), g && (r.width = g), h && (r.height = h), y && (r.position = y), 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})`), f && (r.marginTop = `var(--pittorica-space-${f})`, r.marginBottom = `var(--pittorica-space-${f})`), $ && (r.padding = `var(--pittorica-space-${$})`), b && (r.paddingTop = `var(--pittorica-space-${b})`), x && (r.paddingRight = `var(--pittorica-space-${x})`), N && (r.paddingBottom = `var(--pittorica-space-${N})`), T && (r.paddingLeft = `var(--pittorica-space-${T})`), m && (r.paddingLeft = `var(--pittorica-space-${m})`, r.paddingRight = `var(--pittorica-space-${m})`), d && (r.paddingTop = `var(--pittorica-space-${d})`, r.paddingBottom = `var(--pittorica-space-${d})`);
+  const o = {
+    ...L,
+    ...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", P),
+      style: o,
+      disabled: R,
+      required: S,
+      ...l,
+      children: e
     }
   );
 };
-E.displayName = "Box";
-const V = ({
-  value: e,
-  defaultValue: i = 0,
-  min: r = 0,
+k.displayName = "Box";
+const X = ({
+  value: i,
+  defaultValue: e = 0,
+  min: a = 0,
   max: t = 100,
   step: s = 1,
-  disabled: c = !1,
-  color: n = "indigo",
-  onValueChange: p,
-  className: v,
-  style: g,
-  ref: y,
-  ...b
+  disabled: p = !1,
+  color: n = "source",
+  onValueChange: c,
+  required: u = !1,
+  className: f,
+  style: $,
+  as: b,
+  ...x
 }) => {
-  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 [N, T] = D(e), m = U(null), d = i !== void 0, g = d ? i : N, h = (g - a) / (t - a) * 100, y = W(
+    (l, v) => {
+      const r = m.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 q = Math.max(0, Math.min((typeof l == "number" ? l : 0) - (o.left || 0), o.width)) / o.width * (t - a) + a, A = Math.round(q / s) * s, M = Math.max(a, Math.min(t, A));
+      Number.isNaN(M) || (d || T(M), c == null || c(M));
     },
-    [t, r, s, u, p]
+    [t, a, s, d, c]
   ), 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);
+    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);
+  }, R = n !== "inherit" && !(n != null && n.startsWith("#")) && !(n != null && n.startsWith("rgb")) ? `var(--pittorica-${n}-9)` : n;
+  return /* @__PURE__ */ E(
+    k,
     {
-      ...b,
-      ref: y,
-      className: q("pittorica-slider-root", v),
-      "data-disabled": c,
+      as: b || "div",
+      className: I("pittorica-slider-root", f),
+      "data-disabled": p,
       onPointerDown: L,
-      style: { "--pittorica-source-color": M, ...g },
+      "aria-required": u,
+      style: { "--pittorica-source-color": R, ...$ },
+      ...x,
       children: [
-        /* @__PURE__ */ T("div", { className: "pittorica-slider-track", ref: m, children: /* @__PURE__ */ T(
+        /* @__PURE__ */ w("div", { className: "pittorica-slider-track", ref: m, 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": g,
+            "aria-disabled": p,
+            "aria-required": u,
+            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,7 @@
 {
   "name": "@pittorica/slider-react",
-  "version": "0.24.0",
+  "version": "0.26.0",
+  "homepage": "https://pittorica.dcdavidev.me",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,8 +11,8 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "@pittorica/box-react": "0.24.0",
-    "@pittorica/text-react": "0.24.0"
+    "@pittorica/box-react": "0.26.0",
+    "@pittorica/text-react": "0.26.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -21,10 +22,10 @@
     "@vitejs/plugin-react": "^4.0.0",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.1.9",
-    "@pittorica/theme-react": "0.24.0",
-    "pittorica": "0.24.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "pittorica": "0.26.0",
+    "@pittorica/theme-react": "0.26.0"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -34,8 +35,7 @@
     "build": "npm run clean && npm run build:js && npm run build:types",
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
-    "dev": "vite",
+    "clean": "rm -rf dist *.tsbuildinfo",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/dist/Slider.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Slider } from './Slider';
-declare const meta: Meta<typeof Slider>;
-export default meta;
-export declare const Basic: StoryObj<typeof Slider>;
-export declare const Stepped: StoryObj<typeof Slider>;
-//# sourceMappingURL=Slider.stories.d.ts.map

package/dist/Slider.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../src/Slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAI7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,MAAM,CAKzC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAO3C,CAAC"}

package/dist/Slider.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import '@testing-library/jest-dom';
-//# sourceMappingURL=Slider.test.d.ts.map

package/dist/Slider.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.test.d.ts","sourceRoot":"","sources":["../src/Slider.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}