@solid-primitives/focus 1.0.0-next.0

package/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+The `createFocusTrap` primitive is ported from solid-focus-trap:
+  Copyright (c) 2023 Jasmin Noetzli (GiyoMoon)
+  https://github.com/corvudev/corvu/tree/main/packages/solid-focus-trap
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=focus" alt="Solid Primitives Focus">
+</p>
+
+# @solid-primitives/focus
+
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/focus?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/focus)
+[![version](https://img.shields.io/npm/v/@solid-primitives/focus?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/focus)
+[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-1.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+[![tested with vitest](https://img.shields.io/badge/tested_with-vitest-6E9F18?style=for-the-badge&logo=vitest)](https://vitest.dev)
+
+Primitives for autofocusing HTML elements and trapping focus within a container.
+
+The native `autofocus` attribute only works on page load, which makes it incompatible with SolidJS. These primitives run on render, allowing autofocus on initial render as well as dynamically added components.
+
+- [`autofocus`](#autofocus) - Ref callback factory to autofocus an element on render.
+- [`createAutofocus`](#createautofocus) - Reactive primitive to autofocus an element on render.
+- [`createFocusTrap`](#createfocustrap) - Traps focus inside a given DOM element.
+
+## Installation
+
+```bash
+npm install @solid-primitives/focus
+# or
+yarn add @solid-primitives/focus
+# or
+pnpm add @solid-primitives/focus
+```
+
+## `autofocus`
+
+### How to use it
+
+`autofocus` is a ref callback factory. It uses the native `autofocus` attribute to determine whether to focus the element.
+
+```tsx
+import { autofocus } from "@solid-primitives/focus";
+
+<button ref={autofocus()} autofocus>
+  Autofocused
+</button>;
+```
+
+To conditionally enable autofocus, control the `autofocus` attribute directly — the `autofocus()` ref only focuses when the attribute is present, so removing it is sufficient to opt out:
+
+```tsx
+// Conditionally autofocus by toggling the attribute
+<button ref={autofocus()} autofocus={shouldFocus()}>
+  Maybe Autofocused
+</button>
+```
+
+> **Note:** The `enabled` parameter was removed because it was redundant — the same effect is achieved by omitting the `autofocus` attribute. Previously, Solid directives always received an accessor argument whether you used it or not, which gave the impression an explicit toggle was necessary.
+
+## `createAutofocus`
+
+`createAutofocus` reactively autofocuses an element passed in as a signal.
+
+```tsx
+import { createAutofocus } from "@solid-primitives/focus";
+
+// Using ref
+let ref!: HTMLButtonElement;
+createAutofocus(() => ref);
+
+<button ref={ref}>Autofocused</button>;
+
+// Using ref signal
+const [ref, setRef] = createSignal<HTMLButtonElement>();
+createAutofocus(ref);
+
+<button ref={setRef}>Autofocused</button>;
+```
+
+## `createFocusTrap`
+
+`createFocusTrap` traps keyboard focus inside a given DOM element, cycling through focusable children on Tab / Shift+Tab. It uses a `MutationObserver` to stay up to date with DOM changes and restores focus to the previously focused element when deactivated.
+
+> Ported from [solid-focus-trap](https://github.com/corvudev/corvu/tree/main/packages/solid-focus-trap) by [Jasmin Noetzli (GiyoMoon)](https://github.com/GiyoMoon), adapted for Solid.js 2.0.
+
+### How to use it
+
+```tsx
+import { createFocusTrap } from "@solid-primitives/focus";
+
+const DialogContent: Component<{ open: boolean }> = props => {
+  const [contentRef, setContentRef] = createSignal<HTMLElement | null>(null);
+
+  createFocusTrap({
+    element: contentRef,
+    enabled: () => props.open,
+  });
+
+  return (
+    <Show when={props.open}>
+      <div ref={setContentRef}>
+        <button>Close</button>
+        <input />
+      </div>
+    </Show>
+  );
+};
+```
+
+### Props
+
+| Prop                  | Type                               | Default                    | Description                                                                       |
+| --------------------- | ---------------------------------- | -------------------------- | --------------------------------------------------------------------------------- |
+| `element`             | `MaybeAccessor<HTMLElement\|null>` | —                          | Element to trap focus within.                                                     |
+| `enabled`             | `MaybeAccessor<boolean>`           | `true`                     | Whether the trap is active.                                                       |
+| `observeChanges`      | `MaybeAccessor<boolean>`           | `true`                     | Watch for DOM mutations inside the container and refresh focusable elements.      |
+| `initialFocusElement` | `MaybeAccessor<HTMLElement\|null>` | First focusable element    | Element to focus when the trap activates.                                         |
+| `restoreFocus`        | `MaybeAccessor<boolean>`           | `true`                     | Restore focus to the previously focused element when the trap deactivates.        |
+| `finalFocusElement`   | `MaybeAccessor<HTMLElement\|null>` | Previously focused element | Element to focus when the trap deactivates.                                       |
+| `onInitialFocus`      | `(event: Event) => void`           | —                          | Callback when focus moves into the trap. Call `event.preventDefault()` to cancel. |
+| `onFinalFocus`        | `(event: Event) => void`           | —                          | Callback when focus restores. Call `event.preventDefault()` to cancel.            |
+
+### Custom initial focus
+
+```tsx
+const [contentRef, setContentRef] = createSignal<HTMLElement | null>(null);
+const [inputRef, setInputRef] = createSignal<HTMLElement | null>(null);
+
+createFocusTrap({
+  element: contentRef,
+  enabled: () => props.open,
+  initialFocusElement: inputRef,
+});
+
+return (
+  <Show when={props.open}>
+    <div ref={setContentRef}>
+      <button>Close</button>
+      <input ref={setInputRef} />
+    </div>
+  </Show>
+);
+```
+
+### Preventing focus moves
+
+```tsx
+createFocusTrap({
+  element: contentRef,
+  onInitialFocus: event => {
+    event.preventDefault(); // focus won't move on activation
+  },
+  onFinalFocus: event => {
+    event.preventDefault(); // focus won't restore on deactivation
+  },
+});
+```
+
+## Credits
+
+`createFocusTrap` is ported from [solid-focus-trap](https://github.com/corvudev/corvu/tree/main/packages/solid-focus-trap), part of the [corvu](https://corvu.dev) UI toolkit by [Jasmin Noetzli (GiyoMoon)](https://github.com/GiyoMoon). Licensed under the MIT License.
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)

package/dist/autofocus.d.ts

@@ -0,0 +1,40 @@
+import { type Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { type FalsyValue } from "@solid-primitives/utils";
+/**
+ * Ref callback factory to autofocus an element on render.
+ * Uses the native `autofocus` attribute to determine whether to focus.
+ *
+ * To disable autofocus, simply omit the `autofocus` attribute on the element —
+ * no `enabled` parameter is needed or provided.
+ *
+ * @returns Ref callback to attach to the element.
+ *
+ * @example
+ * ```tsx
+ * <button ref={autofocus()} autofocus>Autofocused</button>
+ * ```
+ */
+export declare const autofocus: () => (element: HTMLElement) => void;
+/**
+ * Creates a new reactive primitive for autofocusing the element on render.
+ *
+ * @param ref - Element to focus.
+ *
+ * @example
+ * ```ts
+ * let ref!: HTMLButtonElement;
+ *
+ * createAutofocus(() => ref);
+ *
+ * <button ref={ref}>Autofocused</button>;
+ *
+ * // Using ref signal
+ * const [ref, setRef] = createSignal<HTMLButtonElement>();
+ * createAutofocus(ref);
+ *
+ * <button ref={setRef}>Autofocused</button>;
+ * ```
+ */
+export declare const createAutofocus: (ref: Accessor<HTMLElement | FalsyValue>) => void;
+export type E = JSX.Element;

package/dist/autofocus.js

@@ -0,0 +1,56 @@
+import { createEffect, onSettled } from "solid-js";
+import {} from "@solid-primitives/utils";
+/**
+ * Ref callback factory to autofocus an element on render.
+ * Uses the native `autofocus` attribute to determine whether to focus.
+ *
+ * To disable autofocus, simply omit the `autofocus` attribute on the element —
+ * no `enabled` parameter is needed or provided.
+ *
+ * @returns Ref callback to attach to the element.
+ *
+ * @example
+ * ```tsx
+ * <button ref={autofocus()} autofocus>Autofocused</button>
+ * ```
+ */
+export const autofocus = () => {
+    let el;
+    onSettled(() => {
+        if (!el?.hasAttribute("autofocus"))
+            return;
+        const id = setTimeout(() => el?.focus());
+        return () => clearTimeout(id);
+    });
+    return (element) => {
+        el = element;
+    };
+};
+/**
+ * Creates a new reactive primitive for autofocusing the element on render.
+ *
+ * @param ref - Element to focus.
+ *
+ * @example
+ * ```ts
+ * let ref!: HTMLButtonElement;
+ *
+ * createAutofocus(() => ref);
+ *
+ * <button ref={ref}>Autofocused</button>;
+ *
+ * // Using ref signal
+ * const [ref, setRef] = createSignal<HTMLButtonElement>();
+ * createAutofocus(ref);
+ *
+ * <button ref={setRef}>Autofocused</button>;
+ * ```
+ */
+export const createAutofocus = (ref) => {
+    createEffect(() => ref(), el => {
+        if (!el)
+            return;
+        const id = setTimeout(() => el.focus());
+        return () => clearTimeout(id);
+    });
+};

package/dist/focusSignal.d.ts

@@ -0,0 +1,26 @@
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "@solid-primitives/utils";
+/**
+ * Attaches "blur" and "focus" event listeners to the element.
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/focus#makeFocusListener
+ * @param target element
+ * @param callback handle focus change
+ * @param useCapture activates capturing, which allows to listen on events at the root that don't support bubbling.
+ * @returns function for clearing event listeners
+ * @example
+ * const [isFocused, setIsFocused] = createSignal(false)
+ * const clear = makeFocusListener(el, focused => setIsFocused(focused));
+ * // remove listeners (happens also on cleanup)
+ * clear();
+ */
+export declare function makeFocusListener(target: Element, callback: (isActive: boolean) => void, useCapture?: boolean): VoidFunction;
+/**
+ * Provides a signal representing element's focus state.
+ * @param target element or a reactive function returning one
+ * @returns boolean signal representing element's focus state
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/focus#createFocusSignal
+ * @example
+ * const isFocused = createFocusSignal(() => el)
+ * isFocused() // T: boolean
+ */
+export declare function createFocusSignal(target: MaybeAccessor<Element>): Accessor<boolean>;

package/dist/focusSignal.js

@@ -0,0 +1,43 @@
+import {} from "solid-js";
+import { isServer } from "@solidjs/web";
+import { createHydratableSignal } from "@solid-primitives/utils";
+import { makeEventListener, createEventListener } from "@solid-primitives/event-listener";
+/**
+ * Attaches "blur" and "focus" event listeners to the element.
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/focus#makeFocusListener
+ * @param target element
+ * @param callback handle focus change
+ * @param useCapture activates capturing, which allows to listen on events at the root that don't support bubbling.
+ * @returns function for clearing event listeners
+ * @example
+ * const [isFocused, setIsFocused] = createSignal(false)
+ * const clear = makeFocusListener(el, focused => setIsFocused(focused));
+ * // remove listeners (happens also on cleanup)
+ * clear();
+ */
+export function makeFocusListener(target, callback, useCapture = true) {
+    if (isServer) {
+        return () => { };
+    }
+    const clear1 = makeEventListener(target, "blur", callback.bind(undefined, false), useCapture);
+    const clear2 = makeEventListener(target, "focus", callback.bind(undefined, true), useCapture);
+    return () => (clear1(), clear2());
+}
+/**
+ * Provides a signal representing element's focus state.
+ * @param target element or a reactive function returning one
+ * @returns boolean signal representing element's focus state
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/focus#createFocusSignal
+ * @example
+ * const isFocused = createFocusSignal(() => el)
+ * isFocused() // T: boolean
+ */
+export function createFocusSignal(target) {
+    if (isServer) {
+        return () => false;
+    }
+    const [isActive, setIsActive] = createHydratableSignal(false, () => document.activeElement === target);
+    createEventListener(target, "blur", () => setIsActive(false), true);
+    createEventListener(target, "focus", () => setIsActive(true), true);
+    return isActive;
+}

package/dist/focusTrap.d.ts

@@ -0,0 +1,52 @@
+import { type MaybeAccessor } from "@solid-primitives/utils";
+export type CreateFocusTrapProps = {
+    /** Element to trap focus within. */
+    element: MaybeAccessor<HTMLElement | undefined>;
+    /** Whether the focus trap is active. Default: `true` */
+    enabled?: MaybeAccessor<boolean>;
+    /**
+     * Watch for DOM mutations inside the container and reload the list of
+     * focusable elements accordingly. Default: `true`
+     */
+    observeChanges?: MaybeAccessor<boolean>;
+    /**
+     * Element to focus when the trap activates.
+     * Default: the first focusable element inside `element`.
+     */
+    initialFocusElement?: MaybeAccessor<HTMLElement | undefined>;
+    /**
+     * Restore focus to the element that was focused before the trap activated
+     * when the trap is deactivated. Default: `true`
+     */
+    restoreFocus?: MaybeAccessor<boolean>;
+    /**
+     * Element to focus when the trap deactivates.
+     * Default: the element that was focused before the trap activated.
+     */
+    finalFocusElement?: MaybeAccessor<HTMLElement | undefined>;
+    /**
+     * Callback fired when focus moves into the trap.
+     * Call `event.preventDefault()` to suppress the focus move.
+     */
+    onInitialFocus?: (event: Event) => void;
+    /**
+     * Callback fired when focus is restored after deactivation.
+     * Call `event.preventDefault()` to suppress the focus move.
+     */
+    onFinalFocus?: (event: Event) => void;
+};
+/**
+ * Traps focus inside the given element. Aware of DOM changes inside the trap
+ * via a MutationObserver. Properly restores focus when deactivated.
+ *
+ * Ported from [solid-focus-trap](https://github.com/corvudev/corvu/tree/main/packages/solid-focus-trap)
+ * by Jasmin Noetzli (GiyoMoon), adapted for Solid.js 2.0.
+ *
+ * @example
+ * ```tsx
+ * const [ref, setRef] = createSignal<HTMLElement | null>(null);
+ * createFocusTrap({ element: ref, enabled: () => isOpen() });
+ * <div ref={setRef}>...</div>
+ * ```
+ */
+export declare const createFocusTrap: (props: CreateFocusTrapProps) => void;

package/dist/focusTrap.js

@@ -0,0 +1,148 @@
+/*
+ * Ported from solid-focus-trap by Jasmin Noetzli (GiyoMoon)
+ * MIT License — https://github.com/corvudev/corvu/tree/main/packages/solid-focus-trap
+ * Adapted for Solid.js 2.0 and @solid-primitives/focus by the Solid Primitives Working Group.
+ */
+import { access, afterPaint, INTERNAL_OPTIONS } from "@solid-primitives/utils";
+import { createEffect, createMemo, createSignal } from "solid-js";
+const FOCUSABLE_SELECTOR = 'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), details:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+const EVENT_INITIAL_FOCUS = "focusTrap.initialFocus";
+const EVENT_FINAL_FOCUS = "focusTrap.finalFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+/**
+ * Traps focus inside the given element. Aware of DOM changes inside the trap
+ * via a MutationObserver. Properly restores focus when deactivated.
+ *
+ * Ported from [solid-focus-trap](https://github.com/corvudev/corvu/tree/main/packages/solid-focus-trap)
+ * by Jasmin Noetzli (GiyoMoon), adapted for Solid.js 2.0.
+ *
+ * @example
+ * ```tsx
+ * const [ref, setRef] = createSignal<HTMLElement | null>(null);
+ * createFocusTrap({ element: ref, enabled: () => isOpen() });
+ * <div ref={setRef}>...</div>
+ * ```
+ */
+export const createFocusTrap = (props) => {
+    const [focusableElements, setFocusableElements] = createSignal(undefined, INTERNAL_OPTIONS);
+    const firstFocusElement = createMemo(() => {
+        const els = focusableElements();
+        return els ? (els[0] ?? null) : null;
+    });
+    const lastFocusElement = createMemo(() => {
+        const els = focusableElements();
+        return els ? (els[els.length - 1] ?? null) : null;
+    });
+    let originalFocusedElement = null;
+    const loadFocusableElements = (container) => {
+        const sorted = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR))
+            .map((element, domIndex) => ({ element, domIndex, tabIndex: element.tabIndex }))
+            .sort((a, b) => a.tabIndex === b.tabIndex ? a.domIndex - b.domIndex : a.tabIndex - b.tabIndex);
+        setFocusableElements(sorted.map(({ element }) => element));
+    };
+    const triggerInitialFocus = (container) => {
+        afterPaint(() => {
+            const target = access(props.initialFocusElement ?? null) ?? firstFocusElement() ?? container;
+            const { onInitialFocus } = props;
+            if (onInitialFocus) {
+                const event = new CustomEvent(EVENT_INITIAL_FOCUS, EVENT_OPTIONS);
+                container.addEventListener(EVENT_INITIAL_FOCUS, onInitialFocus);
+                container.dispatchEvent(event);
+                container.removeEventListener(EVENT_INITIAL_FOCUS, onInitialFocus);
+                if (event.defaultPrevented)
+                    return;
+            }
+            target.focus();
+        });
+    };
+    const triggerRestoreFocus = (container) => {
+        afterPaint(() => {
+            if (!access(props.restoreFocus ?? true))
+                return;
+            const target = access(props.finalFocusElement ?? null) ?? originalFocusedElement;
+            if (!target)
+                return;
+            const { onFinalFocus } = props;
+            if (onFinalFocus) {
+                const event = new CustomEvent(EVENT_FINAL_FOCUS, EVENT_OPTIONS);
+                container.addEventListener(EVENT_FINAL_FOCUS, onFinalFocus);
+                container.dispatchEvent(event);
+                container.removeEventListener(EVENT_FINAL_FOCUS, onFinalFocus);
+                if (event.defaultPrevented)
+                    return;
+            }
+            target.focus();
+        });
+    };
+    const onFirstElementKeyDown = (event) => {
+        if (event.key === "Tab" && event.shiftKey) {
+            event.preventDefault();
+            lastFocusElement().focus();
+        }
+    };
+    const onLastElementKeyDown = (event) => {
+        if (event.key === "Tab" && !event.shiftKey) {
+            event.preventDefault();
+            firstFocusElement().focus();
+        }
+    };
+    const preventTab = (event) => {
+        if (event.key === "Tab")
+            event.preventDefault();
+    };
+    // Activate / deactivate the trap when element or enabled changes.
+    createEffect(() => ({
+        container: access(props.element),
+        enabled: access(props.enabled ?? true),
+        observeChanges: access(props.observeChanges ?? true),
+    }), ({ container, enabled, observeChanges }) => {
+        if (!container || !enabled)
+            return;
+        originalFocusedElement = document.activeElement;
+        loadFocusableElements(container);
+        triggerInitialFocus(container);
+        const observer = new MutationObserver(() => {
+            afterPaint(() => {
+                loadFocusableElements(container);
+                if (!document.activeElement || document.activeElement === document.body) {
+                    triggerInitialFocus(container);
+                }
+            });
+        });
+        if (observeChanges) {
+            observer.observe(container, {
+                subtree: true,
+                childList: true,
+                attributes: true,
+                attributeFilter: ["tabindex"],
+            });
+        }
+        return () => {
+            if (observeChanges)
+                observer.disconnect();
+            setFocusableElements(undefined);
+            triggerRestoreFocus(container);
+        };
+    });
+    // When there are no focusable elements, block all Tab key presses.
+    createEffect(() => focusableElements(), elements => {
+        if (!elements || elements.length !== 0)
+            return;
+        document.addEventListener("keydown", preventTab);
+        return () => document.removeEventListener("keydown", preventTab);
+    });
+    // Shift+Tab on the first element → wrap to last.
+    createEffect(() => firstFocusElement(), el => {
+        if (!el)
+            return;
+        el.addEventListener("keydown", onFirstElementKeyDown);
+        return () => el.removeEventListener("keydown", onFirstElementKeyDown);
+    });
+    // Tab on the last element → wrap to first.
+    createEffect(() => lastFocusElement(), el => {
+        if (!el)
+            return;
+        el.addEventListener("keydown", onLastElementKeyDown);
+        return () => el.removeEventListener("keydown", onLastElementKeyDown);
+    });
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { autofocus, createAutofocus } from "./autofocus.js";
+export type { E } from "./autofocus.js";
+export { createFocusTrap } from "./focusTrap.js";
+export type { CreateFocusTrapProps } from "./focusTrap.js";
+export { makeFocusListener, createFocusSignal } from "./focusSignal.js";

package/dist/index.js

@@ -0,0 +1,3 @@
+export { autofocus, createAutofocus } from "./autofocus.js";
+export { createFocusTrap } from "./focusTrap.js";
+export { makeFocusListener, createFocusSignal } from "./focusSignal.js";

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@solid-primitives/focus",
+  "version": "1.0.0-next.0",
+  "description": "Primitives for autofocusing HTML elements and trapping focus within a container",
+  "author": "jer3m01 <jer3m01@jer3m01.com>",
+  "contributors": [
+    {
+      "name": "Jasmin Noetzli",
+      "url": "https://github.com/GiyoMoon"
+    },
+    {
+      "name": "David Di Biase",
+      "url": "https://github.com/davedbase"
+    }
+  ],
+  "license": "MIT",
+  "homepage": "https://primitives.solidjs.community/package/focus",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/solidjs-community/solid-primitives/issues"
+  },
+  "primitive": {
+    "name": "focus",
+    "stage": 3,
+    "list": [
+      "autofocus",
+      "createAutofocus",
+      "createFocusTrap",
+      "makeFocusListener",
+      "createFocusSignal"
+    ],
+    "category": "Inputs",
+    "gzip": 191
+  },
+  "keywords": [
+    "solid",
+    "primitives",
+    "focus",
+    "autofocus",
+    "focus-trap",
+    "trap",
+    "accessibility",
+    "a11y"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "module": "./dist/index.js",
+  "browser": {},
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "import": {
+      "@solid-primitives/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@solidjs/web": "^2.0.0-beta.15",
+    "solid-js": "^2.0.0-beta.15"
+  },
+  "dependencies": {
+    "@solid-primitives/event-listener": "^3.0.0-next.0",
+    "@solid-primitives/utils": "^7.0.0-next.0"
+  },
+  "typesVersions": {},
+  "devDependencies": {
+    "@solidjs/web": "2.0.0-beta.15",
+    "solid-js": "2.0.0-beta.15"
+  },
+  "scripts": {
+    "dev": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ../../scripts/dev.ts",
+    "build": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ../../scripts/build.ts",
+    "vitest": "vitest -c ../../configs/vitest.config.ts",
+    "test": "pnpm run vitest",
+    "test:ssr": "pnpm run vitest --mode ssr"
+  }
+}