@caffeinebounce/ui 0.62.2

package/dist/chunk-OFQLWSUR.mjs

@@ -0,0 +1,214 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, CircleIcon, ChevronRightIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-box border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      className: cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-muted -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      className: cn(
+        "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        inset && "pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-box border p-1 shadow-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+}
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/chunk-OLAAXLXY.mjs

@@ -0,0 +1,219 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-YL7RZRHM.mjs';
+import { Label } from './chunk-KHCC5UKW.mjs';
+import { TabsContent, Tabs, TabsList, TabsTrigger } from './chunk-GMBGWOCR.mjs';
+import { Container } from './chunk-RVEFPVZF.mjs';
+import { Spinner } from './chunk-HBLKVQIQ.mjs';
+import { Button } from './chunk-VBD4Q5LL.mjs';
+import { cn } from './chunk-IMKLN273.mjs';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PageHeader = React.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    actions,
+    bordered = false,
+    backHref,
+    backLabel = "Back",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "mb-6",
+          bordered && "border-b border-border pb-6",
+          className
+        ),
+        ...props,
+        children: [
+          backHref && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(Link, { href: backHref, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-2", children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "w-4 h-4 mr-2" }),
+            backLabel
+          ] }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
+            ] }),
+            actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mt-4 sm:mt-0", children: actions })
+          ] })
+        ]
+      }
+    );
+  }
+);
+PageHeader.displayName = "PageHeader";
+function SettingsTabContent({
+  tabId,
+  loading = false,
+  children
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx(TabsContent, { value: tabId, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ jsx(Spinner, { size: "lg" }) }) });
+  }
+  return /* @__PURE__ */ jsx(TabsContent, { value: tabId, children });
+}
+function SettingsTabs({
+  tabs,
+  activeTab,
+  onTabChange,
+  children,
+  syncWithHash = false,
+  orientation = "horizontal",
+  className
+}) {
+  useEffect(() => {
+    if (!syncWithHash) return;
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      const tabIds = tabs.map((tab) => tab.id);
+      if (hash && tabIds.includes(hash)) {
+        onTabChange(hash);
+      }
+    };
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [syncWithHash, tabs, onTabChange]);
+  const handleTabChange = (value) => {
+    onTabChange(value);
+    if (syncWithHash) {
+      const isValidTab = tabs.some((tab) => tab.id === value);
+      if (isValidTab) {
+        window.history.replaceState(null, "", `#${value}`);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: activeTab,
+      onValueChange: handleTabChange,
+      orientation,
+      className: cn("space-y-6", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          TabsList,
+          {
+            className: cn(
+              orientation === "vertical" && "flex-col h-auto items-stretch justify-start"
+            ),
+            children: tabs.map((tab) => {
+              const Icon = tab.icon;
+              return /* @__PURE__ */ jsxs(
+                TabsTrigger,
+                {
+                  value: tab.id,
+                  className: cn("gap-2", orientation === "vertical" && "w-full"),
+                  children: [
+                    Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+                    tab.label
+                  ]
+                },
+                tab.id
+              );
+            })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function SettingsLayout({
+  title = "Settings",
+  description,
+  pages,
+  defaultPage,
+  syncWithHash = false,
+  orientation = "horizontal",
+  className,
+  containerSize = "default"
+}) {
+  const [activeTab, setActiveTab] = useState(defaultPage || pages[0]?.id || "");
+  const tabs = pages.map((page) => ({
+    id: page.id,
+    label: page.label,
+    icon: page.icon
+  }));
+  return /* @__PURE__ */ jsxs(Container, { size: containerSize, className, children: [
+    (title || description) && /* @__PURE__ */ jsx(PageHeader, { title, description, className: "mb-6" }),
+    /* @__PURE__ */ jsx(
+      SettingsTabs,
+      {
+        tabs,
+        activeTab,
+        onTabChange: setActiveTab,
+        syncWithHash,
+        orientation,
+        children: pages.map((page) => /* @__PURE__ */ jsx(
+          SettingsTabContent,
+          {
+            tabId: page.id,
+            loading: page.loading,
+            children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: page.content })
+          },
+          page.id
+        ))
+      }
+    )
+  ] });
+}
+function SettingsRow({
+  label,
+  description,
+  children,
+  htmlFor,
+  className,
+  layout = "horizontal"
+}) {
+  if (layout === "vertical") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor, className: "text-base", children: label }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+      ] }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor, className: "text-base", children: label }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+    ] }),
+    children
+  ] });
+}
+function SettingsSection({
+  title,
+  description,
+  children,
+  className,
+  card = true
+}) {
+  if (card) {
+    return /* @__PURE__ */ jsxs(Card, { className, children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: title }),
+        description && /* @__PURE__ */ jsx(CardDescription, { children: description })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-6", children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-6", children })
+  ] });
+}
+
+export { PageHeader, SettingsLayout, SettingsRow, SettingsSection, SettingsTabContent, SettingsTabs };