2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T26ca,"use client"; import { createContext, useContext, type ComponentProps, type ReactNode } from "react"; import { useDirection } from "@base-ui/react/direction-provider"; import { Drawer as DrawerPrimitive } from "vaul"; import { Button } from "@/components/ui/button"; import { Drawer, DrawerClose, DrawerDescription, DrawerHandle, DrawerPortal, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"; import { cn } from "@/lib/utils"; /* ---- context ------------------------------------------------------------------------------ */ export type SheetPlacement = "bottom" | "top" | "start" | "end"; export type SheetBackdrop = "dim" | "blur" | "none"; type SheetContext = { edge: "bottom" | "top" | "left" | "right"; detached: boolean; backdrop: SheetBackdrop; snaps: boolean }; const Ctx = createContext({ edge: "bottom", detached: false, backdrop: "dim", snaps: false }); /* ---- root --------------------------------------------------------------------------------- */ export type BottomSheetProps = { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Which edge the sheet comes from. start and end follow the reading direction. Default bottom. */ placement?: SheetPlacement; /** Heights the sheet rests at, as fractions of the screen (0.4) or pixel strings ("320px"), least to most. */ snapPoints?: (number | string)[]; activeSnapPoint?: number | string | null; onActiveSnapPointChange?: (snapPoint: number | string | null) => void; /** The first snap point from which the backdrop fades in. Default the last. */ fadeFromIndex?: number; /** Move one snap point at a time however hard the flick. */ sequential?: boolean; /** Float inset from the edges with a radius all round. */ detached?: boolean; /** Only the handle drags, so scrolling, selecting and inputs inside never move the sheet. */ handleOnly?: boolean; /** `false`: no drag, Escape or outside press closes it. Give it an explicit close and control `open`. Default true. */ dismissible?: boolean; /** `false` keeps the page behind interactive and skips the focus trap. Default true. */ modal?: boolean; backdrop?: SheetBackdrop; /** Scale the page behind (needs a `[data-vaul-drawer-wrapper]` ancestor). Default false. */ shouldScaleBackground?: boolean; /** Share of the sheet that must be dragged to close it, 0 to 1. Default 0.25. */ closeThreshold?: number; /** A sheet opened from inside another sheet: it stacks and the parent steps back. */ nested?: boolean; children?: ReactNode; }; const EDGE = { bottom: "bottom", top: "top", start: "left", end: "right" } as const; /** A sheet on Vaul through the Kobra drawer: drag, snap points, nesting, four edges, three backdrops. */ export function BottomSheet({ placement = "bottom", snapPoints, activeSnapPoint, onActiveSnapPointChange, fadeFromIndex, sequential, detached = false, handleOnly, dismissible, modal, backdrop = "dim", shouldScaleBackground = false, closeThreshold, nested, children, ...root }: BottomSheetProps) { const rtl = useDirection() === "rtl"; const edge = placement === "start" ? (rtl ? "right" : "left") : placement === "end" ? (rtl ? "left" : "right") : EDGE[placement]; const props = { ...root, direction: edge, shouldScaleBackground, handleOnly, dismissible, modal, closeThreshold, snapToSequentialPoint: sequential, ...(snapPoints ? { snapPoints, fadeFromIndex: fadeFromIndex ?? snapPoints.length - 1 } : {}), ...(activeSnapPoint !== undefined ? { activeSnapPoint, setActiveSnapPoint: onActiveSnapPointChange } : { setActiveSnapPoint: onActiveSnapPointChange }), } as ComponentProps; const Root = nested ? DrawerPrimitive.NestedRoot : Drawer; return ( {children} ); } export function BottomSheetTrigger(props: ComponentProps) { return ( ); } /* ---- surface and content ------------------------------------------------------------------ */ const overlay: Record = { dim: "bg-black/40", blur: "bg-black/10 backdrop-blur-[3px]", none: "bg-transparent", }; /** * Width on wide screens: a sheet is a phone pattern, so top and bottom sheets cap at max-w-lg and * center instead of spanning the viewport. Start and end sheets are already a fixed 24rem column. * The left-0 / right-0 below are intentionally physical: `edge` is already resolved for the reading * direction (see `EDGE` and `useDirection`), and Vaul slides the panel along that physical edge. */ function surfaceClasses(ctx: SheetContext) { const { edge, detached, snaps } = ctx; const sizeY = snaps ? "h-full" : "h-auto"; const cap = "mx-auto w-full sm:max-w-lg"; if (detached) { return { bottom: cn("inset-x-3 bottom-3 rounded-2xl", cap, snaps ? "h-full max-h-[calc(97%-0.75rem)]" : "max-h-[calc(100%-1.5rem)]"), top: cn("inset-x-3 top-3 rounded-2xl", cap, snaps ? "h-full max-h-[calc(97%-0.75rem)]" : "max-h-[calc(100%-1.5rem)]"), left: "inset-y-3 left-3 w-[min(24rem,calc(100%-1.5rem))] rounded-2xl", right: "inset-y-3 right-3 w-[min(24rem,calc(100%-1.5rem))] rounded-2xl", }[edge]; } return { bottom: cn("inset-x-0 bottom-0 rounded-t-2xl border-t", cap, snaps ? "h-full max-h-[97%]" : cn(sizeY, "max-h-[calc(100%-1.5rem)]")), top: cn("inset-x-0 top-0 rounded-b-2xl border-b", cap, snaps ? "h-full max-h-[97%]" : cn(sizeY, "max-h-[calc(100%-1.5rem)]")), left: "inset-y-0 left-0 w-[min(24rem,calc(100%-3rem))] rounded-e-2xl border-e", right: "inset-y-0 right-0 w-[min(24rem,calc(100%-3rem))] rounded-s-2xl border-s", }[edge]; } /** The painted panel, also usable on its own (static previews, docs) without any drag behavior. */ export function BottomSheetSurface({ className, ...props }: ComponentProps<"div">) { return (

); } export function BottomSheetHandle({ className, ...props }: ComponentProps) { const { edge } = useContext(Ctx); const vertical = edge === "left" || edge === "right"; return ( ); } export function BottomSheetContent({ className, children, handle = true, ...props }: ComponentProps & { /** Show the grabber. Default true. */ handle?: boolean }) { const ctx = useContext(Ctx); return ( {handle && ctx.edge !== "top" ? : null} {children} {handle && ctx.edge === "top" ? : null} ); } /* ---- parts -------------------------------------------------------------------------------- */ export function BottomSheetHeader({ className, ...props }: ComponentProps<"div">) { return

; } export function BottomSheetTitle({ className, ...props }: ComponentProps) { return ; } export function BottomSheetDescription({ className, ...props }: ComponentProps) { return ; } /** The body. `scrollable` makes it the one scrolling region so the header and footer stay pinned. */ export function BottomSheetBody({ className, scrollable, ...props }: ComponentProps<"div"> & { scrollable?: boolean }) { return (

); } export function BottomSheetFooter({ className, ...props }: ComponentProps<"div">) { return (

); } 31:T4a50,"use client"; import { useState, type FormEvent } from "react"; import { IconArrowBackUp, IconCopy, IconDots, IconMoodPlus, IconPin, IconSend, IconShare3, IconTrash, } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { PortalScope } from "../../pdp/_shared/portal-scope"; import { longNotes, messages, quickReactions, snapStops, type MessageSample } from "../_fixtures"; import { useLongPress } from "../_shared/use-long-press"; import { EmojiPicker } from "../emoji-picker/emoji-picker"; import { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetSurface, BottomSheetTitle, BottomSheetTrigger, type BottomSheetProps, } from "./bottom-sheet"; function Notes({ count = 4 }: { count?: number }) { return (

{n.title} {n.body}

); } /** A simple sheet around a trigger, for the variants that differ only by root props. */ function Basic({ label, title, description, count = 3, ...props }: BottomSheetProps & { label: string; title: string; description: string; count?: number }) { return ( {label} {title} {description} Close ); } /* ---- snap points -------------------------------------------------------------------------- */ function ControlledSnap() { const [snap, setSnap] = useState(snapStops[0]); return (

Controlled snap Controlled snap point The parent owns the resting height.

{snapStops.map((s) => ( ))}

active: {String(snap)}

); } /* ---- nested ------------------------------------------------------------------------------- */ function Nested() { return ( Nested sheets Shipping method Open another sheet on top. This one steps back. Choose a carrier Carriers Sample carriers, no real rates. {["Ground, 4 to 6 days", "Express, 2 days", "Pickup point"].map((c) => ( {c} ))} ); } /* ---- non dismissable ---------------------------------------------------------------------- */ function Locked() { const [open, setOpen] = useState(false); return ( <> Review the terms Dragging, Escape and an outside press do nothing. Only the buttons close it. ); } /* ---- with form ---------------------------------------------------------------------------- */ function WithForm() { const [open, setOpen] = useState(false); const [saved, setSaved] = useState(null); const submit = (e: FormEvent) => { e.preventDefault(); const data = new FormData(e.currentTarget); setSaved(String(data.get("title") || "Untitled")); setOpen(false); }; return (

With form

New note Only the handle drags, so typing and selecting never move the sheet. Title Details

</label>
            </BottomSheetBody>
            <BottomSheetFooter>
              <Button type="submit">Save note</Button>
              <BottomSheetClose>Cancel</BottomSheetClose>
            </BottomSheetFooter>
          </form>
        </BottomSheetContent>
      </BottomSheet>
      {saved ? <span className="text-[13px] text-muted-foreground" aria-live="polite">Saved “{saved}”</span> : null}
    </div>
  );
}

/* ---- emoji picker sheet ------------------------------------------------------------------- */

/* ---- message actions ---------------------------------------------------------------------- */

/* ---- hero --------------------------------------------------------------------------------- */

/** A resting sheet drawn with the real surface and handle, for the gallery card and the page top. */
function Hero() {
  return (
    <div className="relative mx-auto grid h-72 w-full max-w-md items-end overflow-hidden rounded-2xl bg-muted/60 px-3 pt-8 ring-1 ring-foreground/5 sm:h-80">
      <div aria-hidden className="absolute inset-x-4 top-4 grid gap-2 opacity-60">
        <div className="h-3 w-1/3 rounded-full bg-foreground/10" />
        <div className="h-3 w-2/3 rounded-full bg-foreground/10" />
      </div>
      <BottomSheetSurface className="rounded-b-none rounded-t-2xl">
        <div className="mx-auto my-2 h-1.5 w-10 rounded-full bg-foreground/20" />
        <div className="px-4 pt-1 pb-3">
          <h2 className="text-base font-semibold">Order updates</h2>
          <p className="text-[13px] text-muted-foreground">Drag me to a snap point, or flick me away.</p>
        </div>
        <div className="px-4 pb-4">
          <Notes count={2} />
        </div>
      </BottomSheetSurface>
    </div>
  );
}

export function BottomSheetDemo() {
  return (
    <DemoPage width="max-w-4xl">
      <PortalScope />
      <DemoSection label="Sheet" note="Drag it to a snap point, or flick it away.">
        <Hero />
      </DemoSection>
        <DemoSection chrome label="Placements" note="Four edges. Start and end follow the reading direction, so they flip in right-to-left.">
          <div className="flex flex-wrap gap-2">
            {(["bottom", "top", "start", "end"] as const).map((p) => (
              <Basic key={p} label={p[0].toUpperCase() + p.slice(1)} placement={p} title={`From the ${p}`} description="Drag it back toward its edge to dismiss." />
            ))}
          </div>
        </DemoSection>
        <DemoSection chrome label="Snap points" note="Rest at 30, 60 and 100 percent. Sequential steps one point per gesture. A custom fade index leaves the backdrop clear until the second point. Controlled hands the height to the parent.">
          <div className="flex flex-wrap items-center gap-2">
            <Basic label="Snap points" snapPoints={snapStops} title="Three resting heights" description="Drag between 30, 60 and 100 percent." count={8} />
            <Basic label="Sequential" snapPoints={snapStops} sequential title="One at a time" description="A hard flick still moves a single step." count={8} />
            <Basic label="Fade from 2nd" snapPoints={snapStops} fadeFromIndex={1} title="Custom fade" description="No backdrop at 30 percent, full dim from 60." count={8} />
            <ControlledSnap />
          </div>
        </DemoSection>
        <DemoSection chrome label="Surfaces" note="Detached floats inset with a radius all round. Handle only keeps the body free of drag. The backdrop is dim, blur or none.">
          <div className="flex flex-wrap gap-2">
            <Basic label="Detached" detached title="Detached" description="Inset from every edge." />
            <Basic label="Handle only" handleOnly title="Handle only" description="Drag by the grabber. The list scrolls freely." count={10} />
            <Basic label="Blur backdrop" backdrop="blur" title="Blur" description="A light dim with a 3px blur." />
            <Basic label="No backdrop" backdrop="none" title="No backdrop" description="Still modal. Press outside to close." />
          </div>
        </DemoSection>
        <DemoSection chrome label="Scrollable, pinned header" note="The header and footer stay put; the body is the one scrolling region.">
          <div className="flex"><Basic label="Scrollable content" title="Production log" description="Ten steps, scroll to read." count={10} snapPoints={[0.6, 1]} /></div>
        </DemoSection>
        <DemoSection chrome label="Stacking and locking" note="A nested sheet opens above its parent, which steps back. A non-dismissable sheet only closes from its own buttons.">
          <div className="flex flex-wrap gap-2">
            <Nested />
            <Locked />
          </div>
        </DemoSection>
        <DemoSection chrome label="With form" note="Inputs inside a handle-only sheet: the keyboard lifts the sheet and nothing drags by accident.">
          <WithForm />
        </DemoSection>
        <DemoSection chrome label="Emoji picker sheet" note="The emoji picker block filling a snap-point sheet. Columns fit the sheet width (10 at the 32rem cap, 7 on a phone).">
          <EmojiSheet />
        </DemoSection>
        <DemoSection chrome label="Message actions" note="Press and hold a bubble (500ms, canceled by movement), right click, or press Enter. Reactions on top, actions below.">
          <MessageActions />
        </DemoSection>
    </DemoPage>
  );
}
32:Tab3,import type { BlockMeta } from "../../../lib/block-meta";

export const bottomSheetMeta: BlockMeta = {
  slug: "bottom-sheet",
  title: "Bottom sheet",
  description:
    "A draggable sheet on Vaul through the Kobra drawer: four edges, snap points (sequential, custom fade, controlled), detached, handle-only, nested, non-dismissable, pinned header over scrolling content, dim, blur or no backdrop. Demos include a form, an emoji picker sheet and message actions.",
  group: "overlays",
  kobraDeps: ["drawer", "button"],
  files: ["blocks/overlays/bottom-sheet/bottom-sheet.tsx"],
  props: [
    { name: "open / defaultOpen", type: "boolean", description: "Controlled or initial open state." },
    { name: "onOpenChange", type: "(open: boolean) => void", description: "Fires on open and close, including drags and Escape." },
    { name: "placement", type: "'bottom' | 'top' | 'start' | 'end'", default: "'bottom'", description: "Edge the sheet comes from; start and end follow the reading direction." },
    { name: "snapPoints", type: "(number | string)[]", description: "Resting heights, least to most: fractions (0.4) or px strings ('320px')." },
    { name: "activeSnapPoint / onActiveSnapPointChange", type: "number | string | null", description: "Controlled snap point." },
    { name: "fadeFromIndex", type: "number", default: "last", description: "First snap point from which the backdrop fades in." },
    { name: "sequential", type: "boolean", default: "false", description: "Step one snap point at a time, ignoring flick velocity." },
    { name: "detached", type: "boolean", default: "false", description: "Inset from the edges with a radius all round." },
    { name: "handleOnly", type: "boolean", default: "false", description: "Only the handle drags." },
    { name: "dismissible", type: "boolean", default: "true", description: "False blocks drag, Escape and outside press; control `open` and give an explicit close." },
    { name: "modal", type: "boolean", default: "true", description: "False leaves the page behind interactive." },
    { name: "backdrop", type: "'dim' | 'blur' | 'none'", default: "'dim'", description: "Backdrop treatment." },
    { name: "nested", type: "boolean", default: "false", description: "Render inside another sheet; the parent steps back." },
    { name: "BottomSheetContent handle", type: "boolean", default: "true", description: "Show the grabber." },
    { name: "BottomSheet parts", type: "Trigger, Content, Header, Title, Description, Body (scrollable), Footer, Close, Handle, Surface", description: "Compound parts with data-slot; Surface is the painted panel for static use." },
  ],
  tags: ["sheet", "drawer", "vaul", "snap-points", "mobile", "gesture"],
  status: "ready",
};
23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#overlays","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Overlays"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Bottom sheet"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Bottom sheet"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"A draggable sheet on Vaul through the Kobra drawer: four edges, snap points (sequential, custom fade, controlled), detached, handle-only, nested, non-dismissable, pinned header over scrolling content, dim, blur or no backdrop. Demos include a form, an emoji picker sheet and message actions."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"bottom-sheet","group":"overlays","minHeight":520,"fixedHeight":720}],"code":["$","$L2f",null,{"files":[{"path":"blocks/overlays/bottom-sheet/bottom-sheet.tsx","code":"$30"},{"path":"blocks/overlays/bottom-sheet/demo.tsx","code":"$31"},{"path":"blocks/overlays/bottom-sheet/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]
</article></body></html>