@apotech-os/ui-sdk 0.9.0 → 0.10.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as React from 'react';
+import { ReactNode } from 'react';
 import { AppErrorCode, AppRunRecord, AppRunStatus } from '@apotech-os/app-kit';
 export { AppRunRecord, AppRunStatus } from '@apotech-os/app-kit';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -159,7 +160,9 @@ declare function Badge({ className, variant, dot, children, ...props }: BadgePro
 declare function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 declare function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 declare function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
@@ -191,7 +194,7 @@ declare function TabsContent({ value, className, children, }: {
     value: string;
     className?: string;
     children: React.ReactNode;
-}): React.JSX.Element | null;
+}): React.JSX.Element;
 interface ModalProps {
     open: boolean;
     onClose: () => void;
@@ -199,7 +202,8 @@ interface ModalProps {
     children: React.ReactNode;
     className?: string;
 }
-declare function Modal({ open, onClose, title, children, className }: ModalProps): React.JSX.Element | null;
+/** Centred blocking dialog. Base UI owns the focus trap, focus restore and Escape. */
+declare function Modal({ open, onClose, title, children, className }: ModalProps): React.JSX.Element;
 interface SpinnerProps {
     className?: string;
     size?: 'sm' | 'md' | 'lg';
@@ -209,6 +213,10 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     variant?: 'default' | 'muted';
 }
 declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Do not pass `aria-label` when the switch sits inside a `<label>`: the label
+ * already names it, and the two naming sources cancel out into no name at all.
+ */
 interface SwitchProps {
     checked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -254,9 +262,10 @@ interface SidePanelProps {
  * Children are laid out in a flex column filling the panel: put the scrollable
  * region in a `min-h-0 flex-1 overflow-y-auto` child and the footer after it.
  *
- * NOTE: no focus management. Autofocus the primary action yourself.
+ * Focus is trapped inside while open and restored to the opener on close — Base
+ * UI's dialog does both, which is what the hand-rolled version never did.
  */
-declare function SidePanel({ open, onClose, title, description, children, className, }: SidePanelProps): React.JSX.Element | null;
+declare function SidePanel({ open, onClose, title, description, children, className, }: SidePanelProps): React.JSX.Element;
 interface CopyButtonProps {
     value: string;
     label?: string;
@@ -294,9 +303,45 @@ interface DropdownMenuProps {
     align?: 'start' | 'end';
     className?: string;
 }
-/** Uncontrolled menu built on Popover. Selecting an item closes it. */
+/** Uncontrolled menu. Selecting an item closes it; arrow keys move between them. */
 declare function DropdownMenu({ trigger, items, align, className }: DropdownMenuProps): React.JSX.Element;
 
+interface ToastInput {
+    title: string;
+    description?: string;
+    /** `info` exists because Pilotage's own stack had it — a neutral outcome is not a success. */
+    variant?: 'success' | 'error' | 'info';
+}
+/** Returns a `toast({ title, description?, variant? })` function. */
+declare function useToast(): (toast: ToastInput) => void;
+/** Fixed bottom-right stack, auto-dismissing. */
+declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+
+/**
+ * Hover tooltip, lifted from the shell.
+ *
+ * Deliberately CSS-only (`group-hover`) rather than another Base UI surface: it
+ * carries no focus, no dismissal and no state, so a portal and a positioner would
+ * be weight for nothing. If a tooltip ever needs to be keyboard-reachable or to
+ * survive a scroll container, that is the moment to move it onto Base UI's.
+ */
+
+declare const SIDES: {
+    readonly top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5";
+    readonly right: "left-full top-1/2 -translate-y-1/2 ml-1.5";
+    readonly bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5";
+    readonly left: "right-full top-1/2 -translate-y-1/2 mr-1.5";
+};
+interface TooltipProps {
+    label: React.ReactNode;
+    children: React.ReactNode;
+    side?: keyof typeof SIDES;
+    className?: string;
+}
+declare function Tooltip({ label, children, side, className }: TooltipProps): React.JSX.Element;
+
 /**
  * Browser helpers for app pages.
  *
@@ -326,4 +371,4 @@ declare function toCsv(rows: string[][]): string;
  */
 declare function downloadCsv(rows: string[][], filename: string): void;
 
-export { type AppApiClient, AppApiProvider, AppContextProvider, type AppContextValue, AppInvokeError, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, Checkbox, type CheckboxProps, CopyButton, type CopyButtonProps, type DateRange, DateRangePicker, type DateRangePickerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, Input, Link, type LinkProps, Modal, type ModalProps, Popover, type PopoverProps, Select, type SelectProps, SidePanel, type SidePanelProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, Textarea, type TextareaProps, cn, copyToClipboard, downloadBlob, downloadCsv, toCsv, useAppApi, useAppContext, useAppRun, useAppRuns, useAppSettings };
+export { type AppApiClient, AppApiProvider, AppContextProvider, type AppContextValue, AppInvokeError, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, CopyButton, type CopyButtonProps, type DateRange, DateRangePicker, type DateRangePickerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, Input, Link, type LinkProps, Modal, type ModalProps, Popover, type PopoverProps, Select, type SelectProps, SidePanel, type SidePanelProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, Textarea, type TextareaProps, type ToastInput, ToastProvider, Tooltip, type TooltipProps, badgeVariants, buttonVariants, cn, copyToClipboard, downloadBlob, downloadCsv, toCsv, useAppApi, useAppContext, useAppRun, useAppRuns, useAppSettings, useToast };

package/dist/index.js

@@ -2,6 +2,11 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
 import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import { Menu } from '@base-ui/react/menu';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -289,6 +294,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.isValidElement(trigger)) {
+    return { render: trigger, nativeButton: trigger.type === "button" || trigger.type === Button };
+  }
+  return { render: /* @__PURE__ */ jsx("span", { children: trigger }), nativeButton: false };
+}
 var buttonVariants = 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",
   {
@@ -352,9 +363,18 @@ function CardHeader({ className, ...props }) {
 function CardTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx("h3", { className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props });
 }
+function CardDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", className), ...props });
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ...props });
 }
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
+}
 var Input = React.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
   "input",
   {
@@ -375,7 +395,13 @@ function TableHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("thead", { className: cn("[&_tr]:border-b", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
+      ...props
+    }
+  );
 }
 function TableBody({ className, ...props }) {
   return /* @__PURE__ */ jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
@@ -397,7 +423,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
@@ -422,42 +448,43 @@ var Select = React.forwardRef(
   )
 );
 Select.displayName = "Select";
-var TabsContext = React.createContext(null);
-function useTabsContext() {
-  const ctx = React.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.useState(defaultValue ?? "");
-  const current = value ?? internal;
-  const setValue = (v) => {
-    setInternal(v);
-    onValueChange?.(v);
-  };
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsx("div", { className, children }) });
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      className,
+      defaultValue,
+      value,
+      onValueChange: (next) => onValueChange?.(String(next)),
+      children
+    }
+  );
 }
 function TabsList({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center gap-1 rounded-lg bg-muted p-1", className), children });
+  return /* @__PURE__ */ jsx(
+    Tabs$1.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__ */ jsx(
-    "button",
+    Tabs$1.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
@@ -469,38 +496,25 @@ function TabsContent({
   className,
   children
 }) {
-  const { value: current } = useTabsContext();
-  if (current !== value) return null;
-  return /* @__PURE__ */ jsx("div", { className, children });
+  return /* @__PURE__ */ jsx(Tabs$1.Panel, { value, className, children });
 }
 function Modal({ open, onClose, title, children, className }) {
-  if (!open) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Close",
-        className: "absolute inset-0 cursor-default bg-foreground/40",
-        onClick: onClose
-      }
-    ),
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { "aria-label": "Close", className: "fixed inset-0 z-50 bg-foreground/40" }),
     /* @__PURE__ */ jsxs(
-      "div",
+      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__ */ jsx("h2", { className: "mb-3 text-base font-semibold", children: title }),
+          title && /* @__PURE__ */ jsx(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" }) {
@@ -550,28 +564,19 @@ function Switch({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    "button",
+    Switch$1.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__ */ 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__ */ jsx(Switch$1.Thumb, { className: "inline-block size-4 translate-x-0.5 rounded-full bg-white shadow transition-transform data-[checked]:translate-x-4" })
     }
   );
 }
@@ -700,47 +705,26 @@ function SidePanel({
   children,
   className
 }) {
-  React.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__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Fermer",
-        className: "absolute inset-0 cursor-default bg-foreground/40",
-        onClick: onClose
-      }
-    ),
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { "aria-label": "Fermer", className: "fixed inset-0 z-50 bg-foreground/40" }),
     /* @__PURE__ */ jsxs(
-      "aside",
+      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__ */ jsxs("header", { className: "flex shrink-0 items-start gap-3 border-b px-5 py-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              title && /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: title }),
-              description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+              title && /* @__PURE__ */ jsx(Dialog.Title, { className: "text-base font-semibold", children: title }),
+              description && /* @__PURE__ */ jsx(Dialog.Description, { className: "mt-0.5 text-xs text-muted-foreground", children: description })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              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__ */ jsx(IconX, { className: "size-4" })
               }
             )
@@ -749,7 +733,7 @@ function SidePanel({
         ]
       }
     )
-  ] });
+  ] }) });
 }
 var COPY_FEEDBACK_MS = 2e3;
 function CopyButton({
@@ -792,69 +776,111 @@ function Popover({
   align = "start",
   className
 }) {
-  const root = React.useRef(null);
-  React.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__ */ jsxs("div", { ref: root, className: "relative inline-block", children: [
-    /* @__PURE__ */ jsx("button", { type: "button", "aria-expanded": open, onClick: () => onOpenChange(!open), children: trigger }),
-    open && /* @__PURE__ */ 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__ */ jsxs(Popover$1.Root, { open, onOpenChange: (next) => onOpenChange(next), children: [
+      /* @__PURE__ */ jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsx(Popover$1.Trigger, { ...triggerProps(trigger) }) }),
+      /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side: "bottom", align, sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsx(
+        Popover$1.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__ */ jsxs(Menu.Root, { children: [
+    /* @__PURE__ */ jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsx(Menu.Trigger, { ...triggerProps(trigger) }) }),
+    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { side: "bottom", align, sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsx(
+      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__ */ jsx(
+          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 = createContext(null);
+function useToast() {
+  const toast = 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] = useState([]);
+  const nextId = useRef(0);
+  const toast = 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__ */ jsxs(ToastContext.Provider, { value: toast, children: [
+    children,
+    /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { className: "text-sm font-medium", children: t.title }),
+          t.description && /* @__PURE__ */ 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__ */ jsxs("span", { className: "group/tt relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ 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.useState(false);
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      open,
-      onOpenChange: setOpen,
-      trigger,
-      align,
-      className: cn("p-1", className),
-      children: /* @__PURE__ */ jsx("div", { role: "menu", className: "flex flex-col", children: items.map((item, i) => /* @__PURE__ */ 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
-      )) })
-    }
-  );
-}
 
-export { AppApiProvider, AppContextProvider, AppInvokeError, Badge, Button, Card, CardContent, CardHeader, CardTitle, Checkbox, CopyButton, DateRangePicker, DropdownMenu, Input, Link, Modal, Popover, Select, SidePanel, Spinner, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, cn, copyToClipboard, downloadBlob, downloadCsv, toCsv, useAppApi, useAppContext, useAppRun, useAppRuns, useAppSettings };
+export { AppApiProvider, AppContextProvider, AppInvokeError, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CopyButton, DateRangePicker, DropdownMenu, Input, Link, Modal, Popover, Select, SidePanel, Spinner, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToastProvider, Tooltip, badgeVariants, buttonVariants, cn, copyToClipboard, downloadBlob, downloadCsv, toCsv, useAppApi, useAppContext, useAppRun, useAppRuns, useAppSettings, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map