{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "glass-sheet",
"title": "Glass Sheet",
"description": "A glass panel that slides in from an edge. Bottom sheets drag down to dismiss.",
"dependencies": [
"react-native-safe-area-context",
"react-native-svg"
],
"registryDependencies": [
"@glassyui-native/glass-provider",
"@glassyui-native/glass-surface"
],
"files": [
{
"path": "registry/glassyui-native/glass-sheet.tsx",
"content": "import {\n forwardRef,\n useCallback,\n useEffect,\n useEffectEvent,\n useState,\n type ForwardedRef,\n type ReactNode,\n} from 'react';\nimport {\n Animated,\n I18nManager,\n PanResponder,\n StyleSheet,\n useWindowDimensions,\n View,\n type GestureResponderEvent,\n type LayoutChangeEvent,\n type PanResponderGestureState,\n type Text,\n type TextProps,\n type ViewProps,\n} from 'react-native';\nimport { useGlassTheme } from './glass-provider';\nimport { GlassSurface } from './glass-surface';\nimport {\n LAYER_EASING,\n ModalLayerClose,\n ModalLayerCloseButton,\n ModalLayerDescription,\n ModalLayerHost,\n ModalLayerRoot,\n ModalLayerScrim,\n ModalLayerTitle,\n ModalLayerTrigger,\n useLayerPresence,\n useModalLayer,\n useSafeInsets,\n type ModalLayerRootProps,\n type ModalLayerSlotProps,\n} from './lib/modal-layer';\nimport { GLASS_MOTION } from './lib/tokens';\n\nexport type GlassSheetSide = 'top' | 'right' | 'bottom' | 'left';\n\nexport type GlassSheetProps = ModalLayerRootProps;\n\nexport type GlassSheetTriggerProps = ModalLayerSlotProps;\n\nexport type GlassSheetCloseProps = ModalLayerSlotProps;\n\nexport type GlassSheetContentProps = ViewProps & {\n children?: ReactNode;\n /** Names the close button for assistive tech. Defaults to \"Close sheet\". */\n closeLabel?: string;\n /**\n * The edge the sheet slides in from. Left and right follow the layout direction, so a left\n * sheet opens from the right in a right-to-left layout. Defaults to bottom.\n */\n side?: GlassSheetSide;\n};\n\n// The gap between the sheet and the screen's edges, and the panel's own padding.\nconst EDGE = 8;\n\nconst PAD = 24;\n\n// A downward fling faster than this, in points per millisecond, dismisses the sheet.\nconst FLING_VELOCITY = 0.5;\n\n// Where a drag of the grabber ended: its distance and its speed, in points per millisecond.\ntype GestureRelease = { dy: number; vy: number };\n\n/** Holds a sheet's open state for its trigger, content and close controls. */\nexport function GlassSheet(props: GlassSheetProps) {\n return ;\n}\n\n/** Opens the sheet when its single child, such as a GlassButton, is pressed. */\nexport function GlassSheetTrigger({ children }: GlassSheetTriggerProps) {\n return (\n \n {children}\n \n );\n}\n\n/** Closes the sheet when its single child is pressed. */\nexport function GlassSheetClose({ children }: GlassSheetCloseProps) {\n return (\n \n {children}\n \n );\n}\n\n// Upward drags meet growing resistance instead of lifting the sheet off its edge.\nfunction resist(distance: number) {\n return distance >= 0 ? distance : -Math.sqrt(-distance) * 2;\n}\n\n// Which way the sheet leaves: down and right are positive. A left sheet sits at the start edge.\nfunction exitDirection(side: GlassSheetSide) {\n if (side === 'bottom') return 1;\n\n if (side === 'top') return -1;\n\n return (side === 'right') === !I18nManager.isRTL ? 1 : -1;\n}\n\n// Padding that keeps content clear of a safe-area inset the sheet's edge reaches into.\nfunction clearOf(inset: number) {\n return Math.max(PAD, inset - EDGE);\n}\n\ntype SheetLayerProps = GlassSheetContentProps & {\n onClose: () => void;\n onHidden: () => void;\n open: boolean;\n panelRef: ForwardedRef;\n side: GlassSheetSide;\n};\n\n// Mounted while the sheet is on screen, so each opening measures the sheet afresh.\nfunction SheetLayer({\n children,\n closeLabel = 'Close sheet',\n onClose,\n onHidden,\n open,\n panelRef,\n side,\n style,\n ...rest\n}: SheetLayerProps) {\n const { colors, preferences } = useGlassTheme();\n const insets = useSafeInsets();\n const { height, width } = useWindowDimensions();\n const [progress] = useState(() => new Animated.Value(0));\n const [drag] = useState(() => new Animated.Value(0));\n const [extent, setExtent] = useState(null);\n const [released, setReleased] = useState(null);\n const reduceMotion = preferences.reduceMotion;\n const vertical = side === 'top' || side === 'bottom';\n const measured = extent !== null;\n // Until the sheet has measured itself, a whole screen away keeps it out of sight.\n const travel = (extent ?? (vertical ? height : width)) + EDGE * 2;\n\n useEffect(() => {\n if (reduceMotion) {\n progress.setValue(1);\n drag.setValue(0);\n\n return;\n }\n\n if (!measured) {\n // Closed before it was laid out, so there is nothing on screen to slide away.\n if (!open) onHidden();\n\n return;\n }\n\n const slide = Animated.timing(progress, {\n duration: open ? 500 : 300,\n easing: LAYER_EASING.out,\n toValue: open ? 1 : 0,\n useNativeDriver: GLASS_MOTION.nativeDriver,\n });\n\n // Reopened while dropping away after a drag, the sheet springs back to its edge too. A new\n // drag stops only that spring, not the slide.\n const animation = open\n ? Animated.parallel(\n [\n slide,\n Animated.spring(drag, {\n ...GLASS_MOTION.spring,\n toValue: 0,\n useNativeDriver: GLASS_MOTION.nativeDriver,\n }),\n ],\n { stopTogether: false },\n )\n : slide;\n\n animation.start(({ finished }) => {\n if (finished && !open) onHidden();\n });\n\n return () => animation.stop();\n }, [drag, measured, onHidden, open, progress, reduceMotion]);\n\n // The responder is built once, so a re-render mid-drag cannot reset the gesture. It hands each\n // release to an effect, which reads the latest props.\n const [grabber] = useState(() => {\n const release = (_event: GestureResponderEvent, gesture: PanResponderGestureState) =>\n setReleased({ dy: gesture.dy, vy: gesture.vy });\n\n return PanResponder.create({\n onMoveShouldSetPanResponder: () => true,\n onPanResponderGrant: () => drag.stopAnimation(),\n onPanResponderMove: (_event, gesture) => drag.setValue(resist(gesture.dy)),\n onPanResponderRelease: release,\n onPanResponderTerminate: release,\n onPanResponderTerminationRequest: () => false,\n onStartShouldSetPanResponder: () => true,\n });\n });\n\n const settle = useEffectEvent(({ dy, vy }: GestureRelease) => {\n // The exit continues from where the finger let go.\n if (resist(dy) > Math.min(120, (extent ?? 0) * 0.25) || vy > FLING_VELOCITY) {\n onClose();\n\n return;\n }\n\n if (reduceMotion) {\n drag.setValue(0);\n\n return;\n }\n\n Animated.spring(drag, {\n ...GLASS_MOTION.spring,\n toValue: 0,\n useNativeDriver: GLASS_MOTION.nativeDriver,\n }).start();\n });\n\n useEffect(() => {\n if (released) settle(released);\n }, [released]);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { height: sheetHeight, width: sheetWidth } = event.nativeEvent.layout;\n\n setExtent(vertical ? sheetHeight : sheetWidth);\n };\n\n const padding = {\n paddingBottom: side === 'top' ? PAD : clearOf(insets.bottom),\n paddingEnd: side === 'right' ? clearOf(insets.end) : PAD,\n paddingStart: side === 'left' ? clearOf(insets.start) : PAD,\n paddingTop: side === 'bottom' ? PAD : clearOf(insets.top),\n };\n\n // A sheet only moves along its own axis; only a bottom sheet is ever dragged.\n const offset = Animated.add(\n progress.interpolate({ inputRange: [0, 1], outputRange: [exitDirection(side) * travel, 0] }),\n drag,\n );\n\n return (\n <>\n \n \n \n \n {side === 'bottom' ? (\n \n \n \n ) : null}\n {children}\n \n \n \n \n \n );\n}\n\n/** A modal glass panel that slides in from an edge; a bottom sheet drags down to dismiss. */\nexport const GlassSheetContent = forwardRef(\n ({ side = 'bottom', ...props }, ref) => {\n const { open, setOpen } = useModalLayer('GlassSheetContent', 'GlassSheet');\n const { preferences } = useGlassTheme();\n const [present, hide] = useLayerPresence(open, preferences.reduceMotion);\n const close = useCallback(() => setOpen(false), [setOpen]);\n\n return (\n \n \n \n );\n },\n);\n\nGlassSheetContent.displayName = 'GlassSheetContent';\n\n/** The sheet's heading, announced as a header. */\nexport const GlassSheetTitle = forwardRef((props, ref) => (\n \n));\n\nGlassSheetTitle.displayName = 'GlassSheetTitle';\n\n/** The sheet's supporting text. */\nexport const GlassSheetDescription = forwardRef((props, ref) => (\n \n));\n\nGlassSheetDescription.displayName = 'GlassSheetDescription';\n\nconst styles = StyleSheet.create({\n besideEdge: { padding: EDGE },\n bottom: { alignItems: 'center', justifyContent: 'flex-end' },\n grabber: { borderRadius: 2.5, height: 5, opacity: 0.5, width: 36 },\n // A 44-point strip across the top of a bottom sheet; the panel's top padding sits under it.\n grabberZone: {\n alignItems: 'center',\n height: 44,\n justifyContent: 'center',\n marginHorizontal: -PAD,\n marginTop: -PAD,\n },\n left: { flexDirection: 'row', justifyContent: 'flex-start' },\n panel: { borderCurve: 'continuous', borderRadius: 40 },\n right: { flexDirection: 'row', justifyContent: 'flex-end' },\n tall: { flex: 1 },\n tallFrame: { maxWidth: 384, width: '100%' },\n top: { alignItems: 'center', justifyContent: 'flex-start' },\n wide: { flexShrink: 1 },\n wideFrame: { maxHeight: '100%', maxWidth: 640, width: '100%' },\n});\n",
"type": "registry:ui",
"target": "components/glassyui/glass-sheet.tsx"
},
{
"path": "registry/glassyui-native/lib/modal-layer.tsx",
"content": "import {\n Children,\n cloneElement,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useMemo,\n useState,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport {\n Animated,\n Easing,\n I18nManager,\n Modal,\n Pressable,\n StyleSheet,\n Text,\n type AccessibilityState,\n type GestureResponderEvent,\n type ModalProps,\n type StyleProp,\n type TextProps,\n type ViewStyle,\n} from 'react-native';\nimport { initialWindowMetrics, SafeAreaInsetsContext } from 'react-native-safe-area-context';\nimport { useGlassTheme } from '../glass-provider';\nimport { GlassIcon } from './icons';\nimport { useControllableState } from './use-controllable-state';\n\n/** Arrivals ease out on the library's curve (`--lg-ease-out`); exits ease in. */\nexport const LAYER_EASING = {\n in: Easing.bezier(0.42, 0, 1, 1),\n out: Easing.bezier(0.32, 0.72, 0, 1),\n};\n\n/** The fill of a control on glass under a finger (`--lg-control-surface-hover`). */\nexport const CONTROL_SURFACE_PRESSED = {\n dark: 'rgba(245, 245, 247, 0.14)',\n light: 'rgba(255, 255, 255, 0.95)',\n} as const;\n\n// Without these, iOS turns a landscape screen back to portrait while a layer is open.\nconst ORIENTATIONS = [\n 'portrait',\n 'portrait-upside-down',\n 'landscape',\n 'landscape-left',\n 'landscape-right',\n] satisfies ModalProps['supportedOrientations'];\n\n/**\n * The screen's safe-area insets, with start and end following the layout direction. Reads the\n * nearest SafeAreaProvider, or the window's first measurement when there is none.\n */\nexport function useSafeInsets() {\n const insets = useContext(SafeAreaInsetsContext) ?? initialWindowMetrics?.insets;\n const left = insets?.left ?? 0;\n const right = insets?.right ?? 0;\n\n return {\n bottom: insets?.bottom ?? 0,\n end: I18nManager.isRTL ? left : right,\n start: I18nManager.isRTL ? right : left,\n top: insets?.top ?? 0,\n };\n}\n\n/**\n * Whether a layer is on screen. It turns true with `open` and stays true until the layer calls\n * `hide` at the end of its exit, so the exit can play. Under Reduce Motion it turns false at once.\n */\nexport function useLayerPresence(open: boolean, reduceMotion: boolean) {\n const [present, setPresent] = useState(open);\n\n if (open && !present) setPresent(true);\n\n if (!open && present && reduceMotion) setPresent(false);\n\n const hide = useCallback(() => setPresent(false), []);\n\n return [present, hide] as const;\n}\n\ntype ModalLayerState = {\n open: boolean;\n setOpen: (open: boolean) => void;\n};\n\nconst ModalLayerContext = createContext(null);\n\nexport type ModalLayerRootProps = {\n children?: ReactNode;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n open?: boolean;\n};\n\n/** Holds a modal layer's open state for its trigger, content and close controls. */\nexport function ModalLayerRoot({\n children,\n defaultOpen = false,\n onOpenChange,\n open,\n}: ModalLayerRootProps) {\n const [current, setOpen] = useControllableState(open, defaultOpen, onOpenChange);\n const value = useMemo(() => ({ open: current, setOpen }), [current, setOpen]);\n\n return {children};\n}\n\n/** The nearest modal layer's state. `component` and `root` name the parts in the error. */\nexport function useModalLayer(component: string, root: string) {\n const context = useContext(ModalLayerContext);\n\n if (!context) throw new Error(`${component} must be used within ${root}`);\n\n return context;\n}\n\ntype PressableChildProps = {\n accessibilityState?: AccessibilityState;\n onPress?: ((event: GestureResponderEvent) => void) | null;\n};\n\nexport type ModalLayerSlotProps = {\n /** One pressable element, such as a GlassButton. It keeps its own onPress. */\n children: ReactElement;\n};\n\ntype SlotOwnerProps = ModalLayerSlotProps & {\n component: string;\n root: string;\n};\n\n/** Gives its child an onPress that toggles the layer, and tells assistive tech whether it is open. */\nexport function ModalLayerTrigger({ children, component, root }: SlotOwnerProps) {\n const { open, setOpen } = useModalLayer(component, root);\n const child = Children.only(children);\n\n return cloneElement(child, {\n accessibilityState: { ...child.props.accessibilityState, expanded: open },\n onPress: (event: GestureResponderEvent) => {\n child.props.onPress?.(event);\n setOpen(!open);\n },\n });\n}\n\n/** Gives its child an onPress that closes the layer. */\nexport function ModalLayerClose({ children, component, root }: SlotOwnerProps) {\n const { setOpen } = useModalLayer(component, root);\n const child = Children.only(children);\n\n return cloneElement(child, {\n onPress: (event: GestureResponderEvent) => {\n child.props.onPress?.(event);\n setOpen(false);\n },\n });\n}\n\ntype ModalLayerHostProps = {\n children: ReactNode;\n /** Android's back button and the web's Escape key. */\n onRequestClose: () => void;\n present: boolean;\n};\n\n/** React Native's Modal, set up for a layer that draws its own scrim and animates itself. */\nexport function ModalLayerHost({ children, onRequestClose, present }: ModalLayerHostProps) {\n return (\n \n {present ? children : null}\n \n );\n}\n\ntype ModalLayerScrimProps = {\n onPress: () => void;\n /** 0 hidden, 1 shown. */\n progress: Animated.Value;\n};\n\n/** The dimmed backdrop behind a modal layer. It fades with `progress`; a tap on it closes the layer. */\nexport function ModalLayerScrim({ onPress, progress }: ModalLayerScrimProps) {\n const { colors } = useGlassTheme();\n\n return (\n <>\n \n \n \n );\n}\n\ntype ModalLayerCloseButtonProps = {\n label: string;\n onPress: () => void;\n /** Places the button; it is absolutely positioned. */\n style?: StyleProp;\n};\n\n/** The round close button in a layer's top corner, with a 44-point target. */\nexport function ModalLayerCloseButton({ label, onPress, style }: ModalLayerCloseButtonProps) {\n const { colors, preferences } = useGlassTheme();\n\n return (\n [\n styles.close,\n {\n backgroundColor: pressed\n ? CONTROL_SURFACE_PRESSED[preferences.theme]\n : colors.controlSurface,\n borderColor: colors.border,\n },\n style,\n ]}\n >\n {({ pressed }) => (\n \n )}\n \n );\n}\n\n/** A layer's heading, announced as a header and kept clear of the close button. */\nexport const ModalLayerTitle = forwardRef(({ style, ...rest }, ref) => {\n const { colors } = useGlassTheme();\n\n return (\n \n );\n});\n\nModalLayerTitle.displayName = 'ModalLayerTitle';\n\n/** A layer's supporting text, in the muted ink. */\nexport const ModalLayerDescription = forwardRef(({ style, ...rest }, ref) => {\n const { colors } = useGlassTheme();\n\n return (\n \n );\n});\n\nModalLayerDescription.displayName = 'ModalLayerDescription';\n\nconst styles = StyleSheet.create({\n close: {\n alignItems: 'center',\n borderCurve: 'continuous',\n borderRadius: 18,\n borderWidth: 1,\n height: 36,\n justifyContent: 'center',\n position: 'absolute',\n width: 36,\n },\n description: { fontSize: 15, lineHeight: 21, marginTop: 6 },\n // The close button sits 16 points in from the corner; the title stops 8 points short of it.\n title: { fontSize: 20, fontWeight: '600', letterSpacing: -0.3, lineHeight: 25, paddingEnd: 36 },\n});\n",
"type": "registry:lib",
"target": "components/glassyui/lib/modal-layer.tsx"
},
{
"path": "registry/glassyui-native/lib/icons.tsx",
"content": "import { View } from 'react-native';\nimport Svg, { Path } from 'react-native-svg';\n\nexport type GlassIconName =\n | 'check'\n | 'chevron-down'\n | 'chevron-right'\n | 'close'\n | 'dash'\n | 'danger'\n | 'info'\n | 'success'\n | 'warning';\n\n// The web components' own strokes, drawn on a 20-point grid.\nconst PATHS = {\n check: ['M4.5 10.5 8.25 14.25 15.5 6.25'],\n 'chevron-down': ['M5 7.5l5 5 5-5'],\n 'chevron-right': ['M7.5 4.4 13.1 10l-5.6 5.6'],\n close: ['M5.5 5.5l9 9m0-9l-9 9'],\n dash: ['M5 10h10'],\n 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'],\n info: ['M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z', 'M10 9.2v4.1', 'M10 6.7h.01'],\n 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'],\n warning: ['M10 3.6 17 16H3L10 3.6Z', 'M10 8.4v3.4', 'M10 14h.01'],\n} as const satisfies Record;\n\nexport type GlassIconProps = {\n color: string;\n name: GlassIconName;\n size?: number;\n strokeWidth?: number;\n};\n\n/** A stroked glyph from the library's small icon set. Decorative; label its control instead. */\nexport function GlassIcon({ color, name, size = 20, strokeWidth = 1.8 }: GlassIconProps) {\n // The hiding lives on a View: on the web, Svg passes its props to a bare