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:T626,"use client"; import type { ReactNode } from "react"; import { Switch } from "@/components/ui/switch"; import { SettingsCellRow, type SettingsCellVariant } from "../_shared/settings-cell"; export type CellSwitchProps = { label: ReactNode; description?: ReactNode; icon?: ReactNode; /** A string renders a badge beside the label: the feature-announcement row. */ badge?: ReactNode; checked?: boolean; defaultChecked?: boolean; onCheckedChange?: (checked: boolean) => void; disabled?: boolean; /** Follows the surrounding SettingsGroup when omitted. */ variant?: SettingsCellVariant; className?: string; }; /** * A settings row with a switch. The whole row is the label, so a click, a tap or a label * activation anywhere on it toggles. Controlled with `checked` / `onCheckedChange`. */ export function CellSwitch({ label, description, icon, badge, checked, defaultChecked, onCheckedChange, disabled, variant, className, }: CellSwitchProps) { return ( ( )} /> ); } export default CellSwitch; 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:Tf2b,"use client"; import { useState } from "react"; import { IconBell, IconMail, IconMessage, IconSparkles, IconTruckDelivery } from "@tabler/icons-react"; import { DemoPage, DemoSection } from "../_shared/demo-section"; import { SettingsGroup } from "../_shared/settings-cell"; import { betaFeature, notificationSettings, settingsGroups } from "../_fixtures"; import { CellSwitch } from "./cell-switch"; const icons = { orders: IconTruckDelivery, drops: IconBell, digest: IconMail, sms: IconMessage } as const; export function CellSwitchDemo() { const [on, setOn] = useState(true); return ( } label="Push notifications" description="Alerts on this device." defaultChecked /> } label="Marketing email" description="Occasional product news." checked={on} onCheckedChange={setOn} />

Parent state: {on ? "on" : "off"}

} label="Text messages" description="Needs a verified phone number." disabled /> } label="Account alerts" description="Managed by your organization." defaultChecked disabled />

{notificationSettings.map((s) => { const Icon = icons[s.id as keyof typeof icons]; return ( } label={s.label} description={s.description} defaultChecked={s.defaultChecked} disabled={s.disabled} /> ); })} {notificationSettings.slice(0, 3).map((s) => { const Icon = icons[s.id as keyof typeof icons]; return } label={s.label} description={s.description} defaultChecked={s.defaultChecked} />; })} } label={betaFeature.label} description={betaFeature.description} badge={betaFeature.badge} /> } label="Smart summaries" description="Condensed order timelines." badge="Beta" defaultChecked /> ); } export default CellSwitchDemo; 33:T6d5,import type { BlockMeta } from "../../../lib/block-meta"; export const cellSwitchMeta: BlockMeta = { slug: "cell-switch", title: "Cell switch", description: "A settings row with a Kobra switch: icon, label, description, the whole row acts as the label. Controlled or not, disabled, default and secondary variants, grouped with hairlines, with a feature-announcement badge.", group: "forms", kobraDeps: ["item", "switch", "badge"], files: [ "blocks/forms/cell-switch/cell-switch.tsx", "blocks/forms/_shared/settings-cell.tsx", ], props: [ { name: "label", type: "ReactNode", description: "Row title; also the accessible name of the switch." }, { name: "description", type: "ReactNode", description: "One quiet line under the label; wired to aria-describedby." }, { name: "icon", type: "ReactNode", description: "Leading glyph, shown in a tinted tile when there is a description." }, { name: "badge", type: "string | ReactNode", description: "A string renders a Kobra badge beside the label (feature announcement)." }, { name: "checked", type: "boolean", description: "Controlled state." }, { name: "defaultChecked", type: "boolean", description: "Initial state when uncontrolled." }, { name: "onCheckedChange", type: "(checked: boolean) => void", description: "Called on every toggle." }, { name: "disabled", type: "boolean", description: "Dims the row and blocks toggling." }, { 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", "switch", "toggle", "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 switch"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Cell switch"}],["$","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 switch: icon, label, description, the whole row acts as the label. Controlled or not, disabled, default and secondary variants, grouped with hairlines, with a feature-announcement badge."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"cell-switch","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/forms/cell-switch/cell-switch.tsx","code":"$30"},{"path":"blocks/forms/_shared/settings-cell.tsx","code":"$31"},{"path":"blocks/forms/cell-switch/demo.tsx","code":"$32"},{"path":"blocks/forms/cell-switch/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]