@elvora/core 1.0.0-rc.1

package/dist/react/index.js

@@ -0,0 +1,109 @@
+import { generateId, createFocusTrap } from '../chunk-VFHCOPTO.js';
+import { useLayoutEffect, useEffect, useRef, useCallback, useId as useId$1, useMemo, useState } from 'react';
+
+var useIsomorphicLayoutEffect = typeof window !== "undefined" && typeof window.document !== "undefined" ? useLayoutEffect : useEffect;
+function useEventCallback(fn) {
+  const ref = useRef(fn);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return useCallback((...args) => ref.current?.(...args), []);
+}
+function useId(providedId, prefix = "elvora") {
+  const reactId = typeof useId$1 === "function" ? useId$1() : void 0;
+  const fallback = useMemo(() => generateId(prefix), [prefix]);
+  if (providedId) return providedId;
+  return reactId ? `${prefix}-${reactId.replace(/:/g, "")}` : fallback;
+}
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const isControlled = value !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const onChangeStable = useEventCallback(onChange);
+  const currentRef = useRef(isControlled ? value : uncontrolled);
+  currentRef.current = isControlled ? value : uncontrolled;
+  const setValue = useCallback(
+    (next) => {
+      const resolved = typeof next === "function" ? next(currentRef.current) : next;
+      if (!isControlled) {
+        setUncontrolled(resolved);
+      }
+      onChangeStable(resolved);
+    },
+    [isControlled, onChangeStable]
+  );
+  return [isControlled ? value : uncontrolled, setValue];
+}
+function usePortal(id = "elvora-portal-root") {
+  const [container, setContainer] = useState(null);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    let node = document.getElementById(id);
+    let created = false;
+    if (!node) {
+      node = document.createElement("div");
+      node.id = id;
+      node.setAttribute("data-elvora-portal", "");
+      document.body.appendChild(node);
+      created = true;
+    }
+    setContainer(node);
+    return () => {
+      if (created && node && node.parentElement && node.childNodes.length === 0) {
+        node.parentElement.removeChild(node);
+      }
+    };
+  }, [id]);
+  return container;
+}
+function useFocusTrap(ref, options) {
+  const trapRef = useRef(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || !options.enabled) {
+      trapRef.current?.deactivate();
+      trapRef.current = null;
+      return;
+    }
+    const trap = createFocusTrap(node, options);
+    trap.activate();
+    trapRef.current = trap;
+    return () => {
+      trap.deactivate();
+      trapRef.current = null;
+    };
+  }, [ref, options.enabled]);
+}
+function useDismissable(ref, {
+  enabled,
+  onDismiss,
+  closeOnEscape = true,
+  closeOnOutsideClick = true
+}) {
+  useEffect(() => {
+    if (!enabled) return;
+    function handleKey(e) {
+      if (closeOnEscape && e.key === "Escape") onDismiss(e);
+    }
+    function handlePointer(e) {
+      if (!closeOnOutsideClick) return;
+      const target = e.target;
+      if (target && ref.current && !ref.current.contains(target)) onDismiss(e);
+    }
+    document.addEventListener("keydown", handleKey, true);
+    document.addEventListener("mousedown", handlePointer, true);
+    document.addEventListener("touchstart", handlePointer, true);
+    return () => {
+      document.removeEventListener("keydown", handleKey, true);
+      document.removeEventListener("mousedown", handlePointer, true);
+      document.removeEventListener("touchstart", handlePointer, true);
+    };
+  }, [enabled, onDismiss, closeOnEscape, closeOnOutsideClick, ref]);
+}
+
+export { useControllableState, useDismissable, useEventCallback, useFocusTrap, useId, useIsomorphicLayoutEffect, usePortal };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/useIsomorphicLayoutEffect.ts","../../src/react/useEventCallback.ts","../../src/react/useId.ts","../../src/react/useControllableState.ts","../../src/react/usePortal.ts","../../src/react/useFocusTrap.ts","../../src/react/useDismissable.ts"],"names":["useReactId","useRef","useCallback","useState","useEffect"],"mappings":"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","file":"index.js","sourcesContent":["import { useEffect, useLayoutEffect } from 'react';\r\n\r\n/**\r\n * `useLayoutEffect` warns when used during SSR; this swaps in `useEffect` on\r\n * the server so components stay isomorphic.\r\n */\r\nexport const useIsomorphicLayoutEffect =\r\n  typeof window !== 'undefined' && typeof window.document !== 'undefined'\r\n    ? useLayoutEffect\r\n    : useEffect;\r\n","import { useCallback, useRef } from 'react';\r\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\r\n\r\n/**\r\n * Returns a stable callback identity whose body reads the latest props/state.\r\n * Lets a component pass the same handler down across renders without making\r\n * dependents re-render, while still calling the latest closure.\r\n */\r\nexport function useEventCallback<Args extends unknown[], R>(\r\n  fn: ((...args: Args) => R) | undefined,\r\n): (...args: Args) => R | undefined {\r\n  const ref = useRef(fn);\r\n\r\n  useIsomorphicLayoutEffect(() => {\r\n    ref.current = fn;\r\n  });\r\n\r\n  return useCallback((...args: Args) => ref.current?.(...args), []);\r\n}\r\n","import { useId as useReactId, useMemo } from 'react';\r\nimport { generateId } from '../id';\r\n\r\n/**\r\n * SSR-safe id hook. Prefers React 18's built-in `useId`; falls back to a\r\n * memoized id when consumers pin an older React, or when they explicitly\r\n * provide an id via props (passed through).\r\n */\r\nexport function useId(providedId?: string, prefix = 'elvora'): string {\r\n  const reactId = typeof useReactId === 'function' ? useReactId() : undefined;\r\n  const fallback = useMemo(() => generateId(prefix), [prefix]);\r\n  if (providedId) return providedId;\r\n  return reactId ? `${prefix}-${reactId.replace(/:/g, '')}` : fallback;\r\n}\r\n","import { useCallback, useRef, useState } from 'react';\r\nimport { useEventCallback } from './useEventCallback';\r\n\r\nexport interface UseControllableStateOptions<T> {\r\n  /** Controlled value. When defined the hook reports it directly. */\r\n  value?: T;\r\n  /** Default value for uncontrolled mode. */\r\n  defaultValue?: T | (() => T);\r\n  /** Called whenever the value changes (controlled or uncontrolled). */\r\n  onChange?: (value: T) => void;\r\n}\r\n\r\n/**\r\n * Bridges controlled and uncontrolled component patterns. Returns\r\n * `[value, setValue]`: in controlled mode `value` mirrors the prop and\r\n * `setValue` only fires `onChange`; in uncontrolled mode `setValue` also\r\n * updates internal state.\r\n *\r\n * Mirrors the pattern used by Radix UI, Aria, and Reach UI.\r\n */\r\nexport function useControllableState<T>({\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n}: UseControllableStateOptions<T>): [T | undefined, (next: T | ((prev: T | undefined) => T)) => void] {\r\n  const isControlled = value !== undefined;\r\n  const [uncontrolled, setUncontrolled] = useState<T | undefined>(defaultValue);\r\n  const onChangeStable = useEventCallback(onChange);\r\n\r\n  // Track latest internal value for functional updates in controlled mode.\r\n  const currentRef = useRef(isControlled ? value : uncontrolled);\r\n  currentRef.current = isControlled ? value : uncontrolled;\r\n\r\n  const setValue = useCallback(\r\n    (next: T | ((prev: T | undefined) => T)) => {\r\n      const resolved =\r\n        typeof next === 'function' ? (next as (prev: T | undefined) => T)(currentRef.current) : next;\r\n\r\n      if (!isControlled) {\r\n        setUncontrolled(resolved);\r\n      }\r\n      onChangeStable(resolved);\r\n    },\r\n    [isControlled, onChangeStable],\r\n  );\r\n\r\n  return [isControlled ? value : uncontrolled, setValue];\r\n}\r\n","import { useEffect, useState } from 'react';\r\n\r\n/**\r\n * Returns a DOM container suitable for `ReactDOM.createPortal`. Lazily creates\r\n * one on first render under `document.body` so consumers don't need to set\r\n * up portal roots themselves. SSR-safe (returns null until mount).\r\n */\r\nexport function usePortal(id = 'elvora-portal-root'): HTMLElement | null {\r\n  const [container, setContainer] = useState<HTMLElement | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (typeof document === 'undefined') return;\r\n\r\n    let node = document.getElementById(id);\r\n    let created = false;\r\n    if (!node) {\r\n      node = document.createElement('div');\r\n      node.id = id;\r\n      node.setAttribute('data-elvora-portal', '');\r\n      document.body.appendChild(node);\r\n      created = true;\r\n    }\r\n    setContainer(node);\r\n\r\n    return () => {\r\n      // Only remove the node if this hook created it AND it has no other\r\n      // portal children mounted into it.\r\n      if (created && node && node.parentElement && node.childNodes.length === 0) {\r\n        node.parentElement.removeChild(node);\r\n      }\r\n    };\r\n  }, [id]);\r\n\r\n  return container;\r\n}\r\n","import { useEffect, useRef, type RefObject } from 'react';\r\nimport { createFocusTrap, type FocusTrapOptions } from '../focus/focusTrap';\r\n\r\nexport interface UseFocusTrapOptions extends FocusTrapOptions {\r\n  /** Whether the trap is active. Toggle this when the modal/menu opens/closes. */\r\n  enabled: boolean;\r\n}\r\n\r\n/**\r\n * Activates a focus trap on the provided ref while `enabled` is true. Cleans\r\n * up on unmount and disables on `enabled === false`.\r\n */\r\nexport function useFocusTrap<T extends HTMLElement>(\r\n  ref: RefObject<T | null>,\r\n  options: UseFocusTrapOptions,\r\n): void {\r\n  const trapRef = useRef<ReturnType<typeof createFocusTrap> | null>(null);\r\n\r\n  useEffect(() => {\r\n    const node = ref.current;\r\n    if (!node || !options.enabled) {\r\n      trapRef.current?.deactivate();\r\n      trapRef.current = null;\r\n      return;\r\n    }\r\n\r\n    const trap = createFocusTrap(node, options);\r\n    trap.activate();\r\n    trapRef.current = trap;\r\n\r\n    return () => {\r\n      trap.deactivate();\r\n      trapRef.current = null;\r\n    };\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [ref, options.enabled]);\r\n}\r\n","import { useEffect, type RefObject } from 'react';\r\n\r\nexport interface UseDismissableOptions {\r\n  enabled: boolean;\r\n  onDismiss: (event: Event) => void;\r\n  /** When true, Escape triggers dismiss. Default true. */\r\n  closeOnEscape?: boolean;\r\n  /** When true, outside pointerdown triggers dismiss. Default true. */\r\n  closeOnOutsideClick?: boolean;\r\n}\r\n\r\n/**\r\n * Listens for Escape and/or outside-click and calls `onDismiss`. Designed for\r\n * popovers, dropdowns, drawers, and toasts.\r\n */\r\nexport function useDismissable<T extends HTMLElement>(\r\n  ref: RefObject<T | null>,\r\n  {\r\n    enabled,\r\n    onDismiss,\r\n    closeOnEscape = true,\r\n    closeOnOutsideClick = true,\r\n  }: UseDismissableOptions,\r\n): void {\r\n  useEffect(() => {\r\n    if (!enabled) return;\r\n\r\n    function handleKey(e: KeyboardEvent): void {\r\n      if (closeOnEscape && e.key === 'Escape') onDismiss(e);\r\n    }\r\n    function handlePointer(e: MouseEvent | TouchEvent): void {\r\n      if (!closeOnOutsideClick) return;\r\n      const target = e.target as Node | null;\r\n      if (target && ref.current && !ref.current.contains(target)) onDismiss(e);\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKey, true);\r\n    document.addEventListener('mousedown', handlePointer, true);\r\n    document.addEventListener('touchstart', handlePointer, true);\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKey, true);\r\n      document.removeEventListener('mousedown', handlePointer, true);\r\n      document.removeEventListener('touchstart', handlePointer, true);\r\n    };\r\n  }, [enabled, onDismiss, closeOnEscape, closeOnOutsideClick, ref]);\r\n}\r\n"]}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@elvora/core",
+  "version": "1.0.0-rc.1",
+  "description": "Framework-agnostic primitives, state machines, accessibility logic, and shared types powering Elvora UI's React, RN, Angular, Vue, and Svelte adapters.",
+  "license": "MIT",
+  "author": "Elvora UI Contributors",
+  "homepage": "https://github.com/elvora-ui/elvora/tree/main/packages/core#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elvora-ui/elvora.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/elvora-ui/elvora/issues"
+  },
+  "keywords": [
+    "ui",
+    "headless",
+    "primitives",
+    "state-machine",
+    "accessibility",
+    "elvora"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@elvora/tokens": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "echo 'no lint configured'",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rimraf dist"
+  }
+}