@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Slider.jsx

@@ -0,0 +1,403 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { VisuallyHidden } from "./VisuallyHidden.jsx";
+import { Show, createContext, createMemo, splitProps, useContext } from "solid-js";
+import { createFocusRing, createHover, createSlider, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { createSliderState } from "@proyecto-viviana/solid-stately";
+//#region src/Slider.tsx
+/**
+* Slider component for solidaria-components
+*
+* A pre-wired headless slider that combines state + aria hooks.
+* Port of react-aria-components/src/Slider.tsx
+*/
+const SliderContext = createContext(null);
+const SliderStateContext = SliderContext;
+const SliderTrackContext = SliderContext;
+const SliderFillContext = SliderContext;
+const SliderOutputContext = SliderContext;
+/**
+* A slider allows users to select a value from a range.
+*/
+function Slider(props) {
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"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"
+	]);
+	const state = createSliderState({
+		get value() {
+			return stateProps.value;
+		},
+		get defaultValue() {
+			return stateProps.defaultValue;
+		},
+		get onChange() {
+			return stateProps.onChange;
+		},
+		get onChangeEnd() {
+			return stateProps.onChangeEnd;
+		},
+		get minValue() {
+			return stateProps.minValue;
+		},
+		get maxValue() {
+			return stateProps.maxValue;
+		},
+		get step() {
+			return stateProps.step;
+		},
+		get orientation() {
+			return stateProps.orientation;
+		},
+		get locale() {
+			return stateProps.locale;
+		},
+		get formatOptions() {
+			return stateProps.formatOptions;
+		},
+		get isDisabled() {
+			return ariaProps.isDisabled;
+		}
+	});
+	let trackRef;
+	const setTrackRef = (el) => {
+		trackRef = el;
+	};
+	let inputRef;
+	const setInputRef = (el) => {
+		inputRef = el;
+	};
+	const sliderAria = createSlider(ariaProps, state, () => trackRef ?? null, () => inputRef ?? null);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging(),
+		isFocused: state.isFocused(),
+		value: state.value(),
+		valuePercent: state.getValuePercent(),
+		orientation: state.orientation
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Slider"
+	}, renderValues);
+	const childRenderValues = {
+		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, { global: true }));
+	const cleanGroupProps = () => {
+		const { ref: _ref, ...rest } = sliderAria.groupProps;
+		return rest;
+	};
+	return <SliderContext.Provider value={{
+		state,
+		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 || void 0} data-orientation={state.orientation} data-dragging={state.isDragging() || void 0}>
+        <Show when={ariaProps.label}>
+          <span {...sliderAria.labelProps}>{ariaProps.label}</span>
+        </Show>
+
+        {sliderChildren()}
+      </div>
+    </SliderContext.Provider>;
+}
+/**
+* The track element of a slider.
+*/
+function SliderTrack(props) {
+	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");
+	const { state, setTrackRef } = context;
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging(),
+		valuePercent: state.getValuePercent(),
+		orientation: state.orientation
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Slider-track"
+	}, renderValues);
+	const cleanTrackProps = () => {
+		const { ref: _ref, style: trackStyle, ...rest } = context.trackProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const trackStyle = context.trackProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...trackStyle,
+			...renderStyle
+		};
+	};
+	return <div {...domProps} ref={setTrackRef} {...cleanTrackProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-orientation={state.orientation} data-dragging={state.isDragging() || void 0}>
+      {renderProps.renderChildren()}
+    </div>;
+}
+/**
+* The thumb element of a slider.
+*/
+function SliderThumb(props) {
+	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");
+	const { state, setInputRef } = context;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging(),
+		isFocused: isFocused() || state.isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered(),
+		value: state.value(),
+		valuePercent: state.getValuePercent()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Slider-thumb"
+	}, renderValues);
+	const cleanThumbProps = () => {
+		const { ref: _ref, style: thumbStyle, ...rest } = context.thumbProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const thumbStyle = context.thumbProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...thumbStyle,
+			...renderStyle
+		};
+	};
+	const cleanInputProps = () => {
+		const { ref: _ref, ...rest } = context.inputProps;
+		return rest;
+	};
+	const mergedInputProps = () => mergeProps$1(cleanInputProps(), cleanFocusProps());
+	return <>
+      <VisuallyHidden>
+        <input ref={setInputRef} {...mergedInputProps()} />
+      </VisuallyHidden>
+      <div {...domProps} {...cleanThumbProps()} {...cleanHoverProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging() || void 0} data-focused={isFocused() || state.isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0}>
+        {renderProps.renderChildren()}
+      </div>
+    </>;
+}
+/** Clamp a value between min and max (mirror of upstream's number/clamp). */
+function clampFill(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/**
+* The fill element of a slider, displaying the selected range.
+*
+* Port of react-aria-components `SliderFill` (RAC 1.18). Upstream reads the
+* array-based `SliderState` (`values`/`getThumbPercent`); our `SliderState` is
+* single-value, so this fills from `offset` (default the slider's minValue, i.e.
+* 0%) to the current value — the single-thumb branch of upstream's math, using
+* the same `(v - min) / (max - min)` percent formula the state itself uses.
+*/
+function SliderFill(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"offset",
+		"children",
+		"onHoverStart",
+		"onHoverEnd",
+		"onHoverChange"
+	]);
+	const context = useContext(SliderContext);
+	if (!context) throw new Error("SliderFill must be used within a Slider");
+	const { state } = context;
+	const { isHovered, hoverProps } = createHover(() => ({
+		onHoverStart: local.onHoverStart,
+		onHoverEnd: local.onHoverEnd,
+		onHoverChange: local.onHoverChange
+	}));
+	const percentOf = (value) => {
+		const range = state.maxValue - state.minValue;
+		return range === 0 ? 0 : (value - state.minValue) / range * 100;
+	};
+	const offset = () => local.offset != null ? clampFill(local.offset, state.minValue, state.maxValue) : state.minValue;
+	const start = () => percentOf(offset());
+	const end = () => state.getValuePercent() * 100;
+	const startPercent = () => Math.min(start(), end());
+	const sizePercent = () => Math.max(0, Math.max(start(), end()) - startPercent());
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isHovered: isHovered(),
+		valuePercent: state.getValuePercent(),
+		orientation: state.orientation
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Slider-fill"
+	}, renderValues);
+	const mergedStyle = () => {
+		return {
+			...state.orientation === "vertical" ? {
+				position: "absolute",
+				bottom: `${startPercent()}%`,
+				height: `${sizePercent()}%`,
+				width: "100%"
+			} : {
+				position: "absolute",
+				"inset-inline-start": `${startPercent()}%`,
+				width: `${sizePercent()}%`,
+				height: "100%"
+			},
+			...renderProps.style() || {}
+		};
+	};
+	return <div {...domProps} {...hoverProps} class={renderProps.class()} style={mergedStyle()} data-hovered={isHovered() || void 0} data-disabled={state.isDisabled || void 0} data-orientation={state.orientation}>
+      {renderProps.renderChildren()}
+    </div>;
+}
+/**
+* The output element of a slider, displaying the current value.
+*/
+function SliderOutput(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(SliderContext);
+	if (!context) throw new Error("SliderOutput must be used within a Slider");
+	const { state } = context;
+	const renderValues = createMemo(() => ({
+		value: state.value(),
+		formattedValue: state.getFormattedValue()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Slider-output"
+	}, renderValues);
+	const cleanDomProps = () => {
+		const { ref: _ref, ...rest } = domProps;
+		return rest;
+	};
+	const cleanOutputProps = () => {
+		const { ref: _ref, ...rest } = context.outputProps;
+		return rest;
+	};
+	const renderedChildren = () => {
+		if (renderProps.children === void 0 || renderProps.children === null) return state.getFormattedValue();
+		return renderProps.renderChildren();
+	};
+	return <output {...cleanDomProps()} {...cleanOutputProps()} class={renderProps.class()} style={renderProps.style()}>
+      {renderedChildren()}
+    </output>;
+}
+Slider.Track = SliderTrack;
+Slider.Thumb = SliderThumb;
+Slider.Fill = SliderFill;
+Slider.Output = SliderOutput;
+//#endregion
+export { Slider, SliderContext, SliderFill, SliderFillContext, SliderOutput, SliderOutputContext, SliderStateContext, SliderThumb, SliderTrack, SliderTrackContext };
+
+//# sourceMappingURL=Slider.jsx.map

package/dist/Slider.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.jsx","names":["mergeProps"],"sources":["../src/Slider.tsx"],"sourcesContent":["/**\n * Slider component for solidaria-components\n *\n * A pre-wired headless slider that combines state + aria hooks.\n * Port of react-aria-components/src/Slider.tsx\n */\n\nimport { type JSX, createContext, createMemo, splitProps, useContext, Show } from \"solid-js\";\nimport {\n  createSlider,\n  createFocusRing,\n  createHover,\n  mergeProps,\n  type AriaSliderProps,\n  type HoverEvents,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createSliderState,\n  type SliderState,\n  type SliderOrientation,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { VisuallyHidden } from \"./VisuallyHidden\";\n\nexport interface SliderRenderProps {\n  /** Whether the slider is disabled. */\n  isDisabled: boolean;\n  /** Whether the slider is being dragged. */\n  isDragging: boolean;\n  /** Whether the slider is focused. */\n  isFocused: boolean;\n  /** The current value. */\n  value: number;\n  /** The value as a percent (0-1). */\n  valuePercent: number;\n  /** The orientation. */\n  orientation: SliderOrientation;\n}\n\nexport interface SliderProps extends Omit<AriaSliderProps, \"label\">, SlotProps {\n  /** The current value (controlled). */\n  value?: number;\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler called when the value changes. */\n  onChange?: (value: number) => void;\n  /** Handler called when dragging ends. */\n  onChangeEnd?: (value: number) => void;\n  /** The minimum value. */\n  minValue?: number;\n  /** The maximum value. */\n  maxValue?: number;\n  /** The step value. */\n  step?: number;\n  /** The orientation of the slider. */\n  orientation?: SliderOrientation;\n  /** The locale for number formatting. */\n  locale?: string;\n  /** Number format options. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** A visible label for the slider. */\n  label?: JSX.Element;\n  /** The children of the component. */\n  children?: RenderChildren<SliderRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<SliderRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<SliderRenderProps>;\n  /** Ref for the slider root element. */\n  ref?: (el: HTMLDivElement) => void;\n}\n\nexport interface SliderTrackRenderProps {\n  /** Whether the slider is disabled. */\n  isDisabled: boolean;\n  /** Whether the slider is being dragged. */\n  isDragging: boolean;\n  /** The value as a percent (0-1). */\n  valuePercent: number;\n  /** The orientation. */\n  orientation: SliderOrientation;\n}\n\nexport interface SliderTrackProps\n  extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n  /** The children of the track. */\n  children?: RenderChildren<SliderTrackRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<SliderTrackRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<SliderTrackRenderProps>;\n}\n\nexport interface SliderThumbRenderProps {\n  /** Whether the slider is disabled. */\n  isDisabled: boolean;\n  /** Whether the thumb is being dragged. */\n  isDragging: boolean;\n  /** Whether the thumb is focused. */\n  isFocused: boolean;\n  /** Whether the thumb has keyboard focus. */\n  isFocusVisible: boolean;\n  /** Whether the thumb is hovered. */\n  isHovered: boolean;\n  /** The current value. */\n  value: number;\n  /** The value as a percent (0-1). */\n  valuePercent: number;\n}\n\nexport interface SliderThumbProps\n  extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n  /** The children of the thumb. */\n  children?: RenderChildren<SliderThumbRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<SliderThumbRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<SliderThumbRenderProps>;\n}\n\nexport interface SliderFillRenderProps {\n  /** Whether the slider is disabled. */\n  isDisabled: boolean;\n  /** Whether the slider fill is currently hovered with a mouse. */\n  isHovered: boolean;\n  /** The value as a percent (0-1). */\n  valuePercent: number;\n  /** The orientation. */\n  orientation: SliderOrientation;\n}\n\nexport interface SliderFillProps\n  extends\n    SlotProps,\n    HoverEvents,\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n  /** The offset from which to start the fill. Defaults to the slider's minValue. */\n  offset?: number;\n  /** The children of the fill. */\n  children?: RenderChildren<SliderFillRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<SliderFillRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<SliderFillRenderProps>;\n}\n\nexport interface SliderOutputRenderProps {\n  /** The current value. */\n  value: number;\n  /** The formatted value string. */\n  formattedValue: string;\n}\n\nexport interface SliderOutputProps\n  extends SlotProps, Omit<JSX.HTMLAttributes<HTMLElement>, \"class\" | \"style\" | \"children\"> {\n  /** The children of the output. */\n  children?: RenderChildren<SliderOutputRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<SliderOutputRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<SliderOutputRenderProps>;\n}\n\ninterface SliderContextValue {\n  state: SliderState;\n  trackProps: JSX.HTMLAttributes<HTMLElement>;\n  thumbProps: JSX.HTMLAttributes<HTMLElement>;\n  outputProps: JSX.HTMLAttributes<HTMLElement>;\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n  trackRef: HTMLElement | undefined;\n  setTrackRef: (el: HTMLElement) => void;\n  inputRef: HTMLInputElement | undefined;\n  setInputRef: (el: HTMLInputElement) => void;\n}\n\nexport const SliderContext = createContext<SliderContextValue | null>(null);\nexport const SliderStateContext = SliderContext;\nexport const SliderTrackContext = SliderContext;\nexport const SliderFillContext = SliderContext;\nexport const SliderOutputContext = SliderContext;\n\n/**\n * A slider allows users to select a value from a range.\n */\nexport function Slider(props: SliderProps): JSX.Element {\n  const [local, stateProps, ariaProps, rest] = splitProps(\n    props,\n    [\"class\", \"style\", \"slot\", \"ref\"],\n    [\n      \"value\",\n      \"defaultValue\",\n      \"onChange\",\n      \"onChangeEnd\",\n      \"minValue\",\n      \"maxValue\",\n      \"step\",\n      \"orientation\",\n      \"locale\",\n      \"formatOptions\",\n    ],\n    [\n      \"label\",\n      \"aria-label\",\n      \"aria-labelledby\",\n      \"aria-describedby\",\n      \"isDisabled\",\n      \"id\",\n      \"name\",\n      \"form\",\n    ],\n  );\n\n  const state = createSliderState({\n    get value() {\n      return stateProps.value;\n    },\n    get defaultValue() {\n      return stateProps.defaultValue;\n    },\n    get onChange() {\n      return stateProps.onChange;\n    },\n    get onChangeEnd() {\n      return stateProps.onChangeEnd;\n    },\n    get minValue() {\n      return stateProps.minValue;\n    },\n    get maxValue() {\n      return stateProps.maxValue;\n    },\n    get step() {\n      return stateProps.step;\n    },\n    get orientation() {\n      return stateProps.orientation;\n    },\n    get locale() {\n      return stateProps.locale;\n    },\n    get formatOptions() {\n      return stateProps.formatOptions;\n    },\n    get isDisabled() {\n      return ariaProps.isDisabled;\n    },\n  });\n\n  let trackRef: HTMLElement | undefined;\n  const setTrackRef = (el: HTMLElement) => {\n    trackRef = el;\n  };\n  let inputRef: HTMLInputElement | undefined;\n  const setInputRef = (el: HTMLInputElement) => {\n    inputRef = el;\n  };\n\n  const sliderAria = createSlider(\n    ariaProps,\n    state,\n    () => trackRef ?? null,\n    () => inputRef ?? null,\n  );\n\n  const renderValues = createMemo<SliderRenderProps>(() => ({\n    isDisabled: state.isDisabled,\n    isDragging: state.isDragging(),\n    isFocused: state.isFocused(),\n    value: state.value(),\n    valuePercent: state.getValuePercent(),\n    orientation: state.orientation,\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Slider\",\n    },\n    renderValues,\n  );\n\n  const childRenderValues: SliderRenderProps = {\n    get isDisabled() {\n      return state.isDisabled;\n    },\n    get isDragging() {\n      return state.isDragging();\n    },\n    get isFocused() {\n      return state.isFocused();\n    },\n    get value() {\n      return state.value();\n    },\n    get valuePercent() {\n      return state.getValuePercent();\n    },\n    get orientation() {\n      return state.orientation;\n    },\n  };\n\n  const sliderChildren = () => {\n    const children = props.children;\n    return typeof children === \"function\" ? children(childRenderValues) : children;\n  };\n\n  const domProps = createMemo(() =>\n    filterDOMProps(rest as Record<string, unknown>, { global: true }),\n  );\n\n  const cleanGroupProps = () => {\n    const { ref: _ref, ...rest } = sliderAria.groupProps as Record<string, unknown>;\n    return rest;\n  };\n\n  return (\n    <SliderContext.Provider\n      value={{\n        state,\n        get trackProps() {\n          return sliderAria.trackProps;\n        },\n        get thumbProps() {\n          return sliderAria.thumbProps;\n        },\n        get outputProps() {\n          return sliderAria.outputProps;\n        },\n        get inputProps() {\n          return sliderAria.inputProps;\n        },\n        get trackRef() {\n          return trackRef;\n        },\n        setTrackRef,\n        get inputRef() {\n          return inputRef;\n        },\n        setInputRef,\n      }}\n    >\n      <div\n        {...domProps()}\n        {...cleanGroupProps()}\n        ref={local.ref}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-disabled={state.isDisabled || undefined}\n        data-orientation={state.orientation}\n        data-dragging={state.isDragging() || undefined}\n      >\n        <Show when={ariaProps.label}>\n          <span {...sliderAria.labelProps}>{ariaProps.label}</span>\n        </Show>\n\n        {sliderChildren()}\n      </div>\n    </SliderContext.Provider>\n  );\n}\n\n/**\n * The track element of a slider.\n */\nexport function SliderTrack(props: SliderTrackProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n  const context = useContext(SliderContext);\n  if (!context) {\n    throw new Error(\"SliderTrack must be used within a Slider\");\n  }\n\n  const { state, setTrackRef } = context;\n\n  const renderValues = createMemo<SliderTrackRenderProps>(() => ({\n    isDisabled: state.isDisabled,\n    isDragging: state.isDragging(),\n    valuePercent: state.getValuePercent(),\n    orientation: state.orientation,\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Slider-track\",\n    },\n    renderValues,\n  );\n\n  const cleanTrackProps = () => {\n    const { ref: _ref, style: trackStyle, ...rest } = context.trackProps as Record<string, unknown>;\n    return rest;\n  };\n\n  const mergedStyle = () => {\n    const trackStyle = (context.trackProps as { style?: Record<string, string> }).style || {};\n    const renderStyle = renderProps.style() || {};\n    return { ...trackStyle, ...renderStyle };\n  };\n\n  return (\n    <div\n      {...domProps}\n      ref={setTrackRef}\n      {...cleanTrackProps()}\n      class={renderProps.class()}\n      style={mergedStyle()}\n      data-disabled={state.isDisabled || undefined}\n      data-orientation={state.orientation}\n      data-dragging={state.isDragging() || undefined}\n    >\n      {renderProps.renderChildren()}\n    </div>\n  );\n}\n\n/**\n * The thumb element of a slider.\n */\nexport function SliderThumb(props: SliderThumbProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n  const context = useContext(SliderContext);\n  if (!context) {\n    throw new Error(\"SliderThumb must be used within a Slider\");\n  }\n\n  const { state, setInputRef } = context;\n\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return state.isDisabled;\n    },\n  });\n\n  const renderValues = createMemo<SliderThumbRenderProps>(() => ({\n    isDisabled: state.isDisabled,\n    isDragging: state.isDragging(),\n    isFocused: isFocused() || state.isFocused(),\n    isFocusVisible: isFocusVisible(),\n    isHovered: isHovered(),\n    value: state.value(),\n    valuePercent: state.getValuePercent(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Slider-thumb\",\n    },\n    renderValues,\n  );\n\n  const cleanThumbProps = () => {\n    const { ref: _ref, style: thumbStyle, ...rest } = context.thumbProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanFocusProps = () => {\n    const { ref: _ref, ...rest } = focusProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanHoverProps = () => {\n    const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;\n    return rest;\n  };\n\n  const mergedStyle = () => {\n    const thumbStyle = (context.thumbProps as { style?: Record<string, string> }).style || {};\n    const renderStyle = renderProps.style() || {};\n    return { ...thumbStyle, ...renderStyle };\n  };\n  const cleanInputProps = () => {\n    const { ref: _ref, ...rest } = context.inputProps as Record<string, unknown>;\n    return rest;\n  };\n  const mergedInputProps = () =>\n    mergeProps(\n      cleanInputProps() as Record<string, unknown>,\n      cleanFocusProps() as Record<string, unknown>,\n    ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n\n  return (\n    <>\n      <VisuallyHidden>\n        <input ref={setInputRef} {...mergedInputProps()} />\n      </VisuallyHidden>\n      <div\n        {...domProps}\n        {...cleanThumbProps()}\n        {...cleanHoverProps()}\n        class={renderProps.class()}\n        style={mergedStyle()}\n        data-disabled={state.isDisabled || undefined}\n        data-dragging={state.isDragging() || undefined}\n        data-focused={isFocused() || state.isFocused() || undefined}\n        data-focus-visible={isFocusVisible() || undefined}\n        data-hovered={isHovered() || undefined}\n      >\n        {renderProps.renderChildren()}\n      </div>\n    </>\n  );\n}\n\n/** Clamp a value between min and max (mirror of upstream's number/clamp). */\nfunction clampFill(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\n/**\n * The fill element of a slider, displaying the selected range.\n *\n * Port of react-aria-components `SliderFill` (RAC 1.18). Upstream reads the\n * array-based `SliderState` (`values`/`getThumbPercent`); our `SliderState` is\n * single-value, so this fills from `offset` (default the slider's minValue, i.e.\n * 0%) to the current value — the single-thumb branch of upstream's math, using\n * the same `(v - min) / (max - min)` percent formula the state itself uses.\n */\nexport function SliderFill(props: SliderFillProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"offset\",\n    \"children\",\n    \"onHoverStart\",\n    \"onHoverEnd\",\n    \"onHoverChange\",\n  ]);\n\n  const context = useContext(SliderContext);\n  if (!context) {\n    throw new Error(\"SliderFill must be used within a Slider\");\n  }\n\n  const { state } = context;\n\n  const { isHovered, hoverProps } = createHover(() => ({\n    onHoverStart: local.onHoverStart,\n    onHoverEnd: local.onHoverEnd,\n    onHoverChange: local.onHoverChange,\n  }));\n\n  // Percent (0-100) of an arbitrary value within the track — mirrors\n  // SliderState.getValuePercent's formula for a value other than the current one.\n  const percentOf = (value: number) => {\n    const range = state.maxValue - state.minValue;\n    return range === 0 ? 0 : ((value - state.minValue) / range) * 100;\n  };\n\n  const offset = () =>\n    local.offset != null ? clampFill(local.offset, state.minValue, state.maxValue) : state.minValue;\n  const start = () => percentOf(offset());\n  const end = () => state.getValuePercent() * 100;\n  const startPercent = () => Math.min(start(), end());\n  const sizePercent = () => Math.max(0, Math.max(start(), end()) - startPercent());\n\n  const renderValues = createMemo<SliderFillRenderProps>(() => ({\n    isDisabled: state.isDisabled,\n    isHovered: isHovered(),\n    valuePercent: state.getValuePercent(),\n    orientation: state.orientation,\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Slider-fill\",\n    },\n    renderValues,\n  );\n\n  // useRenderProps has no defaultStyle; merge the positioning style with the\n  // user's, mirroring upstream SliderFill's defaultStyle (and SliderTrack here).\n  const mergedStyle = (): JSX.CSSProperties => {\n    const fillStyle: JSX.CSSProperties =\n      state.orientation === \"vertical\"\n        ? {\n            position: \"absolute\",\n            bottom: `${startPercent()}%`,\n            height: `${sizePercent()}%`,\n            width: \"100%\",\n          }\n        : {\n            position: \"absolute\",\n            \"inset-inline-start\": `${startPercent()}%`,\n            width: `${sizePercent()}%`,\n            height: \"100%\",\n          };\n    return { ...fillStyle, ...(renderProps.style() || {}) };\n  };\n\n  return (\n    <div\n      {...domProps}\n      {...hoverProps}\n      class={renderProps.class()}\n      style={mergedStyle()}\n      data-hovered={isHovered() || undefined}\n      data-disabled={state.isDisabled || undefined}\n      data-orientation={state.orientation}\n    >\n      {renderProps.renderChildren()}\n    </div>\n  );\n}\n\n/**\n * The output element of a slider, displaying the current value.\n */\nexport function SliderOutput(props: SliderOutputProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n  const context = useContext(SliderContext);\n  if (!context) {\n    throw new Error(\"SliderOutput must be used within a Slider\");\n  }\n\n  const { state } = context;\n\n  const renderValues = createMemo<SliderOutputRenderProps>(() => ({\n    value: state.value(),\n    formattedValue: state.getFormattedValue(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Slider-output\",\n    },\n    renderValues,\n  );\n\n  const cleanDomProps = () => {\n    const { ref: _ref, ...rest } = domProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanOutputProps = () => {\n    const { ref: _ref, ...rest } = context.outputProps as Record<string, unknown>;\n    return rest;\n  };\n\n  const renderedChildren = () => {\n    // Check if raw children prop exists before calling renderChildren\n    if (renderProps.children === undefined || renderProps.children === null) {\n      return state.getFormattedValue();\n    }\n    return renderProps.renderChildren();\n  };\n\n  return (\n    <output\n      {...cleanDomProps()}\n      {...cleanOutputProps()}\n      class={renderProps.class()}\n      style={renderProps.style()}\n    >\n      {renderedChildren()}\n    </output>\n  );\n}\n\nSlider.Track = SliderTrack;\nSlider.Thumb = SliderThumb;\nSlider.Fill = SliderFill;\nSlider.Output = SliderOutput;\n"],"mappings":"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"}

package/dist/StepList.js

@@ -0,0 +1,198 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { addEventListener, createComponent, delegateEvents, effect, getNextElement, insert, mergeProps, runHydrationEvents, setAttribute, spread, template } from "solid-js/web";
+import { For, createContext, createMemo, splitProps, useContext } from "solid-js";
+import { createStepList } from "@proyecto-viviana/solidaria";
+import { createStepListState } from "@proyecto-viviana/solid-stately";
+//#region src/StepList.tsx
+/**
+* StepList component for solidaria-components
+*
+* A pre-wired headless step list component that combines state + aria hooks.
+* Renders an ordered list of steps with completion tracking.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<ol>`), _tmpl$2 = /*#__PURE__*/ template(`<li><a role=link>`);
+const StepListStateContext = createContext(null);
+const StepListContext = createContext(null);
+function useStepListState() {
+	const ctx = useContext(StepListStateContext);
+	if (!ctx) throw new Error("useStepListState must be used within a StepList");
+	return ctx;
+}
+/**
+* StepList displays a sequence of steps with completion tracking and selection.
+*/
+function StepList(props) {
+	const [local, ariaProps, domRest] = splitProps(props, [
+		"items",
+		"selectedKey",
+		"defaultSelectedKey",
+		"onSelectionChange",
+		"lastCompletedStep",
+		"defaultLastCompletedStep",
+		"onLastCompletedStepChange",
+		"isDisabled",
+		"isReadOnly",
+		"disabledKeys",
+		"children",
+		"class",
+		"style"
+	], ["aria-label", "aria-labelledby"]);
+	const state = createStepListState(createMemo(() => ({
+		items: local.items,
+		selectedKey: local.selectedKey,
+		defaultSelectedKey: local.defaultSelectedKey,
+		onSelectionChange: local.onSelectionChange,
+		lastCompletedStep: local.lastCompletedStep,
+		defaultLastCompletedStep: local.defaultLastCompletedStep,
+		onLastCompletedStepChange: local.onLastCompletedStepChange,
+		isDisabled: local.isDisabled,
+		isReadOnly: local.isReadOnly,
+		disabledKeys: local.disabledKeys
+	}))());
+	const { stepListProps } = createStepList({
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaProps["aria-labelledby"];
+		}
+	}, state);
+	const renderValues = createMemo(() => ({ isDisabled: state.isDisabled() }));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-StepList"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(domRest, { global: true }));
+	return createComponent(StepListStateContext.Provider, {
+		value: state,
+		get children() {
+			var _el$ = getNextElement(_tmpl$);
+			spread(_el$, mergeProps(stepListProps, domProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get ["data-disabled"]() {
+					return state.isDisabled() || void 0;
+				}
+			}), false, true);
+			insert(_el$, createComponent(For, {
+				get each() {
+					return local.items;
+				},
+				children: (item, index) => {
+					const stepNumber = () => index() + 1;
+					return local.children(item, {
+						get isSelected() {
+							return state.selectedKey() === item.key;
+						},
+						get isCompleted() {
+							return state.isCompleted(item.key);
+						},
+						get isDisabled() {
+							return state.isDisabled() || !state.isSelectable(item.key);
+						},
+						get isSelectable() {
+							return state.isSelectable(item.key);
+						},
+						get stepNumber() {
+							return stepNumber();
+						},
+						get stepStateText() {
+							if (state.selectedKey() === item.key) return "Current";
+							if (state.isCompleted(item.key)) return "Completed";
+							return "Not completed";
+						}
+					});
+				}
+			}));
+			runHydrationEvents();
+			return _el$;
+		}
+	});
+}
+/**
+* Step represents an individual step within a StepList.
+* Renders as an `<li>` wrapping an `<a>` with accessible step props.
+*/
+function Step(props) {
+	const [local, domProps] = splitProps(props, [
+		"item",
+		"stepNumber",
+		"children",
+		"class",
+		"style"
+	]);
+	const state = useStepListState();
+	const isSelected = () => state.selectedKey() === local.item.key;
+	const isCompleted = () => state.isCompleted(local.item.key);
+	const selectable = () => state.isSelectable(local.item.key);
+	const handleClick = (e) => {
+		e.preventDefault();
+		if (selectable()) state.setSelectedKey(local.item.key);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			e.preventDefault();
+			return;
+		}
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (selectable()) state.setSelectedKey(local.item.key);
+		}
+	};
+	const stepStateText = () => {
+		if (isSelected()) return "Current";
+		if (isCompleted()) return "Completed";
+		return "Not completed";
+	};
+	return (() => {
+		var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild;
+		spread(_el$2, mergeProps(domProps, {
+			get ["class"]() {
+				return local.class;
+			},
+			get style() {
+				return local.style;
+			},
+			get ["data-selected"]() {
+				return isSelected() || void 0;
+			},
+			get ["data-completed"]() {
+				return isCompleted() || void 0;
+			},
+			get ["data-disabled"]() {
+				return !selectable() || void 0;
+			},
+			get ["data-selectable"]() {
+				return selectable() || void 0;
+			}
+		}), false, true);
+		addEventListener(_el$3, "keydown", handleKeyDown);
+		_el$3.$$click = handleClick;
+		insert(_el$3, () => local.children);
+		effect((_p$) => {
+			var _v$ = isSelected() ? "step" : void 0, _v$2 = !selectable() ? true : void 0, _v$3 = selectable() ? 0 : void 0, _v$4 = `Step ${local.stepNumber}: ${local.item.label}, ${stepStateText()}`;
+			_v$ !== _p$.e && setAttribute(_el$3, "aria-current", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$3, "aria-disabled", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$3, "tabindex", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$3, "aria-label", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		runHydrationEvents();
+		return _el$2;
+	})();
+}
+delegateEvents(["click"]);
+//#endregion
+export { Step, StepList, StepListContext, StepListStateContext, useStepListState };
+
+//# sourceMappingURL=StepList.js.map