@metropolle/design-system 1.0.0-beta.2025.8.31.328.22dd9a0 → 1.0.0-beta.2025.9.14.135.6a01a93

package/dist/css/compat/back.css

@@ -0,0 +1,462 @@
+/*
+  Back Compat CSS (opt-in)
+  Purpose: replicate current @back system-level styling with pixel parity,
+  without changing appearance. Import after base DS CSS.
+*/
+
+/* ================================
+   Buttons (theme-responsive)
+   ================================ */
+.mds-button--primary,
+button[class*="primary"] {
+  background-color: #60a5fa !important;
+  color: #ffffff !important;
+  border: none !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--primary:hover,
+button[class*="primary"]:hover {
+  background-color: #93c5fd !important;
+  transform: translateY(-1px) !important;
+}
+
+.mds-button--secondary,
+button[class*="secondary"] {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px) !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--secondary:hover,
+button[class*="secondary"]:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.mds-button--outline,
+button[class*="outline"] {
+  background-color: transparent !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--outline:hover,
+button[class*="outline"]:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.mds-button--glass,
+button[class*="glass"] {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px) !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--glass:hover,
+button[class*="glass"]:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  border-color: rgba(255, 255, 255, 0.3) 
+    !important;
+}
+
+.mds-button--ghost,
+button[class*="ghost"] {
+  background-color: transparent !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--ghost:hover,
+button[class*="ghost"]:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* Raw button baseline
+   Scope only to unstyled raw buttons to avoid overriding
+   components that set inline styles or DS classes */
+button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 8px !important;
+  padding: 0.5rem 1rem !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+  font-family: inherit !important;
+}
+
+button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]):hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+  transform: translateY(-1px) !important;
+}
+
+/* Modal close button: keep static (no lift) but preserve vertical centering */
+.mds-modal-header > button[aria-label="Fechar"],
+.mds-modal-header > button[aria-label="Fechar"]:hover,
+.mds-modal-header > button[aria-label="Fechar"]:focus,
+.mds-modal-header > button[aria-label="Fechar"]:focus-visible {
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  transition: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]):disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+  transform: none !important;
+}
+
+/* Light theme button overrides */
+html[data-theme="light"] .mds-button--primary,
+html[data-theme="light"] button[class*="primary"] {
+  background-color: #3b82f6 !important;
+  color: #ffffff !important;
+}
+
+html[data-theme="light"] .mds-button--primary:hover,
+html[data-theme="light"] button[class*="primary"]:hover {
+  background-color: #2563eb !important;
+}
+
+html[data-theme="light"] .mds-button--secondary,
+html[data-theme="light"] button[class*="secondary"] {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+html[data-theme="light"] .mds-button--secondary:hover,
+html[data-theme="light"] button[class*="secondary"]:hover {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+html[data-theme="light"] .mds-button--outline,
+html[data-theme="light"] button[class*="outline"] {
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+html[data-theme="light"] .mds-button--outline:hover,
+html[data-theme="light"] button[class*="outline"]:hover {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  border-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+html[data-theme="light"] .mds-button--glass,
+html[data-theme="light"] button[class*="glass"] {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+html[data-theme="light"] .mds-button--glass:hover,
+html[data-theme="light"] button[class*="glass"]:hover {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+html[data-theme="light"] .mds-button--ghost,
+html[data-theme="light"] button[class*="ghost"] {
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+html[data-theme="light"] .mds-button--ghost:hover,
+html[data-theme="light"] button[class*="ghost"]:hover {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+html[data-theme="light"] button {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+html[data-theme="light"] button:hover {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+/* ========================================
+   Selects and period filter (theme-responsive)
+   ======================================== */
+select,
+.mds-period-filter__select {
+  /* Match DS ghost button default state */
+  background-color: transparent !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 0.5rem 1rem !important;
+  font-family: inherit !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  -webkit-appearance: none !important;
+     -moz-appearance: none !important;
+          appearance: none !important;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
+  background-position: right 0.5rem center !important;
+  background-repeat: no-repeat !important;
+  background-size: 1rem 1rem !important;
+  padding-right: 2.5rem !important;
+}
+
+select:hover,
+.mds-period-filter__select:hover {
+  /* Same hover treatment as DS ghost */
+  background-color: var(--mds-color-background-secondary) !important;
+}
+
+select:focus,
+.mds-period-filter__select:focus {
+  outline: none !important;
+  border-color: #60a5fa !important;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
+}
+
+select:disabled,
+.mds-period-filter__select:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+}
+
+select option {
+  background-color: rgba(30, 30, 30, 0.95) !important;
+  color: #ffffff !important;
+  padding: 0.5rem !important;
+}
+
+/* Light theme select styles */
+html[data-theme="light"] select,
+html[data-theme="light"] .mds-period-filter__select {
+  background-color: transparent !important;
+  color: #1a1a1a !important;
+  border: none !important;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
+}
+
+html[data-theme="light"] select:hover,
+html[data-theme="light"] .mds-period-filter__select:hover {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+}
+
+html[data-theme="light"] select:focus,
+html[data-theme="light"] .mds-period-filter__select:focus {
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
+
+html[data-theme="light"] select option {
+  background-color: rgba(250, 250, 250, 0.95) !important;
+  color: #1a1a1a !important;
+}
+
+/* Dashboard controls */
+.mds-dashboard-controls {
+  display: flex !important;
+  gap: 1rem !important;
+  align-items: center !important;
+  flex-wrap: wrap !important;
+}
+
+.mds-period-filter {
+  position: relative !important;
+  min-width: 150px !important;
+}
+
+/* ========================================
+   Inputs and selects (mds-*)
+   ======================================== */
+.mds-input,
+input.mds-input {
+  padding: 8px 12px !important;
+  min-height: 36px !important;
+  max-height: 36px !important;
+  height: 36px !important;
+  font-size: 14px !important;
+  line-height: 1.4 !important;
+  box-sizing: border-box !important;
+}
+
+/* Dark theme input overrides */
+html[data-theme="dark"] .mds-input,
+html[data-theme="dark"] input.mds-input,
+html:not([data-theme]) .mds-input,
+html:not([data-theme]) input.mds-input {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  border-color: rgba(255, 255, 255, 0.4) !important;
+  color: #ffffff !important;
+}
+
+html[data-theme="dark"] .mds-input:focus,
+html[data-theme="dark"] input.mds-input:focus,
+html:not([data-theme]) .mds-input:focus,
+html:not([data-theme]) input.mds-input:focus {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-color: #60a5fa !important;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important;
+}
+
+html[data-theme="dark"] .mds-input:hover,
+html[data-theme="dark"] input.mds-input:hover,
+html:not([data-theme]) .mds-input:hover,
+html:not([data-theme]) input.mds-input:hover {
+  background-color: rgba(255, 255, 255, 0.18) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Light theme input overrides */
+html[data-theme="light"] .mds-input,
+html[data-theme="light"] input.mds-input {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.2) !important;
+  color: #1a1a1a !important;
+}
+
+html[data-theme="light"] .mds-input:focus,
+html[data-theme="light"] input.mds-input:focus {
+  background-color: #ffffff !important;
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
+
+html[data-theme="light"] .mds-input:hover,
+html[data-theme="light"] input.mds-input:hover {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Placeholder overrides */
+html[data-theme="dark"] .mds-input::-moz-placeholder, html[data-theme="dark"] input.mds-input::-moz-placeholder, html:not([data-theme]) .mds-input::-moz-placeholder, html:not([data-theme]) input.mds-input::-moz-placeholder {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+html[data-theme="dark"] .mds-input::placeholder,
+html[data-theme="dark"] input.mds-input::placeholder,
+html:not([data-theme]) .mds-input::placeholder,
+html:not([data-theme]) input.mds-input::placeholder {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+
+html[data-theme="light"] .mds-input::-moz-placeholder, html[data-theme="light"] input.mds-input::-moz-placeholder {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+html[data-theme="light"] .mds-input::placeholder,
+html[data-theme="light"] input.mds-input::placeholder {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Ultra high priority input overrides */
+input.mds-input,
+.mds-input,
+input[class*="mds-input"] {
+  padding: 8px 16px !important;
+  min-height: 40px !important;
+  max-height: 40px !important;
+  height: 40px !important;
+  font-size: 14px !important;
+  line-height: 1.4 !important;
+  box-sizing: border-box !important;
+  border-radius: 8px !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+}
+
+/* Dark theme - ultra specific */
+html[data-theme="dark"] input.mds-input,
+html[data-theme="dark"] .mds-input,
+html[data-theme="dark"] input[class*="mds-input"],
+html:not([data-theme]) input.mds-input,
+html:not([data-theme]) .mds-input,
+html:not([data-theme]) input[class*="mds-input"] {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+  color: #ffffff !important;
+}
+
+html[data-theme="dark"] input.mds-input:focus,
+html[data-theme="dark"] .mds-input:focus,
+html[data-theme="dark"] input[class*="mds-input"]:focus,
+html:not([data-theme]) input.mds-input:focus,
+html:not([data-theme]) .mds-input:focus,
+html:not([data-theme]) input[class*="mds-input"]:focus {
+  background-color: rgba(255, 255, 255, 0.25) !important;
+  border-color: #60a5fa !important;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important;
+}
+
+/* Light theme - ultra specific */
+html[data-theme="light"] input.mds-input,
+html[data-theme="light"] .mds-input,
+html[data-theme="light"] input[class*="mds-input"] {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+  color: #1a1a1a !important;
+}
+
+html[data-theme="light"] input.mds-input:focus,
+html[data-theme="light"] .mds-input:focus,
+html[data-theme="light"] input[class*="mds-input"]:focus {
+  background-color: #ffffff !important;
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
+
+/* Select overrides with maximum specificity */
+select.mds-select,
+.mds-select,
+select[class*="mds-select"] {
+  padding: 8px 16px !important;
+  min-height: 40px !important;
+  max-height: 40px !important;
+  height: 40px !important;
+  font-size: 14px !important;
+  line-height: 1.4 !important;
+  box-sizing: border-box !important;
+  border-radius: 8px !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+}
+
+/* Dark theme select overrides */
+html[data-theme="dark"] select.mds-select,
+html[data-theme="dark"] .mds-select,
+html[data-theme="dark"] select[class*="mds-select"],
+html:not([data-theme]) select.mds-select,
+html:not([data-theme]) .mds-select,
+html:not([data-theme]) select[class*="mds-select"] {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+  color: #ffffff !important;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
+}
+
+/* Light theme select overrides */
+html[data-theme="light"] select.mds-select,
+html[data-theme="light"] .mds-select,
+html[data-theme="light"] select[class*="mds-select"] {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+  color: #1a1a1a !important;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
+}

package/dist/css/components.css

@@ -169,18 +169,39 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
     inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
 }
 
-/* Header button sizing + alignment */
+/* Header close button sizing + alignment */
 .mds-modal-header > button[aria-label="Fechar"] {
+  /* Size and reset */
   font-size: 1rem !important;
   line-height: 1 !important;
-  padding: 4px 8px !important;
   transition: none !important;
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  /* Colors from DS tokens with robust fallback */
+  color: var(--mds-color-text-secondary, var(--text-secondary, rgba(0,0,0,0.65))) !important;
+  /* Absolute centering like the left icon */
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  width: 32px !important;
+  height: 32px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 .mds-modal-header > button[aria-label="Fechar"]:hover,
-.mds-modal-header > button[aria-label="Fechar"]:focus {
-  transform: none !important;
-  transition: none !important;
+.mds-modal-header > button[aria-label="Fechar"]:focus,
+.mds-modal-header > button[aria-label="Fechar"]:focus-visible {
+  /* Keep centered on interactive states and avoid lifts/shadows */
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
   box-shadow: none !important;
+  transition: none !important;
+  color: var(--mds-color-text-primary, var(--text-primary, #111827)) !important;
 }
 
 /* Responsive modal */
@@ -592,11 +613,11 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
 
 /* Theme Support - Default (Dark Theme) */
 :root {
-  /* Dashboard Control Variables - Dark Theme */
-  --mds-dashboard-control-bg: rgba(255, 255, 255, 0.15);
-  --mds-dashboard-control-bg-hover: rgba(255, 255, 255, 0.25);
+  /* Dashboard Control Variables - Dark Theme (default) */
+  --mds-dashboard-control-bg: rgba(0, 0, 0, 0.35);
+  --mds-dashboard-control-bg-hover: rgba(0, 0, 0, 0.5);
   --mds-dashboard-control-color: #ffffff;
-  --mds-dashboard-control-border: rgba(255, 255, 255, 0.2);
+  --mds-dashboard-control-border: rgba(255, 255, 255, 0.18);
   --mds-dashboard-control-border-disabled: rgba(255, 255, 255, 0.3);
   --mds-dashboard-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   --mds-dashboard-control-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
@@ -605,8 +626,56 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   /* Dropdown Options - Dark Theme */
   --mds-dashboard-control-option-bg: #2a2a2a;
   --mds-dashboard-control-option-color: #ffffff;
+  
+  /* Login specific variables - Dark Theme */
+  --mds-login-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
+  --mds-input-bg: rgba(255, 255, 255, 0.1);
+  --mds-input-focus-border: #aaaaaa;
+  --mds-input-focus-bg: rgba(255, 255, 255, 0.15);
+  --mds-input-focus-shadow: 0 4px 12px rgba(170, 170, 170, 0.2);
+  --mds-error-bg: rgba(200, 200, 200, 0.15);
+  --mds-error-border: rgba(200, 200, 200, 0.3);
+}
+
+/* Theme Toggle (square, themed) */
+.mds-theme-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mds-theme-toggle-size, 2.5rem);
+  height: var(--mds-theme-toggle-size, 2.5rem);
+  min-width: var(--mds-theme-toggle-size, 2.5rem);
+  padding: 0;
+  border-radius: var(--mds-spacing-borderRadius-md);
+  border: 1px solid var(--mds-dashboard-control-border);
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  box-shadow: var(--mds-dashboard-control-shadow);
+  cursor: pointer;
+  outline: none;
+  transition: var(--mds-effects-transition-normal);
 }
 
+.mds-theme-toggle:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+.mds-theme-toggle:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+  background-color: transparent !important;
+  border: 2px solid var(--mds-dashboard-control-border-disabled);
+  box-shadow: none !important;
+}
+
+.mds-theme-toggle--sm { --mds-theme-toggle-size: 2rem; }
+.mds-theme-toggle--md { --mds-theme-toggle-size: 2.5rem; }
+.mds-theme-toggle--lg { --mds-theme-toggle-size: 3rem; }
+
+/* Theme toggle uses SVG icons directly in React component */
+
 /* Light Theme Support */
 [data-theme="light"] {
   --mds-dashboard-control-bg: rgba(0, 0, 0, 0.1);
@@ -621,6 +690,15 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   /* Dropdown Options - Light Theme */
   --mds-dashboard-control-option-bg: #ffffff;
   --mds-dashboard-control-option-color: #1a1a1a;
+  
+  /* Login specific variables - Light Theme */
+  --mds-login-bg: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 50%, #dcdcdc 100%);
+  --mds-input-bg: rgba(255, 255, 255, 0.8);
+  --mds-input-focus-border: #666666;
+  --mds-input-focus-bg: rgba(255, 255, 255, 1);
+  --mds-input-focus-shadow: 0 4px 12px rgba(102, 102, 102, 0.15);
+  --mds-error-bg: rgba(150, 150, 150, 0.1);
+  --mds-error-border: rgba(150, 150, 150, 0.3);
 }
 
 /* Form Input Styles */

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

@@ -0,0 +1,19 @@
+import React, { SelectHTMLAttributes } from 'react';
+export interface SelectOption {
+    label: React.ReactNode;
+    value: string;
+}
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    options?: SelectOption[];
+    variant?: 'base' | 'dashboard';
+    containerClassName?: string;
+}
+/**
+ * Select Component (Design System)
+ *
+ * Provides a themed select element. The `dashboard` variant uses the
+ * dashboard control styles/tokens to match the Refresh button styling
+ * across light/dark themes.
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAE1E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,uFAsCjB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Select, type SelectProps, type SelectOption } from './Select';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface ThemeToggleProps {
+    /**
+     * Size variant of the toggle button
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * CSS class name to apply
+     */
+    className?: string;
+    /**
+     * Whether the toggle is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when theme changes
+     */
+    onChange?: (theme: 'light' | 'dark') => void;
+    /**
+     * Storage key for persisting theme preference
+     * @default 'theme'
+     */
+    storageKey?: string;
+}
+export default function ThemeToggle({ size, className, disabled, onChange, storageKey }: ThemeToggleProps): React.JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ThemeToggle/ThemeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAE7C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAW,EACX,SAAc,EACd,QAAgB,EAChB,QAAQ,EACR,UAAoB,EACrB,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuFtC"}

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

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

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

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

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

@@ -1,13 +1,17 @@
 export { GlassCard, type GlassCardProps } from './GlassCard';
 export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './Typography';
 export { Button, type ButtonProps } from './Button';
+export { Select, type SelectProps } from './Select';
+export { ThemeToggle, type ThemeToggleProps } from './ThemeToggle';
 export { cn } from '../../utils/cn';
 export * from './GlassCard';
 export * from './Typography';
 export * from './Button';
+export * from './Select';
 export * from './Modal/Modal';
 export * from './Modal/ModalHeader';
 export * from './Modal/ModalBody';
 export * from './Modal/ModalFooter';
 export * from './Modal/ConfirmDialog';
+export * from './ThemeToggle';
 //# sourceMappingURL=index.d.ts.map