@ataraui/ataraui-react 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -1110,7 +1110,289 @@ 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";
 
-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 { 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