@sikka/hawa/dist/toaster/index.mjs

Modern UI Kit made with Tailwind

"use client";

// elements/toaster/Toaster.tsx
import React2 from "react";

// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// elements/toast/Toast.tsx
import * as React from "react";
import * as ToastPrimitives from "@radix-ui/react-toast";
import { cva } from "class-variance-authority";
var toastVariants = cva(
  "hawa-group hawa-z-[900] hawa-pointer-events-auto hawa-relative hawa-flex hawa-w-full hawa-items-center hawa-justify-between hawa-overflow-hidden hawa-rounded-md hawa-border hawa-shadow-lg hawa-transition-all data-[swipe=cancel]:hawa-translate-x-0 data-[swipe=end]:hawa-translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:hawa-translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:hawa-transition-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[swipe=end]:hawa-animate-out data-[state=closed]:hawa-fade-out-80  data-[state=open]:hawa-slide-in-from-top-full data-[state=open]:sm:hawa-slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "hawa-border hawa-bg-background hawa-text-foreground",
        destructive: "hawa-destructive hawa-group hawa-border-destructive hawa-bg-destructive hawa-text-destructive-foreground"
      },
      severity: {
        info: "hawa-info hawa-group hawa-text-info-foreground hawa-bg-info",
        warning: "hawa-warning hawa-group hawa-text-warning-foreground hawa-bg-warning",
        error: "hawa-error hawa-group hawa-border-error hawa-bg-error hawa-text-white",
        success: "hawa-success hawa-group hawa-text-success-foreground hawa-bg-success",
        none: ""
      }
    },
    defaultVariants: { variant: "default" }
  }
);
var sizeStyles = {
  default: "hawa-text-sm",
  // Update this based on the desired padding for rtl
  sm: "hawa-text-xs"
};
var ToastProvider = ToastPrimitives.Provider;
var ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  ToastPrimitives.Viewport,
  {
    ref,
    className: cn(
      "hawa-fixed hawa-top-0 hawa-z-[100] hawa-flex hawa-max-h-screen hawa-w-full hawa-flex-col-reverse hawa-p-4 sm:hawa-bottom-0 sm:hawa-right-0 sm:hawa-top-auto sm:hawa-flex-col md:hawa-max-w-[420px]",
      className
    ),
    ...props
  }
));
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
var Toast = React.forwardRef(({ className, variant, severity = "none", direction, ...props }, ref) => {
  return /* @__PURE__ */ React.createElement(
    ToastPrimitives.Root,
    {
      ref,
      className: cn(
        toastVariants({ variant, severity }),
        className,
        direction === "rtl" ? "data-[state=closed]:hawa-slide-out-to-left-full" : "data-[state=closed]:hawa-slide-out-to-right-full"
      ),
      dir: direction,
      ...props
    }
  );
});
Toast.displayName = ToastPrimitives.Root.displayName;
var ToastAction = React.forwardRef(({ className, ...props }, ref) => {
  return /* @__PURE__ */ React.createElement(
    ToastPrimitives.Action,
    {
      ref,
      className: cn(
        "hawa-inline-flex hawa-h-8 hawa-shrink-0 hawa-items-center hawa-justify-center hawa-rounded-md hawa-border hawa-bg-transparent hawa-px-3 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors hover:hawa-bg-secondary hover:hawa-text-secondary-foreground focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
        "group-[.info]:hawa-border-muted/40 group-[.info]:hover:hawa-border-info/30 group-[.info]:hover:hawa-bg-info group-[.info]:hover:hawa-text-info-foreground group-[.info]:focus:hawa-ring-info",
        "group-[.error]:hawa-border-muted/40 group-[.error]:hover:hawa-border-error/30 group-[.error]:hover:hawa-bg-error group-[.error]:hover:hawa-text-error-foreground group-[.error]:focus:hawa-ring-error",
        "group-[.success]:hawa-border-muted/40 group-[.success]:hover:hawa-border-success/30 group-[.success]:hover:hawa-bg-success group-[.success]:hover:hawa-text-success-foreground group-[.success]:focus:hawa-ring-success",
        "group-[.warning]:hawa-border-muted/40 group-[.warning]:hover:hawa-border-warning/30 group-[.warning]:hover:hawa-bg-warning group-[.warning]:hover:hawa-text-warning-foreground group-[.warning]:focus:hawa-ring-warning",
        "hawa-whitespace-nowrap",
        className
      ),
      ...props
    }
  );
});
ToastAction.displayName = ToastPrimitives.Action.displayName;
var ToastClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  ToastPrimitives.Close,
  {
    ref,
    className: cn(
      // "hawa-absolute hawa-start-2 hawa-top-2",
      // "group-hover:hawa-opacity-100",
      "hawa-opacity-100",
      "hawa-rounded-md hawa-p-1 hawa-text-foreground/50 hawa-transition-opacity hover:hawa-text-foreground focus:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 group-[.destructive]:hawa-text-red-300 group-[.destructive]:hover:hawa-text-red-50 group-[.destructive]:focus:hawa-ring-red-400 group-[.destructive]:focus:hawa-ring-offset-red-600",
      className
    ),
    "toast-close": "",
    ...props
  },
  /* @__PURE__ */ React.createElement(
    "svg",
    {
      "aria-label": "Close Icon",
      "aria-hidden": "true",
      className: "hawa-icon",
      fill: "currentColor",
      viewBox: "0 0 20 20"
    },
    /* @__PURE__ */ React.createElement(
      "path",
      {
        fillRule: "evenodd",
        d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
        clipRule: "evenodd"
      }
    )
  )
));
ToastClose.displayName = ToastPrimitives.Close.displayName;
var ToastTitle = React.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React.createElement(
  ToastPrimitives.Title,
  {
    ref,
    className: cn(
      "hawa-select-text hawa-text-sm hawa-font-semibold",
      sizeStyles[size],
      className
    ),
    ...props
  }
));
ToastTitle.displayName = ToastPrimitives.Title.displayName;
var ToastDescription = React.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ React.createElement(
  ToastPrimitives.Description,
  {
    ref,
    className: cn(
      "hawa-select-text hawa-opacity-90",
      sizeStyles[size],
      className
    ),
    ...props
  }
));
ToastDescription.displayName = ToastPrimitives.Description.displayName;

// elements/toaster/Toaster.tsx
function Toaster(props) {
  var _a;
  let isRTL = props.direction === "rtl";
  return /* @__PURE__ */ React2.createElement(ToastProvider, { swipeDirection: isRTL ? "left" : "right" }, (_a = props.toasts) == null ? void 0 : _a.map(function({
    id,
    title,
    description,
    size = "default",
    action,
    ...toastProps
  }) {
    return /* @__PURE__ */ React2.createElement(Toast, { direction: props.direction, key: id, ...toastProps }, /* @__PURE__ */ React2.createElement(
      "div",
      {
        className: cn(
          "hawa-flex hawa-w-full hawa-flex-row hawa-gap-2",
          action && "hawa-justify-between"
        )
      },
      /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-p-2 hawa-pe-0" }, /* @__PURE__ */ React2.createElement(ToastClose, null)),
      /* @__PURE__ */ React2.createElement("div", { className: "hawa-mx-0 hawa-h-auto hawa-max-h-full hawa-w-px hawa-bg-primary-foreground/10" }),
      /* @__PURE__ */ React2.createElement(
        "div",
        {
          className: cn(
            "hawa-flex hawa-w-full hawa-flex-row hawa-justify-between hawa-gap-2",
            { "hawa-p-4": size === "default", "hawa-p-2": size === "sm" }
          )
        },
        /* @__PURE__ */ React2.createElement("div", { className: "hawa-grid hawa-gap-1 hawa-text-start" }, title && /* @__PURE__ */ React2.createElement(ToastTitle, { size }, title), description && /* @__PURE__ */ React2.createElement(ToastDescription, { size }, description)),
        action && /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-col hawa-justify-center" }, action)
      )
    ));
  }), /* @__PURE__ */ React2.createElement(
    ToastViewport,
    {
      className: cn("hawa-gap-2", isRTL && "hawa-fixed hawa-left-0")
    }
  ));
}
export {
  Toaster
};
//# sourceMappingURL=index.mjs.map