@bricks-toolkit/toolkit 0.1.1 → 0.1.3

package/dist/chunk-XFNRKHHF.cjs

@@ -0,0 +1,332 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "h-6 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-11 px-4 text-base",
+  xl: "h-12 px-4 text-lg"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var variantClasses = {
+  default: "rounded-md border border-border bg-surface shadow-sm focus:outline-none",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent focus:outline-none",
+  unstyled: "border-0 bg-transparent p-0 focus:outline-none"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus:border-primary",
+    filled: "focus:border-primary",
+    flushed: "border-border focus:border-primary",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus:border-error",
+    filled: "bg-error/5 focus:border-error",
+    flushed: "border-error focus:border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus:border-success",
+    filled: "bg-success/5 focus:border-success",
+    flushed: "border-success focus:border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus:border-warning",
+    filled: "bg-warning/5 focus:border-warning",
+    flushed: "border-warning focus:border-warning",
+    unstyled: ""
+  }
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning"
+};
+function getStateMessage(state, errorMessage, successMessage, warningMessage) {
+  if (state === "error" && errorMessage) return errorMessage;
+  if (state === "success" && successMessage) return successMessage;
+  if (state === "warning" && warningMessage) return warningMessage;
+  return void 0;
+}
+function Addon({ children, side }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: chunkL5VQZZVR_cjs.cn(
+        "inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none",
+        side === "left" ? "rounded-l-md border-r-0" : "rounded-r-md border-l-0"
+      ),
+      children
+    }
+  );
+}
+var TextInput = react.forwardRef(function TextInput2({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  leftElement,
+  rightElement,
+  prefix,
+  suffix,
+  wrapperClassName,
+  inputGroupClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  id: idProp,
+  disabled,
+  className,
+  clearable,
+  isLoading,
+  multiline,
+  rows = 4,
+  type = "text",
+  value,
+  onChange,
+  ...rest
+}, ref) {
+  const generatedId = react.useId();
+  const inputId = idProp ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const [internalType, setInternalType] = react.useState(type);
+  const showPasswordToggle = type === "password";
+  const isValueString = typeof value === "string" || typeof value === "number";
+  const showClear = clearable && isValueString && String(value).length > 0;
+  const hasLeftElement = leftElement !== void 0;
+  const hasRightElement = rightElement !== void 0 || Boolean(showClear) || Boolean(isLoading) || showPasswordToggle;
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const handleClear = () => {
+    const inputElement = ref && typeof ref === "object" && "current" in ref ? ref.current : null;
+    if (inputElement) {
+      Object.getOwnPropertyDescriptor(
+        (multiline ? window.HTMLTextAreaElement : window.HTMLInputElement).prototype,
+        "value"
+      )?.set?.call(inputElement, "");
+      const event = new Event("input", { bubbles: true });
+      inputElement.dispatchEvent(event);
+    } else if (onChange) {
+      const e = {
+        target: { value: "" },
+        currentTarget: { value: "" },
+        preventDefault: () => {
+        },
+        stopPropagation: () => {
+        }
+      };
+      onChange(e);
+    }
+  };
+  const renderRightIcon = () => {
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "animate-spin h-5 w-5 text-text-muted",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      );
+    }
+    if (showClear) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: "flex items-center justify-center rounded-full text-text-muted hover:text-text hover:bg-interaction-hover p-0.5 transition w-6 h-6 border-0 bg-transparent cursor-pointer",
+          "aria-label": "Clear input",
+          children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-[18px] h-[18px]" })
+        }
+      );
+    }
+    if (showPasswordToggle) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setInternalType((prev) => prev === "password" ? "text" : "password");
+          },
+          className: "flex items-center justify-center rounded-full text-text-muted hover:text-text transition w-6 h-6 border-0 bg-transparent cursor-pointer",
+          "aria-label": internalType === "password" ? "Show password" : "Hide password",
+          children: internalType === "password" ? /* @__PURE__ */ jsxRuntime.jsx(outline.EyeIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.EyeSlashIcon, { className: "w-5 h-5" })
+        }
+      );
+    }
+    return rightElement;
+  };
+  const commonInputProps = {
+    id: inputId,
+    disabled: Boolean(disabled) || Boolean(isLoading),
+    value,
+    onChange,
+    "aria-invalid": state === "error" ? true : void 0,
+    "aria-describedby": describedBy,
+    "aria-required": required,
+    className: chunkL5VQZZVR_cjs.cn(
+      "w-full bg-transparent border-0 focus:outline-none focus:ring-0 outline-none h-full",
+      !multiline && sizeClasses[size],
+      multiline && "py-3 px-4 resize-none",
+      type === "number" && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+      inputClassName
+    ),
+    style: {
+      paddingLeft: hasLeftElement ? "0.5rem" : void 0,
+      paddingRight: hasRightElement ? "0.5rem" : void 0
+    },
+    ...rest
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex flex-col gap-1",
+        fullWidth ? "w-full" : "w-fit",
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: chunkL5VQZZVR_cjs.cn(
+              "font-black leading-none text-text mb-2 uppercase tracking-widest",
+              labelSizeClasses[size],
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunkL5VQZZVR_cjs.cn(
+              "flex items-stretch transition-all duration-150 overflow-hidden",
+              variantClasses[variant],
+              stateVariantClasses[state][variant],
+              fullWidth ? "w-full" : "w-fit",
+              "focus-within:ring-4 focus-within:ring-primary/20 focus-within:border-primary",
+              disabled && "opacity-50 cursor-not-allowed bg-surface-secondary",
+              multiline && "h-auto",
+              inputGroupClassName
+            ),
+            children: [
+              prefix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "left", children: prefix }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center min-w-0", children: [
+                hasLeftElement && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "pl-3 shrink-0 flex items-center justify-center",
+                      multiline && "self-start mt-3"
+                    ),
+                    "aria-hidden": "true",
+                    children: leftElement
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 h-full", children: multiline ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "textarea",
+                  {
+                    ref,
+                    rows,
+                    ...commonInputProps
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref,
+                    type: internalType,
+                    ...commonInputProps,
+                    onKeyDown: (e) => {
+                      if (type === "number" && ["e", "E", "+"].includes(e.key)) {
+                        e.preventDefault();
+                      }
+                      rest.onKeyDown?.(e);
+                    }
+                  }
+                ) }),
+                hasRightElement && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "pr-3 shrink-0 flex items-center justify-center text-text-secondary",
+                      multiline && "self-start mt-3"
+                    ),
+                    style: { width: "2.5rem" },
+                    "aria-hidden": "true",
+                    children: renderRightIcon()
+                  }
+                )
+              ] }),
+              suffix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "right", children: suffix })
+            ]
+          }
+        ),
+        helperText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: chunkL5VQZZVR_cjs.cn("text-xs leading-tight text-text-muted ", helperClassName), children: helperText }),
+        stateMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: state === "error" ? "alert" : void 0,
+            className: chunkL5VQZZVR_cjs.cn("text-xs leading-tight mt-1", stateMessageClasses[state], helperClassName),
+            children: stateMessage
+          }
+        )
+      ]
+    }
+  );
+});
+TextInput.displayName = "TextInput";
+
+exports.TextInput = TextInput;

package/dist/chunk-Y3NTKFUE.mjs

@@ -0,0 +1,66 @@
+import { createContext, useState, useEffect, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ThemeProvider/ThemeProvider.tsx
+var ThemeProviderContext = createContext(void 0);
+var ThemeProvider = ({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  themeConfig,
+  ...props
+}) => {
+  const [theme, setTheme] = useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    const stored = localStorage.getItem(storageKey);
+    return stored ? stored : defaultTheme;
+  });
+  useEffect(() => {
+    const root = window.document.documentElement;
+    const applyTheme = () => {
+      root.classList.remove("light", "dark");
+      const currentTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
+      root.classList.add(currentTheme);
+      if (themeConfig) {
+        const config = themeConfig[currentTheme] ?? {};
+        Object.entries(config).forEach(([key, value2]) => {
+          if (value2) {
+            const variableName = `--${key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`;
+            root.style.setProperty(variableName, value2);
+          }
+        });
+      }
+    };
+    applyTheme();
+    if (theme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const listener = () => {
+        applyTheme();
+      };
+      mediaQuery.addEventListener("change", listener);
+      return () => {
+        mediaQuery.removeEventListener("change", listener);
+      };
+    }
+    return void 0;
+  }, [theme, themeConfig]);
+  const value = {
+    theme,
+    setTheme: (newTheme) => {
+      localStorage.setItem(storageKey, newTheme);
+      setTheme(newTheme);
+    }
+  };
+  if (themeConfig !== void 0) {
+    value.themeConfig = themeConfig;
+  }
+  return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, { ...props, value, children });
+};
+var useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+  if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+ThemeProvider.displayName = "ThemeProvider";
+
+export { ThemeProvider, useTheme };

package/dist/chunk-YMMNWJT6.cjs

@@ -0,0 +1,134 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var statusIcons = {
+  success: /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { className: "w-5 h-5" }),
+  error: /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationCircleIcon, { className: "w-5 h-5" }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, { className: "w-5 h-5" }),
+  info: /* @__PURE__ */ jsxRuntime.jsx(outline.InformationCircleIcon, { className: "w-5 h-5" })
+};
+var solidIconBg = {
+  success: "bg-white/20",
+  error: "bg-white/20",
+  warning: "bg-white/20",
+  info: "bg-white/20"
+};
+var subtleIconBg = {
+  success: "bg-success/20 text-success",
+  error: "bg-error/20 text-error",
+  warning: "bg-warning/20 text-warning",
+  info: "bg-info/20 text-info"
+};
+var accentIconBg = {
+  success: "bg-success/10 text-success",
+  error: "bg-error/10 text-error",
+  warning: "bg-warning/10 text-warning",
+  info: "bg-info/10 text-info"
+};
+var variantClasses = {
+  solid: {
+    success: "bg-success text-text border-transparent shadow-[0_8px_32px_rgba(16,185,129,0.3)]",
+    error: "bg-error text-text border-transparent shadow-[0_8px_32px_rgba(239,68,68,0.3)]",
+    warning: "bg-warning text-text border-transparent shadow-[0_8px_32px_rgba(245,158,11,0.3)]",
+    info: "bg-info text-text border-transparent shadow-[0_8px_32px_rgba(59,130,246,0.3)]"
+  },
+  subtle: {
+    success: "bg-success/10 text-text border-success/25 shadow-[0_8px_32px_rgba(16,185,129,0.12)]",
+    error: "bg-error/10 text-text border-error/25 shadow-[0_8px_32px_rgba(239,68,68,0.12)]",
+    warning: "bg-warning/10 text-text border-warning/25 shadow-[0_8px_32px_rgba(245,158,11,0.12)]",
+    info: "bg-info/10 text-text border-info/25 shadow-[0_8px_32px_rgba(59,130,246,0.12)]"
+  },
+  "left-accent": {
+    success: "bg-surface border-border border-l-success shadow-[0_8px_24px_rgba(0,0,0,0.08)] text-text",
+    error: "bg-surface border-border border-l-error shadow-[0_8px_24px_rgba(0,0,0,0.08)] text-text",
+    warning: "bg-surface border-border border-l-warning shadow-[0_8px_24px_rgba(0,0,0,0.08)] text-text",
+    info: "bg-surface border-border border-l-info shadow-[0_8px_24px_rgba(0,0,0,0.08)] text-text"
+  }
+};
+var statusTitleColor = {
+  success: "text-success",
+  error: "text-error",
+  warning: "text-warning",
+  info: "text-info"
+};
+var Toaster = react.forwardRef((props, ref) => {
+  const {
+    title,
+    description,
+    status = "info",
+    variant = "solid",
+    isClosable = true,
+    onClose,
+    className
+  } = props;
+  const isSolid = variant === "solid";
+  const isLeftAccent = variant === "left-accent";
+  const iconBgClass = isSolid ? solidIconBg[status] : isLeftAccent ? accentIconBg[status] : subtleIconBg[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: chunkL5VQZZVR_cjs.cn(
+        "relative flex w-full min-w-80 max-w-sm items-start gap-3 px-4 py-3.5 rounded-xl border overflow-hidden transition-all duration-200",
+        isLeftAccent && "border-l-4 rounded-l-none",
+        variantClasses[variant][status],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkL5VQZZVR_cjs.cn(
+              "flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-lg mt-0.5",
+              iconBgClass
+            ),
+            children: statusIcons[status]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 pt-0.5", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: chunkL5VQZZVR_cjs.cn(
+                "text-sm font-bold leading-tight tracking-wide",
+                !isSolid && statusTitleColor[status]
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: chunkL5VQZZVR_cjs.cn(
+                "text-sm leading-relaxed mt-0.5",
+                isSolid ? "opacity-90" : "text-text-secondary"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        isClosable && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: chunkL5VQZZVR_cjs.cn(
+              "flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-md transition-all duration-150 active:scale-90",
+              isSolid ? "hover:bg-white/20 text-text-inverse" : "hover:bg-black/10 dark:hover:bg-white/10 text-text-secondary hover:text-text"
+            ),
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-4 h-4 stroke-2" })
+          }
+        )
+      ]
+    }
+  );
+});
+Toaster.displayName = "Toaster";
+
+exports.Toaster = Toaster;

package/dist/chunk-YOTCXSXL.mjs

@@ -0,0 +1,132 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef } from 'react';
+import { XMarkIcon, InformationCircleIcon, ExclamationTriangleIcon, ExclamationCircleIcon, CheckCircleIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var statusIcons = {
+  success: /* @__PURE__ */ jsx(CheckCircleIcon, { className: "w-5 h-5" }),
+  error: /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "w-5 h-5" }),
+  warning: /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "w-5 h-5" }),
+  info: /* @__PURE__ */ jsx(InformationCircleIcon, { className: "w-5 h-5" })
+};
+var solidIconBg = {
+  success: "bg-white/20",
+  error: "bg-white/20",
+  warning: "bg-white/20",
+  info: "bg-white/20"
+};
+var subtleIconBg = {
+  success: "bg-success/20 text-success",
+  error: "bg-error/20 text-error",
+  warning: "bg-warning/20 text-warning",
+  info: "bg-info/20 text-info"
+};
+var accentIconBg = {
+  success: "bg-success/10 text-success",
+  error: "bg-error/10 text-error",
+  warning: "bg-warning/10 text-warning",
+  info: "bg-info/10 text-info"
+};
+var variantClasses = {
+  solid: {
+    success: "bg-success text-text border-transparent shadow-[0_8px_32px_rgba(16,185,129,0.3)]",
+    error: "bg-error text-text border-transparent shadow-[0_8px_32px_rgba(239,68,68,0.3)]",
+    warning: "bg-warning text-text border-transparent shadow-[0_8px_32px_rgba(245,158,11,0.3)]",
+    info: "bg-info text-text border-transparent shadow-[0_8px_32px_rgba(59,130,246,0.3)]"
+  },
+  subtle: {
+    success: "bg-success/10 text-text border-success/25 shadow-[0_8px_32px_rgba(16,185,129,0.12)]",
+    error: "bg-error/10 text-text border-error/25 shadow-[0_8px_32px_rgba(239,68,68,0.12)]",
+    warning: "bg-warning/10 text-text border-warning/25 shadow-[0_8px_32px_rgba(245,158,11,0.12)]",
+    info: "bg-info/10 text-text border-info/25 shadow-[0_8px_32px_rgba(59,130,246,0.12)]"
+  },
+  "left-accent": {
+    success: "bg-surface border-border border-l-success shadow-[0_8px_24px_rgba(0,0,0,0.08)] text-text",
+    error: "bg-surface border-border border-l-error shadow-[0_8px_24px_rgba(0,0,0,0.08)] text-text",
+    warning: "bg-surface border-border border-l-warning shadow-[0_8px_24px_rgba(0,0,0,0.08)] text-text",
+    info: "bg-surface border-border border-l-info shadow-[0_8px_24px_rgba(0,0,0,0.08)] text-text"
+  }
+};
+var statusTitleColor = {
+  success: "text-success",
+  error: "text-error",
+  warning: "text-warning",
+  info: "text-info"
+};
+var Toaster = forwardRef((props, ref) => {
+  const {
+    title,
+    description,
+    status = "info",
+    variant = "solid",
+    isClosable = true,
+    onClose,
+    className
+  } = props;
+  const isSolid = variant === "solid";
+  const isLeftAccent = variant === "left-accent";
+  const iconBgClass = isSolid ? solidIconBg[status] : isLeftAccent ? accentIconBg[status] : subtleIconBg[status];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn(
+        "relative flex w-full min-w-80 max-w-sm items-start gap-3 px-4 py-3.5 rounded-xl border overflow-hidden transition-all duration-200",
+        isLeftAccent && "border-l-4 rounded-l-none",
+        variantClasses[variant][status],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-lg mt-0.5",
+              iconBgClass
+            ),
+            children: statusIcons[status]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pt-0.5", children: [
+          title && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm font-bold leading-tight tracking-wide",
+                !isSolid && statusTitleColor[status]
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm leading-relaxed mt-0.5",
+                isSolid ? "opacity-90" : "text-text-secondary"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        isClosable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: cn(
+              "flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-md transition-all duration-150 active:scale-90",
+              isSolid ? "hover:bg-white/20 text-text-inverse" : "hover:bg-black/10 dark:hover:bg-white/10 text-text-secondary hover:text-text"
+            ),
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-4 h-4 stroke-2" })
+          }
+        )
+      ]
+    }
+  );
+});
+Toaster.displayName = "Toaster";
+
+export { Toaster };