@bizapps/design-system-testing 1.9.0 → 1.10.0

package/dist/main.cjs

@@ -26,7 +26,9 @@ require('temporal-polyfill/global');
 var temporalPolyfill = require('temporal-polyfill');
 var reactHookForm = require('react-hook-form');
 var zod = require('@hookform/resolvers/zod');
+var confetti = require('canvas-confetti');
 var reactTable = require('@tanstack/react-table');
+var SignaturePadLib = require('signature_pad');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -51,6 +53,8 @@ function _interopNamespace(e) {
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 var countryFlags__namespace = /*#__PURE__*/_interopNamespace(countryFlags);
 var Color__default = /*#__PURE__*/_interopDefault(Color);
+var confetti__default = /*#__PURE__*/_interopDefault(confetti);
+var SignaturePadLib__default = /*#__PURE__*/_interopDefault(SignaturePadLib);
 
 // src/components/ui/Alert/alert.tsx
 function cn(...inputs) {
@@ -951,10 +955,11 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
-        "placeholder:text-muted-foreground",
+        "border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[border-color,box-shadow] outline-hidden md:text-sm",
+        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+        "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
         "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-3",
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3",
         "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
@@ -1700,31 +1705,37 @@ function SelectContent({
   className,
   children,
   position = "popper",
+  maxHeight,
+  style,
   ...props
 }) {
+  const resolvedMaxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     radixUi.Select.Content,
     {
       "data-slot": "select-content",
       className: cn(
-        "border-border bg-popover text-popover-foreground relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "border-border bg-popover text-popover-foreground relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-md border shadow-md",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
-        position === "popper" && "w-[--radix-select-trigger-width]",
+        position === "popper" && "w-(--radix-select-trigger-width)",
         className
       ),
       position,
+      style: {
+        ...resolvedMaxHeight ? {
+          maxHeight: `min(${resolvedMaxHeight}, var(--radix-select-content-available-height))`
+        } : null,
+        ...style
+      },
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
         /* @__PURE__ */ jsxRuntime.jsx(
           radixUi.Select.Viewport,
           {
-            className: cn(
-              "p-1",
-              position === "popper" && "h-[--radix-select-trigger-height]"
-            ),
+            className: cn("scroll-my-1 p-1", position === "popper" && "w-full"),
             children
           }
         ),
@@ -4386,6 +4397,7 @@ ColorPickerPresets.displayName = "ColorPickerPresets";
 function Calendar({
   className,
   classNames,
+  modifiersClassNames,
   showOutsideDays = true,
   captionLayout = "dropdown",
   buttonVariant = "ghost",
@@ -4397,6 +4409,36 @@ function Calendar({
   ...props
 }) {
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
+  const resolvedComponents = react.useMemo(
+    () => ({
+      Root: ({ className: className2, rootRef, ...rootProps }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: rootRef,
+            className: cn(className2),
+            ...rootProps
+          }
+        );
+      },
+      Chevron: ({ className: className2, orientation, ...chevronProps }) => {
+        if (orientation === "left") {
+          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: cn("size-4", className2), ...chevronProps });
+        }
+        if (orientation === "right") {
+          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: cn("size-4", className2), ...chevronProps });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("size-4", className2), ...chevronProps });
+      },
+      DayButton: (dayButtonProps) => /* @__PURE__ */ jsxRuntime.jsx(CalendarDayButton, { locale, ...dayButtonProps }),
+      WeekNumber: ({ children, ...weekNumberProps }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("td", { ...weekNumberProps, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+      },
+      ...components
+    }),
+    [locale, components]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactDayPicker.DayPicker,
     {
@@ -4488,33 +4530,13 @@ function Calendar({
         hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames
       },
-      components: {
-        Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
-          if (orientation === "left") {
-            return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          if (orientation === "right") {
-            return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
-        },
-        DayButton: ({ ...props2 }) => /* @__PURE__ */ jsxRuntime.jsx(CalendarDayButton, { locale, ...props2 }),
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
-        },
-        ...components
+      modifiersClassNames: {
+        preview_start: "relative isolate z-0 rounded-l-md bg-primary/8 after:absolute after:inset-y-0 after:right-0 after:w-3 after:bg-primary/8",
+        preview_middle: "rounded-none bg-primary/8",
+        preview_end: "relative isolate z-0 rounded-r-md bg-primary/8 after:absolute after:inset-y-0 after:left-0 after:w-3 after:bg-primary/8",
+        ...modifiersClassNames
       },
+      components: resolvedComponents,
       ...props
     }
   );
@@ -4531,6 +4553,9 @@ function CalendarDayButton({
   react.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
+  const isPreviewEdge = Boolean(
+    (modifiers.preview_start || modifiers.preview_end) && !modifiers.selected
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
@@ -4542,8 +4567,10 @@ function CalendarDayButton({
       "data-range-start": modifiers.range_start,
       "data-range-end": modifiers.range_end,
       "data-range-middle": modifiers.range_middle,
+      "data-preview-middle": Boolean(modifiers.preview_middle),
+      "data-preview-edge": isPreviewEdge,
       className: cn(
-        "group-data-[focused=true]/day:ring-primary/40 data-[range-end=true]:!bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:!bg-primary/8 data-[range-middle=true]:text-foreground data-[range-start=true]:!bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:!bg-primary data-[selected-single=true]:text-primary-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 !rounded-md border-0 !bg-transparent leading-none font-normal transition-colors duration-150 group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:rounded-md group-data-[focused=true]/day:ring-[2px] hover:!bg-transparent data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[selected-single=true]:rounded-md [&>span]:text-xs [&>span]:font-medium [&>span]:opacity-75",
+        "group-data-[focused=true]/day:ring-primary/40 data-[preview-edge=true]:ring-primary/50 data-[preview-edge=true]:text-primary data-[preview-middle=true]:text-primary data-[range-end=true]:!bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:!bg-primary/8 data-[range-middle=true]:text-foreground data-[range-start=true]:!bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:!bg-primary data-[selected-single=true]:text-primary-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 !rounded-md border-0 !bg-transparent leading-none font-normal transition-colors duration-150 group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:rounded-md group-data-[focused=true]/day:ring-[2px] hover:!bg-transparent data-[preview-edge=true]:rounded-md data-[preview-edge=true]:font-medium data-[preview-edge=true]:ring-[2px] data-[preview-middle=true]:font-medium data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[selected-single=true]:rounded-md [&>span]:text-xs [&>span]:font-medium [&>span]:opacity-75",
         defaultClassNames.day,
         className
       ),
@@ -4551,30 +4578,79 @@ function CalendarDayButton({
     }
   );
 }
-function DatePicker({
-  mode = "single",
-  selected,
-  onSelect,
-  placeholder = "Pick a date",
-  disabled = false,
-  className,
-  fromDate,
-  toDate
-}) {
+function DatePicker(props) {
+  const {
+    placeholder = "Pick a date",
+    disabled = false,
+    className,
+    fromDate,
+    toDate,
+    numberOfMonths = 1
+  } = props;
   const [open, setOpen] = react.useState(false);
+  const [awaitingRangeEnd, setAwaitingRangeEnd] = react.useState(false);
+  const [previewDate, setPreviewDate] = react.useState(void 0);
   const label = react.useMemo(() => {
-    if (mode === "range") {
-      const range = selected;
-      if (range?.from && range?.to)
-        return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 ${dateFns.format(range.to, "MMM d, yyyy")}`;
-      if (range?.from) return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
-      return placeholder;
-    }
-    const date = selected;
-    return date ? dateFns.format(date, "MMM d, yyyy") : placeholder;
-  }, [mode, selected, placeholder]);
-  const hasValue = mode === "range" ? !!selected?.from : !!selected;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    if (props.mode === "range") {
+      const range = props.selected;
+      if (!range?.from) return placeholder;
+      if (!range.to) return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
+      return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 ${dateFns.format(range.to, "MMM d, yyyy")}`;
+    }
+    return props.selected ? dateFns.format(props.selected, "MMM d, yyyy") : placeholder;
+  }, [props.mode, props.selected, placeholder]);
+  const handleOpenChange = (nextOpen) => {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      setAwaitingRangeEnd(false);
+      setPreviewDate(void 0);
+    }
+  };
+  const handleRangeSelect = (range, triggerDate) => {
+    if (props.mode !== "range") return;
+    const emit = props.onSelect;
+    if (!awaitingRangeEnd) {
+      setAwaitingRangeEnd(true);
+      emit?.({ from: triggerDate, to: void 0 });
+      return;
+    }
+    emit?.(range);
+    if (!range?.from || !range.to) {
+      setAwaitingRangeEnd(!!range?.from);
+      return;
+    }
+    setAwaitingRangeEnd(false);
+    setPreviewDate(void 0);
+    setOpen(false);
+  };
+  const rangeFrom = props.mode === "range" ? props.selected?.from : void 0;
+  const previewModifiers = react.useMemo(() => {
+    if (!awaitingRangeEnd || !rangeFrom || !previewDate) return void 0;
+    if (dateFns.isSameDay(rangeFrom, previewDate)) return void 0;
+    const [start, end] = previewDate < rangeFrom ? [previewDate, rangeFrom] : [rangeFrom, previewDate];
+    return {
+      preview_start: start,
+      preview_middle: { after: start, before: end },
+      preview_end: end
+    };
+  }, [awaitingRangeEnd, rangeFrom, previewDate]);
+  const handleDayPreview = (day, dayModifiers) => {
+    if (!awaitingRangeEnd) return;
+    if (dayModifiers.disabled || dayModifiers.hidden) return;
+    setPreviewDate((current) => current && dateFns.isSameDay(current, day) ? current : day);
+  };
+  const dateConstraints = react.useMemo(() => {
+    const disabledMatchers = [];
+    if (fromDate) disabledMatchers.push({ before: fromDate });
+    if (toDate) disabledMatchers.push({ after: toDate });
+    return {
+      ...disabledMatchers.length > 0 && { disabled: disabledMatchers },
+      ...fromDate && { startMonth: fromDate },
+      ...toDate && { endMonth: toDate }
+    };
+  }, [fromDate, toDate]);
+  const hasValue = props.mode === "range" ? !!props.selected?.from : !!props.selected;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
       {
@@ -4592,36 +4668,36 @@ function DatePicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { "data-slot": "date-picker-content", className: "w-auto p-0", align: "start", children: mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
-      Calendar,
-      {
-        ...{
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { "data-slot": "date-picker-content", className: "w-auto p-0", align: "start", children: props.mode === "range" ? (
+      // Clearing the preview on the wrapper instead of per day
+      // avoids the blank frame `onDayMouseLeave` would cause when
+      // the pointer travels from one day to the next.
+      /* @__PURE__ */ jsxRuntime.jsx("div", { onMouseLeave: () => setPreviewDate(void 0), children: /* @__PURE__ */ jsxRuntime.jsx(
+        Calendar,
+        {
           mode: "range",
-          selected,
-          onSelect: (range) => {
-            onSelect?.(range);
-            if (range?.to) setOpen(false);
-          },
-          fromDate,
-          toDate,
-          numberOfMonths: 2,
-          initialFocus: true
+          selected: props.selected,
+          onSelect: handleRangeSelect,
+          modifiers: previewModifiers,
+          onDayMouseEnter: handleDayPreview,
+          onDayFocus: handleDayPreview,
+          numberOfMonths,
+          autoFocus: true,
+          ...dateConstraints
         }
-      }
+      ) })
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       Calendar,
       {
-        ...{
-          mode: "single",
-          selected,
-          onSelect: (date) => {
-            onSelect?.(date);
-            setOpen(false);
-          },
-          fromDate,
-          toDate,
-          initialFocus: true
-        }
+        mode: "single",
+        selected: props.selected,
+        onSelect: (date) => {
+          props.onSelect?.(date);
+          setOpen(false);
+        },
+        numberOfMonths,
+        autoFocus: true,
+        ...dateConstraints
       }
     ) })
   ] });
@@ -5063,6 +5139,8 @@ function NavigationMenuIndicator({
     }
   );
 }
+
+// src/components/authorization/policy.ts
 function matchPermission(pattern, permission) {
   if (pattern === "*") return true;
   if (pattern === permission) return true;
@@ -5078,41 +5156,46 @@ function matchesAny(permissionSet, permission) {
   }
   return false;
 }
+function can(permissionSet, perms, mode = "any") {
+  const list = Array.isArray(perms) ? perms : [perms];
+  if (list.length === 0) return false;
+  if (permissionSet.has("*")) return true;
+  if (mode === "all") {
+    return list.every((p) => matchesAny(permissionSet, p));
+  }
+  return list.some((p) => matchesAny(permissionSet, p));
+}
 var AbilityContext = react.createContext(void 0);
 AbilityContext.displayName = "AbilityContext";
 function AbilityProvider({ children, permissions }) {
   const [permissionSet, setPermissionSet] = react.useState(
     () => new Set(permissions ?? [])
   );
-  const can = react.useCallback(
-    (perms, mode = "any") => {
-      const list = Array.isArray(perms) ? perms : [perms];
-      if (list.length === 0) return false;
-      if (permissionSet.has("*")) return true;
-      if (mode === "all") {
-        return list.every((p) => matchesAny(permissionSet, p));
-      }
-      return list.some((p) => matchesAny(permissionSet, p));
-    },
+  const [imperativelyResolved, setImperativelyResolved] = react.useState(false);
+  const status = permissions !== void 0 || imperativelyResolved ? "ready" : "loading";
+  const can2 = react.useCallback(
+    (perms, mode = "any") => can(permissionSet, perms, mode),
     [permissionSet]
   );
   const setAbilities = react.useCallback((perms) => {
     setPermissionSet(new Set(perms));
+    setImperativelyResolved(true);
   }, []);
   const clearAbilities = react.useCallback(() => {
     setPermissionSet(/* @__PURE__ */ new Set());
+    setImperativelyResolved(true);
   }, []);
-  const syncedKey = react.useRef(permissions ? permissions.join("|") : null);
+  const permissionKey = permissions === void 0 ? null : [...permissions].sort().join("|");
+  const syncedKey = react.useRef(permissionKey);
   react.useEffect(() => {
-    if (permissions === void 0) return;
-    const key = permissions.join("|");
-    if (key === syncedKey.current) return;
-    syncedKey.current = key;
+    if (permissionKey === null) return;
+    if (permissionKey === syncedKey.current) return;
+    syncedKey.current = permissionKey;
     setPermissionSet(new Set(permissions));
-  }, [permissions]);
+  }, [permissionKey, permissions]);
   const value = react.useMemo(
-    () => ({ can, setAbilities, clearAbilities }),
-    [can, setAbilities, clearAbilities]
+    () => ({ can: can2, setAbilities, clearAbilities, status }),
+    [can2, setAbilities, clearAbilities, status]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AbilityContext.Provider, { value, children });
 }
@@ -5124,21 +5207,176 @@ function useAbility() {
   return context;
 }
 function useCan(permissions, mode = "any") {
-  const { can } = useAbility();
-  return can(permissions, mode);
+  const { can: can2 } = useAbility();
+  return can2(permissions, mode);
+}
+function useAbilityStatus() {
+  return useAbility().status;
+}
+
+// src/components/authorization/permissions.generated.ts
+var KNOWN_PERMISSIONS = [];
+
+// src/components/authorization/permission-catalog.ts
+var CATALOG = new Set(KNOWN_PERMISSIONS);
+var warned = /* @__PURE__ */ new Set();
+function warnUnknownPermission(permission) {
+  if (process.env.NODE_ENV === "production") return;
+  if (CATALOG.size === 0) return;
+  const requested = Array.isArray(permission) ? permission : [permission];
+  for (const entry of requested) {
+    if (entry.includes("*")) continue;
+    if (CATALOG.has(entry) || warned.has(entry)) continue;
+    warned.add(entry);
+    console.warn(
+      `[Can] Unknown permission "${entry}". It is not in the generated permission catalog. Check for a typo, or regenerate the catalog with \`pnpm generate-permissions\`.`
+    );
+  }
+}
+var FOCUS_TRAVERSAL_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape"]);
+function blockInteraction(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function blockNonTraversalKey(event) {
+  if (!FOCUS_TRAVERSAL_KEYS.has(event.key)) blockInteraction(event);
+}
+var warnedRenderPropMisuse = /* @__PURE__ */ new Set();
+function warnRenderPropVoidsProps(voided) {
+  if (process.env.NODE_ENV === "production") return;
+  if (voided.length === 0) return;
+  const key = voided.join(",");
+  if (warnedRenderPropMisuse.has(key)) return;
+  warnedRenderPropMisuse.add(key);
+  console.warn(
+    `[Can] \`children\` is a function, so ${voided.map((prop) => `\`${prop}\``).join(", ")} ${voided.length === 1 ? "is" : "are"} ignored. A render prop owns every state: read \`allowed\` and \`status\` and render the disabled, loading and denied cases yourself, or pass an element instead of a function.`
+  );
+}
+function disableElement(child) {
+  return react.cloneElement(child, {
+    "aria-disabled": "true",
+    className: cn(child.props.className, "cursor-not-allowed opacity-50"),
+    onClickCapture: blockInteraction,
+    onKeyDownCapture: blockNonTraversalKey,
+    onKeyUpCapture: blockNonTraversalKey,
+    onPointerDownCapture: blockInteraction,
+    onMouseDownCapture: blockInteraction
+  });
+}
+function InteractionFirewall({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "can-blocked",
+      className: "contents",
+      onClickCapture: blockInteraction,
+      onPointerDownCapture: blockInteraction,
+      onMouseDownCapture: blockInteraction,
+      onKeyDownCapture: blockNonTraversalKey,
+      onKeyUpCapture: blockNonTraversalKey,
+      children
+    }
+  );
+}
+function DisabledSubtree({
+  children,
+  className,
+  ...props
+}) {
+  const { "data-slot": _incomingDataSlot, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "can-disabled",
+      "aria-disabled": "true",
+      className: cn(
+        "inline-flex cursor-not-allowed opacity-50",
+        "*:pointer-events-none",
+        className
+      ),
+      onClickCapture: blockInteraction,
+      onPointerDownCapture: blockInteraction,
+      onMouseDownCapture: blockInteraction,
+      onKeyDownCapture: blockNonTraversalKey,
+      onKeyUpCapture: blockNonTraversalKey,
+      ...restProps,
+      children
+    }
+  );
 }
-function Can({ permission, mode = "any", negate = false, fallback = null, children }) {
-  const { can } = useAbility();
-  const hasPermission = can(permission, mode);
+function Can({
+  permission,
+  mode = "any",
+  negate = false,
+  behavior = "hide",
+  reason = null,
+  fallback = null,
+  loading,
+  children
+}) {
+  warnUnknownPermission(permission);
+  const { can: can2, status } = useAbility();
+  const hasPermission = status === "ready" && can2(permission, mode);
   const show = negate ? !hasPermission : hasPermission;
   if (typeof children === "function") {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(show) });
+    warnRenderPropVoidsProps([
+      ...behavior === "disable" ? ["behavior='disable'"] : [],
+      ...reason !== null ? ["reason"] : [],
+      ...fallback !== null ? ["fallback"] : [],
+      ...loading !== void 0 ? ["loading"] : []
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ allowed: show, status }) });
+  }
+  if (status === "loading" && loading !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loading });
+  }
+  if (show) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
-  return show ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+  if (behavior === "disable") {
+    if (react.isValidElement(children) && children.type !== react.Fragment) {
+      const disabledChild = disableElement(children);
+      if (reason === null) {
+        return /* @__PURE__ */ jsxRuntime.jsx(InteractionFirewall, { children: disabledChild });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InteractionFirewall, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: disabledChild }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: reason })
+      ] });
+    }
+    if (reason === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DisabledSubtree, { children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DisabledSubtree, { children }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: reason })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
 }
 Can.displayName = "Can";
-function CanNot({ permission, mode = "any", fallback = null, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Can, { permission, mode, negate: true, fallback, children });
+function CanNot({
+  permission,
+  mode = "any",
+  behavior = "hide",
+  reason = null,
+  fallback = null,
+  loading,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Can,
+    {
+      permission,
+      mode,
+      negate: true,
+      behavior,
+      reason,
+      fallback,
+      loading,
+      children
+    }
+  );
 }
 CanNot.displayName = "CanNot";
 function useMediaQuery(query) {
@@ -5953,10 +6191,10 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "border-input flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+        "border-input flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[border-color,box-shadow] outline-hidden md:text-sm",
         "placeholder:text-muted-foreground",
         "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-3",
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3",
         "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
@@ -6884,6 +7122,38 @@ var logos = {
   millworkColor: `${CDN_BASE}/logos/Logo_Millwork_Color.webp`,
   millworkNegative: `${CDN_BASE}/logos/Logo_Millwork_Negative.webp`
 };
+var CONFETTI_COLORS = [
+  "#22205f",
+  // --color-main-blue-primary
+  "#f66a24",
+  // --color-main-orange-primary
+  "#faca4a",
+  // --color-main-yellow-primary
+  "#01d42f",
+  // --color-main-positive-state
+  "#d93235"
+  // --color-main-warning-state
+];
+function fireConfetti({
+  particleCount = 60,
+  originY = 0.7,
+  colors = [...CONFETTI_COLORS]
+} = {}) {
+  const shared = {
+    particleCount,
+    colors,
+    spread: 70,
+    startVelocity: 55,
+    disableForReducedMotion: true
+  };
+  return Promise.all([
+    confetti__default.default({ ...shared, angle: 60, origin: { x: 0, y: originY } }),
+    confetti__default.default({ ...shared, angle: 120, origin: { x: 1, y: originY } })
+  ]).then(() => void 0);
+}
+function resetConfetti() {
+  confetti__default.default.reset();
+}
 function Table({
   className,
   containerClassName = "overflow-x-auto",
@@ -6940,7 +7210,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "text-foreground has([role=checkbox])]:pr-0 h-12 px-3 text-left align-middle font-medium whitespace-nowrap",
+        "text-foreground has-[[role=checkbox]]:pr-0 h-12 px-3 text-left align-middle font-medium whitespace-nowrap",
         className
       ),
       ...props
@@ -6953,7 +7223,7 @@ function TableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn(
-        "has([role=checkbox])]:pr-0 p-3 align-middle whitespace-nowrap",
+        "has-[[role=checkbox]]:pr-0 p-3 align-middle whitespace-nowrap",
         className
       ),
       ...props
@@ -7214,6 +7484,13 @@ function useTableContext() {
 function useTableContextSafe() {
   return react.useContext(TableContext);
 }
+
+// src/components/compounds/Table/cell-size-class.ts
+var cellSizeClass = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-6 py-3 text-sm"
+};
 var cardPadding = {
   sm: "p-3",
   md: "p-4",
@@ -7551,6 +7828,9 @@ function DataTableHeaderCell({ header }) {
       },
       className: cn(
         "bg-primary text-primary-foreground",
+        // Same density padding as the body cells: without it the header
+        // label and the cell value below it sit at different offsets.
+        cellSizeClass[meta.size ?? tableSize],
         canResize && "relative",
         meta.align === "center" && "text-center",
         meta.align === "right" && "text-right",
@@ -7940,11 +8220,6 @@ function useTablePersistence({
     persistDensity
   };
 }
-var cellSizeClass = {
-  sm: "px-1 py-0 text-xs",
-  md: "px-5 py-2.5 text-sm",
-  lg: "px-6 py-3 text-sm"
-};
 function resolveClassName(value, row) {
   return typeof value === "function" ? value(row) : value;
 }
@@ -7985,6 +8260,13 @@ function DataTableCell({
     }
   );
 }
+var INTERACTIVE_CELL_CONTENT = 'button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"], [role="link"]';
+function isInteractiveCellEvent(event) {
+  const target = event.target;
+  if (!(target instanceof Element)) return false;
+  const match = target.closest(INTERACTIVE_CELL_CONTENT);
+  return match !== null && match !== event.currentTarget;
+}
 function DataTableRow({ row, classNames }) {
   const { onRowClick, variant } = useTableContext();
   const clickable = Boolean(onRowClick);
@@ -7997,12 +8279,15 @@ function DataTableRow({ row, classNames }) {
       "data-clickable": clickable || void 0,
       role: clickable ? "button" : void 0,
       tabIndex: clickable ? 0 : void 0,
-      onClick: clickable ? () => onRowClick?.(row.original) : void 0,
+      onClick: clickable ? (e) => {
+        if (isInteractiveCellEvent(e)) return;
+        onRowClick?.(row.original);
+      } : void 0,
       onKeyDown: clickable ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onRowClick?.(row.original);
-        }
+        if (e.key !== "Enter" && e.key !== " ") return;
+        if (isInteractiveCellEvent(e)) return;
+        e.preventDefault();
+        onRowClick?.(row.original);
       } : void 0,
       className: cn("hover:bg-muted", clickable && "cursor-pointer", rowClassName),
       children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(DataTableCell, { cell, cellClassName }, cell.id))
@@ -8603,7 +8888,7 @@ function DataTableFooter({ pagination, selectedCount, className }) {
       className: cn("flex items-center justify-between border-t px-4 py-2", className),
       children: [
         selectedCount != null && selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-live": "polite", className: "text-muted-foreground text-xs", children: `${selectedCount} row${selectedCount > 1 ? "s" : ""} selected` }),
-        /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(TablePagination, { ...pagination }) })
       ]
     }
   );
@@ -8712,18 +8997,21 @@ function DataTableSearch({
   debounce = 300
 }) {
   const ctx = useTableContextSafe();
-  const [inputValue, setInputValue] = react.useState("");
   const globalFilter = ctx?.globalFilter;
   const setGlobalFilter = ctx?.setGlobalFilter;
+  const committedValue = globalFilter ?? "";
+  const [inputValue, setInputValue] = react.useState(committedValue);
   react.useEffect(() => {
-    if (globalFilter === "") setInputValue("");
+    if (globalFilter === void 0) return;
+    setInputValue(globalFilter);
   }, [globalFilter]);
   react.useEffect(() => {
+    if (inputValue === committedValue) return;
     const timer = setTimeout(() => {
       setGlobalFilter?.(inputValue);
     }, debounce);
     return () => clearTimeout(timer);
-  }, [inputValue, debounce, setGlobalFilter]);
+  }, [inputValue, committedValue, debounce, setGlobalFilter]);
   const handleClear = () => {
     setInputValue("");
     setGlobalFilter?.("");
@@ -8744,7 +9032,13 @@ function DataTableSearch({
         onChange: (e) => setInputValue(e.target.value),
         placeholder,
         "aria-label": placeholder,
-        className: "h-8 w-48 pr-8 pl-8 text-sm"
+        className: cn(
+          "h-8 w-48 pr-9 pl-9 text-sm",
+          "[&::-webkit-search-cancel-button]:appearance-none",
+          "[&::-webkit-search-decoration]:appearance-none",
+          "[&::-webkit-search-results-button]:appearance-none",
+          "[&::-webkit-search-results-decoration]:appearance-none"
+        )
       }
     ),
     inputValue && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8754,7 +9048,7 @@ function DataTableSearch({
         size: "icon-sm",
         onClick: handleClear,
         "aria-label": "Clear search",
-        className: "text-muted-foreground hover:text-foreground absolute right-0.5 size-6",
+        className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-1.5 size-6 -translate-y-1/2",
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" })
       }
     )
@@ -9130,6 +9424,198 @@ function DrawerDescription({
     }
   );
 }
+function SignaturePad({
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  onEmptyChange,
+  disabled = false,
+  height = 260,
+  penColor = "black",
+  // Smoother than the library defaults (0.5–2.5 px, 5 px, 16 ms), which drop points and turn
+  // fast or small curves into visible straight segments.
+  minWidth = 1,
+  maxWidth = 3,
+  minDistance = 1,
+  throttle = 0,
+  velocityFilterWeight,
+  clearLabel,
+  className,
+  ref
+}) {
+  const canvasRef = react.useRef(null);
+  const padRef = react.useRef(null);
+  const emptyRef = react.useRef(true);
+  const [empty, setEmptyState] = react.useState(true);
+  const onEmptyChangeRef = react.useRef(onEmptyChange);
+  const drawnRef = react.useRef({
+    data: [],
+    width: 0,
+    height: 0,
+    scale: 1
+  });
+  const optionsRef = react.useRef({
+    penColor,
+    minWidth,
+    maxWidth,
+    minDistance,
+    throttle,
+    velocityFilterWeight
+  });
+  react.useEffect(() => {
+    onEmptyChangeRef.current = onEmptyChange;
+  }, [onEmptyChange]);
+  const setEmpty = (next) => {
+    if (emptyRef.current === next) return;
+    emptyRef.current = next;
+    setEmptyState(next);
+    onEmptyChangeRef.current?.(next);
+  };
+  const clear = () => {
+    padRef.current?.clear();
+    drawnRef.current = { data: [], width: 0, height: 0, scale: 1 };
+    setEmpty(true);
+  };
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const pad = new SignaturePadLib__default.default(canvas, optionsRef.current);
+    padRef.current = pad;
+    let width = 0;
+    let fittedHeight = 0;
+    const redraw = () => {
+      const drawn = drawnRef.current;
+      drawn.scale = Math.min(width / drawn.width, fittedHeight / drawn.height, 1);
+      pad.clear();
+      pad.fromData(
+        drawn.data.map((group) => ({
+          ...group,
+          points: group.points.map((point) => ({
+            ...point,
+            x: point.x * drawn.scale,
+            y: point.y * drawn.scale
+          }))
+        }))
+      );
+    };
+    const handleEnd = () => {
+      const drawn = drawnRef.current;
+      if (drawn.data.length === 0) {
+        drawn.width = width;
+        drawn.height = fittedHeight;
+        drawn.scale = 1;
+      }
+      const newest = pad.toData().at(-1);
+      if (newest) {
+        const points = newest.points.map((point) => ({
+          ...point,
+          x: point.x / drawn.scale,
+          y: point.y / drawn.scale
+        }));
+        drawn.data = [...drawn.data, { ...newest, points }];
+        const margin = newest.maxWidth ?? 0;
+        const reach = (axis) => Math.max(...points.map((point) => point[axis])) + margin;
+        drawn.width = Math.max(drawn.width, reach("x"));
+        drawn.height = Math.max(drawn.height, reach("y"));
+        const fitting = Math.min(width / drawn.width, fittedHeight / drawn.height, 1);
+        if (fitting !== drawn.scale) redraw();
+      }
+      setEmpty(pad.isEmpty());
+    };
+    pad.addEventListener("endStroke", handleEnd);
+    const fit = () => {
+      const nextWidth = canvas.offsetWidth;
+      const nextHeight = canvas.offsetHeight;
+      if (!nextWidth || !nextHeight) return;
+      if (nextWidth === width && nextHeight === fittedHeight) return;
+      width = nextWidth;
+      fittedHeight = nextHeight;
+      const ratio = window.devicePixelRatio || 1;
+      canvas.width = nextWidth * ratio;
+      canvas.height = nextHeight * ratio;
+      canvas.getContext("2d")?.scale(ratio, ratio);
+      pad.clear();
+      if (drawnRef.current.data.length > 0) redraw();
+    };
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(canvas);
+    return () => {
+      observer.disconnect();
+      pad.removeEventListener("endStroke", handleEnd);
+      pad.off();
+      padRef.current = null;
+    };
+  }, []);
+  react.useEffect(() => {
+    if (disabled) padRef.current?.off();
+    else padRef.current?.on();
+  }, [disabled]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      clear,
+      isEmpty: () => padRef.current?.isEmpty() ?? true,
+      toBlob: () => new Promise((resolve, reject) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return reject(new Error("The signature pad is not mounted"));
+        canvas.toBlob((blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("The signature could not be encoded as PNG"));
+        }, "image/png");
+      })
+    }),
+    // `clear` only touches refs and state setters, so the handle is created once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "signature-pad",
+      "data-disabled": disabled ? "" : void 0,
+      className: cn(
+        // Fixed light "paper": the pen is black and the PNG is read on white by others. The
+        // primitive keeps the pad light for consumers that define a dark theme, where a themed
+        // surface (`background`, `border`) would turn dark and hide the black ink.
+        "bg-main-alternative-secondary border-dark-100 relative overflow-hidden rounded-xl border",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            "data-slot": "signature-pad-canvas",
+            role: "img",
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedBy,
+            "aria-disabled": disabled || void 0,
+            style: { height },
+            className: "block w-full touch-none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "data-slot": "signature-pad-clear",
+            "aria-label": clearLabel,
+            disabled,
+            "aria-disabled": empty && !disabled ? true : void 0,
+            onClick: () => {
+              if (!emptyRef.current) clear();
+            },
+            className: "bg-main-white text-dark-600 border-dark-100 hover:bg-dark-100 hover:text-main-black aria-disabled:hover:bg-main-white absolute right-2 bottom-2 border border-solid aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrushCleaning, { "aria-hidden": true, className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
 function TCCEProvider({
   children,
   permissions,
@@ -9191,6 +9677,7 @@ exports.BreadcrumbList = BreadcrumbList;
 exports.BreadcrumbPage = BreadcrumbPage;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.Button = Button;
+exports.CONFETTI_COLORS = CONFETTI_COLORS;
 exports.Can = Can;
 exports.CanNot = CanNot;
 exports.Card = Card;
@@ -9289,6 +9776,7 @@ exports.ItemHeader = ItemHeader;
 exports.ItemMedia = ItemMedia;
 exports.ItemSeparator = ItemSeparator;
 exports.ItemTitle = ItemTitle;
+exports.KNOWN_PERMISSIONS = KNOWN_PERMISSIONS;
 exports.Label = Label;
 exports.Link = Link;
 exports.Logo = Logo;
@@ -9368,6 +9856,7 @@ exports.SidebarProvider = SidebarProvider;
 exports.SidebarRail = SidebarRail;
 exports.SidebarSeparator = SidebarSeparator;
 exports.SidebarTrigger = SidebarTrigger;
+exports.SignaturePad = SignaturePad;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
@@ -9417,6 +9906,7 @@ exports.createBackendParamsWithFilters = createBackendParamsWithFilters;
 exports.duration = duration;
 exports.ease = ease;
 exports.fadeIn = fadeIn;
+exports.fireConfetti = fireConfetti;
 exports.getActiveFilterCount = getActiveFilterCount;
 exports.getActiveFilterValues = getActiveFilterValues;
 exports.getColumnValueCounts = getColumnValueCounts;
@@ -9432,6 +9922,7 @@ exports.parseJsonToFilters = parseJsonToFilters;
 exports.parseQueryParamsToFilters = parseQueryParamsToFilters;
 exports.progressIndicatorVariants = progressIndicatorVariants;
 exports.progressVariants = progressVariants;
+exports.resetConfetti = resetConfetti;
 exports.scaleIn = scaleIn;
 exports.searchInArray = searchInArray;
 exports.skeletonVariants = skeletonVariants;
@@ -9449,6 +9940,7 @@ exports.toggleVariants = toggleVariants;
 exports.tooltipContentVariants = tooltipContentVariants;
 exports.transition = transition;
 exports.useAbility = useAbility;
+exports.useAbilityStatus = useAbilityStatus;
 exports.useAppForm = useAppForm;
 exports.useCan = useCan;
 exports.useCarousel = useCarousel;