@almadar/ui 5.129.0 → 5.131.0

package/dist/runtime/index.cjs

@@ -1651,7 +1651,7 @@ var init_Button = __esm({
               "cursor-pointer",
               "chrome-button",
               "transition-all duration-normal",
-              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
+              "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--focus-ring-offset)]",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               variantStyles[variant],
               sizeStyles[size],
@@ -2398,7 +2398,7 @@ var init_Badge = __esm({
                   },
                   className: cn(
                     "inline-flex items-center justify-center rounded-sm",
-                    "hover:bg-foreground/10 focus:outline-none focus:ring-1 focus:ring-ring",
+                    "hover:bg-foreground/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                     "transition-colors",
                     size === "sm" ? "w-4 h-4 ml-0.5" : size === "md" ? "w-5 h-5 ml-1" : "w-6 h-6 ml-1"
                   ),
@@ -3756,7 +3756,7 @@ function NativeSelect({
           "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
           "px-3 py-2 pr-10 text-sm text-foreground font-medium",
           "bg-card",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-ring",
           "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           error ? "border-error focus:border-error" : "border-border focus:border-primary",
           className
@@ -3863,7 +3863,7 @@ function RichSelect({
           "block w-full border-[length:var(--border-width)] shadow-sm",
           "px-3 py-2 pr-10 text-sm text-start font-medium",
           "bg-card rounded-sm",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-ring",
           "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           error ? "border-error focus:border-error" : "border-border focus:border-primary",
           !hasValue && "text-muted-foreground"
@@ -4786,9 +4786,9 @@ var init_Radio = __esm({
                 "flex items-center justify-center",
                 "border-[length:var(--border-width)] transition-all cursor-pointer",
                 sizeClasses4[size],
-                hasError ? "border-error peer-focus:ring-error/20" : "border-border peer-focus:ring-ring/20",
+                hasError ? "border-error peer-focus-visible:ring-error/20" : "border-border peer-focus-visible:ring-ring/20",
                 isChecked2 ? hasError ? "border-error" : "border-primary bg-primary" : "",
-                "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2",
+                "peer-focus:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
                 disabled && "opacity-50 cursor-not-allowed",
                 !disabled && "hover:border-[var(--color-border-hover)]"
               ),
@@ -5259,7 +5259,7 @@ var init_ThemeToggle = __esm({
             "inline-flex items-center justify-center gap-2",
             "text-foreground",
             "hover:bg-muted border-[length:var(--border-width)] border-transparent hover:border-border",
-            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "transition-colors duration-fast",
             sizeClasses5[size],
             className
@@ -11504,10 +11504,12 @@ var init_Container = __esm({
     };
     paddingStyles3 = {
       none: "px-0",
-      sm: "px-4",
-      md: "px-6",
-      lg: "px-8",
-      xl: "px-12"
+      // Mobile-tighter, desktop-identical: fixed px-6 on a 360px phone eats ~13% of
+      // the viewport, so each token steps down below the sm breakpoint.
+      sm: "px-3 sm:px-4",
+      md: "px-4 sm:px-6",
+      lg: "px-4 sm:px-6 md:px-8",
+      xl: "px-4 sm:px-8 md:px-12"
     };
     Container = ({
       size,
@@ -12206,7 +12208,7 @@ var init_Accordion = __esm({
                 "bg-card",
                 "hover:bg-muted",
                 "transition-colors duration-fast",
-                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-inset",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
                 "disabled:opacity-50 disabled:cursor-not-allowed",
                 isOpen && "bg-muted font-bold"
               ),
@@ -18361,7 +18363,7 @@ var init_Breadcrumb = __esm({
                   },
                   className: cn(
                     "flex items-center gap-1.5 transition-colors",
-                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                     isLast ? "text-foreground font-bold cursor-default" : "text-muted-foreground hover:text-foreground"
                   ),
                   "aria-current": isLast ? "page" : void 0,
@@ -22915,7 +22917,7 @@ function DataGrid({
                           ] }, field.name);
                         }) })
                       ] }),
-                      dangerActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      dangerActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                         Button,
                         {
                           variant: "ghost",
@@ -22923,11 +22925,10 @@ function DataGrid({
                           onClick: handleActionClick(action, itemData),
                           "data-testid": `action-${action.event}`,
                           "data-row-id": String(itemData.id),
+                          "aria-label": action.label,
+                          title: action.label,
                           className: "text-error hover:text-error hover:bg-error/10 px-2",
-                          children: [
-                            action.icon && renderIconInput(action.icon, { size: "xs" }),
-                            action.label
-                          ]
+                          children: action.icon ? renderIconInput(action.icon, { size: "xs" }) : action.label
                         },
                         idx
                       )) })
@@ -23729,10 +23730,7 @@ var init_FileTree = __esm({
       className,
       indent = 16
     }) => {
-      const { t } = hooks.useTranslate();
-      if (tree.length === 0) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: `p-4 ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "muted", children: t("fileTree.noFiles") }) });
-      }
+      if (tree.length === 0) return null;
       return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: tree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
         TreeNodeItem,
         {
@@ -23773,7 +23771,7 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
-var resolveFilterType, lookStyles6, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -23791,10 +23789,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -24130,7 +24128,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -24221,6 +24219,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = hooks.useTranslate();
+      const [open, setOpen] = React82.useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsxRuntime.jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsxRuntime.jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(FilterGroupControls, { ...props });
     FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -27135,7 +27169,7 @@ var init_NumberStepper = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 "aria-label": t("aria.decrease"),
@@ -27176,7 +27210,7 @@ var init_NumberStepper = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 "aria-label": t("aria.increase"),
@@ -27632,7 +27666,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.closeModal"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", className: "w-6 h-6" })
@@ -27651,7 +27685,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.previousImage"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", className: "w-8 h-8" })
@@ -27688,7 +27722,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.nextImage"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", className: "w-8 h-8" })
@@ -27862,9 +27896,20 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React82__namespace.default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      const chrome = col.format === "badge" ? BADGE_CHROME_CH : 0;
+      return Math.min(longest + chrome, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -27948,7 +27993,7 @@ function TableView({
               col.className
             );
             if (col.format === "badge" && raw != null && raw !== "") {
-              return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
+              return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", className: "whitespace-nowrap", children: String(raw) }) }, col.key);
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
@@ -28031,7 +28076,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, BADGE_CHROME_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -28049,6 +28094,8 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
+    BADGE_CHROME_CH = 4;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",
@@ -30146,7 +30193,7 @@ var init_VoteStack = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-up", className: styles.icon })
@@ -30183,7 +30230,7 @@ var init_VoteStack = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-down", className: styles.icon })
@@ -30704,7 +30751,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": isPaused ? t("qrScanner.resumeScanning") : t("qrScanner.pauseScanning"),
                       children: isPaused ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "play", className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "pause", className: "h-4 w-4" })
@@ -30719,7 +30766,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": currentFacing === "environment" ? t("qrScanner.switchToFrontCamera") : t("qrScanner.switchToRearCamera"),
                       children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "refresh-cw", className: "h-4 w-4" })
@@ -30734,7 +30781,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 px-3 py-2 text-xs text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": t("aria.mockScanDev"),
                       children: t("qrScanner.mockScan")
@@ -42571,7 +42618,7 @@ var init_TabbedContainer = __esm({
                       onClick: () => !isDisabled && handleTabChange(tab.id),
                       className: cn(
                         "flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors",
-                        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                         "disabled:opacity-50 disabled:cursor-not-allowed",
                         isActive ? "bg-primary text-primary-foreground" : "bg-card text-foreground hover:bg-muted",
                         isVertical ? "justify-start" : "justify-center"