{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "components-collapsible", "type": "registry:component", "title": "Collapsible", "description": "One section that reveals its body on demand", "author": "sudo-kw ", "dependencies": [ "@gpuix/native@0.11.0", "@gpuix/react@0.11.0", "effect@4.1.2", "react@^19.2.4" ], "registryDependencies": [ "https://gpuixui.sudokw.com/gpuix-motion.json", "https://gpuixui.sudokw.com/gpuix-tokens.json", "https://gpuixui.sudokw.com/gpuix-tw.json" ], "files": [ { "path": "packages/components/src/auto-height.tsx", "target": "@ui/gpuixui/components/auto-height.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { Props, PublicInstance } from \"@gpuix/react\";\nimport { useGpuix } from \"@gpuix/react\";\nimport {\n mergeStyles,\n resolveStyle,\n type StateStyle,\n} from \"@gpuix/react/floating\";\nimport type { MotionLevel } from \"../motion/timing.js\";\nimport { cn } from \"../tw/index.js\";\nimport * as Option from \"effect/Option\";\nimport {\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport { measuredHeight } from \"./internal/measure.js\";\nimport {\n PresenceShield,\n delayedTiming,\n presenceMotion,\n presenceStyle,\n useMotionPreference,\n useSurfacePresence,\n useSurfaceTiming,\n type SurfaceTiming,\n} from \"./internal/presence.js\";\nimport { recipeStyle } from \"./internal/recipe.js\";\nimport { useTheme } from \"./internal/theme.js\";\n\nconst FADE_LEAD_MS = 20;\n\nexport interface AutoHeightState {\n readonly height: number;\n\n readonly open: boolean;\n\n readonly reducedMotion: boolean;\n}\n\nexport interface AutoHeightProps extends Omit {\n readonly open: boolean;\n readonly children?: ReactNode;\n\n readonly level?: MotionLevel;\n\n readonly timing?: SurfaceTiming;\n\n readonly className?: string;\n\n readonly contentClassName?: string;\n\n readonly style?: StateStyle;\n}\n\nexport const AutoHeight = ({\n open,\n level = \"normal\",\n timing: ownTiming,\n className,\n contentClassName,\n testId,\n style,\n children,\n ...rest\n}: AutoHeightProps) => {\n const theme = useTheme();\n const renderer = useGpuix().renderer;\n const preference = useMotionPreference();\n const levelTiming = useSurfaceTiming(level);\n const timing = ownTiming ?? levelTiming;\n const presence = useSurfacePresence(open, timing);\n const [measured, setMeasured] = useState(Option.none());\n const content = useRef(null);\n\n const fade = {\n enter: delayedTiming(timing.enter, FADE_LEAD_MS),\n exit: timing.exit,\n };\n\n useEffect(() => {\n if (presence.mounted) return;\n setMeasured((current) =>\n Option.isSome(current) ? Option.none() : current,\n );\n }, [presence.mounted]);\n\n useLayoutEffect(() => {\n if (!presence.mounted) return;\n const instance = content.current;\n if (instance === null) return;\n const bounds = renderer?.getElementBounds?.(instance.id) ?? null;\n if (bounds === null) return;\n setMeasured((current) =>\n Option.isSome(current) ? current : Option.some(bounds.height),\n );\n }, [presence.mounted, renderer]);\n\n if (!presence.mounted) return null;\n\n const height = Option.getOrElse(measured, () => 0);\n const state: AutoHeightState = {\n height,\n open,\n reducedMotion: preference === \"reduced\",\n };\n\n return (\n \n {\n Option.match(measuredHeight(event), {\n onNone: () => undefined,\n onSome: (next) => setMeasured(Option.some(next)),\n });\n }}\n style={recipeStyle(cn(contentClassName), theme)}\n >\n {children}\n \n \n \n );\n};\n\nexport const autoHeightMeta = {\n name: \"Auto height\",\n tier: 5,\n status: \"done\",\n gpuixSupport: \"yes\",\n limitations: [\n \"the first measurement is read through the renderer's optional `getElementBounds`; a host without it starts the growth on the `onLayout` report a frame later\",\n \"the clipped box does not reflow its content: a percentage height inside it measures against the content box\",\n \"the reveal unmounts its subtree after the collapse, so state inside it does not survive a close and the next open measures the body again — a measurement is retired with the subtree it came from, never reused as a stale target\",\n ],\n docs: \"docs/auto-height.mdx\",\n example: \"examples/auto-height.example.tsx\",\n testFile: \"src/behaviour/auto-height.test.tsx\",\n} as const;\n" }, { "path": "packages/components/src/collapsible.tsx", "target": "@ui/gpuixui/components/collapsible.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { Props } from \"@gpuix/react\";\nimport {\n mergeStyles,\n resolveStyle,\n type StateStyle,\n} from \"@gpuix/react/floating\";\nimport {\n cn,\n COLLAPSIBLE_CONTENT,\n COLLAPSIBLE_ROOT,\n COLLAPSIBLE_TRIGGER,\n} from \"../tw/index.js\";\nimport { createContext, useContext, useState } from \"react\";\nimport { AutoHeight } from \"./auto-height.js\";\nimport { useControllableState } from \"./internal/controllable.js\";\nimport { activationHandlers } from \"./internal/key.js\";\nimport {\n assertParts,\n type PartChildren,\n type PartComponent,\n type PartsContract,\n} from \"./internal/parts.js\";\nimport { recipeStyle } from \"./internal/recipe.js\";\nimport {\n controlRing,\n disabledFade,\n pressWash,\n useTheme,\n} from \"./internal/theme.js\";\n\ninterface CollapsibleContextValue {\n readonly open: boolean;\n readonly setOpen: (open: boolean) => void;\n}\n\nconst CollapsibleContext = createContext(\n undefined,\n);\n\nconst useCollapsibleContext = (): CollapsibleContextValue => {\n const value = useContext(CollapsibleContext);\n if (value === undefined) {\n throw new Error(\"Collapsible parts must be used inside Collapsible\");\n }\n return value;\n};\n\nexport interface CollapsibleProps {\n readonly open?: boolean;\n\n readonly defaultOpen?: boolean;\n readonly onOpenChange?: (open: boolean) => void;\n readonly children?: PartChildren;\n}\n\nexport const Collapsible = ({\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n children,\n}: CollapsibleProps) => {\n const theme = useTheme();\n const [open, setOpen] = useControllableState({\n value: openProp,\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n });\n assertParts(collapsibleRoot, children);\n\n return (\n \n
{children}
\n \n );\n};\n\nexport interface CollapsibleTriggerProps extends Omit {\n readonly className?: string;\n\n readonly style?: StateStyle;\n\n readonly disabled?: boolean;\n}\n\nexport interface CollapsibleTriggerState {\n readonly open: boolean;\n readonly closed: boolean;\n readonly focused: boolean;\n readonly disabled: boolean;\n}\n\nexport const CollapsibleTrigger = ({\n onClick,\n onKeyDown,\n onKeyUp,\n onFocus,\n onBlur,\n className,\n style,\n disabled = false,\n ...rest\n}: CollapsibleTriggerProps) => {\n const theme = useTheme();\n const { open, setOpen } = useCollapsibleContext();\n const [focused, setFocused] = useState(false);\n const state: CollapsibleTriggerState = {\n open,\n closed: !open,\n focused,\n disabled,\n };\n\n const toggle = (): void => {\n if (!disabled) setOpen(!open);\n };\n\n return (\n {\n onClick?.(event);\n toggle();\n }}\n {...activationHandlers(toggle, { onKeyDown, onKeyUp })}\n onFocus={(event) => {\n setFocused(true);\n onFocus?.(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n onBlur?.(event);\n }}\n style={mergeStyles(\n mergeStyles(recipeStyle(cn(COLLAPSIBLE_TRIGGER, className), theme), {\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n ...disabledFade(disabled),\n hover: disabled ? undefined : { backgroundColor: theme.colors.hover },\n active: disabled\n ? undefined\n : { backgroundColor: pressWash(theme, \"hover\") },\n ...controlRing(theme, { disabled }),\n }),\n resolveStyle(style, state),\n )}\n />\n );\n};\n\nexport interface CollapsibleContentProps extends Props {\n readonly className?: string;\n}\n\nexport const CollapsibleContent = ({\n className,\n style,\n children,\n ...rest\n}: CollapsibleContentProps) => {\n const { open } = useCollapsibleContext();\n\n return (\n \n {children}\n \n );\n};\n\nconst collapsibleParts: ReadonlyArray = [\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n];\n\nconst collapsibleRoot: PartsContract = {\n parent: \"Collapsible\",\n family: collapsibleParts,\n accepts: [CollapsibleTrigger, CollapsibleContent],\n hint: \"Put CollapsibleTrigger and CollapsibleContent directly inside Collapsible.\",\n};\n\nexport const collapsibleMeta = {\n name: \"Collapsible sections\",\n tier: 2,\n status: \"done\",\n gpuixSupport: \"yes\",\n limitations: [\n \"the body unmounts after its collapse tween, so state inside it does not survive a close\",\n ],\n docs: \"docs/collapsible.mdx\",\n example: \"examples/collapsible.example.tsx\",\n testFile: \"src/behaviour/collapsible.test.tsx\",\n} as const;\n" }, { "path": "packages/components/src/internal/controllable.ts", "target": "@ui/gpuixui/components/internal/controllable.ts", "type": "registry:lib", "content": "import { useCallback, useState } from \"react\";\n\nexport type ControllableState = readonly [Value, (next: Value) => void];\n\nexport interface ControllableStateOptions {\n readonly value: Value | undefined;\n\n readonly defaultValue: Value;\n\n readonly onChange?: (next: Value) => void;\n}\n\nexport const useControllableState = ({\n value,\n defaultValue,\n onChange,\n}: ControllableStateOptions): ControllableState => {\n const [internal, setInternal] = useState(defaultValue);\n const controlled = value !== undefined;\n\n const setValue = useCallback(\n (next: Value) => {\n if (!controlled) setInternal(next);\n if (value !== next) onChange?.(next);\n },\n [controlled, value, onChange],\n );\n\n return [controlled ? value : internal, setValue];\n};\n" }, { "path": "packages/components/src/internal/key.ts", "target": "@ui/gpuixui/components/internal/key.ts", "type": "registry:lib", "content": "import type { EventPayload, KeyEvent, Props } from \"@gpuix/react\";\nimport * as Option from \"effect/Option\";\n\nexport type KeyPhase = \"down\" | \"up\";\n\nexport const isActivation = (event: EventPayload, phase: KeyPhase): boolean => {\n if (event.isHeld === true) return false;\n if (event.key === \"enter\") return phase === \"down\";\n return event.key === \"space\" && phase === \"up\";\n};\n\nexport const swallowsDefault = (\n event: EventPayload,\n phase: KeyPhase,\n): boolean => event.key === \"space\" && phase === \"down\";\n\nexport const activationHandlers = (\n activate: (event: KeyEvent) => void,\n observe: Pick = {},\n): Pick => ({\n onKeyDown: (event: KeyEvent) => {\n if (swallowsDefault(event, \"down\")) event.preventDefault();\n if (isActivation(event, \"down\")) activate(event);\n observe.onKeyDown?.(event);\n },\n onKeyUp: (event: KeyEvent) => {\n if (isActivation(event, \"up\")) activate(event);\n observe.onKeyUp?.(event);\n },\n});\n\nexport const isEnter = (event: EventPayload): boolean => event.key === \"enter\";\n\nexport const isDown = (event: EventPayload): boolean =>\n event.key === \"down\" || (event.key === \"n\" && event.modifiers?.ctrl === true);\n\nexport const isUp = (event: EventPayload): boolean =>\n event.key === \"up\" || (event.key === \"p\" && event.modifiers?.ctrl === true);\n\nexport const isRight = (event: EventPayload): boolean => event.key === \"right\";\n\nexport const isLeft = (event: EventPayload): boolean => event.key === \"left\";\n\nexport const isFirst = (event: EventPayload): boolean => event.key === \"home\";\n\nexport const isLast = (event: EventPayload): boolean => event.key === \"end\";\n\nexport const isPageUp = (event: EventPayload): boolean =>\n event.key === \"pageup\";\n\nexport const isPageDown = (event: EventPayload): boolean =>\n event.key === \"pagedown\";\n\nexport const isDismiss = (event: EventPayload): boolean =>\n event.key === \"escape\";\n\nexport const isTab = (event: EventPayload): boolean => event.key === \"tab\";\n\nexport const isSelectAll = (event: EventPayload): boolean =>\n event.key === \"a\" &&\n (event.modifiers?.cmd === true || event.modifiers?.ctrl === true);\n\nexport const isMenuKey = (event: EventPayload): boolean =>\n (event.key === \"f10\" && event.modifiers?.shift === true) ||\n event.key === \"contextmenu\";\n\nexport const axisDirection = (\n event: EventPayload,\n orientation: \"horizontal\" | \"vertical\",\n): Option.Option<1 | -1> => {\n if (event.key === \"right\") return Option.some(1);\n if (event.key === \"left\") return Option.some(-1);\n if (orientation === \"vertical\") {\n if (isDown(event)) return Option.some(1);\n if (isUp(event)) return Option.some(-1);\n }\n return Option.none();\n};\n" }, { "path": "packages/components/src/internal/measure.ts", "target": "@ui/gpuixui/components/internal/measure.ts", "type": "registry:lib", "content": "import type { EventPayload } from \"@gpuix/react\";\nimport * as Option from \"effect/Option\";\n\nexport interface MeasuredBox {\n readonly x: number;\n readonly y: number;\n readonly width: number;\n readonly height: number;\n}\n\nconst measurable = (value: number | undefined): Option.Option =>\n Option.filter(Option.fromNullishOr(value), Number.isFinite);\n\nexport const measuredBox = (event: EventPayload): Option.Option =>\n Option.all({\n x: measurable(event.x),\n y: measurable(event.y),\n width: measurable(event.width),\n height: measurable(event.height),\n });\n\nexport const measuredHeight = (event: EventPayload): Option.Option =>\n measurable(event.height);\n\nexport interface MeasuredPoint {\n readonly x: number;\n readonly y: number;\n}\n\nexport const measuredPoint = (\n event: EventPayload,\n): Option.Option =>\n Option.all({\n x: measurable(event.x),\n y: measurable(event.y),\n });\n" }, { "path": "packages/components/src/internal/parts.ts", "target": "@ui/gpuixui/components/internal/parts.ts", "type": "registry:lib", "content": "import * as Arr from \"effect/Array\";\nimport * as P from \"effect/Predicate\";\nimport {\n Children,\n Fragment,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nexport type PartComponent = (props: never) => ReactNode;\n\nexport type PartChildren =\n | ReactElement\n | boolean\n | null\n | undefined\n | ReadonlyArray;\n\nexport interface PartsContract {\n readonly parent: string;\n\n readonly family: ReadonlyArray;\n\n readonly accepts: ReadonlyArray;\n\n readonly hint?: string;\n}\n\nconst componentName = (type: unknown): string =>\n P.isString(type)\n ? type\n : P.isFunction(type)\n ? type.name || \"anonymous\"\n : \"element\";\n\nconst fragmentChildren = (element: ReactElement): ReactNode =>\n hasChildren(element.props) ? element.props.children : undefined;\n\nconst hasChildren = (\n value: unknown,\n): value is { readonly children?: ReactNode } =>\n P.isObject(value) && \"children\" in value;\n\nconst leaves = (children: ReactNode): ReadonlyArray =>\n Arr.flatMap(Children.toArray(children), (child) =>\n isValidElement(child) && child.type === Fragment\n ? leaves(fragmentChildren(child))\n : [child],\n );\n\nexport const assertParts = (\n contract: PartsContract,\n children: ReactNode,\n): void => {\n Arr.forEach(leaves(children), (leaf) => {\n if (!isValidElement(leaf)) return;\n if (Arr.some(contract.accepts, (part) => part === leaf.type)) return;\n if (!Arr.some(contract.family, (part) => part === leaf.type)) return;\n\n throw new Error(\n `${componentName(leaf.type)} cannot be used inside ${contract.parent}.` +\n (contract.hint === undefined ? \"\" : ` ${contract.hint}`),\n );\n });\n};\n" }, { "path": "packages/components/src/internal/presence.tsx", "target": "@ui/gpuixui/components/internal/presence.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { MotionProps } from \"@gpuix/react\";\nimport {\n delayedTiming,\n exitWindowMs,\n fadeFrom,\n fadeFromAnchor,\n fadeFromSide,\n fadeOnly,\n presenceMotion as motionOfPresence,\n presenceStyle,\n transitionWindowMs,\n type PresenceFrames,\n type PresenceHitRule,\n type PresenceSide,\n type PresenceTiming,\n type PresenceTransition,\n} from \"../../motion/presence.js\";\nimport {\n MotionProvider,\n useMotionPreference,\n useSurfacePresence,\n useSurfaceTiming,\n type MotionProviderProps,\n type SurfacePresence,\n} from \"../../motion/react/presence.js\";\nimport {\n motionTiming,\n type MotionLevel,\n type MotionPreference,\n} from \"../../motion/timing.js\";\n\nexport { MotionProvider, useMotionPreference, type MotionProviderProps };\n\nexport type SurfaceFrames = PresenceFrames;\n\nexport type SurfaceTiming = PresenceTiming;\n\nexport type PanelSide = PresenceSide;\n\nexport {\n delayedTiming,\n exitWindowMs,\n fadeFrom,\n fadeFromAnchor,\n fadeFromSide,\n fadeOnly,\n presenceStyle,\n transitionWindowMs,\n};\nexport type { PresenceHitRule };\n\nexport { useSurfacePresence, useSurfaceTiming, type SurfacePresence };\n\nexport const moveTiming = (\n level: MotionLevel,\n preference: MotionPreference,\n): PresenceTransition => motionTiming(level, { phase: \"standard\", preference });\n\nexport const useMoveTiming = (level: MotionLevel): PresenceTransition =>\n moveTiming(level, useMotionPreference());\n\nexport const presenceMotion = (\n frames: SurfaceFrames,\n presence: SurfacePresence,\n timing: SurfaceTiming = presence.timing,\n): MotionProps => motionOfPresence(frames, presence.present, timing);\n\nexport const PresenceShield = ({ present }: { readonly present: boolean }) =>\n present ? null : (\n \n );\n\nexport const presenceTabStop = (\n present: boolean,\n): { readonly tabIndex?: number } => (present ? {} : { tabIndex: -1 });\n" }, { "path": "packages/components/src/internal/recipe.ts", "target": "@ui/gpuixui/components/internal/recipe.ts", "type": "registry:lib", "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport { createRecipeCache } from \"../../tw/index.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const recipeStyle: (recipe: string, theme: Theme) => StyleDesc =\n createRecipeCache(512);\n" }, { "path": "packages/components/src/internal/theme.ts", "target": "@ui/gpuixui/components/internal/theme.ts", "type": "registry:lib", "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport * as Schema from \"effect/Schema\";\nimport {\n alpha,\n avatarPixels,\n avatarSize,\n brandTextOn,\n controlFocusRing,\n controlHeight,\n controlPaddingX,\n currentPlatform,\n darkTheme,\n disabledAction,\n disabledOpacity,\n elevationShadow,\n filledHover,\n filledPressed,\n findHighlight,\n focusRing,\n keyboardFocusRing,\n lightTheme,\n nativeTextTheme,\n pointerWash,\n selectionOn,\n statusTone,\n syntaxColors,\n targetSize,\n textStyle,\n type BoxShadow,\n type ElevationLevel,\n type FindHighlightSource,\n type NativeTextFill,\n type PlatformName,\n type PointerWashSurface,\n type StatusTone,\n type SyntaxColors,\n type SyntaxRole,\n type TextRole,\n type Theme,\n type ThemeColors,\n} from \"../../tokens/index.js\";\n\nexport {\n alpha,\n avatarPixels,\n avatarSize,\n controlFocusRing,\n controlHeight,\n controlPaddingX,\n currentPlatform,\n darkTheme,\n disabledAction,\n disabledOpacity,\n elevationShadow,\n filledHover,\n filledPressed,\n findHighlight,\n focusRing,\n keyboardFocusRing,\n lightTheme,\n nativeTextTheme,\n statusTone,\n syntaxColors,\n targetSize,\n textStyle,\n};\nexport type {\n BoxShadow,\n ElevationLevel,\n FindHighlightSource,\n NativeTextFill,\n PlatformName,\n StatusTone,\n SyntaxColors,\n SyntaxRole,\n TextRole,\n Theme,\n};\nexport { ThemeProvider, useTheme } from \"../../tokens/react.js\";\n\nexport const keyboardRing = (theme: Theme, invalid = false): StyleDesc =>\n controlFocusRing(theme, { invalid }) ?? {};\n\nexport interface ControlRingState {\n readonly disabled?: boolean;\n\n readonly invalid?: boolean;\n}\n\nexport const controlRing = (\n theme: Theme,\n state: ControlRingState = {},\n): StyleDesc => controlFocusRing(theme, state) ?? {};\n\nexport const pressWash = (theme: Theme, replaced: PointerWashSurface): string =>\n pointerWash(theme, \"active\", replaced) ?? theme.colors.active;\n\nexport const selectionWash = (theme: Theme): StyleDesc => ({\n selectionColor: theme.colors.selection,\n});\n\nexport const keepContent: StyleDesc = { keyboardFocusDim: false };\n\nexport const disabledFade = (\n disabled: boolean,\n): { readonly opacity: number } | undefined =>\n disabled ? { opacity: disabledOpacity } : undefined;\n\nconst Tones = Schema.Literals([\"info\", \"success\", \"warning\", \"danger\"]);\n\nexport type Tone = typeof Tones.Type;\n\nexport const toneOf = (value: unknown): Tone =>\n Schema.is(Tones)(value) ? value : \"info\";\n\nexport interface ToneStyle {\n readonly fg: string;\n readonly bg: string;\n readonly border: string;\n}\n\nconst TOKEN_TONE: Readonly> = {\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n danger: \"destructive\",\n};\n\nexport const tone = (theme: Theme, value: Tone): ToneStyle => {\n const { background, border, foreground } = statusTone(\n theme,\n TOKEN_TONE[value],\n );\n return { bg: background, border, fg: foreground };\n};\n\nconst softRoles: Readonly> = {\n info: \"infoSoft\",\n success: \"successSoft\",\n warning: \"warningSoft\",\n danger: \"destructiveSoft\",\n};\n\nexport const messageLink = (theme: Theme, value: Tone): string =>\n brandTextOn(theme, softRoles[value]);\n\nexport const messageSelection = (theme: Theme, value: Tone): string =>\n selectionOn(theme, softRoles[value]);\n\nexport const toneSurface = (theme: Theme, value: Tone): StyleDesc => {\n const { bg, border, fg } = tone(theme, value);\n return {\n backgroundColor: bg,\n color: fg,\n borderWidth: theme.borderWidth.thin,\n borderColor: border,\n };\n};\n" } ], "docs": "[Collapsible](https://gpuixui.sudokw.com/components/collapsible) — These are GPUix native components: the files render through GPUix's reconciler against `@gpuix/react`, not the DOM, and need the per-platform `@gpuix/native` binding. The CLI installs the `@gpuixui/*` runtime the components import as registry items, so the copied tree resolves on its own; wrap it in `ThemeProvider` before it renders.", "meta": { "url": "/components/collapsible", "kind": "component", "runtime": "gpuix", "registry": "gpuixui" } }