@wire-ui/solid 0.1.0 → 0.2.0

package/dist/primitives/create-focus-visible.d.ts

@@ -0,0 +1,21 @@
+import { Accessor, JSX } from 'solid-js';
+export interface CreateFocusVisibleResult {
+    /** Reactive accessor — true when focus arrived from keyboard navigation */
+    isFocusVisible: Accessor<boolean>;
+    focusProps: {
+        onFocus: JSX.FocusEventHandler<Element, FocusEvent>;
+        onBlur: () => void;
+    };
+}
+/**
+ * Tracks whether the focused element should show a "focus visible" indicator —
+ * i.e. focus arrived from keyboard navigation, not a pointer.
+ *
+ * Mirrors the CSS `:focus-visible` pseudo-class by querying `element.matches(':focus-visible')`
+ * on focus. Spread `focusProps` onto the target element.
+ *
+ * @example
+ * const { isFocusVisible, focusProps } = createFocusVisible()
+ * <button {...focusProps} data-focus-visible={isFocusVisible() ? '' : undefined} />
+ */
+export declare function createFocusVisible(): CreateFocusVisibleResult;

package/dist/primitives/create-id.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns a stable, SSR-safe unique id with an optional human-readable prefix.
+ *
+ * Pass `staticId` to opt out — useful when the parent already provides an id and you
+ * want to honor it instead of generating one.
+ *
+ * @example
+ * const labelId = createId('label')
+ * const ownId = createId(undefined, props.id)
+ */
+export declare function createId(prefix?: string, staticId?: string): string;

package/dist/primitives/create-intersection-observer.d.ts

@@ -0,0 +1,22 @@
+import { Accessor } from 'solid-js';
+export interface CreateIntersectionObserverOptions extends IntersectionObserverInit {
+    /** Stop observing after the first intersection. */
+    once?: boolean;
+    /** Skip observation entirely while false. */
+    enabled?: boolean;
+}
+/**
+ * Observes intersection of the target element with its scroll container (or the viewport by default).
+ *
+ * Returns a reactive accessor for the latest `IntersectionObserverEntry`, or `null` before the
+ * first callback. Use `entry()?.isIntersecting` for the common visibility-check case.
+ *
+ * Pass `options` with getters to make `enabled` reactive:
+ * `{ get enabled() { return shouldObserve() } }`
+ *
+ * @example
+ * let el: HTMLDivElement | undefined;
+ * const entry = createIntersectionObserver(() => el, { threshold: 0.5, once: true })
+ * const isVisible = () => entry()?.isIntersecting ?? false
+ */
+export declare function createIntersectionObserver<T extends Element>(target: Accessor<T | null | undefined>, options?: CreateIntersectionObserverOptions): Accessor<IntersectionObserverEntry | null>;

package/dist/primitives/create-keyboard.d.ts

@@ -0,0 +1,41 @@
+import { Accessor } from 'solid-js';
+export interface KeyboardHandlerOptions {
+    /** Match Ctrl key state */
+    ctrl?: boolean;
+    /** Match Meta (Cmd) key state */
+    meta?: boolean;
+    /** Match Shift key state */
+    shift?: boolean;
+    /** Match Alt key state */
+    alt?: boolean;
+    /** Call `preventDefault()` when the handler matches */
+    preventDefault?: boolean;
+    /** Call `stopPropagation()` when the handler matches */
+    stopPropagation?: boolean;
+}
+export type KeyHandler = (event: KeyboardEvent) => void;
+export type KeyboardMap = Record<string, KeyHandler | [KeyHandler, KeyboardHandlerOptions]>;
+export interface CreateKeyboardOptions {
+    /** Element to attach the listener to. Defaults to `window`. */
+    target?: Accessor<HTMLElement | null | undefined> | HTMLElement | Window | Document | null;
+    /** Event to listen on. Defaults to `keydown`. */
+    event?: 'keydown' | 'keyup' | 'keypress';
+    /** Disable the listener */
+    enabled?: boolean;
+}
+/**
+ * Subscribes to keyboard events with a map of key → handler.
+ *
+ * Keys are matched against `event.key` (case-insensitive). Pass a tuple to require
+ * modifier keys: `{ s: [save, { meta: true }] }` matches Cmd/Ctrl+S only.
+ *
+ * Pass `options` with getters to make `target` or `enabled` reactive:
+ * `{ get enabled() { return isActive() } }`
+ *
+ * @example
+ * createKeyboard({
+ *   Escape: () => close(),
+ *   s: [() => save(), { meta: true, preventDefault: true }],
+ * })
+ */
+export declare function createKeyboard(map: KeyboardMap, options?: CreateKeyboardOptions): void;

package/dist/primitives/create-media-query.d.ts

@@ -0,0 +1,10 @@
+import { Accessor } from 'solid-js';
+/**
+ * Returns a reactive accessor for whether the given CSS media query currently matches.
+ *
+ * Re-runs when the match state changes. SSR-safe — returns `false` on the server.
+ *
+ * @example
+ * const isMobile = createMediaQuery('(max-width: 640px)')
+ */
+export declare function createMediaQuery(query: string): Accessor<boolean>;

package/dist/primitives/create-merged-refs.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Merges multiple ref setters into a single callback ref.
+ *
+ * Useful when a component receives an external ref prop but also needs its own internal ref
+ * on the same element. All setters receive the latest element.
+ *
+ * In Solid, refs are set once via the `ref` attribute. Pass a signal setter, a variable
+ * setter `(el) => (localEl = el)`, or `undefined`/`null` to skip.
+ *
+ * @example
+ * function Component(props: { ref?: (el: HTMLDivElement) => void }) {
+ *   let localEl: HTMLDivElement | undefined;
+ *   const mergedRef = createMergedRefs((el) => (localEl = el), props.ref);
+ *   return <div ref={mergedRef} />;
+ * }
+ */
+export declare function createMergedRefs<T>(...refs: (((el: T) => void | unknown) | null | undefined)[]): (el: T) => void;

package/dist/primitives/create-reduce-motion.d.ts

@@ -0,0 +1,11 @@
+import { Accessor } from 'solid-js';
+/**
+ * Returns a reactive accessor that is `true` when the user has requested reduced motion at the OS level.
+ *
+ * Use to gate animations and transitions for accessibility.
+ *
+ * @example
+ * const reduceMotion = createReduceMotion()
+ * const duration = () => reduceMotion() ? 0 : 200
+ */
+export declare function createReduceMotion(): Accessor<boolean>;

package/dist/primitives/create-resize-observer.d.ts

@@ -0,0 +1,17 @@
+import { Accessor } from 'solid-js';
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * Observes the size of the target element and returns a reactive accessor for its
+ * current content-box dimensions.
+ *
+ * Pass `onResize` to react imperatively without depending on the returned signal.
+ *
+ * @example
+ * let el: HTMLDivElement | undefined;
+ * const size = createResizeObserver(() => el)
+ * <p>Width: {size().width}</p>
+ */
+export declare function createResizeObserver<T extends HTMLElement>(target: Accessor<T | null | undefined>, onResize?: (size: ElementSize, entry: ResizeObserverEntry) => void): Accessor<ElementSize>;

package/dist/primitives/create-scroll-lock.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Locks document scrolling while `active` is true.
+ *
+ * Multiple consumers may call this at once (e.g. nested modals); scrolling is restored
+ * only after the last lock is released. Compensates for the disappearing scrollbar by
+ * adding equivalent padding to `<body>` to prevent layout shift.
+ *
+ * Pass a reactive getter to respond to signal changes:
+ * `createScrollLock(() => isOpen())`
+ *
+ * @example
+ * createScrollLock(() => isOpen())
+ */
+export declare function createScrollLock(active: boolean | (() => boolean)): void;

package/dist/primitives/create-throttle.d.ts

@@ -0,0 +1,20 @@
+import { Accessor } from 'solid-js';
+/**
+ * Returns a reactive value throttled — updates at most once every `delay` ms.
+ *
+ * Pass the input as an accessor so Solid can track changes reactively.
+ * Use for derived state from high-frequency events (scroll, mousemove) where you
+ * want regular sampling rather than waiting for inactivity.
+ *
+ * @example
+ * const throttledScroll = createThrottle(() => scrollY(), 100)
+ */
+export declare function createThrottle<T>(value: Accessor<T>, delay: number): Accessor<T>;
+/**
+ * Returns a stable, throttled callback that runs at most once per `delay` ms.
+ * Fires on the leading edge; trailing calls are dropped.
+ *
+ * @example
+ * const onScroll = createThrottledCallback(() => track(), 200)
+ */
+export declare function createThrottledCallback<Args extends unknown[]>(callback: (...args: Args) => void, delay: number): (...args: Args) => void;

package/dist/primitives/index.d.ts

@@ -1,3 +1,26 @@
 export { createClickOutside } from './create-click-outside';
+export { createControllableState } from './create-controllable-state';
+export type { CreateControllableStateOptions } from './create-controllable-state';
+export { createDebounce, createDebouncedCallback } from './create-debounce';
+export { createDisclosure } from './create-disclosure';
+export type { CreateDisclosureOptions, CreateDisclosureResult } from './create-disclosure';
+export { createFloating } from './create-floating';
+export type { CreateFloatingOptions, CreateFloatingResult, FloatingSide, FloatingAlign, FloatingStrategy, } from './create-floating';
+export { createFocusTrap } from './create-focus-trap';
+export type { CreateFocusTrapOptions } from './create-focus-trap';
+export { createFocusVisible } from './create-focus-visible';
+export type { CreateFocusVisibleResult } from './create-focus-visible';
+export { createId } from './create-id';
+export { createIntersectionObserver } from './create-intersection-observer';
+export type { CreateIntersectionObserverOptions } from './create-intersection-observer';
 export { createInteractiveState } from './create-interactive-state';
 export type { InteractiveStateOptions, InteractiveStateResult } from './create-interactive-state';
+export { createKeyboard } from './create-keyboard';
+export type { KeyboardMap, KeyHandler, KeyboardHandlerOptions, CreateKeyboardOptions } from './create-keyboard';
+export { createMediaQuery } from './create-media-query';
+export { createMergedRefs } from './create-merged-refs';
+export { createReduceMotion } from './create-reduce-motion';
+export { createResizeObserver } from './create-resize-observer';
+export type { ElementSize } from './create-resize-observer';
+export { createScrollLock } from './create-scroll-lock';
+export { createThrottle, createThrottledCallback } from './create-throttle';