@apotech-os/ui-sdk 0.10.0 → 1.0.0

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 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';
@@ -160,9 +159,7 @@ 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;
@@ -194,7 +191,7 @@ declare function TabsContent({ value, className, children, }: {
     value: string;
     className?: string;
     children: React.ReactNode;
-}): React.JSX.Element;
+}): React.JSX.Element | null;
 interface ModalProps {
     open: boolean;
     onClose: () => void;
@@ -202,8 +199,7 @@ interface ModalProps {
     children: React.ReactNode;
     className?: string;
 }
-/** 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;
+declare function Modal({ open, onClose, title, children, className }: ModalProps): React.JSX.Element | null;
 interface SpinnerProps {
     className?: string;
     size?: 'sm' | 'md' | 'lg';
@@ -213,10 +209,6 @@ 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;
@@ -262,10 +254,9 @@ 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.
  *
- * 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.
+ * NOTE: no focus management. Autofocus the primary action yourself.
  */
-declare function SidePanel({ open, onClose, title, description, children, className, }: SidePanelProps): React.JSX.Element;
+declare function SidePanel({ open, onClose, title, description, children, className, }: SidePanelProps): React.JSX.Element | null;
 interface CopyButtonProps {
     value: string;
     label?: string;
@@ -303,45 +294,9 @@ interface DropdownMenuProps {
     align?: 'start' | 'end';
     className?: string;
 }
-/** Uncontrolled menu. Selecting an item closes it; arrow keys move between them. */
+/** Uncontrolled menu built on Popover. Selecting an item closes it. */
 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.
  *
@@ -371,4 +326,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, 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 };
+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 };

package/dist/index.js

@@ -2,11 +2,6 @@ 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';
 
@@ -294,12 +289,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.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",
   {
@@ -363,18 +352,9 @@ 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",
   {
@@ -395,13 +375,7 @@ function TableHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    "thead",
-    {
-      className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx("thead", { className: cn("[&_tr]:border-b", className), ...props });
 }
 function TableBody({ className, ...props }) {
   return /* @__PURE__ */ jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
@@ -423,7 +397,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
@@ -448,43 +422,42 @@ 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 }) {
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Root,
-    {
-      className,
-      defaultValue,
-      value,
-      onValueChange: (next) => onValueChange?.(String(next)),
-      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 }) });
 }
 function TabsList({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx(
-    Tabs$1.List,
-    {
-      className: cn("inline-flex items-center gap-1 rounded-lg bg-muted p-1", className),
-      children
-    }
-  );
+  return /* @__PURE__ */ 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__ */ jsx(
-    Tabs$1.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
@@ -496,25 +469,38 @@ function TabsContent({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx(Tabs$1.Panel, { value, className, children });
+  const { value: current } = useTabsContext();
+  if (current !== value) return null;
+  return /* @__PURE__ */ jsx("div", { className, children });
 }
 function Modal({ open, onClose, title, children, className }) {
-  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" }),
+  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
+      }
+    ),
     /* @__PURE__ */ jsxs(
-      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__ */ jsx(Dialog.Title, { className: "mb-3 text-base font-semibold", children: title }),
+          title && /* @__PURE__ */ 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" }) {
@@ -564,19 +550,28 @@ function Switch({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    Switch$1.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__ */ 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" })
+      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"
+          )
+        }
+      )
     }
   );
 }
@@ -705,26 +700,47 @@ function SidePanel({
   children,
   className
 }) {
-  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" }),
+  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
+      }
+    ),
     /* @__PURE__ */ jsxs(
-      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__ */ 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(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 })
+              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 })
             ] }),
             /* @__PURE__ */ jsx(
-              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__ */ jsx(IconX, { className: "size-4" })
               }
             )
@@ -733,7 +749,7 @@ function SidePanel({
         ]
       }
     )
-  ] }) });
+  ] });
 }
 var COPY_FEEDBACK_MS = 2e3;
 function CopyButton({
@@ -776,111 +792,69 @@ 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__ */ 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(
+  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(
       "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__ */ 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],
+          "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.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, 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 };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map