@giddaa-housing/ui 3.9.0 → 3.10.0

package/css/theme.css

@@ -143,6 +143,7 @@
 	--animate-round-sonar-glow: round-sonar-glow 1.5s ease-out infinite;
 	--animate-sonar-wave: sonar-wave 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
 	--animate-spin-slow: spin 3s linear infinite;
+	--animate-kanban-card-flash: kanban-card-flash 0.7s ease-out;
 }
 
 :root {
@@ -303,3 +304,17 @@
 		opacity: 0;
 	}
 }
+
+/* Post-move flash: a moved card holds a focus-coloured ring for a beat, then
+   lets it fade, so the eye can find where it landed. A colour fade rather than
+   motion, so it is not silenced under prefers-reduced-motion — the "where did
+   it go" problem is the same for everyone. */
+@keyframes kanban-card-flash {
+	0%,
+	40% {
+		box-shadow: 0 0 0 2px var(--color-line-focus);
+	}
+	100% {
+		box-shadow: 0 0 0 2px transparent;
+	}
+}

package/dist/accordion.js

@@ -25,11 +25,11 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("group/accordion-trigger flex w-full items-center gap-3 px-4 sm:px-5 py-5.5 aria-expanded:pb-2 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-[padding] aria-disabled:pointer-events-none aria-disabled:opacity-50", className),
+			className: cn("group/accordion-trigger flex w-full items-start gap-3 px-4 sm:px-5 py-5.5 aria-expanded:pb-2 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-[padding] aria-disabled:pointer-events-none aria-disabled:opacity-50", className),
 			...props,
 			children: [/* @__PURE__ */ jsx(ChevronRight, {
 				"data-slot": "accordion-trigger-icon",
-				className: "pointer-events-none size-5 shrink-0 text-fg-primary transition-[rotate] duration-200 ease-out motion-reduce:transition-none group-aria-expanded/accordion-trigger:rotate-90"
+				className: "pointer-events-none w-5 h-(--text-gdt-md--line-height) shrink-0 text-fg-primary transition-[rotate] duration-200 ease-out motion-reduce:transition-none group-aria-expanded/accordion-trigger:rotate-90"
 			}), children]
 		})
 	});

package/dist/calendar.js

@@ -2,7 +2,7 @@
 import { ChevronLeft, ChevronRight } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
-import { _ as ComboboxValue, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, m as ComboboxList, o as ComboboxContent, s as ComboboxEmpty, t as Combobox } from "./combobox-Jfz8hryr.js";
+import { _ as ComboboxValue, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, m as ComboboxList, o as ComboboxContent, s as ComboboxEmpty, t as Combobox } from "./combobox-pFh77rhm.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";

package/dist/{combobox-Jfz8hryr.js → combobox-pFh77rhm.js}

@@ -147,8 +147,12 @@ const responsiveComboboxPopupInputSizes = {
 * trigger's open-state treatment applies: no pill, no focus ring competing
 * with the popup's own border, and a radius that belongs to the list it sits
 * above rather than to a field on the page.
+*
+* `shrink-0` because it shares a flex column with the list, which is the part
+* meant to give way. Without it a long list squeezes the search box down to a
+* sliver — the field a reader needs most is the first thing to disappear.
 */
-const comboboxPopupInputVariants = cva("w-auto", {
+const comboboxPopupInputVariants = cva("w-auto shrink-0", {
 	variants: { size: {
 		sm: "rounded-md",
 		md: "rounded-lg",

package/dist/combobox.js

@@ -1,3 +1,3 @@
 "use client";
-import { _ as ComboboxValue, a as ComboboxCollection, b as useComboboxVirtualizer, c as ComboboxFooter, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, h as ComboboxSeparator, i as ComboboxChipsInput, l as ComboboxGroup, m as ComboboxList, n as ComboboxChip, o as ComboboxContent, p as ComboboxLabel, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxHeader, v as ComboboxVirtualizedList, y as useComboboxAnchor } from "./combobox-Jfz8hryr.js";
+import { _ as ComboboxValue, a as ComboboxCollection, b as useComboboxVirtualizer, c as ComboboxFooter, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, h as ComboboxSeparator, i as ComboboxChipsInput, l as ComboboxGroup, m as ComboboxList, n as ComboboxChip, o as ComboboxContent, p as ComboboxLabel, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxHeader, v as ComboboxVirtualizedList, y as useComboboxAnchor } from "./combobox-pFh77rhm.js";
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ComboboxVirtualizedList, useComboboxAnchor, useComboboxVirtualizer };

package/dist/date-picker.d.ts

@@ -1,5 +1,5 @@
 import { InputSizeValue } from "./input.js";
-import { t as PickerPlacementProps } from "./picker-qxWi9wZ1.js";
+import { t as PickerPlacementProps } from "./picker-QtFHPRqg.js";
 import * as React from "react";
 import { DateRange, Matcher } from "react-day-picker";
 //#region src/date-picker.d.ts

package/dist/dialog.js

@@ -79,7 +79,7 @@ function DialogContent({ className, children, size, showCloseButton = true, nest
 			...props,
 			children: [/* @__PURE__ */ jsx("div", {
 				"data-slot": "dialog-surface",
-				className: cn("pointer-events-auto flex max-h-[calc(100dvh-5rem)] w-full flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow)", className),
+				className: cn("pointer-events-auto flex max-h-[calc(100dvh-5rem)] w-full flex-col gap-4 overflow-y-auto overscroll-contain rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow)", className),
 				children
 			}), showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
 				"data-slot": "dialog-close",

package/dist/empty-state.js

@@ -12,7 +12,7 @@ function Empty({ className, variant = "default", ...props }) {
 function EmptyHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "empty-header",
-		className: cn("flex w-full max-w-95 flex-col items-center gap-gdt-sm", className),
+		className: cn("flex w-full max-w-md flex-col items-center gap-gdt-sm", className),
 		...props
 	});
 }
@@ -44,7 +44,7 @@ function EmptyTitle({ className, ...props }) {
 function EmptyDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "empty-description",
-		className: cn("max-w-95 text-gdt-md font-normal text-fg-secondary [&>a]:font-semibold [&>a]:text-fg-brand [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-fg-primary", className),
+		className: cn("max-w-md text-gdt-md font-normal text-fg-secondary [&>a]:font-semibold [&>a]:text-fg-brand [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-fg-primary", className),
 		...props
 	});
 }

package/dist/{icons-C9JXR5Xv.d.ts → icons-e71GaFK-.d.ts}

@@ -47,6 +47,7 @@ declare function FileText(props: IconProps): import("react").JSX.Element;
  */
 declare function Filter(props: IconProps): import("react").JSX.Element;
 declare function Fullscreen(props: IconProps): import("react").JSX.Element;
+declare function GripVertical(props: IconProps): import("react").JSX.Element;
 declare function Image(props: IconProps): import("react").JSX.Element;
 declare function Info(props: IconProps): import("react").JSX.Element;
 declare function Italic(props: IconProps): import("react").JSX.Element;
@@ -108,4 +109,4 @@ declare function Volume2(props: IconProps): import("react").JSX.Element;
 declare function VolumeX(props: IconProps): import("react").JSX.Element;
 declare function X(props: IconProps): import("react").JSX.Element;
 //#endregion
-export { Phone as $, IconComponent as A, Loader2 as B, Eye as C, Video as Ct, Filter as D, X as Dt, FileText as E, VolumeX as Et, Link2 as F, MicOff as G, Maximize2 as H, List as I, Minus as J, Minimize as K, ListOrdered as L, Image as M, Info as N, Fullscreen as O, Italic as P, Pause as Q, ListVideo as R, Code2 as S, User as St, File as T, Volume2 as Tt, Menu as U, Maximize as V, Mic as W, Moon as X, Monitor as Y, MoreHorizontal as Z, ChevronLeft as _, Sun as _t, ArrowDown as a, Redo2 as at, ChevronsUpDown as b, Undo2 as bt, ArrowUpRight as c, RotateCcw as ct, Calendar as d, SearchX as dt, PictureInPicture2 as et, Captions as f, Send as ft, ChevronDown as g, Star as gt, CheckCheck as h, SlidersHorizontal as ht, AlignRight as i, Quote as it, IconProps as j, Icon as k, Baseline as l, RotateCw as lt, Check as m, Share as mt, AlignJustify as n, Play as nt, ArrowRight as o, RefreshCcw as ot, CaptionsOff as p, Settings as pt, Minimize2 as q, AlignLeft as r, Plus as rt, ArrowUp as s, Repeat2 as st, AlignCenter as t, Pin as tt, Bold as u, Search as ut, ChevronRight as v, TriangleAlert as vt, EyeOff as w, Volume1 as wt, Clock as x, UploadCloud as xt, ChevronUp as y, Underline as yt, Loader as z };
+export { Pause as $, Icon as A, Loader as B, Eye as C, User as Ct, Filter as D, VolumeX as Dt, FileText as E, Volume2 as Et, Italic as F, Mic as G, Maximize as H, Link2 as I, Minimize2 as J, MicOff as K, List as L, IconProps as M, Image as N, Fullscreen as O, X as Ot, Info as P, MoreHorizontal as Q, ListOrdered as R, Code2 as S, UploadCloud as St, File as T, Volume1 as Tt, Maximize2 as U, Loader2 as V, Menu as W, Monitor as X, Minus as Y, Moon as Z, ChevronLeft as _, Star as _t, ArrowDown as a, Quote as at, ChevronsUpDown as b, Underline as bt, ArrowUpRight as c, Repeat2 as ct, Calendar as d, Search as dt, Phone as et, Captions as f, SearchX as ft, ChevronDown as g, SlidersHorizontal as gt, CheckCheck as h, Share as ht, AlignRight as i, Plus as it, IconComponent as j, GripVertical as k, Baseline as l, RotateCcw as lt, Check as m, Settings as mt, AlignJustify as n, Pin as nt, ArrowRight as o, Redo2 as ot, CaptionsOff as p, Send as pt, Minimize as q, AlignLeft as r, Play as rt, ArrowUp as s, RefreshCcw as st, AlignCenter as t, PictureInPicture2 as tt, Bold as u, RotateCw as ut, ChevronRight as v, Sun as vt, EyeOff as w, Video as wt, Clock as x, Undo2 as xt, ChevronUp as y, TriangleAlert as yt, ListVideo as z };

package/dist/icons.d.ts

@@ -1,2 +1,2 @@
-import { $ as Phone, A as IconComponent, B as Loader2, C as Eye, Ct as Video, D as Filter, Dt as X, E as FileText, Et as VolumeX, F as Link2, G as MicOff, H as Maximize2, I as List, J as Minus, K as Minimize, L as ListOrdered, M as Image, N as Info, O as Fullscreen, P as Italic, Q as Pause, R as ListVideo, S as Code2, St as User, T as File, Tt as Volume2, U as Menu, V as Maximize, W as Mic, X as Moon, Y as Monitor, Z as MoreHorizontal, _ as ChevronLeft, _t as Sun, a as ArrowDown, at as Redo2, b as ChevronsUpDown, bt as Undo2, c as ArrowUpRight, ct as RotateCcw, d as Calendar, dt as SearchX, et as PictureInPicture2, f as Captions, ft as Send, g as ChevronDown, gt as Star, h as CheckCheck, ht as SlidersHorizontal, i as AlignRight, it as Quote, j as IconProps, k as Icon, l as Baseline, lt as RotateCw, m as Check, mt as Share, n as AlignJustify, nt as Play, o as ArrowRight, ot as RefreshCcw, p as CaptionsOff, pt as Settings, q as Minimize2, r as AlignLeft, rt as Plus, s as ArrowUp, st as Repeat2, t as AlignCenter, tt as Pin, u as Bold, ut as Search, v as ChevronRight, vt as TriangleAlert, w as EyeOff, wt as Volume1, x as Clock, xt as UploadCloud, y as ChevronUp, yt as Underline, z as Loader } from "./icons-C9JXR5Xv.js";
-export { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDown, ArrowRight, ArrowUp, ArrowUpRight, Baseline, Bold, Calendar, Captions, CaptionsOff, Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, Clock, Code2, Eye, EyeOff, File, FileText, Filter, Fullscreen, Icon, type IconComponent, type IconProps, Image, Info, Italic, Link2, List, ListOrdered, ListVideo, Loader, Loader2, Maximize, Maximize2, Menu, Mic, MicOff, Minimize, Minimize2, Minus, Monitor, Moon, MoreHorizontal, Pause, Phone, PictureInPicture2, Pin, Play, Plus, Quote, Redo2, RefreshCcw, Repeat2, RotateCcw, RotateCw, Search, SearchX, Send, Settings, Share, SlidersHorizontal, Star, Sun, TriangleAlert, Underline, Undo2, UploadCloud, User, Video, Volume1, Volume2, VolumeX, X };
+import { $ as Pause, A as Icon, B as Loader, C as Eye, Ct as User, D as Filter, Dt as VolumeX, E as FileText, Et as Volume2, F as Italic, G as Mic, H as Maximize, I as Link2, J as Minimize2, K as MicOff, L as List, M as IconProps, N as Image, O as Fullscreen, Ot as X, P as Info, Q as MoreHorizontal, R as ListOrdered, S as Code2, St as UploadCloud, T as File, Tt as Volume1, U as Maximize2, V as Loader2, W as Menu, X as Monitor, Y as Minus, Z as Moon, _ as ChevronLeft, _t as Star, a as ArrowDown, at as Quote, b as ChevronsUpDown, bt as Underline, c as ArrowUpRight, ct as Repeat2, d as Calendar, dt as Search, et as Phone, f as Captions, ft as SearchX, g as ChevronDown, gt as SlidersHorizontal, h as CheckCheck, ht as Share, i as AlignRight, it as Plus, j as IconComponent, k as GripVertical, l as Baseline, lt as RotateCcw, m as Check, mt as Settings, n as AlignJustify, nt as Pin, o as ArrowRight, ot as Redo2, p as CaptionsOff, pt as Send, q as Minimize, r as AlignLeft, rt as Play, s as ArrowUp, st as RefreshCcw, t as AlignCenter, tt as PictureInPicture2, u as Bold, ut as RotateCw, v as ChevronRight, vt as Sun, w as EyeOff, wt as Video, x as Clock, xt as Undo2, y as ChevronUp, yt as TriangleAlert, z as ListVideo } from "./icons-e71GaFK-.js";
+export { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDown, ArrowRight, ArrowUp, ArrowUpRight, Baseline, Bold, Calendar, Captions, CaptionsOff, Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, Clock, Code2, Eye, EyeOff, File, FileText, Filter, Fullscreen, GripVertical, Icon, type IconComponent, type IconProps, Image, Info, Italic, Link2, List, ListOrdered, ListVideo, Loader, Loader2, Maximize, Maximize2, Menu, Mic, MicOff, Minimize, Minimize2, Minus, Monitor, Moon, MoreHorizontal, Pause, Phone, PictureInPicture2, Pin, Play, Plus, Quote, Redo2, RefreshCcw, Repeat2, RotateCcw, RotateCw, Search, SearchX, Send, Settings, Share, SlidersHorizontal, Star, Sun, TriangleAlert, Underline, Undo2, UploadCloud, User, Video, Volume1, Volume2, VolumeX, X };

package/dist/icons.js

@@ -308,6 +308,44 @@ function Fullscreen(props) {
 		]
 	});
 }
+function GripVertical(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		name: "grip-vertical",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "12",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "5",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "19",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "15",
+				cy: "12",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "15",
+				cy: "5",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "15",
+				cy: "19",
+				r: "1"
+			})
+		]
+	});
+}
 function Image(props) {
 	return /* @__PURE__ */ jsxs(Icon, {
 		name: "image",
@@ -938,4 +976,4 @@ function X(props) {
 	});
 }
 //#endregion
-export { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDown, ArrowRight, ArrowUp, ArrowUpRight, Baseline, Bold, Calendar, Captions, CaptionsOff, Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, Clock, Code2, Eye, EyeOff, File, FileText, Filter, Fullscreen, Icon, Image, Info, Italic, Link2, List, ListOrdered, ListVideo, Loader, Loader2, Maximize, Maximize2, Menu, Mic, MicOff, Minimize, Minimize2, Minus, Monitor, Moon, MoreHorizontal, Pause, Phone, PictureInPicture2, Pin, Play, Plus, Quote, Redo2, RefreshCcw, Repeat2, RotateCcw, RotateCw, Search, SearchX, Send, Settings, Share, SlidersHorizontal, Star, Sun, TriangleAlert, Underline, Undo2, UploadCloud, User, Video, Volume1, Volume2, VolumeX, X };
+export { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDown, ArrowRight, ArrowUp, ArrowUpRight, Baseline, Bold, Calendar, Captions, CaptionsOff, Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, Clock, Code2, Eye, EyeOff, File, FileText, Filter, Fullscreen, GripVertical, Icon, Image, Info, Italic, Link2, List, ListOrdered, ListVideo, Loader, Loader2, Maximize, Maximize2, Menu, Mic, MicOff, Minimize, Minimize2, Minus, Monitor, Moon, MoreHorizontal, Pause, Phone, PictureInPicture2, Pin, Play, Plus, Quote, Redo2, RefreshCcw, Repeat2, RotateCcw, RotateCw, Search, SearchX, Send, Settings, Share, SlidersHorizontal, Star, Sun, TriangleAlert, Underline, Undo2, UploadCloud, User, Video, Volume1, Volume2, VolumeX, X };

package/dist/input-group.js

@@ -14,7 +14,7 @@ const inputGroupSizeVariants = {
 	lg: "h-12",
 	xl: "h-14"
 };
-const inputGroupVariants = cva("group/input-group relative flex w-full min-w-0 items-center overflow-hidden rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-caption-placeholder focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[[data-slot][aria-invalid=true]]:focus-within:border-line-danger has-[[data-slot][aria-invalid=true]]:focus-within:inset-ring-line-danger has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3", {
+const inputGroupVariants = cva("group/input-group relative flex w-full min-w-0 items-center overflow-hidden rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:border-line-subtle has-[[data-slot=input-group-control]:disabled]:bg-surface has-[[data-slot=input-group-control]:disabled]:text-fg-caption-placeholder focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[[data-slot][aria-invalid=true]]:focus-within:border-line-danger has-[[data-slot][aria-invalid=true]]:focus-within:inset-ring-line-danger has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3", {
 	variants: { size: inputGroupSizeVariants },
 	defaultVariants: { size: "md" }
 });

package/dist/kanban.d.ts

@@ -0,0 +1,214 @@
+import { t as Button } from "./button-BS5KCibF.js";
+import * as React from "react";
+//#region src/kanban.d.ts
+/**
+ * Kanban — a headless-first board built on Pragmatic drag and drop, composed
+ * the same way the data-table family is: a root that owns shared state,
+ * structural slots that own layout and tokens, and the app owning data, cards,
+ * and what a move means.
+ *
+ * ```tsx
+ * <KanbanRoot onCardMove={handleMove}>
+ *   <KanbanBoard>
+ *     <KanbanColumn columnId={stage.id}>
+ *       <KanbanColumnHeader>
+ *         <KanbanColumnTitle>
+ *           <KanbanColumnDot className="bg-status-info" />
+ *           <span className="flex-1 truncate">{stage.name}</span>
+ *           <KanbanColumnCount>{count}</KanbanColumnCount>
+ *         </KanbanColumnTitle>
+ *         <KanbanColumnDescription>{subtitle}</KanbanColumnDescription>
+ *       </KanbanColumnHeader>
+ *       <KanbanColumnBody>
+ *         <KanbanDropPlaceholder>Drop here…</KanbanDropPlaceholder>
+ *         {cards.map((card) => (
+ *           <KanbanCard key={card.id} cardId={card.id}>…</KanbanCard>
+ *         ))}
+ *       </KanbanColumnBody>
+ *     </KanbanColumn>
+ *   </KanbanBoard>
+ * </KanbanRoot>
+ * ```
+ *
+ * `KanbanScrollControls` (or a `KanbanScrollButton` on its own) can sit
+ * anywhere inside the root to step the board sideways; `useKanbanScroll` backs
+ * a custom control.
+ *
+ * Drops are reported through `onCardMove` as raw facts (`KanbanCardMove`);
+ * apply them to your lists with `applyKanbanCardMove` and persist however the
+ * screen needs. The component never mutates or fetches data itself. Dragging
+ * is a pointer affordance, so every board needs a keyboard-reachable way to
+ * make the same move (a status select on the card, a "move to" menu).
+ */
+/** Which half of the target card a drop landed on. */
+type KanbanEdge = "top" | "bottom";
+/**
+ * A completed drag, as raw facts. `targetCardId`/`edge` are null when the card
+ * was dropped on the column itself rather than on a specific card — boards
+ * decide what that means (`applyKanbanCardMove` inserts at the top, where the
+ * drop placeholder sits).
+ */
+type KanbanCardMove = {
+  cardId: string;
+  fromColumnId: string;
+  toColumnId: string;
+  targetCardId: string | null;
+  edge: KanbanEdge | null;
+};
+type ApplyKanbanCardMoveArgs = {
+  move: KanbanCardMove;
+  /** Card ids of the source column, in their currently rendered order. */
+  sourceIds: readonly string[];
+  /** Card ids of the target column; ignored when the move stays in-column. */
+  targetIds: readonly string[];
+};
+type ApplyKanbanCardMoveResult = {
+  /** Whether the move puts the card anywhere new. */
+  changed: boolean;
+  sourceIds: string[];
+  targetIds: string[];
+};
+/**
+ * Applies a card move to the two columns' id lists and returns the new lists.
+ * For an in-column move both returned lists are the same reordered list.
+ */
+declare function applyKanbanCardMove({ move, sourceIds, targetIds }: ApplyKanbanCardMoveArgs): ApplyKanbanCardMoveResult;
+/**
+ * Orders `ids` by a saved order: ids the saved order knows come first, in that
+ * order; the rest keep their given (API) order after them.
+ */
+declare function sortIdsBySavedOrder(ids: readonly string[], savedOrder: readonly string[] | undefined): string[];
+type KanbanColumnOrder = Record<string, string[]>;
+/**
+ * Per-board card ordering, persisted to this browser's localStorage. Column
+ * membership belongs to the server; the only thing saved here is where inside
+ * a column the user dropped each card, so the board comes back arranged the
+ * way they left it.
+ *
+ * A column is untouched (pure API order) until its first drop; from then on
+ * its saved order wins, with cards the order has never seen keeping API order
+ * after the arranged ones.
+ *
+ * ```tsx
+ * const order = useKanbanCardOrder("lead-pipeline-order");
+ * const cards = order.sortColumn(stage.id, ids).map((id) => byId[id]);
+ * // …after a drop
+ * order.saveColumns({ [move.fromColumnId]: sourceIds, [move.toColumnId]: targetIds });
+ * ```
+ */
+declare function useKanbanCardOrder(storageKey: string): {
+  sortColumn: (columnId: string, ids: readonly string[]) => string[];
+  saveColumns: (columns: KanbanColumnOrder) => void;
+};
+type KanbanDragState = {
+  cardId: string;
+  fromColumnId: string;
+  /** Column the pointer is currently over, null while outside the board. */
+  overColumnId: string | null;
+};
+type KanbanScrollDirection = "left" | "right";
+type KanbanScrollState = {
+  canScrollLeft: boolean;
+  canScrollRight: boolean;
+  /** Columns on the board, ignoring any trailing action tile. */
+  columnCount: number;
+  /** How many of them fit in the viewport, for a "showing N of M" caption. */
+  visibleColumnCount: number;
+};
+type KanbanScrollContextValue = KanbanScrollState & {
+  scroll: (direction: KanbanScrollDirection) => void;
+};
+/**
+ * The in-flight drag, for app-level styling beyond what the slots do. Null
+ * when nothing is being dragged.
+ */
+declare function useKanbanDrag(): KanbanDragState | null;
+/**
+ * The board's horizontal scroll position, for controls placed anywhere inside
+ * `KanbanRoot`. `canScroll*` is false at the corresponding end and on a board
+ * that does not overflow at all, so both being false means "nothing to scroll".
+ */
+declare function useKanbanScroll(): KanbanScrollContextValue;
+/**
+ * The board's live region and card flash, for moves the app makes outside a
+ * drag — the "move to" menu that keyboard users need. Announce what changed
+ * and flash the card so it can be found in its new column.
+ *
+ * ```tsx
+ * const { announce, flashCard } = useKanbanFeedback();
+ *
+ * moveLead(lead.id, stage.id);
+ * flashCard(lead.id);
+ * announce(`${lead.name} moved to ${stage.name}.`);
+ * ```
+ */
+declare function useKanbanFeedback(): {
+  announce: (message: string) => void;
+  flashCard: (cardId: string) => void;
+};
+type KanbanRootProps = React.ComponentProps<"div"> & {
+  /**
+   * A card finished dragging somewhere meaningful. Apply it with
+   * `applyKanbanCardMove` and persist as the screen requires; without a
+   * handler the board is drag-enabled but inert.
+   */
+  onCardMove?: (move: KanbanCardMove) => void;
+  /**
+   * What the board's live region should say once the move has been applied —
+   * "Amara Okoye moved to Offer Made, position 2 of 5." Only the app knows the
+   * names, so nothing is announced without this. Return null to stay silent.
+   */
+  announceMove?: (move: KanbanCardMove) => string | null | undefined;
+};
+declare function KanbanRoot({ announceMove, children, className, onCardMove, ...props }: KanbanRootProps): React.JSX.Element;
+type KanbanBoardProps = React.ComponentProps<"div">;
+declare function KanbanBoard({ className, ...props }: KanbanBoardProps): React.JSX.Element;
+type KanbanScrollButtonProps = Omit<React.ComponentProps<typeof Button>, "children"> & {
+  direction: KanbanScrollDirection;
+};
+/**
+ * Steps the board one column in `direction`, and disables itself at that end.
+ * Keyboard users reach the same scroll through the board itself, so the
+ * buttons are a pointer affordance rather than the only way across.
+ */
+declare function KanbanScrollButton({ className, direction, onClick, ...props }: KanbanScrollButtonProps): React.JSX.Element;
+/**
+ * The pair of scroll buttons. On a board that fits its viewport both are
+ * disabled rather than hidden — the row holds its place (and its "showing
+ * N of M" caption) instead of vanishing on wide screens.
+ */
+declare function KanbanScrollControls({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type KanbanColumnProps = React.ComponentProps<"section"> & {
+  columnId: string;
+  /** Cards can leave this column but nothing can be dropped into it. */
+  dropDisabled?: boolean;
+};
+declare function KanbanColumn({ children, className, columnId, dropDisabled, ...props }: KanbanColumnProps): React.JSX.Element;
+declare function KanbanColumnHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function KanbanColumnTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
+declare function KanbanColumnDot({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function KanbanColumnCount({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function KanbanColumnDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+type KanbanColumnBodyProps = React.ComponentProps<"div">;
+declare function KanbanColumnBody({ className, ...props }: KanbanColumnBodyProps): React.JSX.Element;
+/**
+ * Shown only while a card from another column hovers this one — the "drop here
+ * to move" affordance. Dropping on the column (rather than on a card) inserts
+ * at the top, which is where this placeholder sits.
+ */
+declare function KanbanDropPlaceholder({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+type KanbanCardProps = React.ComponentProps<"div"> & {
+  cardId: string;
+  /** Turns off dragging (e.g. missing permission); drops still target it. */
+  dragDisabled?: boolean;
+};
+declare function KanbanCard({ cardId, children, className, dragDisabled, ...props }: KanbanCardProps): React.JSX.Element;
+/**
+ * Restricts dragging to this element instead of the whole card. Worth adding
+ * as soon as a card holds its own controls — a menu, a link, a checkbox —
+ * since a drag started on one of those is a drag the user did not ask for.
+ * Renders a grip button; pass `children` to make it anything else.
+ */
+declare function KanbanCardDragHandle({ children, className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+//#endregion
+export { KanbanBoard, KanbanCard, KanbanCardDragHandle, type KanbanCardMove, type KanbanCardProps, KanbanColumn, KanbanColumnBody, KanbanColumnCount, KanbanColumnDescription, KanbanColumnDot, KanbanColumnHeader, type KanbanColumnProps, KanbanColumnTitle, type KanbanDragState, KanbanDropPlaceholder, type KanbanEdge, KanbanRoot, type KanbanRootProps, KanbanScrollButton, KanbanScrollControls, applyKanbanCardMove, sortIdsBySavedOrder, useKanbanCardOrder, useKanbanDrag, useKanbanFeedback, useKanbanScroll };