52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:Tcc9,import { createContext, useCallback, useContext, useMemo, useState, useSyncExternalStore, type ReactNode, } from 'react'; import { useColorScheme } from 'react-native'; import { readSystemAccessibility, subscribeToSystemAccessibility, type GlassyUiPreferences, type GlassyUiTheme, } from './lib/preferences'; import { GLASS_COLORS } from './lib/tokens'; type PreferenceState = Required; type PreferenceContextValue = { preferences: PreferenceState; setPreferences: (prefs: Partial) => void; }; const PreferencesContext = createContext(null); function ignorePreferences() {} /** The device's appearance and accessibility settings, as glass preferences. */ function useSystemPreferences(): PreferenceState { const scheme = useColorScheme(); const accessibility = useSyncExternalStore( subscribeToSystemAccessibility, readSystemAccessibility, readSystemAccessibility, ); return useMemo( () => ({ theme: scheme === 'light' ? 'light' : 'dark', mode: 'clear', reduceMotion: accessibility.reduceMotion, reduceTransparency: accessibility.reduceTransparency, }), [accessibility, scheme], ); } /** * Holds the glass preferences every component follows. It starts from the device's appearance, * Reduce Motion and Reduce Transparency settings; `defaultTheme` overrides the appearance until * the app sets a theme. Choices made with `setPreferences` last while the provider is mounted; * persist them in your app's own storage if they should survive a restart. */ export function GlassProvider({ children, defaultTheme, }: { children: ReactNode; defaultTheme?: GlassyUiTheme; }) { const system = useSystemPreferences(); const [explicit, setExplicit] = useState({}); const preferences = useMemo(() => { const merged: PreferenceState = { ...system, ...explicit }; if (defaultTheme && explicit.theme === undefined) merged.theme = defaultTheme; return merged; }, [defaultTheme, explicit, system]); const setPreferences = useCallback((next: Partial) => { setExplicit((previous) => ({ ...previous, ...next })); }, []); const value = useMemo(() => ({ preferences, setPreferences }), [preferences, setPreferences]); return {children}; } export const PreferencesProvider = GlassProvider; /** The provider's preferences, or the device's own settings when no provider is mounted. */ export function useOptionalPreferences(): PreferenceContextValue { const context = useContext(PreferencesContext); const system = useSystemPreferences(); return context ?? { preferences: system, setPreferences: ignorePreferences }; } export function usePreferences() { const context = useContext(PreferencesContext); if (!context) { throw new Error('usePreferences must be used within GlassProvider'); } return context; } /** The colours for the current theme, with the preferences they came from. */ export function useGlassTheme() { const { preferences } = useOptionalPreferences(); return { colors: GLASS_COLORS[preferences.theme], preferences }; } 55:Taee,import { AccessibilityInfo, Platform } from 'react-native'; export type GlassyUiMode = 'clear' | 'tinted'; export type GlassyUiTheme = 'light' | 'dark'; export interface GlassyUiPreferences { theme?: GlassyUiTheme; /** Clear glass shows more of what lies behind it; tinted glass holds a denser frost. */ mode?: GlassyUiMode; reduceTransparency?: boolean; reduceMotion?: boolean; } export type SystemAccessibility = { reduceMotion: boolean; reduceTransparency: boolean; }; type Subscription = { remove: () => void }; // The system's accessibility settings, read once and shared by every glass component. let snapshot: SystemAccessibility = { reduceMotion: false, reduceTransparency: false }; const listeners = new Set<() => void>(); let subscriptions: Subscription[] = []; function update(next: Partial) { const merged = { ...snapshot, ...next }; if ( merged.reduceMotion === snapshot.reduceMotion && merged.reduceTransparency === snapshot.reduceTransparency ) { return; } snapshot = merged; listeners.forEach((listener) => listener()); } function warnReadFailure(cause: Error) { console.warn('Glassy UI could not read an accessibility setting', cause); } function startListening() { AccessibilityInfo.isReduceMotionEnabled() .then((reduceMotion) => update({ reduceMotion })) .catch(warnReadFailure); subscriptions.push( AccessibilityInfo.addEventListener('reduceMotionChanged', (reduceMotion) => update({ reduceMotion }), ), ); if (Platform.OS === 'ios') { AccessibilityInfo.isReduceTransparencyEnabled() .then((reduceTransparency) => update({ reduceTransparency })) .catch(warnReadFailure); subscriptions.push( AccessibilityInfo.addEventListener('reduceTransparencyChanged', (reduceTransparency) => update({ reduceTransparency }), ), ); } // React Native for Web has no reduce-transparency event; the browser reports it directly. if (Platform.OS === 'web' && window.matchMedia) { const query = window.matchMedia('(prefers-reduced-transparency: reduce)'); const handleChange = () => update({ reduceTransparency: query.matches }); update({ reduceTransparency: query.matches }); query.addEventListener('change', handleChange); subscriptions.push({ remove: () => query.removeEventListener('change', handleChange) }); } } export function subscribeToSystemAccessibility(listener: () => void) { listeners.add(listener); if (listeners.size === 1) startListening(); return () => { listeners.delete(listener); if (listeners.size > 0) return; subscriptions.forEach((subscription) => subscription.remove()); subscriptions = []; }; } export function readSystemAccessibility() { return snapshot; } 56:Tddf,import { Platform } from 'react-native'; import type { GlassyUiTheme } from './preferences'; export type GlassTone = 'neutral' | 'blue' | 'green' | 'orange' | 'red' | 'purple'; export type GlassColors = { /** Selection, active controls and the prominent button. */ accent: string; accentForeground: string; border: string; /** The resting fill of fields and unselected controls. */ controlSurface: string; focusRing: string; foreground: string; /** Extra frost over blurred glass, for clear and tinted glass. */ glassFill: Record<'clear' | 'tinted', string>; invalid: string; knob: string; mutedForeground: string; /** Where glass cannot be drawn: Reduce Transparency. */ opaqueSurface: string; /** Floating layers that must hold 4.5:1 text over any backdrop. */ overlaySurface: string; /** The hairline round a glass edge, and the light it catches along the top. */ rim: string; rimHighlight: string; scrim: string; shadow: string; shadowRaised: string; tones: Record; track: string; }; /** Glass stays neutral. Blue marks actions and selection; the tones mark status. */ export const GLASS_COLORS = { dark: { accent: '#0067d9', accentForeground: '#ffffff', border: 'rgba(245, 245, 247, 0.22)', controlSurface: 'rgba(245, 245, 247, 0.08)', focusRing: '#b8b8be', foreground: '#f5f5f7', glassFill: { clear: 'rgba(255, 255, 255, 0.04)', tinted: 'rgba(28, 28, 30, 0.45)' }, invalid: '#ff7a8e', knob: '#ffffff', mutedForeground: '#d1d1d6', opaqueSurface: '#2c2c2e', overlaySurface: 'rgba(44, 44, 46, 0.78)', rim: 'rgba(255, 255, 255, 0.16)', rimHighlight: 'rgba(255, 255, 255, 0.34)', scrim: 'rgba(0, 0, 0, 0.45)', shadow: '0px 1px 2px rgba(0, 0, 0, 0.18), 0px 8px 24px -4px rgba(0, 0, 0, 0.28)', shadowRaised: '0px 2px 6px rgba(0, 0, 0, 0.2), 0px 30px 60px -18px rgba(0, 0, 0, 0.55)', tones: { neutral: '#8e8e93', blue: '#78b7ff', green: '#33d69f', orange: '#ffbd38', red: '#ff5c7a', purple: '#9b80ff', }, track: 'rgba(118, 118, 128, 0.36)', }, light: { accent: '#0067d9', accentForeground: '#ffffff', border: 'rgba(0, 0, 0, 0.14)', controlSurface: 'rgba(255, 255, 255, 0.72)', focusRing: '#66666a', foreground: '#222224', glassFill: { clear: 'rgba(255, 255, 255, 0.18)', tinted: 'rgba(255, 255, 255, 0.55)' }, invalid: '#c4153f', knob: '#ffffff', mutedForeground: '#505055', opaqueSurface: '#ffffff', overlaySurface: 'rgba(255, 255, 255, 0.82)', rim: 'rgba(255, 255, 255, 0.55)', rimHighlight: 'rgba(255, 255, 255, 0.9)', scrim: 'rgba(0, 0, 0, 0.16)', shadow: '0px 1px 2px rgba(0, 0, 0, 0.06), 0px 8px 24px -6px rgba(0, 0, 0, 0.14)', shadowRaised: '0px 2px 6px rgba(0, 0, 0, 0.06), 0px 28px 56px -18px rgba(0, 0, 0, 0.26)', tones: { neutral: '#8e8e93', blue: '#005ec6', green: '#14a874', orange: '#e8960c', red: '#e8345a', purple: '#6a4cf0', }, track: 'rgba(118, 118, 128, 0.2)', }, } as const satisfies Record; export const GLASS_RADIUS = { md: 16, lg: 24, capsule: 999 } as const; /** Arrivals ease out; physical responses spring and settle. Exits run shorter than arrivals. */ export const GLASS_MOTION = { duration: 200, /** React Native for Web has no native driver and warns when asked for one. */ nativeDriver: Platform.OS !== 'web', spring: { damping: 18, mass: 1, stiffness: 260 }, } as const; 57:T135e,import { forwardRef, useCallback } from 'react'; import { Animated, Pressable, StyleSheet, type PressableProps, type StyleProp, type View, type ViewStyle, } from 'react-native'; import { useGlassTheme } from './glass-provider'; import { CheckText, CheckWell, checkFieldStyles, useDrawIn, usePressDown, type CheckSize, } from './lib/check-field'; import { GlassIcon, type GlassIconName } from './lib/icons'; import { useControllableState } from './lib/use-controllable-state'; export type GlassCheckboxSize = CheckSize; export type GlassCheckedState = boolean | 'indeterminate'; export type GlassCheckboxProps = Omit & { checked?: GlassCheckedState; defaultChecked?: GlassCheckedState; /** A line of muted text under the label. */ description?: string; /** Marks the choice as wrong: the box's edge turns the invalid colour. */ invalid?: boolean; /** Text beside the box; the whole row then toggles it. Without one, set accessibilityLabel. */ label?: string; /** Hears the new state. Pressing an indeterminate box checks it. */ onCheckedChange?: (checked: boolean) => void; size?: GlassCheckboxSize; style?: StyleProp; }; const BOX = { sm: { radius: 5, size: 16 }, md: { radius: 7, size: 20 }, } as const; // The web's 2.1 stroke on a 16-point grid, redrawn on GlassIcon's 20-point grid. const MARK_STROKE = 2.1 * (20 / 16); type MarkProps = { name: GlassIconName; progress: Animated.Value; size: number; }; // A mark grows in from half size as it fades in, and shrinks back as it fades out. function Mark({ name, progress, size }: MarkProps) { const { colors } = useGlassTheme(); return ( ); } /** * A checkbox for one choice or, with `checked="indeterminate"`, for a parent of several. The box * fills with the accent and its mark draws in; unchecking runs the same way back. */ export const GlassCheckbox = forwardRef( ( { checked, defaultChecked = false, description, disabled, invalid = false, label, onCheckedChange, onPressIn, onPressOut, size = 'md', style, ...rest }, ref, ) => { const { preferences } = useGlassTheme(); const [state, setState] = useControllableState(checked, defaultChecked); const tick = useDrawIn(state === true, preferences.reduceMotion); const dash = useDrawIn(state === 'indeterminate', preferences.reduceMotion); const press = usePressDown(preferences.reduceMotion, onPressIn, onPressOut); const box = BOX[size]; // A lone box still answers a 44-point touch. const hitSlop = label === undefined ? (44 - box.size) / 2 : undefined; // An indeterminate box becomes checked, as on the web. const toggle = useCallback(() => { const next = state !== true; setState(next); onCheckedChange?.(next); }, [onCheckedChange, setState, state]); return ( {label === undefined ? null : ( )} ); }, ); GlassCheckbox.displayName = 'GlassCheckbox'; const styles = StyleSheet.create({ centre: { alignItems: 'center', justifyContent: 'center' }, }); 58:T17ed,import { useCallback, useEffect, useState, type ReactNode } from 'react'; import { Animated, Easing, StyleSheet, Text, View, type GestureResponderEvent, type PressableProps, } from 'react-native'; import { useGlassTheme } from '../glass-provider'; import { GLASS_MOTION } from './tokens'; export type CheckSize = 'sm' | 'md'; // The edge of an empty box is what says it can be ticked, so it holds 3:1 over the glass it // sits on, which a text field's hairline does not. const EDGE = { dark: 'rgba(244, 245, 249, 0.78)', light: 'rgba(27, 29, 36, 0.6)' } as const; const EDGE_WIDTH = 1.5; // The recessed well a field sits in, from --lg-input-shadow. const WELL_SHADOW = { dark: 'inset 0px 1px 2px rgba(0, 0, 0, 0.24), inset 0px -1px 0px rgba(255, 255, 255, 0.06)', light: 'inset 0px 1px 2px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(255, 255, 255, 0.8)', } as const; // A chosen box is a bead of the accent, lit along its top. const CHOSEN_SHADOW = 'inset 0px 1px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.28)'; /** * Runs from 0 to 1 as `on` turns true, springing in, and back to 0, quicker and without the * spring, as it turns false. Reduce Motion jumps to the end. */ export function useDrawIn(on: boolean, reduceMotion: boolean) { const [progress] = useState(() => new Animated.Value(on ? 1 : 0)); useEffect(() => { if (reduceMotion) { progress.setValue(on ? 1 : 0); return; } if (on) { Animated.spring(progress, { ...GLASS_MOTION.spring, toValue: 1, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(); return; } Animated.timing(progress, { duration: 140, easing: Easing.in(Easing.quad), toValue: 0, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(); }, [on, progress, reduceMotion]); return progress; } /** A press that sets a box down and springs it back. Reduce Motion leaves the box still. */ export function usePressDown( reduceMotion: boolean, onPressIn: PressableProps['onPressIn'], onPressOut: PressableProps['onPressOut'], ) { const [press] = useState(() => new Animated.Value(0)); const settle = useCallback( (toValue: number) => { if (reduceMotion) return; Animated.spring(press, { ...GLASS_MOTION.spring, toValue, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(); }, [press, reduceMotion], ); const handlePressIn = useCallback( (event: GestureResponderEvent) => { onPressIn?.(event); settle(1); }, [onPressIn, settle], ); const handlePressOut = useCallback( (event: GestureResponderEvent) => { onPressOut?.(event); settle(0); }, [onPressOut, settle], ); return { handlePressIn, handlePressOut, press }; } type CheckWellProps = { /** The mark, centred over the box. */ children: ReactNode; /** Filled with the accent: a checked or indeterminate box, or the chosen radio. */ chosen: boolean; invalid: boolean; /** The press progress from usePressDown. */ press: Animated.Value; radius: number; size: number; }; /** * The small recessed well a checkbox or radio draws. It fills with the accent when chosen and * sets down to 90% under a press. */ export function CheckWell({ children, chosen, invalid, press, radius, size }: CheckWellProps) { const { colors, preferences } = useGlassTheme(); const fill = useDrawIn(chosen, preferences.reduceMotion); const corners = { borderCurve: 'continuous', borderRadius: radius } as const; return ( {children} ); } type CheckTextProps = { description?: string; label: string; size: CheckSize; }; /** The label beside a checkbox or radio, with an optional muted line under it. */ export function CheckText({ description, label, size }: CheckTextProps) { const { colors } = useGlassTheme(); return ( {label} {description ? ( {description} ) : null} ); } export const checkFieldStyles = StyleSheet.create({ alone: { alignSelf: 'flex-start' }, disabled: { opacity: 0.45 }, // A labelled row is one touch target, at least 44 points tall. field: { alignItems: 'flex-start', flexDirection: 'row', gap: 12, minHeight: 44, paddingVertical: 11, }, fieldSmall: { gap: 10 }, }); const styles = StyleSheet.create({ centre: { alignItems: 'center', justifyContent: 'center' }, // Covers the edge as well, so a chosen box shows no rim. cover: { bottom: -EDGE_WIDTH, left: -EDGE_WIDTH, position: 'absolute', right: -EDGE_WIDTH, top: -EDGE_WIDTH, }, description: { fontSize: 13, lineHeight: 18 }, label: { fontSize: 15, lineHeight: 21 }, labelSmall: { fontSize: 14, lineHeight: 20 }, text: { flex: 1, minWidth: 0, paddingTop: 1 }, }); 59:T714,import { View } from 'react-native'; import Svg, { Path } from 'react-native-svg'; export type GlassIconName = | 'check' | 'chevron-down' | 'chevron-right' | 'close' | 'dash' | 'danger' | 'info' | 'success' | 'warning'; // The web components' own strokes, drawn on a 20-point grid. const PATHS = { check: ['M4.5 10.5 8.25 14.25 15.5 6.25'], 'chevron-down': ['M5 7.5l5 5 5-5'], 'chevron-right': ['M7.5 4.4 13.1 10l-5.6 5.6'], close: ['M5.5 5.5l9 9m0-9l-9 9'], dash: ['M5 10h10'], danger: ['M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z', 'M7.6 7.6l4.8 4.8', 'M12.4 7.6l-4.8 4.8'], info: ['M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z', 'M10 9.2v4.1', 'M10 6.7h.01'], success: ['M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z', 'M6.9 10.2l2.2 2.2 4-4.4'], warning: ['M10 3.6 17 16H3L10 3.6Z', 'M10 8.4v3.4', 'M10 14h.01'], } as const satisfies Record; export type GlassIconProps = { color: string; name: GlassIconName; size?: number; strokeWidth?: number; }; /** A stroked glyph from the library's small icon set. Decorative; label its control instead. */ export function GlassIcon({ color, name, size = 20, strokeWidth = 1.8 }: GlassIconProps) { // The hiding lives on a View: on the web, Svg passes its props to a bare