xertica-ui 2.2.1 → 2.4.0

package/styles/xertica/base.css

@@ -1,71 +1,90 @@
-/* ============================================
-   🧱 BASE STYLES
-   ============================================ */
-
-@import 'tailwindcss';
-@plugin "tailwindcss-animate";
-
-@custom-variant dark (&:is(.dark *));
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-family: 'Roboto', sans-serif;
-  }
-
-  html {
-    font-size: var(--font-size);
-  }
-
-  h1 {
-    font-size: var(--text-h1);
-    font-weight: var(--font-weight-extrabold);
-    line-height: 1.2;
-  }
-
-  h2 {
-    font-size: var(--text-h2);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.2;
-  }
-
-  h3 {
-    font-size: var(--text-h3);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.2;
-  }
-
-  h4 {
-    font-size: var(--text-h4);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.2;
-  }
-
-  p {
-    font-size: var(--text-p);
-    font-weight: var(--font-weight-regular);
-    line-height: 1.5;
-  }
-
-  label {
-    font-size: var(--text-label);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.3;
-  }
-
-  button {
-    font-size: var(--text-small);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.4;
-  }
-
-  input {
-    font-size: var(--text-small);
-    font-weight: var(--font-weight-regular);
-    line-height: 1.4;
-  }
-}
+/* ============================================
+   🧱 BASE STYLES
+   ============================================ */
+
+@import 'tailwindcss';
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant mobile (@media (max-width: 767px));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html,
+  body {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Roboto', sans-serif;
+  }
+
+  html {
+    font-size: var(--font-size);
+  }
+
+  h1 {
+    font-size: var(--text-h1);
+    font-weight: var(--font-weight-extrabold);
+    line-height: 1.2;
+  }
+
+  h2 {
+    font-size: var(--text-h2);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  h3 {
+    font-size: var(--text-h3);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  h4 {
+    font-size: var(--text-h4);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  p {
+    font-size: var(--text-p);
+    font-weight: var(--font-weight-regular);
+    line-height: 1.5;
+  }
+
+  label {
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.3;
+  }
+
+  button {
+    font-size: var(--text-small);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.4;
+  }
+
+  input {
+    font-size: var(--text-small);
+    font-weight: var(--font-weight-regular);
+    line-height: 1.4;
+  }
+}
+
+@layer utilities {
+  /* Global mobile content padding utility class.
+     Add class="content-area" to any wrapper to receive the mobile padding.
+     Change --mobile-content-padding in tokens.css to adjust globally. */
+  @media (max-width: 767px) {
+    .content-area {
+      padding-left: var(--mobile-content-padding);
+      padding-right: var(--mobile-content-padding);
+    }
+  }
+}

package/styles/xertica/integrations/google-maps.css

@@ -1,76 +1,76 @@
-/* ============================================
-   🧩 INTEGRATION: GOOGLE MAPS
-   ============================================ */
-
-/* Google Maps InfoWindow Customization */
-.gm-style .gm-style-iw-c {
-  background-color: var(--popover) !important;
-  border-radius: var(--radius-lg) !important;
-  box-shadow: var(--elevation-sm) !important;
-  padding: 0 !important;
-  border: 1px solid var(--border) !important;
-}
-
-.gm-style .gm-style-iw-d {
-  overflow: auto !important;
-  max-height: none !important;
-}
-
-/* Fix for Native POIs */
-.gm-style .gm-style-iw-c .gm-style-iw-ch {
-  padding-top: var(--spacing-3) !important;
-  padding-left: var(--spacing-4) !important;
-  padding-right: var(--spacing-8) !important;
-  padding-bottom: var(--spacing-2) !important;
-}
-
-.gm-style .gm-style-iw-c .gm-style-iw-d .poi-info-window,
-.gm-style .gm-style-iw-c .gm-style-iw-d .transit-container {
-  padding: var(--spacing-4) !important;
-  padding-top: 0 !important;
-}
-
-/* Close button - popover style */
-.gm-style .gm-ui-hover-effect {
-  opacity: 1 !important;
-  width: 32px !important;
-  height: 32px !important;
-  top: 8px !important;
-  right: 8px !important;
-  background-color: var(--muted) !important;
-  border-radius: var(--radius) !important;
-  transition: all 0.2s ease !important;
-}
-
-.gm-style .gm-ui-hover-effect:hover {
-  background-color: var(--accent) !important;
-}
-
-.gm-style .gm-ui-hover-effect > span {
-  background-color: var(--foreground) !important;
-  width: 14px !important;
-  height: 14px !important;
-  margin: 9px !important;
-}
-
-/* InfoWindow Tip - popover style */
-.gm-style .gm-style-iw-t::after {
-  background: var(--popover) !important;
-  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
-  border: 1px solid var(--border) !important;
-}
-
-/* Custom Content Class */
-.xertica-infowindow-content {
-  font-family: 'Roboto', sans-serif !important;
-  color: var(--popover-foreground) !important;
-}
-
-.xertica-infowindow-content * {
-  font-family: 'Roboto', sans-serif !important;
-}
-
-/* Standard content override */
-.gm-style .gm-style-iw-c * {
-  font-family: 'Roboto', sans-serif !important;
-}
+/* ============================================
+   🧩 INTEGRATION: GOOGLE MAPS
+   ============================================ */
+
+/* Google Maps InfoWindow Customization */
+.gm-style .gm-style-iw-c {
+  background-color: var(--popover) !important;
+  border-radius: var(--radius-lg) !important;
+  box-shadow: var(--elevation-sm) !important;
+  padding: 0 !important;
+  border: 1px solid var(--border) !important;
+}
+
+.gm-style .gm-style-iw-d {
+  overflow: auto !important;
+  max-height: none !important;
+}
+
+/* Fix for Native POIs */
+.gm-style .gm-style-iw-c .gm-style-iw-ch {
+  padding-top: var(--spacing-3) !important;
+  padding-left: var(--spacing-4) !important;
+  padding-right: var(--spacing-8) !important;
+  padding-bottom: var(--spacing-2) !important;
+}
+
+.gm-style .gm-style-iw-c .gm-style-iw-d .poi-info-window,
+.gm-style .gm-style-iw-c .gm-style-iw-d .transit-container {
+  padding: var(--spacing-4) !important;
+  padding-top: 0 !important;
+}
+
+/* Close button - popover style */
+.gm-style .gm-ui-hover-effect {
+  opacity: 1 !important;
+  width: 32px !important;
+  height: 32px !important;
+  top: 8px !important;
+  right: 8px !important;
+  background-color: var(--muted) !important;
+  border-radius: var(--radius) !important;
+  transition: all 0.2s ease !important;
+}
+
+.gm-style .gm-ui-hover-effect:hover {
+  background-color: var(--accent) !important;
+}
+
+.gm-style .gm-ui-hover-effect > span {
+  background-color: var(--foreground) !important;
+  width: 14px !important;
+  height: 14px !important;
+  margin: 9px !important;
+}
+
+/* InfoWindow Tip - popover style */
+.gm-style .gm-style-iw-t::after {
+  background: var(--popover) !important;
+  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid var(--border) !important;
+}
+
+/* Custom Content Class */
+.xertica-infowindow-content {
+  font-family: 'Roboto', sans-serif !important;
+  color: var(--popover-foreground) !important;
+}
+
+.xertica-infowindow-content * {
+  font-family: 'Roboto', sans-serif !important;
+}
+
+/* Standard content override */
+.gm-style .gm-style-iw-c * {
+  font-family: 'Roboto', sans-serif !important;
+}

package/styles/xertica/integrations/sonner.css

@@ -1,73 +1,73 @@
-/* ============================================
-   🧩 INTEGRATION: SONNER
-   ============================================ */
-
-/* Sonner Toast customization - styling Alert-like (borderless, flat, colored icons) */
-[data-sonner-toast] {
-  font-family: 'Roboto', sans-serif !important;
-  border-radius: var(--radius) !important;
-  background: var(--card) !important;
-  border: 0 !important;
-  border-left: 4px solid transparent !important;
-  box-shadow: var(--elevation-sm) !important;
-  color: var(--foreground) !important;
-  padding: 1rem !important;
-}
-
-[data-sonner-toast][data-type='success'] {
-  background: var(--toast-success-bg) !important;
-  border-left-color: var(--toast-success-border) !important;
-}
-
-[data-sonner-toast][data-type='success'] [data-icon] {
-  color: var(--toast-success-icon) !important;
-}
-
-[data-sonner-toast][data-type='warning'] {
-  background: var(--toast-warning-bg) !important;
-  border-left-color: var(--toast-warning-border) !important;
-}
-
-[data-sonner-toast][data-type='warning'] [data-icon] {
-  color: var(--toast-warning-icon) !important;
-}
-
-[data-sonner-toast][data-type='info'] {
-  background: var(--toast-info-bg) !important;
-  border-left-color: var(--toast-info-border) !important;
-}
-
-[data-sonner-toast][data-type='info'] [data-icon] {
-  color: var(--toast-info-icon) !important;
-}
-
-[data-sonner-toast][data-type='error'] {
-  background: var(--toast-error-bg) !important;
-  border-left-color: var(--toast-error-border) !important;
-}
-
-[data-sonner-toast][data-type='error'] [data-icon] {
-  color: var(--toast-error-icon) !important;
-}
-
-/* Toast description text */
-[data-sonner-toast] [data-description] {
-  color: var(--foreground) !important;
-  opacity: 0.9;
-}
-
-/* Toast buttons */
-[data-sonner-toast] [data-button] {
-  font-family: 'Roboto', sans-serif !important;
-  border-radius: var(--radius) !important;
-}
-
-[data-sonner-toast] [data-button][data-primary] {
-  background: var(--primary) !important;
-  color: var(--primary-foreground) !important;
-}
-
-[data-sonner-toast] [data-button][data-cancel] {
-  background: var(--muted) !important;
-  color: var(--muted-foreground) !important;
-}
+/* ============================================
+   🧩 INTEGRATION: SONNER
+   ============================================ */
+
+/* Sonner Toast customization - styling Alert-like (borderless, flat, colored icons) */
+[data-sonner-toast] {
+  font-family: 'Roboto', sans-serif !important;
+  border-radius: var(--radius) !important;
+  background: var(--card) !important;
+  border: 0 !important;
+  border-left: 4px solid transparent !important;
+  box-shadow: var(--elevation-sm) !important;
+  color: var(--foreground) !important;
+  padding: 1rem !important;
+}
+
+[data-sonner-toast][data-type='success'] {
+  background: var(--toast-success-bg) !important;
+  border-left-color: var(--toast-success-border) !important;
+}
+
+[data-sonner-toast][data-type='success'] [data-icon] {
+  color: var(--toast-success-icon) !important;
+}
+
+[data-sonner-toast][data-type='warning'] {
+  background: var(--toast-warning-bg) !important;
+  border-left-color: var(--toast-warning-border) !important;
+}
+
+[data-sonner-toast][data-type='warning'] [data-icon] {
+  color: var(--toast-warning-icon) !important;
+}
+
+[data-sonner-toast][data-type='info'] {
+  background: var(--toast-info-bg) !important;
+  border-left-color: var(--toast-info-border) !important;
+}
+
+[data-sonner-toast][data-type='info'] [data-icon] {
+  color: var(--toast-info-icon) !important;
+}
+
+[data-sonner-toast][data-type='error'] {
+  background: var(--toast-error-bg) !important;
+  border-left-color: var(--toast-error-border) !important;
+}
+
+[data-sonner-toast][data-type='error'] [data-icon] {
+  color: var(--toast-error-icon) !important;
+}
+
+/* Toast description text */
+[data-sonner-toast] [data-description] {
+  color: var(--foreground) !important;
+  opacity: 0.9;
+}
+
+/* Toast buttons */
+[data-sonner-toast] [data-button] {
+  font-family: 'Roboto', sans-serif !important;
+  border-radius: var(--radius) !important;
+}
+
+[data-sonner-toast] [data-button][data-primary] {
+  background: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+}
+
+[data-sonner-toast] [data-button][data-cancel] {
+  background: var(--muted) !important;
+  color: var(--muted-foreground) !important;
+}

package/styles/xertica/theme-map.css

@@ -1,99 +1,102 @@
-/* ============================================
-   🎨 THEME MAPPING
-   ============================================ */
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary-light: var(--primary-light);
-  --color-primary-light-foreground: var(--primary-light-foreground);
-
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-
-  /* Semantic Status Colors */
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-input-background: var(--input-background);
-  --color-ring: var(--ring);
-
-  /* Sidebar */
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Charts */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  /* Radius */
-  --radius: var(--radius);
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 6px);
-  --radius-xl: calc(var(--radius) + 12px);
-  --radius-2xl: calc(var(--radius) + 18px);
-  --radius-3xl: calc(var(--radius) + 24px);
-  --radius-button: var(--radius-button);
-  --radius-card: var(--radius-card);
-
-  /* Shadow */
-  --shadow-elevation-sm: var(--elevation-sm);
-
-  /* Brand Specific (for fallbacks) */
-  --color-xertica-primary: var(--xertica-primary);
-  --color-xertica-dark: var(--xertica-dark);
-
-  /* Gradients */
-  --image-gradient-diagonal: var(--gradient-diagonal);
-
-  /* Typography */
-  --text-h1: var(--text-h1);
-  --text-h2: var(--text-h2);
-  --text-h3: var(--text-h3);
-  --text-h4: var(--text-h4);
-  --text-base: var(--text-base);
-  --text-p: var(--text-p);
-  --text-label: var(--text-label);
-  --text-small: var(--text-small);
-  --text-xs: var(--text-xs);
-  --text-muted: var(--text-muted);
-  --text-table-head: var(--text-table-head);
-
-  --font-weight-regular: var(--font-weight-regular);
-  --font-weight-medium: var(--font-weight-medium);
-  --font-weight-semibold: var(--font-weight-semibold);
-  --font-weight-bold: var(--font-weight-bold);
-  --font-weight-extrabold: var(--font-weight-extrabold);
-}
+/* ============================================
+   🎨 THEME MAPPING
+   ============================================ */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-light: var(--primary-light);
+  --color-primary-light-foreground: var(--primary-light-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  /* Semantic Status Colors */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-ring: var(--ring);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Radius */
+  --radius: var(--radius);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 6px);
+  --radius-xl: calc(var(--radius) + 12px);
+  --radius-2xl: calc(var(--radius) + 18px);
+  --radius-3xl: calc(var(--radius) + 24px);
+  --radius-button: var(--radius-button);
+  --radius-card: var(--radius-card);
+
+  /* Shadow */
+  --shadow-elevation-sm: var(--elevation-sm);
+
+  /* Mobile Content Padding */
+  --spacing-mobile-content-padding: var(--mobile-content-padding);
+
+  /* Brand Specific (for fallbacks) */
+  --color-xertica-primary: var(--xertica-primary);
+  --color-xertica-dark: var(--xertica-dark);
+
+  /* Gradients */
+  --image-gradient-diagonal: var(--gradient-diagonal);
+
+  /* Typography */
+  --text-h1: var(--text-h1);
+  --text-h2: var(--text-h2);
+  --text-h3: var(--text-h3);
+  --text-h4: var(--text-h4);
+  --text-base: var(--text-base);
+  --text-p: var(--text-p);
+  --text-label: var(--text-label);
+  --text-small: var(--text-small);
+  --text-xs: var(--text-xs);
+  --text-muted: var(--text-muted);
+  --text-table-head: var(--text-table-head);
+
+  --font-weight-regular: var(--font-weight-regular);
+  --font-weight-medium: var(--font-weight-medium);
+  --font-weight-semibold: var(--font-weight-semibold);
+  --font-weight-bold: var(--font-weight-bold);
+  --font-weight-extrabold: var(--font-weight-extrabold);
+}