{"slug":"action-sheet","name":"ActionSheet","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"A short list of actions presented in a floating glass panel anchored to the trigger that opened it — the iPad .confirmationDialog form.","importPath":"@liquidify/react/action-sheet","sourcePath":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx","specPath":"packages/@liquidify/react/src/components/action-sheet/spec.md","docsPath":"../liquidify-page/content/component-source/action-sheet.md","documentationStatus":"draft","storyIds":["presentational-action-sheet--default"],"additionalExports":["ActionSheetAction","ActionSheetActionRole","ActionSheetPlacement","ActionSheetTitleVisibility","PresentationalProps"],"anatomy":[{"name":"wraps the consumer's trigger element (e.g. a","description":"wraps the consumer's trigger element (e.g. a"},{"name":"is the portalled glass panel","description":"is the portalled glass panel"},{"name":".lq-action-sheet-header","description":".lq-action-sheet-header — shown only when titleVisibility=\"visible\";"},{"name":".lq-action-sheet-actions","description":".lq-action-sheet-actions — the vertical list of .lq-action-sheet-action"}],"props":[{"name":"actions","type":"readonly ActionSheetAction[]","required":true,"description":"The action rows, each carrying a stable `id` (keying + reconciliation identity).","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-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":"defaultOpen","type":"boolean | undefined","required":false,"description":"Uncontrolled seed for the open state (default `false`).","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx"},{"name":"labelProps","type":"LabelProps | undefined","required":false,"description":"Per-instance typography override spread last into the header `title` Text (ADR-0028).","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-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":"message","type":"string | undefined","required":false,"description":"Optional secondary message — shown beneath the title when the header is visible.","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx"},{"name":"messageProps","type":"LabelProps | undefined","required":false,"description":"Per-instance typography override spread last into the header `message` Text (ADR-0028).","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx"},{"name":"onOpenChange","type":"((open: boolean) => void) | undefined","required":false,"description":"Fires with the next open state on every close path (action, Escape, outside tap, focus-loss).","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx"},{"name":"open","type":"boolean | undefined","required":false,"description":"Controlled open state. Passing it switches ActionSheet to controlled mode.","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-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":"placement","type":"LogicalSide | undefined","required":false,"description":"Which side of the trigger the panel sits on. Forwarded to Popup. Defaults to `\"bottom\"`.","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx"},{"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"},{"name":"title","type":"string | undefined","required":false,"description":"Optional title — shown in the header only when `titleVisibility=\"visible\"`.","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx"},{"name":"titleVisibility","type":"ActionSheetTitleVisibility | undefined","required":false,"description":"Whether the title/message header shows. `visible` shows it; `automatic`/`hidden` omit it.","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx"},{"name":"trigger","type":"ReactNode","required":true,"description":"The element that opens the sheet — merged onto `Popup.Trigger` via `asChild`.","declaredIn":"packages/@liquidify/react/src/components/action-sheet/action-sheet.tsx"}],"swiftUIMap":[{"swiftUI":"`isPresented: Binding<Bool>`","react":"`open` / `defaultOpen` / `onOpenChange`","notes":"presentation triad (ADR-0015), forwarded to `Popup`","relationship":"direct"},{"swiftUI":"(the modified view)","react":"`trigger: ReactNode`","notes":"the anchor element, merged via `Popup.Trigger asChild`","relationship":"direct"},{"swiftUI":"`titleKey`","react":"`title?: string`","notes":"shown only when `titleVisibility=\"visible\"`","relationship":"direct"},{"swiftUI":"`titleVisibility: Visibility`","react":"`titleVisibility?: \"automatic\" | \"visible\" | \"hidden\"`","notes":"`visible` shows the header; `automatic`/`hidden` omit it","relationship":"direct"},{"swiftUI":"`message: () -> Text`","react":"`message?: string`","notes":"secondary header line (with `title`)","relationship":"direct"},{"swiftUI":"`actions: () -> View` (Buttons)","react":"`actions: ActionSheetAction[]`","notes":"`{ id, label, role?, onPress?, disabled? }`; rows are keyed and roving/active-item reconciled by the stable `id` (§16.6, never `role + label`); a duplicate `id` is a dev-mode error; activation runs `onPress` then closes (mirrors `AlertAction`)","relationship":"direct"},{"swiftUI":"`Button(role: .destructive)`","react":"`role: \"destructive\"`","notes":"red label (`--lq-color-action-destructive`)","relationship":"direct"},{"swiftUI":"`Button(role: .cancel)`","react":"`role: \"cancel\"`","notes":"the dismiss action — rendered like `default` (`weight=\"regular\"`, primary ink); distinguished by its label + `data-role=\"cancel\"`, not by weight","relationship":"direct"},{"swiftUI":"(popover anchor side)","react":"`placement?: \"top\" | \"bottom\" | \"left\" | \"right\"`","notes":"forwarded to `Popup`; the panel sits on that trigger edge","relationship":"direct"},{"swiftUI":"(presentation chrome)","react":"`material?` / `perf?`","notes":"`PresentationalProps` — the panel's glass surface (default `frosted`); the base is tint-free (P0.B6 — no `tint` axis; rows take the role palette)","relationship":"direct"},{"swiftUI":"(header typography)","react":"`labelProps?: LabelProps`","notes":"per-instance typography seam (charter §2, the shared `LabelProps` `Pick`) spread last into the header `title` `Text`","relationship":"direct"},{"swiftUI":"(message typography)","react":"`messageProps?: LabelProps`","notes":"per-instance typography seam spread last into the header `message` `Text`","relationship":"direct"},{"swiftUI":"(no SwiftUI analogue)","react":"`ref?: Ref<HTMLDivElement>`","notes":"`ActionSheetProps extends PresentationalProps<HTMLDivElement>` (charter §4) — forwarded to the semantic root, the portalled menu panel (the `role=\"menu\"` glass `<div>`); attached while mounted, `null` while closed; the internal `ref as Ref<HTMLDivElement>` cast is gone","relationship":"web-only"}],"tokens":["--lq-action-sheet-control-fill","--lq-action-sheet-control-fill-hover","--lq-action-sheet-min-width","--lq-color-action-destructive","--lq-color-label-primary-","--lq-duration-","--lq-easing-","--lq-glass-","--lq-motion-hover-scale","--lq-popup-","--lq-popup-bloom-scale","--lq-radius-22","--lq-radius-pill","--lq-space-12","--lq-space-16","--lq-space-20","--lq-space-8"],"keyboard":[{"key":"Keyboard","action":"Keyboard (via Popup): Escape dismisses and returns focus to the trigger."}],"variants":[],"variantPages":[]}