@proyecto-viviana/solidaria-components 0.2.1 → 0.2.3

package/src/Switch.tsx

@@ -0,0 +1,213 @@
+/**
+ * ToggleSwitch component for solidaria-components
+ *
+ * A pre-wired headless switch that combines state + aria hooks.
+ * Port of react-aria-components/src/Switch.tsx
+ *
+ * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  splitProps,
+} from 'solid-js';
+import {
+  createSwitch,
+  createFocusRing,
+  createHover,
+  type AriaSwitchProps,
+} from '@proyecto-viviana/solidaria';
+import { createToggleState, type ToggleState } from '@proyecto-viviana/solid-stately';
+import { VisuallyHidden } from './VisuallyHidden';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ToggleSwitchRenderProps {
+  /** Whether the switch is selected. */
+  isSelected: boolean;
+  /** Whether the switch is currently hovered with a mouse. */
+  isHovered: boolean;
+  /** Whether the switch is currently in a pressed state. */
+  isPressed: boolean;
+  /** Whether the switch is focused, either via a mouse or keyboard. */
+  isFocused: boolean;
+  /** Whether the switch is keyboard focused. */
+  isFocusVisible: boolean;
+  /** Whether the switch is disabled. */
+  isDisabled: boolean;
+  /** Whether the switch is read only. */
+  isReadOnly: boolean;
+  /** State of the switch. */
+  state: ToggleState;
+}
+
+export interface ToggleSwitchProps
+  extends Omit<AriaSwitchProps, 'children'>,
+    SlotProps {
+  /** The children of the component. A function may be provided to receive render props. */
+  children?: RenderChildren<ToggleSwitchRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<ToggleSwitchRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<ToggleSwitchRenderProps>;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+export const ToggleSwitchContext = createContext<ToggleSwitchProps | null>(null);
+
+// ============================================
+// COMPONENT
+// ============================================
+
+/**
+ * A switch allows a user to turn a setting on or off.
+ *
+ * This is a headless component that provides accessibility and state management.
+ * Style it using the render props pattern or data attributes.
+ *
+ * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
+ *
+ * @example
+ * ```tsx
+ * <ToggleSwitch>
+ *   {({ isSelected }) => (
+ *     <>
+ *       <span class={`switch-track ${isSelected ? 'bg-blue-500' : 'bg-gray-300'}`}>
+ *         <span class={`switch-thumb ${isSelected ? 'translate-x-5' : 'translate-x-0'}`} />
+ *       </span>
+ *       <span>Enable notifications</span>
+ *     </>
+ *   )}
+ * </ToggleSwitch>
+ * ```
+ */
+export function ToggleSwitch(props: ToggleSwitchProps): JSX.Element {
+  let inputRef: HTMLInputElement | null = null;
+
+  // Split props
+  const [local, ariaProps] = splitProps(props, [
+    'class',
+    'style',
+    'slot',
+  ]);
+
+  // Create toggle state
+  // Use getters to ensure props are read lazily inside reactive contexts
+  const state = createToggleState({
+    get isSelected() { return ariaProps.isSelected; },
+    get defaultSelected() { return ariaProps.defaultSelected; },
+    get onChange() { return ariaProps.onChange; },
+    get isReadOnly() { return ariaProps.isReadOnly; },
+  });
+
+  // Create switch aria props
+  const switchAria = createSwitch(
+    () => ({
+      ...ariaProps,
+      children: typeof props.children === 'function' ? true : props.children,
+    }),
+    state,
+    () => inputRef
+  );
+
+  // Create focus ring
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  // Create hover
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return ariaProps.isDisabled || ariaProps.isReadOnly;
+    },
+  });
+
+  // Render props values
+  const renderValues = createMemo<ToggleSwitchRenderProps>(() => ({
+    isSelected: switchAria.isSelected(),
+    isHovered: isHovered(),
+    isPressed: switchAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: switchAria.isDisabled,
+    isReadOnly: switchAria.isReadOnly,
+    state,
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-ToggleSwitch',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  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;
+  });
+
+  // Remove ref from spread props to avoid type conflicts
+  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;
+  };
+
+  return (
+    <label
+      {...domProps()}
+      {...cleanLabelProps()}
+      {...cleanHoverProps()}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      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}
+    >
+      <VisuallyHidden>
+        <input
+          ref={(el) => (inputRef = el)}
+          {...cleanInputProps()}
+          {...cleanFocusProps()}
+        />
+      </VisuallyHidden>
+      {renderProps.renderChildren()}
+    </label>
+  );
+}
+