@proyecto-viviana/solid-stately 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -1,6 +1,263 @@
-export { createToggleState, type ToggleStateOptions, type ToggleState, } from './toggle';
-export { createTextFieldState, type TextFieldStateOptions, type TextFieldState, } from './textfield';
-export { createCheckboxGroupState, type CheckboxGroupProps, type CheckboxGroupState, } from './checkbox';
-export { createRadioGroupState, radioGroupSyncVersion, type RadioGroupProps, type RadioGroupState, } from './radio';
-export { createIsSSR, createId, canUseDOM } from './ssr';
-export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from './utils';
+import { Accessor } from 'solid-js';
+
+/**
+ * Reactivity utilities for Solid Stately
+ *
+ * Provides type-safe utilities for working with SolidJS reactivity patterns.
+ */
+
+/**
+ * A value that may be either a raw value or an accessor function.
+ * This is a common pattern in SolidJS for props that may be reactive.
+ */
+type MaybeAccessor<T> = T | Accessor<T>;
+/**
+ * Unwraps a MaybeAccessor to get the underlying value.
+ * If the input is a function, it calls it to get the value.
+ * Otherwise, it returns the value directly.
+ *
+ * @param value - The value or accessor to unwrap.
+ */
+declare function access<T>(value: MaybeAccessor<T>): T;
+/**
+ * A value that may be undefined or an accessor that returns the value or undefined.
+ */
+type MaybeAccessorValue<T> = T | undefined | Accessor<T | undefined>;
+/**
+ * Checks if a value is an accessor function.
+ */
+declare function isAccessor<T>(value: MaybeAccessor<T>): value is Accessor<T>;
+
+/**
+ * Toggle state for Solid Stately
+ *
+ * Provides state management for toggle components like checkboxes and switches.
+ *
+ * This is a 1:1 port of @react-stately/toggle's useToggleState.
+ */
+
+interface ToggleStateOptions {
+    /** Whether the element should be selected (controlled). */
+    isSelected?: boolean;
+    /** Whether the element should be selected by default (uncontrolled). */
+    defaultSelected?: boolean;
+    /** Handler that is called when the element's selection state changes. */
+    onChange?: (isSelected: boolean) => void;
+    /** Whether the element is read only. */
+    isReadOnly?: boolean;
+}
+interface ToggleState {
+    /** Whether the toggle is selected. */
+    readonly isSelected: Accessor<boolean>;
+    /** Whether the toggle is selected by default. */
+    readonly defaultSelected: boolean;
+    /** Updates selection state. */
+    setSelected(isSelected: boolean): void;
+    /** Toggle the selection state. */
+    toggle(): void;
+}
+/**
+ * Provides state management for toggle components like checkboxes and switches.
+ */
+declare function createToggleState(props?: MaybeAccessor<ToggleStateOptions>): ToggleState;
+
+/**
+ * TextField state for Solid Stately
+ *
+ * Provides state management for text input components.
+ *
+ * This is a port of @react-stately/utils's useControlledState pattern
+ * as used by @react-aria/textfield.
+ */
+
+interface TextFieldStateOptions {
+    /** The current value (controlled). */
+    value?: string;
+    /** The default value (uncontrolled). */
+    defaultValue?: string;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: string) => void;
+}
+interface TextFieldState {
+    /** The current value of the text field. */
+    readonly value: Accessor<string>;
+    /** Sets the value of the text field. */
+    setValue(value: string): void;
+}
+/**
+ * Provides state management for text input components.
+ * Supports both controlled and uncontrolled modes.
+ */
+declare function createTextFieldState(props?: MaybeAccessor<TextFieldStateOptions>): TextFieldState;
+
+/**
+ * Checkbox group state for Solid Stately
+ *
+ * Provides state management for a checkbox group component.
+ * Provides a name for the group, and manages selection and focus state.
+ *
+ * This is a 1:1 port of @react-stately/checkbox's useCheckboxGroupState.
+ */
+
+interface CheckboxGroupProps {
+    /** The current selected values (controlled). */
+    value?: string[];
+    /** The default selected values (uncontrolled). */
+    defaultValue?: string[];
+    /** Handler that is called when the value changes. */
+    onChange?: (value: string[]) => void;
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is required. */
+    isRequired?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** The name of the checkbox group, used when submitting an HTML form. */
+    name?: string;
+    /** The form to associate the checkbox group with. */
+    form?: string;
+    /** The label for the checkbox group. */
+    label?: string;
+    /** Handler that is called when the checkbox group receives focus. */
+    onFocus?: (e: FocusEvent) => void;
+    /** Handler that is called when the checkbox group loses focus. */
+    onBlur?: (e: FocusEvent) => void;
+    /** Handler that is called when the checkbox group's focus status changes. */
+    onFocusChange?: (isFocused: boolean) => void;
+}
+interface CheckboxGroupState {
+    /** Current selected values. */
+    readonly value: Accessor<readonly string[]>;
+    /** Default selected values. */
+    readonly defaultValue: readonly string[];
+    /** Whether the checkbox group is disabled. */
+    readonly isDisabled: boolean;
+    /** Whether the checkbox group is read only. */
+    readonly isReadOnly: boolean;
+    /** Whether the checkbox group is invalid. */
+    readonly isInvalid: boolean;
+    /**
+     * Whether the checkboxes in the group are required.
+     * This changes to false once at least one item is selected.
+     */
+    readonly isRequired: Accessor<boolean>;
+    /** Returns whether the given value is selected. */
+    isSelected(value: string): boolean;
+    /** Sets the selected values. */
+    setValue(value: string[]): void;
+    /** Adds a value to the set of selected values. */
+    addValue(value: string): void;
+    /** Removes a value from the set of selected values. */
+    removeValue(value: string): void;
+    /** Toggles a value in the set of selected values. */
+    toggleValue(value: string): void;
+}
+/**
+ * Provides state management for a checkbox group component.
+ * Provides a name for the group, and manages selection and focus state.
+ */
+declare function createCheckboxGroupState(props?: MaybeAccessor<CheckboxGroupProps>): CheckboxGroupState;
+
+/**
+ * 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.
+ */
+
+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;
+}
+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 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
+ */
+declare const radioGroupSyncVersion: WeakMap<RadioGroupState, Accessor<number>>;
+/**
+ * Provides state management for a radio group component.
+ * Provides a name for the group, and manages selection and focus state.
+ */
+declare function createRadioGroupState(props?: MaybeAccessor<RadioGroupProps>): RadioGroupState;
+
+/**
+ * SSR utilities for Solid Stately
+ *
+ * SolidJS has built-in SSR support with `isServer` and `createUniqueId()`.
+ * These utilities provide a consistent API matching React-Stately's patterns.
+ */
+/**
+ * Returns whether the component is currently being server side rendered.
+ * Can be used to delay browser-specific rendering until after hydration.
+ */
+declare function createIsSSR(): boolean;
+/**
+ * Generate a unique ID that is stable across server and client.
+ * Uses SolidJS's built-in createUniqueId which handles SSR correctly.
+ *
+ * @param defaultId - Optional default ID to use instead of generating one.
+ */
+declare function createId(defaultId?: string): string;
+/**
+ * Check if we can use DOM APIs.
+ * This is useful for code that needs to run only in the browser.
+ */
+declare const canUseDOM: boolean;
+
+export { type CheckboxGroupProps, type CheckboxGroupState, type MaybeAccessor, type MaybeAccessorValue, type RadioGroupProps, type RadioGroupState, type TextFieldState, type TextFieldStateOptions, type ToggleState, type ToggleStateOptions, access, canUseDOM, createCheckboxGroupState, createId, createIsSSR, createRadioGroupState, createTextFieldState, createToggleState, isAccessor, radioGroupSyncVersion };

package/dist/index.js

@@ -1,11 +1,17 @@
-import { createSignal, createUniqueId, untrack } from "solid-js";
-import { isServer } from "solid-js/web";
+import { createSignal, createUniqueId, untrack } from 'solid-js';
+import { isServer } from 'solid-js/web';
+
+// src/toggle/createToggleState.ts
+
+// src/utils/reactivity.ts
 function access(value) {
   return typeof value === "function" ? value() : value;
 }
 function isAccessor(value) {
   return typeof value === "function";
 }
+
+// src/toggle/createToggleState.ts
 function createToggleState(props = {}) {
   const getProps = () => access(props);
   const initialProps = getProps();
@@ -17,7 +23,6 @@ function createToggleState(props = {}) {
     return isControlled() ? p.isSelected ?? false : internalSelected();
   };
   function setSelected(value) {
-    var _a;
     const p = getProps();
     if (p.isReadOnly) {
       return;
@@ -25,7 +30,7 @@ function createToggleState(props = {}) {
     if (!isControlled()) {
       setInternalSelected(value);
     }
-    (_a = p.onChange) == null ? void 0 : _a.call(p, value);
+    p.onChange?.(value);
   }
   function toggle() {
     const p = getProps();
@@ -52,12 +57,11 @@ function createTextFieldState(props = {}) {
     return isControlled() ? p.value ?? "" : internalValue();
   };
   function setValue(newValue) {
-    var _a;
     const p = getProps();
     if (!isControlled()) {
       setInternalValue(newValue);
     }
-    (_a = p.onChange) == null ? void 0 : _a.call(p, newValue);
+    p.onChange?.(newValue);
   }
   return {
     value,
@@ -82,7 +86,6 @@ function createCheckboxGroupState(props = {}) {
     return getProps().isInvalid ?? false;
   };
   function setValue(newValue) {
-    var _a;
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
       return;
@@ -90,7 +93,7 @@ function createCheckboxGroupState(props = {}) {
     if (!isControlled()) {
       setInternalValue(newValue);
     }
-    (_a = p.onChange) == null ? void 0 : _a.call(p, newValue);
+    p.onChange?.(newValue);
   }
   function isSelected(checkValue) {
     return value().includes(checkValue);
@@ -156,8 +159,10 @@ function createId(defaultId) {
   }
   return `solid-stately-${createUniqueId()}`;
 }
-const canUseDOM = !isServer;
-const radioGroupSyncVersion = /* @__PURE__ */ new WeakMap();
+var canUseDOM = !isServer;
+
+// src/radio/createRadioGroupState.ts
+var radioGroupSyncVersion = /* @__PURE__ */ new WeakMap();
 function createRadioGroupState(props = {}) {
   const getProps = () => access(props);
   const initialProps = untrack(() => getProps());
@@ -179,7 +184,6 @@ function createRadioGroupState(props = {}) {
     return getProps().isInvalid ?? false;
   };
   function setSelectedValue(value) {
-    var _a;
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
       return;
@@ -189,7 +193,7 @@ function createRadioGroupState(props = {}) {
       setInternalValue(value);
     }
     if (value != null) {
-      (_a = p.onChange) == null ? void 0 : _a.call(p, value);
+      p.onChange?.(value);
     }
   }
   function setLastFocusedValue(value) {
@@ -218,16 +222,5 @@ function createRadioGroupState(props = {}) {
   radioGroupSyncVersion.set(state, syncVersion);
   return state;
 }
-export {
-  access,
-  canUseDOM,
-  createCheckboxGroupState,
-  createId,
-  createIsSSR,
-  createRadioGroupState,
-  createTextFieldState,
-  createToggleState,
-  isAccessor,
-  radioGroupSyncVersion
-};
-//# sourceMappingURL=index.js.map
+
+export { access, canUseDOM, createCheckboxGroupState, createId, createIsSSR, createRadioGroupState, createTextFieldState, createToggleState, isAccessor, radioGroupSyncVersion };

package/dist/index.jsx

@@ -0,0 +1,247 @@
+// src/toggle/createToggleState.ts
+import { createSignal } from "solid-js";
+
+// src/utils/reactivity.ts
+function access(value) {
+  return typeof value === "function" ? value() : value;
+}
+function isAccessor(value) {
+  return typeof value === "function";
+}
+
+// src/toggle/createToggleState.ts
+function createToggleState(props = {}) {
+  const getProps = () => access(props);
+  const initialProps = getProps();
+  const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
+  const [internalSelected, setInternalSelected] = createSignal(initialSelected);
+  const isControlled = () => getProps().isSelected !== void 0;
+  const isSelected = () => {
+    const p = getProps();
+    return isControlled() ? p.isSelected ?? false : internalSelected();
+  };
+  function setSelected(value) {
+    const p = getProps();
+    if (p.isReadOnly) {
+      return;
+    }
+    if (!isControlled()) {
+      setInternalSelected(value);
+    }
+    p.onChange?.(value);
+  }
+  function toggle() {
+    const p = getProps();
+    if (p.isReadOnly) {
+      return;
+    }
+    setSelected(!isSelected());
+  }
+  return {
+    isSelected,
+    defaultSelected: initialProps.defaultSelected ?? initialSelected,
+    setSelected,
+    toggle
+  };
+}
+
+// src/textfield/createTextFieldState.ts
+import { createSignal as createSignal2 } from "solid-js";
+function createTextFieldState(props = {}) {
+  const getProps = () => access(props);
+  const initialProps = getProps();
+  const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
+  const [internalValue, setInternalValue] = createSignal2(initialValue);
+  const isControlled = () => getProps().value !== void 0;
+  const value = () => {
+    const p = getProps();
+    return isControlled() ? p.value ?? "" : internalValue();
+  };
+  function setValue(newValue) {
+    const p = getProps();
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+    p.onChange?.(newValue);
+  }
+  return {
+    value,
+    setValue
+  };
+}
+
+// src/checkbox/createCheckboxGroupState.ts
+import { createSignal as createSignal3 } from "solid-js";
+function createCheckboxGroupState(props = {}) {
+  const getProps = () => access(props);
+  const initialProps = getProps();
+  const initialValue = initialProps.value ?? initialProps.defaultValue ?? [];
+  const [internalValue, setInternalValue] = createSignal3(initialValue);
+  const isControlled = () => getProps().value !== void 0;
+  const value = () => {
+    const p = getProps();
+    return isControlled() ? p.value ?? [] : internalValue();
+  };
+  const isRequired = () => {
+    const p = getProps();
+    return !!p.isRequired && value().length === 0;
+  };
+  const isInvalid = () => {
+    return getProps().isInvalid ?? false;
+  };
+  function setValue(newValue) {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+    p.onChange?.(newValue);
+  }
+  function isSelected(checkValue) {
+    return value().includes(checkValue);
+  }
+  function addValue(addVal) {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+    const current = value();
+    if (!current.includes(addVal)) {
+      setValue([...current, addVal]);
+    }
+  }
+  function removeValue(removeVal) {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+    const current = value();
+    if (current.includes(removeVal)) {
+      setValue(current.filter((v) => v !== removeVal));
+    }
+  }
+  function toggleValue(toggleVal) {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+    const current = value();
+    if (current.includes(toggleVal)) {
+      setValue(current.filter((v) => v !== toggleVal));
+    } else {
+      setValue([...current, toggleVal]);
+    }
+  }
+  return {
+    value,
+    defaultValue: initialProps.defaultValue ?? initialValue,
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get isReadOnly() {
+      return getProps().isReadOnly ?? false;
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
+    isRequired,
+    isSelected,
+    setValue,
+    addValue,
+    removeValue,
+    toggleValue
+  };
+}
+
+// src/radio/createRadioGroupState.ts
+import { createSignal as createSignal4, untrack } from "solid-js";
+
+// src/ssr/index.ts
+import { createUniqueId } from "solid-js";
+import { isServer } from "solid-js/web";
+function createIsSSR() {
+  return isServer;
+}
+function createId(defaultId) {
+  if (defaultId) {
+    return defaultId;
+  }
+  return `solid-stately-${createUniqueId()}`;
+}
+var canUseDOM = !isServer;
+
+// src/radio/createRadioGroupState.ts
+var radioGroupSyncVersion = /* @__PURE__ */ new WeakMap();
+function createRadioGroupState(props = {}) {
+  const getProps = () => access(props);
+  const initialProps = untrack(() => getProps());
+  const name = initialProps.name || `radio-group-${createId()}`;
+  const [internalValue, setInternalValue] = createSignal4(
+    initialProps.defaultValue ?? null
+  );
+  const [lastFocusedValue, setLastFocusedValueInternal] = createSignal4(null);
+  const [syncVersion, setSyncVersion] = createSignal4(0);
+  const isControlled = () => getProps().value !== void 0;
+  const selectedValue = () => {
+    const p = getProps();
+    if (p.value !== void 0) {
+      return p.value ?? null;
+    }
+    return internalValue();
+  };
+  const isInvalid = () => {
+    return getProps().isInvalid ?? false;
+  };
+  function setSelectedValue(value) {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+    setSyncVersion((v) => v + 1);
+    if (!isControlled()) {
+      setInternalValue(value);
+    }
+    if (value != null) {
+      p.onChange?.(value);
+    }
+  }
+  function setLastFocusedValue(value) {
+    setLastFocusedValueInternal(value);
+  }
+  const state = {
+    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();
+    }
+  };
+  radioGroupSyncVersion.set(state, syncVersion);
+  return state;
+}
+export {
+  access,
+  canUseDOM,
+  createCheckboxGroupState,
+  createId,
+  createIsSSR,
+  createRadioGroupState,
+  createTextFieldState,
+  createToggleState,
+  isAccessor,
+  radioGroupSyncVersion
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/solid-stately",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A 1-1 SolidJS port of React Stately - headless state management for UI components",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,25 +8,28 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "solid": "./dist/index.js",
+      "solid": "./dist/index.jsx",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "rimraf dist tsconfig.build.tsbuildinfo && vite build && tsc -p tsconfig.build.json",
-    "dev": "vite build --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "prepublishOnly": "bun run build"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"
   },
   "devDependencies": {
-    "solid-js": "^1.9.10"
+    "esbuild-plugin-solid": "^0.6.0",
+    "solid-js": "^1.9.10",
+    "tsup": "^8.0.0"
   },
   "keywords": [
     "solid",