@apotech-os/ui-sdk 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -3,6 +3,11 @@
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var React = require('react');
+var dialog = require('@base-ui/react/dialog');
+var menu = require('@base-ui/react/menu');
+var popover = require('@base-ui/react/popover');
+var _switch = require('@base-ui/react/switch');
+var tabs = require('@base-ui/react/tabs');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -310,6 +315,12 @@ function downloadCsv(rows, filename) {
   const blob = new Blob([`${BOM}${toCsv(rows)}`], { type: "text/csv;charset=utf-8" });
   downloadBlob(blob, filename);
 }
+function triggerProps(trigger) {
+  if (React__namespace.isValidElement(trigger)) {
+    return { render: trigger, nativeButton: trigger.type === "button" || trigger.type === Button };
+  }
+  return { render: /* @__PURE__ */ jsxRuntime.jsx("span", { children: trigger }), nativeButton: false };
+}
 var buttonVariants = classVarianceAuthority.cva(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
@@ -373,9 +384,18 @@ function CardHeader({ className, ...props }) {
 function CardTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props });
 }
+function CardDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", className), ...props });
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 pt-0", className), ...props });
 }
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
+}
 var Input = React__namespace.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
   {
@@ -396,7 +416,13 @@ function TableHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn("[&_tr]:border-b", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
+      ...props
+    }
+  );
 }
 function TableBody({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
@@ -418,7 +444,7 @@ function TableHead({ className, ...props }) {
     "th",
     {
       className: cn(
-        "h-10 px-4 text-left align-middle text-xs font-medium text-muted-foreground",
+        "h-10 px-4 text-left align-middle text-xs font-medium uppercase tracking-wide text-muted-foreground",
         className
       ),
       ...props
@@ -443,42 +469,43 @@ var Select = React__namespace.forwardRef(
   )
 );
 Select.displayName = "Select";
-var TabsContext = React__namespace.createContext(null);
-function useTabsContext() {
-  const ctx = React__namespace.useContext(TabsContext);
-  if (!ctx) throw new Error("Tabs sub-component must be used within <Tabs>");
-  return ctx;
-}
 function Tabs({ defaultValue, value, onValueChange, className, children }) {
-  const [internal, setInternal] = React__namespace.useState(defaultValue ?? "");
-  const current = value ?? internal;
-  const setValue = (v) => {
-    setInternal(v);
-    onValueChange?.(v);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Root,
+    {
+      className,
+      defaultValue,
+      value,
+      onValueChange: (next) => onValueChange?.(String(next)),
+      children
+    }
+  );
 }
 function TabsList({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center gap-1 rounded-lg bg-muted p-1", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.List,
+    {
+      className: cn("inline-flex items-center gap-1 rounded-lg bg-muted p-1", className),
+      children
+    }
+  );
 }
 function TabsTrigger({
   value,
   className,
   children
 }) {
-  const { value: current, setValue } = useTabsContext();
-  const active = current === value;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    tabs.Tabs.Tab,
     {
-      type: "button",
-      onClick: () => setValue(value),
+      value,
       className: cn(
         "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-        active ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+        "text-muted-foreground hover:text-foreground",
+        "data-[active]:bg-card data-[active]:text-foreground data-[active]:shadow-sm",
         className
       ),
       children
@@ -490,38 +517,25 @@ function TabsContent({
   className,
   children
 }) {
-  const { value: current } = useTabsContext();
-  if (current !== value) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { value, className, children });
 }
 function Modal({ open, onClose, title, children, className }) {
-  if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Close",
-        className: "absolute inset-0 cursor-default bg-foreground/40",
-        onClick: onClose
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { "aria-label": "Close", className: "fixed inset-0 z-50 bg-foreground/40" }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      dialog.Dialog.Popup,
       {
-        role: "dialog",
-        "aria-modal": true,
         className: cn(
-          "relative z-10 w-full max-w-md rounded-xl border bg-card p-5 shadow-lg",
+          "fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border bg-card p-5 shadow-lg",
           className
         ),
         children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-3 text-base font-semibold", children: title }),
+          title && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { className: "mb-3 text-base font-semibold", children: title }),
           children
         ]
       }
     )
-  ] });
+  ] }) });
 }
 var spinnerSizes = { sm: "size-4", md: "size-6", lg: "size-8" };
 function Spinner({ className, size = "md" }) {
@@ -571,28 +585,19 @@ function Switch({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    _switch.Switch.Root,
     {
-      type: "button",
-      role: "switch",
-      "aria-checked": checked,
+      checked,
+      onCheckedChange: (next) => onCheckedChange?.(next),
       disabled,
-      onClick: () => onCheckedChange?.(!checked),
       className: cn(
-        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        checked ? "bg-primary" : "bg-input",
+        // `data-[disabled]`, not `disabled:` — the root is a span, so `:disabled`
+        // never matches it and the dimming would silently stop happening.
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[checked]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: cn(
-            "inline-block size-4 transform rounded-full bg-white shadow transition-transform",
-            checked ? "translate-x-4" : "translate-x-0.5"
-          )
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: "inline-block size-4 translate-x-0.5 rounded-full bg-white shadow transition-transform data-[checked]:translate-x-4" })
     }
   );
 }
@@ -721,47 +726,26 @@ function SidePanel({
   children,
   className
 }) {
-  React__namespace.useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [open, onClose]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Fermer",
-        className: "absolute inset-0 cursor-default bg-foreground/40",
-        onClick: onClose
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { "aria-label": "Fermer", className: "fixed inset-0 z-50 bg-foreground/40" }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "aside",
+      dialog.Dialog.Popup,
       {
-        role: "dialog",
-        "aria-modal": true,
         className: cn(
-          "absolute inset-y-0 right-0 flex w-full max-w-lg flex-col border-l bg-card shadow-xl",
+          "fixed inset-y-0 right-0 z-50 flex w-full max-w-lg flex-col border-l bg-card shadow-xl",
           className
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex shrink-0 items-start gap-3 border-b px-5 py-4", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold", children: title }),
-              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+              title && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { className: "text-base font-semibold", children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Description, { className: "mt-0.5 text-xs text-muted-foreground", children: description })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              dialog.Dialog.Close,
               {
-                type: "button",
                 "aria-label": "Fermer",
                 className: "-mr-1 shrink-0 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
-                onClick: onClose,
                 children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { className: "size-4" })
               }
             )
@@ -770,7 +754,7 @@ function SidePanel({
         ]
       }
     )
-  ] });
+  ] }) });
 }
 var COPY_FEEDBACK_MS = 2e3;
 function CopyButton({
@@ -813,68 +797,110 @@ function Popover({
   align = "start",
   className
 }) {
-  const root = React__namespace.useRef(null);
-  React__namespace.useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (e) => {
-      if (!root.current?.contains(e.target)) onOpenChange(false);
-    };
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onOpenChange(false);
-    };
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open, onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: root, className: "relative inline-block", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-expanded": open, onClick: () => onOpenChange(!open), children: trigger }),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
+  return (
+    // The callback is re-wrapped so Base UI's event-details argument stops at the
+    // SDK boundary: the engine is an implementation detail, not part of the API.
+    /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover.Root, { open, onOpenChange: (next) => onOpenChange(next), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ...triggerProps(trigger) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Positioner, { side: "bottom", align, sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+        popover.Popover.Popup,
+        {
+          className: cn("min-w-48 rounded-md border bg-card p-2 shadow-lg", className),
+          children
+        }
+      ) }) })
+    ] })
+  );
+}
+function DropdownMenu({ trigger, items, align = "end", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { ...triggerProps(trigger) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Positioner, { side: "bottom", align, sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Popup,
+      {
+        className: cn(
+          "flex min-w-48 flex-col rounded-md border bg-card p-1 shadow-lg",
+          className
+        ),
+        children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          menu.Menu.Item,
+          {
+            disabled: item.disabled,
+            onClick: item.onSelect,
+            className: cn(
+              "cursor-pointer rounded px-2 py-1.5 text-left text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+              item.destructive && "text-destructive"
+            ),
+            children: item.label
+          },
+          i
+        ))
+      }
+    ) }) })
+  ] });
+}
+var ToastContext = React.createContext(null);
+function useToast() {
+  const toast = React.useContext(ToastContext);
+  if (!toast) throw new Error("useToast must be used within ToastProvider");
+  return toast;
+}
+var TOAST_TTL_MS = 4e3;
+var TONE = {
+  success: "border-l-status-success",
+  error: "border-l-status-blocked",
+  info: "border-l-status-info"
+};
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React.useState([]);
+  const nextId = React.useRef(0);
+  const toast = React.useCallback((input) => {
+    const id = nextId.current++;
+    setToasts((prev) => [...prev, { id, ...input }]);
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), TOAST_TTL_MS);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: toast, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none fixed bottom-4 right-4 z-[60] flex w-80 flex-col gap-2", children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        role: "status",
         className: cn(
-          "absolute z-40 mt-1 min-w-48 rounded-md border bg-card p-2 shadow-lg",
-          align === "end" ? "right-0" : "left-0",
+          "pointer-events-auto rounded-lg border border-l-4 bg-card px-4 py-3 text-foreground shadow-md",
+          TONE[t.variant ?? "success"]
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: t.title }),
+          t.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 break-all text-xs text-muted-foreground", children: t.description })
+        ]
+      },
+      t.id
+    )) })
+  ] });
+}
+var SIDES = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5",
+  right: "left-full top-1/2 -translate-y-1/2 ml-1.5",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
+  left: "right-full top-1/2 -translate-y-1/2 mr-1.5"
+};
+function Tooltip({ label, children, side = "top", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group/tt relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "tooltip",
+        className: cn(
+          "pointer-events-none absolute z-50 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background opacity-0 shadow-md transition-opacity group-hover/tt:opacity-100",
+          SIDES[side],
           className
         ),
-        children
+        children: label
       }
     )
   ] });
 }
-function DropdownMenu({ trigger, items, align = "end", className }) {
-  const [open, setOpen] = React__namespace.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover,
-    {
-      open,
-      onOpenChange: setOpen,
-      trigger,
-      align,
-      className: cn("p-1", className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "menu", className: "flex flex-col", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          role: "menuitem",
-          disabled: item.disabled,
-          className: cn(
-            "cursor-pointer rounded px-2 py-1.5 text-left text-sm hover:bg-accent disabled:pointer-events-none disabled:opacity-50",
-            item.destructive && "text-destructive"
-          ),
-          onClick: () => {
-            setOpen(false);
-            item.onSelect();
-          },
-          children: item.label
-        },
-        i
-      )) })
-    }
-  );
-}
 
 exports.AppApiProvider = AppApiProvider;
 exports.AppContextProvider = AppContextProvider;
@@ -883,6 +909,8 @@ exports.Badge = Badge;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
@@ -908,6 +936,10 @@ exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
+exports.ToastProvider = ToastProvider;
+exports.Tooltip = Tooltip;
+exports.badgeVariants = badgeVariants;
+exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.copyToClipboard = copyToClipboard;
 exports.downloadBlob = downloadBlob;
@@ -918,5 +950,6 @@ exports.useAppContext = useAppContext;
 exports.useAppRun = useAppRun;
 exports.useAppRuns = useAppRuns;
 exports.useAppSettings = useAppSettings;
+exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map