@caratlogic/design-system 0.0.7 → 0.0.8

package/dist/components/molecules/ConfirmDialog/ConfirmDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwE/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoE/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/molecules/ConfirmDialog/ConfirmDialog.types.d.ts

@@ -1,4 +1,5 @@
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { LucideIcon } from 'lucide-react';
 export interface ConfirmDialogInfo {
     invoiceNumber?: string;
     invoiceDate?: string;
@@ -18,6 +19,8 @@ export interface ConfirmDialogProps {
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'default' | 'destructive' | 'secondary' | 'outline';
+    /** Icon shown in the header badge and confirm button. Defaults to `Trash2`. Only rendered for the `destructive` variant. */
+    icon?: LucideIcon;
     disabled?: boolean;
     /** Receives `refundToWallet` when applicable (the Cancel Invoice flow). */
     onConfirm: (refundToWallet?: boolean) => Promise<void> | void;

package/dist/components/molecules/ConfirmDialog/ConfirmDialog.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ConfirmDialog/ConfirmDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACtD"}
+{"version":3,"file":"ConfirmDialog.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ConfirmDialog/ConfirmDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,CAAC;IACrE,4HAA4H;IAC5H,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACtD"}

package/dist/components/molecules/DateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DateInput/DateInput.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,4CAA4C,CAAC;AACpD,OAAO,yBAAyB,CAAC;AAEjC,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,SAAS,EACT,GAAG,EACH,GAAG,EACH,QAAQ,EACR,WAA2B,GAC5B,EAAE,cAAc,2CAuGhB"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DateInput/DateInput.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,4CAA4C,CAAC;AACpD,OAAO,yBAAyB,CAAC;AAEjC,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,SAAS,EACT,GAAG,EACH,GAAG,EACH,QAAQ,EACR,WAA2B,GAC5B,EAAE,cAAc,2CA+GhB"}

package/dist/index.cjs.js

@@ -12576,7 +12576,7 @@ var Popover$1 = (props) => {
 };
 Popover$1.displayName = POPOVER_NAME;
 var ANCHOR_NAME$2 = "PopoverAnchor";
-var PopoverAnchor = React__namespace.forwardRef(
+var PopoverAnchor$1 = React__namespace.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopover, ...anchorProps } = props;
     const context = usePopoverContext(ANCHOR_NAME$2, __scopePopover);
@@ -12589,7 +12589,7 @@ var PopoverAnchor = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Anchor$1, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }
 );
-PopoverAnchor.displayName = ANCHOR_NAME$2;
+PopoverAnchor$1.displayName = ANCHOR_NAME$2;
 var TRIGGER_NAME$5 = "PopoverTrigger";
 var PopoverTrigger$1 = React__namespace.forwardRef(
   (props, forwardedRef) => {
@@ -12809,6 +12809,7 @@ function getState$2(open) {
   return open ? "open" : "closed";
 }
 var Root2$3 = Popover$1;
+var Anchor2$1 = PopoverAnchor$1;
 var Trigger$4 = PopoverTrigger$1;
 var Portal$4 = PopoverPortal;
 var Content2$4 = PopoverContent$1;
@@ -12822,6 +12823,9 @@ function PopoverTrigger({ ...props }) {
 function PopoverContent({ className, align = 'center', sideOffset = 8, ...props }) {
     return (jsxRuntime.jsx(Portal$4, { children: jsxRuntime.jsx(Content2$4, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
 }
+function PopoverAnchor({ ...props }) {
+    return jsxRuntime.jsx(Anchor2$1, { "data-slot": "popover-anchor", ...props });
+}
 
 const SCROLL_THRESHOLD = 50;
 function useSearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLabel, getOptionSubLabel, fetchPage, staticOptions, filterFn, preSelectedId, resolveById, pageSize, debounceMs, }) {
@@ -20950,14 +20954,14 @@ function useRefundToWallet(open) {
     return { refundToWallet, setRefundToWallet };
 }
 
-const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', disabled = false, onConfirm, onCancel, }) => {
+const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', icon: Icon = Trash2, disabled = false, onConfirm, onCancel, }) => {
     const { refundToWallet, setRefundToWallet } = useRefundToWallet(open);
-    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsxRuntime.jsx("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsxRuntime.jsx(Trash2, { className: "h-4 w-4 text-destructive" }) })), jsxRuntime.jsx("span", { children: title })] }), description && (jsxRuntime.jsx(DialogDescription, { className: "mt-2", children: description })), info && (jsxRuntime.jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxRuntime.jsxs(DialogFooter, { className: "mt-4", children: [jsxRuntime.jsx(Button$1, { variant: "outline", onClick: () => {
+    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(DialogContent, { className: "gap-3 p-5", children: [jsxRuntime.jsxs(DialogHeader, { className: "gap-1.5", children: [jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsxRuntime.jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 text-destructive" }) })), jsxRuntime.jsx("span", { children: title })] }), description && jsxRuntime.jsx(DialogDescription, { children: description }), info && (jsxRuntime.jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxRuntime.jsxs(DialogFooter, { className: "mt-1", children: [jsxRuntime.jsx(Button$1, { variant: "outline", onClick: () => {
                                 onCancel?.();
                                 onOpenChange(false);
                             }, disabled: disabled, children: cancelLabel }), jsxRuntime.jsxs(Button$1, { variant: confirmVariant, onClick: async () => {
                                 await onConfirm(title === 'Cancel Invoice' ? refundToWallet : undefined);
-                            }, disabled: disabled, className: "ml-3", children: [confirmVariant === 'destructive' && (jsxRuntime.jsx(Trash2, { className: "mr-1.5 h-4 w-4", "aria-hidden": true })), disabled ? 'Please wait...' : confirmLabel] })] })] }) }));
+                            }, disabled: disabled, children: [confirmVariant === 'destructive' && (jsxRuntime.jsx(Icon, { className: "h-4 w-4", "aria-hidden": true })), disabled ? 'Please wait...' : confirmLabel] })] })] }) }));
 };
 
 /** Class builder for a segment button in the `segmented` variant. */
@@ -34747,11 +34751,18 @@ function DatePickerHeader({ monthDate, changeYear, changeMonth, decreaseMonth, i
 function DateInput({ value, onChange, onBlur, name, className, min, max, disabled, placeholder = 'Select date', }) {
     const [open, setOpen] = React.useState(false);
     const { minDate, maxDate, minYear, maxYear } = computeDateBounds(min, max);
-    const openPicker = () => {
-        if (!disabled)
-            setOpen(true);
-    };
-    return (jsxRuntime.jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", name: name, onBlur: onBlur, onClick: openPicker, disabled: disabled, "data-slot": "input", "data-empty": !value || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-left shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', disabled && 'cursor-not-allowed bg-muted text-label', className), children: [jsxRuntime.jsx("span", { className: cn('truncate text-sm md:text-sm', value ? 'text-foreground' : 'text-placeholder'), children: value ? moment(value).format('DD/MM/YYYY') : placeholder }), jsxRuntime.jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", children: jsxRuntime.jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsxRuntime.jsx(PopoverContent, { align: "start", className: "date-range-picker-popover w-auto p-4", children: jsxRuntime.jsx(DatePicker, { inline: true, selected: value ?? null, minDate: minDate ? moment(minDate, 'YYYY-MM-DD').toDate() : undefined, maxDate: maxDate ? moment(maxDate, 'YYYY-MM-DD').toDate() : undefined, onChange: (date) => {
+    // NOTE: We drive `open` ourselves from the button's onClick instead of using
+    // Radix's <PopoverTrigger> toggle. When this Popover is nested inside the
+    // modal <SlideOut> (Radix Dialog), the trigger's built-in toggle does not
+    // fire in Safari, so the calendar never opened. Using <PopoverAnchor> (pure
+    // positioning, no event handlers) + a single controlled toggle is the one
+    // 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 (jsxRuntime.jsxs(Popover, { open: open, onOpenChange: setOpen, modal: true, children: [jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", name: name, onBlur: onBlur, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => {
+                        if (!disabled)
+                            setOpen((prev) => !prev);
+                    }, "data-slot": "input", "data-empty": !value || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-left shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', disabled && 'cursor-not-allowed bg-muted text-label', className), children: [jsxRuntime.jsx("span", { className: cn('truncate text-sm md:text-sm', value ? 'text-foreground' : 'text-placeholder'), children: value ? moment(value).format('DD/MM/YYYY') : placeholder }), jsxRuntime.jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", children: jsxRuntime.jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsxRuntime.jsx(PopoverContent, { align: "start", className: "date-range-picker-popover w-auto p-4", children: jsxRuntime.jsx(DatePicker, { inline: true, selected: value ?? null, minDate: minDate ? moment(minDate, 'YYYY-MM-DD').toDate() : undefined, maxDate: maxDate ? moment(maxDate, 'YYYY-MM-DD').toDate() : undefined, onChange: (date) => {
                         onChange(date ?? undefined);
                         if (date)
                             setOpen(false);