@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/chunk-3BZ4CQHW.js

@@ -0,0 +1,94 @@
+"use client";
+import {
+  StatusIcon
+} from "./chunk-V7542UGX.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/timeline.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Timeline({ children, spacing = "normal", className }) {
+  const spacingClass = spacing === "tight" ? "space-y-1" : spacing === "loose" ? "space-y-3" : "space-y-2";
+  return /* @__PURE__ */ jsx("div", { className: cn(spacingClass, className), children });
+}
+var TimelineMarker = forwardRef(
+  function TimelineMarker2({ active = false, placement = "inline", tone = "neutral", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": true,
+        className: cn(
+          "block h-2 w-2 shrink-0 rounded-full",
+          placement === "guide" && "absolute left-[-21px] top-1.5",
+          active && "ring-2 ring-emerald-500/30",
+          tone === "neutral" && (active ? "bg-emerald-500" : "bg-muted-foreground/40"),
+          tone === "info" && "bg-sky-500",
+          tone === "success" && "bg-emerald-500",
+          tone === "accent" && "bg-violet-500",
+          tone === "destructive" && "bg-red-500",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var TimelineRow = forwardRef(function TimelineRow2({
+  status,
+  icon,
+  title,
+  subtitle,
+  timestamp,
+  error,
+  children,
+  interactive,
+  as,
+  className,
+  surface = "muted",
+  radius = "md",
+  ...rest
+}, ref) {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ref,
+      className: cn(
+        "flex items-start gap-2 p-2",
+        radius === "md" && "rounded-md",
+        surface === "muted" && "bg-muted/50",
+        interactive && "transition-colors hover:bg-accent/50 cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: [
+        icon ?? (status != null && /* @__PURE__ */ jsx(StatusIcon, { status })),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: title }),
+            timestamp != null && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground shrink-0", children: timestamp })
+          ] }),
+          subtitle != null && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: subtitle }),
+          error != null && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-xs text-destructive mt-1 line-clamp-2",
+              title: typeof error === "string" ? error : void 0,
+              children: error
+            }
+          ),
+          children
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  Timeline,
+  TimelineMarker,
+  TimelineRow
+};

package/dist/chunk-3OWGL4Q2.js

@@ -0,0 +1,65 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Avatar = forwardRef(({ className, size = "md", shape = "circle", border = false, surface = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex shrink-0 overflow-hidden",
+      size === "xs" && "size-7",
+      size === "sm" && "size-9",
+      size === "md" && "size-10",
+      size === "lg" && "size-11",
+      size === "xl" && "size-12",
+      size === "2xl" && "size-16",
+      shape === "circle" ? "rounded-full" : "rounded-md",
+      border && "border",
+      surface === "muted" && "bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = forwardRef(({ className, fit = "cover", ...props }, ref) => (
+  // object-cover is critical — without it the underlying <img>
+  // defaults to object-fit: fill and stretches portrait/landscape
+  // photos to fit the square Avatar container. Crop-to-square is
+  // the standard avatar behaviour and what every consumer expects.
+  /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      ref,
+      className: cn("aspect-square h-full w-full", fit === "cover" ? "object-cover" : "object-contain", className),
+      ...props
+    }
+  )
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = forwardRef(({ className, shape = "circle", textSize = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center bg-muted",
+      shape === "circle" ? "rounded-full" : "rounded-md",
+      textSize === "micro" && "text-[10px]",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback
+};

package/dist/chunk-3QT5VYZ3.js

@@ -0,0 +1,141 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "dialog-overlay",
+    className: cn(
+      "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React.forwardRef(({ className, children, size = "md", height = "auto", layout = "grid", padding = "default", overflow = "visible", mobile = "inset", hideClose = false, maxHeight = "none", frame = "default", ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      "data-slot": "dialog-content",
+      className: cn(
+        // `w-[calc(100%-2rem)]` keeps a 1rem gutter down each side on mobile
+        // (instead of edge-to-edge `w-full`); `max-w-lg` still caps it on
+        // desktop. Rounded on every breakpoint now there's always a margin.
+        "fixed left-[50%] top-[50%] z-50 w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background shadow-xl outline-none duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        size === "sm" && "max-w-md",
+        size === "md" && "max-w-lg",
+        size === "lg" && "max-w-xl",
+        size === "xl" && "max-w-2xl",
+        size === "2xl" && "max-w-3xl",
+        size === "wide" && "w-[min(96vw,1100px)] max-w-5xl",
+        height === "viewport-md" && "h-[85vh]",
+        height === "viewport-lg" && "h-[90dvh]",
+        layout === "grid" ? "grid" : "flex flex-col",
+        padding === "default" && "p-6",
+        overflow === "hidden" && "overflow-hidden",
+        overflow === "auto" && "overflow-auto",
+        mobile === "fullscreen" && "inset-0 left-0 top-0 h-dvh w-screen max-w-none translate-x-0 translate-y-0 rounded-none sm:inset-auto sm:left-[50%] sm:top-[50%] sm:h-auto sm:w-[calc(100%-2rem)] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-xl",
+        maxHeight === "viewport" && "max-h-[calc(100dvh-2rem)]",
+        frame === "none" && "border-0 bg-transparent shadow-none",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: cn("absolute right-2 top-2 inline-flex h-[44px] w-[44px] items-center justify-center rounded-md text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent", hideClose && "hidden"), children: [
+          /* @__PURE__ */ jsx(X, { className: "h-[20px] w-[20px]" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  align = "responsive",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "dialog-header",
+    className: cn(
+      "flex flex-col space-y-1.5",
+      align === "responsive" && "text-center sm:text-left",
+      align === "start" && "text-left",
+      align === "center" && "text-center",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "dialog-footer",
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(({ className, visuallyHidden = false, size = "default", display = "block", ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    "data-slot": "dialog-title",
+    className: cn(
+      "font-semibold leading-none tracking-tight",
+      size === "default" ? "text-lg" : "text-base",
+      display === "inline-flex" && "inline-flex items-center gap-2",
+      visuallyHidden && "sr-only",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    "data-slot": "dialog-description",
+    className: cn("text-sm text-muted-foreground", visuallyHidden && "sr-only", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription
+};

package/dist/chunk-4HWCNRK4.js

@@ -0,0 +1,117 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/drawer.tsx
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DrawerPrimitive.Root,
+  {
+    shouldScaleBackground,
+    ...props
+  }
+);
+Drawer.displayName = "Drawer";
+var DrawerTrigger = DrawerPrimitive.Trigger;
+var DrawerPortal = DrawerPrimitive.Portal;
+var DrawerClose = DrawerPrimitive.Close;
+var DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DrawerPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "drawer-overlay",
+    className: cn("fixed inset-0 z-50 bg-black/80", className),
+    ...props
+  }
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+var DrawerContent = React.forwardRef(({ className, children, height = "auto", overflow = "visible", ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DrawerPrimitive.Content,
+    {
+      ref,
+      "data-slot": "drawer-content",
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        height === "viewport-lg" && "h-[90dvh]",
+        overflow === "hidden" && "overflow-hidden",
+        overflow === "auto" && "overflow-auto",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({
+  className,
+  align = "responsive",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "drawer-header",
+    className: cn("grid gap-1.5 p-4", align === "responsive" ? "text-center sm:text-left" : "text-left", className),
+    ...props
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "drawer-footer",
+    className: cn("mt-auto flex flex-col gap-2 p-4", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DrawerPrimitive.Title,
+  {
+    ref,
+    "data-slot": "drawer-title",
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+var DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DrawerPrimitive.Description,
+  {
+    ref,
+    "data-slot": "drawer-description",
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription
+};

package/dist/chunk-4LXN6GLZ.cjs

@@ -0,0 +1,44 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+// src/hooks/use-copy-to-clipboard.ts
+var _react = require('react');
+function useCopyToClipboard({
+  resetAfter = 2e3
+} = {}) {
+  const [copied, setCopied] = _react.useState.call(void 0, false);
+  const timerRef = _react.useRef.call(void 0, null);
+  const reset = _react.useCallback.call(void 0, () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+    setCopied(false);
+  }, []);
+  const copy = _react.useCallback.call(void 0, 
+    async (text) => {
+      if (typeof navigator === "undefined" || !navigator.clipboard) {
+        return false;
+      }
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        if (resetAfter > 0) {
+          if (timerRef.current) clearTimeout(timerRef.current);
+          timerRef.current = setTimeout(() => setCopied(false), resetAfter);
+        }
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+    [resetAfter]
+  );
+  _react.useEffect.call(void 0, () => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return { copied, copy, reset };
+}
+
+
+
+exports.useCopyToClipboard = useCopyToClipboard;

package/dist/chunk-4NN7EA3W.js

@@ -0,0 +1,222 @@
+"use client";
+import {
+  Button
+} from "./chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/empty-state.tsx
+import { isValidElement } from "react";
+import { CheckCircle2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EmptyState({
+  variant = "select",
+  icon: Icon,
+  iconMotion = "none",
+  title,
+  description,
+  action,
+  entityType,
+  animated = true,
+  size = "md",
+  children,
+  className,
+  showGradient = false,
+  surface = "subtle",
+  minHeight = "none",
+  paddingY = "none"
+}) {
+  const autoTitle = () => {
+    if (title) return title;
+    switch (variant) {
+      case "select":
+        return entityType ? `Select ${getArticle(entityType)} ${entityType} to view details` : "Select an item to view details";
+      case "search":
+        return "No results found";
+      case "empty":
+        return entityType ? `No ${entityType}s yet` : "Nothing here yet";
+      case "error":
+        return "Something went wrong";
+      case "success":
+        return "All done";
+      default:
+        return "Empty";
+    }
+  };
+  const autoDescription = () => {
+    if (description !== void 0) return description;
+    switch (variant) {
+      case "search":
+        return "Try adjusting your filters or search terms";
+      case "empty":
+        return "Get started by creating your first item";
+      case "error":
+        return "Please try again or contact support if the problem persists";
+      default:
+        return void 0;
+    }
+  };
+  const sizeConfig = {
+    inline: {
+      icon: "h-5 w-5",
+      iconWrapper: "",
+      title: "text-sm",
+      description: "text-xs",
+      spacing: "gap-1",
+      padding: "py-6",
+      content: "max-w-lg"
+    },
+    sm: {
+      icon: "h-8 w-8",
+      iconWrapper: "mb-3",
+      title: "text-base",
+      description: "text-xs",
+      spacing: "space-y-2",
+      padding: "py-6",
+      content: "max-w-md"
+    },
+    md: {
+      icon: "h-10 w-10",
+      iconWrapper: "mb-4",
+      title: "text-lg",
+      description: "text-sm",
+      spacing: "space-y-3",
+      padding: "py-10",
+      content: "max-w-md"
+    },
+    lg: {
+      icon: "h-12 w-12",
+      iconWrapper: "mb-6",
+      title: "text-xl",
+      description: "text-base",
+      spacing: "space-y-4",
+      padding: "py-12",
+      content: "max-w-3xl"
+    }
+  };
+  const config = sizeConfig[size];
+  const finalTitle = autoTitle();
+  const finalDescription = autoDescription();
+  const displayIcon = Icon ?? (variant === "success" ? CheckCircle2 : void 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "empty-state",
+      "data-surface": surface,
+      role: variant === "error" ? "alert" : void 0,
+      className: cn(
+        "relative flex w-full items-center justify-center",
+        surface === "subtle" && "overflow-hidden rounded-lg border border-border bg-muted/20",
+        size === "inline" ? "h-auto" : "h-full",
+        paddingY === "none" && config.padding,
+        minHeight === "viewport" && "min-h-[40vh]",
+        paddingY === "xl" && "py-12",
+        paddingY === "lg" && "py-10",
+        className
+      ),
+      children: [
+        showGradient && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-muted/5 via-transparent to-muted/5 pointer-events-none" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "empty-state-content",
+            className: cn(
+              "relative flex w-full flex-col items-center justify-center px-6 sm:px-8",
+              config.content,
+              animated && "animate-in fade-in-50 duration-500"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "empty-state-message",
+                  className: cn(
+                    "flex items-center justify-center",
+                    size === "inline" && displayIcon ? "flex-row gap-5 text-left" : cn("flex-col text-center", config.spacing)
+                  ),
+                  children: [
+                    displayIcon && /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0", config.iconWrapper), children: [
+                      isValidElement(displayIcon) ? displayIcon : (() => {
+                        const IconComp = displayIcon;
+                        return /* @__PURE__ */ jsx(
+                          IconComp,
+                          {
+                            className: cn(
+                              config.icon,
+                              variant === "success" ? "text-emerald-500" : "text-muted-foreground",
+                              iconMotion === "spin" && "animate-spin",
+                              iconMotion === "pulse" && "animate-pulse",
+                              animated && "animate-in zoom-in-95 duration-700 delay-150"
+                            ),
+                            strokeWidth: 1.5
+                          }
+                        );
+                      })(),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "absolute inset-0 blur-xl opacity-20 pointer-events-none",
+                            showGradient && "bg-primary/10"
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col", size === "inline" ? "gap-1" : "contents"), children: [
+                      /* @__PURE__ */ jsx(
+                        "h3",
+                        {
+                          className: cn(
+                            config.title,
+                            size === "inline" ? "font-medium text-foreground" : "font-semibold text-foreground/80 tracking-tight"
+                          ),
+                          children: finalTitle
+                        }
+                      ),
+                      finalDescription && /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            config.description,
+                            "text-muted-foreground max-w-sm leading-relaxed"
+                          ),
+                          children: finalDescription
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: action.variant || "outline",
+                  onClick: action.onClick,
+                  className: cn(
+                    "shadow-xs",
+                    animated && "animate-in slide-in-from-bottom-2 duration-500 delay-300"
+                  ),
+                  children: action.label
+                }
+              ) }),
+              children && /* @__PURE__ */ jsx("div", { className: "mt-3 w-full text-left", children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function getArticle(word) {
+  if (!word || word.length === 0) return "a";
+  const vowels = ["a", "e", "i", "o", "u"];
+  const firstChar = word[0];
+  if (!firstChar) return "a";
+  return vowels.includes(firstChar.toLowerCase()) ? "an" : "a";
+}
+
+export {
+  EmptyState
+};