@optimum-intelligence/opti-ui 0.3.0 → 0.5.0

package/dist/opti-ui.css

@@ -33,9 +33,18 @@
     --oui-radius-md: 12px;
     --oui-radius-card: 16px;
     --oui-radius-pill: 999px;
-    --oui-control-height-sm: 2rem;
-    --oui-control-height-md: 2.5rem;
-    --oui-control-height-lg: 3rem;
+    --oui-space-1: 0.125rem;
+    --oui-space-2: 0.25rem;
+    --oui-space-3: 0.375rem;
+    --oui-space-4: 0.5rem;
+    --oui-space-5: 0.625rem;
+    --oui-space-6: 0.75rem;
+    --oui-space-8: 1rem;
+    --oui-space-10: 1.25rem;
+    --oui-space-12: 1.5rem;
+    --oui-control-height-sm: 1.75rem;
+    --oui-control-height-md: 2.25rem;
+    --oui-control-height-lg: 2.75rem;
     --oui-control-border-width: 2px;
     --oui-control-disabled-opacity: 0.5;
     --oui-duration-fast: 0.15s;
@@ -501,7 +510,7 @@
     align-items: center;
     gap: 0.7rem;
     width: 100%;
-    padding: 0.55rem 0.7rem;
+    padding: var(--oui-space-3) 0.7rem;
     border: 0;
     border-radius: var(--oui-radius-control);
     background: transparent;
@@ -566,6 +575,41 @@
     line-height: 1.3;
     text-align: center;
   }
+  .oui-navbar__item-chevron {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    opacity: 0.7;
+    transition: transform var(--oui-duration-normal) var(--oui-ease-out), opacity var(--oui-duration-fast) var(--oui-ease) var(--oui-duration-normal);
+  }
+  [data-open] > .oui-navbar__item-chevron {
+    transform: rotate(90deg);
+  }
+  .oui-navbar__group {
+    display: flex;
+    flex-direction: column;
+  }
+  .oui-navbar__group-panel {
+    height: var(--collapsible-panel-height);
+    overflow: hidden;
+    transition: height var(--oui-duration-normal) var(--oui-ease-out);
+  }
+  .oui-navbar__group-panel[data-starting-style], .oui-navbar__group-panel[data-ending-style] {
+    height: 0;
+  }
+  .oui-navbar__group-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    margin: 0.15rem 0 0.15rem 1.625rem;
+    padding-left: var(--oui-space-3);
+    border-left: 1px solid var(--_border);
+  }
+  .oui-navbar__group-items .oui-navbar__item {
+    padding-block: var(--oui-space-2);
+    padding-left: calc(1.625rem - 1px - var(--oui-space-3));
+    font-size: var(--oui-font-size-sm);
+  }
   .oui-navbar__footer {
     display: flex;
     flex-direction: column;
@@ -577,7 +621,7 @@
   .oui-navbar__toggle {
     position: absolute;
     top: 1.625rem;
-    right: 0.75rem;
+    left: calc(100% - 2.75rem);
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -590,7 +634,7 @@
     background: transparent;
     color: var(--_fg-muted);
     cursor: pointer;
-    transition: top var(--_motion), right var(--_motion), background-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
+    transition: top var(--_motion), left var(--_motion), background-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
   }
   .oui-navbar__toggle svg {
     flex-shrink: 0;
@@ -623,6 +667,7 @@
   .oui-navbar[data-collapsed] .oui-navbar__toggle,
   .oui-navbar[data-peek] .oui-navbar__toggle {
     top: 1.125rem;
+    left: calc((var(--oui-navbar-collapsed-width, 4.25rem) - 2rem) / 2);
   }
   .oui-navbar[data-collapsed] .oui-navbar__header,
   .oui-navbar[data-peek] .oui-navbar__header {
@@ -632,14 +677,12 @@
     width: var(--oui-navbar-collapsed-width, 4.25rem);
     padding-inline: 0.5rem;
   }
-  .oui-navbar[data-collapsed] .oui-navbar__toggle {
-    right: calc((var(--oui-navbar-collapsed-width, 4.25rem) - 2rem) / 2);
-  }
   .oui-navbar[data-collapsed] .oui-navbar__header {
     padding-inline: 0;
   }
   .oui-navbar[data-collapsed] .oui-navbar__brand-text,
-  .oui-navbar[data-collapsed] .oui-navbar__item-label {
+  .oui-navbar[data-collapsed] .oui-navbar__item-label,
+  .oui-navbar[data-collapsed] .oui-navbar__item-chevron {
     opacity: 0;
     transition: opacity var(--oui-duration-fast) var(--oui-ease);
   }
@@ -649,6 +692,9 @@
     color: transparent;
     font-size: 0;
   }
+  .oui-navbar[data-collapsed] .oui-navbar__group-panel {
+    display: none;
+  }
   .oui-navbar[data-collapsed] .oui-navbar__item-badge {
     position: absolute;
     top: 0.3rem;
@@ -709,39 +755,82 @@
     overflow-y: auto;
     background: var(--oui-app-shell-bg, var(--oui-color-bg));
   }
-  .oui-app-shell__mobile-bar {
+  .oui-app-shell__mobile-bar,
+  .oui-app-shell__tabbar {
     display: none;
   }
-  .oui-app-shell__menu-button,
-  .oui-app-shell__drawer-close {
-    display: inline-flex;
+  .oui-app-shell__tabbar {
+    gap: 0.25rem;
+    padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom));
+    border-top: 1px solid var(--oui-color-inverse-border);
+    background: var(--oui-navbar-bg, var(--oui-color-inverse));
+    color: var(--oui-color-on-inverse-muted);
+  }
+  .oui-app-shell__tabbar[data-position=top] {
+    padding-bottom: 0.3rem;
+    border-top: 0;
+    border-bottom: 1px solid var(--oui-color-inverse-border);
+  }
+  .oui-app-shell__tab {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    padding: 0;
+    gap: 0.2rem;
+    min-width: 0;
+    padding: 0.3rem 0.25rem;
     border: 0;
     border-radius: var(--oui-radius-control);
     background: transparent;
     color: inherit;
+    font-size: var(--oui-font-size-2xs);
+    font-weight: var(--oui-font-weight-medium);
+    text-decoration: none;
     cursor: pointer;
-    transition: background-color var(--oui-duration-fast) var(--oui-ease);
-  }
-  .oui-app-shell__menu-button svg,
-  .oui-app-shell__drawer-close svg {
-    flex-shrink: 0;
-    width: 1.3rem;
-    height: 1.3rem;
+    transition: background-color var(--oui-duration-fast) var(--oui-ease), color var(--oui-duration-fast) var(--oui-ease);
   }
-  .oui-app-shell__menu-button:hover,
-  .oui-app-shell__drawer-close:hover {
+  .oui-app-shell__tab:hover {
     background: var(--oui-color-inverse-hover);
+    color: var(--oui-color-on-inverse);
   }
-  .oui-app-shell__menu-button:focus-visible,
-  .oui-app-shell__drawer-close:focus-visible {
+  .oui-app-shell__tab:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: -2px;
   }
+  .oui-app-shell__tab[data-active] {
+    color: var(--oui-color-on-inverse);
+    font-weight: var(--oui-font-weight-semibold);
+  }
+  .oui-app-shell__tab[data-active] .oui-app-shell__tab-icon {
+    background: var(--oui-color-accent);
+    color: var(--oui-color-on-accent);
+  }
+  .oui-app-shell__tab-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 1.75rem;
+    border-radius: var(--oui-radius-pill);
+    transition: background-color var(--oui-duration-fast) var(--oui-ease), color var(--oui-duration-fast) var(--oui-ease);
+  }
+  .oui-app-shell__tab-icon svg {
+    flex-shrink: 0;
+    width: 1.15rem;
+    height: 1.15rem;
+  }
+  .oui-app-shell__tab-label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .oui-app-shell__drawer {
     position: fixed;
     top: 0;
@@ -765,8 +854,14 @@
   }
   @media (max-width: 900px) {
     .oui-app-shell {
-      grid-template-columns: minmax(0, 1fr);
-      grid-template-rows: auto minmax(0, 1fr);
+      display: flex;
+      flex-direction: column;
+    }
+    .oui-app-shell__main {
+      flex: 1;
+    }
+    .oui-app-shell__tabbar {
+      display: flex;
     }
     .oui-app-shell__navbar {
       display: none;
@@ -796,15 +891,15 @@
     flex-wrap: wrap;
     align-items: flex-end;
     justify-content: space-between;
-    gap: 1rem 1.5rem;
+    gap: var(--oui-space-6) var(--oui-space-10);
   }
   .oui-page-header__text {
     display: grid;
-    gap: 0.35rem;
+    gap: var(--oui-space-2);
     min-width: 0;
   }
   .oui-page-header__breadcrumbs {
-    margin-bottom: 0.4rem;
+    margin-bottom: var(--oui-space-3);
   }
   .oui-page-header__title {
     margin: 0;
@@ -827,12 +922,12 @@
   .oui-page-header__actions {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.6rem;
+    gap: var(--oui-space-4);
   }
   .oui-grid {
     display: grid;
     grid-template-columns: repeat(var(--_cols, 3), minmax(0, 1fr));
-    gap: var(--_gap, 1rem);
+    gap: var(--_gap, var(--oui-space-6));
     min-width: 0;
   }
   .oui-grid > * {
@@ -857,10 +952,10 @@
     --_cols: 6;
   }
   .oui-grid[data-gap=sm] {
-    --_gap: 0.6rem;
+    --_gap: var(--oui-space-4);
   }
   .oui-grid[data-gap=lg] {
-    --_gap: 1.5rem;
+    --_gap: var(--oui-space-10);
   }
   @media (max-width: 1200px) {
     .oui-grid[data-columns="4"], .oui-grid[data-columns="5"], .oui-grid[data-columns="6"] {
@@ -1018,12 +1113,6 @@
     border-color: var(--_tone-border);
     background: transparent;
   }
-  .oui-badge__dot {
-    width: 0.45rem;
-    height: 0.45rem;
-    border-radius: 50%;
-    background: var(--_tone);
-  }
 }
 @layer oui.components {
   .oui-breadcrumbs {
@@ -1422,10 +1511,10 @@
     font-family: var(--oui-font-body);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    --_padding: 1.25rem;
+    --_padding: var(--oui-space-8);
     display: flex;
     flex-direction: column;
-    gap: 0.9rem;
+    gap: var(--oui-space-6);
     min-width: 0;
     padding: var(--oui-card-padding, var(--_padding));
     border: 1.5px solid var(--oui-card-border, var(--oui-color-border));
@@ -1439,10 +1528,10 @@
     --_padding: 0;
   }
   .oui-card[data-padding=sm] {
-    --_padding: 1rem;
+    --_padding: var(--oui-space-6);
   }
   .oui-card[data-padding=lg] {
-    --_padding: 1.75rem;
+    --_padding: var(--oui-space-12);
   }
   .oui-card[data-variant=elevated] {
     border-color: transparent;
@@ -1474,7 +1563,7 @@
   }
   @media (max-width: 640px) {
     .oui-card[data-padding=md], .oui-card[data-padding=lg] {
-      --_padding: 1rem;
+      --_padding: var(--oui-space-6);
     }
   }
   .oui-card__header {
@@ -1519,7 +1608,7 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 0.5rem;
-    padding-top: 0.9rem;
+    padding-top: var(--oui-space-6);
     border-top: 1px solid var(--oui-color-border-subtle);
   }
 }
@@ -1829,7 +1918,7 @@
     --_height: var(--oui-control-height-lg);
   }
   .oui-combobox__group[data-multiple] {
-    padding-block: 0.25rem;
+    padding-block: max(0px, (var(--oui-input-height, var(--_height)) - 2 * var(--oui-control-border-width) - 1.5rem) / 2);
     padding-left: 0.35rem;
   }
   .oui-combobox__group[data-invalid]:focus-within, .oui-combobox__group:has([data-invalid]):focus-within {
@@ -1858,7 +1947,7 @@
   }
   .oui-combobox__chips .oui-combobox__input {
     min-width: 2.5rem;
-    height: 1.75rem;
+    height: 1.5rem;
     padding-left: 0.4rem;
   }
   .oui-combobox__actions {
@@ -1871,8 +1960,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 1.75rem;
-    height: 1.75rem;
+    --_size: min(1.75rem, calc(var(--oui-input-height, var(--_height)) - 2 * var(--oui-control-border-width) - 0.25rem));
+    width: var(--_size);
+    height: var(--_size);
     padding: 0;
     border: 0;
     border-radius: var(--oui-radius-sm);
@@ -1912,7 +2002,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.2rem;
-    height: 1.75rem;
+    height: 1.5rem;
     padding: 0 0.2rem 0 0.6rem;
     border-radius: var(--oui-radius-sm);
     background: var(--oui-color-accent-subtle);
@@ -2253,7 +2343,7 @@
     -moz-osx-font-smoothing: grayscale;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--oui-space-5);
     min-width: 0;
   }
   .oui-data-table__toolbar {
@@ -2261,7 +2351,7 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: 0.6rem 1rem;
+    gap: var(--oui-space-4) var(--oui-space-6);
   }
   .oui-data-table__toolbar > .oui-input-group {
     flex: 1 1 14rem;
@@ -2641,13 +2731,13 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     --_width: 32rem;
-    --_padding: 1.5rem;
+    --_padding: var(--oui-space-10);
     --_radius: var(--oui-dialog-radius, var(--oui-radius-card));
     position: fixed;
     z-index: var(--oui-z-dialog);
     display: flex;
     flex-direction: column;
-    gap: 1.1rem;
+    gap: var(--oui-space-8);
     box-sizing: border-box;
     width: min(var(--oui-dialog-width, var(--_width)), 100vw - 2rem);
     max-height: calc(100dvh - 2rem);
@@ -2736,7 +2826,7 @@
   }
   @media (max-width: 640px) {
     .oui-dialog {
-      --_padding: 1.15rem;
+      --_padding: var(--oui-space-8);
     }
   }
   .oui-dialog__header {
@@ -2821,7 +2911,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     --_width: 32rem;
-    --_padding: 1.5rem;
+    --_padding: var(--oui-space-10);
     position: fixed;
     top: 0;
     bottom: 0;
@@ -2873,7 +2963,7 @@
   }
   @media (max-width: 640px) {
     .oui-drawer {
-      --_padding: 1.15rem;
+      --_padding: var(--oui-space-8);
       border-radius: 0 !important;
     }
   }
@@ -2883,7 +2973,7 @@
     align-items: flex-start;
     justify-content: space-between;
     gap: 1rem;
-    padding: 1rem var(--oui-drawer-padding, var(--_padding));
+    padding: var(--oui-space-6) var(--oui-drawer-padding, var(--_padding));
     border-bottom: 1px solid var(--oui-color-border-subtle);
   }
   .oui-drawer__heading {
@@ -2939,7 +3029,7 @@
     flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.6rem;
-    padding: 1rem var(--oui-drawer-padding, var(--_padding));
+    padding: var(--oui-space-6) var(--oui-drawer-padding, var(--_padding));
     border-top: 1px solid var(--oui-color-border-subtle);
   }
 }
@@ -3008,7 +3098,7 @@
     -moz-osx-font-smoothing: grayscale;
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
+    gap: var(--oui-space-3);
     min-width: 0;
   }
   .oui-field[data-disabled] .oui-field__label {
@@ -3055,7 +3145,7 @@
     -moz-osx-font-smoothing: grayscale;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--oui-space-5);
     min-width: 0;
     padding: 0;
     border: 0;
@@ -3070,7 +3160,7 @@
   .oui-form {
     display: flex;
     flex-direction: column;
-    gap: 1.1rem;
+    gap: var(--oui-space-8);
   }
 }
 @layer oui.components {
@@ -3802,10 +3892,10 @@
   .oui-popover {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--oui-space-5);
     max-width: min(var(--available-width), 24rem);
     max-height: var(--available-height);
-    padding: var(--oui-popover-padding, 1rem);
+    padding: var(--oui-popover-padding, var(--oui-space-6));
     overflow: auto;
   }
   .oui-popover__title {
@@ -4418,7 +4508,7 @@
 }
 @layer oui.components {
   .oui-stack {
-    --_gap: 1rem;
+    --_gap: var(--oui-space-6);
     display: flex;
     flex-direction: column;
     gap: var(--oui-stack-gap, var(--_gap));
@@ -4435,16 +4525,16 @@
     --_gap: 0;
   }
   .oui-stack[data-gap=xs] {
-    --_gap: 0.25rem;
+    --_gap: var(--oui-space-2);
   }
   .oui-stack[data-gap=sm] {
-    --_gap: 0.6rem;
+    --_gap: var(--oui-space-4);
   }
   .oui-stack[data-gap=lg] {
-    --_gap: 1.5rem;
+    --_gap: var(--oui-space-10);
   }
   .oui-stack[data-gap=xl] {
-    --_gap: 2rem;
+    --_gap: var(--oui-space-12);
   }
   .oui-stack[data-align=start] {
     align-items: flex-start;
@@ -4726,21 +4816,21 @@
     font-family: var(--oui-font-body);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    --_py: 0.65rem;
-    --_px: 0.75rem;
+    --_py: var(--oui-space-3);
+    --_px: var(--oui-space-5);
     width: 100%;
     border-collapse: collapse;
     color: var(--oui-color-text-strong);
-    font-size: var(--oui-font-size-md);
+    font-size: var(--oui-font-size-sm);
   }
   .oui-table[data-density=compact] {
-    --_py: 0.4rem;
-    --_px: 0.6rem;
-    font-size: var(--oui-font-size-sm);
+    --_py: var(--oui-space-2);
+    --_px: var(--oui-space-4);
   }
   .oui-table[data-density=comfortable] {
-    --_py: 0.95rem;
-    --_px: 1rem;
+    --_py: var(--oui-space-5);
+    --_px: var(--oui-space-6);
+    font-size: var(--oui-font-size-md);
   }
   .oui-table[data-striped] .oui-table__body .oui-table__row:nth-child(even) {
     background: var(--oui-color-surface-muted);

package/dist/theme/ThemeProvider.d.ts

@@ -9,6 +9,7 @@ export declare function themeToStyle(theme: Theme | undefined): React.CSSPropert
 /** Builds a theme from a base, applying overrides on top. */
 export declare function createTheme(...themes: Theme[]): Theme;
 export interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Ref to the provider's root element. */
     ref?: React.Ref<HTMLDivElement>;
     /** Token overrides applied to this subtree. */
     theme?: Theme;

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":["React","PortalContainerContext","cx","ThemeTokenName","Theme","Partial","Record","ColorMode","themeToStyle","theme","CSSProperties","style","name","value","Object","entries","createTheme","themes","assign","ThemeProviderProps","HTMLAttributes","HTMLDivElement","ref","Ref","mode","ThemeProvider","t0","$","_c","children","className","props","container","setContainer","useState","t1","t2","t3","t4","t5","Symbol","for","t6","_c"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PortalContainerContext } from '../utils/portal';\nimport { cx } from '../utils/cx';\n\n/** Token names without the `--oui-` prefix, e.g. `color-accent` or `radius-card`. */\nexport type ThemeTokenName =\n  | `color-${string}`\n  | `font-${string}`\n  | `radius-${string}`\n  | `shadow-${string}`\n  | `control-${string}`\n  | `duration-${string}`\n  | `ease${string}`\n  | `z-${string}`\n  | `focus-${string}`\n  | `${string}-radius`\n  | `${string}-height`;\n\n/** A partial set of token overrides. Values are any valid CSS value. */\nexport type Theme = Partial<Record<ThemeTokenName, string>>;\n\nexport type ColorMode = 'light' | 'dark';\n\n/** Converts a theme object into CSS custom properties for a `style` prop. */\nexport function themeToStyle(theme: Theme | undefined): React.CSSProperties {\n  const style: Record<string, string> = {};\n  if (!theme) return style;\n  for (const [name, value] of Object.entries(theme)) {\n    if (value != null && value !== '') style[`--oui-${name}`] = value;\n  }\n  return style as React.CSSProperties;\n}\n\n/** Builds a theme from a base, applying overrides on top. */\nexport function createTheme(...themes: Theme[]): Theme {\n  return Object.assign({}, ...themes);\n}\n\nexport interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>;\n  /** Token overrides applied to this subtree. */\n  theme?: Theme;\n  /** Color mode for this subtree. */\n  mode?: ColorMode;\n}\n\n/**\n * Scopes a theme to its children. Popups opened inside are portalled into the\n * provider so they pick up the same tokens.\n */\nexport function ThemeProvider({ theme, mode, className, style, children, ref, ...props }: ThemeProviderProps) {\n  const [container, setContainer] = React.useState<HTMLDivElement | null>(null);\n  return (\n    <div\n      ref={ref}\n      className={cx('oui-theme', className)}\n      data-oui-theme={mode}\n      style={{ ...themeToStyle(theme), ...style }}\n      {...props}\n    >\n      <PortalContainerContext value={container}>{children}</PortalContainerContext>\n      <div className=\"oui-theme__portal\" ref={setContainer} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgBQ,aAAaC,OAA+C;CAC1E,MAAME,QAAgC,CAAC;CACvC,IAAI,CAACF,OAAO,OAAOE;CACnB,KAAK,MAAM,CAACC,MAAMC,UAAUC,OAAOC,QAAQN,KAAK,GAC9C,IAAII,SAAS,QAAQA,UAAU,IAAIF,MAAM,SAASC,UAAUC;CAE9D,OAAOF;AACT;;AAGA,SAAgBK,YAAY,GAAGC,QAAwB;CACrD,OAAOH,OAAOI,OAAO,CAAC,GAAG,GAAGD,MAAM;AACpC;;;;;AAcA,SAAOQ,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAO;CAAA,IAAAT;CAAA,IAAAX;CAAA,IAAAF;CAAA,IAAAkB,EAAA,OAAAD,IAAA;EAAuB,CAAA,CAAAjB,OAAAe,MAAAM,WAAAnB,OAAAkB,UAAAP,KAAA,GAAAS,SAAAL;EAA8EC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAH;EAAAG,EAAA,KAAAI;EAAAJ,EAAA,KAAAL;EAAAK,EAAA,KAAAhB;EAAAgB,EAAA,KAAAlB;CAAA,OAAA;EAAAoB,WAAAF,EAAA;EAAAG,YAAAH,EAAA;EAAAH,OAAAG,EAAA;EAAAI,QAAAJ,EAAA;EAAAL,MAAAK,EAAA;EAAAhB,QAAAgB,EAAA;EAAAlB,QAAAkB,EAAA;CAAA;CAC1G,MAAA,CAAAK,WAAAC,gBAAkCjC,MAAKkC,SAAiC,IAAI;CAAE,IAAAC;CAAA,IAAAR,EAAA,OAAAG,WAAA;EAI/DK,KAAAjC,GAAG,aAAa4B,SAAS;EAACH,EAAA,KAAAG;EAAAH,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAlB,OAAA;EAEzB2B,KAAA5B,aAAaC,KAAK;EAACkB,EAAA,MAAAlB;EAAAkB,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAhB,SAAAgB,EAAA,QAAAS,IAAA;EAAxBC,KAAA;GAAA,GAAKD;GAAmB,GAAKzB;EAAM;EAACgB,EAAA,MAAAhB;EAAAgB,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAE,YAAAF,EAAA,QAAAK,WAAA;EAG3CM,KAAA,oBAAC,wBAAD;GAA+BN,OAAAA;GAAYH;EAApB,CAAA;EAAsDF,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAa,OAAAC,IAAA,2BAAA,GAAA;EAC7EF,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAyBN,KAAAA;EAAY,CAAA;EAAIN,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAH,QAAAG,EAAA,QAAAI,SAAAJ,EAAA,QAAAL,OAAAK,EAAA,QAAAQ,MAAAR,EAAA,QAAAU,MAAAV,EAAA,QAAAW,IAAA;EAR1DI,KAAA,qBAAA,OAAA;GACOpB;GACM,WAAAa;GACKX,kBAAAA;GACT,OAAAa;GAAoC,GACvCN;GALN,UAAA,CAOEO,IACAC,EACI;;EAAAZ,EAAA,MAAAH;EAAAG,EAAA,MAAAI;EAAAJ,EAAA,MAAAL;EAAAK,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OATNe;AASM"}
+{"version":3,"file":"ThemeProvider.js","names":["React","PortalContainerContext","cx","ThemeTokenName","Theme","Partial","Record","ColorMode","themeToStyle","theme","CSSProperties","style","name","value","Object","entries","createTheme","themes","assign","ThemeProviderProps","HTMLAttributes","HTMLDivElement","ref","Ref","mode","ThemeProvider","t0","$","_c","children","className","props","container","setContainer","useState","t1","t2","t3","t4","t5","Symbol","for","t6","_c"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PortalContainerContext } from '../utils/portal';\nimport { cx } from '../utils/cx';\n\n/** Token names without the `--oui-` prefix, e.g. `color-accent` or `radius-card`. */\nexport type ThemeTokenName =\n  | `color-${string}`\n  | `font-${string}`\n  | `radius-${string}`\n  | `shadow-${string}`\n  | `control-${string}`\n  | `duration-${string}`\n  | `ease${string}`\n  | `z-${string}`\n  | `focus-${string}`\n  | `${string}-radius`\n  | `${string}-height`;\n\n/** A partial set of token overrides. Values are any valid CSS value. */\nexport type Theme = Partial<Record<ThemeTokenName, string>>;\n\nexport type ColorMode = 'light' | 'dark';\n\n/** Converts a theme object into CSS custom properties for a `style` prop. */\nexport function themeToStyle(theme: Theme | undefined): React.CSSProperties {\n  const style: Record<string, string> = {};\n  if (!theme) return style;\n  for (const [name, value] of Object.entries(theme)) {\n    if (value != null && value !== '') style[`--oui-${name}`] = value;\n  }\n  return style as React.CSSProperties;\n}\n\n/** Builds a theme from a base, applying overrides on top. */\nexport function createTheme(...themes: Theme[]): Theme {\n  return Object.assign({}, ...themes);\n}\n\nexport interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the provider's root element. */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Token overrides applied to this subtree. */\n  theme?: Theme;\n  /** Color mode for this subtree. */\n  mode?: ColorMode;\n}\n\n/**\n * Scopes a theme to its children. Popups opened inside are portalled into the\n * provider so they pick up the same tokens.\n */\nexport function ThemeProvider({ theme, mode, className, style, children, ref, ...props }: ThemeProviderProps) {\n  const [container, setContainer] = React.useState<HTMLDivElement | null>(null);\n  return (\n    <div\n      ref={ref}\n      className={cx('oui-theme', className)}\n      data-oui-theme={mode}\n      style={{ ...themeToStyle(theme), ...style }}\n      {...props}\n    >\n      <PortalContainerContext value={container}>{children}</PortalContainerContext>\n      <div className=\"oui-theme__portal\" ref={setContainer} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgBQ,aAAaC,OAA+C;CAC1E,MAAME,QAAgC,CAAC;CACvC,IAAI,CAACF,OAAO,OAAOE;CACnB,KAAK,MAAM,CAACC,MAAMC,UAAUC,OAAOC,QAAQN,KAAK,GAC9C,IAAII,SAAS,QAAQA,UAAU,IAAIF,MAAM,SAASC,UAAUC;CAE9D,OAAOF;AACT;;AAGA,SAAgBK,YAAY,GAAGC,QAAwB;CACrD,OAAOH,OAAOI,OAAO,CAAC,GAAG,GAAGD,MAAM;AACpC;;;;;AAeA,SAAOQ,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAO;CAAA,IAAAT;CAAA,IAAAX;CAAA,IAAAF;CAAA,IAAAkB,EAAA,OAAAD,IAAA;EAAuB,CAAA,CAAAjB,OAAAe,MAAAM,WAAAnB,OAAAkB,UAAAP,KAAA,GAAAS,SAAAL;EAA8EC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAH;EAAAG,EAAA,KAAAI;EAAAJ,EAAA,KAAAL;EAAAK,EAAA,KAAAhB;EAAAgB,EAAA,KAAAlB;CAAA,OAAA;EAAAoB,WAAAF,EAAA;EAAAG,YAAAH,EAAA;EAAAH,OAAAG,EAAA;EAAAI,QAAAJ,EAAA;EAAAL,MAAAK,EAAA;EAAAhB,QAAAgB,EAAA;EAAAlB,QAAAkB,EAAA;CAAA;CAC1G,MAAA,CAAAK,WAAAC,gBAAkCjC,MAAKkC,SAAiC,IAAI;CAAE,IAAAC;CAAA,IAAAR,EAAA,OAAAG,WAAA;EAI/DK,KAAAjC,GAAG,aAAa4B,SAAS;EAACH,EAAA,KAAAG;EAAAH,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAlB,OAAA;EAEzB2B,KAAA5B,aAAaC,KAAK;EAACkB,EAAA,MAAAlB;EAAAkB,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAhB,SAAAgB,EAAA,QAAAS,IAAA;EAAxBC,KAAA;GAAA,GAAKD;GAAmB,GAAKzB;EAAM;EAACgB,EAAA,MAAAhB;EAAAgB,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAE,YAAAF,EAAA,QAAAK,WAAA;EAG3CM,KAAA,oBAAC,wBAAD;GAA+BN,OAAAA;GAAYH;EAApB,CAAA;EAAsDF,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAa,OAAAC,IAAA,2BAAA,GAAA;EAC7EF,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAyBN,KAAAA;EAAY,CAAA;EAAIN,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAH,QAAAG,EAAA,QAAAI,SAAAJ,EAAA,QAAAL,OAAAK,EAAA,QAAAQ,MAAAR,EAAA,QAAAU,MAAAV,EAAA,QAAAW,IAAA;EAR1DI,KAAA,qBAAA,OAAA;GACOpB;GACM,WAAAa;GACKX,kBAAAA;GACT,OAAAa;GAAoC,GACvCN;GALN,UAAA,CAOEO,IACAC,EACI;;EAAAZ,EAAA,MAAAH;EAAAG,EAAA,MAAAI;EAAAJ,EAAA,MAAAL;EAAAK,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OATNe;AASM"}

package/dist/utils/portal.d.ts

@@ -5,4 +5,8 @@ import * as React from 'react';
  * inherit its tokens — this context carries the container element.
  */
 export declare const PortalContainerContext: React.Context<HTMLElement | null>;
+/**
+ * Returns the element popups should portal into: the nearest `ThemeProvider`, or
+ * `undefined` for the document body. Pass it as `container` when building a custom portalled popup.
+ */
 export declare function usePortalContainer(): HTMLElement | undefined;

package/dist/utils/portal.js

@@ -7,6 +7,10 @@ import * as React from "react";
 * inherit its tokens — this context carries the container element.
 */
 var PortalContainerContext = React.createContext(null);
+/**
+* Returns the element popups should portal into: the nearest `ThemeProvider`, or
+* `undefined` for the document body. Pass it as `container` when building a custom portalled popup.
+*/
 function usePortalContainer() {
 	return React.useContext(PortalContainerContext) ?? void 0;
 }

package/dist/utils/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","names":["React","PortalContainerContext","createContext","HTMLElement","usePortalContainer","useContext","undefined"],"sources":["../../src/utils/portal.tsx"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Popups (menus, selects, dialogs…) are portalled. When a ThemeProvider scopes\n * a theme to part of the page, popups must render inside that scope so they\n * inherit its tokens — this context carries the container element.\n */\nexport const PortalContainerContext = React.createContext<HTMLElement | null>(null);\n\nexport function usePortalContainer(): HTMLElement | undefined {\n  return React.useContext(PortalContainerContext) ?? undefined;\n}\n"],"mappings":";;;;;;;;AAOA,IAAaC,yBAAyBD,MAAME,cAAkC,IAAI;AAElF,SAAOE,qBAAA;CAAA,OACEJ,MAAKK,WAAYJ,sBAAmC,KAApDK,KAAAA;AAAqD"}
+{"version":3,"file":"portal.js","names":["React","PortalContainerContext","createContext","HTMLElement","usePortalContainer","useContext","undefined"],"sources":["../../src/utils/portal.tsx"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Popups (menus, selects, dialogs…) are portalled. When a ThemeProvider scopes\n * a theme to part of the page, popups must render inside that scope so they\n * inherit its tokens — this context carries the container element.\n */\nexport const PortalContainerContext = React.createContext<HTMLElement | null>(null);\n\n/**\n * Returns the element popups should portal into: the nearest `ThemeProvider`, or\n * `undefined` for the document body. Pass it as `container` when building a custom portalled popup.\n */\nexport function usePortalContainer(): HTMLElement | undefined {\n  return React.useContext(PortalContainerContext) ?? undefined;\n}\n"],"mappings":";;;;;;;;AAOA,IAAaC,yBAAyBD,MAAME,cAAkC,IAAI;;;;;AAMlF,SAAOE,qBAAA;CAAA,OACEJ,MAAKK,WAAYJ,sBAAmC,KAApDK,KAAAA;AAAqD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optimum-intelligence/opti-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Optimum's customizable React component library, built on Base UI.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Optimum Intelligence",
@@ -31,7 +31,10 @@
       "import": "./dist/index.js"
     },
     "./styles.css": "./dist/opti-ui.css",
-    "./fonts.css": "./dist/fonts.css"
+    "./fonts.css": "./dist/fonts.css",
+    "./components.json": "./dist/components.json",
+    "./llms.txt": "./dist/llms.txt",
+    "./llms-full.txt": "./dist/llms-full.txt"
   },
   "sideEffects": [
     "**/*.css"
@@ -39,7 +42,8 @@
   "scripts": {
     "dev": "vite --host 127.0.0.1",
     "typecheck": "tsc --noEmit",
-    "build": "npm run typecheck && vite build && tsc -p tsconfig.build.json",
+    "build": "npm run typecheck && vite build && tsc -p tsconfig.build.json && npm run docs",
+    "docs": "node scripts/generate-docs.mjs",
     "build:showcase": "vite build --mode showcase",
     "test": "npm run build && node --test tests/",
     "prepack": "npm run build"