@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/src/SelectionIndicator.tsx

@@ -61,7 +61,9 @@ export function SelectionIndicator(props: SelectionIndicatorProps): JSX.Element
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-SelectionIndicator",

package/src/SharedElementTransition.tsx

@@ -234,7 +234,9 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-SharedElement",

package/src/Slider.tsx

@@ -12,6 +12,7 @@ import {
   createHover,
   mergeProps,
   type AriaSliderProps,
+  type HoverEvents,
 } from "@proyecto-viviana/solidaria";
 import {
   createSliderState,
@@ -124,6 +125,32 @@ export interface SliderThumbProps
   style?: StyleOrFunction<SliderThumbRenderProps>;
 }
 
+export interface SliderFillRenderProps {
+  /** Whether the slider is disabled. */
+  isDisabled: boolean;
+  /** Whether the slider fill is currently hovered with a mouse. */
+  isHovered: boolean;
+  /** The value as a percent (0-1). */
+  valuePercent: number;
+  /** The orientation. */
+  orientation: SliderOrientation;
+}
+
+export interface SliderFillProps
+  extends
+    SlotProps,
+    HoverEvents,
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
+  /** The offset from which to start the fill. Defaults to the slider's minValue. */
+  offset?: number;
+  /** The children of the fill. */
+  children?: RenderChildren<SliderFillRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<SliderFillRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<SliderFillRenderProps>;
+}
+
 export interface SliderOutputRenderProps {
   /** The current value. */
   value: number;
@@ -156,6 +183,7 @@ interface SliderContextValue {
 export const SliderContext = createContext<SliderContextValue | null>(null);
 export const SliderStateContext = SliderContext;
 export const SliderTrackContext = SliderContext;
+export const SliderFillContext = SliderContext;
 export const SliderOutputContext = SliderContext;
 
 /**
@@ -252,7 +280,9 @@ export function Slider(props: SliderProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Slider",
@@ -363,7 +393,9 @@ export function SliderTrack(props: SliderTrackProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Slider-track",
@@ -431,7 +463,9 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Slider-thumb",
@@ -467,22 +501,131 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
       cleanFocusProps() as Record<string, unknown>,
     ) as JSX.InputHTMLAttributes<HTMLInputElement>;
 
+  return (
+    <>
+      <VisuallyHidden>
+        <input ref={setInputRef} {...mergedInputProps()} />
+      </VisuallyHidden>
+      <div
+        {...domProps}
+        {...cleanThumbProps()}
+        {...cleanHoverProps()}
+        class={renderProps.class()}
+        style={mergedStyle()}
+        data-disabled={state.isDisabled || undefined}
+        data-dragging={state.isDragging() || undefined}
+        data-focused={isFocused() || state.isFocused() || undefined}
+        data-focus-visible={isFocusVisible() || undefined}
+        data-hovered={isHovered() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </div>
+    </>
+  );
+}
+
+/** Clamp a value between min and max (mirror of upstream's number/clamp). */
+function clampFill(value: number, min: number, max: number): number {
+  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.
+ */
+export function SliderFill(props: SliderFillProps): JSX.Element {
+  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,
+  }));
+
+  // Percent (0-100) of an arbitrary value within the track — mirrors
+  // SliderState.getValuePercent's formula for a value other than the current one.
+  const percentOf = (value: number) => {
+    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<SliderFillRenderProps>(() => ({
+    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,
+  );
+
+  // useRenderProps has no defaultStyle; merge the positioning style with the
+  // user's, mirroring upstream SliderFill's defaultStyle (and SliderTrack here).
+  const mergedStyle = (): JSX.CSSProperties => {
+    const fillStyle: JSX.CSSProperties =
+      state.orientation === "vertical"
+        ? {
+            position: "absolute",
+            bottom: `${startPercent()}%`,
+            height: `${sizePercent()}%`,
+            width: "100%",
+          }
+        : {
+            position: "absolute",
+            "inset-inline-start": `${startPercent()}%`,
+            width: `${sizePercent()}%`,
+            height: "100%",
+          };
+    return { ...fillStyle, ...(renderProps.style() || {}) };
+  };
+
   return (
     <div
       {...domProps}
-      {...cleanThumbProps()}
-      {...cleanHoverProps()}
+      {...hoverProps}
       class={renderProps.class()}
       style={mergedStyle()}
-      data-disabled={state.isDisabled || undefined}
-      data-dragging={state.isDragging() || undefined}
-      data-focused={isFocused() || state.isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
       data-hovered={isHovered() || undefined}
+      data-disabled={state.isDisabled || undefined}
+      data-orientation={state.orientation}
     >
-      <VisuallyHidden>
-        <input ref={setInputRef} {...mergedInputProps()} />
-      </VisuallyHidden>
       {renderProps.renderChildren()}
     </div>
   );
@@ -508,7 +651,9 @@ export function SliderOutput(props: SliderOutputProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Slider-output",
@@ -547,4 +692,5 @@ export function SliderOutput(props: SliderOutputProps): JSX.Element {
 
 Slider.Track = SliderTrack;
 Slider.Thumb = SliderThumb;
+Slider.Fill = SliderFill;
 Slider.Output = SliderOutput;

package/src/Switch.tsx

@@ -9,30 +9,42 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   createMemo,
   createSignal,
   createUniqueId,
   splitProps,
   untrack,
+  useContext,
   Show,
 } from "solid-js";
 import {
   createSwitch,
   createFocusRing,
   createHover,
+  mergeProps,
   type AriaSwitchProps,
+  type SwitchAria,
 } from "@proyecto-viviana/solidaria";
-import { createToggleState, type ToggleState } from "@proyecto-viviana/solid-stately";
+import {
+  createToggleState,
+  VALID_VALIDITY_STATE,
+  type ToggleState,
+  type ValidationResult,
+} from "@proyecto-viviana/solid-stately";
 import { VisuallyHidden } from "./VisuallyHidden";
+import { FieldErrorContext, type FieldErrorContextValue } from "./FieldError";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
+  Provider,
   useRenderProps,
   filterDOMProps,
 } from "./utils";
+import { TextContext } from "./Text";
 
 export interface ToggleSwitchRenderProps {
   /** Whether the switch is selected. */
@@ -152,7 +164,9 @@ export function ToggleSwitch(props: ToggleSwitchProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ToggleSwitch",
@@ -258,3 +272,382 @@ export function ToggleSwitch(props: ToggleSwitchProps): JSX.Element {
     </label>
   );
 }
+
+// ============================================================================
+// SwitchField + SwitchButton — the RAC form-field split (RAC 1.19)
+// ----------------------------------------------------------------------------
+// Upstream split the monolithic Switch into a SwitchField wrapper (owns state,
+// validation, and help text) containing a SwitchButton control (the clickable
+// label + indicator). Mirrors react-aria-components/src/Switch.tsx. The legacy
+// `ToggleSwitch` above stays as the deprecated monolith for back-compat.
+//
+// Help text wiring mirrors upstream exactly: SwitchField has NO description /
+// errorMessage props. createSwitch mints descriptionProps / errorMessageProps
+// (slot ids) and bakes the combined aria-describedby into inputProps, and the
+// field provides those ids through TextContext slots. Consumers render the help
+// text themselves with `<Text slot="description">` / `<FieldError>`.
+// ============================================================================
+
+export interface SwitchFieldRenderProps {
+  /** Whether the switch is selected. */
+  isSelected: boolean;
+  /** Whether the switch is disabled. */
+  isDisabled: boolean;
+  /** Whether the switch is read only. */
+  isReadOnly: boolean;
+  /** Whether the switch is invalid. */
+  isInvalid: boolean;
+  /** Whether the switch is required. */
+  isRequired: boolean;
+  /** State of the switch. */
+  state: ToggleState;
+}
+
+export interface SwitchButtonRenderProps extends ToggleSwitchRenderProps {
+  /** Whether the switch is required. */
+  isRequired: boolean;
+}
+
+export interface SwitchFieldProps extends Omit<AriaSwitchProps, "children">, SlotProps {
+  /** The children of the component (typically a `SwitchButton`). A function may receive render props. */
+  children?: RenderChildren<SwitchFieldRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<SwitchFieldRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<SwitchFieldRenderProps>;
+}
+
+export interface SwitchButtonProps extends SlotProps {
+  /** The children of the component. A function may be provided to receive render props. */
+  children?: RenderChildren<SwitchButtonRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<SwitchButtonRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<SwitchButtonRenderProps>;
+  /** Handler called when hover starts. */
+  onHoverStart?: () => void;
+  /** Handler called when hover ends. */
+  onHoverEnd?: () => void;
+  /** Handler called when hover state changes. */
+  onHoverChange?: (isHovered: boolean) => void;
+}
+
+export interface SwitchFieldContextValue extends SwitchFieldProps {
+  slots?: Record<string, SwitchFieldProps>;
+}
+export const SwitchFieldContext = createContext<SwitchFieldContextValue | null>(null);
+
+/** Carries the switch aria + state from a SwitchField/Switch wrapper to its SwitchButton. */
+interface InternalSwitchContextValue {
+  switchAria: SwitchAria;
+  state: ToggleState;
+  setInputElement: (el: HTMLInputElement | null) => void;
+  defaultClassName: string;
+  isRequired: boolean;
+}
+const InternalSwitchContext = createContext<InternalSwitchContextValue | null>(null);
+
+/**
+ * A switch button is the clickable area of a switch, including the indicator and label.
+ * Must be rendered inside a `SwitchField` (or the legacy `ToggleSwitch`).
+ */
+export function SwitchButton(props: SwitchButtonProps): JSX.Element {
+  // Accessed reactively so it resolves once the parent provider mounts (HMR-safe).
+  const getCtx = createMemo(() => useContext(InternalSwitchContext));
+  return (
+    <Show when={getCtx()} fallback={null} keyed>
+      {(ctx) => <SwitchButtonImpl buttonProps={props} ctx={ctx} />}
+    </Show>
+  );
+}
+
+function SwitchButtonImpl(props: {
+  buttonProps: SwitchButtonProps;
+  ctx: InternalSwitchContextValue;
+}): JSX.Element {
+  const { ctx } = props;
+  const switchAria = ctx.switchAria;
+
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return switchAria.isDisabled || switchAria.isReadOnly;
+    },
+    onHoverStart: props.buttonProps.onHoverStart,
+    onHoverEnd: props.buttonProps.onHoverEnd,
+    onHoverChange: props.buttonProps.onHoverChange,
+  });
+
+  const renderValues = createMemo<SwitchButtonRenderProps>(() => ({
+    isSelected: switchAria.isSelected(),
+    isHovered: isHovered(),
+    isPressed: switchAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: switchAria.isDisabled,
+    isReadOnly: switchAria.isReadOnly,
+    isInvalid: switchAria.isInvalid,
+    isRequired: ctx.isRequired,
+    state: ctx.state,
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: props.buttonProps.children,
+      class: props.buttonProps.class,
+      style: props.buttonProps.style,
+      defaultClassName: ctx.defaultClassName,
+    },
+    renderValues,
+  );
+
+  const childRenderValues: SwitchButtonRenderProps = {
+    get isSelected() {
+      return switchAria.isSelected();
+    },
+    get isHovered() {
+      return isHovered();
+    },
+    get isPressed() {
+      return switchAria.isPressed();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isFocusVisible() {
+      return isFocusVisible();
+    },
+    get isDisabled() {
+      return switchAria.isDisabled;
+    },
+    get isReadOnly() {
+      return switchAria.isReadOnly;
+    },
+    get isInvalid() {
+      return switchAria.isInvalid;
+    },
+    get isRequired() {
+      return ctx.isRequired;
+    },
+    get state() {
+      return ctx.state;
+    },
+  };
+
+  const cleanLabelProps = () => {
+    const { ref: _ref1, ...rest } = switchAria.labelProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanInputProps = () => {
+    const { ref: _ref3, ...rest } = switchAria.inputProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref4, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+
+  // Resolve the render-prop children ONCE (untracked) — see ToggleSwitch above.
+  // The button's own children are leaf visuals (they don't consume context), so
+  // untrack is safe and keeps fine-grained reactivity via the getters + <Show>s.
+  const switchChildren = untrack(() => {
+    const children = props.buttonProps.children;
+    return typeof children === "function" ? children(childRenderValues) : children;
+  });
+
+  return (
+    <label
+      {...cleanLabelProps()}
+      {...cleanHoverProps()}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={props.buttonProps.slot}
+      data-selected={switchAria.isSelected() || undefined}
+      data-pressed={switchAria.isPressed() || undefined}
+      data-hovered={isHovered() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-disabled={switchAria.isDisabled || undefined}
+      data-readonly={switchAria.isReadOnly || undefined}
+      data-invalid={switchAria.isInvalid || undefined}
+      data-required={ctx.isRequired || undefined}
+    >
+      <VisuallyHidden>
+        <input ref={ctx.setInputElement} {...cleanInputProps()} {...cleanFocusProps()} />
+      </VisuallyHidden>
+      {switchChildren}
+    </label>
+  );
+}
+
+/**
+ * A switch allows a user to turn a setting on or off, with support for validation and help text.
+ * Wraps a `SwitchButton` and provides description/error wiring through
+ * TextContext slots — render help text with `<Text slot="description">`.
+ *
+ * @example
+ * ```tsx
+ * <SwitchField>
+ *   <SwitchButton>Enable sync</SwitchButton>
+ *   <Text slot="description">Sync across devices</Text>
+ * </SwitchField>
+ * ```
+ */
+export function SwitchField(props: SwitchFieldProps): JSX.Element {
+  const contextProps = useContext(SwitchFieldContext);
+  const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+  const contextBaseProps = createMemo<SwitchFieldProps>(() => {
+    if (!contextProps) return {};
+    const { slots: _slots, ...rest } = contextProps;
+    return rest;
+  });
+  const merged = contextProps
+    ? (mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) as SwitchFieldProps)
+    : props;
+
+  const [inputElement, setInputElement] = createSignal<HTMLInputElement | null>(null);
+  // `children` is split out of ariaProps so the hook accessor's `...ariaProps`
+  // spread does not eagerly read it — reading a Solid `children` getter
+  // instantiates the nested SwitchButton, and doing so OUTSIDE the
+  // InternalSwitchContext provider both breaks its context binding and recurses.
+  const [local, ariaProps] = splitProps(merged, ["class", "style", "slot", "children"]);
+
+  const state = createToggleState(() => ({
+    isSelected: ariaProps.isSelected,
+    defaultSelected: ariaProps.defaultSelected,
+    onChange: ariaProps.onChange,
+    isReadOnly: ariaProps.isReadOnly,
+  }));
+
+  const switchAria = createSwitch(
+    () => ({
+      ...ariaProps,
+      // The hook reads `children` only to decide if an aria-label is needed; the
+      // visible label lives in the SwitchButton, so report presence as a literal.
+      children: true,
+    }),
+    state,
+    inputElement,
+  );
+
+  const internalContext: InternalSwitchContextValue = {
+    switchAria,
+    state,
+    setInputElement,
+    defaultClassName: "solidaria-SwitchButton",
+    get isRequired() {
+      return ariaProps.isRequired || false;
+    },
+  };
+
+  // The hook mints the description/error slot ids and bakes the combined
+  // aria-describedby into the input; the field exposes those ids through
+  // TextContext so a `<Text slot="description">` / `<FieldError>` child resolves
+  // them. Mirrors react-aria-components' Switch Provider value list.
+  const textSlots = {
+    slots: {
+      get description() {
+        return switchAria.descriptionProps;
+      },
+      get errorMessage() {
+        return switchAria.errorMessageProps;
+      },
+    },
+  };
+
+  const renderValues = createMemo<SwitchFieldRenderProps>(() => ({
+    isSelected: switchAria.isSelected(),
+    isDisabled: switchAria.isDisabled,
+    isReadOnly: switchAria.isReadOnly,
+    isInvalid: switchAria.isInvalid,
+    isRequired: ariaProps.isRequired || false,
+    state,
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: merged.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-SwitchField",
+    },
+    renderValues,
+  );
+
+  const fieldErrorContext: FieldErrorContextValue = {
+    get validation(): ValidationResult {
+      return {
+        isInvalid: switchAria.isInvalid,
+        validationDetails: VALID_VALIDITY_STATE,
+        validationErrors: [],
+      };
+    },
+    get errorMessageProps() {
+      return switchAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+  };
+
+  const domProps = createMemo(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete (filtered as Record<string, unknown>).id;
+    delete (filtered as Record<string, unknown>).onClick;
+    return filtered;
+  });
+
+  // Children are accessed inside the providers (component-execution owner) so a
+  // nested SwitchButton's useContext binds to InternalSwitchContext. Mirrors
+  // RadioGroup's GroupChildren — do NOT pre-resolve outside the provider.
+  const FieldChildren = () => {
+    const childRenderValues: SwitchFieldRenderProps = {
+      get isSelected() {
+        return switchAria.isSelected();
+      },
+      get isDisabled() {
+        return switchAria.isDisabled;
+      },
+      get isReadOnly() {
+        return switchAria.isReadOnly;
+      },
+      get isInvalid() {
+        return switchAria.isInvalid;
+      },
+      get isRequired() {
+        return ariaProps.isRequired || false;
+      },
+      get state() {
+        return state;
+      },
+    };
+    const renderedChildren = createMemo(() => {
+      const children = merged.children;
+      return typeof children === "function" ? children(childRenderValues) : children;
+    });
+    return <>{renderedChildren()}</>;
+  };
+
+  return (
+    <InternalSwitchContext.Provider value={internalContext}>
+      <FieldErrorContext.Provider value={fieldErrorContext}>
+        <div
+          {...domProps()}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          slot={local.slot}
+          data-selected={switchAria.isSelected() || undefined}
+          data-disabled={switchAria.isDisabled || undefined}
+          data-readonly={switchAria.isReadOnly || undefined}
+          data-invalid={switchAria.isInvalid || undefined}
+          data-required={ariaProps.isRequired || false || undefined}
+        >
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            <FieldChildren />
+          </Provider>
+        </div>
+      </FieldErrorContext.Provider>
+    </InternalSwitchContext.Provider>
+  );
+}