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:Ta83,"use client"; import { useState, type ReactNode } from "react"; import { Slider } from "@/components/ui/slider"; import { SettingsCellRow, type SettingsCellVariant } from "../_shared/settings-cell"; export type CellSliderProps = { label: ReactNode; description?: ReactNode; icon?: ReactNode; badge?: ReactNode; min?: number; max?: number; /** Granularity. `1` gives an integer slider; the readout never shows more digits than the step. */ step?: number; value?: number; defaultValue?: number; onValueChange?: (value: number) => void; /** Text for the readout beside the label. Default: the number, trimmed to the step's precision. */ formatValue?: (value: number) => string; /** Hide the readout when the surrounding label already says it. */ showValue?: boolean; disabled?: boolean; variant?: SettingsCellVariant; className?: string; }; const digitsOf = (step: number) => (Number.isInteger(step) ? 0 : (String(step).split(".")[1]?.length ?? 0)); /** * A settings row with a Kobra slider under it and a tabular readout on the right. * `value` / `onValueChange` for controlled use; arrow keys step, Home and End jump. */ export function CellSlider({ label, description, icon, badge, min = 0, max = 100, step = 1, value, defaultValue, onValueChange, formatValue, showValue = true, disabled, variant, className, }: CellSliderProps) { const [inner, setInner] = useState(defaultValue ?? min); const current = value ?? inner; const format = formatValue ?? ((v: number) => v.toFixed(digitsOf(step))); return ( {format(current)} ) : undefined } footer={({ labelId, descriptionId }) => ( { const n = Array.isArray(next) ? next[0]! : (next as number); setInner(n); onValueChange?.(n); }} /> )} /> ); } export default CellSlider; 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:Ta4e,"use client"; import { useState } from "react"; import { IconBrightness, IconLetterCase, IconLayoutList, IconVolume } from "@tabler/icons-react"; import { DemoPage, DemoSection } from "../_shared/demo-section"; import { SettingsGroup } from "../_shared/settings-cell"; import { settingsGroups, sliderSettings } from "../_fixtures"; import { CellSlider } from "./cell-slider"; const percent = (v: number) => `${Math.round(v * 100)}%`; export function CellSliderDemo() { const [size, setSize] = useState(sliderSettings.textSize.defaultValue); return ( } {...sliderSettings.volume} formatValue={(v) => `${v}%`} /> } {...sliderSettings.textSize} value={size} onValueChange={setSize} formatValue={(v) => `${v} px`} />

Body copy at {size} px.

} {...sliderSettings.brightness} formatValue={(v) => `${v}%`} disabled />

} {...sliderSettings.volume} formatValue={(v) => `${v}%`} /> } {...sliderSettings.density} formatValue={percent} /> } {...sliderSettings.brightness} formatValue={(v) => `${v}%`} /> ); } export default CellSliderDemo; 33:T7c7,import type { BlockMeta } from "../../../lib/block-meta"; export const cellSliderMeta: BlockMeta = { slug: "cell-slider", title: "Cell slider", description: "A settings row with a Kobra slider under the label and a tabular readout on the right. Controlled, integer or fractional step, custom value format, disabled, default and secondary variants, grouped.", group: "forms", kobraDeps: ["item", "slider", "badge"], files: [ "blocks/forms/cell-slider/cell-slider.tsx", "blocks/forms/_shared/settings-cell.tsx", ], props: [ { name: "label", type: "ReactNode", description: "Row title; also names the slider." }, { name: "description", type: "ReactNode", description: "Quiet line under the label; wired to aria-describedby." }, { name: "icon", type: "ReactNode", description: "Leading glyph." }, { name: "min", type: "number", default: "0", description: "Lower bound." }, { name: "max", type: "number", default: "100", description: "Upper bound." }, { name: "step", type: "number", default: "1", description: "Granularity; 1 is an integer slider." }, { name: "value", type: "number", description: "Controlled value." }, { name: "defaultValue", type: "number", description: "Initial value when uncontrolled." }, { name: "onValueChange", type: "(value: number) => void", description: "Called as the thumb moves." }, { name: "formatValue", type: "(value: number) => string", description: "Readout formatting." }, { name: "showValue", type: "boolean", default: "true", description: "Show the readout beside the label." }, { name: "disabled", type: "boolean", description: "Dims the row and locks the thumb." }, { 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", "slider", "range", "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 slider"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Cell slider"}],["$","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 slider under the label and a tabular readout on the right. Controlled, integer or fractional step, custom value format, disabled, default and secondary variants, grouped."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"cell-slider","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/forms/cell-slider/cell-slider.tsx","code":"$30"},{"path":"blocks/forms/_shared/settings-cell.tsx","code":"$31"},{"path":"blocks/forms/cell-slider/demo.tsx","code":"$32"},{"path":"blocks/forms/cell-slider/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]