@ladder-ui/slider 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ivan Avila
+
+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/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider, type SliderProps, type SliderOrientation } from './slider';
+export { Slider as default } from './slider';

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@ladder-ui/core/concatClassNames"),a=require("@ladder-ui/core");function n(e,r,t){return Math.min(Math.max(e,r),t)}function i({ref:i,className:l,value:u,defaultValue:s=[0],min:o=0,max:c=100,step:d=1,orientation:m="horizontal",disabled:b=!1,onValueChange:h,onValueCommit:f,thumbLabels:p,"aria-label":g,...v}){c<=o&&a.devWarn("slider-max",`\`max\` must be > \`min\`. Received max=${c}, min=${o}`),d<=0&&a.devWarn("slider-step",`\`step\` must be > 0. Received: ${d}`);const k=void 0!==u,[x,C]=r.useState(()=>k?u:s),w=k?u:x,$=r.useRef(null),_=r.useRef(null),y=r.useRef(null),N=r.useRef(w);N.current=w;const P=r.useCallback(e=>{$.current=e,i&&("function"==typeof i?i(e):i.current=e)},[i]),R=r.useCallback(()=>{if("horizontal"!==m||!$.current)return!1;try{return"rtl"===window.getComputedStyle($.current).direction}catch{return!1}},[m]),j=r.useCallback((e,r)=>{const t=_.current;if(!t)return o;const a=t.getBoundingClientRect();if(0===("vertical"===m?a.height:a.width))return NaN;let i;return"vertical"===m?i=1-(r-a.top)/a.height:(i=(e-a.left)/a.width,R()&&(i=1-i)),o+n(i,0,1)*(c-o)},[o,c,m,R]),D=r.useCallback((e,r,t=!1)=>{if(isNaN(r))return;const a=function(e,r,t){const a=Math.round((e-r)/t);return parseFloat((r+a*t).toFixed(10))}(r,o,d),i=n(a,e>0?w[e-1]:o,e<w.length-1?w[e+1]:c),l=w.map((r,t)=>t===e?i:r);k||C(l),h?.(l),t&&f?.(l)},[w,o,c,d,k,h,f]),M=r.useCallback(e=>{let r=0,t=1/0;return w.forEach((a,n)=>{const i=Math.abs(a-e);i<t&&(t=i,r=n)}),r},[w]),q=r.useCallback(e=>{if(b)return;const r=j(e.clientX,e.clientY),t=M(r);y.current=t,D(t,r);try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}},[b,j,M,D]),A=r.useCallback(e=>{if(null===y.current||b)return;const r=j(e.clientX,e.clientY);D(y.current,r)},[b,j,D]),S=r.useCallback(e=>{null!==y.current&&(f?.(N.current),y.current=null)},[f]),V=r.useCallback((e,r)=>{if(b)return;const t=w[r];let a;switch(e.key){case"ArrowRight":case"ArrowUp":a=t+d;break;case"ArrowLeft":case"ArrowDown":a=t-d;break;case"Home":a=o;break;case"End":a=c;break;case"PageUp":a=t+10*d;break;case"PageDown":a=t-10*d;break;default:return}e.preventDefault(),D(r,a,!0)},[b,w,d,o,c,D]),z="horizontal"===m,I=e=>(e-o)/(c-o)*100,U=[...w].sort((e,r)=>e-r),E=w.length>1?I(U[0]):0,F=I(U[U.length-1])-E;return e.jsxs("div",{ref:P,role:"group","data-slot":"slider","data-orientation":m,"data-disabled":b||void 0,"aria-label":g,className:t("lui-slider",`lui-slider--${m}`,b&&"lui-slider--disabled",l),onPointerDown:q,onPointerMove:A,onPointerUp:S,onPointerCancel:S,...v,children:[e.jsx("div",{ref:_,"data-slot":"slider-track",className:"lui-slider__track",children:e.jsx("div",{"data-slot":"slider-range",className:"lui-slider__range",style:z?{"--_range-start":`${E}%`,"--_range-width":`${F}%`}:{"--_range-bottom":`${E}%`,"--_range-height":`${F}%`}})}),w.map((r,t)=>{const a=p?.[t]??function(e,r,t){if(1===r)return t??"Value";if(2===r){const r=0===e?", minimum":", maximum";return t?`${t}${r}`:r.slice(2)}return t?`${t} ${e+1}`:`Thumb ${e+1}`}(t,w.length,g);return e.jsx("div",{"data-slot":"slider-thumb",role:"slider",tabIndex:b?-1:0,"aria-valuemin":o,"aria-valuemax":c,"aria-valuenow":r,"aria-orientation":m,"aria-disabled":b||void 0,"aria-label":a,className:"lui-slider__thumb",style:z?{"--_thumb-pos":`${I(r)}%`}:{"--_thumb-bottom":`${I(r)}%`},onKeyDown:e=>V(e,t),onPointerDown:e=>{if(e.stopPropagation(),!b){y.current=t;try{$.current?.setPointerCapture(e.pointerId)}catch{}}}},t)})]})}i.displayName="Slider",exports.Slider=i,exports.default=i;

package/dist/index.mjs

@@ -0,0 +1 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useRef as a,useCallback as n}from"react";import i from"@ladder-ui/core/concatClassNames";import{devWarn as o}from"@ladder-ui/core";function l(e,r,t){return Math.min(Math.max(e,r),t)}function u({ref:u,className:s,value:c,defaultValue:d=[0],min:m=0,max:h=100,step:f=1,orientation:p="horizontal",disabled:b=!1,onValueChange:g,onValueCommit:v,thumbLabels:w,"aria-label":$,..._}){h<=m&&o("slider-max",`\`max\` must be > \`min\`. Received max=${h}, min=${m}`),f<=0&&o("slider-step",`\`step\` must be > 0. Received: ${f}`);const x=void 0!==c,[N,y]=t(()=>x?c:d),P=x?c:N,k=a(null),C=a(null),D=a(null),M=a(P);M.current=P;const A=n(e=>{k.current=e,u&&("function"==typeof u?u(e):u.current=e)},[u]),R=n(()=>{if("horizontal"!==p||!k.current)return!1;try{return"rtl"===window.getComputedStyle(k.current).direction}catch{return!1}},[p]),V=n((e,r)=>{const t=C.current;if(!t)return m;const a=t.getBoundingClientRect();if(0===("vertical"===p?a.height:a.width))return NaN;let n;return"vertical"===p?n=1-(r-a.top)/a.height:(n=(e-a.left)/a.width,R()&&(n=1-n)),m+l(n,0,1)*(h-m)},[m,h,p,R]),z=n((e,r,t=!1)=>{if(isNaN(r))return;const a=function(e,r,t){const a=Math.round((e-r)/t);return parseFloat((r+a*t).toFixed(10))}(r,m,f),n=l(a,e>0?P[e-1]:m,e<P.length-1?P[e+1]:h),i=P.map((r,t)=>t===e?n:r);x||y(i),g?.(i),t&&v?.(i)},[P,m,h,f,x,g,v]),I=n(e=>{let r=0,t=1/0;return P.forEach((a,n)=>{const i=Math.abs(a-e);i<t&&(t=i,r=n)}),r},[P]),U=n(e=>{if(b)return;const r=V(e.clientX,e.clientY),t=I(r);D.current=t,z(t,r);try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}},[b,V,I,z]),E=n(e=>{if(null===D.current||b)return;const r=V(e.clientX,e.clientY);z(D.current,r)},[b,V,z]),F=n(e=>{null!==D.current&&(v?.(M.current),D.current=null)},[v]),L=n((e,r)=>{if(b)return;const t=P[r];let a;switch(e.key){case"ArrowRight":case"ArrowUp":a=t+f;break;case"ArrowLeft":case"ArrowDown":a=t-f;break;case"Home":a=m;break;case"End":a=h;break;case"PageUp":a=t+10*f;break;case"PageDown":a=t-10*f;break;default:return}e.preventDefault(),z(r,a,!0)},[b,P,f,m,h,z]),S="horizontal"===p,T=e=>(e-m)/(h-m)*100,X=[...P].sort((e,r)=>e-r),Y=P.length>1?T(X[0]):0,j=T(X[X.length-1])-Y;return e("div",{ref:A,role:"group","data-slot":"slider","data-orientation":p,"data-disabled":b||void 0,"aria-label":$,className:i("lui-slider",`lui-slider--${p}`,b&&"lui-slider--disabled",s),onPointerDown:U,onPointerMove:E,onPointerUp:F,onPointerCancel:F,..._,children:[r("div",{ref:C,"data-slot":"slider-track",className:"lui-slider__track",children:r("div",{"data-slot":"slider-range",className:"lui-slider__range",style:S?{"--_range-start":`${Y}%`,"--_range-width":`${j}%`}:{"--_range-bottom":`${Y}%`,"--_range-height":`${j}%`}})}),P.map((e,t)=>{const a=w?.[t]??function(e,r,t){if(1===r)return t??"Value";if(2===r){const r=0===e?", minimum":", maximum";return t?`${t}${r}`:r.slice(2)}return t?`${t} ${e+1}`:`Thumb ${e+1}`}(t,P.length,$);return r("div",{"data-slot":"slider-thumb",role:"slider",tabIndex:b?-1:0,"aria-valuemin":m,"aria-valuemax":h,"aria-valuenow":e,"aria-orientation":p,"aria-disabled":b||void 0,"aria-label":a,className:"lui-slider__thumb",style:S?{"--_thumb-pos":`${T(e)}%`}:{"--_thumb-bottom":`${T(e)}%`},onKeyDown:e=>L(e,t),onPointerDown:e=>{if(e.stopPropagation(),!b){D.current=t;try{k.current?.setPointerCapture(e.pointerId)}catch{}}}},t)})]})}u.displayName="Slider";export{u as Slider,u as default};

package/dist/slider.css

@@ -0,0 +1 @@
+@layer components{.lui-slider{align-items:center;cursor:pointer;display:flex;font-family:var(--lui-font-family);position:relative;touch-action:none;user-select:none}.lui-slider--horizontal{height:var(--lui-slider-thumb-size);width:100%}.lui-slider--vertical{flex-direction:column;justify-content:center;min-height:var(--lui-slider-vertical-size);width:var(--lui-slider-thumb-size)}.lui-slider--disabled{cursor:not-allowed;opacity:var(--lui-disabled-opacity);pointer-events:none}.lui-slider__track{background-color:var(--lui-slider-track-bg);border-radius:var(--lui-slider-track-radius);flex-shrink:0;position:relative}.lui-slider--horizontal .lui-slider__track{flex-grow:1;height:var(--lui-slider-track-size);width:100%}.lui-slider--vertical .lui-slider__track{flex-grow:1;height:100%;width:var(--lui-slider-track-size)}.lui-slider__range{background-color:var(--lui-slider-range-bg);border-radius:var(--lui-slider-range-radius);position:absolute}.lui-slider--horizontal .lui-slider__range{height:100%;inset-inline-start:var(--_range-start,0);top:0;width:var(--_range-width,0)}.lui-slider--vertical .lui-slider__range{bottom:var(--_range-bottom,0);height:var(--_range-height,0);inset-inline-start:0;width:100%}.lui-slider__thumb{background-color:var(--lui-slider-thumb-bg);border:var(--lui-slider-thumb-border-width) solid var(--lui-slider-thumb-border-color);border-radius:50%;box-shadow:var(--lui-slider-thumb-shadow);cursor:grab;height:var(--lui-slider-thumb-size);position:absolute;transition:box-shadow var(--lui-transition),background-color var(--lui-transition);width:var(--lui-slider-thumb-size)}.lui-slider__thumb:hover{box-shadow:var(--lui-slider-thumb-hover-shadow)}.lui-slider__thumb:active{cursor:grabbing}.lui-slider__thumb:focus-visible{box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-border-interactive);outline:none}@media (prefers-reduced-motion:reduce){.lui-slider__thumb{transition:none}}.lui-slider--horizontal .lui-slider__thumb{inset-inline-start:var(--_thumb-pos,0);top:50%;transform:translateX(-50%) translateY(-50%)}[dir=rtl] .lui-slider--horizontal .lui-slider__thumb{transform:translateX(50%) translateY(-50%)}.lui-slider--vertical .lui-slider__thumb{bottom:var(--_thumb-bottom,0);inset-inline-start:50%;transform:translateX(-50%) translateY(50%)}[dir=rtl] .lui-slider--vertical .lui-slider__thumb{transform:translateX(50%) translateY(50%)}.lui-slider--disabled .lui-slider__thumb{background-color:var(--lui-bg-surface-raised);border-color:var(--lui-border-default);cursor:not-allowed}}

package/dist/slider.d.ts

@@ -0,0 +1,34 @@
+import type { Ref } from "react";
+export type SliderOrientation = "horizontal" | "vertical";
+export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    ref?: Ref<HTMLDivElement>;
+    /** Controlled value array. Each entry corresponds to one thumb. */
+    value?: number[];
+    /** Initial values for uncontrolled usage. Defaults to [0]. */
+    defaultValue?: number[];
+    /** Minimum selectable value. Default: 0. */
+    min?: number;
+    /** Maximum selectable value. Default: 100. */
+    max?: number;
+    /** Step increment between values. Default: 1. */
+    step?: number;
+    /** Slider orientation. Default: "horizontal". */
+    orientation?: SliderOrientation;
+    /** Disables all slider interaction. */
+    disabled?: boolean;
+    /** Called continuously as any thumb value changes during interaction. */
+    onValueChange?: (value: number[]) => void;
+    /** Called once when interaction ends (pointer up or keyboard commit). */
+    onValueCommit?: (value: number[]) => void;
+    /**
+     * Accessible labels for each thumb, in order. When not provided the component
+     * auto-derives labels from `aria-label` (e.g. "Volume", "Volume, minimum",
+     * "Volume, maximum" for range sliders). Always supply this prop when your
+     * slider has no visible label.
+     */
+    thumbLabels?: string[];
+}
+export declare function Slider({ ref: consumerRef, className, value: controlledValue, defaultValue, min, max, step, orientation, disabled, onValueChange, onValueCommit, thumbLabels, "aria-label": ariaLabel, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Slider {
+    var displayName: string;
+}

package/dist/slider.vars.css

@@ -0,0 +1 @@
+:root{--lui-slider-track-size:0.375rem;--lui-slider-track-bg:var(--lui-border-default);--lui-slider-track-radius:9999px;--lui-slider-range-bg:var(--lui-bg-interactive);--lui-slider-range-radius:9999px;--lui-slider-thumb-size:1.25rem;--lui-slider-thumb-bg:var(--lui-bg-surface);--lui-slider-thumb-border-width:2px;--lui-slider-thumb-border-color:var(--lui-bg-interactive);--lui-slider-thumb-shadow:0 1px 3px 0 rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.04);--lui-slider-thumb-hover-shadow:0 2px 8px 0 rgba(0,0,0,.22);--lui-slider-vertical-size:12rem}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@ladder-ui/slider",
+  "version": "0.10.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*.css": "./dist/*.css",
+    "./styles/*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "nodejs",
+    "react",
+    "ui",
+    "components",
+    "library"
+  ],
+  "author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/slider"
+  },
+  "bugs": {
+    "url": "https://github.com/ivelaval/ladder-ui/issues"
+  },
+  "homepage": "https://github.com/ivelaval/ladder-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^19.0.0",
+    "rollup": "^4.9.6",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.90.0",
+    "typescript": "^5.3.3",
+    "tslib": "^2.6.2",
+    "@ladder-ui/core": "0.10.0"
+  },
+  "peerDependencies": {
+    "@ladder-ui/core": ">=0.0.1",
+    "react": ">=18.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm clean && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}