@vesture/react 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, ReactNode, HTMLAttributes, ReactElement, MutableRefObject, AnchorHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, ReactNode, HTMLAttributes, ReactElement, MutableRefObject, AnchorHTMLAttributes, CSSProperties } from 'react';
 import { Placement } from '@floating-ui/react';
 export { defaultThemeClass, defaultThemeVars, vars } from '@vesture/tokens';
 
@@ -424,6 +424,7 @@ interface NumberInputProps {
     id?: string;
     name?: string;
     className?: string;
+    style?: CSSProperties;
     "aria-label"?: string;
     "aria-labelledby"?: string;
 }
@@ -438,14 +439,16 @@ interface SliderProps {
     max?: number;
     step?: number;
     disabled?: boolean;
+    id?: string;
     className?: string;
+    style?: CSSProperties;
     /** Label for the single thumb, or the [start, end] thumbs in range mode. */
     "aria-label"?: string | [string, string];
     /** Formats the value shown to assistive tech and in the value label, e.g. `(v) => \`$\${v}\`` */
     formatValue?: (value: number) => string;
 }
 
-declare function Slider({ value: controlledValue, defaultValue, onChange, min, max, step, disabled, className, formatValue, ...rest }: SliderProps): ReactElement;
+declare function Slider({ value: controlledValue, defaultValue, onChange, min, max, step, disabled, id, className, style, formatValue, ...rest }: SliderProps): ReactElement;
 
 interface ComboboxOption {
     value: string;

package/dist/index.js

@@ -2654,6 +2654,7 @@ var NumberInput = forwardRef14(function NumberInput2({
   id,
   name,
   className,
+  style,
   ...rest
 }, ref) {
   const [uncontrolledValue, setUncontrolledValue] = useState12(defaultValue);
@@ -2725,7 +2726,7 @@ var NumberInput = forwardRef14(function NumberInput2({
     commitTypedValue();
   };
   const classes = [wrapper8, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs21("span", { className: classes, "data-disabled": disabled || void 0, children: [
+  return /* @__PURE__ */ jsxs21("span", { className: classes, style, "data-disabled": disabled || void 0, children: [
     /* @__PURE__ */ jsx38(
       "input",
       {
@@ -2808,7 +2809,9 @@ function Slider({
   max = 100,
   step = 1,
   disabled = false,
+  id,
   className,
+  style,
   formatValue: formatValue2 = (v) => String(v),
   ...rest
 }) {
@@ -2822,6 +2825,7 @@ function Slider({
     onChange?.(next);
   };
   const trackRef = useRef7(null);
+  const thumbRefs = useRef7({ single: null, 0: null, 1: null });
   const dragThumbIndex = useRef7(null);
   const isDragging = useRef7(false);
   const valueFromClientX = (clientX) => {
@@ -2857,6 +2861,7 @@ function Slider({
   const startDrag = (index) => (event) => {
     if (disabled) return;
     event.preventDefault();
+    thumbRefs.current[index ?? "single"]?.focus();
     isDragging.current = true;
     dragThumbIndex.current = index;
     setThumbValue(index, valueFromClientX(event.clientX));
@@ -2908,6 +2913,9 @@ function Slider({
   const renderThumb = (index, current2, label3) => /* @__PURE__ */ jsx39(
     "span",
     {
+      ref: (node) => {
+        thumbRefs.current[index ?? "single"] = node;
+      },
       role: "slider",
       tabIndex: disabled ? -1 : 0,
       "aria-label": label3,
@@ -2927,7 +2935,7 @@ function Slider({
     index ?? "single"
   );
   const classes = [root3, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx39("span", { className: classes, "data-disabled": disabled || void 0, children: /* @__PURE__ */ jsxs22("span", { ref: trackRef, className: track3, onPointerDown: handleTrackPointerDown, children: [
+  return /* @__PURE__ */ jsx39("span", { id, className: classes, style, "data-disabled": disabled || void 0, children: /* @__PURE__ */ jsxs22("span", { ref: trackRef, className: track3, onPointerDown: handleTrackPointerDown, children: [
     isRange(value) ? /* @__PURE__ */ jsx39(
       "span",
       {