@sypra-ui/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1554 @@
+// src/lib/utils.ts
+var cn = (...values) => values.filter(Boolean).join(" ");
+
+// src/components/forms.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonStyles = {
+  primary: "bg-[hsl(var(--rui-primary))] text-[hsl(var(--rui-primary-foreground))] hover:opacity-90",
+  secondary: "bg-[hsl(var(--rui-secondary))] text-[hsl(var(--rui-secondary-foreground))] hover:opacity-80",
+  outline: "border border-[hsl(var(--rui-border))] bg-transparent hover:bg-[hsl(var(--rui-accent))]",
+  ghost: "bg-transparent hover:bg-[hsl(var(--rui-accent))]",
+  destructive: "bg-[hsl(var(--rui-destructive))] text-[hsl(var(--rui-destructive-foreground))] hover:opacity-90"
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  loading,
+  className,
+  children,
+  disabled,
+  ...props
+}) {
+  const padding = size === "sm" ? "h-8 px-3 text-sm" : size === "lg" ? "h-11 px-5 text-base" : "h-10 px-4 text-sm";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "rui-focus inline-flex items-center justify-center gap-2 rounded-[var(--rui-radius)] font-medium transition disabled:pointer-events-none disabled:opacity-50",
+        padding,
+        buttonStyles[variant],
+        className
+      ),
+      disabled: disabled || loading,
+      "aria-busy": loading,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-r-transparent" }),
+        " ",
+        children
+      ]
+    }
+  );
+}
+function IconButton({
+  children,
+  "aria-label": label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("size-10 px-0", className),
+      "aria-label": label,
+      ...props,
+      children
+    }
+  );
+}
+var Input = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    className: cn(
+      "rui-focus h-10 w-full rounded-[var(--rui-radius)] border border-[hsl(var(--rui-input))] bg-transparent px-3 text-sm placeholder:text-[hsl(var(--rui-muted-foreground))] disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+);
+var Textarea = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "textarea",
+  {
+    className: cn(
+      "rui-focus min-h-24 w-full rounded-[var(--rui-radius)] border border-[hsl(var(--rui-input))] bg-transparent px-3 py-2 text-sm placeholder:text-[hsl(var(--rui-muted-foreground))] disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+);
+var Label = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "label",
+  {
+    className: cn("mb-1.5 block text-sm font-medium", className),
+    ...props
+  }
+);
+var Checkbox = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    type: "checkbox",
+    className: cn(
+      "rui-focus size-4 accent-[hsl(var(--rui-primary))]",
+      className
+    ),
+    ...props
+  }
+);
+var Radio = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    type: "radio",
+    className: cn(
+      "rui-focus size-4 accent-[hsl(var(--rui-primary))]",
+      className
+    ),
+    ...props
+  }
+);
+var Switch = ({
+  checked,
+  onChange,
+  disabled,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "label",
+  {
+    className: cn(
+      "inline-flex cursor-pointer items-center",
+      disabled && "cursor-not-allowed opacity-50",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          className: "peer sr-only",
+          checked,
+          onChange,
+          disabled,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "rui-focus h-6 w-11 rounded-full bg-[hsl(var(--rui-muted))] p-0.5 transition peer-checked:bg-[hsl(var(--rui-primary))]", children: /* @__PURE__ */ jsx("span", { className: "block size-5 rounded-full bg-[hsl(var(--rui-switch-thumb))] transition peer-checked:translate-x-5" }) })
+    ]
+  }
+);
+var Select = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "select",
+  {
+    className: cn(
+      "rui-focus h-10 w-full rounded-[var(--rui-radius)] border border-[hsl(var(--rui-input))] bg-[hsl(var(--rui-background))] px-3 text-sm",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+// src/components/display.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Card({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "section",
+    {
+      className: cn(
+        "rounded-[calc(var(--rui-radius)+.15rem)] border border-[hsl(var(--rui-border))] bg-[hsl(var(--rui-card))] p-5 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn("mb-4 flex items-start justify-between gap-3", className),
+      ...props
+    }
+  );
+}
+function CardTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2("h3", { className: cn("font-semibold leading-none", className), ...props });
+}
+function CardDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "p",
+    {
+      className: cn(
+        "mt-1 text-sm text-[hsl(var(--rui-muted-foreground))]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Badge({
+  className,
+  variant = "default",
+  ...props
+}) {
+  const variants = {
+    default: "bg-[hsl(var(--rui-secondary))]",
+    success: "bg-[hsl(var(--rui-success-background))] text-[hsl(var(--rui-success-foreground))]",
+    warning: "bg-[hsl(var(--rui-warning-background))] text-[hsl(var(--rui-warning-foreground))]",
+    destructive: "bg-[hsl(var(--rui-destructive-background))] text-[hsl(var(--rui-destructive-text))]",
+    outline: "border border-[hsl(var(--rui-border))]"
+  };
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+        variants[variant],
+        className
+      ),
+      children: props.children
+    }
+  );
+}
+function Avatar({
+  src,
+  alt = "",
+  fallback,
+  className
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: cn(
+        "inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[hsl(var(--rui-muted))] text-sm font-medium",
+        className
+      ),
+      children: src ? /* @__PURE__ */ jsx2("img", { className: "size-full object-cover", src, alt }) : fallback ?? alt.slice(0, 2).toUpperCase()
+    }
+  );
+}
+var Separator = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    role: "separator",
+    className: cn("h-px w-full bg-[hsl(var(--rui-border))]", className),
+    ...props
+  }
+);
+var Skeleton = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    className: cn(
+      "animate-pulse rounded bg-[hsl(var(--rui-muted))]",
+      className
+    ),
+    ...props
+  }
+);
+function Progress({
+  value,
+  max = 100,
+  label,
+  className
+}) {
+  const percent = Math.max(0, Math.min(100, value / max * 100));
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className,
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      children: /* @__PURE__ */ jsx2("div", { className: "h-2 overflow-hidden rounded-full bg-[hsl(var(--rui-muted))]", children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "h-full rounded-full bg-[hsl(var(--rui-primary))] transition-all",
+          style: { width: `${percent}%` }
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/dialog.tsx
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DialogContext = createContext(null);
+var DialogTitleContext = createContext(void 0);
+var useDialog = () => {
+  const value = useContext(DialogContext);
+  if (!value) throw new Error("Dialog components must be inside Dialog");
+  return value;
+};
+function Dialog({
+  open: controlled,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = controlled ?? uncontrolled;
+  const setOpen = useCallback(
+    (next) => {
+      if (controlled === void 0) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [controlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx3(DialogContext.Provider, { value: { open, setOpen }, children });
+}
+function DialogTrigger({
+  children,
+  asChild = false
+}) {
+  const { setOpen } = useDialog();
+  if (asChild && isValidElement(children))
+    return cloneElement(children, {
+      onClick: () => {
+        children.props.onClick?.();
+        setOpen(true);
+      }
+    });
+  return /* @__PURE__ */ jsx3(Button, { onClick: () => setOpen(true), children });
+}
+function DialogClose({
+  children,
+  asChild = false
+}) {
+  const { setOpen } = useDialog();
+  if (asChild && isValidElement(children))
+    return cloneElement(children, {
+      onClick: () => {
+        children.props.onClick?.();
+        setOpen(false);
+      }
+    });
+  return /* @__PURE__ */ jsx3(Button, { variant: "ghost", onClick: () => setOpen(false), children });
+}
+function DialogContent({
+  children,
+  className,
+  movable = false,
+  constrainToViewport = true,
+  style,
+  ...props
+}) {
+  const { open, setOpen } = useDialog();
+  const panel = useRef(null);
+  const previousFocus = useRef(null);
+  const [drag, setDrag] = useState(null);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const titleId = useId();
+  useEffect(() => {
+    if (!open) return;
+    previousFocus.current = document.activeElement;
+    const timer = window.setTimeout(() => panel.current?.focus(), 0);
+    const key = (event) => {
+      if (event.key === "Escape") setOpen(false);
+      if (event.key === "Tab" && panel.current) {
+        const nodes = panel.current.querySelectorAll(
+          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        );
+        const first = nodes[0], last = nodes[nodes.length - 1];
+        if (!first || !last) return;
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", key);
+    return () => {
+      window.clearTimeout(timer);
+      document.removeEventListener("keydown", key);
+      previousFocus.current?.focus();
+    };
+  }, [open, setOpen]);
+  useEffect(() => {
+    if (!drag) return;
+    const move = (event) => {
+      let x = offset.x + event.clientX - drag.x;
+      let y = offset.y + event.clientY - drag.y;
+      if (constrainToViewport && panel.current) {
+        const rect = panel.current.getBoundingClientRect();
+        x = Math.min(
+          Math.max(x, -rect.left + 12),
+          window.innerWidth - rect.right - 12 + offset.x
+        );
+        y = Math.min(
+          Math.max(y, -rect.top + 12),
+          window.innerHeight - rect.bottom - 12 + offset.y
+        );
+      }
+      setOffset({ x, y });
+    };
+    const up = () => setDrag(null);
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [drag, offset, constrainToViewport]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "fixed inset-0 z-50 grid place-items-center p-4",
+        role: "presentation",
+        children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              className: "absolute inset-0 cursor-default bg-[hsl(var(--rui-overlay))]/50",
+              "aria-label": "Close dialog",
+              onClick: () => setOpen(false)
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              ref: panel,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": titleId,
+              tabIndex: -1,
+              className: cn(
+                "relative z-10 max-h-[calc(100vh-2rem)] w-full max-w-lg overflow-auto rounded-[calc(var(--rui-radius)+.2rem)] bg-[hsl(var(--rui-card))] p-6 text-[hsl(var(--rui-foreground))] shadow-2xl outline-none",
+                drag && "select-none",
+                className
+              ),
+              style: {
+                ...style,
+                transform: `translate(${offset.x}px, ${offset.y}px)`
+              },
+              ...props,
+              children: [
+                movable && /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    onPointerDown: (event) => {
+                      if (window.innerWidth < 640 || event.target.closest(
+                        "button,input,select,textarea,a,[role=button]"
+                      ))
+                        return;
+                      event.preventDefault();
+                      setDrag({ x: event.clientX, y: event.clientY });
+                    },
+                    className: "-mx-2 -mt-2 mb-3 cursor-grab touch-none rounded px-2 py-1 text-xs text-[hsl(var(--rui-muted-foreground))] active:cursor-grabbing",
+                    children: "Drag to move"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(DialogTitleContext.Provider, { value: titleId, children })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx3("div", { className: cn("mb-5 space-y-1.5", className), ...props });
+var DialogTitle = ({
+  className,
+  ...props
+}) => {
+  const id = useContext(DialogTitleContext);
+  return /* @__PURE__ */ jsx3("h2", { id, className: cn("text-lg font-semibold", className), ...props });
+};
+var DialogDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx3(
+  "p",
+  {
+    className: cn("text-sm text-[hsl(var(--rui-muted-foreground))]", className),
+    ...props
+  }
+);
+var DialogBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx3("div", { className: cn("space-y-4", className), ...props });
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    className: cn("mt-6 flex flex-wrap justify-end gap-2", className),
+    ...props
+  }
+);
+var AlertDialog = Dialog;
+var AlertDialogTrigger = DialogTrigger;
+var AlertDialogContent = DialogContent;
+var AlertDialogHeader = DialogHeader;
+var AlertDialogTitle = DialogTitle;
+var AlertDialogDescription = DialogDescription;
+var AlertDialogFooter = DialogFooter;
+var AlertDialogClose = DialogClose;
+function Sheet({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(Dialog, { ...props, children });
+}
+var SheetTrigger = DialogTrigger;
+var SheetClose = DialogClose;
+function SheetContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DialogContent,
+    {
+      className: cn("ml-auto h-full max-h-none rounded-r-none", className),
+      ...props
+    }
+  );
+}
+var Drawer = Sheet;
+var DrawerTrigger = SheetTrigger;
+var DrawerContent = SheetContent;
+
+// src/components/overlays.tsx
+import {
+  cloneElement as cloneElement2,
+  isValidElement as isValidElement2,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useId as useId2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Popover({
+  trigger,
+  children,
+  className,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const root = useRef2(null);
+  const contentId = useId2();
+  const setOpen = useCallback2(
+    (next) => {
+      if (controlledOpen === void 0) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  useEffect2(() => {
+    if (!open) return;
+    const dismiss = (event) => {
+      if (!root.current?.contains(event.target)) setOpen(false);
+    };
+    const escape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", dismiss);
+    document.addEventListener("keydown", escape);
+    return () => {
+      document.removeEventListener("pointerdown", dismiss);
+      document.removeEventListener("keydown", escape);
+    };
+  }, [open, setOpen]);
+  const triggerProps = {
+    "aria-controls": contentId,
+    "aria-expanded": open,
+    "aria-haspopup": "dialog",
+    onClick: () => setOpen(!open)
+  };
+  const triggerElement = isValidElement2(trigger) ? cloneElement2(trigger, {
+    ...triggerProps,
+    onClick: () => {
+      trigger.props.onClick?.();
+      setOpen(!open);
+    }
+  }) : /* @__PURE__ */ jsx4("button", { type: "button", ...triggerProps, children: trigger });
+  return /* @__PURE__ */ jsxs3("span", { ref: root, className: "relative inline-block", children: [
+    triggerElement,
+    open && /* @__PURE__ */ jsx4(
+      "span",
+      {
+        id: contentId,
+        role: "dialog",
+        className: cn(
+          "absolute z-30 mt-2 block min-w-52 rounded-[var(--rui-radius)] border border-[hsl(var(--rui-border))] bg-[hsl(var(--rui-card))] p-3 shadow-lg",
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+var Tooltip = ({
+  content,
+  children,
+  className
+}) => {
+  const [visible, setVisible] = useState2(false);
+  const id = useId2();
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      className: "relative inline-flex",
+      onMouseEnter: () => setVisible(true),
+      onMouseLeave: () => setVisible(false),
+      onFocus: () => setVisible(true),
+      onBlur: () => setVisible(false),
+      "aria-describedby": visible ? id : void 0,
+      children: [
+        children,
+        visible && /* @__PURE__ */ jsx4(
+          "span",
+          {
+            id,
+            role: "tooltip",
+            className: cn(
+              "absolute bottom-full left-1/2 z-30 mb-2 w-max max-w-52 -translate-x-1/2 rounded bg-[hsl(var(--rui-tooltip))] px-2 py-1 text-xs text-[hsl(var(--rui-tooltip-foreground))] shadow",
+              className
+            ),
+            children: content
+          }
+        )
+      ]
+    }
+  );
+};
+function DropdownMenu({
+  trigger,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(Popover, { trigger, className: "right-0 p-1", children });
+}
+var DropdownMenuItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx4(
+  "button",
+  {
+    className: cn(
+      "rui-focus block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-[hsl(var(--rui-accent))]",
+      className
+    ),
+    ...props
+  }
+);
+
+// src/components/navigation.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Navbar({
+  brand,
+  children,
+  className,
+  label = "Main navigation"
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "nav",
+    {
+      "aria-label": label,
+      className: cn(
+        "flex min-h-14 items-center justify-between border-b border-[hsl(var(--rui-border))] px-4",
+        className
+      ),
+      children: [
+        brand,
+        /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-2", children })
+      ]
+    }
+  );
+}
+function Sidebar({
+  children,
+  className,
+  label = "Sidebar"
+}) {
+  return /* @__PURE__ */ jsx5(
+    "aside",
+    {
+      "aria-label": label,
+      className: cn(
+        "w-60 shrink-0 border-r border-[hsl(var(--rui-border))] p-3",
+        className
+      ),
+      children
+    }
+  );
+}
+function MobileNav({
+  children,
+  className,
+  label = "Mobile navigation"
+}) {
+  return /* @__PURE__ */ jsx5(
+    "nav",
+    {
+      "aria-label": label,
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-40 flex justify-around border-t border-[hsl(var(--rui-border))] bg-[hsl(var(--rui-card))] p-2 sm:hidden",
+        className
+      ),
+      children
+    }
+  );
+}
+function Breadcrumb({
+  items
+}) {
+  return /* @__PURE__ */ jsx5("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx5("ol", { className: "flex flex-wrap items-center gap-2 text-sm text-[hsl(var(--rui-muted-foreground))]", children: items.map((item, index) => /* @__PURE__ */ jsxs4(
+    "li",
+    {
+      className: "flex items-center gap-2",
+      children: [
+        index > 0 && /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "/" }),
+        item.href ? /* @__PURE__ */ jsx5(
+          "a",
+          {
+            className: "hover:text-[hsl(var(--rui-foreground))]",
+            href: item.href,
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsx5(
+          "span",
+          {
+            "aria-current": index === items.length - 1 ? "page" : void 0,
+            children: item.label
+          }
+        )
+      ]
+    },
+    `${item.label}-${index}`
+  )) }) });
+}
+function Tabs({
+  tabs,
+  value,
+  defaultValue,
+  onValueChange,
+  className
+}) {
+  const [local, setLocal] = useState3(defaultValue ?? tabs[0]?.value ?? "");
+  const selected = value ?? local;
+  const choose = (next) => {
+    if (value === void 0) setLocal(next);
+    onValueChange?.(next);
+  };
+  const active = tabs.find((tab) => tab.value === selected);
+  return /* @__PURE__ */ jsxs4("div", { className, children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        role: "tablist",
+        className: "flex gap-1 border-b border-[hsl(var(--rui-border))]",
+        children: tabs.map((tab) => /* @__PURE__ */ jsx5(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": tab.value === selected,
+            disabled: tab.disabled,
+            onClick: () => choose(tab.value),
+            className: cn(
+              "rui-focus border-b-2 px-3 py-2 text-sm font-medium transition",
+              tab.value === selected ? "border-[hsl(var(--rui-primary))]" : "border-transparent text-[hsl(var(--rui-muted-foreground))]"
+            ),
+            children: tab.label
+          },
+          tab.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx5("div", { role: "tabpanel", className: "py-4", children: active?.content })
+  ] });
+}
+function Accordion({
+  items,
+  type = "single"
+}) {
+  const [open, setOpen] = useState3([]);
+  const toggle = (value) => setOpen(
+    (current) => current.includes(value) ? current.filter((item) => item !== value) : type === "single" ? [value] : [...current, value]
+  );
+  return /* @__PURE__ */ jsx5("div", { className: "divide-y divide-[hsl(var(--rui-border))]", children: items.map((item) => /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        className: "rui-focus flex w-full items-center justify-between py-3 text-left font-medium",
+        "aria-expanded": open.includes(item.value),
+        onClick: () => toggle(item.value),
+        children: [
+          item.title,
+          /* @__PURE__ */ jsx5("span", { children: open.includes(item.value) ? "\u2212" : "+" })
+        ]
+      }
+    ),
+    open.includes(item.value) && /* @__PURE__ */ jsx5("div", { className: "pb-3 text-sm text-[hsl(var(--rui-muted-foreground))]", children: item.content })
+  ] }, item.value)) });
+}
+function Pagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions = [10, 20, 50],
+  ariaLabel = "Pagination",
+  className
+}) {
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  const visible = Array.from(
+    { length: Math.min(pages, 5) },
+    (_, i) => Math.max(1, Math.min(pages - 4, page - 3)) + i
+  );
+  return /* @__PURE__ */ jsxs4(
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      className: cn("flex flex-wrap items-center gap-2", className),
+      children: [
+        /* @__PURE__ */ jsx5(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            disabled: page <= 1,
+            onClick: () => onPageChange(page - 1),
+            children: "Previous"
+          }
+        ),
+        visible.map((number) => /* @__PURE__ */ jsx5(
+          Button,
+          {
+            variant: number === page ? "primary" : "ghost",
+            size: "sm",
+            "aria-current": number === page ? "page" : void 0,
+            onClick: () => onPageChange(number),
+            children: number
+          },
+          number
+        )),
+        /* @__PURE__ */ jsx5(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            disabled: page >= pages,
+            onClick: () => onPageChange(page + 1),
+            children: "Next"
+          }
+        ),
+        onPageSizeChange && /* @__PURE__ */ jsx5(
+          Select,
+          {
+            "aria-label": "Rows per page",
+            className: "ml-auto w-auto",
+            value: pageSize,
+            onChange: (event) => onPageSizeChange(Number(event.target.value)),
+            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs4("option", { value: size, children: [
+              size,
+              " / page"
+            ] }, size))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/feedback.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Alert({
+  title,
+  children,
+  variant = "default",
+  className
+}) {
+  const color = variant === "destructive" ? "border-[hsl(var(--rui-destructive))] bg-[hsl(var(--rui-destructive-background))] text-[hsl(var(--rui-destructive-text))]" : variant === "success" ? "border-[hsl(var(--rui-success))] bg-[hsl(var(--rui-success-background))] text-[hsl(var(--rui-success-foreground))]" : "border-[hsl(var(--rui-border))] bg-[hsl(var(--rui-muted))]";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        "rounded-[var(--rui-radius)] border p-3 text-sm",
+        color,
+        className
+      ),
+      children: [
+        title && /* @__PURE__ */ jsx6("strong", { className: "block", children: title }),
+        children
+      ]
+    }
+  );
+}
+function Toast({
+  title,
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "status",
+      className: cn(
+        "flex max-w-sm items-start gap-4 rounded-[var(--rui-radius)] border border-[hsl(var(--rui-border))] bg-[hsl(var(--rui-card))] p-4 shadow-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx6("strong", { className: "text-sm", children: title }),
+          description && /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-[hsl(var(--rui-muted-foreground))]", children: description })
+        ] }),
+        action
+      ]
+    }
+  );
+}
+var EmptyState = ({
+  title = "Nothing here yet",
+  description,
+  action,
+  className
+}) => /* @__PURE__ */ jsxs5(
+  "div",
+  {
+    className: cn(
+      "rounded-[var(--rui-radius)] border border-dashed border-[hsl(var(--rui-border))] p-10 text-center",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx6("h3", { className: "font-semibold", children: title }),
+      description && /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-[hsl(var(--rui-muted-foreground))]", children: description }),
+      action && /* @__PURE__ */ jsx6("div", { className: "mt-4", children: action })
+    ]
+  }
+);
+var ErrorState = ({
+  title = "Something went wrong",
+  onRetry,
+  className
+}) => /* @__PURE__ */ jsx6(Alert, { title, variant: "destructive", className, children: onRetry && /* @__PURE__ */ jsx6(Button, { variant: "outline", size: "sm", className: "mt-3", onClick: onRetry, children: "Try again" }) });
+var LoadingState = ({
+  label = "Loading",
+  className
+}) => /* @__PURE__ */ jsxs5(
+  "div",
+  {
+    role: "status",
+    className: cn(
+      "flex items-center gap-2 p-4 text-sm text-[hsl(var(--rui-muted-foreground))]",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx6("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-r-transparent" }),
+      label
+    ]
+  }
+);
+
+// src/components/layout.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var PageShell = ({
+  as: Component = "main",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7(
+  Component,
+  {
+    className: cn(
+      "min-h-screen bg-[hsl(var(--rui-background))] text-[hsl(var(--rui-foreground))]",
+      className
+    ),
+    ...props
+  }
+);
+var PageHeader = ({
+  as: Heading = "h1",
+  title,
+  description,
+  actions,
+  className
+}) => /* @__PURE__ */ jsxs6(
+  "header",
+  {
+    className: cn(
+      "flex flex-wrap items-start justify-between gap-4 border-b border-[hsl(var(--rui-border))] pb-5",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7(Heading, { className: "text-2xl font-bold tracking-tight", children: title }),
+        description && /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm text-[hsl(var(--rui-muted-foreground))]", children: description })
+      ] }),
+      actions
+    ]
+  }
+);
+var PageContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7("div", { className: cn("py-6", className), ...props });
+var Section = ({
+  title,
+  description,
+  children,
+  className
+}) => /* @__PURE__ */ jsxs6("section", { className: cn("space-y-4", className), children: [
+  title && /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx7("h2", { className: "font-semibold", children: title }),
+    description && /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm text-[hsl(var(--rui-muted-foreground))]", children: description })
+  ] }),
+  children
+] });
+var Stack = ({
+  gap = 4,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7(
+  "div",
+  {
+    className: cn(
+      "flex flex-col",
+      {
+        1: "gap-1",
+        2: "gap-2",
+        3: "gap-3",
+        4: "gap-4",
+        6: "gap-6",
+        8: "gap-8"
+      }[gap],
+      className
+    ),
+    ...props
+  }
+);
+var Container = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx7(
+  "div",
+  {
+    className: cn("mx-auto w-full max-w-6xl px-4 sm:px-6", className),
+    ...props
+  }
+);
+
+// src/components/tables.tsx
+import {
+  useMemo,
+  useState as useState4
+} from "react";
+import { Fragment, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var Table = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx8("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx8("table", { className: cn("w-full text-left text-sm", className), ...props }) });
+var TableHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx8(
+  "thead",
+  {
+    className: cn(
+      "border-b border-[hsl(var(--rui-border))] text-xs uppercase tracking-wide text-[hsl(var(--rui-muted-foreground))]",
+      className
+    ),
+    ...props
+  }
+);
+var TableBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx8(
+  "tbody",
+  {
+    className: cn("divide-y divide-[hsl(var(--rui-border))]", className),
+    ...props
+  }
+);
+var TableFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx8(
+  "tfoot",
+  {
+    className: cn("border-t border-[hsl(var(--rui-border))]", className),
+    ...props
+  }
+);
+var TableRow = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx8(
+  "tr",
+  {
+    className: cn("transition hover:bg-[hsl(var(--rui-muted))]/60", className),
+    ...props
+  }
+);
+var TableHead = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx8(
+  "th",
+  {
+    scope: "col",
+    className: cn("px-4 py-3 font-medium", className),
+    ...props
+  }
+);
+var TableCell = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx8("td", { className: cn("px-4 py-3", className), ...props });
+var TableCaption = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx8(
+  "caption",
+  {
+    className: cn(
+      "mt-3 text-left text-sm text-[hsl(var(--rui-muted-foreground))]",
+      className
+    ),
+    ...props
+  }
+);
+function DataTable({
+  data,
+  columns,
+  loading,
+  error,
+  pagination,
+  onPageChange,
+  onRowClick,
+  emptyMessage = "No results found.",
+  className
+}) {
+  const [sort, setSort] = useState4(null);
+  const rows = useMemo(() => {
+    if (!sort) return data;
+    return [...data].sort((a, b) => {
+      const result = String(a[sort.key] ?? "").localeCompare(
+        String(b[sort.key] ?? ""),
+        void 0,
+        { numeric: true }
+      );
+      return sort.direction === "asc" ? result : -result;
+    });
+  }, [data, sort]);
+  const toggle = (column) => {
+    if (!column.sortable) return;
+    const key = String(column.key);
+    setSort(
+      (current) => current?.key === key && current.direction === "asc" ? { key, direction: "desc" } : { key, direction: "asc" }
+    );
+  };
+  if (error) return /* @__PURE__ */ jsx8(ErrorState, { title: error });
+  return /* @__PURE__ */ jsxs7("div", { className, "aria-busy": loading, children: [
+    loading && /* @__PURE__ */ jsx8(LoadingState, { label: "Updating table\u2026" }),
+    !loading && !rows.length ? /* @__PURE__ */ jsx8(EmptyState, { title: emptyMessage }) : /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsxs7(Table, { children: [
+        /* @__PURE__ */ jsx8(TableHeader, { children: /* @__PURE__ */ jsx8(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx8(
+          TableHead,
+          {
+            className: column.className,
+            children: column.sortable ? /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                className: "rui-focus inline-flex items-center gap-1",
+                onClick: () => toggle(column),
+                children: [
+                  column.header,
+                  /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: sort?.key === String(column.key) ? sort.direction === "asc" ? "\u2191" : "\u2193" : "\u2195" })
+                ]
+              }
+            ) : column.header
+          },
+          String(column.key)
+        )) }) }),
+        /* @__PURE__ */ jsx8(TableBody, { children: rows.map((row, index) => /* @__PURE__ */ jsx8(
+          TableRow,
+          {
+            tabIndex: onRowClick ? 0 : void 0,
+            onClick: () => onRowClick?.(row),
+            onKeyDown: (event) => {
+              if (onRowClick && (event.key === "Enter" || event.key === " "))
+                onRowClick(row);
+            },
+            className: onRowClick ? "cursor-pointer" : void 0,
+            children: columns.map((column) => /* @__PURE__ */ jsx8(
+              TableCell,
+              {
+                className: column.className,
+                children: column.cell ? column.cell(row) : String(row[column.key] ?? "")
+              },
+              String(column.key)
+            ))
+          },
+          String(row.id ?? index)
+        )) })
+      ] }),
+      pagination && onPageChange && /* @__PURE__ */ jsx8(
+        Pagination,
+        {
+          className: "mt-4",
+          ...pagination,
+          ariaLabel: "Table pagination",
+          onPageChange
+        }
+      )
+    ] })
+  ] });
+}
+function SearchableTable({
+  data,
+  columns,
+  searchKeys,
+  ...props
+}) {
+  const [query, setQuery] = useState4("");
+  const filtered = data.filter(
+    (row) => searchKeys.some(
+      (key) => String(row[key] ?? "").toLowerCase().includes(query.toLowerCase())
+    )
+  );
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx8(
+      Input,
+      {
+        "aria-label": "Search table",
+        placeholder: "Search\u2026",
+        value: query,
+        onChange: (event) => setQuery(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx8(DataTable, { data: filtered, columns, ...props })
+  ] });
+}
+var PaginatedTable = DataTable;
+
+// src/components/utilities.tsx
+import { createPortal as createPortal2 } from "react-dom";
+import {
+  useEffect as useEffect3,
+  useId as useId3,
+  useState as useState5
+} from "react";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function Command({
+  open,
+  onOpenChange,
+  items
+}) {
+  const [query, setQuery] = useState5("");
+  useEffect3(() => {
+    const listener = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        onOpenChange(!open);
+      }
+    };
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, [open, onOpenChange]);
+  const matches = items.filter(
+    (item) => `${item.label} ${item.keywords?.join(" ") ?? ""}`.toLowerCase().includes(query.toLowerCase())
+  );
+  return /* @__PURE__ */ jsx9(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs8(DialogContent, { className: "max-w-md p-3", children: [
+    /* @__PURE__ */ jsx9(
+      Input,
+      {
+        autoFocus: true,
+        placeholder: "Type a command\u2026",
+        value: query,
+        onChange: (event) => setQuery(event.target.value)
+      }
+    ),
+    " ",
+    /* @__PURE__ */ jsx9("div", { className: "mt-2", children: matches.map((item) => /* @__PURE__ */ jsx9(
+      "button",
+      {
+        className: "rui-focus block w-full rounded p-2 text-left text-sm hover:bg-[hsl(var(--rui-accent))]",
+        onClick: () => {
+          item.onSelect();
+          onOpenChange(false);
+        },
+        children: item.label
+      },
+      item.label
+    )) })
+  ] }) });
+}
+function ContextMenu({
+  children,
+  menu
+}) {
+  const [point, setPoint] = useState5(null);
+  useEffect3(() => {
+    if (!point) return;
+    const close = (event) => {
+      if (event.key === "Escape") setPoint(null);
+    };
+    document.addEventListener("keydown", close);
+    return () => document.removeEventListener("keydown", close);
+  }, [point]);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      onContextMenu: (event) => {
+        event.preventDefault();
+        setPoint({
+          x: Math.min(event.clientX, window.innerWidth - 180),
+          y: Math.min(event.clientY, window.innerHeight - 120)
+        });
+      },
+      children: [
+        children,
+        point && createPortal2(
+          /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                className: "fixed inset-0 z-40 cursor-default",
+                "aria-label": "Close context menu",
+                onClick: () => setPoint(null)
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "div",
+              {
+                role: "menu",
+                className: "fixed z-50 rounded border border-[hsl(var(--rui-border))] bg-[hsl(var(--rui-card))] p-1 shadow-lg",
+                style: { left: point.x, top: point.y },
+                children: menu
+              }
+            )
+          ] }),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function CopyButton({
+  value,
+  children = "Copy",
+  onCopy
+}) {
+  const [copied, setCopied] = useState5(false);
+  return /* @__PURE__ */ jsx9(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      onClick: async () => {
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        onCopy?.();
+        window.setTimeout(() => setCopied(false), 1500);
+      },
+      children: copied ? "Copied" : children
+    }
+  );
+}
+function PasswordInput({
+  className,
+  ...props
+}) {
+  const [visible, setVisible] = useState5(false);
+  return /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx9(
+      Input,
+      {
+        type: visible ? "text" : "password",
+        className: cn("pr-16", className),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: "rui-focus absolute right-2 top-2 text-xs text-[hsl(var(--rui-muted-foreground))]",
+        onClick: () => setVisible(!visible),
+        children: visible ? "Hide" : "Show"
+      }
+    )
+  ] });
+}
+function FileUpload({
+  accept,
+  multiple,
+  onFiles,
+  label = "Choose files"
+}) {
+  const id = useId3();
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsx9(
+      "input",
+      {
+        id,
+        className: "sr-only",
+        type: "file",
+        accept,
+        multiple,
+        onChange: (event) => onFiles(Array.from(event.target.files ?? []))
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      Label,
+      {
+        htmlFor: id,
+        className: "cursor-pointer rounded-[var(--rui-radius)] border border-dashed border-[hsl(var(--rui-border))] p-6 text-center text-sm text-[hsl(var(--rui-muted-foreground))]",
+        children: label
+      }
+    )
+  ] });
+}
+export {
+  Accordion,
+  Alert,
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Command,
+  Container,
+  ContextMenu,
+  CopyButton,
+  DataTable,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+  DropdownMenu,
+  DropdownMenuItem,
+  EmptyState,
+  ErrorState,
+  FileUpload,
+  IconButton,
+  Input,
+  Label,
+  LoadingState,
+  MobileNav,
+  Navbar,
+  PageContent,
+  PageHeader,
+  PageShell,
+  PaginatedTable,
+  Pagination,
+  PasswordInput,
+  Popover,
+  Progress,
+  Radio,
+  SearchableTable,
+  Section,
+  Select,
+  Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetTrigger,
+  Sidebar,
+  Skeleton,
+  Stack,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Textarea,
+  Toast,
+  Tooltip,
+  cn
+};
+//# sourceMappingURL=index.js.map