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:T4ec1,"use client"; import * as React from "react"; import { closestCenter, DndContext, DragOverlay, KeyboardSensor, MouseSensor, pointerWithin, rectIntersection, TouchSensor, useDroppable, useSensor, useSensors, type Announcements, type CollisionDetection, type DragEndEvent, type DragOverEvent, type DragStartEvent, type UniqueIdentifier, } from "@dnd-kit/core"; import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { IconPlus } from "@tabler/icons-react"; import { useReducedMotion } from "motion/react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { ScrollArea } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; /** Column id to the ordered ids of its cards. */ export type KanbanValue = Record; export type KanbanSize = "sm" | "default" | "lg"; export type KanbanVariant = "default" | "plain"; export type KanbanTone = "default" | "info" | "warning" | "success" | "error"; type CardEntry = { label: string; children: React.ReactNode }; type KanbanContextValue = { value: KanbanValue; size: KanbanSize; variant: KanbanVariant; activeId: string | null; overColumn: string | null; cards: React.RefObject>; columns: React.RefObject>; reduced: boolean; onCardCreate?: (columnId: string, title: string) => void; }; const KanbanContext = React.createContext(null); function useKanban() { const ctx = React.useContext(KanbanContext); if (!ctx) throw new Error("Kanban parts must be rendered inside ."); return ctx; } type ColumnContextValue = { id: string; tone?: KanbanTone; limit?: number }; const ColumnContext = React.createContext(null); function useColumn() { const ctx = React.useContext(ColumnContext); if (!ctx) throw new Error("Column parts must be rendered inside ."); return ctx; } function useControllable(value: T | undefined, defaultValue: T, onChange?: (v: T) => void) { const [inner, setInner] = React.useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : inner; const set = React.useCallback( (next: T) => { if (!controlled) setInner(next); onChange?.(next); }, [controlled, onChange], ); return [current, set] as const; } /* -------------------------------------------------------------------------- */ /* Root */ /* -------------------------------------------------------------------------- */ export type KanbanProps = Omit, "defaultValue" | "onChange"> & { value?: KanbanValue; defaultValue?: KanbanValue; onValueChange?: (value: KanbanValue) => void; /** Called when a column's add-card form is submitted. */ onCardCreate?: (columnId: string, title: string) => void; size?: KanbanSize; /** `plain` drops the column panels (a Notion-style board). */ variant?: KanbanVariant; disabled?: boolean; }; function Kanban({ className, value: valueProp, defaultValue, onValueChange, onCardCreate, size = "default", variant = "default", disabled, children, ...props }: KanbanProps) { const [value, setValue] = useControllable(valueProp, defaultValue ?? {}, onValueChange); const valueRef = React.useRef(value); React.useLayoutEffect(() => { valueRef.current = value; }); const snapshot = React.useRef(value); const cards = React.useRef(new Map()); const columns = React.useRef(new Map()); const [activeId, setActiveId] = React.useState(null); const [overColumn, setOverColumn] = React.useState(null); const [active, setActive] = React.useState(null); const reduced = useReducedMotion() ?? false; const dndId = React.useId(); const sensors = useSensors( useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: { delay: 220, tolerance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), ); const containerOf = (id: UniqueIdentifier): string | undefined => { const v = valueRef.current; if (String(id) in v) return String(id); return Object.keys(v).find((k) => v[k].includes(String(id))); }; const collision: CollisionDetection = (args) => { const v = valueRef.current; const pointer = pointerWithin(args); const hits = pointer.length ? pointer : rectIntersection(args); if (!hits.length) return []; const column = hits.find((h) => String(h.id) in v) ?? (() => { const cardHit = hits[0]; const c = containerOf(cardHit.id); return c ? { id: c } : undefined; })(); if (!column) return hits; const inside = args.droppableContainers.filter( (d) => !(String(d.id) in v) && containerOf(d.id) === String(column.id) && d.id !== args.active.id, ); if (!inside.length) return [{ id: column.id }]; return closestCenter({ ...args, droppableContainers: inside }); }; const label = (id: UniqueIdentifier) => cards.current.get(String(id))?.label ?? String(id); const colLabel = (id: string | undefined) => (id ? (columns.current.get(id) ?? id) : "the board"); const where = (id: UniqueIdentifier, over: UniqueIdentifier | undefined) => { const c = containerOf(over ?? id); const list = c ? valueRef.current[c] : []; const overIsColumn = over !== undefined && String(over) in valueRef.current; const idx = overIsColumn ? list.length : Math.max(list.indexOf(String(over ?? id)), 0); return `position ${idx + 1} of ${Math.max(list.length, 1)} in ${colLabel(c)}`; }; const announcements: Announcements = { onDragStart: ({ active }) => `Picked up ${label(active.id)}, ${where(active.id, undefined)}.`, onDragOver: ({ active, over }) => over ? `${label(active.id)} is now over ${where(active.id, over.id)}.` : `${label(active.id)} is not over a column.`, onDragEnd: ({ active, over }) => over ? `Dropped ${label(active.id)} at ${where(active.id, over.id)}.` : `Dropped ${label(active.id)}, no change.`, onDragCancel: ({ active }) => `Move canceled. ${label(active.id)} returned to ${colLabel(containerOf(active.id))}.`, }; function onDragStart({ active }: DragStartEvent) { snapshot.current = valueRef.current; setActive(cards.current.get(String(active.id)) ?? null); setActiveId(String(active.id)); } function onDragOver({ active, over }: DragOverEvent) { if (!over) return setOverColumn(null); const from = containerOf(active.id); const to = containerOf(over.id); setOverColumn(to ?? null); if (!from || !to || from === to) return; const v = valueRef.current; const toItems = v[to]; const overIsColumn = String(over.id) in v; const overIndex = overIsColumn ? toItems.length : toItems.indexOf(String(over.id)); const translated = active.rect.current.translated; const below = !overIsColumn && translated ? translated.top > over.rect.top + over.rect.height / 2 : false; const index = overIsColumn ? toItems.length : overIndex + (below ? 1 : 0); const next = toItems.filter((i) => i !== String(active.id)); next.splice(index, 0, String(active.id)); setValue({ ...v, [from]: v[from].filter((i) => i !== String(active.id)), [to]: next }); } function onDragEnd({ active, over }: DragEndEvent) { setActiveId(null); setActive(null); setOverColumn(null); if (!over) return; const v = valueRef.current; const col = containerOf(active.id); const overCol = containerOf(over.id); if (!col || col !== overCol) return; const oldIndex = v[col].indexOf(String(active.id)); const newIndex = String(over.id) in v ? v[col].length - 1 : v[col].indexOf(String(over.id)); if (oldIndex !== newIndex && newIndex >= 0) setValue({ ...v, [col]: arrayMove(v[col], oldIndex, newIndex) }); } function onDragCancel() { setActiveId(null); setActive(null); setOverColumn(null); setValue(snapshot.current); } const ctx = React.useMemo( () => ({ value, size, variant, activeId, overColumn, cards, columns, reduced, onCardCreate }), [value, size, variant, activeId, overColumn, reduced, onCardCreate], ); return (

{children}

{active ? (

{active.children}

) : null} ); } /* -------------------------------------------------------------------------- */ /* Column */ /* -------------------------------------------------------------------------- */ export type KanbanColumnProps = React.ComponentProps<"section"> & { /** Column key in `value`. */ id: string; /** Plain-text name, used for the section label and screen reader announcements. */ label: string; tone?: KanbanTone; /** Soft work-in-progress limit. The count turns warning when exceeded. */ limit?: number; }; function KanbanColumn({ className, id, label, tone, limit, children, ...props }: KanbanColumnProps) { const { overColumn, columns, activeId } = useKanban(); columns.current.set(id, label); const ctx = React.useMemo(() => ({ id, tone, limit }), [id, tone, limit]); return (

{children}

); } function KanbanColumnHeader({ className, ...props }: React.ComponentProps<"div">) { return

; } const toneDot: Record = { default: "bg-muted-foreground/60", info: "bg-info", warning: "bg-warning", success: "bg-success", error: "bg-error", }; function KanbanColumnTitle({ className, children, ...props }: React.ComponentProps<"h3">) { const { tone } = useColumn(); return (

{tone ? : null} {children}

); } function KanbanColumnCount({ className, ...props }: React.ComponentProps<"span">) { const { value } = useKanban(); const { id, limit } = useColumn(); const count = value[id]?.length ?? 0; const over = limit !== undefined && count > limit; return ( {count} {limit !== undefined ? /{limit} : null} ); } function KanbanColumnBody({ className, children, ...props }: React.ComponentProps<"div">) { const { value } = useKanban(); const { id } = useColumn(); const { setNodeRef } = useDroppable({ id }); const items = value[id] ?? []; return (

{children} {items.length === 0 ? (

Drop cards here

) : null}

); } /* -------------------------------------------------------------------------- */ /* Card */ /* -------------------------------------------------------------------------- */ const cardShell = cn( "relative grid gap-2 rounded-lg bg-card text-card-foreground shadow-xs ring-1 ring-foreground/10 outline-none select-none", "group-data-[size=sm]/kanban:p-2 group-data-[size=sm]/kanban:text-xs group-data-[size=default]/kanban:p-3 group-data-[size=lg]/kanban:p-4", ); export type KanbanCardProps = React.ComponentProps<"div"> & { /** Card key inside its column list in `value`. */ id: string; /** Plain-text name for screen reader announcements. Defaults to the id. */ label?: string; disabled?: boolean; }; function KanbanCard({ className, id, label, disabled, children, style, ...props }: KanbanCardProps) { const { cards, reduced } = useKanban(); const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled, transition: reduced ? null : { duration: 180, easing: "cubic-bezier(0.23, 1, 0.32, 1)" }, }); React.useLayoutEffect(() => { cards.current.set(id, { label: label ?? id, children }); }); return (

{children}

); } function KanbanCardTitle({ className, ...props }: React.ComponentProps<"div">) { return

; } function KanbanCardDescription({ className, ...props }: React.ComponentProps<"div">) { return

; } function KanbanCardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } /* -------------------------------------------------------------------------- */ /* Add card */ /* -------------------------------------------------------------------------- */ function KanbanAddCard({ className, children = "Add card", ...props }: Omit, "onClick">) { const { onCardCreate } = useKanban(); const { id } = useColumn(); const [open, setOpen] = React.useState(false); const [title, setTitle] = React.useState(""); const inputRef = React.useRef(null); const buttonRef = React.useRef(null); const close = () => { setOpen(false); setTitle(""); requestAnimationFrame(() => buttonRef.current?.focus()); }; const submit = (e: React.FormEvent) => { e.preventDefault(); const t = title.trim(); if (!t) return; onCardCreate?.(id, t); setTitle(""); inputRef.current?.focus(); }; if (!open) { return ( ); } return ( ); } export { Kanban, KanbanColumn, KanbanColumnHeader, KanbanColumnTitle, KanbanColumnCount, KanbanColumnBody, KanbanCard, KanbanCardTitle, KanbanCardDescription, KanbanCardFooter, KanbanAddCard, }; 31:T1a06,"use client"; import * as React from "react"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { IconMessage } from "@tabler/icons-react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Kanban, KanbanAddCard, KanbanCard, KanbanCardDescription, KanbanCardFooter, KanbanCardTitle, KanbanColumn, KanbanColumnBody, KanbanColumnCount, KanbanColumnHeader, KanbanColumnTitle, type KanbanSize, type KanbanValue, } from "./kanban"; import { notionCards, notionColumns, notionOrder, projectCards, projectColumns, projectOrder, type BoardCard, type BoardPriority, } from "../_fixtures-b"; const priorityVariant: Record = { low: "neutral", medium: "amber", high: "destructive", }; function ProjectCard({ card, size }: { card: BoardCard; size: KanbanSize }) { return ( <>

{card.title}

{card.description && size !== "sm" ? {card.description} : null}

{card.priority ? ( {card.priority} ) : null} {card.labels?.map((l) => ( {l} ))}

{card.due ? Due {card.due} : null} {card.comments ? ( {card.comments} ) : null} {card.assignee ? ( {card.assignee.initials} ) : null} ); } function ProjectBoard() { const [size, setSize] = React.useState("default"); const [value, setValue] = React.useState(projectOrder); const [extra, setExtra] = React.useState>({}); const create = (columnId: string, title: string) => { const id = `new-${Object.keys(extra).length + 1}`; setExtra((e) => ({ ...e, [id]: { id, title, priority: "low" } })); setValue((v) => ({ ...v, [columnId]: [...v[columnId], id] })); }; const lookup = (id: string) => projectCards[id] ?? extra[id]; return (

Size n[0] && setSize(n[0] as KanbanSize)}> {(["sm", "default", "lg"] as const).map((s) => ( {s} ))}

{projectColumns.map((col) => ( {col.title} {value[col.id].map((id) => { const card = lookup(id); return ( ); })} ))}

); } function NotionBoard() { const [value, setValue] = React.useState(notionOrder); const [extra, setExtra] = React.useState>({}); const create = (columnId: string, title: string) => { const id = `nn-${Object.keys(extra).length + 1}`; setExtra((e) => ({ ...e, [id]: { id, title, props: [{ label: "Owner", value: "You" }] } })); setValue((v) => ({ ...v, [columnId]: [...v[columnId], id] })); }; return ( {notionColumns.map((col) => ( {col.title} {value[col.id].map((id) => { const card = notionCards[id] ?? extra[id]; return ( {card.title}

{p.label}: {p.value}

); })} New ))} ); } export function KanbanDemo() { return ( ); } export default KanbanDemo; 32:T712,import type { BlockMeta } from "../../../lib/block-meta"; export const kanbanMeta: BlockMeta = { slug: "kanban", title: "Kanban", description: "Drag-and-drop board on dnd-kit. Cards move within and between columns with a dashed drop slot, keyboard move (space to lift, arrows, space to drop, escape to cancel) with live-region announcements, add-card form, count and WIP limit, three sizes. Demos: project board and Notion-style board.", group: "data", kobraDeps: ["button", "input", "scroll-area"], files: ["blocks/data/kanban/kanban.tsx"], props: [ { name: "value", type: "Record", description: "Column id to ordered card ids. Controlled." }, { name: "defaultValue", type: "Record", description: "Uncontrolled initial value." }, { name: "onValueChange", type: "(value) => void", description: "Fires while a card is dragged across columns and on drop. Escape restores the pre-drag value through it." }, { name: "onCardCreate", type: "(columnId: string, title: string) => void", description: "Add-card form submit." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Column width and card padding." }, { name: "variant", type: "'default' | 'plain'", default: "'default'", description: "plain drops the column panels." }, { name: "disabled", type: "boolean", description: "Turns dragging off." }, { name: "KanbanColumn id / label / tone / limit", type: "string / string / tone / number", description: "label feeds announcements; limit turns the count warning when exceeded." }, { name: "KanbanCard id / label", type: "string / string", description: "id is the card key in value; label is read aloud." }, ], tags: ["kanban", "board", "dnd", "drag", "data"], 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":"Kanban"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Kanban"}],["$","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":"Drag-and-drop board on dnd-kit. Cards move within and between columns with a dashed drop slot, keyboard move (space to lift, arrows, space to drop, escape to cancel) with live-region announcements, add-card form, count and WIP limit, three sizes. Demos: project board and Notion-style board."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"kanban","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/kanban/kanban.tsx","code":"$30"},{"path":"blocks/data/kanban/demo.tsx","code":"$31"},{"path":"blocks/data/kanban/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]