@cytario/design 1.12.0 → 1.13.0

package/dist/index.js

@@ -2269,6 +2269,424 @@ function StorageConnectionCard({
   return /* @__PURE__ */ jsx30("div", { className: baseStyles, children: cardContent });
 }
 
+// src/components/Badge/Badge.tsx
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+var variantStyles4 = {
+  neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
+  purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
+  teal: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]",
+  rose: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]",
+  slate: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]",
+  green: "bg-[var(--color-badge-green-bg)] text-[var(--color-badge-green-text)]",
+  amber: "bg-[var(--color-badge-amber-bg)] text-[var(--color-badge-amber-text)]"
+};
+var sizeStyles7 = {
+  sm: "px-1.5 py-0.5",
+  md: "px-2 py-0.5"
+};
+var iconSizeMap4 = {
+  sm: 12,
+  md: 14
+};
+function Badge({
+  children,
+  variant = "neutral",
+  size = "sm",
+  icon: IconComponent,
+  className
+}) {
+  return /* @__PURE__ */ jsxs21(
+    "span",
+    {
+      className: twMerge8(
+        "inline-flex items-center gap-1 rounded-[var(--border-radius-full)]",
+        "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
+        variantStyles4[variant],
+        sizeStyles7[size],
+        className
+      ),
+      children: [
+        IconComponent && /* @__PURE__ */ jsx31(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/Card/Card.tsx
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+var paddingStyles = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+function Card({
+  children,
+  header,
+  footer,
+  padding = "md",
+  href,
+  interactive = false,
+  className
+}) {
+  const isInteractive = interactive || !!href;
+  const containerClass = twMerge9(
+    "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] overflow-hidden shadow-sm",
+    isInteractive && "transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] cursor-pointer",
+    href && "block focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    className
+  );
+  const content = /* @__PURE__ */ jsxs22(Fragment9, { children: [
+    header && /* @__PURE__ */ jsx32(
+      "div",
+      {
+        className: twMerge9(
+          "border-b border-[var(--color-border-default)]",
+          paddingStyles[padding]
+        ),
+        children: header
+      }
+    ),
+    /* @__PURE__ */ jsx32("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx32(
+      "div",
+      {
+        className: twMerge9(
+          "border-t border-[var(--color-border-default)]",
+          paddingStyles[padding]
+        ),
+        children: footer
+      }
+    )
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx32("a", { href, className: containerClass, children: content });
+  }
+  return /* @__PURE__ */ jsx32("div", { className: containerClass, children: content });
+}
+
+// src/components/DeltaIndicator/DeltaIndicator.tsx
+import { ArrowUp, ArrowDown, Minus } from "lucide-react";
+import { twMerge as twMerge10 } from "tailwind-merge";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+function getDirection(current, previous) {
+  const diff = current - previous;
+  if (diff > 0) return "increase";
+  if (diff < 0) return "decrease";
+  return "flat";
+}
+function formatCurrency(value) {
+  const abs = Math.abs(value);
+  const sign = value >= 0 ? "+" : "-";
+  if (abs < 1e3) {
+    return `${sign}$${abs.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  }
+  return `${sign}$${abs.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
+}
+function formatPercentage(current, previous) {
+  if (previous === 0) return null;
+  const pct = (current - previous) / Math.abs(previous) * 100;
+  const sign = pct >= 0 ? "+" : "";
+  return `${sign}${pct.toFixed(1)}%`;
+}
+var directionColors = {
+  increase: "text-[var(--color-delta-increase-text)]",
+  decrease: "text-[var(--color-delta-decrease-text)]",
+  flat: "text-[var(--color-delta-flat-text)]"
+};
+var reverseDirectionColors = {
+  increase: "text-[var(--color-delta-decrease-text)]",
+  decrease: "text-[var(--color-delta-increase-text)]",
+  flat: "text-[var(--color-delta-flat-text)]"
+};
+var directionIcons = {
+  increase: ArrowUp,
+  decrease: ArrowDown,
+  flat: Minus
+};
+var directionBgColors = {
+  increase: "bg-[var(--color-delta-increase-bg)]",
+  decrease: "bg-[var(--color-delta-decrease-bg)]",
+  flat: "bg-[var(--color-delta-flat-bg)]"
+};
+function DeltaIndicator({
+  current,
+  previous,
+  format = "combined",
+  mode = "inline",
+  label,
+  reverseColor = false,
+  unavailable = false,
+  unavailableText = "N/A",
+  className
+}) {
+  if (unavailable) {
+    return /* @__PURE__ */ jsxs23(
+      "span",
+      {
+        className: twMerge10(
+          "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
+          "text-[var(--color-text-tertiary)]",
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx33("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+          unavailableText
+        ]
+      }
+    );
+  }
+  const diff = current - previous;
+  const direction = getDirection(current, previous);
+  const colorStyles = reverseColor ? reverseDirectionColors[direction] : directionColors[direction];
+  const IconComponent = directionIcons[direction];
+  const isNew = previous === 0 && current > 0;
+  let valueText;
+  if (format === "currency") {
+    valueText = formatCurrency(diff);
+    if (isNew) valueText = `${formatCurrency(diff)} (new)`;
+  } else if (format === "percentage") {
+    const pct = formatPercentage(current, previous);
+    valueText = pct ?? formatCurrency(diff);
+    if (isNew) valueText = "New";
+  } else {
+    const pct = formatPercentage(current, previous);
+    if (isNew) {
+      valueText = `${formatCurrency(diff)} (new)`;
+    } else if (pct) {
+      valueText = `${formatCurrency(diff)} (${pct})`;
+    } else {
+      valueText = formatCurrency(diff);
+    }
+  }
+  const isPill = mode === "pill";
+  return /* @__PURE__ */ jsxs23(
+    "span",
+    {
+      className: twMerge10(
+        "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
+        colorStyles,
+        isPill && [
+          "rounded-[var(--border-radius-full)] px-2 py-0.5",
+          "text-[length:var(--font-size-xs)]",
+          directionBgColors[direction]
+        ],
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx33("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+        /* @__PURE__ */ jsx33(IconComponent, { size: 14, "aria-hidden": true }),
+        valueText
+      ]
+    }
+  );
+}
+
+// src/components/ProgressBar/ProgressBar.tsx
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+var fillStyles = {
+  brand: "bg-[var(--color-progress-fill)]",
+  success: "bg-[var(--color-progress-fill-success)]",
+  warning: "bg-[var(--color-progress-fill-warning)]",
+  danger: "bg-[var(--color-progress-fill-danger)]",
+  neutral: "bg-[var(--color-text-secondary)]"
+};
+var sizeStyles8 = {
+  sm: "h-1.5",
+  md: "h-3",
+  lg: "h-4"
+};
+function ProgressBar({
+  value,
+  label,
+  description,
+  variant = "brand",
+  size = "md",
+  showValue = true,
+  className
+}) {
+  const clampedValue = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsxs24("div", { className: twMerge11("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx34("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
+      /* @__PURE__ */ jsx34("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
+    ] }),
+    /* @__PURE__ */ jsx34(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label ?? "Progress",
+        className: twMerge11(
+          "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
+          sizeStyles8[size]
+        ),
+        children: /* @__PURE__ */ jsx34(
+          "div",
+          {
+            className: twMerge11(
+              "h-full rounded-[var(--border-radius-full)] transition-all duration-300",
+              fillStyles[variant]
+            ),
+            style: { width: `${clampedValue}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Banner/Banner.tsx
+import { useState as useState3 } from "react";
+import {
+  Info as Info3,
+  AlertTriangle,
+  AlertCircle as AlertCircle2,
+  CheckCircle2,
+  X as X3
+} from "lucide-react";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+var variantConfig2 = {
+  info: {
+    icon: Info3,
+    containerClass: "bg-[var(--color-banner-info-bg)] border-[var(--color-banner-info-border)] text-[var(--color-banner-info-text)]",
+    iconClass: "text-[var(--color-banner-info-icon)]",
+    role: "status"
+  },
+  warning: {
+    icon: AlertTriangle,
+    containerClass: "bg-[var(--color-banner-warning-bg)] border-[var(--color-banner-warning-border)] text-[var(--color-banner-warning-text)]",
+    iconClass: "text-[var(--color-banner-warning-icon)]",
+    role: "alert"
+  },
+  danger: {
+    icon: AlertCircle2,
+    containerClass: "bg-[var(--color-banner-danger-bg)] border-[var(--color-banner-danger-border)] text-[var(--color-banner-danger-text)]",
+    iconClass: "text-[var(--color-banner-danger-icon)]",
+    role: "alert"
+  },
+  success: {
+    icon: CheckCircle2,
+    containerClass: "bg-[var(--color-banner-success-bg)] border-[var(--color-banner-success-border)] text-[var(--color-banner-success-text)]",
+    iconClass: "text-[var(--color-banner-success-icon)]",
+    role: "status"
+  }
+};
+function Banner({
+  children,
+  variant = "info",
+  title,
+  icon,
+  dismissible = false,
+  onDismiss,
+  className
+}) {
+  const [dismissed, setDismissed] = useState3(false);
+  if (dismissed) return null;
+  const config = variantConfig2[variant];
+  const IconComponent = icon ?? config.icon;
+  const handleDismiss = () => {
+    setDismissed(true);
+    onDismiss?.();
+  };
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      role: config.role,
+      className: twMerge12(
+        "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)]",
+        "text-[length:var(--font-size-sm)]",
+        config.containerClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx35(
+          IconComponent,
+          {
+            size: 20,
+            className: twMerge12("shrink-0 mt-0.5", config.iconClass),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs25("span", { className: "font-[number:var(--font-weight-medium)]", children: [
+            title,
+            " \u2014 "
+          ] }),
+          children
+        ] }),
+        dismissible && /* @__PURE__ */ jsx35(
+          "button",
+          {
+            type: "button",
+            onClick: handleDismiss,
+            className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsx35(X3, { size: 16, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MetricCard/MetricCard.tsx
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+var sizeConfig = {
+  sm: {
+    padding: "p-3",
+    labelClass: "text-[length:var(--font-size-xs)]",
+    valueClass: "text-[length:var(--font-size-xl)]"
+  },
+  md: {
+    padding: "p-4",
+    labelClass: "text-[length:var(--font-size-sm)]",
+    valueClass: "text-[length:var(--font-size-2xl)]"
+  }
+};
+function MetricCard({
+  label,
+  value,
+  secondary,
+  href,
+  size = "md",
+  className
+}) {
+  const config = sizeConfig[size];
+  const containerClass = twMerge13(
+    "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] shadow-sm",
+    config.padding,
+    href && "block transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    className
+  );
+  const content = /* @__PURE__ */ jsxs26(Fragment10, { children: [
+    /* @__PURE__ */ jsx36("div", { className: twMerge13(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
+    /* @__PURE__ */ jsx36(
+      "div",
+      {
+        className: twMerge13(
+          config.valueClass,
+          "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-1 tabular-nums"
+        ),
+        children: value
+      }
+    ),
+    secondary && /* @__PURE__ */ jsx36("div", { className: "mt-1 text-sm", children: secondary })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx36("a", { href, className: containerClass, children: content });
+  }
+  return /* @__PURE__ */ jsx36("div", { className: containerClass, children: content });
+}
+
 // src/tokens/tokens.ts
 var ColorPurple50 = "#f5f0fa";
 var ColorPurple100 = "#ead9f5";
@@ -2320,6 +2738,16 @@ var ColorSlate600 = "#475569";
 var ColorSlate700 = "#334155";
 var ColorSlate800 = "#1e293b";
 var ColorSlate900 = "#0f172a";
+var ColorAmber50 = "#fffbeb";
+var ColorAmber100 = "#fef3c7";
+var ColorAmber200 = "#fde68a";
+var ColorAmber300 = "#fcd34d";
+var ColorAmber400 = "#fbbf24";
+var ColorAmber500 = "#f59e0b";
+var ColorAmber600 = "#d97706";
+var ColorAmber700 = "#b45309";
+var ColorAmber800 = "#92400e";
+var ColorAmber900 = "#78350f";
 var ColorNeutral0 = "#ffffff";
 var ColorNeutral50 = "#f9fafb";
 var ColorNeutral100 = "#f3f4f6";
@@ -2385,6 +2813,37 @@ var ColorOverlayBackdrop = "#00000066";
 var ColorStatusSuccess = "#22c55e";
 var ColorStatusDanger = "#f43f5e";
 var ColorStatusWarning = "#d97706";
+var ColorStatusInfo = "#64748b";
+var ColorDeltaIncreaseBg = "#fff1f2";
+var ColorDeltaIncreaseText = "#be123c";
+var ColorDeltaIncreaseIcon = "#f43f5e";
+var ColorDeltaDecreaseBg = "#f0fdf4";
+var ColorDeltaDecreaseText = "#15803d";
+var ColorDeltaDecreaseIcon = "#22c55e";
+var ColorDeltaFlatBg = "#f3f4f6";
+var ColorDeltaFlatText = "#6b7280";
+var ColorDeltaFlatIcon = "#9ca3af";
+var ColorProgressTrack = "#e5e7eb";
+var ColorProgressFill = "#6b2695";
+var ColorProgressFillSuccess = "#22c55e";
+var ColorProgressFillWarning = "#f59e0b";
+var ColorProgressFillDanger = "#f43f5e";
+var ColorBannerInfoBg = "#f8fafc";
+var ColorBannerInfoText = "#334155";
+var ColorBannerInfoBorder = "#e2e8f0";
+var ColorBannerInfoIcon = "#64748b";
+var ColorBannerWarningBg = "#fffbeb";
+var ColorBannerWarningText = "#92400e";
+var ColorBannerWarningBorder = "#fde68a";
+var ColorBannerWarningIcon = "#f59e0b";
+var ColorBannerDangerBg = "#fff1f2";
+var ColorBannerDangerText = "#be123c";
+var ColorBannerDangerBorder = "#fecdd3";
+var ColorBannerDangerIcon = "#f43f5e";
+var ColorBannerSuccessBg = "#f0fdf4";
+var ColorBannerSuccessText = "#15803d";
+var ColorBannerSuccessBorder = "#bbf7d0";
+var ColorBannerSuccessIcon = "#22c55e";
 var ColorBadgePurpleBg = "#ead9f5";
 var ColorBadgePurpleText = "#5c2483";
 var ColorBadgeTealBg = "#d0f0f0";
@@ -2395,6 +2854,10 @@ var ColorBadgeRoseBg = "#ffe4e6";
 var ColorBadgeRoseText = "#be123c";
 var ColorBadgeNeutralBg = "#f3f4f6";
 var ColorBadgeNeutralText = "#374151";
+var ColorBadgeGreenBg = "#dcfce7";
+var ColorBadgeGreenText = "#15803d";
+var ColorBadgeAmberBg = "#fef3c7";
+var ColorBadgeAmberText = "#b45309";
 var Spacing1 = "4px";
 var Spacing2 = "8px";
 var Spacing3 = "12px";
@@ -2428,6 +2891,8 @@ var LineHeightTight = 1.25;
 var LineHeightNormal = 1.5;
 var LineHeightRelaxed = 1.625;
 export {
+  Badge,
+  Banner,
   BorderRadiusFull,
   BorderRadiusLg,
   BorderRadiusMd,
@@ -2437,6 +2902,7 @@ export {
   Breadcrumbs,
   Button,
   ButtonLink,
+  Card,
   Cell,
   Checkbox,
   ColorActionDanger,
@@ -2452,6 +2918,20 @@ export {
   ColorActionSecondaryHover,
   ColorActionSuccess,
   ColorActionSuccessHover,
+  ColorAmber100,
+  ColorAmber200,
+  ColorAmber300,
+  ColorAmber400,
+  ColorAmber50,
+  ColorAmber500,
+  ColorAmber600,
+  ColorAmber700,
+  ColorAmber800,
+  ColorAmber900,
+  ColorBadgeAmberBg,
+  ColorBadgeAmberText,
+  ColorBadgeGreenBg,
+  ColorBadgeGreenText,
   ColorBadgeNeutralBg,
   ColorBadgeNeutralText,
   ColorBadgePurpleBg,
@@ -2462,6 +2942,22 @@ export {
   ColorBadgeSlateText,
   ColorBadgeTealBg,
   ColorBadgeTealText,
+  ColorBannerDangerBg,
+  ColorBannerDangerBorder,
+  ColorBannerDangerIcon,
+  ColorBannerDangerText,
+  ColorBannerInfoBg,
+  ColorBannerInfoBorder,
+  ColorBannerInfoIcon,
+  ColorBannerInfoText,
+  ColorBannerSuccessBg,
+  ColorBannerSuccessBorder,
+  ColorBannerSuccessIcon,
+  ColorBannerSuccessText,
+  ColorBannerWarningBg,
+  ColorBannerWarningBorder,
+  ColorBannerWarningIcon,
+  ColorBannerWarningText,
   ColorBorderAccent,
   ColorBorderBrand,
   ColorBorderDanger,
@@ -2473,6 +2969,15 @@ export {
   ColorBorderWarning,
   ColorBrandAccent,
   ColorBrandPrimary,
+  ColorDeltaDecreaseBg,
+  ColorDeltaDecreaseIcon,
+  ColorDeltaDecreaseText,
+  ColorDeltaFlatBg,
+  ColorDeltaFlatIcon,
+  ColorDeltaFlatText,
+  ColorDeltaIncreaseBg,
+  ColorDeltaIncreaseIcon,
+  ColorDeltaIncreaseText,
   ColorGreen100,
   ColorGreen200,
   ColorGreen300,
@@ -2497,6 +3002,11 @@ export {
   ColorNeutral900,
   ColorNeutral950,
   ColorOverlayBackdrop,
+  ColorProgressFill,
+  ColorProgressFillDanger,
+  ColorProgressFillSuccess,
+  ColorProgressFillWarning,
+  ColorProgressTrack,
   ColorPurple100,
   ColorPurple200,
   ColorPurple300,
@@ -2528,6 +3038,7 @@ export {
   ColorSlate800,
   ColorSlate900,
   ColorStatusDanger,
+  ColorStatusInfo,
   ColorStatusSuccess,
   ColorStatusWarning,
   ColorSurfaceAccent,
@@ -2565,6 +3076,7 @@ export {
   ColorTextTertiary,
   ColorTextWarning,
   Column,
+  DeltaIndicator,
   Dialog,
   EmptyState,
   Field,
@@ -2601,9 +3113,11 @@ export {
   LineHeightTight,
   Link,
   Menu,
+  MetricCard,
   Popover3 as Popover,
   PopoverContent,
   PopoverTrigger,
+  ProgressBar,
   Radio,
   RadioButton,
   RadioGroup,