@ataraui/ataraui-react 0.4.0 → 0.6.0

package/dist/index.mjs

@@ -1110,7 +1110,668 @@ var Popover = ({
   ] });
 };
 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";
+var tabsListVariants = cva(
+  "flex items-center gap-1 rounded-(--radius-lg) bg-(--color-neutral-100) p-1",
+  {
+    variants: {
+      variant: {
+        default: "bg-(--color-neutral-100)",
+        outline: "bg-transparent border border-(--color-neutral-200)",
+        pills: "bg-transparent gap-2"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-(--radius-md) px-3 py-1.5 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-(--color-primary-500) disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "text-(--color-neutral-500) data-[state=active]:bg-white data-[state=active]:text-(--color-neutral-900) data-[state=active]:shadow-sm",
+        outline: "text-(--color-neutral-500) data-[state=active]:border data-[state=active]:border-(--color-neutral-200) data-[state=active]:bg-white data-[state=active]:text-(--color-neutral-900)",
+        pills: "text-(--color-neutral-500) rounded-full data-[state=active]:bg-(--color-primary-500) data-[state=active]:text-white"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var TabsContext = React13.createContext(null);
+var useTabsContext = () => {
+  const ctx = React13.useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs components must be used within <Tabs>");
+  return ctx;
+};
+var Tabs = ({
+  value,
+  defaultValue = "",
+  onChange,
+  variant = "default",
+  className,
+  children,
+  ...props
+}) => {
+  const [uncontrolled, setUncontrolled] = React13.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const active = isControlled ? value : uncontrolled;
+  const setActive = React13.useCallback((val) => {
+    if (!isControlled) setUncontrolled(val);
+    onChange == null ? void 0 : onChange(val);
+  }, [isControlled, onChange]);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { active, setActive, variant }, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), ...props, children }) });
+};
+Tabs.displayName = "Tabs";
+var TabsList = ({ className, children, ...props }) => {
+  const { variant } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: cn(tabsListVariants({ variant }), className),
+      ...props,
+      children
+    }
+  );
+};
+TabsList.displayName = "TabsList";
+var TabsTrigger = ({
+  value,
+  className,
+  children,
+  ...props
+}) => {
+  const { active, setActive, variant } = useTabsContext();
+  const isActive = active === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      "data-state": isActive ? "active" : "inactive",
+      onClick: () => setActive(value),
+      className: cn(tabsTriggerVariants({ variant }), className),
+      ...props,
+      children
+    }
+  );
+};
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = ({
+  value,
+  className,
+  children,
+  ...props
+}) => {
+  const { active } = useTabsContext();
+  if (active !== value) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      className: cn("mt-2", className),
+      ...props,
+      children
+    }
+  );
+};
+TabsContent.displayName = "TabsContent";
+var accordionVariants = cva(
+  "w-full",
+  {
+    variants: {
+      variant: {
+        default: "divide-y divide-(--color-neutral-200) rounded-(--radius-lg) border border-(--color-neutral-200)",
+        ghost: "divide-y divide-(--color-neutral-200)",
+        outlined: "flex flex-col gap-2"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var AccordionContext = React13.createContext(null);
+var useAccordionContext = () => {
+  const ctx = React13.useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion components must be used within <Accordion>");
+  return ctx;
+};
+var Accordion = ({
+  type = "single",
+  value,
+  defaultValue,
+  onChange,
+  variant = "default",
+  className,
+  children,
+  ...props
+}) => {
+  const initOpen = defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : [];
+  const [uncontrolled, setUncontrolled] = React13.useState(initOpen);
+  const isControlled = value !== void 0;
+  const openItems = isControlled ? Array.isArray(value) ? value : [value] : uncontrolled;
+  const toggle = React13.useCallback((val) => {
+    var _a;
+    let next;
+    if (type === "single") {
+      next = openItems.includes(val) ? [] : [val];
+    } else {
+      next = openItems.includes(val) ? openItems.filter((v) => v !== val) : [...openItems, val];
+    }
+    if (!isControlled) setUncontrolled(next);
+    onChange == null ? void 0 : onChange(type === "single" ? (_a = next[0]) != null ? _a : "" : next);
+  }, [isControlled, onChange, openItems, type]);
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openItems, toggle, variant }, children: /* @__PURE__ */ jsx("div", { className: cn(accordionVariants({ variant }), className), ...props, children }) });
+};
+Accordion.displayName = "Accordion";
+var AccordionItemContext = React13.createContext(null);
+var useAccordionItemContext = () => {
+  const ctx = React13.useContext(AccordionItemContext);
+  if (!ctx) throw new Error("AccordionTrigger/Content must be used within <AccordionItem>");
+  return ctx;
+};
+var AccordionItem = ({
+  value,
+  disabled = false,
+  className,
+  children,
+  ...props
+}) => {
+  const { openItems, variant } = useAccordionContext();
+  const isOpen = openItems.includes(value);
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { value, isOpen, disabled }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-state": isOpen ? "open" : "closed",
+      className: cn(
+        variant === "outlined" && "rounded-(--radius-lg) border border-(--color-neutral-200)",
+        disabled && "opacity-50 pointer-events-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { toggle } = useAccordionContext();
+  const { value, isOpen } = useAccordionItemContext();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-expanded": isOpen,
+      onClick: () => toggle(value),
+      className: cn(
+        "flex w-full items-center justify-between px-4 py-4 text-sm font-medium text-(--color-neutral-900) transition-all hover:bg-(--color-neutral-50) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--color-primary-500)",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: cn("shrink-0 text-(--color-neutral-500) transition-transform duration-200", isOpen && "rotate-180"),
+            children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+          }
+        )
+      ]
+    }
+  );
+};
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { isOpen } = useAccordionItemContext();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("px-4 pb-4 text-sm text-(--color-neutral-600)", className),
+      ...props,
+      children
+    }
+  );
+};
+AccordionContent.displayName = "AccordionContent";
+var tableVariants = cva(
+  "w-full caption-bottom text-sm",
+  {
+    variants: {
+      variant: {
+        default: "",
+        striped: "",
+        bordered: ""
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var TableContext = React13.createContext({ variant: "default" });
+var Table = ({
+  variant = "default",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-auto rounded-(--radius-lg) border border-(--color-neutral-200)", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      className: cn(tableVariants({ variant }), className),
+      ...props,
+      children
+    }
+  ) }) });
+};
+Table.displayName = "Table";
+var TableHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    className: cn("bg-(--color-neutral-50) [&_tr]:border-b [&_tr]:border-(--color-neutral-200)", className),
+    ...props,
+    children
+  }
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { variant } = React13.useContext(TableContext);
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      className: cn(
+        "[&_tr:last-child]:border-0",
+        variant === "striped" && "[&_tr:nth-child(odd)]:bg-(--color-neutral-50)",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+TableBody.displayName = "TableBody";
+var TableFooter = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    className: cn("border-t border-(--color-neutral-200) bg-(--color-neutral-50) font-medium", className),
+    ...props,
+    children
+  }
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { variant } = React13.useContext(TableContext);
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        "border-b border-(--color-neutral-200) transition-colors hover:bg-(--color-neutral-50)",
+        variant === "bordered" && "[&_td]:border-r [&_td]:last:border-r-0 [&_th]:border-r [&_th]:last:border-r-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+TableRow.displayName = "TableRow";
+var TableHead = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    className: cn(
+      "h-10 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wide text-(--color-neutral-500)",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+TableHead.displayName = "TableHead";
+var TableCell = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    className: cn("px-4 py-3 align-middle text-(--color-neutral-700)", className),
+    ...props,
+    children
+  }
+);
+TableCell.displayName = "TableCell";
+var TableCaption = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    className: cn("mt-4 text-sm text-(--color-neutral-500)", className),
+    ...props,
+    children
+  }
+);
+TableCaption.displayName = "TableCaption";
 
-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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, ToastProvider, Toaster, Tooltip, accordionVariants, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, drawerVariants, fontSize, inputVariants, modalVariants, progressVariants, radius, selectVariants, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, tabsListVariants, tabsTriggerVariants, toastVariants, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map