@labpane/ui 0.0.0-stage → 1.0.0

package/dist/index.js

@@ -0,0 +1,918 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Back,
+  Badge,
+  Button,
+  Checkbox,
+  CopyButton,
+  Field,
+  FieldError,
+  FieldLabel,
+  Input,
+  Page,
+  PageActions,
+  PageHeader,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+  Spinner,
+  cn
+} from "./chunk-3ZY2AVB4.js";
+
+// dialog.tsx
+import * as React from "react";
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { CircleAlertIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogClose = DialogPrimitive.Close;
+var DialogContent = React.forwardRef(function DialogContent2({ className, children, showCloseButton = true, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "labui:fixed labui:inset-0 labui:z-50 labui:bg-overlay" }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "dialog-content",
+        className: cn(
+          "labui:fixed labui:top-1/2 labui:left-1/2 labui:z-50 labui:-translate-x-1/2 labui:-translate-y-1/2",
+          "labui:grid labui:max-h-[calc(100dvh-2rem)] labui:w-full labui:max-w-[calc(100%-2rem)] labui:sm:max-w-lg labui:gap-6 labui:overflow-y-auto",
+          "labui:rounded-(--labui-radius-dialog) labui:border labui:bg-popover labui:p-6 labui:text-popover-foreground labui:shadow-sm labui:outline-none",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: cn(
+                "labui:absolute labui:top-4 labui:right-4 labui:inline-flex labui:size-8 labui:items-center labui:justify-center labui:rounded-md",
+                "labui:text-muted-foreground labui:transition-colors labui:hover:bg-accent labui:hover:text-foreground",
+                "labui:focus-visible:ring-[3px] labui:focus-visible:ring-ring/50 labui:focus-visible:outline-none labui:disabled:pointer-events-none",
+                "labui:[&_svg]:pointer-events-none labui:[&_svg]:size-4 labui:[&_svg]:shrink-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "labui:sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var DialogHeader = React.forwardRef(function DialogHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-header",
+      className: cn(
+        "labui:flex labui:min-w-0 labui:flex-col labui:gap-2 labui:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var DialogFooter = React.forwardRef(function DialogFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-footer",
+      className: cn(
+        "labui:flex labui:flex-wrap labui:items-center labui:justify-end labui:gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var DialogTitle = React.forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      ref,
+      "data-slot": "dialog-title",
+      className: cn(
+        "labui:pr-8 labui:text-lg labui:leading-7 labui:font-semibold labui:break-words",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var DialogDescription = React.forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ref,
+      "data-slot": "dialog-description",
+      className: cn("labui:text-sm labui:text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+function ConfirmDialog({
+  trigger,
+  title,
+  name,
+  confirmLabel,
+  typeToConfirm,
+  onConfirm
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState();
+  function change(next) {
+    if (busy) return;
+    setOpen(next);
+    setValue("");
+    setError(void 0);
+  }
+  async function submit(event) {
+    event.preventDefault();
+    setBusy(true);
+    setError(void 0);
+    try {
+      await onConfirm();
+      setOpen(false);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: change, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        role: "alertdialog",
+        "aria-describedby": void 0,
+        className: "labui:p-0",
+        showCloseButton: !busy,
+        onOpenAutoFocus: (event) => {
+          const input = event.target.querySelector("input");
+          if (!input) return;
+          event.preventDefault();
+          input.focus();
+        },
+        children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: "labui:flex labui:min-w-0 labui:flex-col",
+            onSubmit: submit,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "labui:flex labui:min-w-0 labui:flex-col labui:gap-4 labui:p-6", children: [
+                /* @__PURE__ */ jsxs("div", { className: "labui:flex labui:items-center labui:gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "labui:flex labui:size-9 labui:shrink-0 labui:items-center labui:justify-center labui:rounded-xl labui:bg-destructive-muted labui:text-destructive",
+                      children: /* @__PURE__ */ jsx(CircleAlertIcon, { className: "labui:size-5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(DialogTitle, { children: [
+                    title,
+                    " ",
+                    /* @__PURE__ */ jsxs("span", { className: "labui:inline-flex labui:items-center labui:gap-1 labui:rounded-md labui:border labui:bg-muted/50 labui:py-0.5 labui:pr-0.5 labui:pl-2 labui:align-middle labui:font-mono labui:text-base labui:break-all", children: [
+                      name,
+                      /* @__PURE__ */ jsx(CopyButton, { value: name, label: "Copy name" })
+                    ] }),
+                    "?"
+                  ] })
+                ] }),
+                typeToConfirm && /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    "aria-label": "Name",
+                    autoComplete: "off",
+                    spellCheck: "false",
+                    placeholder: name,
+                    value,
+                    disabled: busy,
+                    onChange: (event) => setValue(event.target.value)
+                  }
+                ),
+                error && /* @__PURE__ */ jsx("p", { role: "alert", className: "labui:text-sm labui:text-destructive", children: error })
+              ] }),
+              /* @__PURE__ */ jsxs(DialogFooter, { className: "labui:justify-between labui:border-t labui:bg-muted/40 labui:px-6 labui:py-4", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    disabled: busy,
+                    onClick: () => change(false),
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "submit",
+                    variant: "destructive",
+                    disabled: busy || typeToConfirm && value !== name,
+                    children: [
+                      busy && /* @__PURE__ */ jsx(Spinner, {}),
+                      confirmLabel
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+var dialogAction = "labui:inline-flex labui:shrink-0 labui:items-center labui:justify-center labui:rounded-md labui:text-sm labui:font-medium labui:outline-none labui:transition-colors labui:hover:bg-accent labui:focus-visible:ring-2 labui:focus-visible:ring-ring labui:px-4 labui:py-2";
+function DiscardDialog({
+  label,
+  onCancel,
+  onConfirm,
+  onCloseAutoFocus
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog.Root,
+    {
+      open: label !== void 0,
+      onOpenChange: (open) => !open && onCancel(),
+      children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
+        /* @__PURE__ */ jsx(AlertDialog.Overlay, { className: "labui:fixed labui:inset-0 labui:z-50 labui:font-sans labui:text-sm labui:leading-normal labui:bg-overlay" }),
+        /* @__PURE__ */ jsxs(
+          AlertDialog.Content,
+          {
+            className: cn(
+              "labui:fixed labui:top-1/2 labui:left-1/2 labui:z-50 labui:-translate-x-1/2 labui:-translate-y-1/2",
+              "labui:w-[calc(100%-2rem)] labui:max-w-lg labui:rounded-[1.25rem] labui:border labui:border-border labui:bg-popover labui:p-6",
+              "labui:font-sans labui:text-sm labui:leading-normal labui:text-popover-foreground labui:shadow-sm labui:outline-none"
+            ),
+            onCloseAutoFocus,
+            children: [
+              /* @__PURE__ */ jsxs(AlertDialog.Title, { className: "labui:m-0 labui:text-lg labui:font-semibold", children: [
+                "Discard changes in ",
+                label,
+                "?"
+              ] }),
+              /* @__PURE__ */ jsx(AlertDialog.Description, { className: "labui:mt-2 labui:text-muted-foreground", children: "Closing the tab discards its unsaved changes." }),
+              /* @__PURE__ */ jsxs("div", { className: "labui:mt-6 labui:flex labui:flex-wrap labui:justify-end labui:gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  AlertDialog.Cancel,
+                  {
+                    className: dialogAction + " labui:border labui:border-border",
+                    children: "Keep tab"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AlertDialog.Action,
+                  {
+                    className: dialogAction + " labui:bg-destructive-muted labui:text-destructive",
+                    onClick: onConfirm,
+                    children: "Discard and close"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// menu.tsx
+import "react";
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var panel = "labui:z-50 labui:rounded-lg labui:border labui:border-border labui:bg-popover labui:p-1 labui:font-sans labui:text-sm labui:leading-normal labui:text-popover-foreground labui:shadow-sm";
+var menuItem = "labui:flex labui:min-h-9 labui:cursor-default labui:items-center labui:gap-3 labui:rounded-md labui:px-3 labui:text-sm labui:outline-none labui:data-highlighted:bg-accent labui:data-disabled:opacity-50 labui:[@media(pointer:coarse)]:min-h-11";
+var optionPanel = panel + " labui:min-w-40 labui:max-h-[var(--radix-dropdown-menu-content-available-height)] labui:overflow-auto";
+function MenuContent({
+  children,
+  className = "labui:w-56"
+}) {
+  return /* @__PURE__ */ jsx2(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx2(
+    DropdownMenu.Content,
+    {
+      align: "start",
+      sideOffset: 4,
+      collisionPadding: 8,
+      className: "labui:z-50 labui:max-h-[var(--radix-dropdown-menu-content-available-height)] labui:overflow-auto labui:rounded-lg labui:border labui:bg-popover labui:p-1 labui:text-popover-foreground labui:shadow-sm " + className,
+      children
+    }
+  ) });
+}
+function contextItem(action, index) {
+  if (!action)
+    return /* @__PURE__ */ jsx2(
+      ContextMenu.Separator,
+      {
+        className: "labui:my-1 labui:border-t labui:border-border"
+      },
+      index
+    );
+  if ("items" in action)
+    return /* @__PURE__ */ jsxs2(ContextMenu.Sub, { children: [
+      /* @__PURE__ */ jsxs2(
+        ContextMenu.SubTrigger,
+        {
+          className: menuItem + " labui:justify-between labui:data-[state=open]:bg-accent",
+          children: [
+            action.label,
+            /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "labui:size-4" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2(ContextMenu.Portal, { children: /* @__PURE__ */ jsx2(
+        ContextMenu.SubContent,
+        {
+          className: panel + " labui:min-w-40",
+          sideOffset: 4,
+          collisionPadding: 8,
+          children: action.items.map(contextItem)
+        }
+      ) })
+    ] }, action.label);
+  if (action.checked !== void 0)
+    return /* @__PURE__ */ jsxs2(
+      ContextMenu.CheckboxItem,
+      {
+        className: menuItem,
+        checked: action.checked,
+        disabled: action.disabled,
+        onSelect: action.onSelect,
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: "labui:grid labui:size-4 labui:place-items-center", children: /* @__PURE__ */ jsx2(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx2(CheckIcon, { className: "labui:size-4" }) }) }),
+          action.label
+        ]
+      },
+      action.label
+    );
+  return /* @__PURE__ */ jsx2(
+    ContextMenu.Item,
+    {
+      className: menuItem,
+      disabled: action.disabled,
+      onSelect: action.onSelect,
+      children: action.label
+    },
+    action.label
+  );
+}
+function ActionMenu({
+  children,
+  actions,
+  onCloseAutoFocus
+}) {
+  return /* @__PURE__ */ jsxs2(ContextMenu.Root, { modal: false, children: [
+    /* @__PURE__ */ jsx2(ContextMenu.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx2(ContextMenu.Portal, { children: /* @__PURE__ */ jsx2(
+      ContextMenu.Content,
+      {
+        className: panel + " labui:min-w-44",
+        onCloseAutoFocus,
+        children: actions.map(contextItem)
+      }
+    ) })
+  ] });
+}
+function OptionMenu({
+  trigger,
+  options,
+  onSelect,
+  open,
+  onOpenChange,
+  onCloseAutoFocus
+}) {
+  const groups = [
+    ...new Set(
+      options.flatMap((option) => option.group ? [option.group] : [])
+    )
+  ];
+  const item = (option) => /* @__PURE__ */ jsxs2(
+    DropdownMenu.Item,
+    {
+      className: menuItem,
+      onSelect: () => onSelect(option.id),
+      children: [
+        option.icon,
+        option.label
+      ]
+    },
+    option.id
+  );
+  return /* @__PURE__ */ jsxs2(DropdownMenu.Root, { modal: false, open, onOpenChange, children: [
+    /* @__PURE__ */ jsx2(DropdownMenu.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx2(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs2(
+      DropdownMenu.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        collisionPadding: 8,
+        className: optionPanel,
+        onCloseAutoFocus,
+        children: [
+          options.filter((option) => !option.group).map(item),
+          groups.map((group) => /* @__PURE__ */ jsxs2(DropdownMenu.Sub, { children: [
+            /* @__PURE__ */ jsxs2(
+              DropdownMenu.SubTrigger,
+              {
+                className: menuItem + " labui:justify-between labui:data-[state=open]:bg-accent",
+                children: [
+                  group,
+                  /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "labui:size-4" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx2(
+              DropdownMenu.SubContent,
+              {
+                className: optionPanel,
+                sideOffset: 4,
+                collisionPadding: 8,
+                children: options.filter((option) => option.group === group).map(item)
+              }
+            ) })
+          ] }, group))
+        ]
+      }
+    ) })
+  ] });
+}
+
+// app-menu.tsx
+import * as Popover from "@radix-ui/react-popover";
+import { useRef, useState as useState2 } from "react";
+import { MaximizeIcon, MinimizeIcon, MoonIcon, SunIcon } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var round = "labui:rounded-full labui:border labui:border-border";
+function AppMenu({
+  name,
+  logo,
+  version,
+  dark = false,
+  onThemeChange,
+  size = 100,
+  align = "start",
+  onSizeChange,
+  onSizeReset,
+  fullscreen = false,
+  onFullscreenChange
+}) {
+  const trigger = useRef(null);
+  const sizePanel = useRef(null);
+  const [anchor, setAnchor] = useState2();
+  const level = Math.max(0, Math.min(100, size));
+  const ThemeIcon = dark ? SunIcon : MoonIcon;
+  const theme = dark ? "dark " : "";
+  return /* @__PURE__ */ jsxs3(
+    Popover.Root,
+    {
+      onOpenChange: (open) => {
+        if (open) setAnchor(trigger.current?.offsetHeight);
+      },
+      children: [
+        /* @__PURE__ */ jsx3(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            ref: trigger,
+            type: "button",
+            "aria-label": name,
+            title: `${name} menu`,
+            className: "labui:group labui:relative labui:grid labui:size-[var(--lab-tab-height,2.75rem)] labui:shrink-0 labui:cursor-pointer labui:place-items-center labui:rounded-full labui:outline-none labui:focus-visible:outline-2 labui:focus-visible:outline-ring",
+            children: [
+              /* @__PURE__ */ jsx3("span", { className: "labui:grid labui:size-[var(--lab-logo-size,1.5rem)] labui:transition-[filter,translate] labui:duration-150 labui:motion-safe:group-hover:-translate-y-0.5 labui:group-hover:drop-shadow-[0_3px_2px_#00000035] labui:group-active:translate-y-0 labui:dark:group-hover:drop-shadow-[0_3px_3px_#00000090]", children: logo }),
+              /* @__PURE__ */ jsx3(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  className: "labui:absolute labui:inset-x-0 labui:top-0",
+                  style: { height: anchor ?? "100%" }
+                }
+              ) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(Popover.Portal, { children: /* @__PURE__ */ jsxs3(
+          Popover.Content,
+          {
+            align,
+            sideOffset: 4,
+            collisionPadding: 8,
+            "aria-label": `${name} menu`,
+            onInteractOutside: (event) => {
+              if (sizePanel.current?.contains(event.target))
+                event.preventDefault();
+            },
+            className: theme + (align === "start" ? "labui:ml-1 labui:sm:-ml-1 " : "labui:mr-1 labui:sm:-mr-1 ") + "labui:z-50 labui:flex labui:w-max labui:max-h-[var(--radix-popover-content-available-height)] labui:flex-col labui:items-center labui:gap-3 labui:overflow-auto labui:rounded-lg labui:border labui:bg-popover labui:p-4 labui:text-center labui:text-popover-foreground labui:shadow-sm",
+            children: [
+              /* @__PURE__ */ jsxs3("div", { className: "labui:flex labui:items-center labui:gap-2 labui:text-2xl", children: [
+                /* @__PURE__ */ jsx3("span", { className: "labui:grid labui:size-6 labui:shrink-0", children: logo }),
+                /* @__PURE__ */ jsx3("span", { className: "labui:font-display labui:font-bold labui:tracking-tight", children: name })
+              ] }),
+              version != null && /* @__PURE__ */ jsx3("div", { className: "labui:text-xs labui:text-muted-foreground", children: /* @__PURE__ */ jsx3("span", { className: "labui:font-mono", children: version }) }),
+              /* @__PURE__ */ jsxs3("div", { className: "labui:flex labui:items-center labui:justify-center labui:gap-2", children: [
+                onThemeChange && /* @__PURE__ */ jsx3(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    className: round,
+                    "aria-label": "Toggle theme",
+                    "aria-pressed": dark,
+                    onClick: () => onThemeChange(!dark),
+                    title: "Toggle theme",
+                    children: /* @__PURE__ */ jsx3(ThemeIcon, { className: "labui:size-4" })
+                  }
+                ),
+                onSizeChange && /* @__PURE__ */ jsxs3(Popover.Root, { children: [
+                  /* @__PURE__ */ jsx3(
+                    ActionMenu,
+                    {
+                      actions: onSizeReset ? [{ label: "Reset", onSelect: onSizeReset }] : [],
+                      children: /* @__PURE__ */ jsx3(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon-sm",
+                          className: round,
+                          "aria-label": "Workspace size",
+                          title: "Workspace size",
+                          children: /* @__PURE__ */ jsx3(
+                            "svg",
+                            {
+                              "aria-hidden": "true",
+                              viewBox: "0 0 24 24",
+                              className: "labui:size-4 labui:[&_rect]:transition-[fill-opacity]",
+                              children: [0, 1, 2].map((row) => /* @__PURE__ */ jsx3(
+                                "rect",
+                                {
+                                  x: "4",
+                                  y: 3 + row * 7,
+                                  width: "16",
+                                  height: "4",
+                                  rx: "1",
+                                  stroke: "currentColor",
+                                  strokeWidth: "1.5",
+                                  fill: "currentColor",
+                                  fillOpacity: Math.max(
+                                    0,
+                                    Math.min(1, level / 100 * 3 - (2 - row))
+                                  )
+                                },
+                                row
+                              ))
+                            }
+                          )
+                        }
+                      ) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(Popover.Portal, { children: /* @__PURE__ */ jsxs3(
+                    Popover.Content,
+                    {
+                      ref: sizePanel,
+                      side: "bottom",
+                      align: "center",
+                      sideOffset: 8,
+                      collisionPadding: 8,
+                      "aria-label": "Workspace size",
+                      className: theme + "labui:z-[60] labui:origin-(--radix-popover-content-transform-origin) labui:animate-pop labui:rounded-xl labui:border labui:bg-popover labui:p-2 labui:shadow-md labui:data-[state=closed]:animate-[labui-pop_120ms_ease-in_reverse]",
+                      children: [
+                        /* @__PURE__ */ jsxs3("div", { className: "labui:relative labui:h-28 labui:w-7 labui:overflow-hidden labui:rounded-full labui:border labui:bg-secondary labui:shadow-inner labui:has-focus-visible:outline-2 labui:has-focus-visible:outline-offset-2 labui:has-focus-visible:outline-ring", children: [
+                          /* @__PURE__ */ jsx3(
+                            "div",
+                            {
+                              className: "labui:pointer-events-none labui:absolute labui:inset-x-0 labui:bottom-0 labui:bg-white labui:shadow-[0_-1px_4px_#00000014] labui:[transition:height_100ms_ease-out] labui:forced-colors:hidden",
+                              style: { height: `${level}%` }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx3(
+                            "input",
+                            {
+                              type: "range",
+                              min: 0,
+                              max: 100,
+                              step: "any",
+                              value: level,
+                              "aria-label": "Workspace size",
+                              "aria-orientation": "vertical",
+                              "aria-valuetext": `${Math.round(level)}%`,
+                              className: "labui:range-overlay",
+                              onChange: (event) => onSizeChange(event.currentTarget.valueAsNumber)
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx3(Popover.Arrow, { asChild: true, width: 16, height: 8, children: /* @__PURE__ */ jsx3(
+                          "svg",
+                          {
+                            viewBox: "0 0 16 8",
+                            className: "labui:fill-popover labui:stroke-border",
+                            children: /* @__PURE__ */ jsx3("path", { d: "M0 0 C3 0 5 6 7 7 Q8 8 9 7 C11 6 13 0 16 0" })
+                          }
+                        ) })
+                      ]
+                    }
+                  ) })
+                ] }),
+                onFullscreenChange && /* @__PURE__ */ jsx3(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    className: round,
+                    "aria-label": "Full screen",
+                    "aria-pressed": fullscreen,
+                    title: fullscreen ? "Exit full screen" : "Full screen",
+                    onClick: () => onFullscreenChange(!fullscreen),
+                    children: fullscreen ? /* @__PURE__ */ jsx3(MinimizeIcon, { className: "labui:size-4" }) : /* @__PURE__ */ jsx3(MaximizeIcon, { className: "labui:size-4" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// form-fields.tsx
+import { useId } from "react";
+import { PlusIcon } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TextField({ label, value, onChange, ...props }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs4(Field, { "data-invalid": props["aria-invalid"] || void 0, children: [
+    /* @__PURE__ */ jsx4(FieldLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx4(
+      Input,
+      {
+        id,
+        autoComplete: "off",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        ...props
+      }
+    )
+  ] });
+}
+function SelectField({
+  label,
+  value,
+  onChange,
+  options,
+  children
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs4(Field, { children: [
+    /* @__PURE__ */ jsx4(FieldLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs4("div", { className: "labui:flex labui:items-center labui:gap-2", children: [
+      /* @__PURE__ */ jsxs4(Select, { value, onValueChange: onChange, children: [
+        /* @__PURE__ */ jsx4(SelectTrigger, { id, className: "labui:flex-1", children: /* @__PURE__ */ jsx4(SelectValue, {}) }),
+        /* @__PURE__ */ jsx4(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsx4(SelectItem, { value: o.id, disabled: o.disabled, children: o.name }, o.id)) })
+      ] }),
+      children
+    ] })
+  ] });
+}
+function AddButton({
+  children,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs4(Button, { type: "button", variant: "secondary", onClick, children: [
+    /* @__PURE__ */ jsx4(PlusIcon, {}),
+    children
+  ] });
+}
+
+// table.tsx
+import * as React3 from "react";
+import "react";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var show = (value) => value == null ? "" : String(value);
+var cellClass = "labui:px-3 labui:py-(--labui-row-py) labui:align-middle";
+function Table({
+  label,
+  columns,
+  rows,
+  rowKey,
+  loading,
+  empty = "No rows to display.",
+  defaultSort = null,
+  onRowActivate,
+  rowLabel
+}) {
+  const [sort, setSort] = React3.useState(defaultSort);
+  const sortBy = columns.find((c) => c.id === sort?.column)?.sortValue;
+  const sorted = sort && sortBy ? [...rows].sort((x, y) => {
+    const a = sortBy(x);
+    const b = sortBy(y);
+    if (a == null || b == null)
+      return Number(a == null) - Number(b == null);
+    const order = typeof a === "number" && typeof b === "number" ? a - b : String(a).localeCompare(String(b), void 0, {
+      numeric: true
+    });
+    return sort.direction === "asc" ? order : -order;
+  }) : rows;
+  function toggle(column2) {
+    setSort(
+      sort?.column === column2.id ? {
+        column: column2.id,
+        direction: sort.direction === "asc" ? "desc" : "asc"
+      } : { column: column2.id, direction: column2.numeric ? "desc" : "asc" }
+    );
+  }
+  return /* @__PURE__ */ jsx5("div", { className: "labui:min-w-0 labui:overflow-auto labui:rounded-lg labui:border", children: /* @__PURE__ */ jsxs5(
+    "table",
+    {
+      "aria-label": label,
+      "aria-busy": loading || void 0,
+      className: "labui:w-full labui:text-xs labui:tabular-nums",
+      children: [
+        /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { children: columns.map((column2) => {
+          const direction = sort?.column === column2.id ? sort.direction : null;
+          const Marker = direction === "asc" ? ArrowUpIcon : direction === "desc" ? ArrowDownIcon : ArrowUpDownIcon;
+          return /* @__PURE__ */ jsx5(
+            "th",
+            {
+              scope: "col",
+              "aria-sort": direction ? direction === "asc" ? "ascending" : "descending" : void 0,
+              className: cn(
+                "labui:sticky labui:top-0 labui:z-10 labui:h-8 labui:bg-card labui:px-3 labui:text-left labui:font-medium labui:whitespace-nowrap labui:text-muted-foreground labui:shadow-[inset_0_-1px_var(--labui-border)]",
+                column2.numeric && "labui:text-right"
+              ),
+              children: /* @__PURE__ */ jsxs5(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "labui:-mx-2 labui:h-7 labui:gap-1 labui:px-2 labui:text-xs labui:font-medium labui:hover:bg-transparent",
+                  disabled: loading,
+                  onClick: () => toggle(column2),
+                  children: [
+                    column2.header,
+                    column2.headerDetail && /* @__PURE__ */ jsx5("span", { className: "labui:text-[10px] labui:font-normal", children: column2.headerDetail }),
+                    /* @__PURE__ */ jsx5(
+                      Marker,
+                      {
+                        "aria-hidden": "true",
+                        className: cn(
+                          "labui:size-3.5",
+                          !direction && "labui:opacity-40"
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            },
+            column2.id
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx5("tbody", { className: "labui:[&_tr:last-child]:border-0", children: loading ? Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx5("tr", { "aria-hidden": "true", className: "labui:border-b", children: columns.map((column2, at) => /* @__PURE__ */ jsx5("td", { className: cellClass, children: /* @__PURE__ */ jsx5(
+          Skeleton,
+          {
+            className: cn(
+              "labui:h-3",
+              at % 2 ? "labui:w-1/2" : "labui:w-3/4"
+            )
+          }
+        ) }, column2.id)) }, index)) : sorted.length === 0 ? /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5(
+          "td",
+          {
+            colSpan: columns.length,
+            className: "labui:p-4 labui:text-muted-foreground",
+            children: empty
+          }
+        ) }) : sorted.map((row, index) => /* @__PURE__ */ jsx5(
+          "tr",
+          {
+            className: cn(
+              "labui:border-b labui:transition-colors labui:hover:bg-muted/50",
+              onRowActivate && "labui:cursor-pointer"
+            ),
+            onClick: (event) => {
+              if (!event.target.closest("a, button"))
+                onRowActivate?.(row);
+            },
+            children: columns.map((column2, at) => {
+              const Cell = column2.rowHeader ? "th" : "td";
+              return /* @__PURE__ */ jsx5(
+                Cell,
+                {
+                  scope: column2.rowHeader ? "row" : void 0,
+                  className: cn(
+                    cellClass,
+                    column2.rowHeader && "labui:text-left labui:font-medium",
+                    column2.numeric && "labui:text-right"
+                  ),
+                  children: at === 0 && onRowActivate ? /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": rowLabel?.(row),
+                      className: "labui:-m-1 labui:min-h-6 labui:rounded labui:p-1 labui:text-left labui:whitespace-nowrap labui:focus-visible:outline-2 labui:focus-visible:outline-ring",
+                      onClick: () => onRowActivate(row),
+                      children: column2.cell(row)
+                    }
+                  ) : column2.cell(row)
+                },
+                column2.id
+              );
+            })
+          },
+          rowKey(row, index)
+        )) })
+      ]
+    }
+  ) });
+}
+function column(id, header, value, cell = (row) => show(value(row))) {
+  return { id, header, sortValue: value, cell };
+}
+var mono = (id, header, value) => column(
+  id,
+  header,
+  (row) => show(value(row)),
+  (row) => /* @__PURE__ */ jsx5("span", { className: "labui:font-mono", children: show(value(row)) })
+);
+var num = (id, header, value, digits = 0, headerDetail) => ({
+  ...column(
+    id,
+    header,
+    value,
+    (row) => value(row).toLocaleString("en-US", {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits
+    })
+  ),
+  numeric: true,
+  headerDetail
+});
+export {
+  ActionMenu,
+  AddButton,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  AppMenu,
+  Back,
+  Badge,
+  Button,
+  Checkbox,
+  ConfirmDialog,
+  CopyButton,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DiscardDialog,
+  Field,
+  FieldError,
+  FieldLabel,
+  Input,
+  MenuContent,
+  OptionMenu,
+  Page,
+  PageActions,
+  PageHeader,
+  Select,
+  SelectContent,
+  SelectField,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+  Spinner,
+  Table,
+  TextField,
+  cn,
+  column,
+  mono,
+  num
+};
+//# sourceMappingURL=index.js.map