@proyecto-viviana/solid-stately 0.2.1 → 0.2.3

package/src/radio/createRadioGroupState.ts

@@ -0,0 +1,201 @@
+/**
+ * Radio group state for Solid Stately
+ *
+ * Provides state management for a radio group component.
+ * Provides a name for the group, and manages selection and focus state.
+ *
+ * This is a 1:1 port of @react-stately/radio's useRadioGroupState.
+ */
+
+import { createSignal, Accessor, untrack } from 'solid-js';
+import { type MaybeAccessor, access } from '../utils';
+import { createId } from '../ssr';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface RadioGroupProps {
+  /** The current selected value (controlled). */
+  value?: string | null;
+  /** The default selected value (uncontrolled). */
+  defaultValue?: string | null;
+  /** Handler that is called when the value changes. */
+  onChange?: (value: string) => void;
+  /** Whether the radio group is disabled. */
+  isDisabled?: boolean;
+  /** Whether the radio group is read only. */
+  isReadOnly?: boolean;
+  /** Whether the radio group is required. */
+  isRequired?: boolean;
+  /** Whether the radio group is invalid. */
+  isInvalid?: boolean;
+  /** The name of the radio group, used when submitting an HTML form. */
+  name?: string;
+  /** The form to associate the radio group with. */
+  form?: string;
+  /** The label for the radio group. */
+  label?: string;
+  /** Orientation of the radio group. */
+  orientation?: 'horizontal' | 'vertical';
+  /** Handler that is called when the radio group receives focus. */
+  onFocus?: (e: FocusEvent) => void;
+  /** Handler that is called when the radio group loses focus. */
+  onBlur?: (e: FocusEvent) => void;
+  /** Handler that is called when the radio group's focus status changes. */
+  onFocusChange?: (isFocused: boolean) => void;
+}
+
+export interface RadioGroupState {
+  /** The name for the group, used for native form submission. */
+  readonly name: string;
+
+  /** Whether the radio group is disabled. */
+  readonly isDisabled: boolean;
+
+  /** Whether the radio group is read only. */
+  readonly isReadOnly: boolean;
+
+  /** Whether the radio group is required. */
+  readonly isRequired: boolean;
+
+  /** Whether the radio group is invalid. */
+  readonly isInvalid: boolean;
+
+  /** The currently selected value. */
+  readonly selectedValue: Accessor<string | null>;
+
+  /** The default selected value. */
+  readonly defaultSelectedValue: string | null;
+
+  /** Sets the selected value. */
+  setSelectedValue(value: string | null): void;
+
+  /** The value of the last focused radio. */
+  readonly lastFocusedValue: Accessor<string | null>;
+
+  /** Sets the last focused value. */
+  setLastFocusedValue(value: string | null): void;
+}
+
+// ============================================
+// INTERNAL: SolidJS-specific sync mechanism
+// ============================================
+
+/**
+ * Internal WeakMap to store sync version accessors for each radio group state.
+ * This is used by createRadio to trigger DOM sync when native radio behavior
+ * causes the DOM checked state to desync from our reactive state.
+ *
+ * This is kept separate from RadioGroupState to maintain API parity with React-Stately.
+ * @internal
+ */
+export const radioGroupSyncVersion: WeakMap<RadioGroupState, Accessor<number>> = new WeakMap();
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides state management for a radio group component.
+ * Provides a name for the group, and manages selection and focus state.
+ */
+export function createRadioGroupState(
+  props: MaybeAccessor<RadioGroupProps> = {}
+): RadioGroupState {
+  const getProps = () => access(props);
+
+  // Get initial props using untrack to avoid setting up dependencies
+  // This ensures we capture the initial defaultValue without reactivity issues
+  const initialProps = untrack(() => getProps());
+
+  // Generate name - preserved for backward compatibility
+  // React Aria now generates the name instead of stately
+  const name = initialProps.name || `radio-group-${createId()}`;
+
+  // Create internal signal for uncontrolled mode
+  // Initialize with defaultValue only (not value, which is for controlled mode)
+  const [internalValue, setInternalValue] = createSignal<string | null>(
+    initialProps.defaultValue ?? null
+  );
+  const [lastFocusedValue, setLastFocusedValueInternal] = createSignal<string | null>(null);
+
+  // SolidJS-specific: Version counter for triggering DOM sync across all radios
+  // This handles the case where native radio behavior causes DOM state to desync
+  // from our reactive state (e.g., clicking a radio unchecks siblings in the DOM)
+  const [syncVersion, setSyncVersion] = createSignal(0);
+
+  // Determine if controlled - must be reactive to handle dynamic props
+  const isControlled = () => getProps().value !== undefined;
+
+  // Get current value - reactive for both controlled and uncontrolled modes
+  const selectedValue: Accessor<string | null> = () => {
+    const p = getProps();
+    // In controlled mode, always read from props.value reactively
+    // In uncontrolled mode, read from internal signal
+    if (p.value !== undefined) {
+      return p.value ?? null;
+    }
+    return internalValue();
+  };
+
+  // Check if invalid
+  const isInvalid = () => {
+    return getProps().isInvalid ?? false;
+  };
+
+  // Set value
+  function setSelectedValue(value: string | null): void {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+
+    // Always increment syncVersion to trigger DOM sync across all radios
+    // This is crucial for SolidJS because:
+    // 1. Native radio behavior unchecks siblings when one is checked
+    // 2. In controlled mode, isSelected() may not change even though DOM changed
+    // 3. We need ALL radios to re-sync their checked state after any click
+    setSyncVersion((v) => v + 1);
+
+    if (!isControlled()) {
+      setInternalValue(value);
+    }
+
+    if (value != null) {
+      p.onChange?.(value);
+    }
+  }
+
+  // Set last focused value
+  function setLastFocusedValue(value: string | null): void {
+    setLastFocusedValueInternal(value);
+  }
+
+  const state: RadioGroupState = {
+    name,
+    selectedValue,
+    defaultSelectedValue: initialProps.defaultValue ?? null,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get isReadOnly() {
+      return getProps().isReadOnly ?? false;
+    },
+    get isRequired() {
+      return getProps().isRequired ?? false;
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
+  };
+
+  // Store syncVersion in internal WeakMap (not part of public API)
+  // This maintains API parity with React-Stately while supporting SolidJS's reactivity needs
+  radioGroupSyncVersion.set(state, syncVersion);
+
+  return state;
+}

package/src/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { createRadioGroupState, radioGroupSyncVersion, type RadioGroupProps, type RadioGroupState, } from './createRadioGroupState';
+//# sourceMappingURL=index.d.ts.map

package/src/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC"}

package/src/radio/index.ts

@@ -0,0 +1,6 @@
+export {
+  createRadioGroupState,
+  radioGroupSyncVersion,
+  type RadioGroupProps,
+  type RadioGroupState,
+} from './createRadioGroupState';

package/src/searchfield/createSearchFieldState.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Creates state for a search field component.
+ * Based on @react-stately/searchfield useSearchFieldState.
+ */
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from '../utils';
+export interface SearchFieldStateProps {
+    /** The current value (controlled). */
+    value?: string;
+    /** The default value (uncontrolled). */
+    defaultValue?: string;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: string) => void;
+}
+export interface SearchFieldState {
+    /** The current value of the search field. */
+    value: Accessor<string>;
+    /** Sets the value of the search field. */
+    setValue: (value: string) => void;
+}
+/**
+ * Provides state management for a search field.
+ */
+export declare function createSearchFieldState(props: MaybeAccessor<SearchFieldStateProps>): SearchFieldState;
+//# sourceMappingURL=createSearchFieldState.d.ts.map

package/src/searchfield/createSearchFieldState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSearchFieldState.d.ts","sourceRoot":"","sources":["createSearchFieldState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,QAAQ,EAA4B,MAAM,UAAU,CAAC;AACnE,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,qBAAqB;IACpC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxB,0CAA0C;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,aAAa,CAAC,qBAAqB,CAAC,GAC1C,gBAAgB,CAgClB"}

package/src/searchfield/createSearchFieldState.ts

@@ -0,0 +1,62 @@
+/**
+ * Creates state for a search field component.
+ * Based on @react-stately/searchfield useSearchFieldState.
+ */
+
+import { type Accessor, createSignal, createMemo } from 'solid-js';
+import { access, type MaybeAccessor } from '../utils';
+
+export interface SearchFieldStateProps {
+  /** The current value (controlled). */
+  value?: string;
+  /** The default value (uncontrolled). */
+  defaultValue?: string;
+  /** Handler that is called when the value changes. */
+  onChange?: (value: string) => void;
+}
+
+export interface SearchFieldState {
+  /** The current value of the search field. */
+  value: Accessor<string>;
+  /** Sets the value of the search field. */
+  setValue: (value: string) => void;
+}
+
+/**
+ * Provides state management for a search field.
+ */
+export function createSearchFieldState(
+  props: MaybeAccessor<SearchFieldStateProps>
+): SearchFieldState {
+  const getProps = () => access(props);
+
+  // Controlled vs uncontrolled
+  const isControlled = () => getProps().value !== undefined;
+
+  // Internal signal for uncontrolled mode
+  const [internalValue, setInternalValue] = createSignal(
+    getProps().defaultValue ?? ''
+  );
+
+  // Current value accessor
+  const value = createMemo(() => {
+    const p = getProps();
+    return isControlled() ? (p.value ?? '') : internalValue();
+  });
+
+  // Set value function
+  const setValue = (newValue: string) => {
+    const p = getProps();
+
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+
+    p.onChange?.(newValue);
+  };
+
+  return {
+    value,
+    setValue,
+  };
+}

package/src/searchfield/index.d.ts

@@ -0,0 +1,3 @@
+export { createSearchFieldState } from './createSearchFieldState';
+export type { SearchFieldState, SearchFieldStateProps, } from './createSearchFieldState';
+//# sourceMappingURL=index.d.ts.map

package/src/searchfield/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EACV,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,0BAA0B,CAAC"}

package/src/searchfield/index.ts

@@ -0,0 +1,5 @@
+export { createSearchFieldState } from './createSearchFieldState';
+export type {
+  SearchFieldState,
+  SearchFieldStateProps,
+} from './createSearchFieldState';

package/src/select/createSelectState.d.ts

@@ -0,0 +1,73 @@
+/**
+ * State management for select components.
+ * Based on @react-stately/select useSelectState.
+ */
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from '../utils';
+import type { Key, CollectionNode, Collection } from '../collections/types';
+export interface SelectStateProps<T = unknown> {
+    /** The items to display in the select. */
+    items: T[];
+    /** Function to get the key for an item. */
+    getKey?: (item: T) => Key;
+    /** Function to get the text value for an item. */
+    getTextValue?: (item: T) => string;
+    /** Function to check if an item is disabled. */
+    getDisabled?: (item: T) => boolean;
+    /** Keys of disabled items. */
+    disabledKeys?: Iterable<Key>;
+    /** The currently selected key (controlled). */
+    selectedKey?: Key | null;
+    /** The default selected key (uncontrolled). */
+    defaultSelectedKey?: Key | null;
+    /** Handler called when the selection changes. */
+    onSelectionChange?: (key: Key | null) => void;
+    /** Whether the select is open (controlled). */
+    isOpen?: boolean;
+    /** Whether the select is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler called when the open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Whether the select is disabled. */
+    isDisabled?: boolean;
+    /** Whether the select is required. */
+    isRequired?: boolean;
+}
+export interface SelectState<T = unknown> {
+    /** The collection of items. */
+    readonly collection: Accessor<Collection<T>>;
+    /** Whether the select dropdown is open. */
+    readonly isOpen: Accessor<boolean>;
+    /** Open the select dropdown. */
+    open(): void;
+    /** Close the select dropdown. */
+    close(): void;
+    /** Toggle the select dropdown. */
+    toggle(): void;
+    /** The currently selected key. */
+    readonly selectedKey: Accessor<Key | null>;
+    /** The currently selected item. */
+    readonly selectedItem: Accessor<CollectionNode<T> | null>;
+    /** Set the selected key. */
+    setSelectedKey(key: Key | null): void;
+    /** The currently focused key. */
+    readonly focusedKey: Accessor<Key | null>;
+    /** Set the focused key. */
+    setFocusedKey(key: Key | null): void;
+    /** Whether the select has focus. */
+    readonly isFocused: Accessor<boolean>;
+    /** Set whether the select has focus. */
+    setFocused(isFocused: boolean): void;
+    /** Whether a specific key is disabled. */
+    isKeyDisabled(key: Key): boolean;
+    /** Whether the select is disabled. */
+    readonly isDisabled: boolean;
+    /** Whether the select is required. */
+    readonly isRequired: boolean;
+}
+/**
+ * Creates state for a select component.
+ * Combines list state with overlay trigger state for dropdown behavior.
+ */
+export declare function createSelectState<T = unknown>(props: MaybeAccessor<SelectStateProps<T>>): SelectState<T>;
+//# sourceMappingURL=createSelectState.d.ts.map

package/src/select/createSelectState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSelectState.d.ts","sourceRoot":"","sources":["createSelectState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAgB,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,KAAK,EAAE,GAAG,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAE5E,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,OAAO;IAC3C,0CAA0C;IAC1C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC;IAC1B,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACnC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAChC,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,+BAA+B;IAC/B,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7C,2CAA2C;IAC3C,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnC,gCAAgC;IAChC,IAAI,IAAI,IAAI,CAAC;IACb,iCAAiC;IACjC,KAAK,IAAI,IAAI,CAAC;IACd,kCAAkC;IAClC,MAAM,IAAI,IAAI,CAAC;IACf,kCAAkC;IAClC,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;IAC3C,mCAAmC;IACnC,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC1D,4BAA4B;IAC5B,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;IAC1C,2BAA2B;IAC3B,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;IACrC,oCAAoC;IACpC,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtC,wCAAwC;IACxC,UAAU,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,0CAA0C;IAC1C,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC;IACjC,sCAAsC;IACtC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,OAAO,EAC3C,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,GACxC,WAAW,CAAC,CAAC,CAAC,CAqGhB"}

package/src/select/createSelectState.ts

@@ -0,0 +1,181 @@
+/**
+ * State management for select components.
+ * Based on @react-stately/select useSelectState.
+ */
+
+import { createSignal, type Accessor } from 'solid-js';
+import { access, type MaybeAccessor } from '../utils';
+import { createListState } from '../collections/createListState';
+import { createOverlayTriggerState } from '../overlays';
+import type { Key, CollectionNode, Collection } from '../collections/types';
+
+export interface SelectStateProps<T = unknown> {
+  /** The items to display in the select. */
+  items: T[];
+  /** Function to get the key for an item. */
+  getKey?: (item: T) => Key;
+  /** Function to get the text value for an item. */
+  getTextValue?: (item: T) => string;
+  /** Function to check if an item is disabled. */
+  getDisabled?: (item: T) => boolean;
+  /** Keys of disabled items. */
+  disabledKeys?: Iterable<Key>;
+  /** The currently selected key (controlled). */
+  selectedKey?: Key | null;
+  /** The default selected key (uncontrolled). */
+  defaultSelectedKey?: Key | null;
+  /** Handler called when the selection changes. */
+  onSelectionChange?: (key: Key | null) => void;
+  /** Whether the select is open (controlled). */
+  isOpen?: boolean;
+  /** Whether the select is open by default (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Handler called when the open state changes. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Whether the select is disabled. */
+  isDisabled?: boolean;
+  /** Whether the select is required. */
+  isRequired?: boolean;
+}
+
+export interface SelectState<T = unknown> {
+  /** The collection of items. */
+  readonly collection: Accessor<Collection<T>>;
+  /** Whether the select dropdown is open. */
+  readonly isOpen: Accessor<boolean>;
+  /** Open the select dropdown. */
+  open(): void;
+  /** Close the select dropdown. */
+  close(): void;
+  /** Toggle the select dropdown. */
+  toggle(): void;
+  /** The currently selected key. */
+  readonly selectedKey: Accessor<Key | null>;
+  /** The currently selected item. */
+  readonly selectedItem: Accessor<CollectionNode<T> | null>;
+  /** Set the selected key. */
+  setSelectedKey(key: Key | null): void;
+  /** The currently focused key. */
+  readonly focusedKey: Accessor<Key | null>;
+  /** Set the focused key. */
+  setFocusedKey(key: Key | null): void;
+  /** Whether the select has focus. */
+  readonly isFocused: Accessor<boolean>;
+  /** Set whether the select has focus. */
+  setFocused(isFocused: boolean): void;
+  /** Whether a specific key is disabled. */
+  isKeyDisabled(key: Key): boolean;
+  /** Whether the select is disabled. */
+  readonly isDisabled: boolean;
+  /** Whether the select is required. */
+  readonly isRequired: boolean;
+}
+
+/**
+ * Creates state for a select component.
+ * Combines list state with overlay trigger state for dropdown behavior.
+ */
+export function createSelectState<T = unknown>(
+  props: MaybeAccessor<SelectStateProps<T>>
+): SelectState<T> {
+  const getProps = () => access(props);
+
+  // Overlay trigger state for open/close
+  const overlayState = createOverlayTriggerState({
+    get isOpen() {
+      return getProps().isOpen;
+    },
+    get defaultOpen() {
+      return getProps().defaultOpen;
+    },
+    get onOpenChange() {
+      return getProps().onOpenChange;
+    },
+  });
+
+  // Track selected key
+  const isControlled = () => getProps().selectedKey !== undefined;
+  const [internalSelectedKey, setInternalSelectedKey] = createSignal<Key | null>(
+    getProps().defaultSelectedKey ?? null
+  );
+
+  const selectedKey: Accessor<Key | null> = () => {
+    return isControlled() ? (getProps().selectedKey ?? null) : internalSelectedKey();
+  };
+
+  const setSelectedKey = (key: Key | null) => {
+    if (!isControlled()) {
+      setInternalSelectedKey(key);
+    }
+    getProps().onSelectionChange?.(key);
+  };
+
+  // Create list state with single selection
+  const listState = createListState<T>({
+    get items() {
+      return getProps().items;
+    },
+    get getKey() {
+      return getProps().getKey;
+    },
+    get getTextValue() {
+      return getProps().getTextValue;
+    },
+    get getDisabled() {
+      return getProps().getDisabled;
+    },
+    get disabledKeys() {
+      return getProps().disabledKeys;
+    },
+    selectionMode: 'single',
+    disallowEmptySelection: true,
+    get selectedKeys() {
+      const key = selectedKey();
+      return key != null ? [key] : [];
+    },
+    onSelectionChange(keys) {
+      // Get the first (and only) selected key
+      if (keys === 'all') return; // Not applicable for single select
+      const key = keys.size > 0 ? Array.from(keys)[0] : null;
+      setSelectedKey(key);
+      // Close the dropdown after selection
+      overlayState.close();
+    },
+  });
+
+  // Get the selected item from the collection
+  const selectedItem: Accessor<CollectionNode<T> | null> = () => {
+    const key = selectedKey();
+    if (key == null) return null;
+    return listState.collection().getItem(key);
+  };
+
+  return {
+    // Collection
+    collection: listState.collection,
+
+    // Focus management
+    focusedKey: listState.focusedKey,
+    setFocusedKey: listState.setFocusedKey,
+    isFocused: listState.isFocused,
+    setFocused: listState.setFocused,
+
+    // Overlay state
+    isOpen: overlayState.isOpen,
+    open: overlayState.open,
+    close: overlayState.close,
+    toggle: overlayState.toggle,
+
+    // Select-specific
+    selectedKey,
+    selectedItem,
+    setSelectedKey,
+    isKeyDisabled: (key: Key) => listState.isDisabled(key),
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get isRequired() {
+      return getProps().isRequired ?? false;
+    },
+  };
+}

package/src/select/index.d.ts

@@ -0,0 +1,2 @@
+export { createSelectState, type SelectStateProps, type SelectState, } from './createSelectState';
+//# sourceMappingURL=index.d.ts.map

package/src/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC"}

package/src/select/index.ts

@@ -0,0 +1,5 @@
+export {
+  createSelectState,
+  type SelectStateProps,
+  type SelectState,
+} from './createSelectState';

package/src/slider/createSliderState.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Creates state for a slider component.
+ * Based on @react-stately/slider useSliderState.
+ */
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from '../utils';
+export type SliderOrientation = 'horizontal' | 'vertical';
+export interface SliderStateProps {
+    /** The current value (controlled). */
+    value?: number;
+    /** The default value (uncontrolled). */
+    defaultValue?: number;
+    /** Handler called when the value changes. */
+    onChange?: (value: number) => void;
+    /** Handler called when the user stops dragging. */
+    onChangeEnd?: (value: number) => void;
+    /** The minimum value. */
+    minValue?: number;
+    /** The maximum value. */
+    maxValue?: number;
+    /** The step value. */
+    step?: number;
+    /** The orientation of the slider. */
+    orientation?: SliderOrientation;
+    /** Whether the slider is disabled. */
+    isDisabled?: boolean;
+    /** The locale for number formatting. */
+    locale?: string;
+    /** Number format options. */
+    formatOptions?: Intl.NumberFormatOptions;
+}
+export interface SliderState {
+    /** The current value. */
+    value: Accessor<number>;
+    /** Sets the value. */
+    setValue: (value: number) => void;
+    /** Sets the value by percent (0-1). */
+    setValuePercent: (percent: number) => void;
+    /** Gets the value as a percent (0-1). */
+    getValuePercent: Accessor<number>;
+    /** Gets the formatted value string. */
+    getFormattedValue: Accessor<string>;
+    /** Whether the thumb is being dragged. */
+    isDragging: Accessor<boolean>;
+    /** Sets the dragging state. */
+    setDragging: (dragging: boolean) => void;
+    /** Whether the slider is focused. */
+    isFocused: Accessor<boolean>;
+    /** Sets the focused state. */
+    setFocused: (focused: boolean) => void;
+    /** Increments the value by step. */
+    increment: (stepMultiplier?: number) => void;
+    /** Decrements the value by step. */
+    decrement: (stepMultiplier?: number) => void;
+    /** The minimum value. */
+    minValue: number;
+    /** The maximum value. */
+    maxValue: number;
+    /** The step value. */
+    step: number;
+    /** The page step (larger step for Page Up/Down). */
+    pageStep: number;
+    /** The orientation. */
+    orientation: SliderOrientation;
+    /** Whether the slider is disabled. */
+    isDisabled: boolean;
+}
+/**
+ * Provides state management for a slider component.
+ */
+export declare function createSliderState(props: MaybeAccessor<SliderStateProps>): SliderState;
+//# sourceMappingURL=createSliderState.d.ts.map

package/src/slider/createSliderState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSliderState.d.ts","sourceRoot":"","sources":["createSliderState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,QAAQ,EAA4B,MAAM,UAAU,CAAC;AACnE,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CAC1C;AAED,MAAM,WAAW,WAAW;IAC1B,yBAAyB;IACzB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxB,sBAAsB;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yCAAyC;IACzC,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAClC,uCAAuC;IACvC,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACpC,0CAA0C;IAC1C,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,qCAAqC;IACrC,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,8BAA8B;IAC9B,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,oCAAoC;IACpC,SAAS,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,oCAAoC;IACpC,SAAS,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,sCAAsC;IACtC,UAAU,EAAE,OAAO,CAAC;CACrB;AAwBD;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,GACrC,WAAW,CA+Gb"}