npm - @lerianstudio/sindarian-ui - Versions diffs - 1.4.0-beta.4 → 1.4.0-beta.6 - Mend

@lerianstudio/sindarian-ui 1.4.0-beta.4 → 1.4.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/components/form/date-picker-field/index.d.ts CHANGED Viewed

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar';
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * The calendar's locale type, taken straight off the Calendar props so the
+ * public signature stays the react-day-picker/date-fns `Locale` without this
+ * package taking a direct date-fns dependency.
+ */
+type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
 export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -16,6 +23,9 @@ export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
     align?: 'start' | 'center' | 'end';
     'data-testid'?: string;
     valueAsString?: boolean;
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
 };
-export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
+export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, locale, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/form/date-picker-field/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"~~AAqBA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;~~AACjC~~,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,~~oJAelE~~,oBAAoB,CAAC,CAAC,CAAC,~~sBA4FzB~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAkBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4JAgBlE,oBAAoB,CAAC,CAAC,CAAC,sBAiGzB,CAAA"}

package/dist/components/form/date-picker-field/index.js CHANGED Viewed

@@ -47,7 +47,8 @@ const utils_1 = require("../../../lib/utils");
 const dayjs_1 = __importDefault(require("dayjs"));
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
-const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, ...others }) => {
+const locale_1 = require("react-day-picker/locale");
+const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, locale = locale_1.enUS, ...others }) => {
     const [open, setOpen] = React.useState(false);
     return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
             const convertFieldValueToDate = (fieldValue) => {
@@ -72,7 +73,11 @@ const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeh
             const handleSelect = (date) => {
                 field.onChange(convertDateToOutputFormat(date));
             };
-            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: (0, dayjs_1.default)(value).format(dateFormat) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", defaultMonth: value, selected: value, onSelect: handleSelect, disabled: disabled || readOnly }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: (0, dayjs_1.default)(value).format(dateFormat) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single",
+                                    // `required` mirrors the field's own required: a required
+                                    // field is not emptied by a re-click; an optional one keeps
+                                    // react-day-picker's clear gesture.
+                                    required: required, defaultMonth: value, selected: value, onSelect: handleSelect, disabled: disabled || readOnly, locale: locale }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
         } }));
 };
 exports.DatePickerField = DatePickerField;

package/dist/components/form/date-range-field/index.d.ts CHANGED Viewed

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar';
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { type ComponentProps, ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * The calendar's locale type, taken straight off the Calendar props so the
+ * public signature stays the react-day-picker/date-fns `Locale` without this
+ * package taking a direct date-fns dependency.
+ */
+type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
 export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -15,7 +22,10 @@ export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
     numberOfMonths?: number;
     dateFormat?: string;
     align?: 'start' | 'center' | 'end';
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
     'data-testid'?: string;
 };
-export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
+export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, locale, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/form/date-range-field/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"~~AAqBA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;~~AAEjC~~,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,~~qJAejE~~,mBAAmB,CAAC,CAAC,CAAC,~~sBA0ExB~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAkBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6JAgBjE,mBAAmB,CAAC,CAAC,CAAC,sBA2ExB,CAAA"}

package/dist/components/form/date-range-field/index.js CHANGED Viewed

@@ -47,11 +47,12 @@ const utils_1 = require("../../../lib/utils");
 const dayjs_1 = __importDefault(require("dayjs"));
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
-const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', ...others }) => {
+const locale_1 = require("react-day-picker/locale");
+const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', locale = locale_1.enUS, ...others }) => {
     const [open, setOpen] = React.useState(false);
     return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
             const value = field.value;
-            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value?.from ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, dayjs_1.default)(value.from).format(dateFormat), " -", ' ', (0, dayjs_1.default)(value.to).format(dateFormat)] })) : ((0, dayjs_1.default)(value.from).format(dateFormat)) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value?.from ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, dayjs_1.default)(value.from).format(dateFormat), " -", ' ', (0, dayjs_1.default)(value.to).format(dateFormat)] })) : ((0, dayjs_1.default)(value.from).format(dateFormat)) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
         } }));
 };
 exports.DateRangeField = DateRangeField;

package/dist/components/form/date-time-picker-field/index.d.ts CHANGED Viewed

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar';
 import * as React from 'react';
-import { type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * The calendar's locale type, taken straight off the Calendar props so the
+ * public signature stays the react-day-picker/date-fns `Locale` without this
+ * package taking a direct date-fns dependency.
+ */
+type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
 export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -14,10 +21,13 @@ export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
     required?: boolean;
     dateFormat?: string;
     align?: 'start' | 'center' | 'end';
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
     'data-testid'?: string;
     minDate?: Date;
     maxDate?: Date;
     defaultTime?: string;
 };
-export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
+export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, locale, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/form/date-time-picker-field/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"~~AAsBA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;~~AACtC~~,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,~~oKAiBtE~~,wBAAwB,CAAC,CAAC,CAAC,~~sBAgK7B~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAmBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4KAkBtE,wBAAwB,CAAC,CAAC,CAAC,sBAiK7B,CAAA"}

package/dist/components/form/date-time-picker-field/index.js CHANGED Viewed

@@ -48,7 +48,8 @@ const utils_1 = require("../../../lib/utils");
 const dayjs_1 = __importDefault(require("dayjs"));
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
-const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', minDate, maxDate, defaultTime = '00:00', ...others }) => {
+const locale_1 = require("react-day-picker/locale");
+const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', locale = locale_1.enUS, minDate, maxDate, defaultTime = '00:00', ...others }) => {
     const [open, setOpen] = React.useState(false);
     const parseDefaultTime = (time) => {
         const [h, m] = time.split(':').map(Number);
@@ -97,7 +98,7 @@ const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, pl
                                                 e.preventDefault();
                                                 handleClear(e);
                                             }
-                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "size-4" }) }))] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, disabled: (date) => {
+                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "size-4" }) }))] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, locale: locale, disabled: (date) => {
                                                 if (disabled || readOnly)
                                                     return true;
                                                 if (minDate &&

package/dist/components/page-header/index.d.ts CHANGED Viewed

@@ -27,8 +27,21 @@ export type PageHeaderInfoTitleProps = {
     /**
      * Seam for the wrapper element's own margins. Merged AFTER the hard-coded
      * `mb-12` so a consumer utility (e.g. `mb-0`) wins via tailwind-merge.
+     *
+     * It is also the way back to the old shrink-to-zero title box:
+     * `containerClassName="min-w-0"` simply lands, because the base string
+     * declares no `min-w-*` for tailwind-merge to weigh it against. Pass it only
+     * if a title box that a wide action slot can squeeze past its longest word
+     * is what the surface actually wants.
      */
     containerClassName?: string;
+    /**
+     * Rendered as their own row under the subtitle, wrapping, so a long identity
+     * tape never competes with the subtitle for the same line. This is the slot
+     * for things that IDENTIFY the record (short id, status, severity, counts),
+     * not for controls: buttons belong in the header's action slot, where the
+     * wrapper's `justify-between` keeps them right-aligned.
+     */
     children?: ReactNode;
 };
 export declare function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children, as: Heading }: PageHeaderInfoTitleProps): import("react").JSX.Element;

package/dist/components/page-header/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,~~EAAiB~~,SAAS,EAAwB,MAAM,OAAO,CAAA;~~AAmBtE~~,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,aAAa,EACd,EAAE,eAAe,+BAmBjB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C~~;;;OAGG~~;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,EAAE,EAAE,OAAc,EACnB,EAAE,wBAAwB,+~~BAmB1B~~;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+BAqC5B;AAED,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACT,EAAE,qCAAqC,+BAavC;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACL,EAAE,8BAA8B,+BA+ChC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBhF,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,aAAa,EACd,EAAE,eAAe,+BAmBjB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,EAAE,EAAE,OAAc,EACnB,EAAE,wBAAwB,+BA2D1B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+BAqC5B;AAED,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACT,EAAE,qCAAqC,+BAavC;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACL,EAAE,8BAA8B,+BA+ChC"}

package/dist/components/page-header/index.js CHANGED Viewed

@@ -29,7 +29,38 @@ function PageHeader({ children, className, rootClassName }) {
     return ((0, jsx_runtime_1.jsx)(PageHeaderContext.Provider, { value: { isOpen }, children: (0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header", className: (0, utils_1.cn)('mt-12', isOpen && 'mb-12', rootClassName), children: (0, jsx_runtime_1.jsx)(collapsible_1.Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: children }) }) }));
 }
 function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children, as: Heading = 'h1' }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "page-header-info-title", className: (0, utils_1.cn)('mb-12 flex flex-col gap-4', containerClassName), children: [(0, jsx_runtime_1.jsx)(Heading, { className: (0, utils_1.cn)('text-foreground text-4xl font-bold', className), "data-testid": "title", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-sm font-medium", children: subtitle }), children] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "page-header-info-title",
+        /*
+          Two utilities and one deliberate absence.
+          `flex-1` (basis 0) is #170: flex shrinking is shared in proportion to
+          flex-basis, so a title box at basis auto (its max-content width, which
+          a long subtitle inflates) absorbed almost none of the overflow and
+          starved the action row into one button per line. At basis 0 the line's
+          hypothetical size is the action row alone, so the row keeps its natural
+          width and the title grows into what is left, wrapping at spaces.
+          NO `min-w-0` is #174, and the absence is the fix. A flex item's
+          automatic minimum size is its own min-content, so left alone the box
+          cannot be squeezed below its longest word (of the title, the subtitle,
+          or a child chip) and nothing can overflow horizontally at any width.
+          beta.5 carried `min-w-0`, which waives that minimum: on Matcher's
+          exception-detail masthead the box collapsed to 68px and the `h1`
+          painted straight out of it and across the action row. That is gone.
+          A fixed floor was the other candidate and is wrong: any `sm:` gate keys
+          on the VIEWPORT while the overflow condition is the MASTHEAD width, so
+          a 1024px viewport with a 320px side panel open (a ~332px masthead)
+          would keep a 320px floor and scroll the body sideways.
+          The measured trade: on a masthead carrying a 520px action row the title
+          box shrinks to its longest word and the subtitle wraps to about three
+          lines. The remedy there is fewer controls in the action slot, not a
+          wider floor. A consumer that wants the collapse back passes
+          `containerClassName="min-w-0"`. jsdom does not lay out, so the geometry
+          is verified downstream.
+        */
+        className: (0, utils_1.cn)('mb-12 flex flex-1 flex-col gap-4', containerClassName), children: [(0, jsx_runtime_1.jsx)(Heading, { className: (0, utils_1.cn)('text-foreground text-4xl font-bold', className), "data-testid": "title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-sm font-medium", children: subtitle }) }), react_1.Children.toArray(children).length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: children })) : null] }));
 }
 function PageHeaderInfoTooltip({ subtitle }) {
     const { toast } = (0, use_toast_1.useToast)();

package/dist/components/ui/calendar/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,~~qBA2CxC~~;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBAqCxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/calendar/index.js CHANGED Viewed

@@ -105,11 +105,8 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
         if (modifiers.focused)
             ref.current?.focus();
     }, [modifiers.focused]);
-    const dayNumber = day.date.getDate();
-    const monthName = day.date.toLocaleDateString('en', { month: 'long' });
-    const year = day.date.getFullYear();
     return ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: ref, variant: "plain", size: "small", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "data-today": modifiers.today && !modifiers.range_middle, "aria-label": `${monthName} ${dayNumber}, ${year}`, "aria-selected": modifiers.selected, "aria-current": modifiers.today ? 'date' : undefined, "aria-disabled": modifiers.disabled, role: "gridcell", tabIndex: modifiers.focused ? 0 : -1, className: (0, utils_1.cn)('data-[today=true]:bg-accent data-[today=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground data-[range-middle=true]:bg-accent-mute data-[range-middle=true]:text-foreground data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground focus-visible:border-accent focus-visible:ring-accent/50 relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal focus-visible:ring-[3px] focus-visible:outline-none data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:font-bold data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:font-bold data-[selected-single=true]:font-bold data-[today=true]:font-bold [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "data-today": modifiers.today && !modifiers.range_middle, "aria-current": modifiers.today ? 'date' : undefined, className: (0, utils_1.cn)('data-[today=true]:bg-accent data-[today=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground data-[range-middle=true]:bg-accent-mute data-[range-middle=true]:text-foreground data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground focus-visible:border-accent focus-visible:ring-accent/50 relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal focus-visible:ring-[3px] focus-visible:outline-none data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:font-bold data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:font-bold data-[selected-single=true]:font-bold data-[today=true]:font-bold [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
 }

package/dist/enterprise/data-table/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState } from '@tanstack/react-table';
+import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState, type SortingState } from '@tanstack/react-table';
 import { type EmptyStateProps } from '../empty-state';
 /**
  * Per-column opt-in for ledger numeric alignment. Set `meta: { numeric: true }`
@@ -38,6 +38,39 @@ type RowSelectionProps<TData> = {
      */
     getRowSelectionLabel?: (row: TData) => string;
 };
+/**
+ * Sorting is CONTROLLED-ONLY and OPT-IN, mirroring the row-selection contract
+ * above: the table sets `manualSorting` and adds no sorted row model, so it
+ * never reorders rows. The consumer owns the order (it usually comes back
+ * sorted from the server); what the table owns is announcing the state in the
+ * one place ARIA defines for it, `aria-sort` on the `th`. Header content is
+ * typically a `<button>`, and `aria-sort` is not allowed on a button, so a
+ * consumer cannot put it there without failing axe `aria-allowed-attr`.
+ *
+ * GOTCHA, TanStack's own rule, not a new one: `getCanSort()` is
+ * `(columnDef.enableSorting ?? true) && (options.enableSorting ?? true) &&
+ * !!column.accessorFn`. A display column (an `id` plus a `cell`, no
+ * `accessorKey` or `accessorFn`) has no accessor, so it can never sort and
+ * gets no `aria-sort`. That is right for an actions column and surprising for
+ * a computed column: give a column you want announced an accessor, and give a
+ * column you want excluded `enableSorting: false`.
+ */
+type SortingProps = {
+    enableSorting?: false;
+    sorting?: never;
+    onSortingChange?: never;
+} | {
+    enableSorting: true;
+    /**
+     * Controlled sort state (TanStack `SortingState`). Single-entry:
+     * `aria-sort` is defined for one sorted header at a time, so a
+     * multi-entry `SortingState` is the consumer's responsibility and yields
+     * several non-`none` values.
+     */
+    sorting: SortingState;
+    /** Controlled sort updater (TanStack `OnChangeFn`). */
+    onSortingChange: OnChangeFn<SortingState>;
+};
 type DataTableBaseProps<TData> = {
     columns: ColumnDef<TData, unknown>[];
     data: TData[];
@@ -94,7 +127,7 @@ type DataTableBaseProps<TData> = {
      */
     footer?: React.ReactNode;
 };
-export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData>;
-export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
+export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData> & SortingProps;
+export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting, sorting, onSortingChange, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/enterprise/data-table/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"~~AAkDA~~,OAAO,~~EAIL~~,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,~~EAEvB~~,MAAM,uBAAuB,CAAA;AAc9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,CAAA;~~AA4E1B~~,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACP,EAAE,cAAc,CAAC,KAAK,CAAC,+~~BAySvB~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"AAuDA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,YAAY,GACb;IACE,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;CACxB,GACD;IACE,aAAa,EAAE,IAAI,CAAA;IACnB;;;;;OAKG;IACH,OAAO,EAAE,YAAY,CAAA;IACrB,uDAAuD;IACvD,eAAe,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;CAC1C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,GACxB,YAAY,CAAA;AA8Fd,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAqB,EACrB,OAAO,EACP,eAAe,EACf,aAAa,EACb,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACP,EAAE,cAAc,CAAC,KAAK,CAAC,+BAyTvB"}

package/dist/enterprise/data-table/index.js CHANGED Viewed

@@ -38,6 +38,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * page (indeterminate for partial), checkbox-cell clicks never bubble to
  * row-level handlers. With the flag off (the default), nothing changes.
  *
+ * Sorting is opt-in and controlled too: pass `enableSorting` plus `sorting` /
+ * `onSortingChange`. Rows are never reordered client-side (`manualSorting`, no
+ * sorted row model); what the flag buys is `aria-sort` on each sortable `th`.
+ * With the flag off (the default), no header carries the attribute.
+ *
  * Keyboard navigation is opt-in via `onRowActivate`: when present, rows get
  * a roving tabindex (Tab enters the table once at the anchor row; the next
  * Tab moves to the row's first tabbable child if it has one, otherwise out
@@ -77,6 +82,22 @@ const ROW_FOCUS_CLASS = 'focus-visible:outline focus-visible:outline-2 focus-vis
 function stopPropagation(event) {
     event.stopPropagation();
 }
+/**
+ * ARIA sort state for one header cell. `undefined` (attribute omitted) on a
+ * column that cannot sort, which covers both sorting-off tables and columns
+ * that opted out, so the attribute never claims a control the user does not
+ * have.
+ */
+function ariaSortFor(column) {
+    if (!column.getCanSort())
+        return undefined;
+    const sorted = column.getIsSorted();
+    if (sorted === 'asc')
+        return 'ascending';
+    if (sorted === 'desc')
+        return 'descending';
+    return 'none';
+}
 function SelectAllCheckbox({ table }) {
     const allSelected = table.getIsAllPageRowsSelected();
     const someSelected = table.getIsSomePageRowsSelected();
@@ -95,7 +116,7 @@ function createSelectionColumn(getLabel) {
         cell: ({ row }) => (0, jsx_runtime_1.jsx)(RowSelectionCheckbox, { row: row, getLabel: getLabel })
     };
 }
-function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className, headClassName, footer }) {
+function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting = false, sorting, onSortingChange, onRowActivate, rowHref, className, headClassName, footer }) {
     const tableColumns = (0, react_1.useMemo)(() => enableRowSelection
         ? [createSelectionColumn(getRowSelectionLabel), ...columns]
         : columns, [columns, enableRowSelection, getRowSelectionLabel]);
@@ -114,8 +135,16 @@ function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLa
         // types make the TS path require the controlled pair whenever selection is
         // enabled, so the dead-checkbox configuration is now unrepresentable.
         onRowSelectionChange: enableRowSelection ? onRowSelectionChange : undefined,
+        // Controlled-only as well, and deliberately without `getSortedRowModel`:
+        // `manualSorting` tells TanStack the rows arrive in the order the consumer
+        // already chose, so enabling sorting changes what the header ANNOUNCES,
+        // never what the body shows.
+        manualSorting: true,
+        enableSorting,
+        onSortingChange: enableSorting ? onSortingChange : undefined,
         state: {
-            rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined
+            rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined,
+            sorting: enableSorting ? (sorting ?? []) : undefined
         }
     });
     const colCount = tableColumns.length;
@@ -237,7 +266,9 @@ function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLa
                         ? 'No rows'
                         : `${rowCount} rows` }), (0, jsx_runtime_1.jsxs)(table_1.Table, { "aria-busy": loading ? 'true' : undefined, children: [(0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(table_1.TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
                                 const numeric = header.column.columnDef.meta?.numeric;
-                                return ((0, jsx_runtime_1.jsx)(table_1.TableHead, { align: numeric ? 'right' : undefined,
+                                return ((0, jsx_runtime_1.jsx)(table_1.TableHead, { align: numeric ? 'right' : undefined, "aria-sort": header.isPlaceholder
+                                        ? undefined
+                                        : ariaSortFor(header.column),
                                     // Only a column that DECLARED sizing gets an inline width;
                                     // everything else keeps the auto table layout it has today.
                                     style: (0, column_size_1.readPreferredColumnSize)(header.column), className: (0, utils_1.cn)(typography_1.LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName), children: header.isPlaceholder

package/dist/enterprise/date-range-picker/index.d.ts CHANGED Viewed

@@ -21,6 +21,13 @@ export type DateRangePickerProps = {
     fromLabel: ReactNode;
     toLabel: ReactNode;
     invalid?: boolean;
+    /**
+     * Marks the range as mandatory. Renders the library's required marker: the
+     * literal ' *' appended to both labels, exactly as `FormLabel` does. It is
+     * deliberately NOT mirrored as `aria-required` on the triggers: ARIA does not
+     * allow that attribute on `role="button"`.
+     */
+    required?: boolean;
     /** Wired as aria-describedby on both triggers while `invalid` is set. */
     errorId?: string;
     /** Trigger placeholder when unset. */
@@ -31,7 +38,18 @@ export type DateRangePickerProps = {
     clearLabel?: string;
     /** date-fns locale for the calendar. Defaults to en-US. */
     locale?: CalendarLocale;
+    /**
+     * Suspends the control. Both segments get the NATIVE `disabled` attribute,
+     * not an `aria-disabled` substitute: a trigger whose only job is to open a
+     * popover has no state worth keeping focusable, and native `disabled` is
+     * what takes it out of the tab order AND keeps the popover shut. That last
+     * part matters more than it looks: `PopoverContent` is portaled to
+     * `document.body`, so the calendar's Clear button is outside any wrapper a
+     * consumer could disable, and the closed popover is the only thing keeping
+     * it out of reach.
+     */
+    disabled?: boolean;
 };
-export declare function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid, errorId, placeholder, ariaLabel, clearLabel, locale }: DateRangePickerProps): import("react").JSX.Element;
+export declare function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid, required, errorId, placeholder, ariaLabel, clearLabel, locale, disabled }: DateRangePickerProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/enterprise/date-range-picker/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/date-range-picker/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AASnD;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAC7C,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;~~CACxB~~,CAAA;AAkCD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAe,EACf,OAAO,EACP,WAAwB,EACxB,SAA+B,EAC/B,UAAoB,EACpB,MAAa,~~EACd~~,EAAE,oBAAoB,+~~BAsHtB~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/date-range-picker/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AASnD;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAC7C,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAkCD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAe,EACf,QAAgB,EAChB,OAAO,EACP,WAAwB,EACxB,SAA+B,EAC/B,UAAoB,EACpB,MAAa,EACb,QAAgB,EACjB,EAAE,oBAAoB,+BAgJtB"}

package/dist/enterprise/date-range-picker/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * DateRangePicker — a two-segment popover range control.
  *
- * Two labelled mono trigger segments (from / to) each open the SAME two-month
+ * Two labelled trigger segments (from / to) each open the SAME two-month
  * react-day-picker range calendar over the same range selection. The external
  * contract is plain YYYY-MM-DD strings (empty string = unset) so state shapes
  * that speak `date_from`/`date_to` stay untouched. The picker guarantees
@@ -62,12 +62,22 @@ function toDayString(value) {
     const day = String(value.getDate()).padStart(2, '0');
     return `${year}-${month}-${day}`;
 }
-function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid = false, errorId, placeholder = 'Any date', ariaLabel = 'Select date range', clearLabel = 'Clear', locale = locale_1.enUS }) {
+function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid = false, required = false, errorId, placeholder = 'Any date', ariaLabel = 'Select date range', clearLabel = 'Clear', locale = locale_1.enUS, disabled = false }) {
     // Which segment's popover is open, if any. One root per segment means one open
     // state per segment; holding the identity of the open one here keeps them
     // mutually exclusive, so clicking "to" while "from" is open swaps the anchor
     // instead of stacking two calendars.
     const [openSegment, setOpenSegment] = (0, react_1.useState)(null);
+    // Suspending the control must FORGET which segment was open, not just hide
+    // it. The `open` prop below already shuts the popover in the same frame
+    // `disabled` flips, but a controlled Radix root never calls `onOpenChange`
+    // for a prop-driven close, so the identity survived: lifting `disabled`
+    // re-satisfied the same condition and the portaled calendar reopened with no
+    // user gesture, pulling focus into it.
+    (0, react_1.useEffect)(() => {
+        if (disabled)
+            setOpenSegment(null);
+    }, [disabled]);
     const fromDate = parseDay(value.from);
     const toDate = parseDay(value.to);
     const selected = fromDate || toDate ? { from: fromDate, to: toDate } : undefined;
@@ -81,11 +91,25 @@ function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabe
             to: toDayString(range?.to)
         });
     };
-    const triggerClass = (0, utils_1.cn)('border-input bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-mono text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive');
+    const triggerClass = (0, utils_1.cn)(
+    // border-shadcn-400, not border-input: `--input` is a SURFACE token and is
+    // white in the light theme, so the trigger had no visible edge next to the
+    // Input and Select it sits with. font-sans, not font-mono: the dates are
+    // figures in the body face with tabular figures, like every other figure in
+    // the console.
+    'border-shadcn-400 bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-sans text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive',
+    // Conditional rather than `disabled:` variants, matching how this file
+    // already applies `border-destructive`: with the prop absent the class
+    // string stays byte-identical to what consumers render today.
+    disabled && 'cursor-not-allowed opacity-50');
     // The one calendar, rendered inside whichever segment's popover is open. Both
     // segments read and write the SAME range selection, so which one you opened
     // changes only the anchor, never the state.
     const calendar = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: fromDate ?? toDate ?? new Date(), selected: selected, onSelect: onSelect, locale: locale }), (0, jsx_runtime_1.jsx)("div", { className: "border-border flex items-center justify-end border-t px-3 py-2", children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "plain", size: "small", disabled: !hasValue, onClick: () => onValueChange({ from: '', to: '' }), children: clearLabel }) })] }));
-    const renderSegment = (segment, id, label, dateValue) => ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: openSegment === segment, onOpenChange: (next) => setOpenSegment(next ? segment : null), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: id, children: label }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverTrigger, { type: "button", id: id, className: triggerClass, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), dateValue ? ((0, jsx_runtime_1.jsx)("span", { children: dateValue })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground font-sans", children: placeholder }))] })] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": ariaLabel, children: calendar })] }, segment));
+    const renderSegment = (segment, id, label, dateValue) => ((0, jsx_runtime_1.jsxs)(popover_1.Popover, {
+        // A disabled trigger cannot open a popover, but a surface that suspends
+        // itself WHILE one is open (a filter bar flipping to "show all") would
+        // otherwise leave the portaled calendar on screen with no way back to it.
+        open: !disabled && openSegment === segment, onOpenChange: (next) => setOpenSegment(next ? segment : null), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsxs)(label_1.Label, { htmlFor: id, children: [label, required ? ' *' : ''] }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverTrigger, { type: "button", id: id, className: triggerClass, disabled: disabled, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), dateValue ? ((0, jsx_runtime_1.jsx)("span", { children: dateValue })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground", children: placeholder }))] })] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": ariaLabel, children: calendar })] }, segment));
     return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end", children: [renderSegment('from', fromId, fromLabel, value.from), renderSegment('to', toId, toLabel, value.to)] }));
 }

package/dist/esm/components/form/date-picker-field/index.d.ts CHANGED Viewed

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar/index.js';
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * The calendar's locale type, taken straight off the Calendar props so the
+ * public signature stays the react-day-picker/date-fns `Locale` without this
+ * package taking a direct date-fns dependency.
+ */
+type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
 export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -16,6 +23,9 @@ export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
     align?: 'start' | 'center' | 'end';
     'data-testid'?: string;
     valueAsString?: boolean;
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
 };
-export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
+export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, locale, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-picker-field/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"~~AAqBA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;~~AACjC~~,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,~~oJAelE~~,oBAAoB,CAAC,CAAC,CAAC,~~sBA4FzB~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAkBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4JAgBlE,oBAAoB,CAAC,CAAC,CAAC,sBAiGzB,CAAA"}

package/dist/esm/components/form/date-picker-field/index.js CHANGED Viewed

@@ -8,7 +8,8 @@ import { cn } from '../../../lib/utils.js';
 import dayjs from 'dayjs';
 import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
-export const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, ...others }) => {
+import { enUS } from 'react-day-picker/locale';
+export const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, locale = enUS, ...others }) => {
     const [open, setOpen] = React.useState(false);
     return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
             const convertFieldValueToDate = (fieldValue) => {
@@ -33,6 +34,10 @@ export const DatePickerField = ({ name, label, tooltip, labelExtra, description,
             const handleSelect = (date) => {
                 field.onChange(convertDateToOutputFormat(date));
             };
-            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: dayjs(value).format(dateFormat) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "single", defaultMonth: value, selected: value, onSelect: handleSelect, disabled: disabled || readOnly }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: dayjs(value).format(dateFormat) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "single",
+                                    // `required` mirrors the field's own required: a required
+                                    // field is not emptied by a re-click; an optional one keeps
+                                    // react-day-picker's clear gesture.
+                                    required: required, defaultMonth: value, selected: value, onSelect: handleSelect, disabled: disabled || readOnly, locale: locale }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
         } }));
 };

package/dist/esm/components/form/date-range-field/index.d.ts CHANGED Viewed

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar/index.js';
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { type ComponentProps, ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * The calendar's locale type, taken straight off the Calendar props so the
+ * public signature stays the react-day-picker/date-fns `Locale` without this
+ * package taking a direct date-fns dependency.
+ */
+type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
 export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -15,7 +22,10 @@ export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
     numberOfMonths?: number;
     dateFormat?: string;
     align?: 'start' | 'center' | 'end';
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
     'data-testid'?: string;
 };
-export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
+export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, locale, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-range-field/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"~~AAqBA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;~~AAEjC~~,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,~~qJAejE~~,mBAAmB,CAAC,CAAC,CAAC,~~sBA0ExB~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAkBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6JAgBjE,mBAAmB,CAAC,CAAC,CAAC,sBA2ExB,CAAA"}

package/dist/esm/components/form/date-range-field/index.js CHANGED Viewed

@@ -8,10 +8,11 @@ import { cn } from '../../../lib/utils.js';
 import dayjs from 'dayjs';
 import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
-export const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', ...others }) => {
+import { enUS } from 'react-day-picker/locale';
+export const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', locale = enUS, ...others }) => {
     const [open, setOpen] = React.useState(false);
     return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
             const value = field.value;
-            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value?.from ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? (_jsxs(_Fragment, { children: [dayjs(value.from).format(dateFormat), " -", ' ', dayjs(value.to).format(dateFormat)] })) : (dayjs(value.from).format(dateFormat)) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value?.from ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? (_jsxs(_Fragment, { children: [dayjs(value.from).format(dateFormat), " -", ' ', dayjs(value.to).format(dateFormat)] })) : (dayjs(value.from).format(dateFormat)) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
         } }));
 };

package/dist/esm/components/form/date-time-picker-field/index.d.ts CHANGED Viewed

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar/index.js';
 import * as React from 'react';
-import { type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * The calendar's locale type, taken straight off the Calendar props so the
+ * public signature stays the react-day-picker/date-fns `Locale` without this
+ * package taking a direct date-fns dependency.
+ */
+type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
 export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -14,10 +21,13 @@ export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
     required?: boolean;
     dateFormat?: string;
     align?: 'start' | 'center' | 'end';
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
     'data-testid'?: string;
     minDate?: Date;
     maxDate?: Date;
     defaultTime?: string;
 };
-export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
+export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, locale, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-time-picker-field/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"~~AAsBA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;~~AACtC~~,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,~~oKAiBtE~~,wBAAwB,CAAC,CAAC,CAAC,~~sBAgK7B~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAmBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4KAkBtE,wBAAwB,CAAC,CAAC,CAAC,sBAiK7B,CAAA"}

package/dist/esm/components/form/date-time-picker-field/index.js CHANGED Viewed

@@ -9,7 +9,8 @@ import { cn } from '../../../lib/utils.js';
 import dayjs from 'dayjs';
 import { CalendarIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
-export const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', minDate, maxDate, defaultTime = '00:00', ...others }) => {
+import { enUS } from 'react-day-picker/locale';
+export const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', locale = enUS, minDate, maxDate, defaultTime = '00:00', ...others }) => {
     const [open, setOpen] = React.useState(false);
     const parseDefaultTime = (time) => {
         const [h, m] = time.split(':').map(Number);
@@ -58,7 +59,7 @@ export const DateTimePickerField = ({ name, label, tooltip, labelExtra, descript
                                                 e.preventDefault();
                                                 handleClear(e);
                                             }
-                                        }, children: _jsx(XIcon, { className: "size-4" }) }))] }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [_jsx(Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, disabled: (date) => {
+                                        }, children: _jsx(XIcon, { className: "size-4" }) }))] }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [_jsx(Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, locale: locale, disabled: (date) => {
                                                 if (disabled || readOnly)
                                                     return true;
                                                 if (minDate &&

package/dist/esm/components/page-header/index.d.ts CHANGED Viewed

@@ -27,8 +27,21 @@ export type PageHeaderInfoTitleProps = {
     /**
      * Seam for the wrapper element's own margins. Merged AFTER the hard-coded
      * `mb-12` so a consumer utility (e.g. `mb-0`) wins via tailwind-merge.
+     *
+     * It is also the way back to the old shrink-to-zero title box:
+     * `containerClassName="min-w-0"` simply lands, because the base string
+     * declares no `min-w-*` for tailwind-merge to weigh it against. Pass it only
+     * if a title box that a wide action slot can squeeze past its longest word
+     * is what the surface actually wants.
      */
     containerClassName?: string;
+    /**
+     * Rendered as their own row under the subtitle, wrapping, so a long identity
+     * tape never competes with the subtitle for the same line. This is the slot
+     * for things that IDENTIFY the record (short id, status, severity, counts),
+     * not for controls: buttons belong in the header's action slot, where the
+     * wrapper's `justify-between` keeps them right-aligned.
+     */
     children?: ReactNode;
 };
 export declare function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children, as: Heading }: PageHeaderInfoTitleProps): import("react").JSX.Element;

package/dist/esm/components/page-header/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,~~EAAiB~~,SAAS,EAAwB,MAAM,OAAO,CAAA;~~AAmBtE~~,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,aAAa,EACd,EAAE,eAAe,+BAmBjB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C~~;;;OAGG~~;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,EAAE,EAAE,OAAc,EACnB,EAAE,wBAAwB,+~~BAmB1B~~;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+BAqC5B;AAED,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACT,EAAE,qCAAqC,+BAavC;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACL,EAAE,8BAA8B,+BA+ChC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBhF,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,aAAa,EACd,EAAE,eAAe,+BAmBjB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,EAAE,EAAE,OAAc,EACnB,EAAE,wBAAwB,+BA2D1B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+BAqC5B;AAED,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACT,EAAE,qCAAqC,+BAavC;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACL,EAAE,8BAA8B,+BA+ChC"}

package/dist/esm/components/page-header/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from '../../lib/utils.js';
-import { createContext, useContext, useState } from 'react';
+import { Children, createContext, useContext, useState } from 'react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/ui/collapsible/index.js';
 import { Button } from '../ui/button/index.js';
 import { HelpCircle, ChevronUp, ExternalLink, Copy } from 'lucide-react';
@@ -20,7 +20,38 @@ export function PageHeader({ children, className, rootClassName }) {
     return (_jsx(PageHeaderContext.Provider, { value: { isOpen }, children: _jsx("div", { "data-slot": "page-header", className: cn('mt-12', isOpen && 'mb-12', rootClassName), children: _jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: children }) }) }));
 }
 export function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children, as: Heading = 'h1' }) {
-    return (_jsxs("div", { "data-slot": "page-header-info-title", className: cn('mb-12 flex flex-col gap-4', containerClassName), children: [_jsx(Heading, { className: cn('text-foreground text-4xl font-bold', className), "data-testid": "title", children: title }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: subtitle }), children] })] }));
+    return (_jsxs("div", { "data-slot": "page-header-info-title",
+        /*
+          Two utilities and one deliberate absence.
+          `flex-1` (basis 0) is #170: flex shrinking is shared in proportion to
+          flex-basis, so a title box at basis auto (its max-content width, which
+          a long subtitle inflates) absorbed almost none of the overflow and
+          starved the action row into one button per line. At basis 0 the line's
+          hypothetical size is the action row alone, so the row keeps its natural
+          width and the title grows into what is left, wrapping at spaces.
+          NO `min-w-0` is #174, and the absence is the fix. A flex item's
+          automatic minimum size is its own min-content, so left alone the box
+          cannot be squeezed below its longest word (of the title, the subtitle,
+          or a child chip) and nothing can overflow horizontally at any width.
+          beta.5 carried `min-w-0`, which waives that minimum: on Matcher's
+          exception-detail masthead the box collapsed to 68px and the `h1`
+          painted straight out of it and across the action row. That is gone.
+          A fixed floor was the other candidate and is wrong: any `sm:` gate keys
+          on the VIEWPORT while the overflow condition is the MASTHEAD width, so
+          a 1024px viewport with a 320px side panel open (a ~332px masthead)
+          would keep a 320px floor and scroll the body sideways.
+          The measured trade: on a masthead carrying a 520px action row the title
+          box shrinks to its longest word and the subtitle wraps to about three
+          lines. The remedy there is fewer controls in the action slot, not a
+          wider floor. A consumer that wants the collapse back passes
+          `containerClassName="min-w-0"`. jsdom does not lay out, so the geometry
+          is verified downstream.
+        */
+        className: cn('mb-12 flex flex-1 flex-col gap-4', containerClassName), children: [_jsx(Heading, { className: cn('text-foreground text-4xl font-bold', className), "data-testid": "title", children: title }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: subtitle }) }), Children.toArray(children).length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-2", children: children })) : null] }));
 }
 export function PageHeaderInfoTooltip({ subtitle }) {
     const { toast } = useToast();

package/dist/esm/components/ui/calendar/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,~~qBA2CxC~~;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBAqCxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/esm/components/ui/calendar/index.js CHANGED Viewed

@@ -68,12 +68,9 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
         if (modifiers.focused)
             ref.current?.focus();
     }, [modifiers.focused]);
-    const dayNumber = day.date.getDate();
-    const monthName = day.date.toLocaleDateString('en', { month: 'long' });
-    const year = day.date.getFullYear();
     return (_jsx(Button, { ref: ref, variant: "plain", size: "small", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "data-today": modifiers.today && !modifiers.range_middle, "aria-label": `${monthName} ${dayNumber}, ${year}`, "aria-selected": modifiers.selected, "aria-current": modifiers.today ? 'date' : undefined, "aria-disabled": modifiers.disabled, role: "gridcell", tabIndex: modifiers.focused ? 0 : -1, className: cn('data-[today=true]:bg-accent data-[today=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground data-[range-middle=true]:bg-accent-mute data-[range-middle=true]:text-foreground data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground focus-visible:border-accent focus-visible:ring-accent/50 relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal focus-visible:ring-[3px] focus-visible:outline-none data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:font-bold data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:font-bold data-[selected-single=true]:font-bold data-[today=true]:font-bold [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "data-today": modifiers.today && !modifiers.range_middle, "aria-current": modifiers.today ? 'date' : undefined, className: cn('data-[today=true]:bg-accent data-[today=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground data-[range-middle=true]:bg-accent-mute data-[range-middle=true]:text-foreground data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground focus-visible:border-accent focus-visible:ring-accent/50 relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal focus-visible:ring-[3px] focus-visible:outline-none data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:font-bold data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:font-bold data-[selected-single=true]:font-bold data-[today=true]:font-bold [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
 }
 export { Calendar, CalendarDayButton };

package/dist/esm/enterprise/data-table/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState } from '@tanstack/react-table';
+import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState, type SortingState } from '@tanstack/react-table';
 import { type EmptyStateProps } from '../empty-state/index.js';
 /**
  * Per-column opt-in for ledger numeric alignment. Set `meta: { numeric: true }`
@@ -38,6 +38,39 @@ type RowSelectionProps<TData> = {
      */
     getRowSelectionLabel?: (row: TData) => string;
 };
+/**
+ * Sorting is CONTROLLED-ONLY and OPT-IN, mirroring the row-selection contract
+ * above: the table sets `manualSorting` and adds no sorted row model, so it
+ * never reorders rows. The consumer owns the order (it usually comes back
+ * sorted from the server); what the table owns is announcing the state in the
+ * one place ARIA defines for it, `aria-sort` on the `th`. Header content is
+ * typically a `<button>`, and `aria-sort` is not allowed on a button, so a
+ * consumer cannot put it there without failing axe `aria-allowed-attr`.
+ *
+ * GOTCHA, TanStack's own rule, not a new one: `getCanSort()` is
+ * `(columnDef.enableSorting ?? true) && (options.enableSorting ?? true) &&
+ * !!column.accessorFn`. A display column (an `id` plus a `cell`, no
+ * `accessorKey` or `accessorFn`) has no accessor, so it can never sort and
+ * gets no `aria-sort`. That is right for an actions column and surprising for
+ * a computed column: give a column you want announced an accessor, and give a
+ * column you want excluded `enableSorting: false`.
+ */
+type SortingProps = {
+    enableSorting?: false;
+    sorting?: never;
+    onSortingChange?: never;
+} | {
+    enableSorting: true;
+    /**
+     * Controlled sort state (TanStack `SortingState`). Single-entry:
+     * `aria-sort` is defined for one sorted header at a time, so a
+     * multi-entry `SortingState` is the consumer's responsibility and yields
+     * several non-`none` values.
+     */
+    sorting: SortingState;
+    /** Controlled sort updater (TanStack `OnChangeFn`). */
+    onSortingChange: OnChangeFn<SortingState>;
+};
 type DataTableBaseProps<TData> = {
     columns: ColumnDef<TData, unknown>[];
     data: TData[];
@@ -94,7 +127,7 @@ type DataTableBaseProps<TData> = {
      */
     footer?: React.ReactNode;
 };
-export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData>;
-export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
+export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData> & SortingProps;
+export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting, sorting, onSortingChange, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/data-table/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"~~AAkDA~~,OAAO,~~EAIL~~,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,~~EAEvB~~,MAAM,uBAAuB,CAAA;AAc9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,CAAA;~~AA4E1B~~,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACP,EAAE,cAAc,CAAC,KAAK,CAAC,+~~BAySvB~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"AAuDA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,YAAY,GACb;IACE,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;CACxB,GACD;IACE,aAAa,EAAE,IAAI,CAAA;IACnB;;;;;OAKG;IACH,OAAO,EAAE,YAAY,CAAA;IACrB,uDAAuD;IACvD,eAAe,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;CAC1C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,GACxB,YAAY,CAAA;AA8Fd,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAqB,EACrB,OAAO,EACP,eAAe,EACf,aAAa,EACb,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACP,EAAE,cAAc,CAAC,KAAK,CAAC,+BAyTvB"}

package/dist/esm/enterprise/data-table/index.js CHANGED Viewed

@@ -35,6 +35,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * page (indeterminate for partial), checkbox-cell clicks never bubble to
  * row-level handlers. With the flag off (the default), nothing changes.
  *
+ * Sorting is opt-in and controlled too: pass `enableSorting` plus `sorting` /
+ * `onSortingChange`. Rows are never reordered client-side (`manualSorting`, no
+ * sorted row model); what the flag buys is `aria-sort` on each sortable `th`.
+ * With the flag off (the default), no header carries the attribute.
+ *
  * Keyboard navigation is opt-in via `onRowActivate`: when present, rows get
  * a roving tabindex (Tab enters the table once at the anchor row; the next
  * Tab moves to the row's first tabbable child if it has one, otherwise out
@@ -74,6 +79,22 @@ const ROW_FOCUS_CLASS = 'focus-visible:outline focus-visible:outline-2 focus-vis
 function stopPropagation(event) {
     event.stopPropagation();
 }
+/**
+ * ARIA sort state for one header cell. `undefined` (attribute omitted) on a
+ * column that cannot sort, which covers both sorting-off tables and columns
+ * that opted out, so the attribute never claims a control the user does not
+ * have.
+ */
+function ariaSortFor(column) {
+    if (!column.getCanSort())
+        return undefined;
+    const sorted = column.getIsSorted();
+    if (sorted === 'asc')
+        return 'ascending';
+    if (sorted === 'desc')
+        return 'descending';
+    return 'none';
+}
 function SelectAllCheckbox({ table }) {
     const allSelected = table.getIsAllPageRowsSelected();
     const someSelected = table.getIsSomePageRowsSelected();
@@ -92,7 +113,7 @@ function createSelectionColumn(getLabel) {
         cell: ({ row }) => _jsx(RowSelectionCheckbox, { row: row, getLabel: getLabel })
     };
 }
-export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className, headClassName, footer }) {
+export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting = false, sorting, onSortingChange, onRowActivate, rowHref, className, headClassName, footer }) {
     const tableColumns = useMemo(() => enableRowSelection
         ? [createSelectionColumn(getRowSelectionLabel), ...columns]
         : columns, [columns, enableRowSelection, getRowSelectionLabel]);
@@ -111,8 +132,16 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
         // types make the TS path require the controlled pair whenever selection is
         // enabled, so the dead-checkbox configuration is now unrepresentable.
         onRowSelectionChange: enableRowSelection ? onRowSelectionChange : undefined,
+        // Controlled-only as well, and deliberately without `getSortedRowModel`:
+        // `manualSorting` tells TanStack the rows arrive in the order the consumer
+        // already chose, so enabling sorting changes what the header ANNOUNCES,
+        // never what the body shows.
+        manualSorting: true,
+        enableSorting,
+        onSortingChange: enableSorting ? onSortingChange : undefined,
         state: {
-            rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined
+            rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined,
+            sorting: enableSorting ? (sorting ?? []) : undefined
         }
     });
     const colCount = tableColumns.length;
@@ -234,7 +263,9 @@ export function DataTable({ columns, data, loading = false, skeletonRows = 8, lo
                         ? 'No rows'
                         : `${rowCount} rows` }), _jsxs(Table, { "aria-busy": loading ? 'true' : undefined, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
                                 const numeric = header.column.columnDef.meta?.numeric;
-                                return (_jsx(TableHead, { align: numeric ? 'right' : undefined,
+                                return (_jsx(TableHead, { align: numeric ? 'right' : undefined, "aria-sort": header.isPlaceholder
+                                        ? undefined
+                                        : ariaSortFor(header.column),
                                     // Only a column that DECLARED sizing gets an inline width;
                                     // everything else keeps the auto table layout it has today.
                                     style: readPreferredColumnSize(header.column), className: cn(LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName), children: header.isPlaceholder

package/dist/esm/enterprise/date-range-picker/index.d.ts CHANGED Viewed

@@ -21,6 +21,13 @@ export type DateRangePickerProps = {
     fromLabel: ReactNode;
     toLabel: ReactNode;
     invalid?: boolean;
+    /**
+     * Marks the range as mandatory. Renders the library's required marker: the
+     * literal ' *' appended to both labels, exactly as `FormLabel` does. It is
+     * deliberately NOT mirrored as `aria-required` on the triggers: ARIA does not
+     * allow that attribute on `role="button"`.
+     */
+    required?: boolean;
     /** Wired as aria-describedby on both triggers while `invalid` is set. */
     errorId?: string;
     /** Trigger placeholder when unset. */
@@ -31,7 +38,18 @@ export type DateRangePickerProps = {
     clearLabel?: string;
     /** date-fns locale for the calendar. Defaults to en-US. */
     locale?: CalendarLocale;
+    /**
+     * Suspends the control. Both segments get the NATIVE `disabled` attribute,
+     * not an `aria-disabled` substitute: a trigger whose only job is to open a
+     * popover has no state worth keeping focusable, and native `disabled` is
+     * what takes it out of the tab order AND keeps the popover shut. That last
+     * part matters more than it looks: `PopoverContent` is portaled to
+     * `document.body`, so the calendar's Clear button is outside any wrapper a
+     * consumer could disable, and the closed popover is the only thing keeping
+     * it out of reach.
+     */
+    disabled?: boolean;
 };
-export declare function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid, errorId, placeholder, ariaLabel, clearLabel, locale }: DateRangePickerProps): import("react").JSX.Element;
+export declare function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid, required, errorId, placeholder, ariaLabel, clearLabel, locale, disabled }: DateRangePickerProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/date-range-picker/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/date-range-picker/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AASnD;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAC7C,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;~~CACxB~~,CAAA;AAkCD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAe,EACf,OAAO,EACP,WAAwB,EACxB,SAA+B,EAC/B,UAAoB,EACpB,MAAa,~~EACd~~,EAAE,oBAAoB,+~~BAsHtB~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/date-range-picker/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AASnD;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAC7C,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAkCD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAe,EACf,QAAgB,EAChB,OAAO,EACP,WAAwB,EACxB,SAA+B,EAC/B,UAAoB,EACpB,MAAa,EACb,QAAgB,EACjB,EAAE,oBAAoB,+BAgJtB"}

package/dist/esm/enterprise/date-range-picker/index.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 /**
  * DateRangePicker — a two-segment popover range control.
  *
- * Two labelled mono trigger segments (from / to) each open the SAME two-month
+ * Two labelled trigger segments (from / to) each open the SAME two-month
  * react-day-picker range calendar over the same range selection. The external
  * contract is plain YYYY-MM-DD strings (empty string = unset) so state shapes
  * that speak `date_from`/`date_to` stay untouched. The picker guarantees
@@ -20,7 +20,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * popover closed. Each segment is now a real `PopoverTrigger` button: focusable,
  * correctly named, and the element Radix returns focus to on dismissal.
  */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { CalendarDays } from 'lucide-react';
 import { enUS } from 'react-day-picker/locale';
 import { Button } from '../../components/ui/button/index.js';
@@ -59,12 +59,22 @@ function toDayString(value) {
     const day = String(value.getDate()).padStart(2, '0');
     return `${year}-${month}-${day}`;
 }
-export function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid = false, errorId, placeholder = 'Any date', ariaLabel = 'Select date range', clearLabel = 'Clear', locale = enUS }) {
+export function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid = false, required = false, errorId, placeholder = 'Any date', ariaLabel = 'Select date range', clearLabel = 'Clear', locale = enUS, disabled = false }) {
     // Which segment's popover is open, if any. One root per segment means one open
     // state per segment; holding the identity of the open one here keeps them
     // mutually exclusive, so clicking "to" while "from" is open swaps the anchor
     // instead of stacking two calendars.
     const [openSegment, setOpenSegment] = useState(null);
+    // Suspending the control must FORGET which segment was open, not just hide
+    // it. The `open` prop below already shuts the popover in the same frame
+    // `disabled` flips, but a controlled Radix root never calls `onOpenChange`
+    // for a prop-driven close, so the identity survived: lifting `disabled`
+    // re-satisfied the same condition and the portaled calendar reopened with no
+    // user gesture, pulling focus into it.
+    useEffect(() => {
+        if (disabled)
+            setOpenSegment(null);
+    }, [disabled]);
     const fromDate = parseDay(value.from);
     const toDate = parseDay(value.to);
     const selected = fromDate || toDate ? { from: fromDate, to: toDate } : undefined;
@@ -78,11 +88,25 @@ export function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel,
             to: toDayString(range?.to)
         });
     };
-    const triggerClass = cn('border-input bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-mono text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive');
+    const triggerClass = cn(
+    // border-shadcn-400, not border-input: `--input` is a SURFACE token and is
+    // white in the light theme, so the trigger had no visible edge next to the
+    // Input and Select it sits with. font-sans, not font-mono: the dates are
+    // figures in the body face with tabular figures, like every other figure in
+    // the console.
+    'border-shadcn-400 bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-sans text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive',
+    // Conditional rather than `disabled:` variants, matching how this file
+    // already applies `border-destructive`: with the prop absent the class
+    // string stays byte-identical to what consumers render today.
+    disabled && 'cursor-not-allowed opacity-50');
     // The one calendar, rendered inside whichever segment's popover is open. Both
     // segments read and write the SAME range selection, so which one you opened
     // changes only the anchor, never the state.
     const calendar = (_jsxs(_Fragment, { children: [_jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: fromDate ?? toDate ?? new Date(), selected: selected, onSelect: onSelect, locale: locale }), _jsx("div", { className: "border-border flex items-center justify-end border-t px-3 py-2", children: _jsx(Button, { type: "button", variant: "plain", size: "small", disabled: !hasValue, onClick: () => onValueChange({ from: '', to: '' }), children: clearLabel }) })] }));
-    const renderSegment = (segment, id, label, dateValue) => (_jsxs(Popover, { open: openSegment === segment, onOpenChange: (next) => setOpenSegment(next ? segment : null), children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(PopoverTrigger, { type: "button", id: id, className: triggerClass, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, children: [_jsx(CalendarDays, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), dateValue ? (_jsx("span", { children: dateValue })) : (_jsx("span", { className: "text-muted-foreground font-sans", children: placeholder }))] })] }), _jsx(PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": ariaLabel, children: calendar })] }, segment));
+    const renderSegment = (segment, id, label, dateValue) => (_jsxs(Popover, {
+        // A disabled trigger cannot open a popover, but a surface that suspends
+        // itself WHILE one is open (a filter bar flipping to "show all") would
+        // otherwise leave the portaled calendar on screen with no way back to it.
+        open: !disabled && openSegment === segment, onOpenChange: (next) => setOpenSegment(next ? segment : null), children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Label, { htmlFor: id, children: [label, required ? ' *' : ''] }), _jsxs(PopoverTrigger, { type: "button", id: id, className: triggerClass, disabled: disabled, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, children: [_jsx(CalendarDays, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), dateValue ? (_jsx("span", { children: dateValue })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder }))] })] }), _jsx(PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": ariaLabel, children: calendar })] }, segment));
     return (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end", children: [renderSegment('from', fromId, fromLabel, value.from), renderSegment('to', toId, toLabel, value.to)] }));
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.4.0-beta.4",
+  "version": "1.4.0-beta.6",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {