@proyecto-viviana/solid-stately 0.2.2 → 0.2.4

package/src/slider/createSliderState.ts

@@ -0,0 +1,211 @@
+/**
+ * Creates state for a slider component.
+ * Based on @react-stately/slider useSliderState.
+ */
+
+import { type Accessor, createSignal, createMemo } from 'solid-js';
+import { access, 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;
+}
+
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+
+/**
+ * Clamps a value between min and max.
+ */
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Snaps a value to the nearest step.
+ */
+function snapToStep(value: number, min: number, max: number, step: number): number {
+  const snapped = Math.round((value - min) / step) * step + min;
+  // Handle floating point precision issues
+  const decimalPlaces = (step.toString().split('.')[1] || '').length;
+  const rounded = parseFloat(snapped.toFixed(decimalPlaces));
+  return clamp(rounded, min, max);
+}
+
+/**
+ * Provides state management for a slider component.
+ */
+export function createSliderState(
+  props: MaybeAccessor<SliderStateProps>
+): SliderState {
+  const getProps = () => access(props);
+
+  // Get static values with defaults
+  const minValue = getProps().minValue ?? DEFAULT_MIN;
+  const maxValue = getProps().maxValue ?? DEFAULT_MAX;
+  const step = getProps().step ?? DEFAULT_STEP;
+  const orientation = getProps().orientation ?? 'horizontal';
+  const isDisabled = getProps().isDisabled ?? false;
+
+  // Calculate page step (10% of range, snapped to step)
+  const pageStep = Math.max(step, snapToStep((maxValue - minValue) / 10, 0, maxValue - minValue, step));
+
+  // Controlled vs uncontrolled
+  const isControlled = () => getProps().value !== undefined;
+
+  // Internal signal for uncontrolled mode
+  const [internalValue, setInternalValue] = createSignal(
+    snapToStep(getProps().defaultValue ?? minValue, minValue, maxValue, step)
+  );
+
+  // Dragging and focus state
+  const [isDragging, setIsDragging] = createSignal(false);
+  const [isFocused, setIsFocused] = createSignal(false);
+
+  // Current value accessor
+  const value = createMemo(() => {
+    const p = getProps();
+    const rawValue = isControlled() ? (p.value ?? minValue) : internalValue();
+    return snapToStep(rawValue, minValue, maxValue, step);
+  });
+
+  // Value as percent (0-1)
+  const getValuePercent = createMemo(() => {
+    return (value() - minValue) / (maxValue - minValue);
+  });
+
+  // Formatted value
+  const getFormattedValue = createMemo(() => {
+    const p = getProps();
+    const formatter = new Intl.NumberFormat(p.locale, p.formatOptions);
+    return formatter.format(value());
+  });
+
+  // Set value function
+  const setValue = (newValue: number) => {
+    if (isDisabled) return;
+
+    const p = getProps();
+    const snappedValue = snapToStep(newValue, minValue, maxValue, step);
+
+    if (!isControlled()) {
+      setInternalValue(snappedValue);
+    }
+
+    p.onChange?.(snappedValue);
+  };
+
+  // Set value by percent
+  const setValuePercent = (percent: number) => {
+    const clampedPercent = clamp(percent, 0, 1);
+    const newValue = clampedPercent * (maxValue - minValue) + minValue;
+    setValue(newValue);
+  };
+
+  // Dragging state management
+  const setDragging = (dragging: boolean) => {
+    const wasDragging = isDragging();
+    setIsDragging(dragging);
+
+    // Call onChangeEnd when dragging stops
+    if (wasDragging && !dragging) {
+      getProps().onChangeEnd?.(value());
+    }
+  };
+
+  // Increment/decrement
+  const increment = (stepMultiplier = 1) => {
+    if (isDisabled) return;
+    setValue(value() + step * stepMultiplier);
+  };
+
+  const decrement = (stepMultiplier = 1) => {
+    if (isDisabled) return;
+    setValue(value() - step * stepMultiplier);
+  };
+
+  // Set focused state
+  const setFocused = (focused: boolean) => {
+    setIsFocused(focused);
+  };
+
+  return {
+    value,
+    setValue,
+    setValuePercent,
+    getValuePercent,
+    getFormattedValue,
+    isDragging,
+    setDragging,
+    isFocused,
+    setFocused,
+    increment,
+    decrement,
+    minValue,
+    maxValue,
+    step,
+    pageStep,
+    orientation,
+    isDisabled,
+  };
+}

package/src/slider/index.d.ts

@@ -0,0 +1,3 @@
+export { createSliderState } from './createSliderState';
+export type { SliderState, SliderStateProps, SliderOrientation, } from './createSliderState';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC"}

package/src/slider/index.ts

@@ -0,0 +1,6 @@
+export { createSliderState } from './createSliderState';
+export type {
+  SliderState,
+  SliderStateProps,
+  SliderOrientation,
+} from './createSliderState';

package/src/ssr/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+/**
+ * Re-export isServer from solid-js/web for convenience.
+ */
+export declare const isServer: boolean;
+/**
+ * Returns whether the component is currently being server side rendered.
+ * Can be used to delay browser-specific rendering until after hydration.
+ */
+export 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.
+ */
+export 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.
+ */
+export declare const canUseDOM: boolean;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH;;GAEG;AACH,eAAO,MAAM,QAAQ,SAAY,CAAC;AAElC;;;GAGG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAKnD;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,SAAY,CAAC"}

package/src/ssr/index.ts

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+
+import { createUniqueId } from 'solid-js';
+import { isServer as _isServer } from 'solid-js/web';
+
+/**
+ * Re-export isServer from solid-js/web for convenience.
+ */
+export const isServer = _isServer;
+
+/**
+ * Returns whether the component is currently being server side rendered.
+ * Can be used to delay browser-specific rendering until after hydration.
+ */
+export function createIsSSR(): boolean {
+  return isServer;
+}
+
+/**
+ * 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.
+ */
+export function createId(defaultId?: string): string {
+  if (defaultId) {
+    return defaultId;
+  }
+  return `solid-stately-${createUniqueId()}`;
+}
+
+/**
+ * Check if we can use DOM APIs.
+ * This is useful for code that needs to run only in the browser.
+ */
+export const canUseDOM = !isServer;

package/src/table/TableCollection.d.ts

@@ -0,0 +1,52 @@
+/**
+ * TableCollection - A collection class for table data.
+ * Based on @react-stately/table/TableCollection.
+ */
+import type { Key } from '../collections/types';
+import type { GridNode } from '../grid/types';
+import type { TableCollection as ITableCollection, TableCollectionOptions } from './types';
+/**
+ * Creates a table collection from column and row definitions.
+ */
+export declare class TableCollection<T = unknown> implements ITableCollection<T> {
+    private _columns;
+    private _rows;
+    private _headerRows;
+    private _body;
+    private _head;
+    private _keyMap;
+    private _rowHeaderColumnKeys;
+    private _size;
+    constructor(options: TableCollectionOptions<T>);
+    private buildColumns;
+    private buildColumnNode;
+    private getDefaultRowHeaderColumnKeys;
+    private buildHeaderRows;
+    private buildRows;
+    private isRowDefinition;
+    get size(): number;
+    get rows(): GridNode<T>[];
+    get columns(): GridNode<T>[];
+    get headerRows(): GridNode<T>[];
+    get head(): GridNode<T> | undefined;
+    get body(): GridNode<T>;
+    get rowCount(): number;
+    get columnCount(): number;
+    get rowHeaderColumnKeys(): Set<Key>;
+    getKeys(): Iterable<Key>;
+    getItem(key: Key): GridNode<T> | null;
+    at(index: number): GridNode<T> | null;
+    getChildren(key: Key): Iterable<GridNode<T>>;
+    getTextValue(key: Key): string;
+    getCell(rowKey: Key, columnKey: Key): GridNode<T> | null;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getKeyBefore(key: Key): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    [Symbol.iterator](): Iterator<GridNode<T>>;
+}
+/**
+ * Creates a table collection from options.
+ */
+export declare function createTableCollection<T>(options: TableCollectionOptions<T>): TableCollection<T>;
+//# sourceMappingURL=TableCollection.d.ts.map

package/src/table/TableCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCollection.d.ts","sourceRoot":"","sources":["TableCollection.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAgB,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EACV,eAAe,IAAI,gBAAgB,EACnC,sBAAsB,EAGvB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,qBAAa,eAAe,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,gBAAgB,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,KAAK,CAA0B;IACvC,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,oBAAoB,CAAW;IACvC,OAAO,CAAC,KAAK,CAAa;gBAEd,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAuD9C,OAAO,CAAC,YAAY;IAmCpB,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,6BAA6B;IAUrC,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,SAAS;IAgEjB,OAAO,CAAC,eAAe;IAUvB,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAExB;IAED,IAAI,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAE3B;IAED,IAAI,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAE9B;IAED,IAAI,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,CAElC;IAED,IAAI,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,CAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,mBAAmB,IAAI,GAAG,CAAC,GAAG,CAAC,CAElC;IAED,OAAO,IAAI,QAAQ,CAAC,GAAG,CAAC;IAIxB,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAIrC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAQrC,WAAW,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAK5C,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM;IAK9B,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAKxD,WAAW,IAAI,GAAG,GAAG,IAAI;IAMzB,UAAU,IAAI,GAAG,GAAG,IAAI;IAMxB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI;IAalC,WAAW,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI;IAahC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;CAM5C;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GACjC,eAAe,CAAC,CAAC,CAAC,CAEpB"}