@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-H77YWN3L.mjs

@@ -0,0 +1,220 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { XMarkIcon } from '@heroicons/react/20/solid';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var solidClasses = {
+  primary: "bg-primary text-text-inverse shadow-sm shadow-primary/30",
+  secondary: "bg-secondary text-text shadow-sm shadow-secondary/30",
+  success: "bg-success text-text-inverse shadow-sm shadow-success/30",
+  error: "bg-error text-text-inverse shadow-sm shadow-error/30",
+  warning: "bg-warning text-text-inverse shadow-sm shadow-warning/30",
+  info: "bg-info text-text-inverse shadow-sm shadow-info/30",
+  accent: "bg-accent text-text-inverse shadow-sm shadow-accent/30",
+  gray: "bg-surface-secondary text-text-secondary shadow-sm",
+  blue: "bg-primary text-text-inverse shadow-sm shadow-primary/30",
+  green: "bg-success text-text-inverse shadow-sm shadow-success/30",
+  red: "bg-error text-text-inverse shadow-sm shadow-error/30",
+  yellow: "bg-warning text-text-inverse shadow-sm shadow-warning/30",
+  purple: "bg-purple-600 text-white shadow-sm shadow-purple-500/30",
+  pink: "bg-pink-500 text-white shadow-sm shadow-pink-500/30",
+  orange: "bg-orange-500 text-white shadow-sm shadow-orange-500/30",
+  cyan: "bg-cyan-500 text-white shadow-sm shadow-cyan-500/30",
+  teal: "bg-teal-500 text-white shadow-sm shadow-teal-500/30",
+  indigo: "bg-indigo-500 text-white shadow-sm shadow-indigo-500/30"
+};
+var softClasses = {
+  primary: "bg-primary/10 text-primary ring-1 ring-inset ring-primary/20",
+  secondary: "bg-secondary/10 text-secondary ring-1 ring-inset ring-secondary/20",
+  success: "bg-success/10 text-success ring-1 ring-inset ring-success/20",
+  error: "bg-error/10 text-error ring-1 ring-inset ring-error/20",
+  warning: "bg-warning/10 text-warning ring-1 ring-inset ring-warning/20",
+  info: "bg-info/10 text-info ring-1 ring-inset ring-info/20",
+  accent: "bg-accent/10 text-accent ring-1 ring-inset ring-accent/20",
+  gray: "bg-surface-secondary/60 text-text-secondary ring-1 ring-inset ring-border/40",
+  blue: "bg-primary/10 text-primary ring-1 ring-inset ring-primary/20",
+  green: "bg-success/10 text-success ring-1 ring-inset ring-success/20",
+  red: "bg-error/10 text-error ring-1 ring-inset ring-error/20",
+  yellow: "bg-warning/10 text-warning ring-1 ring-inset ring-warning/20",
+  purple: "bg-purple-500/10 text-purple-500 ring-1 ring-inset ring-purple-500/25",
+  pink: "bg-pink-500/10 text-pink-500 ring-1 ring-inset ring-pink-500/25",
+  orange: "bg-orange-500/10 text-orange-500 ring-1 ring-inset ring-orange-500/25",
+  cyan: "bg-cyan-500/10 text-cyan-500 ring-1 ring-inset ring-cyan-500/25",
+  teal: "bg-teal-500/10 text-teal-500 ring-1 ring-inset ring-teal-500/25",
+  indigo: "bg-indigo-500/10 text-indigo-500 ring-1 ring-inset ring-indigo-500/25"
+};
+var outlineClasses = {
+  primary: "border border-primary/60 text-primary bg-transparent",
+  secondary: "border border-secondary/60 text-secondary bg-transparent",
+  success: "border border-success/60 text-success bg-transparent",
+  error: "border border-error/60 text-error bg-transparent",
+  warning: "border border-warning/60 text-warning bg-transparent",
+  info: "border border-info/60 text-info bg-transparent",
+  accent: "border border-accent/60 text-accent bg-transparent",
+  gray: "border border-border text-text-secondary bg-transparent",
+  blue: "border border-primary/60 text-primary bg-transparent",
+  green: "border border-success/60 text-success bg-transparent",
+  red: "border border-error/60 text-error bg-transparent",
+  yellow: "border border-warning/60 text-warning bg-transparent",
+  purple: "border border-purple-500/60 text-purple-500 bg-transparent",
+  pink: "border border-pink-500/60 text-pink-500 bg-transparent",
+  orange: "border border-orange-500/60 text-orange-500 bg-transparent",
+  cyan: "border border-cyan-500/60 text-cyan-500 bg-transparent",
+  teal: "border border-teal-500/60 text-teal-500 bg-transparent",
+  indigo: "border border-indigo-500/60 text-indigo-500 bg-transparent"
+};
+var gradientClasses = {
+  primary: "bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/30",
+  secondary: "bg-gradient-to-r from-slate-500 to-slate-700 text-white shadow-sm shadow-slate-500/30",
+  success: "bg-gradient-to-r from-green-400 to-emerald-600 text-white shadow-sm shadow-green-500/30",
+  error: "bg-gradient-to-r from-red-500 to-rose-600 text-white shadow-sm shadow-red-500/30",
+  warning: "bg-gradient-to-r from-amber-400 to-orange-500 text-white shadow-sm shadow-amber-500/30",
+  info: "bg-gradient-to-r from-sky-400 to-blue-600 text-white shadow-sm shadow-blue-500/30",
+  accent: "bg-gradient-to-r from-cyan-400 to-sky-600 text-white shadow-sm shadow-cyan-500/30",
+  gray: "bg-gradient-to-r from-slate-400 to-slate-500 text-white shadow-sm",
+  blue: "bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/30",
+  green: "bg-gradient-to-r from-green-400 to-emerald-600 text-white shadow-sm shadow-green-500/30",
+  red: "bg-gradient-to-r from-red-500 to-rose-600 text-white shadow-sm shadow-red-500/30",
+  yellow: "bg-gradient-to-r from-amber-400 to-orange-500 text-white shadow-sm shadow-amber-500/30",
+  purple: "bg-gradient-to-r from-purple-500 to-violet-600 text-white shadow-sm shadow-purple-500/30",
+  pink: "bg-gradient-to-r from-pink-500 to-fuchsia-600 text-white shadow-sm shadow-pink-500/30",
+  orange: "bg-gradient-to-r from-orange-400 to-red-500 text-white shadow-sm shadow-orange-500/30",
+  cyan: "bg-gradient-to-r from-cyan-400 to-sky-500 text-white shadow-sm shadow-cyan-500/30",
+  teal: "bg-gradient-to-r from-teal-400 to-cyan-500 text-white shadow-sm shadow-teal-500/30",
+  indigo: "bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-sm shadow-indigo-500/30"
+};
+var dotColorClasses = {
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  success: "bg-success",
+  error: "bg-error",
+  warning: "bg-warning",
+  info: "bg-info",
+  accent: "bg-accent",
+  gray: "bg-slate-400",
+  blue: "bg-primary",
+  green: "bg-success",
+  red: "bg-error",
+  yellow: "bg-warning",
+  purple: "bg-purple-500",
+  pink: "bg-pink-500",
+  orange: "bg-orange-500",
+  cyan: "bg-cyan-500",
+  teal: "bg-teal-500",
+  indigo: "bg-indigo-500"
+};
+var variantMap = {
+  solid: (c) => solidClasses[c],
+  soft: (c) => softClasses[c],
+  outline: (c) => outlineClasses[c],
+  gradient: (c) => gradientClasses[c]
+};
+var sizeClasses = {
+  xs: "px-1.5 py-px  text-[10px] leading-4 gap-1",
+  sm: "px-2   py-0.5 text-xs     leading-4 gap-1",
+  md: "px-2.5 py-0.5 text-xs     leading-5 gap-1",
+  lg: "px-3   py-1   text-sm     leading-5 gap-1.5"
+};
+var dotSizeClasses = {
+  xs: "w-1.5 h-1.5",
+  sm: "w-1.5 h-1.5",
+  md: "w-2   h-2",
+  lg: "w-2.5 h-2.5"
+};
+var removeSizeClasses = {
+  xs: "w-3   h-3",
+  sm: "w-3   h-3",
+  md: "w-3.5 h-3.5",
+  lg: "w-4   h-4"
+};
+var shapeClasses = {
+  rounded: "rounded-md",
+  pill: "rounded-full",
+  square: "rounded-none"
+};
+function XIcon() {
+  return /* @__PURE__ */ jsx(XMarkIcon, { className: "w-full h-full", "aria-hidden": "true" });
+}
+function Badge({
+  children,
+  variant = "soft",
+  color = "blue",
+  size = "md",
+  shape = "pill",
+  icon,
+  trailingIcon,
+  onRemove,
+  pulse = false,
+  count,
+  maxCount = 99,
+  uppercase = false,
+  tracking = false,
+  as: Tag = "span",
+  className,
+  ...rest
+}) {
+  const isDot = variant === "dot";
+  const colorClass = isDot ? softClasses[color] : variantMap[variant](color);
+  const countLabel = count !== void 0 ? count > maxCount ? `${maxCount.toString()}+` : String(count) : null;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      className: cn(
+        // base
+        "inline-flex items-center font-medium leading-none select-none whitespace-nowrap",
+        "transition-all duration-150 ease-out",
+        sizeClasses[size],
+        shapeClasses[shape],
+        colorClass,
+        uppercase && "uppercase",
+        tracking && "tracking-wide",
+        // clickable cursor when role="button" or Tag is 'button'/'a'
+        (Tag === "button" || Tag === "a") && "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: [
+        isDot && /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", "aria-hidden": "true", children: [
+          pulse && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute inset-0 rounded-full animate-ping opacity-60",
+                dotColorClasses[color]
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("rounded-full shrink-0", dotSizeClasses[size], dotColorClasses[color])
+            }
+          )
+        ] }),
+        !isDot && icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 inline-flex", children: icon }),
+        countLabel ?? children,
+        !isDot && trailingIcon != null && onRemove == null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 inline-flex", children: trailingIcon }),
+        onRemove != null && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: cn(
+              "inline-flex items-center justify-center rounded-full shrink-0 -mr-0.5",
+              "opacity-70 hover:opacity-100",
+              "hover:bg-black/10 dark:hover:bg-white/15",
+              "transition-all duration-100",
+              removeSizeClasses[size]
+            ),
+            children: /* @__PURE__ */ jsx(XIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Badge };

package/dist/chunk-HIWJDLIS.cjs

@@ -0,0 +1,124 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var solid = require('@heroicons/react/24/solid');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  "2xs": "w-4 h-4 text-[10px]",
+  xs: "w-6 h-6 text-xs",
+  sm: "w-8 h-8 text-sm",
+  md: "w-10 h-10 text-base",
+  lg: "w-12 h-12 text-lg",
+  xl: "w-14 h-14 text-xl",
+  "2xl": "w-16 h-16 text-2xl",
+  "3xl": "w-20 h-20 text-3xl",
+  "4xl": "w-24 h-24 text-4xl"
+};
+var variantClasses = {
+  circle: "rounded-full",
+  square: "rounded-none",
+  rounded: "rounded-md"
+};
+var stateBorderClasses = {
+  default: "ring-0",
+  error: "ring-2 ring-error ring-offset-2 ring-offset-surface",
+  success: "ring-2 ring-success ring-offset-2 ring-offset-surface",
+  warning: "ring-2 ring-warning ring-offset-2 ring-offset-surface",
+  offline: "ring-2 ring-border ring-offset-2 ring-offset-surface",
+  online: "ring-2 ring-success ring-offset-2 ring-offset-surface",
+  busy: "ring-2 ring-error ring-offset-2 ring-offset-surface",
+  away: "ring-2 ring-warning ring-offset-2 ring-offset-surface"
+};
+var stateBadgeClasses = {
+  default: "hidden",
+  error: "bg-error",
+  success: "bg-success",
+  warning: "bg-warning",
+  offline: "bg-border",
+  online: "bg-success",
+  busy: "bg-error",
+  away: "bg-warning"
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0]?.substring(0, 2).toUpperCase() ?? "";
+  const first = parts[0];
+  const last = parts[parts.length - 1];
+  return `${first?.[0] ?? ""}${last?.[0] ?? ""}`.toUpperCase();
+}
+var Avatar = react.forwardRef(function Avatar2({
+  size = "md",
+  variant = "circle",
+  state = "default",
+  stateType = "border",
+  fallback,
+  alt,
+  src,
+  className,
+  containerClassName,
+  fallbackClassName,
+  ...rest
+}, ref) {
+  const [hasError, setHasError] = react.useState(false);
+  const showFallback = typeof src !== "string" || src.length === 0 || hasError;
+  let initial = "";
+  if (typeof fallback === "string") {
+    initial = getInitials(fallback);
+  } else if (typeof alt === "string" && alt.length > 0) {
+    initial = getInitials(alt);
+  }
+  const renderedFallback = typeof fallback === "string" || typeof fallback === "undefined" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex h-full w-full items-center justify-center font-bold text-text-muted",
+        fallbackClassName
+      ),
+      children: initial || /* @__PURE__ */ jsxRuntime.jsx(solid.UserIcon, { className: "h-3/5 w-3/5 text-text-muted/40", "aria-hidden": "true" })
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkL5VQZZVR_cjs.cn("flex h-full w-full items-center justify-center", fallbackClassName), children: fallback });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkL5VQZZVR_cjs.cn("relative inline-block", containerClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunkL5VQZZVR_cjs.cn(
+          "relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-surface-secondary",
+          sizeClasses[size],
+          variantClasses[variant],
+          stateType === "border" ? stateBorderClasses[state] : "",
+          className
+        ),
+        children: showFallback ? renderedFallback : /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt,
+            onError: () => {
+              setHasError(true);
+            },
+            className: "h-full w-full object-cover",
+            ...rest
+          }
+        )
+      }
+    ),
+    stateType === "badge" && state !== "default" && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: chunkL5VQZZVR_cjs.cn(
+          "absolute bottom-0 right-0 block rounded-full border-2 border-surface",
+          stateBadgeClasses[state],
+          size === "2xs" || size === "xs" ? "h-2 w-2" : size === "sm" ? "h-2.5 w-2.5" : size === "md" ? "h-3 w-3" : size === "lg" ? "h-3.5 w-3.5" : size === "xl" ? "h-4 w-4" : size === "2xl" ? "h-4.5 w-4.5" : size === "3xl" ? "h-5 w-5" : "h-6 w-6",
+          variant === "square" ? "-translate-x-1/2 -translate-y-1/2" : ""
+        )
+      }
+    )
+  ] });
+});
+Avatar.displayName = "Avatar";
+
+exports.Avatar = Avatar;

package/dist/chunk-HQGDSOSN.mjs

@@ -0,0 +1,274 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full w-full h-full m-0 rounded-none"
+};
+var sideSheetWidthClasses = {
+  xs: "w-64",
+  sm: "w-80",
+  md: "w-96",
+  lg: "w-[30rem]",
+  xl: "w-[36rem]",
+  "2xl": "w-[42rem]",
+  "3xl": "w-[48rem]",
+  "4xl": "w-[56rem]",
+  "5xl": "w-[64rem]",
+  "6xl": "w-[72rem]",
+  "7xl": "w-[80rem]",
+  full: "w-full"
+};
+var variantClasses = {
+  default: "bg-surface border border-border shadow-[0_20px_60px_-10px_rgba(0,0,0,0.2),0_8px_20px_-8px_rgba(0,0,0,0.1)]",
+  glass: "bg-white/10 dark:bg-black/20 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-[0_25px_50px_-12px_rgba(0,0,0,0.4)]",
+  flat: "bg-surface shadow-[0_4px_24px_rgba(0,0,0,0.08)]"
+};
+var overlayPositionClasses = {
+  top: "items-start pt-16",
+  center: "items-center",
+  bottom: "items-end pb-0",
+  left: "items-stretch justify-start p-0",
+  right: "items-stretch justify-end p-0"
+};
+var contentPositionClasses = {
+  top: "",
+  center: "",
+  bottom: "rounded-b-none w-full max-w-full",
+  left: "rounded-l-none rounded-r-2xl h-full max-h-full my-0",
+  right: "rounded-r-none rounded-l-2xl h-full max-h-full my-0"
+};
+var Modal = function Modal2({
+  isOpen,
+  onClose,
+  children,
+  size = "md",
+  variant = "default",
+  position = "center",
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  trapFocus = true,
+  lockScroll = true,
+  contentClassName,
+  overlayClassName,
+  showBackdrop = true,
+  ariaLabel,
+  ariaLabelledby,
+  ariaDescribedby
+}) {
+  const modalRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  useEffect(() => {
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement;
+      if (lockScroll) {
+        document.body.style.overflow = "hidden";
+      }
+      const handleKeyDown = (e) => {
+        if (closeOnEsc && e.key === "Escape") {
+          handleClose();
+          return;
+        }
+        if (trapFocus && e.key === "Tab") {
+          const focusableElements = modalRef.current?.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          if (!focusableElements || focusableElements.length === 0) return;
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+          if (e.shiftKey) {
+            if (document.activeElement === firstElement) {
+              lastElement.focus();
+              e.preventDefault();
+            }
+          } else {
+            if (document.activeElement === lastElement) {
+              firstElement.focus();
+              e.preventDefault();
+            }
+          }
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      setTimeout(() => {
+        const firstFocusable = modalRef.current?.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (firstFocusable != null) {
+          firstFocusable.focus();
+        } else {
+          modalRef.current?.focus();
+        }
+      }, 50);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        if (lockScroll) {
+          document.body.style.overflow = "";
+        }
+        previousFocusRef.current?.focus();
+      };
+    }
+    return void 0;
+  }, [isOpen, closeOnEsc, handleClose, lockScroll, trapFocus]);
+  if (!isOpen) return null;
+  const isBottomSheet = position === "bottom";
+  const isLeftSheet = position === "left";
+  const isRightSheet = position === "right";
+  const isSideSheet = isLeftSheet || isRightSheet;
+  let entryAnimation = "animate-[modal-zoom-in_200ms_cubic-bezier(0.34,1.56,0.64,1)_forwards]";
+  if (isBottomSheet)
+    entryAnimation = "animate-[modal-slide-up_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]";
+  if (isLeftSheet)
+    entryAnimation = "animate-[modal-slide-right_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]";
+  if (isRightSheet)
+    entryAnimation = "animate-[modal-slide-left_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]";
+  const sizeClass = isSideSheet ? sideSheetWidthClasses[size] : sizeClasses[size];
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "presentation",
+        className: cn(
+          "fixed inset-0 z-[1050] flex justify-center",
+          // Side sheets don't scroll — they're full-height
+          !isSideSheet && "overflow-y-auto p-4",
+          showBackdrop && "bg-black/50 backdrop-blur-[3px]",
+          "animate-[modal-overlay-in_200ms_ease-out_forwards]",
+          overlayPositionClasses[position],
+          overlayClassName
+        ),
+        onClick: (e) => {
+          if (closeOnOverlayClick && e.target === e.currentTarget) {
+            handleClose();
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: modalRef,
+            role: "dialog",
+            tabIndex: -1,
+            "aria-modal": "true",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            className: cn(
+              // Base
+              "relative flex flex-col",
+              // Standard dialogs are centered with max-height
+              !isSideSheet && !isBottomSheet && size !== "full" && "w-full mx-auto max-h-[90vh] my-4 rounded-2xl",
+              // Bottom sheet
+              isBottomSheet && "rounded-2xl",
+              // Side sheets: no mx-auto, no max-height
+              isSideSheet && "mx-0",
+              // Entry animation
+              entryAnimation,
+              // Variant
+              variantClasses[variant],
+              // Size (width for side sheets, max-width otherwise)
+              sizeClass,
+              // Position-specific shape overrides
+              contentPositionClasses[position],
+              contentClassName
+            ),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+function ModalHeader({
+  children,
+  className,
+  icon,
+  description
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative px-6 py-5 border-b border-border/60 flex-shrink-0", className), children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "mb-3 w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary", children: icon }),
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-text leading-tight tracking-tight", children }),
+    description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-muted leading-relaxed", children: description })
+  ] });
+}
+function ModalBody({
+  children,
+  className,
+  noPadding = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex-1 overflow-y-auto text-text-secondary text-sm leading-relaxed",
+        !noPadding && "px-6 py-5",
+        className
+      ),
+      children
+    }
+  );
+}
+var footerAlignClasses = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+function ModalFooter({
+  children,
+  className,
+  align = "right"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex-shrink-0 px-6 py-4 border-t border-border/60 bg-surface-secondary/30 flex flex-wrap items-center gap-3 rounded-b-2xl",
+        footerAlignClasses[align],
+        className
+      ),
+      children
+    }
+  );
+}
+function ModalCloseButton({ onClick, className }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "absolute top-4 right-4 z-10",
+        "w-8 h-8 flex items-center justify-center rounded-lg",
+        "text-text-muted hover:text-text",
+        "bg-transparent hover:bg-hover",
+        "transition-all duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        className
+      ),
+      "aria-label": "Close modal",
+      children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-4 h-4", strokeWidth: 2 })
+    }
+  );
+}
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+Modal.CloseButton = ModalCloseButton;
+
+export { Modal, ModalBody, ModalCloseButton, ModalFooter, ModalHeader };