@neasg/design-system 0.4.9 → 0.4.11

package/README.md

@@ -1,5 +1,7 @@
 # NEA Design System
 
+[![npm version](https://img.shields.io/npm/v/%40neasg%2Fdesign-system?style=flat-square&label=npm)](https://www.npmjs.com/package/@neasg/design-system)
+
 Shared NEA UI primitives, theme tokens, and Storybook documentation.
 
 ## Local Development
@@ -174,16 +176,14 @@ Release flow:
 
 ## Storybook Deployment
 
-`vercel.json` is configured to deploy the built Storybook static site:
-
-- Install command: `npm ci`
-- Build command: `npm run build-storybook`
-- Output directory: `storybook-static`
+Storybook is published to Chromatic from GitHub Actions. CI builds Storybook
+with `npm run build-storybook`, then uploads `storybook-static` with
+`npm run chromatic`.
 
-One-time Vercel setup:
+One-time setup:
 
-1. Import this GitHub repo into Vercel.
-2. Let Vercel use the repo root as the project root.
-3. Keep the build settings from `vercel.json`.
+1. Create or connect the Chromatic project for this repo.
+2. Add a GitHub Actions secret named `CHROMATIC_PROJECT_TOKEN`.
 
-After that, every push to the tracked branch deploys Storybook automatically in Vercel.
+After that, pull requests and pushes to `main` publish a Chromatic build. The
+GitHub Actions log includes the published Storybook URL.

package/dist/checkbox.js

@@ -8,10 +8,16 @@ const sizeClasses = {
     md: "size-4",
     lg: "size-5",
 };
+const startAlignedOffsetClasses = {
+    sm: "mt-[3px]",
+    md: "mt-[3px]",
+    lg: "mt-0",
+};
 const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "md", checked, disabled, label, description, labelAlign = "center", id, ...props }, ref) => {
     const innerRef = React.useRef(null);
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `checkbox-${generatedId}`;
+    const alignToStart = labelAlign === "start" || Boolean(description);
     React.useImperativeHandle(ref, () => innerRef.current);
     React.useEffect(() => {
         if (innerRef.current) {
@@ -20,10 +26,10 @@ const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "m
     }, [indeterminate]);
     const box = (_jsxs("span", { className: cn("relative inline-block shrink-0 rounded-sm border bg-background align-middle text-primary-foreground transition-colors", sizeClasses[size], (checked || indeterminate) && !disabled
             ? "border-primary bg-primary"
-            : "border-input", disabled && "cursor-not-allowed opacity-50", !label && className), children: [_jsx("input", { ref: innerRef, type: "checkbox", id: inputId, checked: checked, disabled: disabled, className: "absolute inset-0 h-full w-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed", ...props }), indeterminate ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })) : checked ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : null] }));
+            : "border-input", disabled && "cursor-not-allowed opacity-50", label && alignToStart && startAlignedOffsetClasses[size], !label && className), children: [_jsx("input", { ref: innerRef, type: "checkbox", id: inputId, checked: checked, disabled: disabled, className: "absolute inset-0 h-full w-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed", ...props }), indeterminate ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })) : checked ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : null] }));
     if (!label)
         return box;
-    return (_jsxs("label", { htmlFor: inputId, className: cn("inline-flex cursor-pointer items-center gap-2 text-sm", labelAlign === "start" && "items-start", disabled && "cursor-not-allowed opacity-50", className), children: [box, _jsxs("div", { className: "select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "mt-1", children: description })) : null] })] }));
+    return (_jsxs("label", { htmlFor: inputId, className: cn("inline-flex cursor-pointer gap-2 text-sm", alignToStart ? "items-start" : "items-center", disabled && "cursor-not-allowed opacity-50", className), children: [box, _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", color: "muted", children: description })) : null] })] }));
 });
 Checkbox.displayName = "Checkbox";
 export { Checkbox };

package/dist/date-input.d.ts

@@ -12,6 +12,8 @@ interface DateInputSharedProps {
     hideLabel?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    clearable?: boolean;
+    clearLabel?: string;
     minDate?: Date;
     maxDate?: Date;
     className?: string;

package/dist/date-input.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format, parse } from "date-fns";
 import { CalendarIcon } from "lucide-react";
+import { XIcon } from "./animated-icons/x";
 import { Calendar } from "./calendar";
 import { inputControlClassName } from "./input-control";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
@@ -92,8 +93,9 @@ function formatDisplayRange(range) {
 }
 const DateInput = React.forwardRef((props, ref) => {
     var _a, _b, _c;
-    const { label, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
+    const { label, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, clearable = false, clearLabel, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
     const [open, setOpen] = React.useState(false);
+    const [isSelectingRangeEnd, setIsSelectingRangeEnd] = React.useState(false);
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `date-input-${generatedId}`;
     const errorId = error ? `${inputId}-error` : undefined;
@@ -109,6 +111,24 @@ const DateInput = React.forwardRef((props, ref) => {
             ? formatDisplayDate(selectedDate)
             : undefined;
     const placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : (isRange ? "Pick range" : "Pick a date");
+    const showClearButton = clearable && Boolean(displayValue) && !disabled;
+    const resolvedClearLabel = clearLabel !== null && clearLabel !== void 0 ? clearLabel : (isRange ? "Clear date range" : "Clear date");
+    const handleOpenChange = (nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+            setIsSelectingRangeEnd(false);
+        }
+    };
+    const handleClear = () => {
+        if (props.mode === "range") {
+            props.onValueChange({});
+        }
+        else {
+            props.onValueChange("");
+        }
+        setIsSelectingRangeEnd(false);
+        setOpen(false);
+    };
     const handleSelect = (date) => {
         if (props.mode === "range")
             return;
@@ -118,17 +138,37 @@ const DateInput = React.forwardRef((props, ref) => {
     const handleRangeSelect = (range) => {
         if (props.mode !== "range")
             return;
+        if (!(range === null || range === void 0 ? void 0 : range.from)) {
+            props.onValueChange({});
+            setIsSelectingRangeEnd(false);
+            return;
+        }
+        const rangeFrom = range.from;
+        const rangeTo = range.to;
+        const isCompletingRange = isSelectingRangeEnd || Boolean((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !selectedRange.to);
+        const isSingleDayRange = rangeTo
+            ? getDateTime(rangeFrom) === getDateTime(rangeTo)
+            : false;
+        if (!isCompletingRange && isSingleDayRange) {
+            props.onValueChange({ from: formatISODate(rangeFrom) });
+            setIsSelectingRangeEnd(true);
+            return;
+        }
         props.onValueChange(formatDateRangeValue(range));
-        if ((range === null || range === void 0 ? void 0 : range.from) && range.to) {
+        if (rangeTo) {
+            setIsSelectingRangeEnd(false);
             setOpen(false);
         }
+        else {
+            setIsSelectingRangeEnd(true);
+        }
     };
     const disabledDays = (date) => isDateOutsideBounds(date, minDate, maxDate);
     const calendarContent = (_jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
     if (appearance === "inline") {
-        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
+        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
     }
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: [_jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }), _jsx(CalendarIcon, { "aria-hidden": "true", className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground", strokeWidth: 2 })] }) }), calendarContent] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsxs("div", { className: "relative", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", showClearButton && "pr-16", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: _jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }) }) }), _jsxs("span", { "aria-hidden": showClearButton ? undefined : true, className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-2 text-muted-foreground", children: [showClearButton ? (_jsx("button", { type: "button", "aria-label": resolvedClearLabel, onClick: handleClear, className: "pointer-events-auto inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { size: 14, className: "flex items-center justify-center" }) })) : null, _jsx(CalendarIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", strokeWidth: 2 })] })] }), calendarContent] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/field.d.ts

@@ -4,6 +4,10 @@ interface FieldLabelProps extends React.ComponentProps<"label"> {
     required?: boolean;
 }
 declare function FieldLabel({ className, required, children, ...props }: FieldLabelProps): import("react/jsx-runtime").JSX.Element;
+interface FieldLegendProps extends React.ComponentProps<"legend"> {
+    required?: boolean;
+}
+declare function FieldLegend({ className, required, children, ...props }: FieldLegendProps): import("react/jsx-runtime").JSX.Element;
 declare function FieldDescription({ className, ...props }: Omit<React.ComponentProps<"p">, "color">): import("react/jsx-runtime").JSX.Element;
 declare function FieldError({ className, ...props }: Omit<React.ComponentProps<"p">, "color">): import("react/jsx-runtime").JSX.Element | null;
-export { Field, FieldDescription, FieldError, FieldLabel };
+export { Field, FieldDescription, FieldError, FieldLabel, FieldLegend };

package/dist/field.js

@@ -7,6 +7,9 @@ function Field({ className, ...props }) {
 function FieldLabel({ className, required, children, ...props }) {
     return (_jsx(Typography, { asChild: true, variant: "label", className: cn("group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:opacity-50 group-data-[invalid=true]/field:text-destructive", className), children: _jsxs("label", { "data-slot": "field-label", ...props, children: [children, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }) }));
 }
+function FieldLegend({ className, required, children, ...props }) {
+    return (_jsx(Typography, { asChild: true, variant: "label", className: cn("group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:opacity-50 group-data-[invalid=true]/field:text-destructive", className), children: _jsxs("legend", { "data-slot": "field-legend", ...props, children: [children, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }) }));
+}
 function FieldDescription({ className, ...props }) {
     return (_jsx(Typography, { as: "p", variant: "bodySm", color: "muted", "data-slot": "field-description", className: className, ...props }));
 }
@@ -16,4 +19,4 @@ function FieldError({ className, ...props }) {
     }
     return (_jsx(Typography, { as: "p", variant: "bodySm", role: "alert", "data-slot": "field-error", className: cn("text-destructive", className), ...props }));
 }
-export { Field, FieldDescription, FieldError, FieldLabel };
+export { Field, FieldDescription, FieldError, FieldLabel, FieldLegend };

package/dist/filter-popover.d.ts

@@ -30,8 +30,9 @@ export interface FilterPopoverProps extends Pick<PopoverProps, "align" | "defaul
     emptyLabel?: React.ReactNode;
     onReset?: () => void;
     contentClassName?: string;
+    viewClassName?: string;
     maxHeight?: string;
 }
 declare function getFilterSelectionLabel(count: number): string;
-declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, viewClassName, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
 export { FilterPopover, getFilterSelectionLabel };

package/dist/filter-popover.js

@@ -32,7 +32,7 @@ function getFilterSelectionLabel(count) {
     }
     return count === 1 ? "1 selected" : `${count} selected`;
 }
-function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", }) {
+function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", viewClassName, }) {
     var _a, _b, _c, _d, _e;
     const [activeGroupId, setActiveGroupId] = React.useState(null);
     const [transitionDirection, setTransitionDirection] = React.useState("forward");
@@ -63,7 +63,7 @@ function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLa
         setActiveGroupId(null);
     };
     const defaultTrigger = (_jsxs(Button, { type: "button", variant: "outline", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), triggerLabel, resolvedSelectedCount > 0 ? (_jsx(CountBadge, { count: resolvedSelectedCount, size: "sm" })) : null] }));
-    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, children: [_jsx(PopoverMenuView, { className: "-mx-1 -mt-1 px-1 pt-1", direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) }), activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_c = activeGroup.searchPlaceholder) !== null && _c !== void 0 ? _c : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_d = activeGroup.searchPlaceholder) !== null && _d !== void 0 ? _d : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_e = activeGroup.emptyLabel) !== null && _e !== void 0 ? _e : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: groupListLabel }), _jsx(PopoverMenuSection, { children: groups.map((group) => {
+    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, children: [_jsx(PopoverMenuView, { className: cn("-mx-1 -mt-1 px-1 pt-1", viewClassName), direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) }), activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_c = activeGroup.searchPlaceholder) !== null && _c !== void 0 ? _c : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_d = activeGroup.searchPlaceholder) !== null && _d !== void 0 ? _d : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_e = activeGroup.emptyLabel) !== null && _e !== void 0 ? _e : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: groupListLabel }), _jsx(PopoverMenuSection, { children: groups.map((group) => {
                                     var _a;
                                     const groupSelectedCount = getGroupSelectedCount(group);
                                     const selectionLabel = (_a = group.selectionLabel) !== null && _a !== void 0 ? _a : getFilterSelectionLabel(groupSelectedCount);

package/dist/radio-group.d.ts

@@ -14,8 +14,14 @@ export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLF
     label?: React.ReactNode;
     hideLabel?: boolean;
     description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    required?: boolean;
     orientation?: "horizontal" | "vertical";
     groupClassName?: string;
     optionClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
 }
 export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/radio-group.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { FieldDescription, FieldError, FieldLegend } from "./field";
 import { cn } from "./lib/utils";
 import { Typography } from "./typography";
 function useControllableValue({ value, defaultValue, onValueChange, }) {
@@ -15,27 +16,35 @@ function useControllableValue({ value, defaultValue, onValueChange, }) {
     }, [isControlled, onValueChange]);
     return [currentValue, setValue];
 }
-export const RadioGroup = React.forwardRef(({ className, optionClassName, options, value, defaultValue, onValueChange, name, label, hideLabel = false, description, orientation = "horizontal", groupClassName, disabled, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+export const RadioGroup = React.forwardRef(({ className, optionClassName, options, value, defaultValue, onValueChange, name, label, hideLabel = false, description, error, invalid = false, required = false, orientation = "horizontal", groupClassName, disabled, labelClassName, descriptionClassName, errorClassName, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }, ref) => {
     const generatedId = React.useId();
     const groupName = name !== null && name !== void 0 ? name : `radio-group-${generatedId.replace(/:/g, "")}`;
     const labelId = label ? `${groupName}-label` : undefined;
-    const descriptionId = description ? `${groupName}-description` : undefined;
+    const errorId = error ? `${groupName}-error` : undefined;
+    const showDescription = Boolean(description) && !error;
+    const descriptionId = showDescription ? `${groupName}-description` : undefined;
+    const isInvalid = invalid ||
+        ariaInvalid === true ||
+        ariaInvalid === "true" ||
+        Boolean(error);
+    const describedBy = [ariaDescribedBy, descriptionId, errorId].filter(Boolean).join(" ") ||
+        undefined;
     const [currentValue, setCurrentValue] = useControllableValue({
         value,
         defaultValue,
         onValueChange,
     });
-    return (_jsxs("fieldset", { ref: ref, disabled: disabled, className: cn("min-w-0 border-0 p-0", className), ...props, children: [label ? (_jsx("legend", { id: labelId, className: cn("mb-2 text-sm font-medium text-foreground", hideLabel && "sr-only"), children: label })) : null, description ? (_jsx(Typography, { as: "p", id: descriptionId, variant: "caption", color: "muted", className: cn("mb-2", hideLabel && "sr-only"), children: description })) : null, _jsx("div", { role: "radiogroup", "aria-orientation": orientation, "aria-labelledby": labelId !== null && labelId !== void 0 ? labelId : ariaLabelledBy, "aria-describedby": descriptionId !== null && descriptionId !== void 0 ? descriptionId : ariaDescribedBy, className: cn(orientation === "horizontal"
+    return (_jsxs("fieldset", { ref: ref, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, className: cn("group/field flex w-full min-w-0 flex-col gap-2 border-0 p-0", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, ...props, children: [label ? (_jsx(FieldLegend, { id: labelId, required: required, className: cn("mb-2", hideLabel && "sr-only", labelClassName), children: label })) : null, _jsx("div", { role: "radiogroup", "aria-orientation": orientation, "aria-labelledby": labelId !== null && labelId !== void 0 ? labelId : ariaLabelledBy, "aria-describedby": describedBy, "aria-invalid": isInvalid ? "true" : undefined, className: cn(orientation === "horizontal"
                     ? "flex flex-wrap items-center gap-4"
                     : "grid gap-2", groupClassName), children: options.map((option, optionIndex) => {
                     const optionId = `${groupName}-option-${optionIndex}`;
                     const checked = currentValue === option.value;
                     const optionDisabled = disabled || option.disabled;
-                    return (_jsxs("label", { htmlFor: optionId, className: cn("inline-flex min-w-0 cursor-pointer items-start gap-2 text-sm text-foreground", optionDisabled && "cursor-not-allowed opacity-50", optionClassName), children: [_jsxs("span", { className: cn("relative mt-0.5 inline-flex size-3.5 shrink-0 items-center justify-center rounded-full border bg-background transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", checked ? "border-primary" : "border-input"), children: [_jsx("span", { className: cn("size-2 rounded-full bg-primary transition-transform", checked ? "scale-100" : "scale-0") }), _jsx("input", { id: optionId, type: "radio", name: groupName, value: option.value, checked: checked, disabled: optionDisabled, onChange: (event) => {
+                    return (_jsxs("label", { htmlFor: optionId, className: cn("inline-flex min-w-0 cursor-pointer items-start gap-2 text-sm text-foreground", optionDisabled && "cursor-not-allowed opacity-50", optionClassName), children: [_jsxs("span", { className: cn("relative mt-[3px] inline-flex size-3.5 shrink-0 items-center justify-center rounded-full border bg-background transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", checked ? "border-primary" : "border-input"), children: [_jsx("span", { className: cn("size-2 rounded-full bg-primary transition-transform", checked ? "scale-100" : "scale-0") }), _jsx("input", { id: optionId, type: "radio", name: groupName, value: option.value, checked: checked, required: required, disabled: optionDisabled, onChange: (event) => {
                                             if (event.target.checked) {
                                                 setCurrentValue(option.value);
                                             }
-                                        }, className: "absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed" })] }), _jsxs("span", { className: "min-w-0", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: option.label }), option.description ? (_jsx(Typography, { as: "p", variant: "caption", color: "muted", children: option.description })) : null] })] }, option.value));
-                }) })] }));
+                                        }, className: "absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed" })] }), _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: option.label }), option.description ? (_jsx(Typography, { as: "p", variant: "caption", color: "muted", children: option.description })) : null] })] }, option.value));
+                }) }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 RadioGroup.displayName = "RadioGroup";

package/dist/styles.css

@@ -351,6 +351,14 @@
     --table-border: var(--component-border);
   }
 
+  sgds-masthead {
+    color-scheme: light;
+  }
+
+  .dark sgds-masthead {
+    color-scheme: dark;
+  }
+
   * {
     @apply border-border;
   }

package/dist/table-column-visibility.d.ts

@@ -4,6 +4,7 @@ import type { TableColumn } from "./table";
 type PopoverPlacementProps = Pick<PopoverProps, "align" | "side" | "sideOffset">;
 export interface TableColumnVisibilityMenuProps<Row> extends PopoverPlacementProps {
     columns: TableColumn<Row>[];
+    /** Ordered visible column keys. Reordering in the menu emits the next order through `onVisibleColumnKeysChange`. */
     visibleColumnKeys: readonly string[];
     onVisibleColumnKeysChange: (visibleColumnKeys: string[]) => void;
     defaultVisibleColumnKeys?: readonly string[];

package/dist/table-column-visibility.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Columns3 } from "lucide-react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Columns3, GripVertical } from "lucide-react";
 import { Button } from "./button";
 import { Checkbox } from "./checkbox";
 import { InputControl } from "./input-control";
@@ -19,11 +22,18 @@ function getColumnVisibilityLabel(column) {
     }
     return column.key;
 }
-function orderVisibleColumnKeys(columns, visibleColumnKeys) {
-    const visibleColumnKeySet = new Set(visibleColumnKeys);
-    return columns
-        .map((column) => column.key)
-        .filter((columnKey) => visibleColumnKeySet.has(columnKey));
+function orderColumnKeys(columns, columnKeys) {
+    const columnKeySet = new Set(columns.map((column) => column.key));
+    const seenColumnKeys = new Set();
+    const orderedColumnKeys = [];
+    Array.from(columnKeys).forEach((columnKey) => {
+        if (!columnKeySet.has(columnKey) || seenColumnKeys.has(columnKey)) {
+            return;
+        }
+        orderedColumnKeys.push(columnKey);
+        seenColumnKeys.add(columnKey);
+    });
+    return orderedColumnKeys;
 }
 function arraysMatch(left, right) {
     if (left.length !== right.length) {
@@ -31,44 +41,80 @@ function arraysMatch(left, right) {
     }
     return left.every((value, index) => value === right[index]);
 }
+function SortableColumnOption({ columnKey, label, checked, disabled, onToggle, }) {
+    const checkboxId = React.useId();
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: columnKey, disabled: !checked });
+    return (_jsxs("div", { ref: setNodeRef, style: {
+            transform: CSS.Transform.toString(transform),
+            transition,
+            zIndex: isDragging ? 50 : undefined,
+        }, className: cn("flex h-9 items-center gap-2 rounded-sm px-1.5 pr-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground", isDragging && "opacity-50 shadow-sm"), children: [_jsx("button", { type: "button", "aria-label": `Reorder ${label}`, disabled: !checked, className: cn("inline-flex size-6 shrink-0 touch-none items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-background hover:text-foreground", checked
+                    ? "cursor-grab active:cursor-grabbing"
+                    : "cursor-not-allowed opacity-40"), ...(checked ? { ...attributes, ...listeners } : {}), children: _jsx(GripVertical, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Checkbox, { id: checkboxId, checked: checked, disabled: disabled, onChange: onToggle, "aria-label": label }), _jsx("label", { htmlFor: checkboxId, className: cn("min-w-0 flex-1 cursor-pointer truncate", disabled && "cursor-not-allowed text-muted-foreground"), children: label })] }));
+}
 function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel = "Customize columns", triggerClassName, contentClassName, className, searchPlaceholder = "Search columns", restoreDefaultsLabel = "Restore defaults", emptyMessage = "No columns found", minVisibleColumns = 1, align = "end", sideOffset = 4, side, }) {
     const [query, setQuery] = React.useState("");
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
     const searchInputId = React.useId();
     const requiredVisibleColumns = Math.max(0, minVisibleColumns);
-    const visibleColumnKeySet = React.useMemo(() => new Set(visibleColumnKeys), [visibleColumnKeys]);
-    const visibleColumnCount = columns.filter((column) => visibleColumnKeySet.has(column.key)).length;
     const selectableColumns = React.useMemo(() => columns.filter((column) => column.hideable !== false), [columns]);
-    const defaultKeys = React.useMemo(() => orderVisibleColumnKeys(columns, defaultVisibleColumnKeys !== null && defaultVisibleColumnKeys !== void 0 ? defaultVisibleColumnKeys : columns
+    const defaultKeys = React.useMemo(() => orderColumnKeys(columns, defaultVisibleColumnKeys !== null && defaultVisibleColumnKeys !== void 0 ? defaultVisibleColumnKeys : columns
         .filter((column) => column.defaultVisible !== false)
         .map((column) => column.key)), [columns, defaultVisibleColumnKeys]);
-    const currentKeys = React.useMemo(() => orderVisibleColumnKeys(columns, visibleColumnKeys), [columns, visibleColumnKeys]);
+    const currentKeys = React.useMemo(() => orderColumnKeys(columns, visibleColumnKeys), [columns, visibleColumnKeys]);
+    const visibleColumnKeySet = React.useMemo(() => new Set(currentKeys), [currentKeys]);
+    const visibleColumnCount = currentKeys.length;
+    const orderedSelectableColumns = React.useMemo(() => {
+        const selectableColumnsByKey = new Map(selectableColumns.map((column) => [column.key, column]));
+        const orderedVisibleColumns = currentKeys
+            .map((columnKey) => selectableColumnsByKey.get(columnKey))
+            .filter((column) => Boolean(column));
+        const orderedVisibleColumnKeySet = new Set(orderedVisibleColumns.map((column) => column.key));
+        const hiddenColumns = selectableColumns.filter((column) => !orderedVisibleColumnKeySet.has(column.key));
+        return [...orderedVisibleColumns, ...hiddenColumns];
+    }, [currentKeys, selectableColumns]);
     const canRestoreDefaults = defaultKeys.length >= requiredVisibleColumns &&
         !arraysMatch(currentKeys, defaultKeys);
     const normalizedQuery = query.trim().toLowerCase();
-    const filteredColumns = selectableColumns.filter((column) => getColumnVisibilityLabel(column).toLowerCase().includes(normalizedQuery));
+    const filteredColumns = orderedSelectableColumns.filter((column) => getColumnVisibilityLabel(column).toLowerCase().includes(normalizedQuery));
     const commitVisibleColumnKeys = React.useCallback((nextVisibleColumnKeys) => {
-        const orderedKeys = orderVisibleColumnKeys(columns, nextVisibleColumnKeys);
+        const orderedKeys = orderColumnKeys(columns, nextVisibleColumnKeys);
         if (orderedKeys.length < requiredVisibleColumns) {
             return;
         }
         onVisibleColumnKeysChange(orderedKeys);
     }, [columns, onVisibleColumnKeysChange, requiredVisibleColumns]);
     const toggleColumn = React.useCallback((columnKey) => {
-        const nextVisibleColumnKeys = new Set(visibleColumnKeys);
-        if (nextVisibleColumnKeys.has(columnKey)) {
-            nextVisibleColumnKeys.delete(columnKey);
-        }
-        else {
-            nextVisibleColumnKeys.add(columnKey);
+        const nextVisibleColumnKeys = currentKeys.filter((currentColumnKey) => currentColumnKey !== columnKey);
+        if (!visibleColumnKeySet.has(columnKey)) {
+            nextVisibleColumnKeys.push(columnKey);
         }
         commitVisibleColumnKeys(nextVisibleColumnKeys);
-    }, [commitVisibleColumnKeys, visibleColumnKeys]);
+    }, [commitVisibleColumnKeys, currentKeys, visibleColumnKeySet]);
+    const handleDragEnd = React.useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id) {
+            return;
+        }
+        const oldIndex = currentKeys.indexOf(String(active.id));
+        const newIndex = currentKeys.indexOf(String(over.id));
+        if (oldIndex < 0 || newIndex < 0) {
+            return;
+        }
+        commitVisibleColumnKeys(arrayMove(currentKeys, oldIndex, newIndex));
+    }, [commitVisibleColumnKeys, currentKeys]);
     const defaultTrigger = (_jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": triggerLabel, className: triggerClassName, children: _jsx(Columns3, { "aria-hidden": "true" }) }));
-    return (_jsx(Popover, { trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, align: align, side: side, sideOffset: sideOffset, contentClassName: cn("w-80 p-0", contentClassName), children: _jsxs("div", { className: cn("flex max-h-96 flex-col", className), children: [_jsxs("div", { className: "border-b p-2", children: [_jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchPlaceholder }), _jsx(SearchInputShell, { children: _jsx(InputControl, { id: searchInputId, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: "h-8 bg-background pl-8 pr-2" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filteredColumns.length ? (filteredColumns.map((column) => {
-                        const label = getColumnVisibilityLabel(column);
-                        const checked = visibleColumnKeySet.has(column.key);
-                        const disabled = checked && visibleColumnCount <= requiredVisibleColumns;
-                        return (_jsxs("label", { className: cn("flex h-9 cursor-pointer items-center gap-2 rounded-sm px-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground", disabled && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit"), children: [_jsx(Checkbox, { checked: checked, disabled: disabled, onChange: () => toggleColumn(column.key), "aria-label": label }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label })] }, column.key));
-                    })) : (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage })) }), _jsxs(PopoverMenuFooter, { inset: "flush", className: "justify-between", children: [_jsx(PopoverMenuFooterAction, { onClick: () => commitVisibleColumnKeys(defaultKeys), disabled: !canRestoreDefaults, className: "w-auto min-w-0 flex-1", children: restoreDefaultsLabel }), _jsxs(PopoverMenuFooterMeta, { children: [visibleColumnCount, " of ", columns.length] })] })] }) }));
+    return (_jsx(Popover, { trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, align: align, side: side, sideOffset: sideOffset, contentClassName: cn("w-80 p-0", contentClassName), children: _jsxs("div", { className: cn("flex max-h-96 flex-col", className), children: [_jsxs("div", { className: "border-b p-2", children: [_jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchPlaceholder }), _jsx(SearchInputShell, { children: _jsx(InputControl, { id: searchInputId, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: "h-8 bg-background pl-8 pr-2" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filteredColumns.length ? (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: filteredColumns.map((column) => column.key), strategy: verticalListSortingStrategy, children: filteredColumns.map((column) => {
+                                const label = getColumnVisibilityLabel(column);
+                                const checked = visibleColumnKeySet.has(column.key);
+                                const disabled = checked && visibleColumnCount <= requiredVisibleColumns;
+                                return (_jsx(SortableColumnOption, { columnKey: column.key, label: label, checked: checked, disabled: disabled, onToggle: () => toggleColumn(column.key) }, column.key));
+                            }) }) })) : (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage })) }), _jsxs(PopoverMenuFooter, { inset: "flush", className: "justify-between", children: [_jsx(PopoverMenuFooterAction, { onClick: () => commitVisibleColumnKeys(defaultKeys), disabled: !canRestoreDefaults, className: "w-auto min-w-0 flex-1", children: restoreDefaultsLabel }), _jsxs(PopoverMenuFooterMeta, { children: [visibleColumnCount, " of ", columns.length] })] })] }) }));
 }
 export { TableColumnVisibilityMenu };

package/dist/table.d.ts

@@ -115,7 +115,7 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
     loadingRows?: number;
-    /** Optional controlled set of visible column keys. Omit to render every column. */
+    /** Optional controlled ordered list of visible column keys. Omit to render every column in config order. */
     visibleColumnKeys?: readonly string[];
     /** When true, applies alternating row backgrounds for easier scanning. */
     striped?: boolean;

package/dist/table.js

@@ -130,16 +130,30 @@ function tableRowToneClassName(tone) {
             return undefined;
     }
 }
+function getVisibleColumns(columns, visibleColumnKeys) {
+    if (!visibleColumnKeys) {
+        return columns;
+    }
+    const columnsByKey = new Map(columns.map((column) => [column.key, column]));
+    const seenColumnKeys = new Set();
+    const visibleColumns = [];
+    visibleColumnKeys.forEach((columnKey) => {
+        if (seenColumnKeys.has(columnKey)) {
+            return;
+        }
+        const column = columnsByKey.get(columnKey);
+        if (column) {
+            visibleColumns.push(column);
+            seenColumnKeys.add(columnKey);
+        }
+    });
+    return visibleColumns;
+}
 function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, striped = false, onRowClick, style, ...props }) {
     // Use auto layout so the browser can grow a column to contain its (nowrap)
     // header. Caller can opt back into fixed layout via `tableClassName="table-fixed"`.
     const shouldUseFixedLayout = false;
-    const visibleColumnSet = visibleColumnKeys
-        ? new Set(visibleColumnKeys)
-        : undefined;
-    const visibleColumns = visibleColumnSet
-        ? columns.filter((column) => visibleColumnSet.has(column.key))
-        : columns;
+    const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
     const container = (_jsx(TableContainer, { className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
             ...style,
             ...(maxHeight !== undefined ? { maxHeight } : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
@@ -22,7 +22,8 @@
     "storybook": "storybook dev -p 6007 -c .storybook",
     "build-storybook": "storybook build -c .storybook",
     "test": "vitest run",
-    "prepublishOnly": "npm test && npm run build"
+    "prepublishOnly": "npm test && npm run build",
+    "chromatic": "chromatic --build-script-name build-storybook"
   },
   "publishConfig": {
     "access": "public",
@@ -85,6 +86,7 @@
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^10.4.16",
+    "chromatic": "^16.10.1",
     "jsdom": "^29.0.0",
     "postcss": "^8.4.31",
     "react": "^18.2.0",