@metropolle/design-system 1.2025.1-2.5.1903 → 1.2026.0-1.10.2344

package/dist/css/liquid-glass.css

@@ -0,0 +1,468 @@
+/* ============================================
+   Metropolle Design System - Liquid Glass CSS
+   Apple iOS 26 Liquid Glass Style
+   ============================================ */
+
+/* =========================
+   CSS Custom Properties
+   ========================= */
+
+:root {
+  /* =========================
+     Centralized Theme Variables
+     Use these across all repos
+     ========================= */
+
+  /* Typography */
+  --mds-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --mds-font-family-brand: 'Helvetica', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* Brand Colors */
+  --mds-color-brand-primary: #0055FF;
+  --mds-color-brand-secondary: #667eea;
+  --mds-color-brand-accent: #764ba2;
+
+  /* Status Colors */
+  --mds-color-success: #10b981;
+  --mds-color-warning: #f59e0b;
+  --mds-color-error: #ef4444;
+  --mds-color-info: #3b82f6;
+  --mds-color-accent: #a855f7;
+}
+
+/* =========================
+   Dark Theme (Default)
+   ========================= */
+:root,
+html[data-theme="dark"] {
+  /* Semantic Colors */
+  --mds-color-text-primary: #ffffff;
+  --mds-color-text-secondary: rgba(255, 255, 255, 0.7);
+  --mds-color-text-tertiary: rgba(255, 255, 255, 0.5);
+  --mds-color-background-primary: #0f0f0f;
+  --mds-color-background-secondary: #1a1a1a;
+  --mds-color-background-tertiary: #2a2a2a;
+  --mds-color-border-default: rgba(255, 255, 255, 0.15);
+  --mds-color-border-light: rgba(255, 255, 255, 0.08);
+
+  /* Scrollbar */
+  --mds-scrollbar-track: rgba(40, 40, 40, 0.8);
+  --mds-scrollbar-thumb: rgba(80, 80, 80, 0.8);
+  --mds-scrollbar-thumb-hover: rgba(100, 100, 100, 0.8);
+
+  /* =========================
+     Liquid Glass Tokens - iOS 26 Style
+     ========================= */
+
+  /* Blur tokens - Increased for more glass-like effect */
+  --mds-liquid-blur-xs: 4px;
+  --mds-liquid-blur-sm: 8px;
+  --mds-liquid-blur-md: 12px;
+  --mds-liquid-blur-lg: 16px;
+  --mds-liquid-blur-xl: 24px;
+
+  /* Saturate tokens - Subtle per Apple guidelines */
+  --mds-liquid-saturate-subtle: 105%;
+  --mds-liquid-saturate-default: 120%;
+  --mds-liquid-saturate-vibrant: 140%;
+
+  /* Background tokens - True glass transparency */
+  --mds-liquid-bg-glass: rgba(255, 255, 255, 0.08);
+  --mds-liquid-bg-glass-thick: rgba(255, 255, 255, 0.12);
+  --mds-liquid-bg-overlay: rgba(0, 0, 0, 0.4);
+  --mds-liquid-bg-sidebar: rgba(0, 0, 0, 0.35);
+  --mds-liquid-bg-navbar: rgba(0, 0, 0, 0.4);
+  --mds-liquid-bg-card: rgba(255, 255, 255, 0.06);
+  --mds-liquid-bg-input: rgba(255, 255, 255, 0.08);
+  --mds-liquid-bg-button: rgba(255, 255, 255, 0.1);
+  --mds-liquid-bg-button-hover: rgba(255, 255, 255, 0.15);
+
+  /* Border tokens - Subtle glass edges */
+  --mds-liquid-border-subtle: rgba(255, 255, 255, 0.12);
+  --mds-liquid-border-default: rgba(255, 255, 255, 0.18);
+  --mds-liquid-border-bright: rgba(255, 255, 255, 0.25);
+
+  /* Shadow tokens - Deeper for lifted effect */
+  --mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.2);
+  --mds-liquid-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.25);
+  --mds-liquid-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.3);
+  --mds-liquid-shadow-dramatic: 0 16px 56px rgba(0, 0, 0, 0.4);
+
+  /* Inner glow - Top edge highlight */
+  --mds-liquid-glow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --mds-liquid-glow-soft: inset 0 1px 1px rgba(255, 255, 255, 0.08);
+
+  /* Specular highlight - More dramatic top-left shine */
+  --mds-liquid-specular: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.15) 0%,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0) 50%
+  );
+  --mds-liquid-specular-intense: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.25) 0%,
+    rgba(255, 255, 255, 0.08) 30%,
+    rgba(255, 255, 255, 0) 60%
+  );
+
+  /* Transitions */
+  --mds-liquid-transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
+  --mds-liquid-transition-fast: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
+  --mds-liquid-transition-slow: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+
+  /* Background gradient */
+  --mds-liquid-gradient: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
+}
+
+/* =========================
+   Light Theme
+   ========================= */
+html[data-theme="light"] {
+  /* Semantic Colors */
+  --mds-color-text-primary: #1a1a1a;
+  --mds-color-text-secondary: rgba(0, 0, 0, 0.6);
+  --mds-color-text-tertiary: rgba(0, 0, 0, 0.4);
+  --mds-color-background-primary: #f8f9fa;
+  --mds-color-background-secondary: #ffffff;
+  --mds-color-background-tertiary: #f0f0f0;
+  --mds-color-border-default: rgba(0, 0, 0, 0.08);
+  --mds-color-border-light: rgba(0, 0, 0, 0.04);
+
+  /* Scrollbar */
+  --mds-scrollbar-track: rgba(0, 0, 0, 0.05);
+  --mds-scrollbar-thumb: rgba(0, 0, 0, 0.2);
+  --mds-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
+
+  /* Liquid Glass - Light mode uses darker glass for contrast */
+  --mds-liquid-bg-glass: rgba(255, 255, 255, 0.7);
+  --mds-liquid-bg-glass-thick: rgba(255, 255, 255, 0.85);
+  --mds-liquid-bg-overlay: rgba(255, 255, 255, 0.6);
+  --mds-liquid-bg-sidebar: rgba(255, 255, 255, 0.75);
+  --mds-liquid-bg-navbar: rgba(255, 255, 255, 0.8);
+  --mds-liquid-bg-card: rgba(255, 255, 255, 0.6);
+  --mds-liquid-bg-input: rgba(255, 255, 255, 0.9);
+  --mds-liquid-bg-button: rgba(0, 0, 0, 0.04);
+  --mds-liquid-bg-button-hover: rgba(0, 0, 0, 0.08);
+
+  /* Borders - Subtle dark edges */
+  --mds-liquid-border-subtle: rgba(0, 0, 0, 0.06);
+  --mds-liquid-border-default: rgba(0, 0, 0, 0.1);
+  --mds-liquid-border-bright: rgba(0, 0, 0, 0.15);
+
+  /* Shadows - Softer for light mode */
+  --mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --mds-liquid-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.1);
+  --mds-liquid-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);
+  --mds-liquid-shadow-dramatic: 0 16px 56px rgba(0, 0, 0, 0.15);
+
+  /* Inner glow - Subtle white edge */
+  --mds-liquid-glow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --mds-liquid-glow-soft: inset 0 1px 1px rgba(255, 255, 255, 0.5);
+
+  /* Specular - Brighter for light mode */
+  --mds-liquid-specular: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.6) 0%,
+    rgba(255, 255, 255, 0.2) 25%,
+    rgba(255, 255, 255, 0) 50%
+  );
+  --mds-liquid-specular-intense: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0.3) 30%,
+    rgba(255, 255, 255, 0) 60%
+  );
+
+  /* Background gradient */
+  --mds-liquid-gradient: linear-gradient(180deg, #f0f2f5 0%, #e4e6e9 100%);
+}
+
+
+/* =========================
+   Base Liquid Glass Class
+   ========================= */
+
+.mds-liquid-glass {
+  position: relative;
+  background: var(--mds-liquid-bg-glass);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  border: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 16px;
+  box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-edge);
+  transition: var(--mds-liquid-transition);
+  overflow: hidden;
+}
+
+/* Specular highlight via pseudo-element */
+.mds-liquid-glass::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--mds-liquid-specular);
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Content should be above the specular */
+.mds-liquid-glass > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Hover state - subtle brightness increase */
+.mds-liquid-glass:hover {
+  border-color: var(--mds-liquid-border-bright);
+  box-shadow: var(--mds-liquid-shadow-elevated), var(--mds-liquid-glow-edge);
+}
+
+/* No-hover variant */
+.mds-liquid-glass--no-hover,
+.mds-liquid-glass--no-hover:hover {
+  border-color: var(--mds-liquid-border-subtle);
+  box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-edge);
+}
+
+
+/* =========================
+   Size Variants
+   ========================= */
+
+.mds-liquid-glass--xs {
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 8px;
+}
+
+.mds-liquid-glass--sm {
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 12px;
+}
+
+.mds-liquid-glass--lg {
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 20px;
+}
+
+.mds-liquid-glass--xl {
+  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  border-radius: 24px;
+}
+
+
+/* =========================
+   Element-Specific Classes
+   ========================= */
+
+/* Navbar */
+.mds-liquid-glass--navbar {
+  background: var(--mds-liquid-bg-navbar);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-bottom: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+  box-shadow: var(--mds-liquid-shadow-raised);
+}
+
+.mds-liquid-glass--navbar::before {
+  border-radius: 0;
+}
+
+.mds-liquid-glass--navbar:hover {
+  box-shadow: var(--mds-liquid-shadow-raised);
+}
+
+/* Sidebar */
+.mds-liquid-glass--sidebar {
+  background: var(--mds-liquid-bg-sidebar);
+  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-right: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+  box-shadow: var(--mds-liquid-shadow-raised);
+}
+
+.mds-liquid-glass--sidebar::before {
+  border-radius: 0;
+}
+
+/* Card */
+.mds-liquid-glass--card {
+  background: var(--mds-liquid-bg-card);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  padding: 1.5rem;
+}
+
+/* Modal */
+.mds-liquid-glass--modal {
+  background: var(--mds-liquid-bg-glass-thick);
+  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  border-radius: 20px;
+  box-shadow: var(--mds-liquid-shadow-dramatic), var(--mds-liquid-glow-edge);
+}
+
+.mds-liquid-glass--modal::before {
+  background: var(--mds-liquid-specular-intense);
+}
+
+/* Modal Overlay */
+.mds-liquid-glass--overlay {
+  background: var(--mds-liquid-bg-overlay);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm));
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.mds-liquid-glass--overlay::before {
+  display: none;
+}
+
+/* Input */
+.mds-liquid-glass--input {
+  background: var(--mds-liquid-bg-input);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 10px;
+  box-shadow: var(--mds-liquid-glow-soft);
+  padding: 0.75rem 1rem;
+}
+
+.mds-liquid-glass--input:focus {
+  border-color: var(--mds-color-brand-primary);
+  box-shadow: var(--mds-liquid-glow-soft), 0 0 0 3px rgba(0, 85, 255, 0.2);
+  outline: none;
+}
+
+/* Button */
+.mds-liquid-glass--button {
+  background: var(--mds-liquid-bg-button);
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 10px;
+  box-shadow: var(--mds-liquid-shadow-raised), var(--mds-liquid-glow-soft);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: var(--mds-liquid-transition-fast);
+}
+
+.mds-liquid-glass--button:hover {
+  background: var(--mds-liquid-bg-button-hover);
+  border-color: var(--mds-liquid-border-bright);
+}
+
+.mds-liquid-glass--button:active {
+  box-shadow: var(--mds-liquid-glow-soft);
+}
+
+/* Dropdown */
+.mds-liquid-glass--dropdown {
+  background: var(--mds-liquid-bg-glass-thick);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 14px;
+  box-shadow: var(--mds-liquid-shadow-elevated);
+  padding: 0.5rem;
+}
+
+/* Table */
+.mds-liquid-glass--table {
+  background: var(--mds-liquid-bg-glass);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+/* Footer */
+.mds-liquid-glass--footer {
+  background: var(--mds-liquid-bg-navbar);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-top: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+}
+
+.mds-liquid-glass--footer::before {
+  border-radius: 0;
+}
+
+/* TOC (Table of Contents) */
+.mds-liquid-glass--toc {
+  background: var(--mds-liquid-bg-card);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 14px;
+  padding: 1rem;
+}
+
+/* Badge */
+.mds-liquid-glass--badge {
+  background: var(--mds-liquid-bg-button);
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 999px;
+  box-shadow: var(--mds-liquid-shadow-raised);
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+
+/* =========================
+   Background Utilities
+   ========================= */
+
+.mds-liquid-bg-gradient {
+  background: var(--mds-liquid-gradient) !important;
+  background-attachment: fixed !important;
+}
+
+
+/* =========================
+   Accessibility
+   ========================= */
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .mds-liquid-glass,
+  .mds-liquid-glass--button,
+  .mds-liquid-glass--input {
+    transition: none !important;
+  }
+}
+
+/* High contrast */
+@media (prefers-contrast: high) {
+  .mds-liquid-glass {
+    background: var(--mds-color-background-secondary) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border: 2px solid var(--mds-color-text-primary) !important;
+  }
+
+  .mds-liquid-glass::before {
+    display: none !important;
+  }
+}
+
+
+/* =========================
+   Browser Fallback
+   ========================= */
+
+@supports not (backdrop-filter: blur(1px)) {
+  .mds-liquid-glass {
+    background: var(--mds-color-background-secondary);
+  }
+}

package/dist/react/components/react/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Variante visual do botão */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'glass';
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'subtle' | 'glass' | 'danger';
     /** Tamanho do botão */
     size?: 'sm' | 'md' | 'lg';
     /** Estado de loading */

package/dist/react/components/react/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAClE,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,uFA4DjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxF,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,uFA4DjB,CAAC"}

package/dist/react/components/react/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAC;AAItD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqM9C,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAC;AAItD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsM9C,CAAC"}

package/dist/react/components/react/DataTable/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DataTable/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4DlD,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DataTable/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4ElD,CAAC"}

package/dist/react/components/react/DataTable/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DataTable/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqH5C,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DataTable/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgH5C,CAAC"}

package/dist/react/components/react/DataTable/types.d.ts

@@ -12,7 +12,7 @@ export interface TableColumn {
 }
 export interface TableAction {
     key: string;
-    label: string;
+    label: React.ReactNode;
     icon?: React.ReactNode;
     variant?: 'primary' | 'secondary' | 'danger';
     disabled?: (item: any) => boolean;
@@ -53,5 +53,6 @@ export interface TableHeaderProps {
     onSort?: (column: string) => void;
     sortColumn?: string;
     sortDirection?: 'asc' | 'desc';
+    hasActions?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/react/components/react/DataTable/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DataTable/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;QACnC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;KACpC,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,cAAc,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,GAAG,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,aAAa,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CAChC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DataTable/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;QACnC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;KACpC,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,cAAc,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,GAAG,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,aAAa,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/react/components/react/DetailModal/DetailModal.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+export interface DetailModalProps {
+    /** Modal open state */
+    open: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Modal title */
+    title: string;
+    /** Header icon (left side, contextual to content) */
+    icon?: React.ReactNode;
+    /** Optional subtitle/description */
+    subtitle?: string;
+    /** Content (InfoBox, tables, data displays) */
+    children: React.ReactNode;
+    /** Close button text */
+    closeText?: string;
+    /** Optional action button */
+    action?: {
+        label: string;
+        onClick: () => void;
+        variant?: 'primary' | 'secondary' | 'ghost';
+        disabled?: boolean;
+    };
+    /** Modal size */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Additional className */
+    className?: string;
+}
+/**
+ * DetailModal - Normalized template for read-only detail modals
+ *
+ * Pattern extracted from GeographyDetailsModal, AuditLogDetailModal (backoffice)
+ * Provides consistent structure for viewing entity details
+ *
+ * @example
+ * <DetailModal
+ *   open={showDetails}
+ *   onClose={() => setShowDetails(false)}
+ *   title="User Details"
+ *   subtitle="Created on Jan 1, 2024"
+ *   action={{
+ *     label: 'Edit',
+ *     onClick: handleEdit,
+ *     variant: 'primary'
+ *   }}
+ * >
+ *   <InfoBox title="Basic Information">
+ *     <InfoRow label="Name" value={user.name} />
+ *     <InfoRow label="Email" value={user.email} />
+ *   </InfoBox>
+ * </DetailModal>
+ */
+export declare function DetailModal({ open, onClose, title, icon, subtitle, children, closeText, action, size, className }: DetailModalProps): import("react/jsx-runtime").JSX.Element;
+export default DetailModal;
+//# sourceMappingURL=DetailModal.d.ts.map

package/dist/react/components/react/DetailModal/DetailModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DetailModal/DetailModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;QAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAmB,EACnB,MAAM,EACN,IAAW,EACX,SAAc,EACf,EAAE,gBAAgB,2CAoHlB;AAED,eAAe,WAAW,CAAC"}

package/dist/react/components/react/DetailModal/index.d.ts

@@ -0,0 +1,3 @@
+export { DetailModal, type DetailModalProps } from './DetailModal';
+export { default } from './DetailModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/react/DetailModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/DetailModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/react/components/react/FormField/FormField.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface FormFieldProps {
+    /** Label text */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Helper text below the input */
+    helper?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Children (input element) */
+    children: React.ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * FormField - Normalized wrapper for form inputs
+ *
+ * Pattern extracted from AdminUserModal.tsx (backoffice/users)
+ * Provides consistent label, error, and helper text styling
+ */
+export declare function FormField({ label, required, error, helper, disabled, children, className }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export default FormField;
+//# sourceMappingURL=FormField.d.ts.map

package/dist/react/components/react/FormField/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/FormField/FormField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAgB,EAChB,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,QAAQ,EACR,SAAc,EACf,EAAE,cAAc,2CA+ChB;AAED,eAAe,SAAS,CAAC"}

package/dist/react/components/react/FormField/index.d.ts

@@ -0,0 +1,3 @@
+export { FormField, type FormFieldProps } from './FormField';
+export { default } from './FormField';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/react/FormField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/FormField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/react/components/react/FormGrid/FormGrid.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface FormGridProps {
+    /** Number of columns (1 or 2) */
+    columns?: 1 | 2;
+    /** Gap between fields */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Children (FormField components) */
+    children: React.ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * FormGrid - Normalized grid layout for form fields
+ *
+ * Pattern extracted from AdminUserModal.tsx (backoffice/users)
+ * Provides consistent 1 or 2 column layouts with proper gap
+ */
+export declare function FormGrid({ columns, gap, children, className }: FormGridProps): import("react/jsx-runtime").JSX.Element;
+export default FormGrid;
+//# sourceMappingURL=FormGrid.d.ts.map

package/dist/react/components/react/FormGrid/FormGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGrid.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/FormGrid/FormGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,yBAAyB;IACzB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAW,EACX,GAAU,EACV,QAAQ,EACR,SAAc,EACf,EAAE,aAAa,2CAaf;AAED,eAAe,QAAQ,CAAC"}

package/dist/react/components/react/FormGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { FormGrid, type FormGridProps } from './FormGrid';
+export { default } from './FormGrid';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/react/FormGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/FormGrid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}