@caratlogic/design-system 0.1.25 → 0.1.26

package/dist/index.esm.js

@@ -15250,7 +15250,7 @@ const isFilterActive = (value, resetValue) => !!value && value !== resetValue;
  * `FilterSelect` trigger look (filter icon + count badge when active).
  * Selecting items keeps the popover open; the trigger shows the count.
  */
-const FilterMultiSelect = ({ label, value, onChange, options, triggerClassName, contentClassName, }) => {
+const FilterMultiSelect = ({ label, value, onChange, options, triggerClassName, contentClassName, listClassName, modal = false, }) => {
     const active = value.length > 0;
     const toggle = (optValue) => {
         if (value.includes(optValue)) {
@@ -15260,7 +15260,7 @@ const FilterMultiSelect = ({ label, value, onChange, options, triggerClassName,
             onChange([...value, optValue]);
         }
     };
-    return (jsxs(Popover, { children: [jsx(PopoverTrigger, { className: cn(TRIGGER_BASE, 'inline-flex items-center justify-between', active && TRIGGER_ACTIVE, triggerClassName), children: jsxs("span", { className: "flex items-center gap-2", children: [jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), label, active && (jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-semibold leading-none text-primary", children: value.length }))] }) }), jsx(PopoverContent, { align: "start", className: cn('w-56 p-1', contentClassName), children: jsx("div", { className: "max-h-[18rem] overflow-y-auto", children: options.map((opt) => {
+    return (jsxs(Popover, { modal: modal, children: [jsx(PopoverTrigger, { className: cn(TRIGGER_BASE, 'inline-flex items-center justify-between', active && TRIGGER_ACTIVE, triggerClassName), children: jsxs("span", { className: "flex items-center gap-2", children: [jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), label, active && (jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-semibold leading-none text-primary", children: value.length }))] }) }), jsx(PopoverContent, { align: "start", className: cn('w-56 p-1', contentClassName), children: jsx("div", { className: cn('max-h-[18rem] overflow-y-auto', listClassName), children: options.map((opt) => {
                         const checked = value.includes(opt.value);
                         return (jsxs("button", { type: "button", onClick: () => toggle(opt.value), className: "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-foreground hover:bg-muted/60", children: [jsx(Checkbox, { checked: checked, onCheckedChange: () => toggle(opt.value), 
                                     // Stop the inner checkbox click from double-toggling via the button.
@@ -37058,7 +37058,7 @@ styleInject(css_248z$1);
  * Date field that can be typed or picked. The text box takes a masked
  * `DD/MM/YYYY` entry; the trailing button opens the same calendar as before.
  */
-function DateInput({ value, onChange, onBlur, name, id, className, min, max, disabled, placeholder = DATE_FORMAT, ariaLabel, }) {
+function DateInput({ value, onChange, onBlur, name, id, className, min, max, disabled, placeholder = DATE_FORMAT, ariaLabel, align = 'start', }) {
     const { open, text, invalid, bounds, inputRef, handleOpenChange, handleTextChange, handleKeyDown, handleTextBlur, toggleOpen, selectDate, clearDate, selectToday, } = useDateInput({ value, onChange, onBlur, min, max, disabled });
     // NOTE: We drive `open` ourselves from the button's onClick instead of using
     // Radix's <PopoverTrigger> toggle. When this Popover is nested inside the
@@ -37068,7 +37068,7 @@ function DateInput({ value, onChange, onBlur, name, id, className, min, max, dis
     // source of truth — no double-fire, and it works across browsers. `modal`
     // lets the open popover own pointer events above the dialog so the calendar
     // (portalled to <body>) stays clickable.
-    return (jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: true, children: [jsx(PopoverAnchor, { asChild: true, children: jsxs("div", { "data-slot": "input", "data-empty": !value || undefined, "data-invalid": invalid || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 py-1 shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]', 'data-[invalid]:border-destructive data-[invalid]:ring-destructive/20 data-[invalid]:ring-[3px]', disabled && 'cursor-not-allowed bg-muted/50 text-label', className), children: [jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "off", spellCheck: false, id: id, name: name, value: text, placeholder: placeholder, disabled: disabled, maxLength: DATE_FORMAT.length, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, title: DATE_FORMAT_HINT, onChange: handleTextChange, onKeyDown: handleKeyDown, onBlur: handleTextBlur, className: "placeholder:text-placeholder selection:bg-primary selection:text-primary-foreground h-full min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-sm disabled:cursor-not-allowed disabled:text-label md:text-sm" }), jsx("button", { type: "button", disabled: disabled, "aria-label": CALENDAR_BUTTON_LABEL, "aria-haspopup": "dialog", "aria-expanded": open, onClick: toggleOpen, className: "-mr-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-[2px] disabled:cursor-not-allowed", children: jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsx(PopoverContent, { align: "start", className: "date-range-picker-popover w-auto p-4", children: jsx(DatePicker, { inline: true, selected: value ?? null, minDate: toBoundDate(bounds.minDate), maxDate: toBoundDate(bounds.maxDate), onChange: selectDate, calendarClassName: "date-range-picker-calendar", formatWeekDay: (weekday) => weekday.slice(0, 2), renderCustomHeader: ({ monthDate, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (jsx(DatePickerHeader, { monthDate: monthDate, changeYear: changeYear, changeMonth: changeMonth, decreaseMonth: decreaseMonth, increaseMonth: increaseMonth, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, minYear: bounds.minYear, maxYear: bounds.maxYear })), children: jsxs("div", { className: "date-range-picker-footer", children: [jsx("button", { type: "button", onClick: clearDate, className: "date-range-picker-action", children: "Clear" }), jsx("button", { type: "button", onClick: selectToday, className: "date-range-picker-action", children: "Today" })] }) }) })] }));
+    return (jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: true, children: [jsx(PopoverAnchor, { asChild: true, children: jsxs("div", { "data-slot": "input", "data-empty": !value || undefined, "data-invalid": invalid || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 py-1 shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]', 'data-[invalid]:border-destructive data-[invalid]:ring-destructive/20 data-[invalid]:ring-[3px]', disabled && 'cursor-not-allowed bg-muted/50 text-label', className), children: [jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "off", spellCheck: false, id: id, name: name, value: text, placeholder: placeholder, disabled: disabled, maxLength: DATE_FORMAT.length, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, title: DATE_FORMAT_HINT, onChange: handleTextChange, onKeyDown: handleKeyDown, onBlur: handleTextBlur, className: "placeholder:text-placeholder selection:bg-primary selection:text-primary-foreground h-full min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-sm disabled:cursor-not-allowed disabled:text-label md:text-sm" }), jsx("button", { type: "button", disabled: disabled, "aria-label": CALENDAR_BUTTON_LABEL, "aria-haspopup": "dialog", "aria-expanded": open, onClick: toggleOpen, className: "-mr-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-[2px] disabled:cursor-not-allowed", children: jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsx(PopoverContent, { align: align, className: "date-range-picker-popover w-auto p-4", children: jsx(DatePicker, { inline: true, selected: value ?? null, minDate: toBoundDate(bounds.minDate), maxDate: toBoundDate(bounds.maxDate), onChange: selectDate, calendarClassName: "date-range-picker-calendar", formatWeekDay: (weekday) => weekday.slice(0, 2), renderCustomHeader: ({ monthDate, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (jsx(DatePickerHeader, { monthDate: monthDate, changeYear: changeYear, changeMonth: changeMonth, decreaseMonth: decreaseMonth, increaseMonth: increaseMonth, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, minYear: bounds.minYear, maxYear: bounds.maxYear })), children: jsxs("div", { className: "date-range-picker-footer", children: [jsx("button", { type: "button", onClick: clearDate, className: "date-range-picker-action", children: "Clear" }), jsx("button", { type: "button", onClick: selectToday, className: "date-range-picker-action", children: "Today" })] }) }) })] }));
 }
 
 const DropdownMenu = DropdownMenuPrimitive.Root;