@proyecto-viviana/solid-stately 0.0.6 → 0.1.1

package/src/numberfield/createNumberFieldState.ts

@@ -0,0 +1,383 @@
+/**
+ * State management for NumberField.
+ * Based on @react-stately/numberfield useNumberFieldState.
+ */
+
+import { createSignal, createMemo, type Accessor } from 'solid-js';
+import { access, type MaybeAccessor } from '../utils';
+
+export interface NumberFieldStateProps {
+  /** The current value (controlled). */
+  value?: number;
+  /** The default value (uncontrolled). */
+  defaultValue?: number;
+  /** Handler called when the value changes. */
+  onChange?: (value: number) => void;
+  /** The minimum value. */
+  minValue?: number;
+  /** The maximum value. */
+  maxValue?: number;
+  /** The step value for increment/decrement. */
+  step?: number;
+  /** Whether the field is disabled. */
+  isDisabled?: boolean;
+  /** Whether the field is read-only. */
+  isReadOnly?: boolean;
+  /** The locale for number formatting. */
+  locale?: string;
+  /** Number format options. */
+  formatOptions?: Intl.NumberFormatOptions;
+}
+
+export interface NumberFieldState {
+  /** The current input value as a string. */
+  inputValue: Accessor<string>;
+  /** The current numeric value. */
+  numberValue: Accessor<number>;
+  /** Whether the value can be incremented. */
+  canIncrement: Accessor<boolean>;
+  /** Whether the value can be decremented. */
+  canDecrement: Accessor<boolean>;
+  /** Whether the field is disabled. */
+  isDisabled: Accessor<boolean>;
+  /** Whether the field is read-only. */
+  isReadOnly: Accessor<boolean>;
+  /** The minimum value. */
+  minValue: Accessor<number | undefined>;
+  /** The maximum value. */
+  maxValue: Accessor<number | undefined>;
+  /** Set the input value. */
+  setInputValue: (value: string) => void;
+  /** Validate a partial input value. */
+  validate: (value: string) => boolean;
+  /** Commit the current input value. */
+  commit: () => void;
+  /** Increment the value by step. */
+  increment: () => void;
+  /** Decrement the value by step. */
+  decrement: () => void;
+  /** Set to maximum value. */
+  incrementToMax: () => void;
+  /** Set to minimum value. */
+  decrementToMin: () => void;
+}
+
+/**
+ * Handles decimal operations to avoid floating point errors.
+ */
+function handleDecimalOperation(
+  operator: '+' | '-',
+  value1: number,
+  value2: number
+): number {
+  // Find the number of decimal places
+  const getDecimals = (n: number) => {
+    const str = String(n);
+    const idx = str.indexOf('.');
+    return idx === -1 ? 0 : str.length - idx - 1;
+  };
+
+  const decimals = Math.max(getDecimals(value1), getDecimals(value2));
+  const multiplier = Math.pow(10, decimals);
+
+  const int1 = Math.round(value1 * multiplier);
+  const int2 = Math.round(value2 * multiplier);
+
+  const result = operator === '+' ? int1 + int2 : int1 - int2;
+  return result / multiplier;
+}
+
+/**
+ * Clamps a value between min and max.
+ */
+function clamp(value: number, min?: number, max?: number): number {
+  let result = value;
+  if (min != null && result < min) result = min;
+  if (max != null && result > max) result = max;
+  return result;
+}
+
+/**
+ * Snaps a value to the nearest step.
+ */
+function snapToStep(value: number, step: number, min?: number): number {
+  const base = min ?? 0;
+  const diff = value - base;
+  const steps = Math.round(diff / step);
+  return handleDecimalOperation('+', base, steps * step);
+}
+
+/**
+ * Creates state for a number field.
+ */
+export function createNumberFieldState(
+  props: MaybeAccessor<NumberFieldStateProps>
+): NumberFieldState {
+  const getProps = () => access(props);
+
+  // Get locale and formatter
+  const locale = () => getProps().locale ?? 'en-US';
+  const formatOptions = () => getProps().formatOptions ?? {};
+
+  // Create number formatter
+  const formatter = createMemo(() => {
+    return new Intl.NumberFormat(locale(), formatOptions());
+  });
+
+  // Create number parser (simplified - real implementation would be more robust)
+  const parseNumber = (value: string): number => {
+    if (!value || value === '' || value === '-') return NaN;
+
+    // Handle locale-specific decimal separators
+    const opts = formatOptions();
+    const testNumber = formatter().format(1.1);
+    const decimalSeparator = testNumber.charAt(1);
+
+    // Normalize the input
+    let normalized = value;
+    if (decimalSeparator !== '.') {
+      normalized = normalized.replace(decimalSeparator, '.');
+    }
+
+    // Remove grouping separators and currency symbols
+    normalized = normalized.replace(/[^\d.\-]/g, '');
+
+    const parsed = parseFloat(normalized);
+    return parsed;
+  };
+
+  // Format a number to string
+  const formatNumber = (value: number): string => {
+    if (isNaN(value)) return '';
+    return formatter().format(value);
+  };
+
+  // Determine step value
+  const step = createMemo(() => {
+    const p = getProps();
+    if (p.step != null) return p.step;
+    // Default step for percent is 0.01
+    if (p.formatOptions?.style === 'percent') return 0.01;
+    return 1;
+  });
+
+  // Internal signals
+  const [inputValue, setInputValueInternal] = createSignal<string>('');
+  const [numberValue, setNumberValue] = createSignal<number>(NaN);
+
+  // Initialize from props
+  const initValue = () => {
+    const p = getProps();
+    const initial = p.value ?? p.defaultValue;
+    if (initial != null) {
+      setNumberValue(initial);
+      setInputValueInternal(formatNumber(initial));
+    }
+  };
+
+  // Call init on first access
+  let initialized = false;
+  const ensureInitialized = () => {
+    if (!initialized) {
+      initialized = true;
+      initValue();
+    }
+  };
+
+  // Controlled mode: sync with props.value
+  const actualNumberValue = createMemo(() => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.value !== undefined) {
+      return p.value;
+    }
+    return numberValue();
+  });
+
+  // Validate partial input
+  const validate = (value: string): boolean => {
+    if (value === '' || value === '-') return true;
+
+    // Allow partial decimal input like "1."
+    const opts = formatOptions();
+    const testNumber = formatter().format(1.1);
+    const decimalSeparator = testNumber.charAt(1);
+
+    // Check if it's a valid partial number
+    const pattern = new RegExp(
+      `^-?\\d*${decimalSeparator === '.' ? '\\.' : decimalSeparator}?\\d*$`
+    );
+    return pattern.test(value);
+  };
+
+  // Set input value with validation
+  const setInputValue = (value: string) => {
+    ensureInitialized();
+    setInputValueInternal(value);
+  };
+
+  // Commit the current input value
+  const commit = () => {
+    ensureInitialized();
+    const p = getProps();
+    const input = inputValue();
+
+    if (input === '' || input === '-') {
+      // Clear value
+      setNumberValue(NaN);
+      setInputValueInternal('');
+      return;
+    }
+
+    let parsed = parseNumber(input);
+
+    if (isNaN(parsed)) {
+      // Invalid input - revert to current value
+      setInputValueInternal(formatNumber(actualNumberValue()));
+      return;
+    }
+
+    // Clamp and snap
+    parsed = clamp(parsed, p.minValue, p.maxValue);
+    parsed = snapToStep(parsed, step(), p.minValue);
+
+    // Update state
+    setNumberValue(parsed);
+    setInputValueInternal(formatNumber(parsed));
+
+    // Notify change
+    if (p.value === undefined) {
+      p.onChange?.(parsed);
+    } else {
+      p.onChange?.(parsed);
+    }
+  };
+
+  // Check if can increment
+  const canIncrement = createMemo(() => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return false;
+
+    const current = actualNumberValue();
+    if (isNaN(current)) return true; // Can start from min
+
+    if (p.maxValue == null) return true;
+    return handleDecimalOperation('+', current, step()) <= p.maxValue;
+  });
+
+  // Check if can decrement
+  const canDecrement = createMemo(() => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return false;
+
+    const current = actualNumberValue();
+    if (isNaN(current)) return true; // Can start from max
+
+    if (p.minValue == null) return true;
+    return handleDecimalOperation('-', current, step()) >= p.minValue;
+  });
+
+  // Increment by step
+  const increment = () => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+
+    let current = actualNumberValue();
+
+    if (isNaN(current)) {
+      // Start from min or 0
+      current = p.minValue ?? 0;
+    } else {
+      // Snap and increment
+      current = snapToStep(current, step(), p.minValue);
+      current = handleDecimalOperation('+', current, step());
+    }
+
+    // Clamp
+    current = clamp(current, p.minValue, p.maxValue);
+
+    // Update
+    setNumberValue(current);
+    setInputValueInternal(formatNumber(current));
+    p.onChange?.(current);
+  };
+
+  // Decrement by step
+  const decrement = () => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+
+    let current = actualNumberValue();
+
+    if (isNaN(current)) {
+      // Start from max or 0
+      current = p.maxValue ?? 0;
+    } else {
+      // Snap and decrement
+      current = snapToStep(current, step(), p.minValue);
+      current = handleDecimalOperation('-', current, step());
+    }
+
+    // Clamp
+    current = clamp(current, p.minValue, p.maxValue);
+
+    // Update
+    setNumberValue(current);
+    setInputValueInternal(formatNumber(current));
+    p.onChange?.(current);
+  };
+
+  // Set to max
+  const incrementToMax = () => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+
+    if (p.maxValue == null) return;
+
+    const snapped = snapToStep(p.maxValue, step(), p.minValue);
+    setNumberValue(snapped);
+    setInputValueInternal(formatNumber(snapped));
+    p.onChange?.(snapped);
+  };
+
+  // Set to min
+  const decrementToMin = () => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+
+    if (p.minValue == null) return;
+
+    setNumberValue(p.minValue);
+    setInputValueInternal(formatNumber(p.minValue));
+    p.onChange?.(p.minValue);
+  };
+
+  return {
+    get inputValue() {
+      ensureInitialized();
+      return inputValue;
+    },
+    get numberValue() {
+      return actualNumberValue;
+    },
+    canIncrement,
+    canDecrement,
+    isDisabled: () => getProps().isDisabled ?? false,
+    isReadOnly: () => getProps().isReadOnly ?? false,
+    minValue: () => getProps().minValue,
+    maxValue: () => getProps().maxValue,
+    setInputValue,
+    validate,
+    commit,
+    increment,
+    decrement,
+    incrementToMax,
+    decrementToMin,
+  };
+}

package/src/numberfield/index.d.ts

@@ -0,0 +1,2 @@
+export { createNumberFieldState, type NumberFieldStateProps, type NumberFieldState, } from './createNumberFieldState';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC"}

package/src/numberfield/index.ts

@@ -0,0 +1,5 @@
+export {
+  createNumberFieldState,
+  type NumberFieldStateProps,
+  type NumberFieldState,
+} from './createNumberFieldState';

package/src/overlays/createOverlayTriggerState.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Manages state for an overlay trigger.
+ * Based on @react-stately/overlays useOverlayTriggerState.
+ */
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from '../utils';
+export interface OverlayTriggerProps {
+    /** Whether the overlay is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Whether the overlay is open (controlled). */
+    isOpen?: boolean;
+    /** Handler that is called when the overlay's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export interface OverlayTriggerState {
+    /** Whether the overlay is currently open. */
+    readonly isOpen: Accessor<boolean>;
+    /** Sets whether the overlay is open. */
+    setOpen(isOpen: boolean): void;
+    /** Opens the overlay. */
+    open(): void;
+    /** Closes the overlay. */
+    close(): void;
+    /** Toggles the overlay's visibility. */
+    toggle(): void;
+}
+/**
+ * Manages state for an overlay trigger. Tracks whether the overlay is open, and provides
+ * methods to toggle this state.
+ */
+export declare function createOverlayTriggerState(props?: MaybeAccessor<OverlayTriggerProps>): OverlayTriggerState;
+//# sourceMappingURL=createOverlayTriggerState.d.ts.map

package/src/overlays/createOverlayTriggerState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOverlayTriggerState.d.ts","sourceRoot":"","sources":["createOverlayTriggerState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAgB,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,mBAAmB;IAClC,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnC,wCAAwC;IACxC,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,yBAAyB;IACzB,IAAI,IAAI,IAAI,CAAC;IACb,0BAA0B;IAC1B,KAAK,IAAI,IAAI,CAAC;IACd,wCAAwC;IACxC,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,GAAE,aAAa,CAAC,mBAAmB,CAAM,GAC7C,mBAAmB,CA8BrB"}

package/src/overlays/createOverlayTriggerState.ts

@@ -0,0 +1,67 @@
+/**
+ * Manages state for an overlay trigger.
+ * Based on @react-stately/overlays useOverlayTriggerState.
+ */
+
+import { createSignal, type Accessor } from 'solid-js';
+import { access, type MaybeAccessor } from '../utils';
+
+export interface OverlayTriggerProps {
+  /** Whether the overlay is open by default (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Whether the overlay is open (controlled). */
+  isOpen?: boolean;
+  /** Handler that is called when the overlay's open state changes. */
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+export interface OverlayTriggerState {
+  /** Whether the overlay is currently open. */
+  readonly isOpen: Accessor<boolean>;
+  /** Sets whether the overlay is open. */
+  setOpen(isOpen: boolean): void;
+  /** Opens the overlay. */
+  open(): void;
+  /** Closes the overlay. */
+  close(): void;
+  /** Toggles the overlay's visibility. */
+  toggle(): void;
+}
+
+/**
+ * Manages state for an overlay trigger. Tracks whether the overlay is open, and provides
+ * methods to toggle this state.
+ */
+export function createOverlayTriggerState(
+  props: MaybeAccessor<OverlayTriggerProps> = {}
+): OverlayTriggerState {
+  const propsAccessor = () => access(props);
+
+  // Use controlled state if isOpen is provided, otherwise use internal state
+  const [internalOpen, setInternalOpen] = createSignal(propsAccessor().defaultOpen ?? false);
+
+  const isOpen: Accessor<boolean> = () => {
+    const p = propsAccessor();
+    return p.isOpen !== undefined ? p.isOpen : internalOpen();
+  };
+
+  const setOpen = (open: boolean) => {
+    const p = propsAccessor();
+    if (p.isOpen === undefined) {
+      setInternalOpen(open);
+    }
+    p.onOpenChange?.(open);
+  };
+
+  const open = () => setOpen(true);
+  const close = () => setOpen(false);
+  const toggle = () => setOpen(!isOpen());
+
+  return {
+    isOpen,
+    setOpen,
+    open,
+    close,
+    toggle,
+  };
+}

package/src/overlays/index.d.ts

@@ -0,0 +1,2 @@
+export { createOverlayTriggerState, type OverlayTriggerProps, type OverlayTriggerState, } from './createOverlayTriggerState';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,6BAA6B,CAAC"}

package/src/overlays/index.ts

@@ -0,0 +1,5 @@
+export {
+  createOverlayTriggerState,
+  type OverlayTriggerProps,
+  type OverlayTriggerState,
+} from './createOverlayTriggerState';

package/{dist → src}/radio/createRadioGroupState.d.ts

@@ -74,3 +74,4 @@ export declare const radioGroupSyncVersion: WeakMap<RadioGroupState, Accessor<nu
  * Provides a name for the group, and manages selection and focus state.
  */
 export declare function createRadioGroupState(props?: MaybeAccessor<RadioGroupProps>): RadioGroupState;
+//# sourceMappingURL=createRadioGroupState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createRadioGroupState.d.ts","sourceRoot":"","sources":["createRadioGroupState.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAgB,QAAQ,EAAW,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAU,MAAM,UAAU,CAAC;AAOtD,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,kEAAkE;IAClE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,0EAA0E;IAC1E,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,eAAe;IAC9B,+DAA+D;IAC/D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,4CAA4C;IAC5C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAE5B,oCAAoC;IACpC,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAEhD,kCAAkC;IAClC,QAAQ,CAAC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7C,+BAA+B;IAC/B,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAE7C,2CAA2C;IAC3C,QAAQ,CAAC,gBAAgB,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAEnD,mCAAmC;IACnC,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CACjD;AAMD;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAiB,CAAC;AAM/F;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,GAAE,aAAa,CAAC,eAAe,CAAM,GACzC,eAAe,CAgGjB"}

package/{dist → src}/radio/index.d.ts

@@ -1 +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/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';