52: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"] 53: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 }; } 54: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; } 55: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; 56:T1289,import { createContext, forwardRef, useCallback, useContext, useMemo } from 'react'; import { Animated, Pressable, StyleSheet, View, type PressableProps, type StyleProp, type ViewProps, type ViewStyle, } from 'react-native'; import { useGlassTheme } from './glass-provider'; import { CheckText, CheckWell, checkFieldStyles, useDrawIn, usePressDown } from './lib/check-field'; import { GLASS_RADIUS } from './lib/tokens'; import { useControllableState } from './lib/use-controllable-state'; type RadioGroupContextValue = { disabled: boolean; select: (value: string) => void; selected: string; }; const RadioGroupContext = createContext(null); function useRadioGroup() { const context = useContext(RadioGroupContext); if (!context) { throw new Error('GlassRadioGroupItem must be used within GlassRadioGroup'); } return context; } export type GlassRadioGroupProps = ViewProps & { defaultValue?: string; /** Turns every option off. */ disabled?: boolean; onValueChange?: (value: string) => void; value?: string; }; /** A group of options where exactly one is chosen. */ export const GlassRadioGroup = forwardRef( ({ defaultValue, disabled = false, onValueChange, value, ...rest }, ref) => { const [selected, select] = useControllableState(value, defaultValue ?? '', onValueChange); const context = useMemo(() => ({ disabled, select, selected }), [disabled, select, selected]); return ( ); }, ); GlassRadioGroup.displayName = 'GlassRadioGroup'; export type GlassRadioGroupItemProps = Omit & { /** A line of muted text under the label. */ description?: string; /** Marks the choice as wrong: the edge turns the invalid colour. */ invalid?: boolean; /** Text beside the button; the whole row then chooses it. Without one, set accessibilityLabel. */ label?: string; style?: StyleProp; value: string; }; const SIZE = 20; // A lone button still answers a 44-point touch. const HIT_SLOP = (44 - SIZE) / 2; /** One option in a GlassRadioGroup. Its white dot springs in when chosen and shrinks straight out. */ export const GlassRadioGroupItem = forwardRef( ( { description, disabled, invalid = false, label, onPressIn, onPressOut, style, value, ...rest }, ref, ) => { const { colors, preferences } = useGlassTheme(); const { disabled: groupDisabled, select, selected } = useRadioGroup(); const checked = selected === value; const off = groupDisabled || Boolean(disabled); const dot = useDrawIn(checked, preferences.reduceMotion); const press = usePressDown(preferences.reduceMotion, onPressIn, onPressOut); const choose = useCallback(() => { if (!checked) select(value); }, [checked, select, value]); return ( {label === undefined ? null : ( )} ); }, ); GlassRadioGroupItem.displayName = 'GlassRadioGroupItem'; const styles = StyleSheet.create({ dot: { borderRadius: GLASS_RADIUS.capsule, boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.3)', height: SIZE * 0.42, width: SIZE * 0.42, }, }); 57: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 }, }); 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/glassyui-native/glass-provider.tsx","content":"$53","type":"registry:ui","target":"components/glassyui/glass-provider.tsx"},{"path":"registry/glassyui-native/lib/preferences.ts","content":"$54","type":"registry:lib","target":"components/glassyui/lib/preferences.ts"},{"path":"registry/glassyui-native/lib/tokens.ts","content":"$55","type":"registry:lib","target":"components/glassyui/lib/tokens.ts"},{"path":"registry/glassyui-native/lib/use-controllable-state.ts","content":"import { useCallback, useState } from 'react';\n\n/**\n * State a component owns until its parent passes `value`; then the parent owns it. Either way\n * `onChange` hears every change the component makes.\n */\nexport function useControllableState(\n value: T | undefined,\n defaultValue: T,\n onChange?: (next: T) => void,\n) {\n const [uncontrolled, setUncontrolled] = useState(defaultValue);\n const controlled = value !== undefined;\n const current = controlled ? value : uncontrolled;\n\n const setValue = useCallback(\n (next: T) => {\n if (!controlled) setUncontrolled(next);\n\n onChange?.(next);\n },\n [controlled, onChange],\n );\n\n return [current, setValue] as const;\n}\n","type":"registry:lib","target":"components/glassyui/lib/use-controllable-state.ts"},{"path":"registry/glassyui-native/glass-radio-group.tsx","content":"$56","type":"registry:ui","target":"components/glassyui/glass-radio-group.tsx"},{"path":"registry/glassyui-native/lib/check-field.tsx","content":"$57","type":"registry:lib","target":"components/glassyui/lib/check-field.tsx"}],"className":"h-[70svh] min-h-80"}]]}]