@ataraui/ataraui-react 0.2.0 → 0.4.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 }),
@@ -335,7 +336,781 @@ var Spinner = React3.forwardRef(
   ] })
 );
 Spinner.displayName = "Spinner";
+var selectVariants = cva(
+  "w-full appearance-none bg-white border rounded-(--radius-md) px-3 py-2 text-sm transition-colors cursor-pointer focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)",
+  {
+    variants: {
+      state: {
+        default: "border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20",
+        error: "border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20"
+      },
+      selectSize: {
+        sm: "h-8  text-xs pr-8",
+        md: "h-10 text-sm pr-8",
+        lg: "h-12 text-base pr-10"
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      selectSize: "md"
+    }
+  }
+);
+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: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "text-sm font-medium text-(--color-neutral-700)", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            id: selectId,
+            className: cn(selectVariants({ state: error ? "error" : "default", selectSize }), className),
+            ...props,
+            children: [
+              placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+              options ? options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)) : children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-(--color-neutral-400)",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+          }
+        )
+      ] }),
+      hint && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-neutral-500)", children: hint }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-danger-500)", children: error })
+    ] });
+  }
+);
+Select.displayName = "Select";
+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: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            id: checkboxId,
+            disabled,
+            className: cn(
+              "h-4 w-4 shrink-0 mt-0.5 rounded-(--radius-sm) border cursor-pointer transition-colors appearance-none",
+              "border-(--color-neutral-300) bg-white",
+              "checked:bg-(--color-primary-500) checked:border-(--color-primary-500)",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-primary-500)/20",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              error && "border-(--color-danger-500)",
+              className
+            ),
+            style: {
+              backgroundImage: `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`,
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "center"
+            },
+            ...props
+          }
+        ),
+        (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: checkboxId,
+              className: cn(
+                "text-sm font-medium cursor-pointer text-(--color-neutral-900)",
+                disabled && "cursor-not-allowed opacity-50"
+              ),
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-neutral-500)", children: description })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-danger-500) ml-6", children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var RadioGroup = ({
+  options,
+  value,
+  onChange,
+  name,
+  label,
+  error,
+  hint,
+  orientation = "vertical"
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-(--color-neutral-700)", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex gap-3",
+          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"
+        ),
+        children: options.map((option) => {
+          const optionId = `${name}-${option.value}`;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                id: optionId,
+                name,
+                value: option.value,
+                checked: value === option.value,
+                disabled: option.disabled,
+                onChange: () => onChange == null ? void 0 : onChange(option.value),
+                className: cn(
+                  "h-4 w-4 shrink-0 mt-0.5 cursor-pointer appearance-none rounded-full border-2 transition-colors",
+                  "border-(--color-neutral-300) bg-white",
+                  "checked:border-(--color-primary-500) checked:bg-(--color-primary-500)",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-primary-500)/20",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  error && "border-(--color-danger-500)"
+                ),
+                style: {
+                  backgroundImage: value === option.value ? `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")` : "none",
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "center"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: optionId,
+                  className: cn(
+                    "text-sm font-medium cursor-pointer text-(--color-neutral-900)",
+                    option.disabled && "cursor-not-allowed opacity-50"
+                  ),
+                  children: option.label
+                }
+              ),
+              option.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-neutral-500)", children: option.description })
+            ] })
+          ] }, option.value);
+        })
+      }
+    ),
+    hint && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-neutral-500)", children: hint }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-danger-500)", children: error })
+  ] });
+};
+RadioGroup.displayName = "RadioGroup";
+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] = React13.useState(
+      defaultChecked != null ? defaultChecked : false
+    );
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? checked : internalChecked;
+    const handleChange = (e) => {
+      if (!isControlled) setInternalChecked(e.target.checked);
+      onChange == null ? void 0 : onChange(e);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative inline-flex shrink-0 mt-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              role: "switch",
+              id: switchId,
+              disabled,
+              checked: isChecked,
+              onChange: handleChange,
+              className: "sr-only peer",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: switchId,
+              className: cn(
+                "relative flex h-5 w-9 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+                "bg-(--color-neutral-200) peer-checked:bg-(--color-primary-500)",
+                "peer-focus-visible:ring-2 peer-focus-visible:ring-(--color-primary-500)/20",
+                "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+                error && "ring-2 ring-(--color-danger-500)/20",
+                className
+              ),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "pointer-events-none block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform",
+                  style: {
+                    transform: isChecked ? "translateX(18px)" : "translateX(2px)"
+                  }
+                }
+              )
+            }
+          )
+        ] }),
+        (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-sm font-medium text-(--color-neutral-900)",
+                disabled && "opacity-50"
+              ),
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-neutral-500)", children: description })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-danger-500) ml-12", children: error })
+    ] });
+  }
+);
+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";
 
-export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, Separator, Spinner, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, fontSize, inputVariants, radius, separatorVariants, spinnerVariants };
+export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Drawer, DrawerBody, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, Input, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, ModalTitle, Popover, RadioGroup, Select, Separator, Spinner, Switch, Tooltip, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, drawerVariants, fontSize, inputVariants, modalVariants, radius, selectVariants, separatorVariants, spinnerVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map