@aberhamm/liquid-glass-react 0.2.0

package/dist/native/types.d.ts

@@ -0,0 +1,464 @@
+/**
+ * Public type contracts for `@aberhamm/liquid-glass-react`.
+ *
+ * These types are the load-bearing surface that every later plan (refraction,
+ * motion, fallback, prebuilt components) builds against. They are defined ONCE
+ * here so the API cannot drift between plans. No runtime code lives in this
+ * file — it is types only.
+ */
+import type { CSSProperties, MouseEventHandler, ReactNode, RefObject } from 'react';
+/**
+ * The displacement/refraction algorithm used to generate the SVG
+ * `feDisplacementMap` and tune the glass distortion.
+ *
+ * - `standard` — balanced edge-weighted displacement (the default look).
+ * - `polar` — radial/polar displacement, stronger toward the perimeter.
+ * - `prominent` — exaggerated displacement for a heavier "thick glass" feel.
+ * - `shader` — shader-style displacement profile for sharper highlights.
+ * - `turbulence` — adds fractal turbulence for an organic, watery distortion.
+ *
+ * @defaultValue `'standard'`
+ */
+export type DisplacementMode = 'standard' | 'polar' | 'prominent' | 'shader' | 'turbulence';
+/**
+ * The two Liquid Glass material variants Apple distinguishes — selected with one
+ * intentional prop instead of hand-tuning opacity.
+ *
+ * - `regular` — the dependable, fully adaptive control surface. Exactly the
+ *   current behavior, including content-adaptive auto-tint when
+ *   {@link LiquidGlassProps.adaptiveTint} is enabled.
+ * - `clear` — a permanently MORE transparent material for media-rich contexts
+ *   (e.g. floating over a photo). It is **non-adaptive by definition**:
+ *   {@link LiquidGlassProps.adaptiveTint} is force-disabled, and an optional
+ *   dimming scrim sits behind the content so labels stay legible over busy media.
+ *
+ * Apple's guidance is that the two **should never be mixed** in the same context.
+ *
+ * @defaultValue `'regular'`
+ */
+export type GlassVariant = 'regular' | 'clear';
+/**
+ * Explicit lens size (CSS pixels) for the cross-browser copy-refraction path
+ * (plan 030). When omitted the lens is sized to the glass's measured dimensions.
+ */
+export interface GlassSize {
+    /** Lens width in CSS pixels. */
+    width: number;
+    /** Lens height in CSS pixels. */
+    height: number;
+}
+/**
+ * Lens focal point for the cross-browser copy-refraction path (plan 030),
+ * expressed as fractions of the lens box in `[0, 1]` (`{ x: 0.5, y: 0.5 }` is
+ * the center). It drives the refracted copy's `transform-origin`, so the warp
+ * reads as if the light bends around that point.
+ */
+export interface GlassCenter {
+    /** Horizontal focal point as a fraction of the lens width (`0`–`1`). */
+    x: number;
+    /** Vertical focal point as a fraction of the lens height (`0`–`1`). */
+    y: number;
+}
+/**
+ * A 2D pointer position in CSS pixels, used for mouse-driven motion/elasticity.
+ *
+ * Coordinates are interpreted relative to whatever container the consumer wires
+ * up via {@link LiquidGlassProps.mouseContainer} (viewport by default).
+ */
+export type MousePos = {
+    /** Horizontal position in CSS pixels. */
+    x: number;
+    /** Vertical position in CSS pixels. */
+    y: number;
+};
+/**
+ * Result of runtime capability detection. Every field is a plain boolean so the
+ * object is trivially serializable and cheap to compare across renders.
+ *
+ * Produced by `detectGlassCapabilities()` and surfaced to components via the
+ * `useGlassCapabilities()` hook. During SSR (and before mount) all fields are
+ * conservatively `false`.
+ */
+export type GlassCapabilities = {
+    /**
+     * Whether the browser supports `backdrop-filter` (or the `-webkit-` prefixed
+     * variant). Required for any frosted-glass blur at all.
+     */
+    supportsBackdropFilter: boolean;
+    /**
+     * Positive Blink-family detection (Chrome, Edge, Brave, Opera). Explicitly
+     * NOT Firefox and NOT Safari/WebKit.
+     */
+    isChromium: boolean;
+    /**
+     * Whether an SVG `feDisplacementMap` filter composites correctly over
+     * `backdrop-filter`. This is a Chromium-only rendering-pipeline quirk with no
+     * standardized `CSS.supports` probe, so it is derived from {@link isChromium}.
+     */
+    supportsSvgBackdropDisplacement: boolean;
+    /** Whether the user agent is Firefox (Gecko). */
+    isFirefox: boolean;
+    /**
+     * Whether the user has requested reduced motion via
+     * `(prefers-reduced-motion: reduce)`.
+     */
+    prefersReducedMotion: boolean;
+    /**
+     * Whether the user has requested reduced transparency via
+     * `(prefers-reduced-transparency: reduce)`. When `true`, `<LiquidGlass>`
+     * suppresses live SVG refraction and renders a frostier, more-opaque surface.
+     * Orthogonal to {@link canRefract} — it applies on every tier and changes no
+     * box geometry. The authoritative live source is `useReducedTransparency()`;
+     * this field is a point-in-time snapshot.
+     */
+    prefersReducedTransparency: boolean;
+    /**
+     * Whether the user has requested increased contrast via
+     * `(prefers-contrast: more)`. When `true`, `<LiquidGlass>` adds a solid,
+     * visible inset border, raises content legibility (a more-opaque surface
+     * fill), and tones down decorative saturation/aberration that harms contrast.
+     * Orthogonal to {@link canRefract} AND to {@link prefersReducedTransparency} —
+     * it applies on every tier, composes with reduced-transparency, and changes no
+     * box geometry. The authoritative live source is `usePrefersContrast()`; this
+     * field is a point-in-time snapshot.
+     */
+    prefersContrastMore: boolean;
+    /**
+     * The single gate later plans consult: `true` only when the full refraction
+     * effect can actually render
+     * (`supportsBackdropFilter && supportsSvgBackdropDisplacement`). When `false`,
+     * components must fall back to a degraded (non-refractive) presentation.
+     */
+    canRefract: boolean;
+};
+/**
+ * PLATFORM-NEUTRAL props for the `<LiquidGlass>` PRIMITIVE.
+ *
+ * The shared base that BOTH the web (`liquid-glass.tsx`) and React Native
+ * (`liquid-glass.native.tsx`, plan 025) surfaces extend. It holds every prop
+ * that does NOT depend on DOM types, so the native surface can build on it
+ * without leaking `CSSProperties` / DOM event handlers. The web
+ * {@link LiquidGlassProps} extends this with the DOM-only `style` / `onClick` /
+ * pointer props; the native barrel defines its own `style?: ViewStyle` /
+ * `onPress?` over this same core.
+ *
+ * Every prop except {@link children} is optional — the primitive ships sensible
+ * defaults. Defaults documented here are the contract; the implementation plan
+ * (004+) must honor them.
+ */
+export interface LiquidGlassCoreProps {
+    /** Content rendered inside the glass surface. */
+    children: ReactNode;
+    /**
+     * Opt into the live SVG refraction/displacement pass (WEB-ONLY progressive
+     * enhancement). When `false` (the default) the glass renders the frosted
+     * fallback look — `blur()`/`saturate()` backdrop plus the pure-CSS bevel —
+     * with no `feDisplacementMap`.
+     *
+     * - **Web:** when `true` AND the browser can refract (Chromium), the SVG
+     *   displacement filter is attached; otherwise it degrades to the frosted look.
+     * - **React Native:** a documented NO-OP. RN has no SVG-over-backdrop
+     *   compositing, so the prop is accepted for a single cross-platform contract
+     *   but the surface always renders the frosted fallback.
+     *
+     * @defaultValue `false`
+     */
+    displacement?: boolean;
+    /**
+     * Strength of the displacement/refraction distortion. Higher values bend the
+     * backdrop more aggressively.
+     *
+     * @defaultValue `70`
+     */
+    displacementScale?: number;
+    /**
+     * Backdrop blur radius in pixels applied behind the glass.
+     *
+     * @defaultValue `0.0625`
+     */
+    blurAmount?: number;
+    /**
+     * Backdrop saturation multiplier (`1` = unchanged). Boosts color vibrancy of
+     * the content seen through the glass.
+     *
+     * @defaultValue `140`
+     */
+    saturation?: number;
+    /**
+     * Intensity of the chromatic aberration (RGB channel separation) at the
+     * refracted edges. `0` disables it.
+     *
+     * @defaultValue `2`
+     */
+    aberrationIntensity?: number;
+    /**
+     * How elastically the glass reacts to pointer movement. `0` is rigid; higher
+     * values produce a softer, more rubbery follow.
+     *
+     * @defaultValue `0.15`
+     */
+    elasticity?: number;
+    /**
+     * Corner radius of the glass surface. A number is treated as pixels; a string
+     * is passed through as a CSS length (e.g. `'1rem'`, `'50%'`).
+     *
+     * @defaultValue `999`
+     */
+    cornerRadius?: number | string;
+    /**
+     * Inner padding of the glass surface. A number is treated as pixels; a string
+     * is passed through as a CSS shorthand (e.g. `'8px 16px'`).
+     *
+     * @defaultValue `'24px'`
+     */
+    padding?: number | string;
+    /**
+     * Hint that the glass sits over a light background, so it tunes its tint and
+     * contrast for legibility.
+     *
+     * This is the MANUAL override. When set explicitly it ALWAYS wins over
+     * {@link adaptiveTint} (see that prop's precedence note) — the two never fight.
+     *
+     * @defaultValue `false`
+     */
+    overLight?: boolean;
+    /**
+     * Opt into CONTENT-ADAPTIVE auto-tint (plan 018). When `true`, the glass
+     * samples the luminance of the backdrop behind it (via the plan-017 sampler)
+     * and automatically shifts toward a light or dark treatment — the SAME tint /
+     * displacement / blur plumbing {@link overLight} already drives — so foreground
+     * content stays legible without hand-tuning `overLight`. A bright backdrop
+     * yields the light treatment (`overLight`-equivalent), a dark backdrop the
+     * default treatment.
+     *
+     * ## Precedence (documented rule)
+     *
+     * An EXPLICIT {@link overLight} always wins. `adaptiveTint` only drives the
+     * light/dark treatment when `overLight` is left unset/undefined:
+     *
+     * ```ts
+     * effectiveOverLight = overLight ?? (adaptiveTint && scheme ? scheme === 'light' : false)
+     * ```
+     *
+     * ## SSR / hydration
+     *
+     * The server and the first client paint render the default (unsampled,
+     * conservative) treatment, so hydration never mismatches. The sampled treatment
+     * is applied in an effect after mount.
+     *
+     * ## Graceful degradation
+     *
+     * When the backdrop cannot be sampled (cross-origin-tainted canvas, no canvas,
+     * SSR) the reading is `sampled: false` and auto-tint falls back to
+     * `overLight ?? false` with no error, no flicker loop, and no `console.error`.
+     *
+     * ## Accessibility interaction
+     *
+     * Under `(prefers-contrast: more)` (plan 014) the high-contrast treatment wins:
+     * auto-tint never undercuts the increased-contrast surface/legibility treatment.
+     *
+     * ## Limitation
+     *
+     * Auto-tint is BEST-EFFORT legibility. Critical text over unknown or
+     * cross-origin backdrops (which cannot be sampled) should be verified manually —
+     * the auto path silently falls back rather than guessing.
+     *
+     * @defaultValue `false`
+     */
+    adaptiveTint?: boolean;
+    /**
+     * Opt into SCROLL-AWARE SHADOW (plan 021). When `true`, the glass's decoupled
+     * outer drop-shadow (the `[data-lg-shadow]` sibling rendered behind the clipped
+     * surface) modulates its depth/darkness from the backdrop behind the element
+     * (via the plan-017 sampler): it DEEPENS and DARKENS over a dark/dense backdrop
+     * (reinforcing the "floating above content" read as text scrolls beneath) and
+     * EASES/LIGHTENS over a light/solid one. Apple's Liquid Glass does exactly this
+     * as content scrolls under a pinned glass bar.
+     *
+     * ## What it touches
+     *
+     * ONLY the existing drop-shadow sibling's blur/offset/opacity vary. The shadow
+     * stays a SIBLING of the `overflow:hidden` glass surface (never a box-shadow on
+     * the clipped node — the plan-005 layering invariant); no new layer is added.
+     *
+     * ## SSR / hydration
+     *
+     * The server and the first client paint render the conservative static shadow,
+     * so hydration never mismatches. The modulated shadow is applied in an effect
+     * after mount; sampling is throttled by the hook.
+     *
+     * ## Graceful degradation
+     *
+     * When the backdrop cannot be sampled (cross-origin-tainted canvas, no canvas,
+     * SSR) the reading is `sampled: false` and the shadow falls back to the current
+     * static shadow with no error and no flicker loop.
+     *
+     * ## Reduced motion
+     *
+     * Under `(prefers-reduced-motion: reduce)` the shadow does not animate between
+     * depths — it snaps/stays static (no transition).
+     *
+     * This is ADDITIVE and non-breaking: omitting it (default `false`) keeps today's
+     * rendering byte-for-byte and leaves the committed pixel baseline unchanged.
+     *
+     * @defaultValue `false`
+     */
+    scrollAwareShadow?: boolean;
+    /**
+     * The Liquid Glass material variant. See {@link GlassVariant}.
+     *
+     * - `'regular'` (default) — EXACTLY the current behavior, including
+     *   content-adaptive auto-tint when {@link adaptiveTint} is enabled. The
+     *   dependable, fully adaptive control surface.
+     * - `'clear'` — a permanently MORE transparent surface (lower fill opacity /
+     *   reduced tint) for media-rich contexts, with an optional dimming scrim
+     *   behind the content so labels stay legible over busy media. Geometry is
+     *   unchanged from `'regular'`.
+     *
+     * ## Interaction rules
+     *
+     * - **Clear is non-adaptive by definition.** In `'clear'`, {@link adaptiveTint}
+     *   is a **no-op** — the glass never samples the backdrop and never flips its
+     *   tint/ink. (Use `'regular'` + `adaptiveTint` for the adaptive material.)
+     * - **`overLight` still nudges legibility, not adaptivity.** In `'clear'`, an
+     *   explicit {@link overLight} may still tune the dimming/legibility treatment,
+     *   but it does NOT re-enable the adaptive sampling path.
+     * - **Accessibility wins.** Under `(prefers-contrast: more)` (plan 014) the
+     *   high-contrast treatment STILL applies in both variants — a11y beats the
+     *   Clear aesthetic, so Clear surfaces become legible/high-contrast when the
+     *   user asks for it.
+     *
+     * Per Apple's guidance, the two variants **should never be mixed** in the same
+     * context. This is ADDITIVE and non-breaking: omitting it keeps today's
+     * behavior exactly.
+     *
+     * @defaultValue `'regular'`
+     */
+    variant?: GlassVariant;
+    /**
+     * Which displacement algorithm to use. See {@link DisplacementMode}.
+     *
+     * @defaultValue `'standard'`
+     */
+    mode?: DisplacementMode;
+    /**
+     * CROSS-BROWSER copy-refraction content (plan 030). Distinct from
+     * {@link displacement} (the Chromium-only `backdrop-filter: url(#…)` bend of
+     * the LIVE page behind the glass): this path applies the SAME SVG displacement
+     * filter as an ELEMENT `filter: url(#…)` to a COPY of content, which DOES run in
+     * Chromium, Firefox, AND WebKit. The refracted copy is a decorative sibling
+     * BEHIND the crisp {@link children} (never an ancestor of them), so interactive
+     * content stays selectable and clickable.
+     *
+     * - **`refract` set** — the copy layer renders THIS node (a lens floated over
+     *   content the glass doesn't own), filtered; {@link behind} fills the bleed and
+     *   crisp {@link children} render on top. The node re-renders with the parent
+     *   (React keeps it in sync) and the lens region re-measures on resize.
+     * - **`refract` unset but {@link size}/{@link center} set** — IN-PLACE mode: the
+     *   glass refracts a copy of its OWN {@link children} through the element filter,
+     *   with the crisp children on top.
+     *
+     * Omitting `refract`, {@link size}, AND {@link center} disables this path
+     * entirely — the render is byte-for-byte the {@link displacement} behavior.
+     *
+     * ## Contract: the refracted copy must be PRESENTATIONAL
+     *
+     * The copy layer renders a SECOND instance of the copied node (`refract`, or —
+     * in IN-PLACE mode — a copy of {@link children}). It is `aria-hidden` + `inert`
+     * + `pointer-events: none`, so it is hidden from the a11y tree and cannot be
+     * interacted with. But React still MOUNTS it, so the copied subtree should be
+     * PURELY PRESENTATIONAL:
+     *
+     * - **No `id`s / label targets / in-page anchor targets** — they would be
+     *   duplicated in the DOM (`getElementById` / `label[for]` / `#hash` could bind
+     *   the hidden copy).
+     * - **No effects / focus-on-mount / data fetching / callback refs** — they run
+     *   for BOTH instances.
+     * - **No focusable controls** on engines that don't honor `inert` (older
+     *   Safari/Firefox), where they could otherwise become tabbable inside an
+     *   `aria-hidden` subtree.
+     *
+     * For anything non-trivial, prefer `refract={<decorative node>}` (a background
+     * you fully control) over IN-PLACE copying of rich interactive `children`.
+     * Passing `refract={null}` opts in but renders an EMPTY lens (only the
+     * {@link behind} bleed) — it does NOT fall back to copying `children`.
+     *
+     * **React Native:** a documented NO-OP (no SVG filters; always frosted).
+     *
+     * @defaultValue `undefined`
+     */
+    refract?: ReactNode;
+    /**
+     * Explicit lens {@link GlassSize} for the copy-refraction path (plan 030). When
+     * omitted the lens is sized to the glass's measured dimensions. Presence of this
+     * prop (with or without {@link refract}) opts INTO the cross-browser copy
+     * refraction in IN-PLACE mode (refract a copy of the own {@link children}).
+     *
+     * **React Native:** a documented NO-OP.
+     *
+     * @defaultValue `undefined` (use measured dimensions)
+     */
+    size?: GlassSize;
+    /**
+     * Lens focal point ({@link GlassCenter}, fractions in `[0, 1]`) for the
+     * copy-refraction path (plan 030). Drives the refracted copy's
+     * `transform-origin`. Presence opts into the cross-browser copy refraction in
+     * IN-PLACE mode, same as {@link size}.
+     *
+     * **React Native:** a documented NO-OP.
+     *
+     * @defaultValue `{ x: 0.5, y: 0.5 }` (center)
+     */
+    center?: GlassCenter;
+    /**
+     * Bleed fill (any CSS `background` value) painted behind the refracted copy on
+     * the copy-refraction path (plan 030), so the displacement has something to pull
+     * from where the copied content doesn't cover the lens box. Most useful with
+     * {@link refract} (a lens over foreign content); usually unnecessary for
+     * IN-PLACE mode. No effect unless the copy-refraction path is active.
+     *
+     * **React Native:** a documented NO-OP.
+     *
+     * @defaultValue `undefined`
+     */
+    behind?: string;
+    /** Additional class name(s) applied to the outermost glass element. */
+    className?: string;
+}
+/**
+ * Props for the WEB `<LiquidGlass>` PRIMITIVE.
+ *
+ * The platform-neutral {@link LiquidGlassCoreProps} plus the DOM-only props the
+ * web surface needs: inline `style`, the `onClick` handler, and the externally
+ * controlled pointer inputs. This is the same surface the library has always
+ * exposed — splitting the core out is type-only and changes nothing for web
+ * consumers.
+ */
+export type LiquidGlassProps = LiquidGlassCoreProps & {
+    /** Inline styles merged onto the outermost glass element. */
+    style?: CSSProperties;
+    /** Click handler forwarded to the glass surface. */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Externally controlled global pointer position. When provided, the primitive
+     * uses this instead of subscribing to its own pointer events — useful for
+     * coordinating many glass surfaces from one shared tracker.
+     *
+     * Leave undefined for the uncontrolled default (the primitive tracks the
+     * pointer itself).
+     */
+    globalMousePos?: MousePos;
+    /**
+     * Externally controlled pointer offset relative to the glass element's
+     * center, in CSS pixels. Paired with {@link globalMousePos} for fully
+     * controlled motion.
+     */
+    mouseOffset?: MousePos;
+    /**
+     * Element (or ref to one) whose bounds define the coordinate space for
+     * pointer tracking. Defaults to the viewport when omitted or `null`.
+     *
+     * @defaultValue `null` (viewport)
+     */
+    mouseContainer?: RefObject<HTMLElement | null> | HTMLElement | null;
+};

package/dist/native/types.js

@@ -0,0 +1,9 @@
+/**
+ * Public type contracts for `@aberhamm/liquid-glass-react`.
+ *
+ * These types are the load-bearing surface that every later plan (refraction,
+ * motion, fallback, prebuilt components) builds against. They are defined ONCE
+ * here so the API cannot drift between plans. No runtime code lives in this
+ * file — it is types only.
+ */
+export {};

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@aberhamm/liquid-glass-react",
+  "version": "0.2.0",
+  "description": "An independent React reimplementation of a liquid-glass UI component library.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Matthew Aberham",
+  "keywords": [
+    "react",
+    "liquid-glass",
+    "glassmorphism",
+    "backdrop-filter",
+    "svg-filter",
+    "displacement-map",
+    "glass",
+    "ui",
+    "components",
+    "refraction"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aberhamm/liquid-glass-react.git"
+  },
+  "homepage": "https://github.com/aberhamm/liquid-glass-react#readme",
+  "bugs": {
+    "url": "https://github.com/aberhamm/liquid-glass-react/issues"
+  },
+  "packageManager": "pnpm@10.33.3",
+  "sideEffects": ["**/*.css"],
+  "files": ["dist"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "react-native": "./dist/native/index.native.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./dist/native/index.native.d.ts",
+        "default": "./dist/native/index.native.js"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/liquid-glass-react.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": ["@biomejs/biome", "esbuild"]
+  },
+  "scripts": {
+    "build": "vite build && pnpm build:native",
+    "build:native": "tsc -p tsconfig.native.build.json",
+    "typecheck": "tsc --noEmit",
+    "typecheck:native": "tsc -p tsconfig.native.json --noEmit",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "test": "vitest run",
+    "test:native": "vitest run --config vitest.native.config.ts",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "e2e": "pnpm build-storybook && playwright test",
+    "e2e:ui": "pnpm build-storybook && playwright test --ui",
+    "attw": "attw --pack . --exclude-entrypoints ./styles.css",
+    "pack:check": "npm pack --dry-run",
+    "verify:expo": "node scripts/verify-native-resolution.mjs && vitest run --config vitest.native.config.ts",
+    "prepublishOnly": "pnpm lint && pnpm typecheck && pnpm test && pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-native": ">=0.74",
+    "expo-blur": ">=13",
+    "expo-linear-gradient": ">=13"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "expo-blur": {
+      "optional": true
+    },
+    "expo-linear-gradient": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.3",
+    "@biomejs/biome": "^1.9.4",
+    "@playwright/test": "^1.61.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react": "^8.6.18",
+    "@storybook/react-vite": "^8.6.18",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/react-native": "^14.0.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "expo-blur": "^56.0.3",
+    "expo-linear-gradient": "^56.0.4",
+    "http-server": "^14.1.1",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "^0.83.10",
+    "react-test-renderer": "^18.3.1",
+    "storybook": "^8.6.18",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.4.0",
+    "vitest": "^2.1.8"
+  }
+}