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:T109f,"use client"; import { useRef, useState, type MouseEvent, type ReactNode } from "react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { SettingsCellRow, type SettingsCellVariant } from "../_shared/settings-cell"; export type CellSelectOption = { value: string; /** Plain-text label; also what the trigger shows unless `renderValue` is given. */ label: string; /** Second line in the open list. */ description?: string; disabled?: boolean; }; export type CellSelectProps = { label: ReactNode; description?: ReactNode; icon?: ReactNode; badge?: ReactNode; options: CellSelectOption[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; placeholder?: string; /** Custom content for the closed trigger. */ renderValue?: (option: CellSelectOption) => ReactNode; /** Custom content for each row of the open list (a font preview, a flag). */ renderOption?: (option: CellSelectOption) => ReactNode; disabled?: boolean; /** Which edge of the trigger the list lines up with. */ align?: "start" | "center" | "end"; variant?: SettingsCellVariant; className?: string; }; /** * A settings row with a Kobra select. Clicking the row outside the trigger opens the list, * so the whole row is the target. `value` / `onValueChange` for controlled use. */ export function CellSelect({ label, description, icon, badge, options, value, defaultValue, onValueChange, placeholder = "Choose", renderValue, renderOption, disabled, align = "end", variant, className, }: CellSelectProps) { const [open, setOpen] = useState(false); const wasOpen = useRef(false); const byValue = (v: string | null | undefined) => options.find((o) => o.value === v); const openFromRow = (event: MouseEvent) => { if (disabled || wasOpen.current) return; const target = event.target as Node; // Portaled list items bubble through React, but they are not inside this row's DOM. if (!event.currentTarget.contains(target)) return; if ((target as Element).closest?.('[data-slot="select-trigger"]')) return; setOpen(true); }; return ( { wasOpen.current = open; }} onClick={openFromRow} control={({ labelId, descriptionId }) => ( )} /> ); } export default CellSelect; 31:T1e19,"use client"; import { createContext, useContext, useId, type ComponentProps, type ReactNode } from "react"; import { Badge } from "@/components/ui/badge"; import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemMedia, ItemTitle } from "@/components/ui/item"; import { cn } from "@/lib/utils"; /** * The settings-cell chassis shared by cell-switch, cell-select, cell-slider and cell-color-picker. * One row: icon, label, description, a trailing control, optionally a full-width footer under it. * Built on Kobra `item`; the group draws the hairlines between rows. */ export type SettingsCellVariant = "default" | "secondary"; const GroupContext = createContext<{ variant: SettingsCellVariant } | null>(null); /* ---------------------------------- group --------------------------------- */ export type SettingsGroupProps = Omit, "title"> & { /** Heading above the rows. */ title?: ReactNode; /** One quiet line under the heading. */ description?: ReactNode; /** `default` is an outlined card; `secondary` is a tinted one. Rows inherit it. */ variant?: SettingsCellVariant; }; export function SettingsGroup({ title, description, variant = "default", className, children, ...props }: SettingsGroupProps) { const titleId = useId(); return (

{title || description ? (

{title ? (

{title}

) : null} {description ? (

{description}

) : null}

{children}

); } /* ---------------------------------- cell ---------------------------------- */ export type SettingsCellProps = Omit, "onClick"> & { variant?: SettingsCellVariant; /** `label` makes the whole row the label of the control inside it (click anywhere to toggle). */ as?: "div" | "label"; htmlFor?: string; disabled?: boolean; /** Press feedback (scale 0.99) for rows where the whole row acts. */ pressable?: boolean; onClick?: ComponentProps<"div">["onClick"]; }; export function SettingsCell({ variant, as = "div", htmlFor, disabled, pressable, className, children, ...props }: SettingsCellProps) { const group = useContext(GroupContext); const grouped = group !== null; const tone = variant ?? group?.variant ?? "default"; return ( :

} variant={grouped ? "default" : tone === "secondary" ? "muted" : "outline"} data-slot="settings-cell" data-variant={tone} data-grouped={grouped || undefined} data-disabled={disabled || undefined} className={cn( "min-h-11 flex-nowrap py-2", grouped && "rounded-none border-0 first:rounded-t-xl last:rounded-b-xl not-first:border-t not-first:border-border", // Hover only where hover exists; the surface answers, the content stays put. "[@media(hover:hover)]:hover:bg-foreground/[0.035] data-disabled:[@media(hover:hover)]:hover:bg-transparent", pressable && "cursor-pointer [transition-property:color,background-color,border-color,box-shadow,scale]! active:scale-[0.99] data-disabled:cursor-not-allowed data-disabled:active:scale-100 motion-reduce:active:scale-100", className, )} {...props} > {children} ); } export function SettingsCellIcon({ className, ...props }: ComponentProps<"div">) { return ( ); } export function SettingsCellContent({ className, ...props }: ComponentProps<"div">) { return ( ); } export function SettingsCellTitle({ className, ...props }: ComponentProps<"div">) { return ; } export function SettingsCellDescription({ className, ...props }: ComponentProps<"p">) { return ; } export function SettingsCellControl({ className, ...props }: ComponentProps<"div">) { return ; } export function SettingsCellFooter({ className, ...props }: ComponentProps<"div">) { return ; } /* ------------------------------- convenience ------------------------------ */ export type CellIds = { labelId: string; descriptionId: string | undefined }; export type SettingsCellRowProps = Omit & { icon?: ReactNode; label: ReactNode; description?: ReactNode; /** A string renders a Kobra badge beside the label (feature announcement); a node is used as is. */ badge?: ReactNode; /** The trailing control. A function receives the ids that label and describe the row. */ control?: ReactNode | ((ids: CellIds) => ReactNode); /** Full-width content under the row (a slider). A function receives the same ids. */ footer?: ReactNode | ((ids: CellIds) => ReactNode); }; /** Icon, label, description, control, footer from flat props: what the four cell blocks render. */ export function SettingsCellRow({ icon, label, description, badge, control, footer, ...root }: SettingsCellRowProps) { const labelId = useId(); const descId = useId(); const ids: CellIds = { labelId, descriptionId: description ? descId : undefined }; const resolve = (slot: SettingsCellRowProps["control"]) => (typeof slot === "function" ? slot(ids) : slot); const footerNode = resolve(footer); return ( {icon ? {icon} : null} {label} {typeof badge === "string" ? ( {badge} ) : ( badge )} {description ? {description} : null} {control ? {resolve(control)} : null} {footerNode ? ( // Start the footer under the label, not under the icon tile (tile 40px + gap 10px; bare icon 16px + gap 10px). {footerNode} ) : null} ); } 32:T11df,"use client"; import { useState } from "react"; import { IconCalendar, IconLanguage, IconTypography, IconWorld } from "@tabler/icons-react"; import { DemoPage, DemoSection } from "../_shared/demo-section"; import { SettingsGroup } from "../_shared/settings-cell"; import { dateFormats, fontFamilies, languages, settingsGroups } from "../_fixtures"; import { CellSelect, type CellSelectOption } from "./cell-select"; const fontOptions: CellSelectOption[] = fontFamilies.map((f) => ({ value: f.value, label: f.label })); const fontVar = (value: string) => fontFamilies.find((f) => f.value === value)?.cssVar; function FontName({ option }: { option: CellSelectOption }) { return ( {option.label} ); } const code = (o: CellSelectOption) => ( <> {o.value} {o.label} ); export function CellSelectDemo() { const [lang, setLang] = useState("en"); const [font, setFont] = useState("archivo"); return ( } label="Language" description="Choose your preferred language." options={languages} defaultValue="en" /> } label="Region language" description="Held in the parent." options={languages} value={lang} onValueChange={setLang} />

Parent state: {lang}

} label="Interface language" options={languages} defaultValue="fr" renderValue={code} /> } label="Date format" options={dateFormats} defaultValue="mdy" />

} label="Language" description="Locked by your organization." options={languages} defaultValue="de" disabled />

} label="Language" description="Menus and messages." options={languages} defaultValue="en" /> } label="Date format" description="Order, dashboards and receipts." options={dateFormats} defaultValue="iso" /> } label="Font family" description="Body text across the app." options={fontOptions} defaultValue="space-grotesk" renderOption={(o) => } renderValue={(o) => } /> } label="Display font" description="Headlines in the editor." options={fontOptions} value={font} onValueChange={setFont} renderOption={(o) => } renderValue={(o) => } />

The quick brown fox jumps over the lazy dog.

); } export default CellSelectDemo; 33:T834,import type { BlockMeta } from "../../../lib/block-meta"; export const cellSelectMeta: BlockMeta = { slug: "cell-select", title: "Cell select", description: "A settings row with a Kobra select as its trailing control: click anywhere on the row to open it. Controlled, custom trigger value and option rows (font preview), disabled, default and secondary variants, grouped.", group: "forms", kobraDeps: ["item", "select", "badge"], files: [ "blocks/forms/cell-select/cell-select.tsx", "blocks/forms/_shared/settings-cell.tsx", ], props: [ { name: "label", type: "ReactNode", description: "Row title; also names the select." }, { name: "description", type: "ReactNode", description: "Quiet line under the label; wired to aria-describedby." }, { name: "icon", type: "ReactNode", description: "Leading glyph." }, { name: "options", type: "{ value; label; description?; disabled? }[]", description: "Choices." }, { name: "value", type: "string", description: "Controlled value." }, { name: "defaultValue", type: "string", description: "Initial value when uncontrolled." }, { name: "onValueChange", type: "(value: string) => void", description: "Called when a different option is chosen." }, { name: "renderValue", type: "(option) => ReactNode", description: "Custom closed-trigger content." }, { name: "renderOption", type: "(option) => ReactNode", description: "Custom row content in the open list." }, { name: "placeholder", type: "string", default: "'Choose'", description: "Shown while nothing is selected." }, { name: "disabled", type: "boolean", description: "Dims the row and blocks opening." }, { name: "align", type: "'start' | 'center' | 'end'", default: "'end'", description: "List alignment against the trigger." }, { name: "variant", type: "'default' | 'secondary'", default: "group's, else 'default'", description: "Outlined or tinted surface." }, { name: "className", type: "string", description: "Layout slotting on the root." }, ], tags: ["settings", "select", "item", "form"], 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":"/#forms","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Forms"}]}],["$","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":"Cell select"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Cell select"}],["$","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 settings row with a Kobra select as its trailing control: click anywhere on the row to open it. Controlled, custom trigger value and option rows (font preview), disabled, default and secondary variants, grouped."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"cell-select","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/forms/cell-select/cell-select.tsx","code":"$30"},{"path":"blocks/forms/_shared/settings-cell.tsx","code":"$31"},{"path":"blocks/forms/cell-select/demo.tsx","code":"$32"},{"path":"blocks/forms/cell-select/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]