@ataraui/ataraui-react 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React3 from 'react';
+import React13 from 'react';
 import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -88,7 +89,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React3.forwardRef(
+var Button = React13.forwardRef(
   ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => /* @__PURE__ */ jsxs(
     "button",
     {
@@ -127,7 +128,7 @@ var inputVariants = cva(
     }
   }
 );
-var Input = React3.forwardRef(
+var Input = React13.forwardRef(
   ({ className, label, error, hint, id, inputSize, ...props }, ref) => {
     const inputId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
@@ -194,7 +195,7 @@ var cardVariants = cva(
     }
   }
 );
-var Card = React3.forwardRef(
+var Card = React13.forwardRef(
   ({ className, variant, padding, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -205,23 +206,23 @@ var Card = React3.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React3.forwardRef(
+var CardHeader = React13.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 mb-4", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React3.forwardRef(
+var CardTitle = React13.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-lg font-semibold text-(--color-neutral-900)", className), ...props })
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React3.forwardRef(
+var CardDescription = React13.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-(--color-neutral-500)", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React3.forwardRef(
+var CardContent = React13.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm text-(--color-neutral-700)", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React3.forwardRef(
+var CardFooter = React13.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2 mt-4", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -242,9 +243,9 @@ var avatarVariants = cva(
     }
   }
 );
-var Avatar = React3.forwardRef(
+var Avatar = React13.forwardRef(
   ({ className, size, src, alt, fallback, ...props }, ref) => {
-    const [imgError, setImgError] = React3.useState(false);
+    const [imgError, setImgError] = React13.useState(false);
     const initials = fallback == null ? void 0 : fallback.split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase();
     return /* @__PURE__ */ jsx(
       "span",
@@ -288,7 +289,7 @@ var separatorVariants = cva(
     }
   }
 );
-var Separator = React3.forwardRef(
+var Separator = React13.forwardRef(
   ({ className, orientation, label, ...props }, ref) => {
     if (label && orientation !== "vertical") {
       return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-3", className), ...props, children: [
@@ -327,7 +328,7 @@ var spinnerVariants = cva(
     }
   }
 );
-var Spinner = React3.forwardRef(
+var Spinner = React13.forwardRef(
   ({ className, size, label, ...props }, ref) => /* @__PURE__ */ jsxs("span", { ref, role: "status", className: cn("inline-flex flex-col items-center gap-2", className), ...props, children: [
     /* @__PURE__ */ jsx("span", { className: cn(spinnerVariants({ size })) }),
     label && /* @__PURE__ */ jsx("span", { className: "text-sm text-(--color-neutral-500)", children: label }),
@@ -355,7 +356,7 @@ var selectVariants = cva(
     }
   }
 );
-var Select = React3.forwardRef(
+var Select = React13.forwardRef(
   ({ className, label, error, hint, placeholder, options, selectSize, id, children, ...props }, ref) => {
     const selectId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
@@ -395,7 +396,7 @@ var Select = React3.forwardRef(
   }
 );
 Select.displayName = "Select";
-var Checkbox = React3.forwardRef(
+var Checkbox = React13.forwardRef(
   ({ className, label, description, error, id, disabled, ...props }, ref) => {
     const checkboxId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
@@ -514,10 +515,10 @@ var RadioGroup = ({
   ] });
 };
 RadioGroup.displayName = "RadioGroup";
-var Switch = React3.forwardRef(
+var Switch = React13.forwardRef(
   ({ className, label, description, error, id, disabled, checked, defaultChecked, onChange, ...props }, ref) => {
     const switchId = id != null ? id : `switch-${Math.random().toString(36).slice(2, 9)}`;
-    const [internalChecked, setInternalChecked] = React3.useState(
+    const [internalChecked, setInternalChecked] = React13.useState(
       defaultChecked != null ? defaultChecked : false
     );
     const isControlled = checked !== void 0;
@@ -586,7 +587,812 @@ var Switch = React3.forwardRef(
   }
 );
 Switch.displayName = "Switch";
+var modalVariants = cva(
+  "relative bg-white rounded-(--radius-xl) shadow-lg w-full mx-4 transition-all",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        full: "max-w-full mx-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Modal = ({
+  open,
+  onClose,
+  children,
+  size,
+  className,
+  closeOnOverlayClick = true
+}) => {
+  React13.useEffect(() => {
+    if (open) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [open]);
+  React13.useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (open) document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: closeOnOverlayClick ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cn(modalVariants({ size }), className), children })
+  ] });
+};
+Modal.displayName = "Modal";
+var ModalHeader = ({
+  className,
+  children,
+  onClose,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn("flex items-start justify-between p-6 pb-4", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children }),
+      onClose && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "ml-4 shrink-0 rounded-(--radius-md) p-1 text-(--color-neutral-400) hover:bg-(--color-neutral-100) hover:text-(--color-neutral-700) transition-colors",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "h-4 w-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+            }
+          )
+        }
+      )
+    ]
+  }
+);
+ModalHeader.displayName = "ModalHeader";
+var ModalTitle = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h2",
+  {
+    className: cn(
+      "text-lg font-semibold text-(--color-neutral-900)",
+      className
+    ),
+    ...props
+  }
+);
+ModalTitle.displayName = "ModalTitle";
+var ModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("text-sm text-(--color-neutral-500)", className),
+    ...props
+  }
+);
+ModalDescription.displayName = "ModalDescription";
+var ModalBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("px-6 py-2 text-sm text-(--color-neutral-700)", className),
+    ...props
+  }
+);
+ModalBody.displayName = "ModalBody";
+var ModalFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center justify-end gap-2 p-6 pt-4", className),
+    ...props
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+var drawerVariants = cva(
+  "fixed z-50 bg-white shadow-xl transition-transform duration-300 ease-in-out",
+  {
+    variants: {
+      side: {
+        left: "inset-y-0 left-0 h-full",
+        right: "inset-y-0 right-0 h-full",
+        top: "inset-x-0 top-0 w-full",
+        bottom: "inset-x-0 bottom-0 w-full"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var sizeStyle = {
+  sm: { width: "20rem" },
+  md: { width: "24rem" },
+  lg: { width: "32rem" },
+  full: { width: "100%" }
+};
+var translateMap = {
+  left: { closed: "translateX(-100%)", open: "translateX(0)" },
+  right: { closed: "translateX(100%)", open: "translateX(0)" },
+  top: { closed: "translateY(-100%)", open: "translateY(0)" },
+  bottom: { closed: "translateY(100%)", open: "translateY(0)" }
+};
+var Drawer = ({
+  open,
+  onClose,
+  children,
+  side = "right",
+  size = "md",
+  className,
+  closeOnOverlayClick = true
+}) => {
+  React13.useEffect(() => {
+    if (open) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [open]);
+  React13.useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (open) document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  const resolvedSide = side != null ? side : "right";
+  const transform = open ? translateMap[resolvedSide].open : translateMap[resolvedSide].closed;
+  const isHorizontal = resolvedSide === "left" || resolvedSide === "right";
+  return /* @__PURE__ */ jsxs("div", { className: cn("fixed inset-0 z-50", !open && "pointer-events-none"), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 bg-black/50 transition-opacity duration-300",
+          open ? "opacity-100" : "opacity-0"
+        ),
+        onClick: closeOnOverlayClick ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(drawerVariants({ side }), className),
+        style: {
+          transform,
+          ...isHorizontal ? sizeStyle[size] : { height: "auto", maxHeight: "80vh" }
+        },
+        children
+      }
+    )
+  ] });
+};
+Drawer.displayName = "Drawer";
+var DrawerHeader = ({
+  className,
+  children,
+  onClose,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn("flex items-start justify-between p-6 pb-4 border-b border-(--color-neutral-200)", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children }),
+      onClose && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "ml-4 shrink-0 rounded-(--radius-md) p-1 text-(--color-neutral-400) hover:bg-(--color-neutral-100) hover:text-(--color-neutral-700) transition-colors",
+          children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+        }
+      )
+    ]
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerTitle = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h2",
+  {
+    className: cn("text-lg font-semibold text-(--color-neutral-900)", className),
+    ...props
+  }
+);
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("text-sm text-(--color-neutral-500)", className),
+    ...props
+  }
+);
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex-1 overflow-y-auto p-6 text-sm text-(--color-neutral-700)", className),
+    ...props
+  }
+);
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center justify-end gap-2 p-6 pt-4 border-t border-(--color-neutral-200)", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+var Tooltip = ({
+  content,
+  children,
+  side = "top",
+  delay = 300,
+  className
+}) => {
+  var _a, _b;
+  const [visible, setVisible] = React13.useState(false);
+  const [coords, setCoords] = React13.useState(null);
+  const triggerRef = React13.useRef(null);
+  const tooltipRef = React13.useRef(null);
+  const timerRef = React13.useRef(null);
+  const computeCoords = React13.useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const t = triggerRef.current.getBoundingClientRect();
+    const tt = tooltipRef.current.getBoundingClientRect();
+    const offset = 8;
+    switch (side) {
+      case "top":
+        setCoords({
+          top: t.top - tt.height - offset,
+          left: t.left + t.width / 2 - tt.width / 2
+        });
+        break;
+      case "bottom":
+        setCoords({
+          top: t.bottom + offset,
+          left: t.left + t.width / 2 - tt.width / 2
+        });
+        break;
+      case "left":
+        setCoords({
+          top: t.top + t.height / 2 - tt.height / 2,
+          left: t.left - tt.width - offset
+        });
+        break;
+      case "right":
+        setCoords({
+          top: t.top + t.height / 2 - tt.height / 2,
+          left: t.right + offset
+        });
+        break;
+    }
+  }, [side]);
+  React13.useLayoutEffect(() => {
+    if (!visible) return;
+    computeCoords();
+  }, [computeCoords, content, visible]);
+  React13.useEffect(() => {
+    if (!visible) return;
+    window.addEventListener("resize", computeCoords);
+    window.addEventListener("scroll", computeCoords, true);
+    return () => {
+      window.removeEventListener("resize", computeCoords);
+      window.removeEventListener("scroll", computeCoords, true);
+    };
+  }, [computeCoords, visible]);
+  const show = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setCoords(null);
+      setVisible(true);
+    }, delay);
+  };
+  const hide = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setVisible(false);
+    setCoords(null);
+  };
+  React13.useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "inline-flex",
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: hide,
+        children
+      }
+    ),
+    visible && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tooltipRef,
+        role: "tooltip",
+        className: cn(
+          "fixed z-50 px-2.5 py-1.5 text-xs font-medium text-white rounded-(--radius-md) shadow-md pointer-events-none whitespace-nowrap transition-opacity",
+          coords ? "opacity-100" : "opacity-0",
+          className
+        ),
+        style: {
+          top: (_a = coords == null ? void 0 : coords.top) != null ? _a : 0,
+          left: (_b = coords == null ? void 0 : coords.left) != null ? _b : 0,
+          backgroundColor: "var(--color-neutral-900)"
+        },
+        children: content
+      }
+    )
+  ] });
+};
+Tooltip.displayName = "Tooltip";
+var Popover = ({
+  content,
+  children,
+  side = "bottom",
+  align = "center",
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  closeOnOutsideClick = true
+}) => {
+  var _a, _b;
+  const [uncontrolledOpen, setUncontrolledOpen] = React13.useState(defaultOpen);
+  const [coords, setCoords] = React13.useState(null);
+  const [mounted, setMounted] = React13.useState(false);
+  const triggerRef = React13.useRef(null);
+  const popoverRef = React13.useRef(null);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const setOpen = React13.useCallback((nextOpen) => {
+    if (!isControlled) setUncontrolledOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+  }, [isControlled, onOpenChange]);
+  const close = React13.useCallback(() => setOpen(false), [setOpen]);
+  const openPopover = React13.useCallback(() => setOpen(true), [setOpen]);
+  const controls = React13.useMemo(() => ({
+    close,
+    open: openPopover,
+    setOpen
+  }), [close, openPopover, setOpen]);
+  const computeCoords = React13.useCallback(() => {
+    if (!triggerRef.current || !popoverRef.current) return;
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const popover2 = popoverRef.current.getBoundingClientRect();
+    const offset = 8;
+    let top = 0;
+    let left = 0;
+    if (side === "top") top = trigger.top - popover2.height - offset;
+    if (side === "bottom") top = trigger.bottom + offset;
+    if (side === "left") left = trigger.left - popover2.width - offset;
+    if (side === "right") left = trigger.right + offset;
+    if (side === "top" || side === "bottom") {
+      if (align === "start") left = trigger.left;
+      if (align === "center") left = trigger.left + trigger.width / 2 - popover2.width / 2;
+      if (align === "end") left = trigger.right - popover2.width;
+    }
+    if (side === "left" || side === "right") {
+      if (align === "start") top = trigger.top;
+      if (align === "center") top = trigger.top + trigger.height / 2 - popover2.height / 2;
+      if (align === "end") top = trigger.bottom - popover2.height;
+    }
+    setCoords({
+      top: Math.max(8, Math.min(top, window.innerHeight - popover2.height - 8)),
+      left: Math.max(8, Math.min(left, window.innerWidth - popover2.width - 8))
+    });
+  }, [align, side]);
+  React13.useEffect(() => {
+    setMounted(true);
+  }, []);
+  React13.useLayoutEffect(() => {
+    if (!isOpen) return;
+    computeCoords();
+  }, [computeCoords, content, isOpen]);
+  React13.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    const handlePointerDown = (event) => {
+      var _a2, _b2;
+      const target = event.target;
+      const clickedTrigger = (_a2 = triggerRef.current) == null ? void 0 : _a2.contains(target);
+      const clickedPopover = (_b2 = popoverRef.current) == null ? void 0 : _b2.contains(target);
+      if (!clickedTrigger && !clickedPopover) close();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    if (closeOnOutsideClick) document.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("resize", computeCoords);
+    window.addEventListener("scroll", computeCoords, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("resize", computeCoords);
+      window.removeEventListener("scroll", computeCoords, true);
+    };
+  }, [close, closeOnOutsideClick, computeCoords, isOpen]);
+  const popover = isOpen ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: popoverRef,
+      role: "dialog",
+      className: cn(
+        "fixed z-50 min-w-48 rounded-(--radius-lg) border border-(--color-neutral-200) bg-white p-4 text-sm text-(--color-neutral-700) shadow-lg outline-none transition-opacity",
+        coords ? "opacity-100" : "opacity-0",
+        className
+      ),
+      style: {
+        top: (_a = coords == null ? void 0 : coords.top) != null ? _a : 0,
+        left: (_b = coords == null ? void 0 : coords.left) != null ? _b : 0
+      },
+      children: typeof content === "function" ? content(controls) : content
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "inline-flex",
+        "aria-expanded": isOpen,
+        onClick: () => setOpen(!isOpen),
+        children
+      }
+    ),
+    mounted && popover ? createPortal(popover, document.body) : null
+  ] });
+};
+Popover.displayName = "Popover";
+var ToastContext = React13.createContext(null);
+var counter = 0;
+var genId = () => `toast-${++counter}`;
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = React13.useState([]);
+  const toast = React13.useCallback((input) => {
+    const id = genId();
+    setToasts((prev) => [...prev, { ...input, id }]);
+    return id;
+  }, []);
+  const dismiss = React13.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const dismissAll = React13.useCallback(() => {
+    setToasts([]);
+  }, []);
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: { toasts, toast, dismiss, dismissAll }, children });
+};
+var useToast = () => {
+  const ctx = React13.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+};
+var toastVariants = cva(
+  "pointer-events-auto relative flex w-80 max-w-[calc(100vw-2rem)] items-start gap-3 overflow-hidden rounded-(--radius-lg) border p-4 pr-8 shadow-lg",
+  {
+    variants: {
+      variant: {
+        default: "border-(--color-neutral-200) bg-white text-(--color-neutral-800)",
+        success: "border-green-200 bg-green-50 text-green-900",
+        warning: "border-yellow-200 bg-yellow-50 text-yellow-900",
+        destructive: "border-red-200 bg-red-50 text-red-900"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var positionClasses = {
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "top-right": "top-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end"
+};
+var SingleToast = ({ toast, onDismiss, defaultDuration }) => {
+  var _a, _b;
+  const duration = (_a = toast.duration) != null ? _a : defaultDuration;
+  React13.useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(() => onDismiss(toast.id), duration);
+    return () => clearTimeout(timer);
+  }, [duration, onDismiss, toast.id]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: toastVariants({ variant: (_b = toast.variant) != null ? _b : "default" }),
+      children: [
+        toast.icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 [&>svg]:size-4", children: toast.icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+          toast.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-none", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx("p", { className: "text-xs opacity-80", children: toast.description }),
+          toast.action && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                toast.action.onClick();
+                onDismiss(toast.id);
+              },
+              className: "mt-1.5 text-xs font-medium underline underline-offset-2 hover:no-underline focus:outline-none",
+              children: toast.action.label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: () => onDismiss(toast.id),
+            className: "absolute right-2 top-2 rounded opacity-50 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-(--color-primary-500)",
+            children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+              /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+var Toaster = ({
+  position = "bottom-right",
+  defaultDuration = 4e3,
+  className
+}) => {
+  const { toasts, dismiss } = useToast();
+  const [mounted, setMounted] = React13.useState(false);
+  React13.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": "Notifications",
+        className: cn(
+          "fixed z-[100] flex flex-col gap-2 pointer-events-none",
+          positionClasses[position],
+          className
+        ),
+        children: toasts.map((t) => /* @__PURE__ */ jsx(
+          SingleToast,
+          {
+            toast: t,
+            onDismiss: dismiss,
+            defaultDuration
+          },
+          t.id
+        ))
+      }
+    ),
+    document.body
+  );
+};
+Toaster.displayName = "Toaster";
+ToastProvider.displayName = "ToastProvider";
+var alertVariants = cva(
+  "relative flex w-full gap-3 rounded-(--radius-lg) border p-4 text-sm",
+  {
+    variants: {
+      variant: {
+        default: "border-(--color-neutral-200) bg-(--color-neutral-50) text-(--color-neutral-700)",
+        success: "border-green-200 bg-green-50 text-green-800",
+        warning: "border-yellow-200 bg-yellow-50 text-yellow-800",
+        destructive: "border-red-200 bg-red-50 text-red-800"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var Alert = ({
+  variant,
+  icon,
+  onClose,
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 [&>svg]:size-4", children: icon }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: onClose,
+            className: "ml-auto shrink-0 self-start rounded opacity-60 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-(--color-primary-500)",
+            children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+              /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+Alert.displayName = "Alert";
+var AlertTitle = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("p", { className: cn("font-semibold leading-none tracking-tight", className), ...props, children });
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-[0.8rem] opacity-80", className), ...props, children });
+AlertDescription.displayName = "AlertDescription";
+var progressVariants = cva(
+  "w-full overflow-hidden rounded-full bg-(--color-neutral-200)",
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        md: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Progress = ({
+  value,
+  size,
+  label,
+  showLabel = false,
+  className,
+  ...props
+}) => {
+  const isIndeterminate = value === void 0 || value === null;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    (label || showLabel) && /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between text-xs text-(--color-neutral-600)", children: [
+      label && /* @__PURE__ */ jsx("span", { children: label }),
+      showLabel && !isIndeterminate && /* @__PURE__ */ jsxs("span", { className: "ml-auto font-medium", children: [
+        Math.round(value),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": isIndeterminate ? void 0 : value,
+        className: cn(progressVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full rounded-full bg-(--color-primary-500) transition-all duration-300 ease-in-out",
+              isIndeterminate && "w-1/3 animate-[indeterminate_1.5s_ease-in-out_infinite]"
+            ),
+            style: isIndeterminate ? void 0 : { width: `${Math.min(100, Math.max(0, value))}%` }
+          }
+        )
+      }
+    )
+  ] });
+};
+Progress.displayName = "Progress";
+var skeletonVariants = cva(
+  "animate-pulse bg-(--color-neutral-200)",
+  {
+    variants: {
+      variant: {
+        text: "h-4 w-full rounded",
+        circle: "rounded-full",
+        rect: "rounded-(--radius-md)"
+      }
+    },
+    defaultVariants: { variant: "rect" }
+  }
+);
+var Skeleton = ({
+  variant,
+  width,
+  height,
+  className,
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(skeletonVariants({ variant }), className),
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height,
+        ...style
+      },
+      ...props
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
 
-export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Input, RadioGroup, Select, Separator, Spinner, Switch, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, fontSize, inputVariants, radius, selectVariants, separatorVariants, spinnerVariants };
+export { Alert, AlertDescription, AlertTitle, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Drawer, DrawerBody, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, Input, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, ModalTitle, Popover, Progress, RadioGroup, Select, Separator, Skeleton, Spinner, Switch, ToastProvider, Toaster, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, drawerVariants, fontSize, inputVariants, modalVariants, progressVariants, radius, selectVariants, separatorVariants, skeletonVariants, spinnerVariants, toastVariants, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map