@estiva-app/ui 0.21.1 → 0.23.0

package/dist/index.js

@@ -678,27 +678,10 @@ function AvatarGroup({ members, size = 24 }) {
 
 // src/Banner.tsx
 import { IconX as IconX2 } from "@tabler/icons-react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var TONE_STYLES = {
-  ok: "bg-success-muted text-success-default",
-  error: "bg-error-muted text-error-default",
-  info: "bg-info-muted text-info-default",
-  warning: "bg-warning-muted text-warning-default"
-};
-function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className }) {
-  const role = tone === "error" ? "alert" : "status";
-  if (!onDismiss) {
-    return /* @__PURE__ */ jsx12("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
-  }
-  return /* @__PURE__ */ jsxs7("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
-    /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1", children }),
-    /* @__PURE__ */ jsx12(IconButton, { variant: "current", "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0", children: /* @__PURE__ */ jsx12(IconX2, { size: 16, stroke: 1.5 }) })
-  ] });
-}
 
 // src/Button.tsx
 import { Button as BaseButton3 } from "@base-ui/react/button";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -712,7 +695,7 @@ function Button({
 }) {
   const hasLeadingIcon = !!leadingIcon;
   const formBusy = useFormBusy();
-  const button = /* @__PURE__ */ jsxs8(
+  const button = /* @__PURE__ */ jsxs7(
     BaseButton3,
     {
       type,
@@ -759,7 +742,29 @@ function Button({
       ]
     }
   );
-  return disabledReason ? /* @__PURE__ */ jsx13(TooltipTrigger, { label: disabledReason, children: button }) : button;
+  return disabledReason ? /* @__PURE__ */ jsx12(TooltipTrigger, { label: disabledReason, children: button }) : button;
+}
+
+// src/Banner.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var TONE_STYLES = {
+  ok: "bg-success-muted text-success-default",
+  error: "bg-error-muted text-error-default",
+  info: "bg-info-muted text-info-default",
+  warning: "bg-warning-muted text-warning-default"
+};
+function Banner({ tone, children, icon, action, onDismiss, dismissLabel = "Dismiss", className }) {
+  const role = tone === "error" ? "alert" : "status";
+  if (!onDismiss && !icon && !action) {
+    return /* @__PURE__ */ jsx13("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
+  }
+  const oneLine = Boolean(icon || action);
+  return /* @__PURE__ */ jsxs8("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
+    icon && /* @__PURE__ */ jsx13("span", { className: "flex shrink-0", children: icon }),
+    /* @__PURE__ */ jsx13("span", { className: cn("min-w-0 flex-1", oneLine && "truncate"), children }),
+    action && /* @__PURE__ */ jsx13(Button, { variant: "muted", size: "small", className: "shrink-0", onClick: action.onClick, children: action.label }),
+    onDismiss && /* @__PURE__ */ jsx13(IconButton, { variant: "current", "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0", children: /* @__PURE__ */ jsx13(IconX2, { size: 16, stroke: 1.5 }) })
+  ] });
 }
 
 // src/Checkbox.tsx
@@ -1281,13 +1286,14 @@ var VIEWPORT_PAD3 = 8;
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
-function EmptyState({ icon, message, scope = "page", className }) {
+function EmptyState({ icon, message, scope = "page", action, className }) {
   if (scope === "section") {
     return /* @__PURE__ */ jsx20("p", { className: cn("text-caption text-text-muted", className), children: message });
   }
   return /* @__PURE__ */ jsxs14("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
     /* @__PURE__ */ jsx20("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx20(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx20("p", { className: "text-body-2 text-text-secondary text-center", children: message })
+    /* @__PURE__ */ jsx20("p", { className: "text-body-2 text-text-secondary text-center", children: message }),
+    action && /* @__PURE__ */ jsx20(Button, { variant: "outlined", className: "mt-2", onClick: action.onClick, children: action.label })
   ] });
 }
 
@@ -2741,10 +2747,24 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
   );
 }
 
+// src/ContainerHeader.tsx
+import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+function ContainerHeader({ title, chevron = false, actions, className }) {
+  const text = typeof title === "string";
+  return /* @__PURE__ */ jsxs34("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5", className), children: [
+    /* @__PURE__ */ jsx50("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs34("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
+      text ? /* @__PURE__ */ jsx50("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx50("div", { className: "min-w-0 flex-1", children: title }),
+      chevron && /* @__PURE__ */ jsx50(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+    ] }) }),
+    actions && /* @__PURE__ */ jsx50("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx50("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
+  ] });
+}
+
 // src/CollapsibleSection.tsx
 import { useState as useState7 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -2771,14 +2791,14 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs34(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx50(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx50(Collapsible.Trigger, {}) }),
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs35(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx51(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx51(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx51(
       Collapsible.Panel,
       {
         hiddenUntilFound: true,
         className: "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0",
-        children: /* @__PURE__ */ jsx50("div", { className: cn("flex flex-col", contentClassName), children })
+        children: /* @__PURE__ */ jsx51("div", { className: cn("flex flex-col", contentClassName), children })
       }
     )
   ] });
@@ -2786,9 +2806,9 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     BaseTabs.Root,
     {
       value: active,
@@ -2796,14 +2816,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsx52(
         BaseTabs.List,
         {
           activateOnFocus: true,
           "aria-label": aria["aria-label"],
           "aria-labelledby": aria["aria-labelledby"],
           className: "flex items-center gap-2",
-          children: tabs.map((tab) => /* @__PURE__ */ jsxs35(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs36(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -2816,9 +2836,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs35("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs36("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx51("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx52("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -2834,7 +2854,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 import { createContext as createContext5, useContext as useContext5, useMemo as useMemo4 } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
 var SURFACE_STYLES = {
   success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
   brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
@@ -2870,16 +2890,16 @@ var pillClassName = (type, hasAction, className) => cn(
 );
 function LeadingIcon({ type }) {
   const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx52(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  return /* @__PURE__ */ jsx53(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
 }
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs36("div", { className: pillClassName(type, hasAction, className), children: [
-    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx52(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx52("span", { className: LABEL_CLASSES, children: label })
+  return /* @__PURE__ */ jsxs37("div", { className: pillClassName(type, hasAction, className), children: [
+    /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 shrink-0", children: [
+      leadingIcon && /* @__PURE__ */ jsx53(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx53("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx52(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx53(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
 var ToastContext = createContext5(null);
@@ -2900,9 +2920,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx52(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs36(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx53(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs37(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx52(BaseToast.Portal, { children: /* @__PURE__ */ jsx52(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx52(ToastList, {}) }) })
+    /* @__PURE__ */ jsx53(BaseToast.Portal, { children: /* @__PURE__ */ jsx53(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx53(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -2910,25 +2930,25 @@ function ToastList() {
   return toasts.map((toast) => {
     const type = toast.type ?? "neutral";
     const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {};
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs37(
       BaseToast.Root,
       {
         toast,
         swipeDirection: ["left", "down"],
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
-          /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx52(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx52(BaseToast.Title, { render: /* @__PURE__ */ jsx52("span", {}), className: LABEL_CLASSES })
+          /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 shrink-0", children: [
+            leadingIcon && /* @__PURE__ */ jsx53(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx53(BaseToast.Title, { render: /* @__PURE__ */ jsx53("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx52(
+          actionLabel && /* @__PURE__ */ jsx53(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx52(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx53(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -2962,6 +2982,7 @@ export {
   CommandPaletteSearch,
   CommandPaletteWorking,
   ConfirmDialog,
+  ContainerHeader,
   DialogShell,
   Divider,
   EditableText,