ExpandableSurface
Grow a surface in place to reveal more, with the trigger and close affordances included.
@luc/ui/motionLive preview
A summary that becomes its own detail in place: the collapsed face goes inert rather than staying tabbable.
<ExpandableSurface defaultOpen={false}>
<ExpandableSurfaceTrigger>
<Card variant="outline">Sharpe, 12 months</Card>
</ExpandableSurfaceTrigger>
<ExpandableSurfaceContent>
<Card variant="outline">The same place, more detail.</Card>
<ExpandableSurfaceClose>Close</ExpandableSurfaceClose>
</ExpandableSurfaceContent>
</ExpandableSurface>Usage
import { ExpandableSurface } from "@luc/ui/motion";<ExpandableSurface defaultOpen={false}>
<ExpandableSurfaceTrigger>
<Card variant="outline">Sharpe, 12 months</Card>
</ExpandableSurfaceTrigger>
<ExpandableSurfaceContent>
<Card variant="outline">The same place, more detail.</Card>
<ExpandableSurfaceClose>Close</ExpandableSurfaceClose>
</ExpandableSurfaceContent>
</ExpandableSurface>API
| Export | Kind | Signature |
|---|---|---|
ExpandableSurface | 5 documented props | ({ children, open, defaultOpen, onOpenChange, className, }: ExpandableSurfaceProps) => import("@types/react").JSX.Element |
ExpandableSurfaceClose | 1 documented props | ({ className, children, ...props }: ExpandableSurfaceCloseProps) => import("@types/react").JSX.Element |
ExpandableSurfaceContent | 1 documented props | ({ className, children, onKeyDown, ...props }: ExpandableSurfaceContentProps) => import("@types/react").JSX.Element | null |
ExpandableSurfaceTrigger | 1 documented props | ({ className, children, ...props }: ExpandableSurfaceTriggerProps) => import("@types/react").JSX.Element |
ExpandableSurface props
Type: ExpandableSurfaceProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | — | |
className? | string | undefined | — | |
defaultOpen? | boolean | undefined | — | |
onOpenChange? | ((open: boolean) => void) | undefined | — | |
open? | boolean | undefined | — |
ExpandableSurfaceClose props
Type: ExpandableSurfaceCloseProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | — |
ExpandableSurfaceContent props
Type: ExpandableSurfaceContentProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | — |
ExpandableSurfaceTrigger props
Type: ExpandableSurfaceTriggerProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | — |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related