@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/styles/theme.css

@@ -0,0 +1,463 @@
+@theme {
+  /* Primary color palette - full 50-950 range */
+  --color-primary-50: oklch(0.962 0.018 272.314);
+  --color-primary-100: oklch(0.93 0.034 272.788);
+  --color-primary-200: oklch(0.87 0.065 274.039);
+  --color-primary-300: oklch(0.785 0.115 274.713);
+  --color-primary-400: oklch(0.673 0.182 276.935);
+  --color-primary-500: oklch(0.585 0.233 277.117);
+  --color-primary-600: oklch(0.511 0.262 276.966);
+  --color-primary-700: oklch(0.457 0.24 277.023);
+  --color-primary-800: oklch(0.398 0.195 277.366);
+  --color-primary-900: oklch(0.359 0.144 278.697);
+  --color-primary-950: oklch(0.257 0.09 281.288);
+
+  --color-primary: var(--color-primary-600);
+  --color-primary-contrast: var(--color-neutral-50);
+
+  /* Secondary color palette - Tailwind v4 gray */
+  --color-secondary-50: oklch(0.984 0.003 247.858);
+  --color-secondary-100: oklch(0.968 0.007 247.896);
+  --color-secondary-200: oklch(0.929 0.013 255.508);
+  --color-secondary-300: oklch(0.869 0.022 252.894);
+  --color-secondary-400: oklch(0.704 0.04 256.788);
+  --color-secondary-500: oklch(0.554 0.046 257.417);
+  --color-secondary-600: oklch(0.446 0.043 257.281);
+  --color-secondary-700: oklch(0.372 0.044 257.287);
+  --color-secondary-800: oklch(0.279 0.041 260.031);
+  --color-secondary-900: oklch(0.208 0.042 265.755);
+  --color-secondary-950: oklch(0.129 0.042 264.695);
+
+  --color-secondary: var(--color-secondary-600);
+  --color-secondary-contrast: var(--color-neutral-50);
+
+  /* Danger/Error color palette - full 50-950 range */
+  --color-danger-50: oklch(0.971 0.013 17.38);
+  --color-danger-100: oklch(0.936 0.032 17.717);
+  --color-danger-200: oklch(0.885 0.062 18.334);
+  --color-danger-300: oklch(0.808 0.114 19.571);
+  --color-danger-400: oklch(0.704 0.191 22.216);
+  --color-danger-500: oklch(0.637 0.237 25.331);
+  --color-danger-600: oklch(0.577 0.245 27.325);
+  --color-danger-700: oklch(0.505 0.213 27.518);
+  --color-danger-800: oklch(0.444 0.177 26.899);
+  --color-danger-900: oklch(0.396 0.141 25.723);
+  --color-danger-950: oklch(0.258 0.092 26.042);
+
+  --color-danger: var(--color-danger-600);
+  --color-danger-contrast: var(--color-neutral-50);
+
+  /* Success color palette - Tailwind v4 teal */
+  --color-success-50: oklch(0.984 0.014 180.72);
+  --color-success-100: oklch(0.953 0.051 180.801);
+  --color-success-200: oklch(0.91 0.096 180.426);
+  --color-success-300: oklch(0.855 0.138 181.071);
+  --color-success-400: oklch(0.777 0.152 181.912);
+  --color-success-500: oklch(0.704 0.14 182.503);
+  --color-success-600: oklch(0.6 0.118 184.704);
+  --color-success-700: oklch(0.511 0.096 186.391);
+  --color-success-800: oklch(0.437 0.078 188.216);
+  --color-success-900: oklch(0.386 0.063 188.416);
+  --color-success-950: oklch(0.277 0.046 192.524);
+
+  --color-success: var(--color-success-600);
+  --color-success-contrast: var(--color-neutral-50);
+
+  /* Warning color palette - full 50-950 range */
+  --color-warning-50: oklch(0.987 0.022 95.277);
+  --color-warning-100: oklch(0.962 0.059 95.617);
+  --color-warning-200: oklch(0.924 0.12 95.746);
+  --color-warning-300: oklch(0.879 0.169 91.605);
+  --color-warning-400: oklch(0.828 0.189 84.429);
+  --color-warning-500: oklch(0.769 0.188 70.08);
+  --color-warning-600: oklch(0.666 0.179 58.318);
+  --color-warning-700: oklch(0.555 0.163 48.998);
+  --color-warning-800: oklch(0.473 0.137 46.201);
+  --color-warning-900: oklch(0.414 0.112 45.904);
+  --color-warning-950: oklch(0.279 0.077 45.635);
+
+  --color-warning: var(--color-warning-600);
+  --color-warning-contrast: var(--color-neutral-50);
+
+  /* text color */
+  --color-text-primary: var(--color-neutral-950);
+  --color-text-secondary: var(--color-neutral-700);
+  --color-text-placeholder: var(--color-neutral-400);
+  --color-text-muted: var(--color-neutral-500);
+  --color-text-disabled: var(--color-neutral-400);
+  --color-text-inverse: var(--color-neutral-50);
+
+  /* generic colors */
+  --color-border: oklch(90% 0 0);
+  --color-border-secondary: oklch(87% 0 0);
+  --color-surface: oklch(100% 0 0);
+  --color-chart-track: rgba(0, 0, 0, 0.06);
+  --color-background: oklch(98.5% 0.002 247.839);
+  --color-background-secondary: oklch(98.5% 0 0);
+  --color-background-tertiary: oklch(90% 0.002 247.839);
+  --color-background-quaternary: oklch(85% 0.002 247.839);
+  --color-background-quinary: oklch(80% 0.002 247.839);
+  --color-background-disabled: var(--color-neutral-100);
+
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+
+  /* Font family variables */
+  --font-family-base: var(--font-sans);
+  --font-cursive: "Birthstone", cursive;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  /* Form element variables — fixed px so they don't scale with root font-size */
+  --form-min-h-sm: 32px; /* h-8 in Tailwind */
+  --form-min-h-md: 40px; /* h-10 in Tailwind */
+  --form-min-h-lg: 48px; /* h-12 in Tailwind */
+
+  --form-label-pb: 8px; /* pb-2 in Tailwind */
+
+  --form-px-sm: 12px; /* px-3 in Tailwind */
+  --form-px-md: 14px; /* px-3.5 in Tailwind */
+  --form-px-lg: 16px; /* px-4 in Tailwind */
+
+  --form-py-sm: 8px; /* py-1 in Tailwind */
+  --form-py-md: 10px; /* py-2 in Tailwind */
+  --form-py-lg: 12px; /* py-3 in Tailwind */
+
+  /* ============================================
+     BORDER RADIUS SYSTEM
+     Change --radius-base to adjust the entire UI.
+     Individual --*-radius variables can be overridden independently.
+     ============================================ */
+  --radius-base: 8px; /* Base radius token */
+
+  /* Forms & Controls (1x base = 8px) */
+  --form-radius: var(--radius-base);
+
+  /* Overlays (1.5x base = 12px) */
+  --dropdown-radius: calc(var(--radius-base) * 1.5);
+  --tooltip-radius: calc(var(--radius-base) / 2);
+  --codeblock-radius: calc(var(--radius-base) * 1.5);
+  --popover-radius: calc(var(--radius-base) * 1.5);
+
+  /* Feedback surfaces */
+  --alert-radius: calc(var(--radius-base) * 1.5);
+  --toast-radius: calc(var(--radius-base) * 2);
+  --drawer-radius: calc(var(--radius-base) * 2);
+  --metric-radius: calc(var(--radius-base) * 2);
+
+  /* Surfaces (3x base = 24px) */
+  --card-radius: calc(var(--radius-base) * 1.5);
+  --modal-radius: calc(var(--radius-base) * 1.5);
+
+  /* Special shapes - not part of scale */
+  --segmented-radius: var(--form-radius);
+  --avatar-radius: 50%;
+
+  /* Focus ring styling */
+  --form-focus-ring-width: 2px;
+  --form-focus-ring-offset: -1px;
+  --form-focus-ring-opacity: 0.1;
+
+  /* Outline/border styling */
+  --form-outline-width: 1px;
+  --form-outline-focused-width: 2px;
+
+  /* Button variables - inheriting from form variables */
+  --button-radius: var(--form-radius);
+  --button-min-h-sm: var(--form-min-h-sm);
+  --button-min-h-md: var(--form-min-h-md);
+  --button-min-h-lg: var(--form-min-h-lg);
+
+  /* Button padding — fixed px */
+  --button-px-sm: 12px;
+  --button-py-sm: 0;
+  --button-px-md: 14px;
+  --button-py-md: 0;
+  --button-px-lg: 20px;
+  --button-py-lg: 0;
+
+  /* Button icon-only padding — fixed px */
+  --button-icon-p-sm: 6px;
+  --button-icon-p-md: 8px;
+  --button-icon-p-lg: 10px;
+
+  /* Button icon-only sizes */
+  --button-icon-size-sm: var(--form-min-h-sm);
+  --button-icon-size-md: var(--form-min-h-md);
+  --button-icon-size-lg: var(--form-min-h-lg);
+
+  /* Badge variables */
+  --badge-radius: 6px;
+
+  /* Segmented variables - now defined in radius system above */
+  --segmented-min-h-sm: var(--form-min-h-sm);
+  --segmented-min-h-md: var(--form-min-h-md);
+  --segmented-min-h-lg: var(--form-min-h-lg);
+
+  /* Segmented padding */
+  --segmented-px-sm: var(--form-px-sm);
+  --segmented-px-md: var(--form-px-md);
+  --segmented-px-lg: var(--form-px-lg);
+
+  --segmented-py-sm: var(--form-py-sm);
+  --segmented-py-md: var(--form-py-md);
+  --segmented-py-lg: var(--form-py-lg);
+
+  /* Segmented sliding background */
+  --segmented-active-bg: #ffffff;
+  --segmented-active-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+  /* Glass effect variables */
+  --glass-layer-padding: 0.5px;
+  --glass-layer-border-width: 0.5px;
+  --glass-layer-inner-offset: 1.5px;
+
+  /* Glass effect gradient variables */
+  --glass-gradient-outer: linear-gradient(
+    to bottom,
+    rgba(250, 250, 250, 0.8) 0%,
+    rgba(229, 229, 229, 0.8) 30%,
+    rgba(242, 242, 242, 0.8) 70%,
+    rgba(250, 250, 250, 0.8) 100%
+  );
+  --glass-gradient-inner: linear-gradient(
+    to bottom,
+    rgba(242, 242, 242, 0.8) 0%,
+    rgba(250, 250, 250, 0.8) 100%
+  );
+
+  /* Chat message variables */
+  --chat-bubble-border-sender: rgba(255, 255, 255, 0.4);
+  --chat-bubble-border-receiver: rgba(255, 255, 255, 1);
+
+  /* Avatar variables — fixed px */
+  --avatar-size-xs: 24px; /* size-6 in Tailwind */
+  --avatar-size-sm: 32px; /* size-8 in Tailwind */
+  --avatar-size-md: 40px; /* size-10 in Tailwind */
+  --avatar-size-lg: 48px; /* size-12 in Tailwind */
+  --avatar-size-xl: 64px; /* size-16 in Tailwind */
+
+  /* Avatar radius - now defined in radius system above */
+
+  /* Carousel Variables */
+  --carousel-container-width: 100%; /* Full width container */
+  --carousel-slide-width: 66vw; /* Default slide width - can be overridden */
+  --carousel-slide-height: 44rem; /* 384px = h-96 */
+  --carousel-slide-gap: 16px; /* gap between slides */
+  --carousel-controls-size: 48px; /* control button size */
+  --carousel-controls-offset: 16px; /* distance from edge */
+
+  /* Popover variables - radius now defined in radius system above */
+  --popover-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --popover-border-width: 1px;
+  --popover-backdrop-opacity: 0.5;
+  --popover-offset-sm: 8px;
+  --popover-offset-md: 8px;
+  --popover-offset-lg: 12px;
+  --popover-max-width-sm: 256px;
+  --popover-max-width-md: 384px;
+  --popover-max-width-lg: 512px;
+  --popover-padding-sm: 12px;
+  --popover-padding-md: 12px;
+  --popover-padding-lg: 16px;
+
+  /* NavItem variables */
+  --nav-item-radius: var(--radius-base);
+  --nav-item-min-h: 40px; /* h-10 in Tailwind */
+
+  /* NavItem padding — fixed px */
+  --nav-item-px: 12px; /* px-3 in Tailwind */
+  --nav-item-py: 10px; /* py-2.5 in Tailwind */
+
+  /* Modal and Drawer */
+  --overlay-bg: rgba(0, 0, 0, 0.65);
+  --overlay-blur: 2px;
+  --color-scale-background: oklch(0% 0 0); /* backdrop behind scaled content */
+  /* Modal radius - now defined in radius system above */
+
+  /* Shadow color presets for utility generation */
+  --shadow-color-primary: var(--color-primary);
+  --shadow-color-success: var(--color-success);
+  --shadow-color-warning: var(--color-warning);
+  --shadow-color-danger: var(--color-danger);
+  --shadow-color-secondary: var(--color-secondary);
+
+  /* Neumorphic tokens — light mode (multi-layer realistic) */
+  --neu-raised-shadow:
+    1px 1px 2px rgba(0, 0, 0, 0.04), 3px 3px 6px rgba(0, 0, 0, 0.06),
+    6px 6px 14px rgba(0, 0, 0, 0.08), 12px 12px 28px rgba(0, 0, 0, 0.04),
+    -1px -1px 2px rgba(255, 255, 255, 0.5),
+    -3px -3px 6px rgba(255, 255, 255, 0.5),
+    -6px -6px 14px rgba(255, 255, 255, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
+  --neu-inset-shadow:
+    inset 1px 1px 2px rgba(0, 0, 0, 0.06),
+    inset 2px 2px 4px rgba(0, 0, 0, 0.06),
+    inset 4px 4px 8px rgba(0, 0, 0, 0.05),
+    inset 8px 8px 16px rgba(0, 0, 0, 0.03),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5),
+    inset -3px -3px 6px rgba(255, 255, 255, 0.4),
+    inset -6px -6px 12px rgba(255, 255, 255, 0.2),
+    0 1px 0 rgba(255, 255, 255, 0.5);
+  --neu-circle-groove-shadow:
+    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.08),
+    inset 1px 1px 3px rgba(0, 0, 0, 0.08),
+    inset 2px 2px 5px rgba(0, 0, 0, 0.04), 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
+    1px 1px 2px rgba(0, 0, 0, 0.3);
+  --neu-circle-disc-shadow:
+    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.05),
+    inset 1px 1px 3px rgba(0, 0, 0, 0.04),
+    inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.4),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.06),
+    0 2px 4px rgba(0, 0, 0, 0.04);
+  --neu-raised-border: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.7) 0%,
+    rgba(255, 255, 255, 0.35) 30%,
+    transparent 50%,
+    rgba(0, 0, 0, 0.06) 100%
+  );
+  --neu-inset-border: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.1) 0%,
+    rgba(0, 0, 0, 0.04) 25%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.35) 75%,
+    rgba(255, 255, 255, 0.5) 100%
+  );
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   Add .dark class to <html> or a parent container
+   to enable dark mode. All CSS variable-based
+   components will automatically adapt.
+
+   IMPORTANT: Dark mode overrides MUST be in @layer theme
+   (not @layer base) for proper cascade priority in Tailwind v4.
+   This ensures CSS variable overrides take precedence over
+   Tailwind's generated theme styles.
+   ============================================ */
+@layer theme {
+  .dark {
+    /* Text colors - inverted for dark backgrounds */
+
+    --color-text-primary: var(--color-neutral-50);
+    --color-text-secondary: var(--color-neutral-400);
+    --color-text-placeholder: var(--color-neutral-600);
+    --color-text-muted: var(--color-neutral-500);
+    --color-text-disabled: var(--color-neutral-400);
+    --color-text-inverse: var(--color-neutral-950);
+
+    /* Base theme colors */
+    --color-primary: var(--color-primary-600);
+    --color-success: var(--color-success-400);
+    --color-warning: var(--color-warning-400);
+    --color-danger: var(--color-danger-400);
+    --color-secondary: var(--color-secondary-400);
+
+    /* Contrast colors for filled variants on semantic backgrounds */
+    --color-primary-contrast: var(--color-neutral-50);
+    --color-danger-contrast: var(--color-neutral-50);
+    --color-success-contrast: var(--color-neutral-50);
+    --color-warning-contrast: var(--color-neutral-50);
+    --color-secondary-contrast: var(--color-neutral-50);
+
+    /* Background colors - dark equivalents */
+    --color-surface: oklch(14.5% 0 0);
+    --color-background: oklch(14.5% 0 0);
+    --color-background-secondary: oklch(18% 0 0);
+    --color-background-tertiary: oklch(22% 0 0);
+    --color-background-quaternary: oklch(26% 0 0);
+    --color-background-quinary: oklch(30% 0 0);
+    --color-background-disabled: var(--color-neutral-800);
+
+    /* Scale backdrop */
+    --color-scale-background: oklch(8% 0 0);
+
+    /* Border - darker for dark mode */
+    --color-border: oklch(30% 0 0 / 0.8);
+    --color-border-secondary: oklch(35% 0 0 / 0.8);
+    --color-chart-track: rgba(255, 255, 255, 0.05);
+
+    /* Glass effect gradients - dark mode */
+    --glass-gradient-outer: linear-gradient(
+      135deg,
+      var(--color-background-tertiary) 0%,
+      var(--color-background-secondary) 30%,
+      var(--color-background) 70%,
+      var(--color-background-tertiary) 100%
+    );
+    --glass-gradient-inner: linear-gradient(
+      to bottom,
+      var(--color-background-secondary) 0%,
+      var(--color-background) 100%
+    );
+
+    /* Scrollbar - dark mode */
+    --ui-scrollbar-thumb-rest: rgba(75, 85, 99, 0.3);
+    --ui-scrollbar-thumb-active: rgb(75 85 99);
+    --ui-scrollbar-track-rest: transparent;
+    --ui-scrollbar-track-active: rgba(55, 65, 81, 0.1);
+
+    /* Neumorphic tokens — dark mode (multi-layer realistic) */
+    --neu-raised-shadow:
+      1px 1px 2px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.25),
+      6px 6px 14px rgba(0, 0, 0, 0.2), 12px 12px 28px rgba(0, 0, 0, 0.1),
+      -1px -1px 2px rgba(255, 255, 255, 0.02),
+      -3px -3px 6px rgba(255, 255, 255, 0.015),
+      -6px -6px 14px rgba(255, 255, 255, 0.01),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --neu-inset-shadow:
+      inset 1px 1px 2px rgba(0, 0, 0, 0.3),
+      inset 2px 2px 4px rgba(0, 0, 0, 0.25),
+      inset 4px 4px 8px rgba(0, 0, 0, 0.2),
+      inset 8px 8px 16px rgba(0, 0, 0, 0.1),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.02),
+      inset -3px -3px 6px rgba(255, 255, 255, 0.015),
+      0 1px 0 rgba(255, 255, 255, 0.04);
+    --neu-circle-groove-shadow:
+      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
+      inset 1px 1px 2px rgba(0, 0, 0, 0.35),
+      inset 2px 2px 5px rgba(0, 0, 0, 0.2),
+      0.5px 0.5px 1px rgba(255, 255, 255, 0.04),
+      1px 1px 2px rgba(255, 255, 255, 0.03);
+    --neu-circle-disc-shadow:
+      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),
+      inset 1px 1px 3px rgba(0, 0, 0, 0.15),
+      inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.04),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.03),
+      0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
+    --neu-raised-border: linear-gradient(
+      145deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.08) 30%,
+      transparent 50%,
+      rgba(0, 0, 0, 0.12) 100%
+    );
+    --neu-inset-border: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 0.15) 25%,
+      rgba(255, 255, 255, 0.03) 50%,
+      rgba(255, 255, 255, 0.08) 75%,
+      rgba(255, 255, 255, 0.12) 100%
+    );
+  }
+}

package/src/theme-plugin.css

@@ -0,0 +1,24 @@
+@source "../dist";
+@import "./global.scss";
+
+@theme {
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+}
+
+/* bg-image arbitrary value support for consumers */
+@utility bg-image-scale-* {
+  --bg-image-scale: --value([number]);
+}
+
+@utility bg-image-blur-* {
+  --bg-image-blur: --value([length]);
+}
+
+@utility bg-image-opacity-* {
+  --bg-image-opacity: --value([number], [percentage]);
+}

package/dist/components/ai/ApprovalCard/ApprovalCard.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import { ApprovalCardProps } from "./ApprovalCard.types";
-export declare const ApprovalCard: React.FC<ApprovalCardProps>;

package/dist/components/ai/ApprovalCard/ApprovalCard.js

@@ -1,15 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/react/16/solid';
-import { approvalCardTheme } from './ApprovalCard.theme.js';
-import { Card } from '../../core/Card/Card.js';
-import { Badge } from '../../core/Badge/Badge.js';
-import { Button } from '../../core/Button/Button.js';
-import { cn } from '../../../utils/cn.js';
-
-const ApprovalCard = ({ title, description, variant = "default", riskLevel = "medium", onApprove, onDeny, children, isApproving = false, className, }) => {
-    const riskColor = approvalCardTheme.badgeColors[riskLevel];
-    const riskIcon = riskLevel === "critical" || riskLevel === "high" ? (jsx(ExclamationTriangleIcon, { className: "" })) : (jsx(CheckCircleIcon, { className: "" }));
-    return (jsxs(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.variants[variant], className), children: [jsx(Card.Header, { children: jsx("div", { className: "flex flex-col items-start", children: jsxs(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow", children: [riskLevel.toUpperCase(), " RISK"] }) }) }), jsxs(Card.Content, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "text-base", children: title }), description && (jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: description }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-xs font-mono border border-[var(--color-border)] overflow-x-auto", children: children }))] }), jsxs(Card.Footer, { className: "justify-end gap-2 mt-3", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: onDeny, children: "Deny" }), jsx(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove, children: "Approve" })] })] }));
-};
-
-export { ApprovalCard };

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.d.ts

@@ -1,13 +0,0 @@
-export declare const approvalCardTheme: {
-    baseStyle: string;
-    variants: {
-        default: string;
-        glass: string;
-    };
-    badgeColors: {
-        readonly low: "success";
-        readonly medium: "warning";
-        readonly high: "danger";
-        readonly critical: "danger";
-    };
-};

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.js

@@ -1,15 +0,0 @@
-const approvalCardTheme = {
-    baseStyle: "overflow-hidden",
-    variants: {
-        default: "border border-[var(--color-border)] bg-white dark:bg-[var(--color-background-secondary)]",
-        glass: "glass-effect",
-    },
-    badgeColors: {
-        low: "success",
-        medium: "warning",
-        high: "danger",
-        critical: "danger",
-    },
-};
-
-export { approvalCardTheme };

package/dist/components/ai/ApprovalCard/ApprovalCard.types.d.ts

@@ -1,43 +0,0 @@
-import { ReactNode } from "react";
-export type ApprovalRiskLevel = "low" | "medium" | "high" | "critical";
-export type ApprovalCardVariant = "default" | "glass";
-export interface ApprovalCardProps {
-    /**
-     * Title of the approval request
-     */
-    title: string;
-    /**
-     * Description or context for the user
-     */
-    description?: string;
-    /**
-     * Risk level determining visual severity
-     * @default "medium"
-     */
-    riskLevel?: ApprovalRiskLevel;
-    /**
-     * Visual style variant
-     * @default "default"
-     */
-    variant?: ApprovalCardVariant;
-    /**
-     * Callback when user approves the action
-     */
-    onApprove: () => void;
-    /**
-     * Callback when user denies/cancels the action
-     */
-    onDeny: () => void;
-    /**
-     * Optional payload to display (e.g. code snippet, JSON)
-     */
-    children?: ReactNode;
-    /**
-     * Loading state for the approve button
-     */
-    isApproving?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
-}

package/dist/components/ai/ApprovalCard/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./ApprovalCard";
-export * from "./ApprovalCard.types";

package/dist/components/ai/MessageHistory/MessageHistory.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import { MessageHistoryProps } from "./MessageHistory.types";
-/**
- * MessageHistory - Virtualized message container with auto-scroll
- *
- * Displays a scrollable list of chat messages with support for
- * auto-scrolling on new messages and optional virtualization.
- *
- * @example
- * ```tsx
- * <MessageHistory
- *   messages={messages}
- *   virtualizeThreshold={50}
- *   autoScroll
- * />
- * ```
- */
-export declare const MessageHistory: React.ForwardRefExoticComponent<MessageHistoryProps & React.RefAttributes<HTMLDivElement>>;