@pittorica/slider-react 0.25.0 → 0.26.1

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

@@ -10,13 +10,14 @@ export type SliderProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'onCh
     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: {
-    <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;
+    <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,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"}
+{"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,32 +1,32 @@
 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) {
+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 = A(i[e])) && (t && (t += " "), t += a);
+    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 i, e, a = 0, t = "", s = arguments.length; a < s; a++) (i = arguments[a]) && (e = A(i)) && (t && (t += " "), t += e);
+  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(i) {
+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 = B(i[e])) && (t && (t += " "), t += a);
+    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 V() {
-  for (var i, e, a = 0, t = "", s = arguments.length; a < s; a++) (i = arguments[a]) && (e = B(i)) && (t && (t += " "), t += e);
+  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 S = ({
+const k = ({
   as: i,
   children: e,
   display: a,
@@ -36,40 +36,42 @@ const S = ({
   mb: n,
   ml: c,
   mx: u,
-  my: g,
-  p: b,
-  pt: $,
+  my: f,
+  p: $,
+  pt: b,
   pr: x,
   pb: N,
-  pl: f,
-  px: d,
-  py: m,
-  width: h,
-  height: y,
-  position: T,
-  style: M,
-  className: L,
-  disabled: P,
+  pl: T,
+  px: m,
+  py: d,
+  width: g,
+  height: h,
+  position: y,
+  style: L,
+  className: P,
+  disabled: R,
+  required: S,
   ...l
 }) => {
   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})`);
+  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 = {
-    ...M,
+    ...L,
     ...r
   };
   return /* @__PURE__ */ w(
     v,
     {
-      className: V("pittorica-box", L),
+      className: V("pittorica-box", P),
       style: o,
-      disabled: P,
+      disabled: R,
+      required: S,
       ...l,
       children: e
     }
   );
 };
-S.displayName = "Box";
+k.displayName = "Box";
 const X = ({
   value: i,
   defaultValue: e = 0,
@@ -77,42 +79,44 @@ const X = ({
   max: t = 100,
   step: s = 1,
   disabled: p = !1,
-  color: n = "indigo",
+  color: n = "source",
   onValueChange: c,
-  className: u,
-  style: g,
+  required: u = !1,
+  className: f,
+  style: $,
   as: b,
-  ...$
+  ...x
 }) => {
-  const [x, N] = D(e), f = U(null), d = i !== void 0, m = d ? i : x, h = (m - a) / (t - a) * 100, y = W(
+  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 = f.current || v;
+      const r = m.current || v;
       if (!r) return;
       const o = r.getBoundingClientRect();
       if (!o || o.width <= 0) return;
-      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));
+      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, a, s, d, c]
-  ), T = (l) => {
+  ), L = (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", v), globalThis.addEventListener("pointerup", r);
-  }, L = n !== "inherit" && !(n != null && n.startsWith("#")) && !(n != null && n.startsWith("rgb")) ? `var(--pittorica-${n}-9)` : n;
+  }, R = n !== "inherit" && !(n != null && n.startsWith("#")) && !(n != null && n.startsWith("rgb")) ? `var(--pittorica-${n}-9)` : n;
   return /* @__PURE__ */ E(
-    S,
+    k,
     {
       as: b || "div",
-      className: I("pittorica-slider-root", u),
+      className: I("pittorica-slider-root", f),
       "data-disabled": p,
-      onPointerDown: T,
-      style: { "--pittorica-source-color": L, ...g },
-      ...$,
+      onPointerDown: L,
+      "aria-required": u,
+      style: { "--pittorica-source-color": R, ...$ },
+      ...x,
       children: [
-        /* @__PURE__ */ w("div", { className: "pittorica-slider-track", ref: f, children: /* @__PURE__ */ w(
+        /* @__PURE__ */ w("div", { className: "pittorica-slider-track", ref: m, children: /* @__PURE__ */ w(
           "div",
           {
             className: "pittorica-slider-range",
@@ -125,8 +129,9 @@ const X = ({
             role: "slider",
             "aria-valuemin": a,
             "aria-valuemax": t,
-            "aria-valuenow": m,
+            "aria-valuenow": g,
             "aria-disabled": p,
+            "aria-required": u,
             tabIndex: p ? -1 : 0,
             className: "pittorica-slider-thumb",
             style: { position: "absolute", left: `calc(${h}% - 8px)` }

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pittorica/slider-react",
-  "version": "0.25.0",
+  "version": "0.26.1",
+  "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.25.0",
-    "@pittorica/text-react": "0.25.0"
+    "@pittorica/box-react": "0.26.1",
+    "@pittorica/text-react": "0.26.1"
   },
   "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.25.0",
-    "pittorica": "0.25.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "@pittorica/theme-react": "0.26.1",
+    "pittorica": "0.26.1"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -34,7 +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",
+    "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"}