@jamsrui/slider 0.0.16 → 0.0.17

package/dist/index.d.mts

@@ -1,6 +1,39 @@
-export { Slider } from './slider.mjs';
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Slider as Slider$1 } from './slider.mjs';
+import { SliderControl } from './slider-control.mjs';
+import { SliderTrack } from './slider-track.mjs';
+import { SliderIndicator } from './slider-indicator.mjs';
+import { SliderThumb } from './slider-thumb.mjs';
+import { SliderValue } from './slider-value.mjs';
+export { SliderSlots, SliderVariants, slider } from './styles.mjs';
+export { useSliderContext } from './slider-context.mjs';
 export { SliderConfig, useSliderConfig } from './slider-config.mjs';
-import 'react';
 import '@jamsrui/utils';
-import 'react/jsx-runtime';
+import './use-slider.mjs';
 import '@jamsrui/core';
+
+declare const Slider: ((props: Slider$1.Props) => react_jsx_runtime.JSX.Element) & {
+    Root: (props: Slider$1.Props) => react_jsx_runtime.JSX.Element;
+    Control: (props: SliderControl.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    Track: (props: SliderTrack.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    Indicator: (props: SliderIndicator.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    Thumb: (props: SliderThumb.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+    Value: (props: SliderValue.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+};
+declare namespace Slider {
+    interface Props extends Slider$1.Props {
+    }
+    interface ControlProps extends SliderControl.Props {
+    }
+    interface TrackProps extends SliderTrack.Props {
+    }
+    interface IndicatorProps extends SliderIndicator.Props {
+    }
+    interface ThumbProps extends SliderThumb.Props {
+    }
+    interface ValueProps extends SliderValue.Props {
+    }
+}
+
+export { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack, SliderValue };

package/dist/index.mjs

@@ -1 +1 @@
-"use client";import{Slider as i}from"./slider.mjs";import{SliderConfig as f,useSliderConfig as l}from"./slider-config.mjs";export{i as Slider,f as SliderConfig,l as useSliderConfig};
+import{Slider as r}from"./slider.mjs";import{SliderControl as e}from"./slider-control.mjs";import{SliderTrack as o}from"./slider-track.mjs";import{SliderIndicator as t}from"./slider-indicator.mjs";import{SliderThumb as i}from"./slider-thumb.mjs";import{SliderValue as p}from"./slider-value.mjs";import{slider as d}from"./styles.mjs";import{useSliderContext as l}from"./slider-context.mjs";import{SliderConfig as s,useSliderConfig as n}from"./slider-config.mjs";const C=Object.assign(r,{Root:r,Control:e,Track:o,Indicator:t,Thumb:i,Value:p});export{C as Slider,s as SliderConfig,e as SliderControl,t as SliderIndicator,i as SliderThumb,o as SliderTrack,p as SliderValue,d as slider,n as useSliderConfig,l as useSliderContext};

package/dist/slider-config.d.mts

@@ -1,8 +1,10 @@
-import { Slider } from './slider.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { GlobalConfigProps } from '@jamsrui/core';
-import 'react';
+import { WithGlobalConfig } from '@jamsrui/core';
+import { Slider } from './slider.mjs';
 import '@jamsrui/utils';
+import './use-slider.mjs';
+import 'react';
+import './styles.mjs';
 
 declare const useSliderConfig: () => Record<string, any>;
 declare const SliderConfig: (props: Omit<Partial<Record<string, any>>, "children"> & {
@@ -10,7 +12,7 @@ declare const SliderConfig: (props: Omit<Partial<Record<string, any>>, "children
     children: React.ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 declare namespace SliderConfig {
-    interface Props extends Slider.Props, GlobalConfigProps<Slider.Props> {
+    interface Props extends WithGlobalConfig<Slider.Props> {
     }
 }
 

package/dist/slider-config.mjs

@@ -1 +1 @@
-import{createConfigContext as o}from"@jamsrui/utils";const[e,i]=o({displayName:"SliderConfig"});export{e as SliderConfig,i as useSliderConfig};
+"use client";import{createConfigContext as e}from"@jamsrui/utils";const[o,r]=e({displayName:"SliderConfig"});export{o as SliderConfig,r as useSliderConfig};

package/dist/slider-context.d.mts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+
+type SliderContextValue = {
+    values: number[];
+    min: number;
+    max: number;
+    step: number;
+    orientation: "horizontal" | "vertical";
+    isDisabled: boolean;
+    minStepsBetweenThumbs: number;
+    registerThumb: (index: number, ref: React.RefObject<HTMLDivElement>) => void;
+    handleThumbPointerDown: (index: number, event: React.PointerEvent) => void;
+    getPercentageForValue: (value: number) => number;
+    onTrackPointerDown: (event: React.PointerEvent) => void;
+    trackRef: React.RefObject<HTMLDivElement | null>;
+};
+declare const SliderContext: react.Context<SliderContextValue | null>;
+declare const useSliderContext: () => SliderContextValue;
+
+export { SliderContext, type SliderContextValue, useSliderContext };

package/dist/slider-context.mjs

@@ -0,0 +1 @@
+"use client";import{createContext as t,useContext as n}from"react";const r=t(null),i=()=>{const e=n(r);if(!e)throw new Error("useSliderContext must be used within a Slider");return e};export{r as SliderContext,i as useSliderContext};

package/dist/slider-control.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const SliderControl: (props: SliderControl.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace SliderControl {
+    interface Props extends UIProps<"div"> {
+    }
+}
+
+export { SliderControl };

package/dist/slider-control.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as d}from"@jamsrui/hooks";import{useSliderContext as m}from"./slider-context.mjs";import{slider as c}from"./styles.mjs";const C=e=>{const{render:r,children:o,className:t,...s}=e,{orientation:n,isDisabled:i}=m(),{control:l}=c({orientation:n,isDisabled:i}),p=l({className:t});return d("div",{props:{...s,children:o,className:p,render:r}})};export{C as SliderControl};

package/dist/slider-indicator.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const SliderIndicator: (props: SliderIndicator.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace SliderIndicator {
+    interface Props extends UIProps<"div"> {
+    }
+}
+
+export { SliderIndicator };

package/dist/slider-indicator.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as $}from"@jamsrui/hooks";import{useSliderContext as b}from"./slider-context.mjs";import{slider as v}from"./styles.mjs";const U=h=>{const{render:f,children:g,className:x,...l}=h,{orientation:o,isDisabled:u,values:e,getPercentageForValue:n,min:a,max:P}=b(),{indicator:y}=v({orientation:o,isDisabled:u}),I=y({className:x});let c=0,s=0,d=0,i=0;if(e.length===1){const t=n(e[0]??a);o==="horizontal"?s=t:i=t}else if(e.length>1){const t=n(e[0]??a),m=n(e[e.length-1]??P),r=Math.min(t,m),p=Math.max(t,m);o==="horizontal"?(c=r,s=p-r):(d=r,i=p-r)}const S=o==="horizontal"?{left:`${c}%`,width:`${s}%`}:{bottom:`${d}%`,height:`${i}%`};return $("div",{props:{...l,children:g,className:I,style:{...l.style,...S},render:f}})};export{U as SliderIndicator};

package/dist/slider-thumb.d.mts

@@ -0,0 +1,11 @@
+import { UIProps } from '@jamsrui/utils';
+import react__default from 'react';
+
+declare const SliderThumb: (props: SliderThumb.Props) => react__default.ReactElement<unknown, string | react__default.JSXElementConstructor<any>>;
+declare namespace SliderThumb {
+    interface Props extends UIProps<"div"> {
+        index?: number;
+    }
+}
+
+export { SliderThumb };

package/dist/slider-thumb.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as v}from"@jamsrui/hooks";import{useRef as y,useLayoutEffect as S}from"react";import{useSliderContext as T}from"./slider-context.mjs";import{slider as E}from"./styles.mjs";const N=l=>{const{render:m,children:d,className:u,index:e=0,...o}=l,{orientation:t,isDisabled:r,values:c,getPercentageForValue:p,registerThumb:n,handleThumbPointerDown:f}=T(),{thumb:b}=E({orientation:t,isDisabled:r}),h=b({className:u}),s=y(null);S(()=>{n(e,s)},[e,n]);const i=c[e]??0,a=p(i),P=t==="horizontal"?{left:`${a}%`,transform:"translateX(-50%)",position:"absolute"}:{bottom:`${a}%`,transform:"translateY(50%)",position:"absolute"};return v("div",{props:{...o,children:d,className:h,ref:s,style:{...o.style,...P},onPointerDown:x=>f(e,x),tabIndex:r?void 0:0,role:"slider","aria-valuenow":i,"aria-disabled":r,"aria-orientation":t,render:m}})};export{N as SliderThumb};

package/dist/slider-track.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const SliderTrack: (props: SliderTrack.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace SliderTrack {
+    interface Props extends UIProps<"div"> {
+    }
+}
+
+export { SliderTrack };

package/dist/slider-track.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as l}from"@jamsrui/hooks";import{useSliderContext as m}from"./slider-context.mjs";import{slider as f}from"./styles.mjs";const T=e=>{const{render:r,children:o,className:t,...n}=e,{orientation:s,isDisabled:i,onTrackPointerDown:c,trackRef:p}=m(),{track:a}=f({orientation:s,isDisabled:i}),d=a({className:t});return l("div",{props:{...n,children:o,className:d,onPointerDown:c,ref:p,render:r}})};export{T as SliderTrack};

package/dist/slider-value.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const SliderValue: (props: SliderValue.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace SliderValue {
+    interface Props extends Omit<UIProps<"div">, "children"> {
+        children?: React.ReactNode | ((values: number[]) => React.ReactNode);
+    }
+}
+
+export { SliderValue };

package/dist/slider-value.mjs

@@ -0,0 +1 @@
+"use client";import{useRenderElement as p}from"@jamsrui/hooks";import{useSliderContext as m}from"./slider-context.mjs";import{slider as u}from"./styles.mjs";const P=o=>{const{render:n,children:e,className:s,...i}=o,{values:t,orientation:l,isDisabled:a}=m(),{value:c}=u({orientation:l,isDisabled:a}),d=c({className:s});let r;return typeof e=="function"?r=e(t):e?r=e:r=t.join(" - "),p("div",{props:{...i,children:r,className:d,render:n}})};export{P as SliderValue};

package/dist/slider.d.mts

@@ -1,9 +1,12 @@
-import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UIProps } from '@jamsrui/utils';
+import { UseSliderProps } from './use-slider.mjs';
+import { SliderVariants } from './styles.mjs';
+import 'react';
 
-declare const Slider: (props: Slider.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare const Slider: (props: Slider.Props) => react_jsx_runtime.JSX.Element;
 declare namespace Slider {
-    interface Props extends UIProps<"div"> {
+    interface Props extends Omit<UIProps<"div">, "onChange" | "defaultValue">, SliderVariants, UseSliderProps {
     }
 }
 

package/dist/slider.mjs

@@ -1 +1 @@
-import{useRenderElement as t}from"@jamsrui/hooks";const s=e=>{const{render:o,...r}=e;return t("div",{props:r})};export{s as Slider};
+"use client";import{jsx as R}from"react/jsx-runtime";import{useRenderElement as b}from"@jamsrui/hooks";import{SliderContext as h}from"./slider-context.mjs";import{useSlider as C}from"./use-slider.mjs";import{slider as U}from"./styles.mjs";const V=o=>{const{render:i,children:s,className:n,defaultValue:a,value:d,onChange:l,min:m,max:p,step:c,orientation:r,isDisabled:t,minStepsBetweenThumbs:u,name:S,...f}=o,e=C({defaultValue:a,value:d,onChange:l,min:m,max:p,step:c,orientation:r,isDisabled:t,minStepsBetweenThumbs:u,name:S}),{root:P}=U({orientation:r,isDisabled:t}),x=P({className:n}),v=b("div",{props:{...f,children:s,className:x,"data-orientation":e.orientation,"data-disabled":e.isDisabled?"":void 0,render:i}});return R(h.Provider,{value:e,children:v})},T=V;export{T as Slider};

package/dist/styles.d.mts

@@ -1,2 +1,83 @@
+import * as _jamsrui_utils from '@jamsrui/utils';
+import { VariantProps } from '@jamsrui/utils';
 
-export {  }
+declare const slider: _jamsrui_utils.TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            control: string;
+        };
+        vertical: {
+            control: string;
+            root: string;
+            track: string;
+            indicator: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string;
+    value: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+            control: string;
+        };
+        vertical: {
+            control: string;
+            root: string;
+            track: string;
+            indicator: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string;
+    value: string;
+}, _jamsrui_utils.TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            control: string;
+        };
+        vertical: {
+            control: string;
+            root: string;
+            track: string;
+            indicator: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;
+type SliderVariants = VariantProps<typeof slider>;
+type SliderSlots = keyof ReturnType<typeof slider>;
+
+export { type SliderSlots, type SliderVariants, slider };

package/dist/styles.mjs

@@ -0,0 +1 @@
+import{tv as o}from"@jamsrui/utils";const e=o({slots:{root:"relative flex touch-none select-none items-center",control:"flex items-center",track:"relative h-5 w-full grow overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800",indicator:"absolute h-full bg-primary",thumb:"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",value:"text-sm"},variants:{orientation:{horizontal:{root:"w-full",control:"w-full"},vertical:{control:"h-full",root:"h-full flex-col",track:"h-full w-5",indicator:"w-full bottom-0"}},isDisabled:{true:{root:"opacity-50 cursor-not-allowed"}}},defaultVariants:{orientation:"horizontal"}});export{e as slider};

package/dist/use-slider.d.mts

@@ -1,7 +1,30 @@
-declare const useSlider: (props: useSlider.Props) => void;
-declare namespace useSlider {
-    interface Props {
-    }
+import react__default from 'react';
+
+interface UseSliderProps {
+    value?: number | number[];
+    defaultValue?: number | number[];
+    onChange?: (value: number | number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: "horizontal" | "vertical";
+    isDisabled?: boolean;
+    minStepsBetweenThumbs?: number;
+    name?: string;
 }
+declare const useSlider: (props: UseSliderProps) => {
+    values: number[];
+    min: number;
+    max: number;
+    step: number;
+    orientation: "horizontal" | "vertical";
+    isDisabled: boolean;
+    minStepsBetweenThumbs: number;
+    trackRef: react__default.RefObject<HTMLDivElement | null>;
+    registerThumb: (index: number, ref: react__default.RefObject<HTMLDivElement>) => void;
+    handleThumbPointerDown: (index: number, event: react__default.PointerEvent) => void;
+    onTrackPointerDown: (event: react__default.PointerEvent) => void;
+    getPercentageForValue: (val: number) => number;
+};
 
-export { useSlider };
+export { type UseSliderProps, useSlider };

package/dist/use-slider.mjs

@@ -1 +1 @@
-const r=e=>{};export{r as useSlider};
+"use client";import{useControlledState as A}from"@jamsrui/hooks";import{useCallback as d,useRef as D,useState as U}from"react";const C=(w,c,l)=>Math.min(Math.max(w,c),l),O=w=>{const{value:c,defaultValue:l,onChange:R,min:o=0,max:m=100,step:f=1,orientation:E="horizontal",isDisabled:p=!1,minStepsBetweenThumbs:S=0}=w,[g,L]=A({prop:c===void 0?void 0:Array.isArray(c)?c:[c],defaultProp:l===void 0?[o]:Array.isArray(l)?l:[l],onChange:n=>{R&&R(n)}}),M=D(null),T=D([]),V=d((n,r)=>{T.current[n]=r},[]),v=d(n=>{const r=M.current;if(!r)return o;const e=r.getBoundingClientRect(),t=E==="vertical",a=t?e.height:e.width,i=t?n.clientY:n.clientX,u=t?e.top:e.left;let s=(i-u)/a;t&&(s=1-s),s=C(s,0,1);const P=o+s*(m-o),y=Math.round((P-o)/f)*f+o;return C(y,o,m)},[o,m,f,E]),b=d((n,r)=>{L(e=>{if(!e)return[n];const t=[...e];return t[r]=n,t.sort((a,i)=>a-i),t})},[L]),[B,h]=U(null),x=d((n,r)=>{if(p)return;r.preventDefault(),r.stopPropagation();const e=T.current[n]?.current;e&&(e.setPointerCapture(r.pointerId),e.focus()),h(n);const t=i=>{const u=v(i);b(u,n)},a=i=>{e&&e.releasePointerCapture(i.pointerId),h(null),window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",a)};window.addEventListener("pointermove",t),window.addEventListener("pointerup",a)},[p,v,b]),k=d(n=>{if(p)return;const r=v(n);let e=0,t=1/0;g.forEach((u,s)=>{const P=Math.abs(u-r);P<t&&(t=P,e=s)}),b(r,e),h(e);const a=u=>{const s=v(u);b(s,e)},i=()=>{h(null),window.removeEventListener("pointermove",a),window.removeEventListener("pointerup",i)};window.addEventListener("pointermove",a),window.addEventListener("pointerup",i)},[p,v,g,b]),I=d(n=>(n-o)/(m-o)*100,[o,m]);return{values:g,min:o,max:m,step:f,orientation:E,isDisabled:p,minStepsBetweenThumbs:S,trackRef:M,registerThumb:V,handleThumbPointerDown:x,onTrackPointerDown:k,getPercentageForValue:I}};export{O as useSlider};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jamsrui/slider",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "peerDependencies": {
     "react": ">=19"
   },
   "dependencies": {
-    "@jamsrui/hooks": "^0.0.16",
-    "@jamsrui/core": "^0.0.13",
-    "@jamsrui/utils": "^0.0.16"
+    "@jamsrui/hooks": "^0.0.17",
+    "@jamsrui/core": "^0.0.14",
+    "@jamsrui/utils": "^0.0.17"
   },
   "exports": {
     ".": {