@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/Slider.tsx

@@ -5,25 +5,19 @@
  * Port of react-aria-components/src/Slider.tsx
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  splitProps,
-  useContext,
-  Show,
-} from 'solid-js';
+import { type JSX, createContext, createMemo, splitProps, useContext, Show } from "solid-js";
 import {
   createSlider,
   createFocusRing,
   createHover,
+  mergeProps,
   type AriaSliderProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createSliderState,
   type SliderState,
   type SliderOrientation,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -31,11 +25,8 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
+import { VisuallyHidden } from "./VisuallyHidden";
 
 export interface SliderRenderProps {
   /** Whether the slider is disabled. */
@@ -52,7 +43,7 @@ export interface SliderRenderProps {
   orientation: SliderOrientation;
 }
 
-export interface SliderProps extends Omit<AriaSliderProps, 'label'>, SlotProps {
+export interface SliderProps extends Omit<AriaSliderProps, "label">, SlotProps {
   /** The current value (controlled). */
   value?: number;
   /** The default value (uncontrolled). */
@@ -81,6 +72,8 @@ export interface SliderProps extends Omit<AriaSliderProps, 'label'>, SlotProps {
   class?: ClassNameOrFunction<SliderRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<SliderRenderProps>;
+  /** Ref for the slider root element. */
+  ref?: (el: HTMLDivElement) => void;
 }
 
 export interface SliderTrackRenderProps {
@@ -94,7 +87,8 @@ export interface SliderTrackRenderProps {
   orientation: SliderOrientation;
 }
 
-export interface SliderTrackProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children'> {
+export interface SliderTrackProps
+  extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
   /** The children of the track. */
   children?: RenderChildren<SliderTrackRenderProps>;
   /** The CSS className for the element. */
@@ -120,7 +114,8 @@ export interface SliderThumbRenderProps {
   valuePercent: number;
 }
 
-export interface SliderThumbProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children'> {
+export interface SliderThumbProps
+  extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
   /** The children of the thumb. */
   children?: RenderChildren<SliderThumbRenderProps>;
   /** The CSS className for the element. */
@@ -136,7 +131,8 @@ export interface SliderOutputRenderProps {
   formattedValue: string;
 }
 
-export interface SliderOutputProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLElement>, 'class' | 'style' | 'children'> {
+export interface SliderOutputProps
+  extends SlotProps, Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "style" | "children"> {
   /** The children of the output. */
   children?: RenderChildren<SliderOutputRenderProps>;
   /** The CSS className for the element. */
@@ -145,10 +141,6 @@ export interface SliderOutputProps extends SlotProps, Omit<JSX.HTMLAttributes<HT
   style?: StyleOrFunction<SliderOutputRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 interface SliderContextValue {
   state: SliderState;
   trackProps: JSX.HTMLAttributes<HTMLElement>;
@@ -157,6 +149,8 @@ interface SliderContextValue {
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
   trackRef: HTMLElement | undefined;
   setTrackRef: (el: HTMLElement) => void;
+  inputRef: HTMLInputElement | undefined;
+  setInputRef: (el: HTMLInputElement) => void;
 }
 
 export const SliderContext = createContext<SliderContextValue | null>(null);
@@ -164,22 +158,37 @@ export const SliderStateContext = SliderContext;
 export const SliderTrackContext = SliderContext;
 export const SliderOutputContext = SliderContext;
 
-// ============================================
-// COMPONENTS
-// ============================================
-
 /**
  * A slider allows users to select a value from a range.
  */
 export function Slider(props: SliderProps): JSX.Element {
   const [local, stateProps, ariaProps, rest] = splitProps(
     props,
-    ['class', 'style', 'slot'],
-    ['value', 'defaultValue', 'onChange', 'onChangeEnd', 'minValue', 'maxValue', 'step', 'orientation', 'locale', 'formatOptions'],
-    ['label', 'aria-label', 'aria-labelledby', 'aria-describedby', 'isDisabled', 'id']
+    ["class", "style", "slot", "ref"],
+    [
+      "value",
+      "defaultValue",
+      "onChange",
+      "onChangeEnd",
+      "minValue",
+      "maxValue",
+      "step",
+      "orientation",
+      "locale",
+      "formatOptions",
+    ],
+    [
+      "label",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "isDisabled",
+      "id",
+      "name",
+      "form",
+    ],
   );
 
-  // Create slider state
   const state = createSliderState({
     get value() {
       return stateProps.value;
@@ -216,23 +225,22 @@ export function Slider(props: SliderProps): JSX.Element {
     },
   });
 
-  // Track ref for pointer handling
   let trackRef: HTMLElement | undefined;
   const setTrackRef = (el: HTMLElement) => {
     trackRef = el;
   };
+  let inputRef: HTMLInputElement | undefined;
+  const setInputRef = (el: HTMLInputElement) => {
+    inputRef = el;
+  };
+
+  const sliderAria = createSlider(
+    ariaProps,
+    state,
+    () => trackRef ?? null,
+    () => inputRef ?? null,
+  );
 
-  // Create slider aria props
-  const {
-    labelProps,
-    groupProps,
-    trackProps,
-    thumbProps,
-    inputProps,
-    outputProps,
-  } = createSlider(ariaProps, state, () => trackRef ?? null);
-
-  // Render props values
   const renderValues = createMemo<SliderRenderProps>(() => ({
     isDisabled: state.isDisabled,
     isDragging: state.isDragging(),
@@ -242,23 +250,48 @@ export function Slider(props: SliderProps): JSX.Element {
     orientation: state.orientation,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Slider',
+      defaultClassName: "solidaria-Slider",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
-  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+  const childRenderValues: SliderRenderProps = {
+    get isDisabled() {
+      return state.isDisabled;
+    },
+    get isDragging() {
+      return state.isDragging();
+    },
+    get isFocused() {
+      return state.isFocused();
+    },
+    get value() {
+      return state.value();
+    },
+    get valuePercent() {
+      return state.getValuePercent();
+    },
+    get orientation() {
+      return state.orientation;
+    },
+  };
+
+  const sliderChildren = () => {
+    const children = props.children;
+    return typeof children === "function" ? children(childRenderValues) : children;
+  };
+
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
 
-  // Clean props helpers
   const cleanGroupProps = () => {
-    const { ref: _ref, ...rest } = groupProps as Record<string, unknown>;
+    const { ref: _ref, ...rest } = sliderAria.groupProps as Record<string, unknown>;
     return rest;
   };
 
@@ -266,32 +299,43 @@ export function Slider(props: SliderProps): JSX.Element {
     <SliderContext.Provider
       value={{
         state,
-        trackProps,
-        thumbProps,
-        outputProps,
-        inputProps,
-        trackRef,
+        get trackProps() {
+          return sliderAria.trackProps;
+        },
+        get thumbProps() {
+          return sliderAria.thumbProps;
+        },
+        get outputProps() {
+          return sliderAria.outputProps;
+        },
+        get inputProps() {
+          return sliderAria.inputProps;
+        },
+        get trackRef() {
+          return trackRef;
+        },
         setTrackRef,
+        get inputRef() {
+          return inputRef;
+        },
+        setInputRef,
       }}
     >
       <div
         {...domProps()}
         {...cleanGroupProps()}
+        ref={local.ref}
         class={renderProps.class()}
         style={renderProps.style()}
         data-disabled={state.isDisabled || undefined}
         data-orientation={state.orientation}
         data-dragging={state.isDragging() || undefined}
       >
-        {/* Label */}
         <Show when={ariaProps.label}>
-          <span {...labelProps}>{ariaProps.label}</span>
+          <span {...sliderAria.labelProps}>{ariaProps.label}</span>
         </Show>
 
-        {renderProps.renderChildren()}
-
-        {/* Hidden input for form submission */}
-        <input {...inputProps} />
+        {sliderChildren()}
       </div>
     </SliderContext.Provider>
   );
@@ -301,16 +345,15 @@ export function Slider(props: SliderProps): JSX.Element {
  * The track element of a slider.
  */
 export function SliderTrack(props: SliderTrackProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
 
   const context = useContext(SliderContext);
   if (!context) {
-    throw new Error('SliderTrack must be used within a Slider');
+    throw new Error("SliderTrack must be used within a Slider");
   }
 
-  const { state, trackProps, setTrackRef } = context;
+  const { state, setTrackRef } = context;
 
-  // Render props values
   const renderValues = createMemo<SliderTrackRenderProps>(() => ({
     isDisabled: state.isDisabled,
     isDragging: state.isDragging(),
@@ -318,26 +361,23 @@ export function SliderTrack(props: SliderTrackProps): JSX.Element {
     orientation: state.orientation,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Slider-track',
+      defaultClassName: "solidaria-Slider-track",
     },
-    renderValues
+    renderValues,
   );
 
-  // Clean props
   const cleanTrackProps = () => {
-    const { ref: _ref, style: trackStyle, ...rest } = trackProps as Record<string, unknown>;
+    const { ref: _ref, style: trackStyle, ...rest } = context.trackProps as Record<string, unknown>;
     return rest;
   };
 
-  // Merge styles
   const mergedStyle = () => {
-    const trackStyle = (trackProps as { style?: Record<string, string> }).style || {};
+    const trackStyle = (context.trackProps as { style?: Record<string, string> }).style || {};
     const renderStyle = renderProps.style() || {};
     return { ...trackStyle, ...renderStyle };
   };
@@ -362,26 +402,23 @@ export function SliderTrack(props: SliderTrackProps): JSX.Element {
  * The thumb element of a slider.
  */
 export function SliderThumb(props: SliderThumbProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
 
   const context = useContext(SliderContext);
   if (!context) {
-    throw new Error('SliderFill must be used within a Slider');
+    throw new Error("SliderThumb must be used within a Slider");
   }
 
-  const { state, thumbProps } = context;
+  const { state, setInputRef } = context;
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return state.isDisabled;
     },
   });
 
-  // Render props values
   const renderValues = createMemo<SliderThumbRenderProps>(() => ({
     isDisabled: state.isDisabled,
     isDragging: state.isDragging(),
@@ -392,20 +429,18 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
     valuePercent: state.getValuePercent(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Slider-thumb',
+      defaultClassName: "solidaria-Slider-thumb",
     },
-    renderValues
+    renderValues,
   );
 
-  // Clean props
   const cleanThumbProps = () => {
-    const { ref: _ref, style: thumbStyle, ...rest } = thumbProps as Record<string, unknown>;
+    const { ref: _ref, style: thumbStyle, ...rest } = context.thumbProps as Record<string, unknown>;
     return rest;
   };
   const cleanFocusProps = () => {
@@ -417,27 +452,37 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
     return rest;
   };
 
-  // Merge styles
   const mergedStyle = () => {
-    const thumbStyle = (thumbProps as { style?: Record<string, string> }).style || {};
+    const thumbStyle = (context.thumbProps as { style?: Record<string, string> }).style || {};
     const renderStyle = renderProps.style() || {};
     return { ...thumbStyle, ...renderStyle };
   };
+  const cleanInputProps = () => {
+    const { ref: _ref, ...rest } = context.inputProps as Record<string, unknown>;
+    return rest;
+  };
+  const mergedInputProps = () =>
+    mergeProps(
+      cleanInputProps() as Record<string, unknown>,
+      cleanFocusProps() as Record<string, unknown>,
+    ) as JSX.InputHTMLAttributes<HTMLInputElement>;
 
   return (
     <div
       {...domProps}
       {...cleanThumbProps()}
-      {...cleanFocusProps()}
       {...cleanHoverProps()}
       class={renderProps.class()}
       style={mergedStyle()}
       data-disabled={state.isDisabled || undefined}
       data-dragging={state.isDragging() || undefined}
-      data-focused={isFocused() || undefined}
+      data-focused={isFocused() || state.isFocused() || undefined}
       data-focus-visible={isFocusVisible() || undefined}
       data-hovered={isHovered() || undefined}
     >
+      <VisuallyHidden>
+        <input ref={setInputRef} {...mergedInputProps()} />
+      </VisuallyHidden>
       {renderProps.renderChildren()}
     </div>
   );
@@ -447,43 +492,39 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
  * The output element of a slider, displaying the current value.
  */
 export function SliderOutput(props: SliderOutputProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
 
   const context = useContext(SliderContext);
   if (!context) {
-    throw new Error('SliderThumb must be used within a Slider');
+    throw new Error("SliderOutput must be used within a Slider");
   }
 
-  const { state, outputProps } = context;
+  const { state } = context;
 
-  // Render props values
   const renderValues = createMemo<SliderOutputRenderProps>(() => ({
     value: state.value(),
     formattedValue: state.getFormattedValue(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Slider-output',
+      defaultClassName: "solidaria-Slider-output",
     },
-    renderValues
+    renderValues,
   );
 
-  // Clean props
   const cleanDomProps = () => {
     const { ref: _ref, ...rest } = domProps as Record<string, unknown>;
     return rest;
   };
   const cleanOutputProps = () => {
-    const { ref: _ref, ...rest } = outputProps as Record<string, unknown>;
+    const { ref: _ref, ...rest } = context.outputProps as Record<string, unknown>;
     return rest;
   };
 
-  // Default children shows formatted value
   const renderedChildren = () => {
     // Check if raw children prop exists before calling renderChildren
     if (renderProps.children === undefined || renderProps.children === null) {
@@ -504,7 +545,6 @@ export function SliderOutput(props: SliderOutputProps): JSX.Element {
   );
 }
 
-// Attach sub-components
 Slider.Track = SliderTrack;
 Slider.Thumb = SliderThumb;
 Slider.Output = SliderOutput;