@bizapps/ui 1.4.1 → 1.5.0

package/dist/main.cjs

@@ -1688,31 +1688,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
           }
         ),
@@ -4374,6 +4380,7 @@ ColorPickerPresets.displayName = "ColorPickerPresets";
 function Calendar({
   className,
   classNames,
+  modifiersClassNames,
   showOutsideDays = true,
   captionLayout = "dropdown",
   buttonVariant = "ghost",
@@ -4385,6 +4392,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,
     {
@@ -4476,33 +4513,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
     }
   );
@@ -4519,6 +4536,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,
     {
@@ -4530,8 +4550,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
       ),
@@ -4539,35 +4561,37 @@ function CalendarDayButton({
     }
   );
 }
-function DatePicker({
-  mode = "single",
-  selected,
-  onSelect,
-  placeholder = "Pick a date",
-  disabled = false,
-  className,
-  fromDate,
-  toDate,
-  numberOfMonths = 1
-}) {
+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 (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")}`;
     }
-    const date = selected;
-    return date ? dateFns.format(date, "MMM d, yyyy") : placeholder;
-  }, [mode, selected, placeholder]);
+    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);
+    if (!nextOpen) {
+      setAwaitingRangeEnd(false);
+      setPreviewDate(void 0);
+    }
   };
   const handleRangeSelect = (range, triggerDate) => {
-    const emit = onSelect;
+    if (props.mode !== "range") return;
+    const emit = props.onSelect;
     if (!awaitingRangeEnd) {
       setAwaitingRangeEnd(true);
       emit?.({ from: triggerDate, to: void 0 });
@@ -4579,8 +4603,25 @@ function DatePicker({
       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 });
@@ -4591,7 +4632,7 @@ function DatePicker({
       ...toDate && { endMonth: toDate }
     };
   }, [fromDate, toDate]);
-  const hasValue = mode === "range" ? !!selected?.from : !!selected;
+  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,
@@ -4610,32 +4651,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,
+          selected: props.selected,
           onSelect: handleRangeSelect,
-          ...dateConstraints,
+          modifiers: previewModifiers,
+          onDayMouseEnter: handleDayPreview,
+          onDayFocus: handleDayPreview,
           numberOfMonths,
-          autoFocus: true
+          autoFocus: true,
+          ...dateConstraints
         }
-      }
+      ) })
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       Calendar,
       {
-        ...{
-          mode: "single",
-          selected,
-          onSelect: (date) => {
-            onSelect?.(date);
-            setOpen(false);
-          },
-          ...dateConstraints,
-          numberOfMonths,
-          autoFocus: true
-        }
+        mode: "single",
+        selected: props.selected,
+        onSelect: (date) => {
+          props.onSelect?.(date);
+          setOpen(false);
+        },
+        numberOfMonths,
+        autoFocus: true,
+        ...dateConstraints
       }
     ) })
   ] });
@@ -5098,6 +5143,8 @@ function AbilityProvider({ children, permissions }) {
   const [permissionSet, setPermissionSet] = react.useState(
     () => new Set(permissions ?? [])
   );
+  const [imperativelyResolved, setImperativelyResolved] = react.useState(false);
+  const status = permissions !== void 0 || imperativelyResolved ? "ready" : "loading";
   const can = react.useCallback(
     (perms, mode = "any") => {
       const list = Array.isArray(perms) ? perms : [perms];
@@ -5112,21 +5159,23 @@ function AbilityProvider({ children, permissions }) {
   );
   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, setAbilities, clearAbilities, status }),
+    [can, setAbilities, clearAbilities, status]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AbilityContext.Provider, { value, children });
 }
@@ -5141,18 +5190,173 @@ function useCan(permissions, mode = "any") {
   const { can } = useAbility();
   return can(permissions, mode);
 }
-function Can({ permission, mode = "any", negate = false, fallback = null, children }) {
-  const { can } = useAbility();
-  const hasPermission = can(permission, 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,
+  behavior = "hide",
+  reason = null,
+  fallback = null,
+  loading,
+  children
+}) {
+  warnUnknownPermission(permission);
+  const { can, status } = useAbility();
+  const hasPermission = status === "ready" && can(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 });
   }
-  return show ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+  if (show) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  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) {
@@ -6949,7 +7153,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
@@ -6962,7 +7166,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
@@ -7223,6 +7427,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",
@@ -7560,6 +7771,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",
@@ -7949,11 +8163,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;
 }
@@ -7994,6 +8203,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);
@@ -8006,12 +8222,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))
@@ -8612,7 +8831,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 }) })
       ]
     }
   );
@@ -8721,18 +8940,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?.("");
@@ -8753,7 +8975,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(
@@ -8763,7 +8991,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" })
       }
     )
@@ -9298,6 +9526,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;
@@ -9458,6 +9687,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;