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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T2a5b,"use client"; import * as React from "react"; import { Toolbar } from "@base-ui/react/toolbar"; import { IconX } from "@tabler/icons-react"; import { cva } from "class-variance-authority"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; type Placement = "floating" | "attached"; type Orientation = "horizontal" | "vertical"; type Labels = "responsive" | "visible" | "hidden"; type Position = "absolute" | "fixed" | "static"; type Ctx = { orientation: Orientation; placement: Placement; labels: Labels; onOpenChange?: (open: boolean) => void; }; const ActionBarContext = React.createContext({ orientation: "horizontal", placement: "floating", labels: "responsive", }); const bar = cva( [ "z-40 flex items-center gap-1 bg-popover text-sm text-popover-foreground outline-none", // asymmetric motion: arrives on --ease-out, leaves faster on --ease-exit "transition-[opacity,translate] motion-reduce:transition-none", "data-[state=open]:opacity-100 data-[state=open]:translate-x-0 data-[state=open]:translate-y-0", "data-[state=open]:duration-200 data-[state=open]:ease-[cubic-bezier(0.23,1,0.32,1)]", "data-[state=closed]:pointer-events-none data-[state=closed]:opacity-0", "data-[state=closed]:duration-150 data-[state=closed]:ease-(--ease-exit)", ], { variants: { placement: { floating: "rounded-xl border border-border p-1 shadow-lg", attached: "border-border", }, orientation: { horizontal: "flex-row", vertical: "flex-col items-stretch", }, position: { absolute: "absolute", fixed: "fixed", static: "relative", }, }, compoundVariants: [ // floating, horizontal: centered at the bottom, rises in { placement: "floating", orientation: "horizontal", position: ["absolute", "fixed"], class: "inset-x-0 bottom-4 mx-auto w-fit starting:translate-y-3 starting:opacity-0 data-[state=closed]:translate-y-3" }, // floating, vertical: hugs the inline end, slides in from it { placement: "floating", orientation: "vertical", position: ["absolute", "fixed"], class: "inset-y-0 end-4 my-auto h-fit starting:translate-x-3 starting:opacity-0 data-[state=closed]:translate-x-3 rtl:starting:-translate-x-3 rtl:data-[state=closed]:-translate-x-3" }, // attached, horizontal: a full-width strip on the container's bottom edge { placement: "attached", orientation: "horizontal", position: ["absolute", "fixed"], class: "inset-x-0 bottom-0 justify-between border-t px-3 py-2 starting:translate-y-full starting:opacity-0 data-[state=closed]:translate-y-full" }, // attached, vertical: a full-height rail on the inline end { placement: "attached", orientation: "vertical", position: ["absolute", "fixed"], class: "inset-y-0 end-0 border-s p-2 starting:translate-x-full starting:opacity-0 data-[state=closed]:translate-x-full rtl:starting:-translate-x-full rtl:data-[state=closed]:-translate-x-full" }, // static: sits in the flow { placement: "floating", position: "static", class: "w-fit starting:opacity-0 starting:translate-y-2 data-[state=closed]:translate-y-2" }, { placement: "attached", orientation: "horizontal", position: "static", class: "justify-between border-t px-3 py-2 starting:opacity-0 data-[state=closed]:opacity-0" }, { placement: "attached", orientation: "vertical", position: "static", class: "border-s p-2 starting:opacity-0" }, ], defaultVariants: { placement: "floating", orientation: "horizontal", position: "absolute" }, }, ); export type ActionBarProps = Omit, "orientation"> & { /** Controlled visibility. The bar mounts, animates in, animates out, then unmounts. */ open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** `floating` is a rounded pill over content, `attached` a strip fused to the container edge. */ placement?: Placement; orientation?: Orientation; /** `responsive` collapses labels to icons (with tooltips) under 640px. */ labels?: Labels; /** `absolute` anchors to the nearest positioned ancestor, `fixed` to the viewport, `static` stays in flow. */ position?: Position; "aria-label"?: string; }; const EXIT_MS = 160; export function ActionBar({ open: openProp, defaultOpen = false, onOpenChange, placement = "floating", orientation = "horizontal", labels = "responsive", position = "absolute", className, children, onKeyDown, "aria-label": ariaLabel = "Selection actions", ...props }: ActionBarProps) { const [uncontrolled, setUncontrolled] = React.useState(defaultOpen); const open = openProp ?? uncontrolled; const [mounted, setMounted] = React.useState(open); // Mount synchronously on open; unmount after the exit transition. if (open && !mounted) setMounted(true); React.useEffect(() => { if (open || !mounted) return; const t = window.setTimeout(() => setMounted(false), EXIT_MS); return () => window.clearTimeout(t); }, [open, mounted]); const setOpen = React.useCallback( (next: boolean) => { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); const ctx = React.useMemo( () => ({ orientation, placement, labels, onOpenChange: setOpen }), [orientation, placement, labels, setOpen], ); if (!mounted) return null; return ( { onKeyDown?.(event); if (event.key === "Escape" && !event.defaultPrevented) setOpen(false); }} className={cn(bar({ placement, orientation, position }), className)} {...props} > {children} ); } /** Live count: "3 selected". Announced politely as it changes. */ export function ActionBarSelection({ count, label = "selected", compact = false, className, ...props }: Omit, "children"> & { count: number; label?: string; /** Show the bare count; the label stays in the accessible name. */ compact?: boolean; }) { return ( {count} {label} ); } export function ActionBarGroup({ className, ...props }: React.ComponentProps) { const { orientation } = React.useContext(ActionBarContext); return ( ); } export function ActionBarSeparator({ className, ...props }: React.ComponentProps) { const { orientation } = React.useContext(ActionBarContext); return ( ); } export type ActionBarActionProps = Omit, "children" | "variant" | "size" | "render"> & { /** Accessible name, visible label and tooltip text. */ label: string; icon?: React.ReactNode; /** Shown in the tooltip as a keyboard hint. */ shortcut?: string; variant?: "default" | "ghost" | "destructive" | "outline" | "secondary"; }; export function ActionBarAction({ label, icon, shortcut, variant = "ghost", disabled, className, ...props }: ActionBarActionProps) { const { labels, orientation } = React.useContext(ActionBarContext); const showLabel = labels !== "hidden"; const collapse = labels === "responsive"; const iconOnly = !showLabel; const tooltip = labels !== "visible" || shortcut; const button = ( } > {icon} {showLabel ? {label} : null} ); if (!tooltip) return button; return ( {label} {shortcut ? {shortcut} : null} ); } /** Dismiss button; Escape does the same from anywhere inside the bar. */ export function ActionBarClose({ label = "Clear selection", className, ...props }: Omit & { label?: string }) { const { onOpenChange } = React.useContext(ActionBarContext); return ( onOpenChange?.(false)} className={cn("text-muted-foreground", className)} {...props} /> } > } /> {label} Esc ); } 31:T15b7,"use client"; import * as React from "react"; import { IconArchive, IconCopy, IconDownload, IconMail, IconShare3, IconTag, IconTrash } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { ActionBar, ActionBarAction, ActionBarClose, ActionBarGroup, ActionBarSelection, ActionBarSeparator, } from "./action-bar"; import { DemoGrid, DemoPage, DemoSection } from "../../_shared/variant-frame"; function Stage({ title, note, tall, children, }: { title: string; note?: string; tall?: boolean; children: (open: boolean, setOpen: (v: boolean) => void) => React.ReactNode; }) { const [open, setOpen] = React.useState(true); return (

{Array.from({ length: tall ? 6 : 4 }, (_, i) => (

))}

{children(open, setOpen)}

); } function Actions() { return ( <> } shortcut="E" /> } shortcut="T" /> } shortcut="C" /> } /> } variant="ghost" className="text-error hover:text-error" /> ); } export function ActionBarDemo() { return ( {(open, setOpen) => ( )} {(open, setOpen) => (

)} {(open, setOpen) => ( } shortcut="S" /> } /> } /> )} {(open, setOpen) => ( } /> } /> } /> )} {(open, setOpen) => ( )} {(open, setOpen) => ( )} ); } export default ActionBarDemo; 32:T766,import type { BlockMeta } from "../../../lib/block-meta"; export const actionBarMeta: BlockMeta = { slug: "action-bar", title: "Action bar", description: "Floating selection toolbar on Base UI Toolbar and Kobra button: floating or attached, horizontal or vertical, labels collapse to icons with tooltips under 640px, enters and exits on the Kobra curves.", group: "data", kobraDeps: ["button", "kbd", "tooltip"], files: ["blocks/data/action-bar/action-bar.tsx"], props: [ { name: "open / defaultOpen", type: "boolean", description: "Visibility. The bar mounts, animates in, animates out, then unmounts." }, { name: "onOpenChange", type: "(open: boolean) => void", description: "Fired by Escape and by ActionBarClose." }, { name: "placement", type: "'floating' | 'attached'", default: "'floating'", description: "Rounded pill over content, or a strip fused to the container edge." }, { name: "orientation", type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Layout axis; also the arrow-key axis." }, { name: "labels", type: "'responsive' | 'visible' | 'hidden'", default: "'responsive'", description: "Responsive collapses labels to icons with tooltips under 640px." }, { name: "position", type: "'absolute' | 'fixed' | 'static'", default: "'absolute'", description: "Anchor to the nearest positioned ancestor, the viewport, or stay in flow." }, { name: "ActionBarAction", type: "{ label, icon, shortcut, variant }", description: "Toolbar button; label is the accessible name and the tooltip." }, { name: "ActionBarSelection", type: "{ count, label, compact }", description: "Live-announced count." }, { name: "ActionBarGroup / ActionBarSeparator / ActionBarClose", type: "parts", description: "Grouping, divider and dismiss." }, ], tags: ["toolbar", "selection", "bulk-actions", "motion"], 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":"/#data","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Data display"}]}],["$","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":"Action bar"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Action bar"}],["$","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":"Floating selection toolbar on Base UI Toolbar and Kobra button: floating or attached, horizontal or vertical, labels collapse to icons with tooltips under 640px, enters and exits on the Kobra curves."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"action-bar","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/action-bar/action-bar.tsx","code":"$30"},{"path":"blocks/data/action-bar/demo.tsx","code":"$31"},{"path":"blocks/data/action-bar/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]