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:T2445,"use client"; import * as React from "react"; import { IconCheck, IconChevronDown, IconChevronRight } from "@tabler/icons-react"; import { cva, type VariantProps } from "class-variance-authority"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemHeader, ItemMedia, ItemTitle, } from "@/components/ui/item"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import { cn } from "@/lib/utils"; /** Group-level defaults an ItemCard inherits (set by ItemCardGroup). */ export type ItemCardDefaults = { variant?: "default" | "outline" | "muted" | "raised"; size?: "default" | "sm" | "xs"; pressable?: boolean; }; export const ItemCardDefaultsContext = React.createContext({}); const itemCard = cva( [ "transition-[background-color,border-color,box-shadow,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "data-[selected=true]:border-foreground data-[selected=true]:bg-muted/50 data-[selected=true]:shadow-[inset_0_0_0_1px_var(--foreground)]", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", ], { variants: { variant: { default: "", outline: "", muted: "", /** Hairline, then a soft shadow, on the card surface. */ raised: "border-border bg-card shadow-[0_1px_2px_0_rgb(0_0_0/0.06)]", }, orientation: { horizontal: "", vertical: "flex-col items-start gap-3 p-4 *:data-[slot=item-content]:w-full *:data-[slot=item-media]:translate-y-0 *:data-[slot=item-media]:self-start!", }, pressable: { true: [ "w-full cursor-pointer text-start", "hover:bg-muted/60 active:scale-[0.99] motion-reduce:active:scale-100", ], false: "", }, }, defaultVariants: { variant: "default", orientation: "horizontal", pressable: false }, }, ); export type ItemCardProps = Omit, "variant"> & Omit, "pressable"> & { variant?: "default" | "outline" | "muted" | "raised"; /** Whole card is one button (or the element you pass to `render`). Don't nest controls inside. */ pressable?: boolean; selected?: boolean; /** Trailing radio-style mark. Defaults to on when `selected` is provided. */ indicator?: boolean; disabled?: boolean; }; /** Icon, title and description with a trailing control. Built on the Kobra item. */ export function ItemCard({ className, variant, size, orientation = "horizontal", pressable, selected, indicator, disabled, render, children, ...props }: ItemCardProps) { const defaults = React.useContext(ItemCardDefaultsContext); const v = variant ?? defaults.variant ?? "outline"; const p = pressable ?? defaults.pressable ?? false; const s = size ?? defaults.size ?? "default"; const pressProps = p ? { "aria-pressed": selected === undefined ? undefined : selected, ...(render ? {} : { disabled, type: "button" as const }), } : {}; return ( : undefined)} className={cn(itemCard({ variant: v, orientation, pressable: p }), className)} {...(pressProps as object)} {...props} > {children} {(indicator ?? selected !== undefined) ? : null} ); } /** Radio-style mark: empty ring at rest, ink disc with a check when selected. */ export function ItemCardMark({ selected }: { selected: boolean }) { return ( ); } export const ItemCardHeader = ItemHeader; export const ItemCardFooter = ItemFooter; export const ItemCardContent = ItemContent; export const ItemCardTitle = ItemTitle; export const ItemCardDescription = ItemDescription; export const ItemCardActions = ItemActions; /** Leading media. Default is the icon tile; `variant="image"` for a thumbnail. */ export function ItemCardMedia({ variant = "icon", ...props }: React.ComponentProps) { return ; } /** Trailing text value, optionally with a chevron to signal navigation. */ export function ItemCardValue({ children, chevron = false, className, ...props }: React.ComponentProps<"span"> & { chevron?: boolean }) { return ( {children} {chevron ? : null} ); } /** Trailing switch. Needs an accessible name. */ export function ItemCardSwitch(props: React.ComponentProps) { return ; } type Option = string | { label: string; value: string }; const norm = (o: Option) => (typeof o === "string" ? { label: o, value: o } : o); const quietTrigger = "h-7 gap-1 border-transparent bg-transparent ps-2 pe-1.5 text-muted-foreground shadow-none hover:text-foreground dark:bg-transparent dark:hover:bg-transparent aria-expanded:text-foreground"; /** Trailing single select that reads as text with a chevron. */ export function ItemCardSelect({ options, value, defaultValue, onValueChange, disabled, "aria-label": ariaLabel, className, }: { options: Option[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; disabled?: boolean; "aria-label": string; className?: string; }) { const list = options.map(norm); return ( ); } /** Trailing multi select: a menu of checkable options with a count summary. */ export function ItemCardMultiSelect({ options, value, defaultValue = [], onValueChange, disabled, placeholder = "None", "aria-label": ariaLabel, className, }: { options: Option[]; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; disabled?: boolean; placeholder?: string; "aria-label": string; className?: string; }) { const [inner, setInner] = React.useState(defaultValue); const current = value ?? inner; const list = options.map(norm); const set = (next: string[]) => { setInner(next); onValueChange?.(next); }; const summary = current.length === 0 ? placeholder : current.length <= 2 ? list.filter((o) => current.includes(o.value)).map((o) => o.label).join(", ") : `${current.length} selected`; return ( } > {summary} {list.map((o) => ( set(on ? [...current, o.value] : current.filter((v) => v !== o.value))} > {o.label} ))} ); } 31:T1acb,"use client"; import * as React from "react"; import { IconBell, IconBrush, IconClock, IconLanguage, IconMail, IconShieldLock, IconSparkles } from "@tabler/icons-react"; import { ItemCard, ItemCardContent, ItemCardDescription, ItemCardMedia, ItemCardMultiSelect, ItemCardSelect, ItemCardSwitch, ItemCardTitle, ItemCardValue, } from "./item-card"; import { settings } from "../_fixtures"; import { DemoCell, DemoGrid, DemoPage } from "../../_shared/variant-frame"; function Block({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) { return (

{children}

); } const language = settings.find((s) => s.id === "language")!; const theme = settings.find((s) => s.id === "theme")!; export function ItemCardDemo() { const [notify, setNotify] = React.useState(true); const [picked, setPicked] = React.useState("monthly"); const [channels, setChannels] = React.useState(["email"]); return ( Language Choose your preferred language English } className="cursor-pointer"> Notifications {notify ? "You will get a ping on mentions" : "Muted until you turn it on"} {theme.title} {theme.description} {language.title} {language.description} Delivery channels Where alerts are sent Security Passkeys and recovery Audit log Available on the Team plan {[ { id: "monthly", title: "Monthly", description: "Billed every month" }, { id: "yearly", title: "Yearly", description: "Two months free" }, ].map((plan) => ( setPicked(plan.id)}> {plan.title} {plan.description} ))} Title only No icon Copy lines up with the card edge. Edit What is new Icon above the copy for tiles and onboarding cards.

{(["default", "outline", "muted", "raised"] as const).map((variant) => ( {variant} Same anatomy, different surface. ))}

); } export default ItemCardDemo; 32:T815,import type { BlockMeta } from "../../../lib/block-meta"; export const itemCardMeta: BlockMeta = { slug: "item-card", title: "Item card", description: "Icon, title and description row on the Kobra item, with trailing value, switch, select or multi select; pressable, selected, vertical stack and four variants.", group: "data", kobraDeps: ["item", "switch", "select", "dropdown-menu", "button"], files: ["blocks/data/item-card/item-card.tsx"], props: [ { name: "variant", type: "'default' | 'outline' | 'muted' | 'raised'", default: "'outline'", description: "Surface. Inherits from ItemCardGroup when omitted." }, { name: "size", type: "'default' | 'sm' | 'xs'", default: "'default'", description: "Kobra item density." }, { name: "orientation", type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Vertical stacks media above the copy." }, { name: "pressable", type: "boolean", default: "false", description: "Whole card is a button (press scale 0.99). Use `render` to make it a link." }, { name: "selected", type: "boolean", description: "Ink border, surface shift and a trailing check mark; sets aria-pressed when pressable." }, { name: "indicator", type: "boolean", description: "Show the trailing mark. Defaults to on when `selected` is set." }, { name: "disabled", type: "boolean", description: "Dims and blocks input." }, { name: "render", type: "ReactElement", description: "Swap the element (a, label, button)." }, { name: "ItemCardSwitch", type: "Switch props", description: "Trailing switch. Needs aria-label." }, { name: "ItemCardSelect", type: "{ options, value, defaultValue, onValueChange }", description: "Trailing select shown as text and a chevron." }, { name: "ItemCardMultiSelect", type: "{ options, value, defaultValue, onValueChange }", description: "Trailing checkable menu with a count summary." }, { name: "ItemCardValue", type: "{ chevron }", description: "Trailing text value." }, ], tags: ["item", "settings", "row", "card"], 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":"Item card"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Item card"}],["$","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":"Icon, title and description row on the Kobra item, with trailing value, switch, select or multi select; pressable, selected, vertical stack and four variants."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"item-card","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/item-card/item-card.tsx","code":"$30"},{"path":"blocks/data/item-card/demo.tsx","code":"$31"},{"path":"blocks/data/item-card/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]