{"slug":"sheet","name":"Sheet","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"A modal surface presented from the bottom edge of the viewport that the consumer fills with arbitrary content.","importPath":"@liquidify/react/sheet","sourcePath":"packages/@liquidify/react/src/components/sheet/sheet.tsx","specPath":"packages/@liquidify/react/src/components/sheet/spec.md","docsPath":"../liquidify-page/content/component-source/sheet.md","documentationStatus":"draft","storyIds":["presentational-sheet--default"],"additionalExports":["PresentationalProps","SheetCornerRadius","SheetDetent","SheetDragIndicator"],"anatomy":[{"name":".lq-sheet","description":".lq-sheet — the glass surface: role=\"dialog\", aria-modal=\"true\","},{"name":"The drag gesture is owned by a dedicated top pan region","description":"The drag gesture is owned by a dedicated top pan region — the"},{"name":".lq-sheet-grabber","description":".lq-sheet-grabber — the decorative grabber pill (aria-hidden, inside the"},{"name":".lq-sheet-content","description":".lq-sheet-content — wraps children (charter §8 slot role: content),"}],"props":[{"name":"children","type":"ReactNode","required":false,"description":"The sheet content — rendered inside the glass card (charter §8 slot role: content).","declaredIn":"packages/@liquidify/react/src/components/sheet/sheet.tsx"},{"name":"className","type":"string | undefined","required":false,"description":"Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"cornerRadius","type":"SheetCornerRadius | undefined","required":false,"description":"Top corner radius of the card, as a `--lq-radius-*` token key — SwiftUI `.presentationCornerRadius`.","defaultValue":"`\"22\"`","declaredIn":"packages/@liquidify/react/src/components/sheet/sheet.tsx"},{"name":"defaultOpen","type":"boolean | undefined","required":false,"description":"Uncontrolled seed for the open state (default `false`).","declaredIn":"packages/@liquidify/react/src/components/sheet/sheet.tsx"},{"name":"detents","type":"readonly SheetDetent[] | undefined","required":false,"description":"Available resting heights (SwiftUI `.presentationDetents`). The sheet opens at the FIRST detent; dragging the top handle snaps between detents, and dragging past the smallest one dismisses the sheet (when `dismissible`).","defaultValue":"`[\"large\"]`","declaredIn":"packages/@liquidify/react/src/components/sheet/sheet.tsx"},{"name":"dismissible","type":"boolean | undefined","required":false,"description":"Whether Escape, a scrim tap, and a drag past the smallest detent dismiss the sheet (`interactiveDismissDisabled`, inverse polarity). Escape / scrim are forwarded to Overlay; drag-dismiss is gated here. Defaults to `true`.","declaredIn":"packages/@liquidify/react/src/components/sheet/sheet.tsx"},{"name":"dragIndicator","type":"SheetDragIndicator | undefined","required":false,"description":"Whether the drag indicator (grabber) is shown — SwiftUI `.presentationDragIndicator`. The pan region (the top edge) stays draggable either way; only the grabber pill toggles.","defaultValue":"`\"visible\"`","declaredIn":"packages/@liquidify/react/src/components/sheet/sheet.tsx"},{"name":"material","type":"\"frosted\" | \"regular\" | \"clear\" | undefined","required":false,"description":"Material of the glass surface — `frosted · regular · clear` (§06). Forwarded to the engine, which resolves the chain `prop ?? <Material default> ?? \"regular\"`, so a bare surface inherits the enclosing provider default.","defaultValue":"enclosing `<Material default>`, else `\"regular\"`","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"onOpenChange","type":"((open: boolean) => void) | undefined","required":false,"description":"Fires with the next open state on every close path (Escape, scrim tap, drag past the smallest detent).","declaredIn":"packages/@liquidify/react/src/components/sheet/sheet.tsx"},{"name":"open","type":"boolean | undefined","required":false,"description":"Controlled open state. Passing it switches Sheet to controlled mode.","declaredIn":"packages/@liquidify/react/src/components/sheet/sheet.tsx"},{"name":"perf","type":"\"low\" | \"high\" | undefined","required":false,"description":"Perf budget of the glass surface (ADR-0006/0007). Forwarded to the engine as `data-glass-perf`; `\"high\"` opts this surface into the edge-lensing filter. When omitted, derives from the enclosing `<Backdrop type>` (§04).","defaultValue":"derived from `<Backdrop type>`, else `\"low\"`","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"ref","type":"Ref<HTMLDivElement> | undefined","required":false,"description":"Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"}],"swiftUIMap":[{"swiftUI":"`isPresented: Binding<Bool>`","react":"`open` / `defaultOpen` / `onOpenChange`","notes":"presentation triad (ADR-0015), forwarded to `Overlay` via the shared `useControllableState` machine (§6.1)","relationship":"direct"},{"swiftUI":"`content: () -> View`","react":"`children`","notes":"the sheet body (charter §8 slot role: content)","relationship":"direct"},{"swiftUI":"`.interactiveDismissDisabled(_)`","react":"`dismissible`","notes":"inverse polarity (consistent with Overlay/Alert/ActionSheet) — gates Escape, scrim, **and** drag-dismiss","relationship":"direct"},{"swiftUI":"`.presentationDetents([.medium, .large])`","react":"`detents: SheetDetent[]`","notes":"resting heights; opens at the first detent","relationship":"direct"},{"swiftUI":"`.fraction(0.6)`","react":"`{ fraction: 0.6 }` detent","notes":"a fraction (0–1) of the viewport height","relationship":"direct"},{"swiftUI":"`.large` / a full sheet","react":"`\"full\"` detent","notes":"100 % of the viewport height","relationship":"direct"},{"swiftUI":"`.presentationDragIndicator(.hidden)`","react":"`dragIndicator: \"visible\" | \"hidden\"`","notes":"shows / hides the grabber","relationship":"direct"},{"swiftUI":"`.presentationCornerRadius(_)`","react":"`cornerRadius: \"10\" | \"14\" | \"22\"`","notes":"`--lq-radius-*` token key (ADR-0003 forbids a raw length)","relationship":"direct"},{"swiftUI":"`.presentationBackground` (material)","react":"`material?` / `perf?`","notes":"`PresentationalProps` — the card's glass surface; the base is tint-free (P0.B6 — no `tint` axis; a sheet has no accent to adopt)","relationship":"direct"},{"swiftUI":"(no SwiftUI analogue)","react":"`ref?`","notes":"forwarded to the semantic root — the glass dialog card (`role=\"dialog\"`); typed `Ref<HTMLDivElement>` (charter §4, narrowed to the concrete GlassPrimitive `<div>`); attached while the sheet is mounted, `null` while closed","relationship":"web-only"},{"swiftUI":"(nameless surface)","react":"`aria-label` / `aria-labelledby`","notes":"the accessible name for the dialog","relationship":"direct"}],"tokens":["--lq-color-label-tertiary-light","--lq-duration-","--lq-duration-standard","--lq-easing-","--lq-easing-standard","--lq-glass-","--lq-radius-10","--lq-radius-14","--lq-radius-22","--lq-radius-pill","--lq-sheet-corner","--lq-sheet-height","--lq-space-16","--lq-space-20","--lq-space-4","--lq-space-40"],"keyboard":[{"key":"Keyboard","action":"Keyboard (via Overlay): Escape dismisses (when dismissible); Tab / Shift+Tab are trapped within the card; focus returns to the invoking element on close."}],"variants":[],"variantPages":[]}