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/29m25k6c5-ipo.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/29m25k6c5-ipo.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/29m25k6c5-ipo.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/29m25k6c5-ipo.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:T2bcb,"use client"; import * as React from "react"; import { IconCheck } from "@tabler/icons-react"; import { cva } from "class-variance-authority"; import { Checkbox } from "@/components/ui/checkbox"; import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle, } from "@/components/ui/item"; import { cn } from "@/lib/utils"; export type ListViewSelectionMode = "none" | "single" | "multiple"; type Variant = "default" | "outline" | "muted"; type Size = "default" | "sm" | "xs"; type Ctx = { mode: ListViewSelectionMode; variant: Variant; size: Size; isSelected: (value: string) => boolean; tabStop: string | null; setTabStop: (value: string) => void; activate: (value: string, mods: { shift: boolean; toggle: boolean }) => void; }; const ListViewContext = React.createContext(null); const root = cva("flex w-full flex-col outline-none", { variants: { variant: { default: "gap-0.5", outline: "overflow-hidden rounded-xl border border-border", muted: "gap-1.5", }, }, defaultVariants: { variant: "default" }, }); const row = cva( [ "relative select-none outline-none", "transition-[background-color,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "focus-visible:z-10 focus-visible:bg-muted/70 focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/50", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", "[@media(hover:hover)]:hover:bg-muted/60 active:scale-[0.99] motion-reduce:active:scale-100", "data-[selected=true]:bg-muted [@media(hover:hover)]:data-[selected=true]:hover:bg-muted", ], { variants: { variant: { default: "rounded-lg border-transparent", outline: "rounded-none border-0 not-last:border-b not-last:border-border", muted: "rounded-lg border-transparent bg-muted/40 data-[selected=true]:bg-muted", }, selectable: { true: "cursor-pointer", false: "" }, }, defaultVariants: { variant: "default", selectable: true }, }, ); export type ListViewProps = Omit, "onChange" | "defaultValue"> & { /** `none` keeps keyboard focus and Enter activation but no selection. */ selectionMode?: ListViewSelectionMode; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; /** Enter, or a click when selectionMode is `none`. */ onAction?: (value: string) => void; variant?: Variant; size?: Size; /** Shown instead of the list when there are no items. */ empty?: React.ReactNode; "aria-label": string; }; const optionsOf = (el: HTMLElement) => Array.from(el.querySelectorAll('[role="option"]:not([data-disabled="true"])')); export function ListView({ selectionMode = "single", value: valueProp, defaultValue = [], onValueChange, onAction, variant = "default", size = "default", empty, className, children, onKeyDown, ...props }: ListViewProps) { const ref = React.useRef(null); const [inner, setInner] = React.useState(defaultValue); const selected = valueProp ?? inner; const selectedSet = React.useMemo(() => new Set(selected), [selected]); const [tabStop, setTabStop] = React.useState(null); const anchor = React.useRef(null); const typeahead = React.useRef({ buffer: "", timer: 0 }); const commit = React.useCallback( (next: string[]) => { setInner(next); onValueChange?.(next); }, [onValueChange], ); // Roving tabindex: exactly one stop (selected first, else first enabled). Runs every render on purpose: // items mount, unmount and disable without the root knowing. // eslint-disable-next-line react-hooks/exhaustive-deps React.useEffect(() => { if (!ref.current) return; const els = optionsOf(ref.current); if (tabStop && els.some((el) => el.dataset.value === tabStop)) return; const first = els.find((el) => el.dataset.selected === "true") ?? els[0]; setTabStop(first?.dataset.value ?? null); }); const values = () => (ref.current ? optionsOf(ref.current).map((el) => el.dataset.value!) : []); const focusValue = (v: string) => { const el = ref.current?.querySelector(`[role="option"][data-value="${CSS.escape(v)}"]`); if (!el) return; setTabStop(v); el.focus(); el.scrollIntoView({ block: "nearest" }); }; const rangeTo = (target: string) => { const all = values(); const from = all.indexOf(anchor.current ?? target); const to = all.indexOf(target); if (from < 0 || to < 0) return; const [a, b] = from < to ? [from, to] : [to, from]; commit(all.slice(a, b + 1)); }; const activate: Ctx["activate"] = (v, { shift, toggle }) => { setTabStop(v); if (selectionMode === "none") return onAction?.(v); if (selectionMode === "single") { anchor.current = v; const already = selectedSet.has(v); return commit(already && toggle ? [] : [v]); } if (shift && anchor.current) return rangeTo(v); anchor.current = v; commit(selectedSet.has(v) ? selected.filter((x) => x !== v) : [...selected, v]); }; const handleKeyDown = (event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented) return; const current = (event.target as HTMLElement).closest('[role="option"]')?.dataset.value; const all = values(); const index = current ? all.indexOf(current) : -1; const go = (i: number) => { const target = all[Math.max(0, Math.min(all.length - 1, i))]; if (!target) return; event.preventDefault(); focusValue(target); if (event.shiftKey && selectionMode === "multiple") { anchor.current ??= current ?? target; rangeTo(target); } }; switch (event.key) { case "ArrowDown": return go(index + 1); case "ArrowUp": return go(index < 0 ? 0 : index - 1); case "Home": return go(0); case "End": return go(all.length - 1); case " ": if (current && typeahead.current.buffer === "") { event.preventDefault(); activate(current, { shift: event.shiftKey, toggle: true }); } return; case "Enter": if (current) { event.preventDefault(); if (onAction) onAction(current); else activate(current, { shift: false, toggle: true }); } return; case "Escape": if (selectionMode !== "none" && selected.length) { event.preventDefault(); commit([]); } return; case "a": case "A": if ((event.metaKey || event.ctrlKey) && selectionMode === "multiple") { event.preventDefault(); commit(all); return; } } // Typeahead: a printable key jumps to the next item whose label starts with the buffer. if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey && ref.current) { const t = typeahead.current; window.clearTimeout(t.timer); t.buffer += event.key.toLowerCase(); t.timer = window.setTimeout(() => (t.buffer = ""), 600); const els = optionsOf(ref.current); const start = Math.max(0, index); const ordered = [...els.slice(start + (t.buffer.length === 1 ? 1 : 0)), ...els.slice(0, start + 1)]; const hit = ordered.find((el) => el.textContent?.trim().toLowerCase().startsWith(t.buffer)); if (hit) { event.preventDefault(); focusValue(hit.dataset.value!); } } }; const ctx = React.useMemo( () => ({ mode: selectionMode, variant, size, isSelected: (v) => selectedSet.has(v), tabStop, setTabStop, activate }), // activate closes over selection state; rebuilding per selection change is intended. // eslint-disable-next-line react-hooks/exhaustive-deps [selectionMode, variant, size, selectedSet, tabStop, selected, onAction, onValueChange], ); const hasItems = React.Children.count(children) > 0; if (!hasItems && empty) return

{empty}

; return ( ); } export type ListViewItemProps = Omit, "variant" | "size" | "value" | "role"> & { value: string; disabled?: boolean; }; export function ListViewItem({ value, disabled, className, children, onClick, onFocus, ...props }: ListViewItemProps) { const ctx = React.useContext(ListViewContext); if (!ctx) throw new Error("ListViewItem must be rendered inside ListView"); const selected = ctx.mode !== "none" && ctx.isSelected(value); const selectable = ctx.mode !== "none"; return ( ); } export const ListViewItemMedia = ItemMedia; export const ListViewItemContent = ItemContent; export const ListViewItemTitle = ItemTitle; export const ListViewItemDescription = ItemDescription; /** Trailing actions. Clicks and keys here never toggle the row. */ export function ListViewItemActions({ className, onClick, onKeyDown, ...props }: React.ComponentProps) { return ( { event.stopPropagation(); onClick?.(event); }} onKeyDown={(event) => { event.stopPropagation(); onKeyDown?.(event); }} {...props} /> ); } 31:T1c7e,"use client"; import * as React from "react"; import { IconArchive, IconDeviceLaptop, IconDeviceMobile, IconDeviceTablet, IconDeviceWatch, IconDots, IconMail, IconTrash, IconUsers, } from "@tabler/icons-react"; import { Avatar, AvatarGradient } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Kbd, KbdGroup } from "@/components/ui/kbd"; import { ActionBar, ActionBarAction, ActionBarClose, ActionBarGroup, ActionBarSelection, ActionBarSeparator, } from "../action-bar/action-bar"; import { EmptyState, EmptyStateDescription, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle } from "../empty-state/empty-state"; import { ListView, ListViewItem, ListViewItemActions, ListViewItemContent, ListViewItemDescription, ListViewItemMedia, ListViewItemTitle, } from "./list-view"; import { devices, teamMembers, type Device } from "../_fixtures"; import { DemoCell, DemoGrid, DemoPage } from "../../_shared/variant-frame"; const kindIcon: Record> = { laptop: IconDeviceLaptop, phone: IconDeviceMobile, tablet: IconDeviceTablet, watch: IconDeviceWatch, }; function Block({ label, hint, children, className }: { label: string; hint?: React.ReactNode; children: React.ReactNode; className?: string }) { return ( {hint ? (

{hint}

) : null} {children} ); } function Members({ disabledIds = [] as string[] }) { return teamMembers.map((m) => ( {m.name .split(" ") .map((p) => p[0]) .join("")} {m.name} {m.role} )); } export function ListViewDemo() { const [device, setDevice] = React.useState(["d1"]); const [picked, setPicked] = React.useState(["t2", "t4"]); const [opened, setOpened] = React.useState(null); return ( ↑ ↓ Space } > {devices.map((d) => { const Icon = kindIcon[d.kind]; return ( {d.name} {d.current ? This device : null} {d.location} · {d.lastActive} ); })} Shift ↓ range } >

0} onOpenChange={(o) => !o && setPicked([])} placement="attached" labels="hidden">

} /> } /> } className="text-error hover:text-error" />

setOpened(teamMembers.find((m) => m.id === v)?.name ?? v)} > {teamMembers.slice(0, 4).map((m) => ( {m.name} {m.email} ))} No members People you invite will show up in this list. } /> ); } export default ListViewDemo; 32:T626,import type { BlockMeta } from "../../../lib/block-meta"; export const listViewMeta: BlockMeta = { slug: "list-view", title: "List view", description: "Keyboard-navigable single column on the Kobra item: roving tabindex, arrows, space and enter, shift-range, select all, typeahead; single, multiple and no selection.", group: "data", kobraDeps: ["item", "checkbox"], files: ["blocks/data/list-view/list-view.tsx"], props: [ { name: "selectionMode", type: "'none' | 'single' | 'multiple'", default: "'single'", description: "Selection model." }, { name: "value / defaultValue", type: "string[]", description: "Selected item values." }, { name: "onValueChange", type: "(value: string[]) => void", description: "Selection change." }, { name: "onAction", type: "(value: string) => void", description: "Enter, or click in `none` mode." }, { name: "variant", type: "'default' | 'outline' | 'muted'", default: "'default'", description: "Row and container treatment." }, { name: "size", type: "'default' | 'sm' | 'xs'", default: "'default'", description: "Kobra item density." }, { name: "empty", type: "ReactNode", description: "Rendered when there are no items." }, { name: "ListViewItem value / disabled", type: "string / boolean", description: "Item key; disabled items are skipped by keys." }, { name: "ListViewItemMedia / Content / Title / Description / Actions", type: "parts", description: "Row anatomy; Actions never toggle the row." }, ], tags: ["list", "listbox", "selection", "keyboard"], 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":"List view"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"List view"}],["$","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":"Keyboard-navigable single column on the Kobra item: roving tabindex, arrows, space and enter, shift-range, select all, typeahead; single, multiple and no selection."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"list-view","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/list-view/list-view.tsx","code":"$30"},{"path":"blocks/data/list-view/demo.tsx","code":"$31"},{"path":"blocks/data/list-view/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]