@apotech-os/ui-sdk 0.10.0 → 1.0.0

package/dist/index.cjs

@@ -3,11 +3,6 @@
 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');
 
@@ -315,12 +310,6 @@ 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",
   {
@@ -384,18 +373,9 @@ 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",
   {
@@ -416,13 +396,7 @@ function TableHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "thead",
-    {
-      className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn("[&_tr]:border-b", className), ...props });
 }
 function TableBody({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
@@ -444,7 +418,7 @@ function TableHead({ className, ...props }) {
     "th",
     {
       className: cn(
-        "h-10 px-4 text-left align-middle text-xs font-medium uppercase tracking-wide text-muted-foreground",
+        "h-10 px-4 text-left align-middle text-xs font-medium text-muted-foreground",
         className
       ),
       ...props
@@ -469,43 +443,42 @@ 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 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    tabs.Tabs.Root,
-    {
-      className,
-      defaultValue,
-      value,
-      onValueChange: (next) => onValueChange?.(String(next)),
-      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 }) });
 }
 function TabsList({
   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
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { 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(
-    tabs.Tabs.Tab,
+    "button",
     {
-      value,
+      type: "button",
+      onClick: () => setValue(value),
       className: cn(
         "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-        "text-muted-foreground hover:text-foreground",
-        "data-[active]:bg-card data-[active]:text-foreground data-[active]:shadow-sm",
+        active ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
         className
       ),
       children
@@ -517,25 +490,38 @@ function TabsContent({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { value, className, children });
+  const { value: current } = useTabsContext();
+  if (current !== value) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
 }
 function Modal({ open, onClose, title, children, className }) {
-  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" }),
+  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
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      dialog.Dialog.Popup,
+      "div",
       {
+        role: "dialog",
+        "aria-modal": true,
         className: cn(
-          "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",
+          "relative z-10 w-full max-w-md rounded-xl border bg-card p-5 shadow-lg",
           className
         ),
         children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { className: "mb-3 text-base font-semibold", children: title }),
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { 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" }) {
@@ -585,19 +571,28 @@ function Switch({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    _switch.Switch.Root,
+    "button",
     {
-      checked,
-      onCheckedChange: (next) => onCheckedChange?.(next),
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
       disabled,
+      onClick: () => onCheckedChange?.(!checked),
       className: cn(
-        // `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",
+        "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",
         className
       ),
       ...props,
-      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" })
+      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"
+          )
+        }
+      )
     }
   );
 }
@@ -726,26 +721,47 @@ function SidePanel({
   children,
   className
 }) {
-  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" }),
+  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
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      dialog.Dialog.Popup,
+      "aside",
       {
+        role: "dialog",
+        "aria-modal": true,
         className: cn(
-          "fixed inset-y-0 right-0 z-50 flex w-full max-w-lg flex-col border-l bg-card shadow-xl",
+          "absolute inset-y-0 right-0 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(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 })
+              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 })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              dialog.Dialog.Close,
+              "button",
               {
+                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" })
               }
             )
@@ -754,7 +770,7 @@ function SidePanel({
         ]
       }
     )
-  ] }) });
+  ] });
 }
 var COPY_FEEDBACK_MS = 2e3;
 function CopyButton({
@@ -797,110 +813,68 @@ function Popover({
   align = "start",
   className
 }) {
-  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(
+  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(
       "div",
       {
-        role: "status",
         className: cn(
-          "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],
+          "absolute z-40 mt-1 min-w-48 rounded-md border bg-card p-2 shadow-lg",
+          align === "end" ? "right-0" : "left-0",
           className
         ),
-        children: label
+        children
       }
     )
   ] });
 }
+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;
@@ -909,8 +883,6 @@ 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;
@@ -936,10 +908,6 @@ 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;
@@ -950,6 +918,5 @@ exports.useAppContext = useAppContext;
 exports.useAppRun = useAppRun;
 exports.useAppRuns = useAppRuns;
 exports.useAppSettings = useAppSettings;
-exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map