@aberhamm/liquid-glass-react 0.2.0

package/dist/liquid-glass-react.css

@@ -0,0 +1 @@
+.lg-content{display:inline-flex;align-items:center;justify-content:center;gap:.5em;color:var(--lg-fg, rgba(17, 17, 19, .92));text-shadow:0 1px 1px rgba(255,255,255,.45);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}@media(prefers-color-scheme:dark){.lg-content{color:var(--lg-fg, rgba(245, 245, 247, .94));text-shadow:0 1px 2px rgba(0,0,0,.55)}}.lg-button{position:relative;-moz-appearance:none;appearance:none;-webkit-appearance:none;border:0;margin:0;background:transparent;font:inherit;font-weight:600;line-height:1.2;letter-spacing:.01em;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:var(--lg-fg, rgba(17, 17, 19, .92));text-decoration:none;border-radius:inherit;transition:filter .16s ease,opacity .16s ease}.lg-button:hover:not(:disabled){filter:brightness(1.04)}.lg-button:focus-visible{outline:2px solid var(--lg-focus-ring, rgba(60, 130, 255, .9));outline-offset:2px;box-shadow:0 0 0 4px #3c82ff40}.lg-button:disabled{cursor:not-allowed;opacity:.5;filter:saturate(.7)}@media(prefers-contrast:more){.lg-content{color:var(--lg-fg, rgba(0, 0, 0, 1));text-shadow:none}.lg-button:focus-visible,.lg-segmented-option:has(.lg-segmented-input:focus-visible){outline:3px solid var(--lg-focus-ring, rgba(0, 90, 255, 1));outline-offset:2px;box-shadow:0 0 0 5px #ffffffe6}}@media(prefers-contrast:more)and (prefers-color-scheme:dark){.lg-content{color:var(--lg-fg, rgba(255, 255, 255, 1));text-shadow:none}.lg-button:focus-visible,.lg-segmented-option:has(.lg-segmented-input:focus-visible){box-shadow:0 0 0 5px #000000e6}}.lg-button[data-shine=true]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,#fff0 30%,#ffffff8c,#fff0 70%);background-size:250% 100%;background-position:150% 0;opacity:0}.lg-button[data-shine=true]:active:not(:disabled):after{animation:lg-shine .48s ease-out}@keyframes lg-shine{0%{background-position:150% 0;opacity:0}20%{opacity:1}to{background-position:-50% 0;opacity:0}}@media(prefers-reduced-motion:reduce){.lg-button[data-shine=true]:active:not(:disabled):after{animation:none}}.lg-button--primary{--lg-fg: rgba(255, 255, 255, .98);text-shadow:0 1px 2px rgba(0,0,0,.35)}.lg-button--secondary{--lg-fg: rgba(20, 22, 28, .92)}.lg-button--subtle{--lg-fg: rgba(40, 42, 50, .82);font-weight:500}@media(prefers-color-scheme:dark){.lg-button--secondary{--lg-fg: rgba(240, 242, 248, .94)}.lg-button--subtle{--lg-fg: rgba(225, 227, 235, .85)}}.lg-button--sm{font-size:.8125rem}.lg-button--md{font-size:.9375rem}.lg-button--lg{font-size:1.0625rem}.lg-button--icon{font-size:1rem}.lg-button--icon .lg-content{width:1.25em;height:1.25em;gap:0}.lg-card{position:relative;display:block;border-radius:inherit}.lg-card .lg-content{display:block;text-align:left;text-shadow:none;color:var(--lg-fg, rgba(20, 22, 28, .9))}@media(prefers-color-scheme:dark){.lg-card .lg-content{color:var(--lg-fg, rgba(238, 240, 246, .92))}}.lg-card--flat{--lg-card-lift: none}.lg-card--raised{--lg-card-lift: 0 10px 30px rgba(0, 0, 0, .16)}.lg-card--floating{--lg-card-lift: 0 22px 60px rgba(0, 0, 0, .24)}.lg-card[data-elevation]:not(.lg-card--flat){filter:drop-shadow(var(--lg-card-lift, none))}.lg-segmented{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;margin:0;padding:0;min-inline-size:0;display:inline-flex;flex-direction:column;gap:.5rem;--lg-seg-pad: .25rem;--lg-seg-radius: 999px;font:inherit}.lg-segmented-legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lg-segmented-legend--visible{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--lg-fg, rgba(20, 22, 28, .82))}@media(prefers-color-scheme:dark){.lg-segmented-legend--visible{color:var(--lg-fg, rgba(232, 234, 240, .86))}}.lg-segmented-track{position:relative;display:inline-flex;align-items:stretch;padding:var(--lg-seg-pad);border-radius:var(--lg-seg-radius);background:#ffffff1f;box-shadow:var(--lg-edge-shadow);isolation:isolate;-webkit-tap-highlight-color:transparent}@media(prefers-color-scheme:dark){.lg-segmented-track{background:#14161c38}}.lg-segmented-indicator{position:absolute;top:var(--lg-seg-pad);left:var(--lg-seg-pad);bottom:var(--lg-seg-pad);border-radius:var(--lg-seg-radius);z-index:0;pointer-events:none;will-change:transform,width}.lg-segmented-glass{border-radius:var(--lg-seg-radius)}.lg-segmented-glass-fill{display:block;width:100%;height:100%}.lg-segmented-option{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.4em;flex:1 1 auto;border-radius:var(--lg-seg-radius);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;font-weight:600;letter-spacing:.01em;color:var(--lg-fg, rgba(40, 42, 50, .7));transition:color .2s ease}.lg-segmented-option[data-active=true]{color:var(--lg-fg-active, rgba(17, 17, 19, .96))}@media(prefers-color-scheme:dark){.lg-segmented-option{color:var(--lg-fg, rgba(220, 222, 230, .72))}.lg-segmented-option[data-active=true]{color:var(--lg-fg-active, rgba(248, 249, 252, .98))}}.lg-segmented-input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;pointer-events:none;clip:rect(0,0,0,0)}.lg-segmented-input:focus-visible+.lg-segmented-icon,.lg-segmented-input:focus-visible~.lg-segmented-label,.lg-segmented-option:focus-within{outline:none}.lg-segmented-option:has(.lg-segmented-input:focus-visible){outline:2px solid var(--lg-focus-ring, rgba(60, 130, 255, .9));outline-offset:2px;box-shadow:0 0 0 4px #3c82ff40}.lg-segmented-option:has(.lg-segmented-input:disabled){cursor:not-allowed;opacity:.45}.lg-segmented-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}.lg-segmented-option[data-icon-only=true]{aspect-ratio:1 / 1}.lg-segmented--sm{font-size:.8125rem}.lg-segmented--sm .lg-segmented-option{padding:.3rem .7rem}.lg-segmented--md{font-size:.9375rem}.lg-segmented--md .lg-segmented-option{padding:.45rem 1rem}.lg-segmented--lg{font-size:1.0625rem}.lg-segmented--lg .lg-segmented-option{padding:.6rem 1.35rem}

package/dist/native/index.native.d.ts

@@ -0,0 +1,19 @@
+/**
+ * React Native entry point for @aberhamm/liquid-glass-react (plan 025).
+ *
+ * Metro resolves this via the `react-native` export condition (see
+ * `package.json`). It barrels ONLY the platform-neutral surface: the native
+ * `<LiquidGlass>` primitive, the shared design tokens (plan 022), and the
+ * platform-neutral public types.
+ *
+ * It deliberately does NOT re-export the DOM-only prebuilt components
+ * (`GlassButton` / `GlassCard` / `GlassSegmentedControl`) or the DOM-only hooks
+ * (capability detection, backdrop-luminance sampling, mouse tracking), so Metro
+ * never pulls web-only code (`document`, `window`, `backdrop-filter`, SVG) into a
+ * native bundle. Native ports of the prebuilt components are out of scope for
+ * this round (primitive only).
+ */
+export declare const VERSION = "0.0.0";
+export { LiquidGlass, type LiquidGlassNativeProps } from './liquid-glass.native';
+export type { DisplacementMode, GlassVariant, LiquidGlassCoreProps, MousePos, } from './types';
+export * from './tokens';

package/dist/native/index.native.js

@@ -0,0 +1,19 @@
+/**
+ * React Native entry point for @aberhamm/liquid-glass-react (plan 025).
+ *
+ * Metro resolves this via the `react-native` export condition (see
+ * `package.json`). It barrels ONLY the platform-neutral surface: the native
+ * `<LiquidGlass>` primitive, the shared design tokens (plan 022), and the
+ * platform-neutral public types.
+ *
+ * It deliberately does NOT re-export the DOM-only prebuilt components
+ * (`GlassButton` / `GlassCard` / `GlassSegmentedControl`) or the DOM-only hooks
+ * (capability detection, backdrop-luminance sampling, mouse tracking), so Metro
+ * never pulls web-only code (`document`, `window`, `backdrop-filter`, SVG) into a
+ * native bundle. Native ports of the prebuilt components are out of scope for
+ * this round (primitive only).
+ */
+export const VERSION = '0.0.0';
+export { LiquidGlass } from './liquid-glass.native';
+// Shared design tokens (plan 022) — the same source of truth the web build uses.
+export * from './tokens';

package/dist/native/liquid-glass.native.d.ts

@@ -0,0 +1,65 @@
+/**
+ * `<LiquidGlass>` — React Native surface (plan 025).
+ *
+ * The web `<LiquidGlass>` (`liquid-glass.tsx`) renders a tiered
+ * `backdrop-filter` recipe with an OPT-IN, Chromium-only SVG refraction pass.
+ * React Native has no DOM, no `backdrop-filter`, and no SVG-over-backdrop
+ * compositing, so this surface renders ONLY the portable frosted recipe — the
+ * same look the web file falls back to on every non-Chromium engine — built from
+ * real native primitives:
+ *
+ *   1. an `expo-blur` `BlurView` for the frosted backdrop (a real iOS
+ *      `UIVisualEffectView`; on Android `experimentalBlurMethod` approximates it
+ *      and degrades gracefully);
+ *   2. a white TINT overlay (`FROSTED_DEFAULT_FILL`) that gives the surface its
+ *      milky body — alpha is raised slightly on Android where the blur is weaker
+ *      so the surface never reads as a bare transparent box;
+ *   3. an `expo-linear-gradient` SHEEN highlight (top-biased specular, from the
+ *      `SPECULAR_*` tokens);
+ *   4. a ~1px hairline ring (`FROSTED_HAIRLINE_RING`);
+ *   5. a soft drop shadow (iOS `shadow*` / Android `elevation`) from
+ *      `SHADOW_LAYERS`.
+ *
+ * Every geometry/color value comes from `src/tokens.ts`, the one source of truth
+ * shared with the web file — this module only SERIALIZES those values into RN
+ * style objects (the RN analogue of the web file owning the CSS strings).
+ *
+ * ## Prop contract
+ *
+ * Typed on the platform-neutral {@link LiquidGlassCoreProps} (plan 022) plus
+ * native-appropriate `style?: ViewStyle` and `onPress?` — it NEVER references the
+ * web `LiquidGlassProps`'s DOM-only style/event types. The event handler is
+ * platform-idiomatic: native exposes `onPress` (web keeps `onClick`).
+ *
+ * The web-only refraction/motion props are accepted for a single cross-platform
+ * API contract but are DOCUMENTED NO-OPs here — native always renders frosted:
+ * `displacement`, `displacementScale`, `aberrationIntensity`, `elasticity`,
+ * `saturation` (no native backdrop-saturation control), `overLight`,
+ * `adaptiveTint`, `scrollAwareShadow`, `variant`, `mode`, `className`, and the
+ * plan-030 cross-browser copy-refraction props `refract`, `size`, `center`,
+ * `behind` (RN has no SVG element filters, so there is no copy-refraction path).
+ */
+import type { ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+import type { LiquidGlassCoreProps } from './types';
+/**
+ * Props for the React Native `<LiquidGlass>` surface: the platform-neutral core
+ * (plan 022) plus native `style` and an `onPress` handler. Distinct from the web
+ * `LiquidGlassProps`, which carries DOM-only style/event types.
+ */
+export type LiquidGlassNativeProps = LiquidGlassCoreProps & {
+    /** Style merged onto the outermost native `View`. */
+    style?: ViewStyle;
+    /** Press handler (native-idiomatic; the web surface uses `onClick`). */
+    onPress?: () => void;
+};
+/**
+ * The React Native liquid-glass primitive. See the file header for the layer
+ * stack, the token mapping, and the web-only prop no-ops.
+ *
+ * The web-only props (`displacement`, `saturation`, `variant`, `mode`, `refract`,
+ * `size`, `center`, `behind`, etc.) are intentionally NOT read — they're accepted
+ * so the cross-platform API is uniform, but native always renders the frosted
+ * recipe.
+ */
+export declare function LiquidGlass({ children, blurAmount, cornerRadius, padding, style, onPress, }: LiquidGlassNativeProps): ReactNode;

package/dist/native/liquid-glass.native.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `<LiquidGlass>` — React Native surface (plan 025).
+ *
+ * The web `<LiquidGlass>` (`liquid-glass.tsx`) renders a tiered
+ * `backdrop-filter` recipe with an OPT-IN, Chromium-only SVG refraction pass.
+ * React Native has no DOM, no `backdrop-filter`, and no SVG-over-backdrop
+ * compositing, so this surface renders ONLY the portable frosted recipe — the
+ * same look the web file falls back to on every non-Chromium engine — built from
+ * real native primitives:
+ *
+ *   1. an `expo-blur` `BlurView` for the frosted backdrop (a real iOS
+ *      `UIVisualEffectView`; on Android `experimentalBlurMethod` approximates it
+ *      and degrades gracefully);
+ *   2. a white TINT overlay (`FROSTED_DEFAULT_FILL`) that gives the surface its
+ *      milky body — alpha is raised slightly on Android where the blur is weaker
+ *      so the surface never reads as a bare transparent box;
+ *   3. an `expo-linear-gradient` SHEEN highlight (top-biased specular, from the
+ *      `SPECULAR_*` tokens);
+ *   4. a ~1px hairline ring (`FROSTED_HAIRLINE_RING`);
+ *   5. a soft drop shadow (iOS `shadow*` / Android `elevation`) from
+ *      `SHADOW_LAYERS`.
+ *
+ * Every geometry/color value comes from `src/tokens.ts`, the one source of truth
+ * shared with the web file — this module only SERIALIZES those values into RN
+ * style objects (the RN analogue of the web file owning the CSS strings).
+ *
+ * ## Prop contract
+ *
+ * Typed on the platform-neutral {@link LiquidGlassCoreProps} (plan 022) plus
+ * native-appropriate `style?: ViewStyle` and `onPress?` — it NEVER references the
+ * web `LiquidGlassProps`'s DOM-only style/event types. The event handler is
+ * platform-idiomatic: native exposes `onPress` (web keeps `onClick`).
+ *
+ * The web-only refraction/motion props are accepted for a single cross-platform
+ * API contract but are DOCUMENTED NO-OPs here — native always renders frosted:
+ * `displacement`, `displacementScale`, `aberrationIntensity`, `elasticity`,
+ * `saturation` (no native backdrop-saturation control), `overLight`,
+ * `adaptiveTint`, `scrollAwareShadow`, `variant`, `mode`, `className`, and the
+ * plan-030 cross-browser copy-refraction props `refract`, `size`, `center`,
+ * `behind` (RN has no SVG element filters, so there is no copy-refraction path).
+ */
+import { BlurView } from 'expo-blur';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+import { BLUR_PX_PER_UNIT, DEFAULTS, FROSTED_DEFAULT_FILL, FROSTED_HAIRLINE_RING, SHADOW_LAYERS, SPECULAR_CORE_OPACITY, } from './tokens';
+/**
+ * Maps the small public `blurAmount` (a rem-ish factor, default `0.0625`) onto an
+ * `expo-blur` `intensity` (0–100). The web file turns `blurAmount` into a px blur
+ * via {@link BLUR_PX_PER_UNIT}; native has no px blur radius, so we reuse that
+ * same px figure and scale it into the intensity scale. Default `blurAmount`
+ * lands at ~`intensity: 25`, a legible frosted default; larger values ramp up and
+ * saturate at 100.
+ */
+const NATIVE_BLUR_INTENSITY_SCALE = 25;
+/**
+ * Extra tint alpha added on Android, where `expo-blur` (even with
+ * `experimentalBlurMethod`) blurs less convincingly than the iOS
+ * `UIVisualEffectView`. Raising the fill keeps the surface legible instead of a
+ * near-transparent box — the documented Android degradation boundary.
+ */
+const ANDROID_TINT_ALPHA_BOOST = 0.12;
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/** Coerce the public `cornerRadius` (number | CSS length string) to an RN radius. */
+function toRadius(value) {
+    if (typeof value === 'number')
+        return value;
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : Number(DEFAULTS.cornerRadius) || 0;
+}
+/**
+ * Coerce the public `padding` (number | CSS shorthand string like `'24px 32px'`)
+ * to an RN padding style. Percentage/keyword tokens fall back to a numeric
+ * default — RN paddings must be numbers.
+ */
+function toPadding(value) {
+    if (typeof value === 'number')
+        return { padding: value };
+    const parts = value
+        .trim()
+        .split(/\s+/)
+        .map((token) => Number.parseFloat(token))
+        .filter((n) => Number.isFinite(n));
+    if (parts.length === 1)
+        return { padding: parts[0] ?? 0 };
+    if (parts.length === 2) {
+        return { paddingVertical: parts[0] ?? 0, paddingHorizontal: parts[1] ?? 0 };
+    }
+    if (parts.length === 3) {
+        return {
+            paddingTop: parts[0] ?? 0,
+            paddingHorizontal: parts[1] ?? 0,
+            paddingBottom: parts[2] ?? 0,
+        };
+    }
+    if (parts.length >= 4) {
+        return {
+            paddingTop: parts[0] ?? 0,
+            paddingRight: parts[1] ?? 0,
+            paddingBottom: parts[2] ?? 0,
+            paddingLeft: parts[3] ?? 0,
+        };
+    }
+    return { padding: 24 };
+}
+/** Parse an `rgb()/rgba()` string into channels, or `null` if it isn't one. */
+function parseRgba(color) {
+    const match = color.match(/rgba?\(([^)]+)\)/i);
+    if (!match || !match[1])
+        return null;
+    const parts = match[1].split(',').map((token) => Number.parseFloat(token.trim()));
+    if (parts.length < 3)
+        return null;
+    return { r: parts[0] ?? 0, g: parts[1] ?? 0, b: parts[2] ?? 0, a: parts[3] ?? 1 };
+}
+/**
+ * The frosted tint fill. iOS uses the shared {@link FROSTED_DEFAULT_FILL}; Android
+ * raises the alpha by {@link ANDROID_TINT_ALPHA_BOOST} for legibility under its
+ * weaker blur. Falls back to the raw token if the color can't be parsed.
+ */
+function resolveTintFill() {
+    if (Platform.OS !== 'android')
+        return FROSTED_DEFAULT_FILL;
+    const parsed = parseRgba(FROSTED_DEFAULT_FILL);
+    if (!parsed)
+        return FROSTED_DEFAULT_FILL;
+    const alpha = clamp(parsed.a + ANDROID_TINT_ALPHA_BOOST, 0, 1);
+    return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${alpha})`;
+}
+const styles = StyleSheet.create({
+    // Inline-block-ish container: shrinks to content, carries padding + shadow. It
+    // does NOT clip (no overflow:hidden) so the iOS shadow / Android elevation is
+    // not cut off; the blur is clipped by the inner `clip` layer instead.
+    container: {
+        position: 'relative',
+        alignSelf: 'flex-start',
+        shadowColor: '#000',
+    },
+    // Absolutely-filled clip layer: rounds + clips the BlurView/tint/sheen to the
+    // corner radius and carries the hairline ring. A sibling BEHIND the content.
+    clip: {
+        ...StyleSheet.absoluteFillObject,
+        overflow: 'hidden',
+        borderWidth: FROSTED_HAIRLINE_RING.width,
+        borderColor: FROSTED_HAIRLINE_RING.color,
+    },
+    fill: StyleSheet.absoluteFillObject,
+    // Content sits above the surface layers, unaffected by the blur/tint/sheen.
+    content: {
+        position: 'relative',
+        zIndex: 1,
+    },
+});
+/**
+ * The React Native liquid-glass primitive. See the file header for the layer
+ * stack, the token mapping, and the web-only prop no-ops.
+ *
+ * The web-only props (`displacement`, `saturation`, `variant`, `mode`, `refract`,
+ * `size`, `center`, `behind`, etc.) are intentionally NOT read — they're accepted
+ * so the cross-platform API is uniform, but native always renders the frosted
+ * recipe.
+ */
+export function LiquidGlass({ children, blurAmount = DEFAULTS.blurAmount, cornerRadius = DEFAULTS.cornerRadius, padding = DEFAULTS.padding, style, onPress, }) {
+    const radius = toRadius(cornerRadius);
+    // Reuse the web px-blur mapping (blurAmount * BLUR_PX_PER_UNIT) then project it
+    // onto expo-blur's 0–100 intensity scale.
+    const blurPx = blurAmount * BLUR_PX_PER_UNIT;
+    const intensity = clamp(Math.round(blurPx * NATIVE_BLUR_INTENSITY_SCALE), 0, 100);
+    const tintFill = resolveTintFill();
+    // Top-biased specular sheen mirroring the web highlight's rest stops
+    // (SPECULAR_REST at top-center): bright core → mid → transparent.
+    const core = SPECULAR_CORE_OPACITY.rest;
+    const sheenColors = [
+        `rgba(255, 255, 255, ${core})`,
+        `rgba(255, 255, 255, ${(core * 0.4).toFixed(3)})`,
+        'rgba(255, 255, 255, 0)',
+    ];
+    // Primary drop-shadow layer (RN supports a single shadow; take the base layer).
+    // `SHADOW_LAYERS.rest` is a fixed `as const` tuple, so index 0 is always present.
+    const { y: shadowY, blur: shadowBlur, alpha: shadowAlpha } = SHADOW_LAYERS.rest[0];
+    const containerStyle = {
+        borderRadius: radius,
+        // iOS shadow; Android elevation needs a backgroundColor to render — it is
+        // fully covered by the absolutely-filled clip layer, so it is never visible.
+        shadowOffset: { width: 0, height: shadowY },
+        shadowOpacity: shadowAlpha,
+        shadowRadius: shadowBlur,
+        elevation: Math.round(shadowY),
+        ...(Platform.OS === 'android' ? { backgroundColor: tintFill } : null),
+        ...toPadding(padding),
+    };
+    const clipStyle = { borderRadius: radius };
+    const surface = (_jsxs(_Fragment, { children: [_jsxs(View, { pointerEvents: "none", style: [styles.clip, clipStyle], children: [_jsx(BlurView, { intensity: intensity, tint: "light", experimentalBlurMethod: Platform.OS === 'android' ? 'dimezisBlurView' : 'none', style: styles.fill }), _jsx(View, { style: [styles.fill, { backgroundColor: tintFill }] }), _jsx(LinearGradient, { colors: sheenColors, locations: [0, 0.3, 0.65], start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 }, style: styles.fill })] }), _jsx(View, { style: styles.content, children: children })] }));
+    if (onPress) {
+        return (_jsx(Pressable, { onPress: onPress, style: [styles.container, containerStyle, style], children: surface }));
+    }
+    return _jsx(View, { style: [styles.container, containerStyle, style], children: surface });
+}

package/dist/native/tokens.d.ts

@@ -0,0 +1,245 @@
+/**
+ * Platform-neutral design tokens (plan 022).
+ *
+ * The single source of truth for the library's plain-data design constants —
+ * tint/saturation defaults, the blur-per-unit mapping, the drop-shadow layers
+ * and scroll-aware depth factors, the specular/press-glow geometry, the
+ * material-variant parameters, and the accessibility (reduced-transparency /
+ * increased-contrast) fills. These were previously embedded as web-local
+ * `const`s inside `liquid-glass.tsx`; they live here so BOTH the web file
+ * (`liquid-glass.tsx`) and the future React Native file
+ * (`liquid-glass.native.tsx`, plan 025) can consume ONE source of truth.
+ *
+ * ## Hard constraints (what may live here)
+ *
+ * This module is a leaf with ZERO platform coupling:
+ *
+ * - It imports nothing from the React renderer packages.
+ * - It contains NO DOM style types and NO browser-global references.
+ * - It holds only the underlying NUMBERS / COLORS / structured data. Anything
+ *   inherently CSS — `mixBlendMode`, `backdrop-filter` strings, the
+ *   `box-shadow` serialization (`buildDropShadow`), the `radial-gradient`
+ *   templates — STAYS in the web file. The native file will serialize these
+ *   same values into RN style objects.
+ *
+ * The only import is the platform-neutral {@link DisplacementMode} string-union
+ * type (no runtime, no DOM), so {@link DEFAULTS.mode} keeps its exact type.
+ *
+ * @internal Not part of the public package API pre-1.0 (eng-review decision):
+ * not re-exported from `index.ts`. The native barrel (plan 025) may import from
+ * `./tokens` directly. Exposing publicly later is additive / non-breaking.
+ */
+import type { DisplacementMode } from './types';
+/** Default prop values for `<LiquidGlass>` (the parity spec). */
+export declare const DEFAULTS: {
+    readonly displacementScale: 70;
+    readonly blurAmount: 0.0625;
+    readonly saturation: 140;
+    readonly aberrationIntensity: 2;
+    readonly cornerRadius: number | string;
+    readonly mode: DisplacementMode;
+    readonly padding: number | string;
+    readonly elasticity: 0.15;
+};
+/**
+ * Maps the small public `blurAmount` (default `0.0625`) onto a px backdrop blur.
+ * The upstream convention treats `blurAmount` as a rem-ish factor; we scale by
+ * 16 (1rem) so the default lands at ~1px and larger values scale linearly.
+ */
+export declare const BLUR_PX_PER_UNIT = 16;
+/**
+ * Scheme-aware translucent fill layered ON TOP of the blurred backdrop when
+ * `prefers-reduced-transparency: reduce` is active and the backdrop tiers (1/2)
+ * still carry a `backdrop-filter`. It frosts the surface toward opaque so the
+ * material reads as static frosted glass rather than live lensing. Higher alpha
+ * than the tier-3 solid fill because here it composites over a blurred backdrop,
+ * not bare content. (a11y plan 013.)
+ */
+export declare const REDUCED_TRANSPARENCY_FILL: {
+    readonly light: "rgba(255, 255, 255, 0.75)";
+    readonly dark: "rgba(30, 30, 35, 0.75)";
+};
+/**
+ * Scheme-aware solid fill for the no-`backdrop-filter` tier (3) under reduced
+ * transparency: a higher alpha than the default `0.55` solid fallback so the
+ * surface is more opaque / less transparent as the setting requests.
+ */
+export declare const REDUCED_TRANSPARENCY_SOLID_FILL: {
+    readonly light: "rgba(255, 255, 255, 0.92)";
+    readonly dark: "rgba(30, 30, 35, 0.92)";
+};
+/**
+ * Solid border color drawn as an INSET `box-shadow` ring on the surface so the
+ * box geometry is unchanged (no layout shift) — a real `border` would grow the
+ * box or eat into padding. Scheme-aware near-opaque ink/light for a clearly
+ * delineated edge that the soft bevel alone cannot provide.
+ */
+export declare const CONTRAST_BORDER_COLOR: {
+    readonly light: "rgba(0, 0, 0, 0.92)";
+    readonly dark: "rgba(255, 255, 255, 0.92)";
+};
+/** Inset solid-border ring width (px), prepended to the surface box-shadow. */
+export declare const CONTRAST_BORDER_WIDTH = 2;
+/**
+ * More-opaque scheme-aware surface fill under increased contrast: it reduces
+ * the backdrop tint/show-through so foreground content reads at a higher
+ * contrast ratio. Layered over any retained blur (tiers 1/2) or used as the
+ * solid fill (tier 3). At 0.92 alpha it is at least as opaque as the
+ * reduced-transparency fills, so when BOTH a11y axes are active the contrast
+ * fill never undercuts reduced-transparency's opacity intent — contrast wants
+ * MORE opacity, not less, on every tier.
+ */
+export declare const CONTRAST_FILL: {
+    readonly light: "rgba(255, 255, 255, 0.92)";
+    readonly dark: "rgba(22, 22, 26, 0.92)";
+};
+/**
+ * Under increased contrast, saturation is pinned to 100% (no decorative
+ * vibrancy boost) so the backdrop doesn't push color that competes with
+ * foreground text. The default `saturation` (140) is decorative and harms
+ * contrast, so it is overridden — never raised.
+ */
+export declare const CONTRAST_SATURATION = 100;
+/**
+ * Content-adaptive foreground ink (plan 018). When `adaptiveTint` is on, the
+ * content layer's `color` flips with the verdict so small content (button
+ * labels, captions) stays legible: DARK ink over a bright/light backdrop, LIGHT
+ * ink over a dark backdrop. `color` is inheritable, so children that don't set
+ * their own color pick it up; children with an explicit color keep it. Best-
+ * effort legibility — see the `adaptiveTint` TSDoc limitation note.
+ */
+export declare const CONTENT_INK: {
+    readonly light: "rgba(255, 255, 255, 0.96)";
+    readonly dark: "rgba(17, 17, 20, 0.96)";
+};
+/**
+ * Resting specular-hotspot center as a percentage of the surface box. With no
+ * pointer over the glass (or under reduced-motion) the highlight falls back to a
+ * neutral, top-biased position so the material reads like overhead light on
+ * glass rather than a flat sweep. Top-center, slightly above the box.
+ */
+export declare const SPECULAR_REST_X = "50%";
+export declare const SPECULAR_REST_Y = "0%";
+/**
+ * Peak opacity of the specular hotspot's bright core (the inner stop). Hover
+ * brightens it slightly (see `LiquidGlass`); these are the base values.
+ */
+export declare const SPECULAR_CORE_OPACITY: {
+    readonly rest: 0.55;
+    readonly hover: 0.85;
+};
+/**
+ * Radius of the specular hotspot gradient as a percentage of the surface's
+ * larger dimension. Big enough to read as a soft glassy hotspot, small enough
+ * that it tracks visibly rather than washing the whole surface.
+ */
+export declare const SPECULAR_RADIUS = "70%";
+/**
+ * Peak opacity of the press-glow bloom's core when active. The glow originates
+ * at the contact point and spreads, then fades via the layer's opacity
+ * transition (gated on reduced-motion).
+ */
+export declare const PRESS_GLOW_OPACITY = 0.5;
+/** Radius of the press-glow bloom as a percentage of the surface box. */
+export declare const PRESS_GLOW_RADIUS = "60%";
+/**
+ * The static drop-shadow (the `static` factor of 1 reproduces today's exact
+ * values) is scaled by a single multiplier per backdrop scheme. The shadow
+ * DEEPENS/DARKENS over a dark backdrop (factor > 1 → larger offset/blur + darker
+ * alpha, lifting the glass above dense scrolling content) and EASES/LIGHTENS over
+ * a light/solid one (factor < 1). Factors are deliberately subtle so the polish
+ * reads as a gentle depth shift, not a jump.
+ *
+ * Keys map directly to `BackdropScheme`; `static` is the SSR / first-paint /
+ * unsampled fallback and equals the committed baseline shadow exactly.
+ */
+export declare const SCROLL_SHADOW_DEPTH: {
+    /** Conservative fallback: byte-for-byte the existing static shadow. */
+    readonly static: 1;
+    /** Dark/dense backdrop ⇒ deeper, darker shadow. */
+    readonly dark: 1.35;
+    /** Light/solid backdrop ⇒ shallower, lighter shadow. */
+    readonly light: 0.7;
+};
+/** Base outer drop-shadow layers (offsetY, blur, alpha) at rest and on hover. */
+export declare const SHADOW_LAYERS: {
+    readonly rest: readonly [{
+        readonly y: 8;
+        readonly blur: 24;
+        readonly alpha: 0.22;
+    }, {
+        readonly y: 1;
+        readonly blur: 4;
+        readonly alpha: 0.14;
+    }];
+    readonly hover: readonly [{
+        readonly y: 12;
+        readonly blur: 32;
+        readonly alpha: 0.28;
+    }, {
+        readonly y: 2;
+        readonly blur: 8;
+        readonly alpha: 0.18;
+    }];
+};
+/**
+ * Per-variant surface parameters (plan 019). A small parameter LOOKUP — NOT a
+ * theming system — that feeds the existing surface/content styles.
+ *
+ * - `'regular'` is a pure pass-through: `saturationFactor = 1`, no scrim, and
+ *   `forceNonAdaptive = false`, so the default render is byte-for-byte unchanged
+ *   and `adaptiveTint` keeps working exactly as in plan 018.
+ * - `'clear'` is permanently MORE transparent: the decorative backdrop saturation
+ *   is pulled back (`saturationFactor < 1` reduces the tint/vibrancy show-through)
+ *   and `forceNonAdaptive` hard-disables the adaptive sampling path. A subtle
+ *   dimming scrim is rendered as a CONTENT SIBLING (see the layer stack) so labels
+ *   stay legible over busy media without re-introducing adaptivity.
+ */
+export declare const VARIANT_PARAMS: {
+    readonly regular: {
+        /** Multiplier on the requested `saturation` (1 = unchanged). */
+        readonly saturationFactor: 1;
+        /** Force the adaptive-tint path off regardless of `adaptiveTint`. */
+        readonly forceNonAdaptive: false;
+        /** Scheme-aware dimming-scrim color behind the content, or `null` for none. */
+        readonly scrim: {
+            light: string;
+            dark: string;
+        } | null;
+    };
+    readonly clear: {
+        readonly saturationFactor: 0.7;
+        readonly forceNonAdaptive: true;
+        readonly scrim: {
+            light: string;
+            dark: string;
+        } | null;
+    };
+};
+/**
+ * The frosted-glass DEFAULT fill: a faint white tint that gives the surface a
+ * subtle milky body even before any blur. ≈ `rgba(255, 255, 255, 0.10)`, the
+ * `oklch(1 0 0 / 0.1)` equivalent used by the Video.js liquid-glass reference.
+ *
+ * Defined HERE as the CONTRACT only — plan 022 does NOT apply it to any surface
+ * (that would change the committed pixel baseline). Plan 023 wires it onto the
+ * frosted DEFAULT look. Distinct in intent from the a11y
+ * {@link REDUCED_TRANSPARENCY_FILL} / {@link CONTRAST_FILL} fills, which exist
+ * to force opacity under specific OS settings.
+ */
+export declare const FROSTED_DEFAULT_FILL = "rgba(255, 255, 255, 0.1)";
+/**
+ * The frosted-glass DEFAULT hairline ring: a crisp ~1px inset edge that defines
+ * the frosted surface's perimeter. `color` is a translucent white drawn as an
+ * inset ring; `width` is in px.
+ *
+ * Defined HERE as the CONTRACT only — plan 022 does NOT apply it (no surface
+ * change). Plan 023 serializes it onto the frosted DEFAULT surface (e.g. as an
+ * inset `box-shadow` ring, geometry-neutral like the existing bevel).
+ */
+export declare const FROSTED_HAIRLINE_RING: {
+    /** Inset ring color (translucent white). */
+    readonly color: "rgba(255, 255, 255, 0.5)";
+    /** Ring width in px (hairline). */
+    readonly width: 1;
+};