@epicbagel/saas-kit 1.0.0 → 1.2.0

package/dist/chunk-M7FYGAGO.js

@@ -0,0 +1,416 @@
+"use client";
+import {
+  Text
+} from "./chunk-EIY5LLSP.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "./chunk-ZRLUUZHK.js";
+import {
+  Button
+} from "./chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/file-dropzone.tsx
+import { FileUp, Loader2 } from "lucide-react";
+import { createPortal } from "react-dom";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FileDropzone({
+  onFile,
+  onFiles,
+  multiple = false,
+  accept,
+  disabled = false,
+  busy: externalBusy = false,
+  label = "Drop a file, or choose one",
+  description,
+  busyLabel = "Reading file\u2026",
+  icon,
+  variant = "dropzone",
+  className
+}) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [internalBusy, setInternalBusy] = useState(false);
+  const busy = externalBusy || internalBusy;
+  useFileDropGuard();
+  async function select(files) {
+    if (files.length === 0 || disabled || busy) return;
+    setInternalBusy(true);
+    try {
+      if (multiple) {
+        await onFiles?.(files);
+      } else {
+        const first = files[0];
+        if (first) await onFile?.(first);
+      }
+    } finally {
+      setInternalBusy(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  }
+  function onDrop(event) {
+    event.preventDefault();
+    setDragging(false);
+    void select(Array.from(event.dataTransfer.files ?? []));
+  }
+  const trigger = /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "data-file-dropzone": "true",
+      variant: "outline",
+      size: variant === "icon" ? "icon" : "default",
+      "aria-label": variant === "icon" ? String(busy ? busyLabel : label) : void 0,
+      disabled: disabled || busy,
+      onClick: () => inputRef.current?.click(),
+      onDragEnter: (event) => {
+        event.preventDefault();
+        setDragging(true);
+      },
+      onDragOver: (event) => {
+        event.preventDefault();
+        setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop,
+      className: cn(
+        variant === "dropzone" ? "h-auto w-full flex-col whitespace-normal border-2 border-dashed px-6 py-8 text-center" : variant === "button" ? "w-fit" : "",
+        dragging && "border-primary bg-primary/5",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        FileDropPrompt,
+        {
+          variant,
+          icon: busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin" }) : icon ?? /* @__PURE__ */ jsx(FileUp, { className: "h-5 w-5" }),
+          label: busy ? busyLabel : label,
+          description
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        disabled: disabled || busy,
+        onChange: (event) => void select(Array.from(event.target.files ?? [])),
+        className: "sr-only",
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }
+    ),
+    variant === "icon" && description ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: description })
+    ] }) : trigger
+  ] });
+}
+function carriesFiles(data) {
+  if (!data) return false;
+  return Array.from(data.types ?? []).includes("Files") || (data.files?.length ?? 0) > 0;
+}
+function isNativeFileInput(target) {
+  const element = target;
+  return element?.tagName === "INPUT" && element.type === "file";
+}
+var inPageDrag = false;
+var inPageDragUsers = 0;
+var markInPageDrag = () => {
+  inPageDrag = true;
+};
+var clearInPageDrag = () => {
+  inPageDrag = false;
+};
+var clearAfterDrop = () => {
+  window.setTimeout(clearInPageDrag, 0);
+};
+var clearOnMove = () => {
+  if (inPageDrag) inPageDrag = false;
+};
+function trackInPageDrags() {
+  if (inPageDragUsers++ === 0) {
+    window.addEventListener("dragstart", markInPageDrag, true);
+    window.addEventListener("dragend", clearInPageDrag, true);
+    window.addEventListener("drop", clearAfterDrop);
+    window.addEventListener("mousemove", clearOnMove, { passive: true });
+  }
+  return () => {
+    if (--inPageDragUsers > 0) return;
+    window.removeEventListener("dragstart", markInPageDrag, true);
+    window.removeEventListener("dragend", clearInPageDrag, true);
+    window.removeEventListener("drop", clearAfterDrop);
+    window.removeEventListener("mousemove", clearOnMove);
+    inPageDrag = false;
+  };
+}
+function isUnclaimedFileDrag(event) {
+  return !event.defaultPrevented && !inPageDrag && carriesFiles(event.dataTransfer) && !isNativeFileInput(event.target);
+}
+function installFileDropGuard() {
+  if (typeof window === "undefined") return () => void 0;
+  const release = trackInPageDrags();
+  const onDragOver = (event) => {
+    if (!isUnclaimedFileDrag(event)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "none";
+  };
+  const onDrop = (event) => {
+    if (isUnclaimedFileDrag(event)) event.preventDefault();
+  };
+  window.addEventListener("dragover", onDragOver);
+  window.addEventListener("drop", onDrop);
+  let installed = true;
+  return () => {
+    if (!installed) return;
+    installed = false;
+    window.removeEventListener("dragover", onDragOver);
+    window.removeEventListener("drop", onDrop);
+    release();
+  };
+}
+function useFileDropGuard(enabled = true) {
+  useEffect(() => enabled ? installFileDropGuard() : void 0, [enabled]);
+}
+function FileDropPrompt({
+  icon,
+  label,
+  description,
+  variant = "dropzone"
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: cn(
+      "flex items-center justify-center text-muted-foreground",
+      variant === "dropzone" && "mb-2 h-10 w-10 rounded-full bg-muted"
+    ), children: icon }),
+    /* @__PURE__ */ jsx("span", { className: variant === "icon" ? "sr-only" : "font-medium", children: label }),
+    description && variant === "dropzone" && /* @__PURE__ */ jsx(Text, { variant: "muted", className: "mt-1 max-w-md text-xs", children: description })
+  ] });
+}
+var DRAG_HEARTBEAT_MS = 1e3;
+function visibleBand(element) {
+  const rect = element.getBoundingClientRect();
+  const viewport = window.innerHeight;
+  if (rect.top >= 0 && rect.bottom <= viewport) return null;
+  const top = Math.max(rect.top, 0);
+  const bottom = Math.min(rect.bottom, viewport);
+  return bottom > top ? { top: top - rect.top, height: bottom - top } : null;
+}
+var FileDropArea = forwardRef(function FileDropArea2({
+  onFiles,
+  disabled = false,
+  scope = "area",
+  label = "Drop to attach",
+  description,
+  icon,
+  className,
+  children,
+  onDragEnter,
+  onDragOver,
+  onDragLeave,
+  ...props
+}, ref) {
+  const active = Boolean(onFiles) && !disabled;
+  const [dragging, setDragging] = useState(false);
+  const [band, setBand] = useState(null);
+  const root = useRef(null);
+  const entered = useRef([]);
+  useFileDropGuard(Boolean(onFiles));
+  const setRoot = useCallback(
+    (node) => {
+      root.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const reset = useCallback(() => {
+    entered.current = [];
+    setDragging(false);
+  }, []);
+  const enter = useCallback((target) => {
+    if (target && !entered.current.includes(target)) entered.current.push(target);
+    setDragging(true);
+  }, []);
+  const leave = useCallback((target, container) => {
+    entered.current = entered.current.filter(
+      (node) => node !== target && node instanceof Node && node.isConnected && container.contains(node)
+    );
+    if (entered.current.length === 0) setDragging(false);
+  }, []);
+  const deliver = useCallback(
+    (data) => {
+      const files = Array.from(data?.files ?? []);
+      if (files.length > 0) void onFiles?.(files);
+    },
+    [onFiles]
+  );
+  useEffect(() => {
+    if (scope !== "page" || !active) return;
+    const onEnter = (event) => {
+      if (!isUnclaimedFileDrag(event)) return;
+      event.preventDefault();
+      enter(event.target);
+    };
+    const onOver = (event) => {
+      if (!isUnclaimedFileDrag(event)) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+      if (entered.current.length === 0) enter(event.target);
+    };
+    const onLeave = (event) => leave(event.target, document);
+    const onDrop = (event) => {
+      reset();
+      if (!isUnclaimedFileDrag(event)) return;
+      event.preventDefault();
+      deliver(event.dataTransfer);
+    };
+    document.addEventListener("dragenter", onEnter);
+    document.addEventListener("dragover", onOver);
+    document.addEventListener("dragleave", onLeave);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragenter", onEnter);
+      document.removeEventListener("dragover", onOver);
+      document.removeEventListener("dragleave", onLeave);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, [active, deliver, enter, leave, reset, scope]);
+  useEffect(() => {
+    if (!dragging) return;
+    let heartbeat = window.setTimeout(reset, DRAG_HEARTBEAT_MS);
+    const onDragOverAnywhere = () => {
+      window.clearTimeout(heartbeat);
+      heartbeat = window.setTimeout(reset, DRAG_HEARTBEAT_MS);
+    };
+    const onLeaveWindow = (event) => {
+      if (event.relatedTarget) return;
+      const { clientX: x, clientY: y } = event;
+      if (x <= 0 || y <= 0 || x >= window.innerWidth || y >= window.innerHeight) reset();
+    };
+    window.addEventListener("dragover", onDragOverAnywhere, true);
+    window.addEventListener("drop", reset);
+    window.addEventListener("dragend", reset);
+    window.addEventListener("dragleave", onLeaveWindow);
+    window.addEventListener("mousemove", reset, { passive: true });
+    return () => {
+      window.clearTimeout(heartbeat);
+      window.removeEventListener("dragover", onDragOverAnywhere, true);
+      window.removeEventListener("drop", reset);
+      window.removeEventListener("dragend", reset);
+      window.removeEventListener("dragleave", onLeaveWindow);
+      window.removeEventListener("mousemove", reset);
+    };
+  }, [dragging, reset]);
+  const showOverlay = dragging && active;
+  useEffect(() => {
+    if (!showOverlay || scope !== "area") return;
+    const measure = () => {
+      if (root.current) setBand(visibleBand(root.current));
+    };
+    measure();
+    window.addEventListener("scroll", measure, { capture: true, passive: true });
+    window.addEventListener("resize", measure);
+    return () => {
+      window.removeEventListener("scroll", measure, { capture: true });
+      window.removeEventListener("resize", measure);
+      setBand(null);
+    };
+  }, [scope, showOverlay]);
+  const handlesHere = active && scope === "area";
+  const prompt = /* @__PURE__ */ jsx(FileDropPrompt, { icon: icon ?? /* @__PURE__ */ jsx(FileUp, { className: "h-5 w-5" }), label, description });
+  let overlay = null;
+  if (showOverlay && scope === "page" && typeof document !== "undefined") {
+    overlay = createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "file-drop-overlay",
+          "data-scope": "page",
+          "aria-hidden": "true",
+          className: "pointer-events-none fixed inset-0 z-50 bg-background/80 p-3 supports-backdrop-filter:backdrop-blur-sm motion-safe:animate-in motion-safe:fade-in-0",
+          children: /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-primary p-6 text-center text-sm", children: prompt })
+        }
+      ),
+      document.body
+    );
+  } else if (showOverlay && scope === "area") {
+    overlay = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "file-drop-overlay",
+        "data-scope": "area",
+        "aria-hidden": "true",
+        className: "absolute inset-0 z-30 rounded-[inherit] border-2 border-dashed border-primary bg-background/90 text-sm supports-backdrop-filter:backdrop-blur-sm motion-safe:animate-in motion-safe:fade-in-0 [&_*]:pointer-events-none",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "file-drop-prompt",
+            className: "absolute inset-x-0 flex flex-col items-center justify-center p-6 text-center",
+            style: band ?? { top: 0, height: "100%" },
+            children: prompt
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setRoot,
+      "data-file-drop": showOverlay ? "active" : void 0,
+      className: cn("relative", className),
+      ...props,
+      onDragEnter: (event) => {
+        onDragEnter?.(event);
+        if (!handlesHere || !isUnclaimedFileDrag(event.nativeEvent)) return;
+        event.preventDefault();
+        enter(event.target);
+      },
+      onDragOver: (event) => {
+        onDragOver?.(event);
+        if (!handlesHere || !isUnclaimedFileDrag(event.nativeEvent)) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+        if (entered.current.length === 0) enter(event.target);
+      },
+      onDragLeave: (event) => {
+        onDragLeave?.(event);
+        if (scope === "area") leave(event.target, event.currentTarget);
+      },
+      onDrop: (event) => {
+        if (scope !== "area") return;
+        reset();
+        if (!onFiles || !isUnclaimedFileDrag(event.nativeEvent)) return;
+        event.preventDefault();
+        if (!disabled) deliver(event.dataTransfer);
+      },
+      children: [
+        children,
+        overlay
+      ]
+    }
+  );
+});
+
+export {
+  FileDropzone,
+  installFileDropGuard,
+  useFileDropGuard,
+  FileDropArea
+};

package/dist/chunk-MHYAVXOE.js

@@ -0,0 +1,159 @@
+"use client";
+import {
+  Textarea
+} from "./chunk-6FC65AZQ.js";
+import {
+  Input
+} from "./chunk-QMA3WVB7.js";
+import {
+  Button
+} from "./chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/input-group.tsx
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
+        "inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+        "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      size: "bare",
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      controlSize: "sm",
+      surface: "ghost",
+      className: cn(
+        "min-w-0 flex-1 rounded-none border-0 bg-transparent px-2.5 py-1 shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "field-sizing-content min-h-16 flex-1 resize-none rounded-none border-0 bg-transparent px-2.5 py-2 shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea
+};