2d: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"],""] 2e: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"] 2f: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"] 30: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"] 31:T1f9c,"use client"; import { useRef, useState, type CSSProperties, type MouseEvent, type ReactNode } from "react"; import { IconCheck } from "@tabler/icons-react"; import { COLOR_WHEEL, ColorPalette } from "@/components/ui/color-palette"; import { ColorPicker } from "@/components/ui/color-picker"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import { SettingsCellRow, type SettingsCellVariant } from "../_shared/settings-cell"; import { toHex } from "../_shared/color"; export type CellColorPreset = { value: string; label: string }; export type CellColorPickerProps = { label: ReactNode; description?: ReactNode; icon?: ReactNode; badge?: ReactNode; /** Any CSS color: hex or oklch. */ value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Quick presets shown as a row of dots under the label. */ presets?: CellColorPreset[]; /** Show the hex readout beside the swatch. */ showValue?: boolean; disabled?: boolean; variant?: SettingsCellVariant; className?: string; }; /* Same geometry as Kobra's wheel, so a click on a disc can select instead of copy. */ const RIM_RADIUS = 0.4; const RING = { 0: 0, 1: 0.3405, 2: 0.5986 } as const; const DISC_R = 0.2366 * RIM_RADIUS * 100; function discAt(clientX: number, clientY: number, box: DOMRect): string | null { const x = ((clientX - box.left) / box.width) * 100 - 50; const y = ((clientY - box.top) / box.height) * 100 - 50; for (let i = COLOR_WHEEL.length - 1; i >= 0; i -= 1) { const s = COLOR_WHEEL[i]!; const dist = RIM_RADIUS * 100 * RING[s.ring]; const a = ((s.angle - 90) * Math.PI) / 180; if (Math.hypot(x - Math.cos(a) * dist, y - Math.sin(a) * dist) <= DISC_R) return s.color; } return null; } const swatchVar = (color: string) => ({ "--cell-color": color }) as CSSProperties; /** * A settings row with a color swatch. The swatch opens a Kobra popover: the color palette for * quick picks, the color picker for any custom value. Optional preset dots sit under the label. */ export function CellColorPicker({ label, description, icon, badge, value, defaultValue = "oklch(0.6 0.18 255)", onValueChange, presets, showValue = true, disabled, variant, className, }: CellColorPickerProps) { const [inner, setInner] = useState(defaultValue); const [open, setOpen] = useState(false); const [tab, setTab] = useState<"palette" | "custom">("palette"); const wasOpen = useRef(false); const current = value ?? inner; const hex = toHex(current); const preset = presets?.find((p) => toHex(p.value) === hex); const set = (css: string) => { setInner(css); onValueChange?.(css); }; const openFromRow = (event: MouseEvent) => { if (disabled || wasOpen.current) return; const target = event.target as Element; if (!event.currentTarget.contains(target)) return; if (target.closest('[data-slot="cell-color-trigger"], [data-slot="cell-color-presets"]')) return; setOpen(true); }; return ( { wasOpen.current = open; }} onClick={openFromRow} control={({ labelId, descriptionId }) => (

{showValue ? ( {hex} ) : null} next[0] && setTab(next[0] as "palette" | "custom")} className="w-full *:flex-1" > Palette Custom {tab === "palette" ? (

{ const picked = discAt(event.clientX, event.clientY, event.currentTarget.getBoundingClientRect()); if (picked) set(picked); }} />

) : ( )}

)} footer={ presets?.length ? () => (

{presets.map((p) => { const on = toHex(p.value) === hex; return ( ); })}

) : undefined } /> ); } export default CellColorPicker; 32: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} ); } 33:T68e,/** Small color helpers for the color cell: CSS color (hex or oklch) to hex, and back-compat checks. */ const clamp01 = (n: number) => Math.min(1, Math.max(0, n)); function encode(linear: number) { const v = clamp01(linear); return v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055; } function byte(n: number) { return Math.round(clamp01(n) * 255) .toString(16) .padStart(2, "0"); } export function oklchToHex(l: number, c: number, hDeg: number): string { const h = (hDeg * Math.PI) / 180; const a = c * Math.cos(h); const b = c * Math.sin(h); const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3; const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3; const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3; const r = 4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_; const g = -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_; const bl = -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_; return `#${byte(encode(r))}${byte(encode(g))}${byte(encode(bl))}`; } /** `#rgb`, `#rrggbb` or `oklch(L C H)` to lowercase `#rrggbb`. Anything else falls back to the given default. */ export function toHex(css: string, fallback = "#7f56d9"): string { const text = css.trim().toLowerCase(); const hex = /^#([\da-f]{3}|[\da-f]{6})$/.exec(text); if (hex) { const v = hex[1]!; return `#${v.length === 3 ? [...v].map((c) => c + c).join("") : v}`; } const ok = /^oklch$\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(?:deg)?\s*(?:\/[^)]*)?$$/.exec(text); if (ok) { const l = Number(ok[1]) / (ok[2] ? 100 : 1); return oklchToHex(l, Number(ok[3]), Number(ok[4])); } return fallback; } 34:Tb2e,"use client"; import { useState } from "react"; import { IconPalette, IconBrush, IconSun } from "@tabler/icons-react"; import { DemoPage, DemoSection } from "../_shared/demo-section"; import { SettingsGroup } from "../_shared/settings-cell"; import { accentColor, colorPresets, settingsGroups } from "../_fixtures"; import { CellSwitch } from "../cell-switch/cell-switch"; import { CellColorPicker } from "./cell-color-picker"; export function CellColorPickerDemo() { const [color, setColor] = useState(colorPresets[6]!.value); return ( } label={accentColor.label} description={accentColor.description} /> } label={accentColor.label} description={accentColor.description} presets={colorPresets} defaultValue={colorPresets[3]!.value} /> } label="Highlight color" description="Held in the parent." presets={colorPresets} value={color} onValueChange={setColor} />

Parent state: {color}

} label="Accent color" description="Set by your organization." presets={colorPresets.slice(0, 5)} disabled />

} label="Accent color" description="Buttons, links and focus rings." defaultValue={colorPresets[5]!.value} /> } label="Highlight color" description="Selected text and search hits." defaultValue={colorPresets[2]!.value} /> } label="Match system theme" description="Follow light and dark automatically." defaultChecked /> ); } export default CellColorPickerDemo; 35:T7dc,import type { BlockMeta } from "../../../lib/block-meta"; export const cellColorPickerMeta: BlockMeta = { slug: "cell-color-picker", title: "Cell color picker", description: "A settings row with a color swatch. The swatch opens a Kobra popover with the color palette for quick picks and the color picker for custom values; optional preset dots sit under the label. Controlled, disabled, default and secondary variants, grouped.", group: "forms", kobraDeps: ["item", "color-palette", "color-picker", "popover", "toggle-group", "badge"], files: [ "blocks/forms/cell-color-picker/cell-color-picker.tsx", "blocks/forms/_shared/settings-cell.tsx", "blocks/forms/_shared/color.ts", ], props: [ { name: "label", type: "ReactNode", description: "Row title; also names the swatch button." }, { name: "description", type: "ReactNode", description: "Quiet line under the label." }, { name: "icon", type: "ReactNode", description: "Leading glyph." }, { name: "value", type: "string", description: "Controlled CSS color (hex or oklch)." }, { name: "defaultValue", type: "string", default: "'oklch(0.6 0.18 255)'", description: "Initial color when uncontrolled." }, { name: "onValueChange", type: "(value: string) => void", description: "Called with the new color (hex from the palette and picker, or the preset's own string)." }, { name: "presets", type: "{ value; label }[]", description: "Preset dots under the label; the matching one is checked." }, { name: "showValue", type: "boolean", default: "true", description: "Hex readout beside the swatch." }, { name: "disabled", type: "boolean", description: "Dims the row and blocks opening." }, { 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", "color", "popover", "item", "form"], status: "ready", }; 24:["$","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":["$","$L2d",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":["$","$L2d",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 color picker"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Cell color picker"}],["$","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 color swatch. The swatch opens a Kobra popover with the color palette for quick picks and the color picker for custom values; optional preset dots sit under the label. Controlled, disabled, default and secondary variants, grouped."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"cell-color-picker","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/forms/cell-color-picker/cell-color-picker.tsx","code":"$31"},{"path":"blocks/forms/_shared/settings-cell.tsx","code":"$32"},{"path":"blocks/forms/_shared/color.ts","code":"$33"},{"path":"blocks/forms/cell-color-picker/demo.tsx","code":"$34"},{"path":"blocks/forms/cell-color-picker/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]