@memelabui/ui 0.3.0 → 0.4.0

package/README.md

@@ -51,7 +51,7 @@ function App() {
 }
 ```
 
-## Components (43 exports)
+## Components (50+ exports)
 
 ### Form
 
@@ -63,7 +63,7 @@ function App() {
 | `Textarea` | Multiline text input with label/error |
 | `Checkbox` | Custom checkbox with indeterminate support |
 | `RadioGroup` / `RadioItem` | Compound radio button group |
-| `Toggle` | Switch toggle (sm/md sizes) |
+| `Toggle` | Switch toggle (sm/md sizes) with `busy` spinner state |
 | `Slider` | Range input with custom track/thumb and value display |
 | `TagInput` | Tag input with Enter/comma/paste, dedup, maxTags |
 | `ColorInput` | Hex color picker with swatch + text input |
@@ -82,6 +82,7 @@ function App() {
 | Component | Description |
 |-----------|-------------|
 | `Card` | Surface or glass card container |
+| `SectionCard` | Settings section card with title, description, right slot, overlay slot |
 | `Badge` / `Pill` | Status badges (neutral, primary, success, danger, warning, accent) |
 | `StatCard` | Dashboard stat card with value, label, icon, trend indicator |
 | `Table` / `TableHeader` / `TableBody` / `TableRow` / `TableHead` / `TableCell` | Styled table primitives |
@@ -93,6 +94,16 @@ function App() {
 | `DropZone` | Drag & drop file upload area with accept filter |
 | `Avatar` | Circular avatar with image + initials fallback |
 | `Divider` | Horizontal/vertical divider with optional label |
+| `ActiveFilterPills` | Dismissible filter pill row with "Clear all" action |
+| `DotIndicator` | Dot-based remaining count with urgency colors |
+
+### Progress & Status
+
+| Component | Description |
+|-----------|-------------|
+| `ProgressBar` | Horizontal progress bar with variants and sizes |
+| `CooldownRing` | SVG circular countdown timer with color changes and pulse |
+| `StageProgress` | Multi-stage process indicator with shimmer animation |
 
 ### Navigation
 
@@ -109,6 +120,7 @@ function App() {
 | `ConfirmDialog` | Confirmation modal with cancel/confirm actions |
 | `Tooltip` | Hover/focus tooltip with portal positioning |
 | `Dropdown` | Compound menu (Trigger, Menu, Item, Separator) |
+| `MutationOverlay` | Saving/saved/error status overlay for cards |
 
 ### Layout
 
@@ -126,7 +138,6 @@ function App() {
 | `ToastProvider` / `useToast` | Toast notification system with variants |
 | `Alert` | Inline notification banner (info, success, warning, error) |
 | `CopyField` | Read-only field with copy button and optional masking |
-| `ProgressBar` | Horizontal progress bar with variants and sizes |
 
 ### Hooks
 

package/dist/index.cjs

@@ -558,7 +558,7 @@ var thumbSize = {
   sm: { base: "w-4 h-4", translate: "translate-x-4" },
   md: { base: "w-5 h-5", translate: "translate-x-5" }
 };
-var Toggle = React.forwardRef(function Toggle2({ checked, onChange, disabled, label, size = "md", id: externalId, "aria-label": ariaLabel }, ref) {
+var Toggle = React.forwardRef(function Toggle2({ checked, onChange, disabled, busy, label, size = "md", id: externalId, "aria-label": ariaLabel }, ref) {
   const generatedId = React.useId();
   const toggleId = externalId || generatedId;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -571,7 +571,8 @@ var Toggle = React.forwardRef(function Toggle2({ checked, onChange, disabled, la
         role: "switch",
         "aria-checked": checked,
         "aria-label": ariaLabel || label,
-        disabled,
+        disabled: disabled || busy,
+        "aria-busy": busy || void 0,
         onClick: () => onChange(!checked),
         className: cn(
           "relative rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface",
@@ -583,9 +584,18 @@ var Toggle = React.forwardRef(function Toggle2({ checked, onChange, disabled, la
           "span",
           {
             className: cn(
-              "absolute top-0.5 left-0.5 rounded-full bg-white transition-transform duration-200",
+              "absolute top-0.5 left-0.5 rounded-full bg-white transition-transform duration-200 flex items-center justify-center",
               thumbSize[size].base,
               checked ? thumbSize[size].translate : "translate-x-0"
+            ),
+            children: busy && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "border-2 border-primary/30 border-t-primary rounded-full animate-spin",
+                  size === "sm" ? "w-2.5 h-2.5" : "w-3 h-3"
+                )
+              }
             )
           }
         )
@@ -2257,6 +2267,309 @@ function ProgressBar({
     )
   ] });
 }
+var sizeMap = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-12 h-12 text-sm",
+  lg: "w-16 h-16 text-base"
+};
+var strokeWidthMap = {
+  sm: 3,
+  md: 3.5,
+  lg: 4
+};
+var RADIUS = 15.9155;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function CooldownRing({
+  duration,
+  remaining,
+  size = "md",
+  className
+}) {
+  const fraction = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0;
+  const offset = CIRCUMFERENCE * (1 - fraction);
+  const color = fraction > 0.5 ? "text-primary" : fraction > 0.25 ? "text-amber-500" : "text-rose-500";
+  const pulse = remaining <= 10 && remaining > 0;
+  const strokeWidth = strokeWidthMap[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex items-center justify-center", sizeMap[size], className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        viewBox: "0 0 36 36",
+        className: cn("w-full h-full -rotate-90", color, pulse && "animate-pulse"),
+        "aria-label": `Cooldown: ${remaining} seconds remaining`,
+        role: "img",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: "18",
+              cy: "18",
+              r: RADIUS,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              className: "text-white/10"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: "18",
+              cy: "18",
+              r: RADIUS,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              strokeDasharray: `${CIRCUMFERENCE} ${CIRCUMFERENCE}`,
+              strokeDashoffset: offset,
+              strokeLinecap: "round",
+              style: { transition: "stroke-dashoffset 0.6s ease" }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "absolute font-semibold tabular-nums text-white select-none",
+        style: { lineHeight: 1 },
+        children: Math.max(0, Math.ceil(remaining))
+      }
+    )
+  ] });
+}
+function StageProgress({ stages, activeStage, className }) {
+  const clampedActive = Math.max(0, Math.min(activeStage, stages.length - 1));
+  const fillPercent = stages.length <= 1 ? 100 : clampedActive / (stages.length - 1) * 100;
+  const isComplete = clampedActive >= stages.length - 1;
+  const isAnimating = !isComplete;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between", children: stages.map((stage, index) => {
+      const isCompleted = index < clampedActive;
+      const isActive = index === clampedActive;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1.5 text-xs font-medium transition-colors duration-300",
+            isCompleted && "text-emerald-400",
+            isActive && "text-white",
+            !isCompleted && !isActive && "text-white/40"
+          ),
+          children: [
+            isCompleted ? (
+              // Completed: emerald check circle
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full bg-emerald-400/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "h-2.5 w-2.5 text-emerald-400",
+                  viewBox: "0 0 10 10",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M2 5.5L4 7.5L8 3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              ) })
+            ) : isActive ? (
+              // Active: primary dot with ring
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[var(--ml-primary)] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--ml-primary)]" }) })
+            ) : (
+              // Upcoming: hollow dim dot
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-white/20 bg-transparent" })
+            ),
+            stage
+          ]
+        },
+        stage
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative mt-3 h-1.5 w-full overflow-hidden rounded-full bg-white/10",
+        role: "progressbar",
+        "aria-valuenow": clampedActive,
+        "aria-valuemin": 0,
+        "aria-valuemax": stages.length - 1,
+        "aria-label": `Stage ${clampedActive + 1} of ${stages.length}: ${stages[clampedActive]}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-gradient-to-r from-[var(--ml-accent)] to-[var(--ml-primary)] transition-[width] duration-500 ease-in-out",
+            style: { width: `${fillPercent}%` },
+            children: isAnimating && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "pointer-events-none absolute inset-0 -translate-x-full animate-[ml-shimmer_2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/30 to-transparent",
+                "aria-hidden": "true"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function getUrgencyClasses(remaining, max) {
+  const ratio = max > 0 ? remaining / max : 0;
+  if (ratio > 0.5) {
+    return {
+      filled: "bg-emerald-400",
+      empty: "bg-emerald-400/30",
+      label: "text-emerald-400"
+    };
+  }
+  if (ratio > 0.25) {
+    return {
+      filled: "bg-amber-400",
+      empty: "bg-amber-400/30",
+      label: "text-amber-400"
+    };
+  }
+  return {
+    filled: "bg-rose-400",
+    empty: "bg-rose-400/30",
+    label: "text-rose-400"
+  };
+}
+function DotIndicator({
+  remaining,
+  max,
+  showLabel = false,
+  labelFormat,
+  className
+}) {
+  const clampedRemaining = Math.max(0, Math.min(remaining, max));
+  const used = max - clampedRemaining;
+  const urgency = getUrgencyClasses(clampedRemaining, max);
+  const defaultLabel = `${clampedRemaining}/${max}`;
+  const label = labelFormat ? labelFormat(clampedRemaining, max) : defaultLabel;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex items-center gap-1",
+        role: "meter",
+        "aria-valuenow": clampedRemaining,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label,
+        children: Array.from({ length: max }, (_, index) => {
+          const isFilled = index < used;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "h-2 w-2 rounded-full transition-colors duration-300",
+                isFilled ? urgency.filled : urgency.empty
+              ),
+              "aria-hidden": "true"
+            },
+            index
+          );
+        })
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium tabular-nums", urgency.label), children: label })
+  ] });
+}
+function ActiveFilterPills({
+  filters,
+  onRemove,
+  onClearAll,
+  clearAllLabel = "Clear all",
+  className
+}) {
+  if (filters.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center gap-1.5", className), children: [
+    filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-1 text-xs text-white/80 ring-1 ring-white/10",
+        children: [
+          filter.label,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(filter.key),
+              className: "ml-0.5 text-white/50 transition-colors duration-150 hover:text-white focus:outline-none focus-visible:text-white",
+              "aria-label": `Remove filter: ${filter.label}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "h-3 w-3",
+                  viewBox: "0 0 12 12",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M9 3L3 9M3 3L9 9",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      },
+      filter.key
+    )),
+    filters.length > 1 && onClearAll && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClearAll,
+        className: "text-xs text-white/40 underline-offset-2 transition-colors duration-150 hover:text-white/70 focus:outline-none focus-visible:text-white/70",
+        children: clearAllLabel
+      }
+    )
+  ] });
+}
+function SectionCard({
+  title,
+  description,
+  right,
+  overlay,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative bg-white/5 ring-1 ring-white/10 rounded-xl overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3 px-5 py-4 border-b border-white/[0.06]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-white", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-white/40 mt-0.5", children: description })
+          ] }),
+          right && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: right })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", children }),
+        overlay
+      ]
+    }
+  );
+}
 var maxWidthClass = {
   sm: "max-w-2xl",
   md: "max-w-4xl",
@@ -2905,7 +3218,120 @@ function useToast() {
   }
   return ctx;
 }
+function SavingIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 animate-spin text-white/70",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      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 12h4z"
+          }
+        )
+      ]
+    }
+  );
+}
+function SavedIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 text-green-400",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12l2 2 4-4" })
+      ]
+    }
+  );
+}
+function ErrorIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 text-red-400",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 9l-6 6M9 9l6 6" })
+      ]
+    }
+  );
+}
+var statusConfig = {
+  saving: {
+    icon: SavingIcon,
+    defaultText: "Saving...",
+    textClass: "text-white/70"
+  },
+  saved: {
+    icon: SavedIcon,
+    defaultText: "Saved",
+    textClass: "text-green-400"
+  },
+  error: {
+    icon: ErrorIcon2,
+    defaultText: "Error",
+    textClass: "text-red-400"
+  }
+};
+function MutationOverlay({
+  status,
+  savingText,
+  savedText,
+  errorText,
+  className
+}) {
+  if (status === "idle") return null;
+  const config = statusConfig[status];
+  const Icon = config.icon;
+  const text = status === "saving" ? savingText ?? config.defaultText : status === "saved" ? savedText ?? config.defaultText : errorText ?? config.defaultText;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 z-10 flex items-center justify-center",
+        "bg-surface-50/80 backdrop-blur-sm",
+        "transition-opacity duration-200",
+        className
+      ),
+      role: "status",
+      "aria-live": "polite",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", config.textClass), children: text })
+      ] })
+    }
+  );
+}
 
+exports.ActiveFilterPills = ActiveFilterPills;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
@@ -2915,9 +3341,11 @@ exports.Checkbox = Checkbox;
 exports.CollapsibleSection = CollapsibleSection;
 exports.ColorInput = ColorInput;
 exports.ConfirmDialog = ConfirmDialog;
+exports.CooldownRing = CooldownRing;
 exports.CopyField = CopyField;
 exports.DashboardLayout = DashboardLayout;
 exports.Divider = Divider;
+exports.DotIndicator = DotIndicator;
 exports.DropZone = DropZone;
 exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem;
@@ -2929,6 +3357,7 @@ exports.FormField = FormField;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Modal = Modal;
+exports.MutationOverlay = MutationOverlay;
 exports.Navbar = Navbar;
 exports.PageShell = PageShell;
 exports.Pagination = Pagination;
@@ -2938,11 +3367,13 @@ exports.ProgressButton = ProgressButton;
 exports.RadioGroup = RadioGroup;
 exports.RadioItem = RadioItem;
 exports.SearchInput = SearchInput;
+exports.SectionCard = SectionCard;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
+exports.StageProgress = StageProgress;
 exports.StatCard = StatCard;
 exports.Stepper = Stepper;
 exports.Tab = Tab;

package/dist/index.d.cts

@@ -158,6 +158,7 @@ type ToggleProps = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
+    busy?: boolean;
     label?: string;
     size?: ToggleSize;
     id?: string;
@@ -473,6 +474,56 @@ type ProgressBarProps = {
 };
 declare function ProgressBar({ value, max, variant, label, showValue, size, className, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
 
+type CooldownRingSize = 'sm' | 'md' | 'lg';
+type CooldownRingProps = {
+    duration: number;
+    remaining: number;
+    onTick?: () => void;
+    onComplete?: () => void;
+    size?: CooldownRingSize;
+    className?: string;
+};
+declare function CooldownRing({ duration, remaining, size, className, }: CooldownRingProps): react_jsx_runtime.JSX.Element;
+
+type StageProgressProps = {
+    stages: string[];
+    activeStage: number;
+    className?: string;
+};
+declare function StageProgress({ stages, activeStage, className }: StageProgressProps): react_jsx_runtime.JSX.Element;
+
+type DotIndicatorProps = {
+    remaining: number;
+    max: number;
+    showLabel?: boolean;
+    labelFormat?: (remaining: number, max: number) => string;
+    className?: string;
+};
+declare function DotIndicator({ remaining, max, showLabel, labelFormat, className, }: DotIndicatorProps): react_jsx_runtime.JSX.Element;
+
+type FilterPill = {
+    key: string;
+    label: string;
+};
+type ActiveFilterPillsProps = {
+    filters: FilterPill[];
+    onRemove: (key: string) => void;
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    className?: string;
+};
+declare function ActiveFilterPills({ filters, onRemove, onClearAll, clearAllLabel, className, }: ActiveFilterPillsProps): react_jsx_runtime.JSX.Element | null;
+
+type SectionCardProps = {
+    title: string;
+    description?: string;
+    right?: ReactNode;
+    overlay?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+declare function SectionCard({ title, description, right, overlay, children, className, }: SectionCardProps): react_jsx_runtime.JSX.Element;
+
 type PageShellVariant = 'plain' | 'glass' | 'minimal';
 type PageShellProps = {
     header?: ReactNode;
@@ -569,4 +620,14 @@ type ToastContextValue = {
 declare function ToastProvider({ children, position, maxToasts }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 declare function useToast(): ToastContextValue;
 
-export { Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, Navbar, type NavbarProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, type UseClipboardReturn, type UseDisclosureReturn, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useMediaQuery, useToast };
+type MutationOverlayStatus = 'idle' | 'saving' | 'saved' | 'error';
+type MutationOverlayProps = {
+    status: MutationOverlayStatus;
+    savingText?: string;
+    savedText?: string;
+    errorText?: string;
+    className?: string;
+};
+declare function MutationOverlay({ status, savingText, savedText, errorText, className, }: MutationOverlayProps): react_jsx_runtime.JSX.Element | null;
+
+export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, type FilterPill, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, type UseClipboardReturn, type UseDisclosureReturn, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useMediaQuery, useToast };