@dxos/ui-theme 0.8.4-staging.ac66bdf99f → 0.9.0

package/src/plugins/ThemePlugin.ts

@@ -4,10 +4,11 @@
 
 /* eslint-disable no-console */
 
-import tailwindcss from '@tailwindcss/postcss';
+import tailwindcssPostcss from '@tailwindcss/postcss';
+import tailwindcssVite from '@tailwindcss/vite';
 import autoprefixer from 'autoprefixer';
 import { existsSync, readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
+import { resolve } from 'node:path';
 import postcssImport from 'postcss-import';
 import postcssNesting from 'postcss-nesting';
 import { type HtmlTagDescriptor, type Plugin, type UserConfig } from 'vite';
@@ -40,8 +41,9 @@ export type ThemePluginOptions = {
 
 /**
  * Vite plugin to configure theme.
+ * Returns the official Tailwind Vite plugin (persistent incremental scanner) alongside the theme plugin.
  */
-export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
+export const ThemePlugin = (options: ThemePluginOptions): Plugin[] => {
   // Prefer source CSS if available (monorepo dev), fall back to dist for installed package.
   const srcThemePath = resolve(import.meta.dirname, ROOT, 'src/main.css');
   const distThemePath = resolve(import.meta.dirname, '../main.css');
@@ -53,23 +55,65 @@ export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
   const darkModeScriptPath = resolve(pluginsDir, 'dark-mode.ts');
   const mainCssPath = resolve(pluginsDir, 'main.css');
 
-  const config: ThemePluginOptions = {
-    srcCssPath: isMonorepo ? srcThemePath : distThemePath,
-    virtualFileId: '@dxos-theme',
-    ...options,
+  const config = {
+    srcCssPath: options.srcCssPath ?? (isMonorepo ? srcThemePath : distThemePath),
+    virtualFileId: options.virtualFileId ?? '@dxos-theme',
+    verbose: options.verbose,
   };
 
-  // Derive project root from the source location so Tailwind scans all packages.
-  const base = isMonorepo ? resolve(dirname(srcThemePath), ROOT) : undefined;
-
   if (process.env.DEBUG || options.verbose) {
     console.log('ThemePlugin:\n', JSON.stringify(config, null, 2));
   }
 
-  return {
+  // Trailing-edge debounce handle for theme CSS reloads (see `handleHotUpdate`).
+  let themeReloadTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const themePlugin: Plugin = {
     name: 'vite-plugin-dxos-ui-theme',
     config: (): UserConfig => {
       return {
+        server: {
+          watch: {
+            // Stop build outputs from driving HMR — they are the root of the
+            // `main.css` HMR storm.
+            //
+            // Tailwind's `@source` scanning (see `src/main.css`) registers its
+            // scanned source files as Vite watch dependencies of the compiled
+            // theme CSS. Tailwind's own scanner respects `.gitignore` (and the
+            // `@source not` directives), so it never *scans* `dist/`. BUT the
+            // scanner hands Vite a coarse `dir-dependency` glob — e.g.
+            // `{**/*.html,**/*.ts,**/*.tsx}` — and Vite re-expands that glob
+            // itself, ignoring only `node_modules` (not `.gitignore`, not the
+            // `@source not` negations). The re-expansion therefore sweeps in
+            // every `packages/*/dist/**/*.d.ts` (`.d.ts` matches `**/*.ts`),
+            // making each emitted declaration file a watch-dependency of
+            // `main.css`. A single package rebuild emits dozens of `.d.ts` in a
+            // tight burst, and each write re-invalidates the theme — 40+ HMR
+            // pings for `main.css` in one second, repeating on every rebuild.
+            //
+            // Ignoring build outputs in the watcher is also semantically
+            // correct: in dev the workspace resolves `@dxos/*` via the `source`
+            // export condition (see `vite-plugin-import-source`), so `dist/`
+            // is never consumed at runtime and its churn should never trigger
+            // HMR. Vite concatenates these patterns with its built-in ignores
+            // (`**/node_modules/**`, `**/.git/**`, …), so this is purely
+            // additive.
+            //
+            // `<root>/.claude/**` covers agent worktrees checked out under the
+            // repo root (`.claude/worktrees/<name>/packages/**`): they are full
+            // source copies, so the glob re-expansion above sweeps them in and
+            // every agent-side edit burst or checkout invalidates the theme in
+            // the user's dev server. The pattern is anchored at the resolved
+            // repo root (not `**/.claude/**`) because chokidar matches against
+            // absolute paths — a bare pattern would match *everything* when the
+            // dev server itself runs from inside a worktree whose path contains
+            // a `.claude` segment. `*.log` covers runtime log sinks (e.g.
+            // vite-plugin-log's `app.log` in the app root), which are appended
+            // continuously at runtime and must never feed back into the
+            // watcher.
+            ignored: ['**/dist/**', '**/out/**', '**/*.log', `${resolve(import.meta.dirname, ROOT, '.claude')}/**`],
+          },
+        },
         css: {
           postcss: {
             plugins: [
@@ -77,9 +121,11 @@ export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
               postcssImport(),
               // Processes CSS nesting syntax.
               postcssNesting(),
-              // Processes Tailwind directives and generates utilities from scanned content.
-              // base points to project root so all packages are scanned (not just ui-theme).
-              tailwindcss(base !== undefined ? { base } : {}),
+              // Resolves @reference/@apply in `.pcss` files (e.g. lit-grid, lit-ui), which the
+              // @tailwindcss/vite plugin skips — its transform filter only matches `.css`.
+              // Theme `.css` files are compiled by @tailwindcss/vite first (enforce: 'pre'),
+              // so this plugin's quick-bail check passes them through untouched.
+              tailwindcssPostcss(),
               // Adds vendor prefixes.
               autoprefixer,
             ],
@@ -92,6 +138,42 @@ export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
         return config.srcCssPath;
       }
     },
+    hotUpdate({ type, file, modules }) {
+      // Direct edits to CSS (the theme source or its imports) keep Vite's
+      // default immediate update for instant feedback while authoring styles.
+      if (this.environment.name !== 'client' || type !== 'update' || file.endsWith('.css')) {
+        return;
+      }
+
+      // Every content file Tailwind scans is registered as a dependency of the
+      // theme CSS — Vite models it as a file-only entry node whose importer is
+      // `main.css` — so each source-file save invalidates `main.css` and
+      // re-runs the monorepo-wide Tailwind scan. During an edit wave that
+      // serializes one full scan per save. Drop the theme-dep entries from the
+      // update (the changed module itself still hot-updates immediately) and
+      // reload the theme CSS once on the trailing edge of a quiet window, so a
+      // wave costs at most one scan.
+      const isThemeDep = (mod: (typeof modules)[number]): boolean =>
+        mod.file === config.srcCssPath ||
+        (mod.id === null &&
+          mod.importers.size > 0 &&
+          [...mod.importers].every((importer) => importer.file === config.srcCssPath));
+      if (!modules.some(isThemeDep)) {
+        return;
+      }
+
+      const environment = this.environment;
+      clearTimeout(themeReloadTimer);
+      themeReloadTimer = setTimeout(() => {
+        for (const mod of environment.moduleGraph.getModulesByFile(config.srcCssPath) ?? []) {
+          environment.reloadModule(mod).catch(() => {
+            // Server may be mid-restart; the next edit reschedules the reload.
+          });
+        }
+      }, 300);
+
+      return modules.filter((mod) => !isThemeDep(mod));
+    },
     transformIndexHtml: () => {
       // Apply .dark class to <html> synchronously before any scripts run, so that
       // the critical CSS html.dark rules apply on the very first paint.
@@ -122,4 +204,10 @@ export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
       return [darkModeTag, layersTag, criticalTag];
     },
   };
+
+  // The Tailwind Vite plugins are `enforce: 'pre'`, so they compile theme CSS (resolving
+  // `@import 'tailwindcss'`, @source, @plugin, @theme) before the postcss chain runs —
+  // postcss-import never sees the raw Tailwind directives. Scan roots come from the @source
+  // directives in main.css (relative to that file); no project-root base is needed.
+  return [...tailwindcssVite(), themePlugin];
 };

package/src/plugins/main.css

@@ -24,22 +24,25 @@ body {
 }
 
 /* Pre-CSS color fallbacks so text is readable before and during Vite HMR. */
-/* Values are intentionally kept in sync with @theme tokens in semantic.css. */
+/* Values are intentionally kept in sync with @theme tokens in semantic.css:
+ *   color            ← --color-base-fg      = light-dark(neutral-950, neutral-150)
+ *   background-color ← --color-base-surface = elevation-3 = light-dark(neutral-125, neutral-850)
+ * The literals carry the ramp tint (chroma 0.001, hue 190) so first paint matches the loaded theme. */
 :root {
   color-scheme: light;
 }
 html {
-  color: oklch(0.145 0 0);
-  background-color: oklch(0.985 0 0);
+  color: oklch(0.145 0.001 190);
+  background-color: oklch(0.92 0.001 190);
 }
 html.dark {
   color-scheme: dark;
-  color: oklch(0.985 0 0);
-  background-color: oklch(0.145 0 0);
+  color: oklch(0.905 0.001 190);
+  background-color: oklch(0.237 0.001 190);
 }
 @media (prefers-color-scheme: dark) {
   html:not(.dark) {
-    color: oklch(0.985 0 0);
-    background-color: oklch(0.145 0 0);
+    color: oklch(0.905 0.001 190);
+    background-color: oklch(0.237 0.001 190);
   }
 }

package/src/util/hash-styles.ts

@@ -6,21 +6,23 @@ import { type ChromaticPalette } from '@dxos/ui-types';
 
 export type Hue = ChromaticPalette | 'neutral';
 
-// TODO(burdon): Reconcile with ui-theme/theme/roles.css
+/**
+ * See theme.css
+ */
 export type ColorStyles = {
   hue: Hue;
-  fill: string; // -fill
-  surface: string; // -surface
-  surfaceText: string; // -surface-text
-  text: string; // -text
-  border: string; // -border
+  bg: string;
+  surface: string;
+  fg: string;
+  text: string;
+  border: string;
 };
 
 const neutral: ColorStyles = {
   hue: 'neutral',
-  fill: 'bg-neutral-fill',
+  bg: 'bg-neutral-bg',
   surface: 'bg-neutral-surface',
-  surfaceText: 'text-neutral-surface-text',
+  fg: 'text-neutral-fg',
   text: 'text-neutral-text',
   border: 'border-neutral-border',
 };
@@ -30,137 +32,137 @@ const neutral: ColorStyles = {
 const styles: ColorStyles[] = [
   {
     hue: 'red',
-    fill: 'bg-red-fill',
+    bg: 'bg-red-bg',
     surface: 'bg-red-surface',
-    surfaceText: 'text-red-surface-text',
+    fg: 'text-red-fg',
     text: 'text-red-text',
     border: 'border-red-border',
   },
   {
     hue: 'orange',
-    fill: 'bg-orange-fill',
+    bg: 'bg-orange-bg',
     surface: 'bg-orange-surface',
-    surfaceText: 'text-orange-surface-text',
+    fg: 'text-orange-fg',
     text: 'text-orange-text',
     border: 'border-orange-border',
   },
   {
     hue: 'amber',
-    fill: 'bg-amber-fill',
+    bg: 'bg-amber-bg',
     surface: 'bg-amber-surface',
-    surfaceText: 'text-amber-surface-text',
+    fg: 'text-amber-fg',
     text: 'text-amber-text',
     border: 'border-amber-border',
   },
   {
     hue: 'yellow',
-    fill: 'bg-yellow-fill',
+    bg: 'bg-yellow-bg',
     surface: 'bg-yellow-surface',
-    surfaceText: 'text-yellow-surface-text',
+    fg: 'text-yellow-fg',
     text: 'text-yellow-text',
     border: 'border-yellow-border',
   },
   {
     hue: 'lime',
-    fill: 'bg-lime-fill',
+    bg: 'bg-lime-bg',
     surface: 'bg-lime-surface',
-    surfaceText: 'text-lime-surface-text',
+    fg: 'text-lime-fg',
     text: 'text-lime-text',
     border: 'border-lime-border',
   },
   {
     hue: 'green',
-    fill: 'bg-green-fill',
+    bg: 'bg-green-bg',
     surface: 'bg-green-surface',
-    surfaceText: 'text-green-surface-text',
+    fg: 'text-green-fg',
     text: 'text-green-text',
     border: 'border-green-border',
   },
   {
     hue: 'emerald',
-    fill: 'bg-emerald-fill',
+    bg: 'bg-emerald-bg',
     surface: 'bg-emerald-surface',
-    surfaceText: 'text-emerald-surface-text',
+    fg: 'text-emerald-fg',
     text: 'text-emerald-text',
     border: 'border-emerald-border',
   },
   {
     hue: 'teal',
-    fill: 'bg-teal-fill',
+    bg: 'bg-teal-bg',
     surface: 'bg-teal-surface',
-    surfaceText: 'text-teal-surface-text',
+    fg: 'text-teal-fg',
     text: 'text-teal-text',
     border: 'border-teal-border',
   },
   {
     hue: 'cyan',
-    fill: 'bg-cyan-fill',
+    bg: 'bg-cyan-bg',
     surface: 'bg-cyan-surface',
-    surfaceText: 'text-cyan-surface-text',
+    fg: 'text-cyan-fg',
     text: 'text-cyan-text',
     border: 'border-cyan-border',
   },
   {
     hue: 'sky',
-    fill: 'bg-sky-fill',
+    bg: 'bg-sky-bg',
     surface: 'bg-sky-surface',
-    surfaceText: 'text-sky-surface-text',
+    fg: 'text-sky-fg',
     text: 'text-sky-text',
     border: 'border-sky-border',
   },
   {
     hue: 'blue',
-    fill: 'bg-blue-fill',
+    bg: 'bg-blue-bg',
     surface: 'bg-blue-surface',
-    surfaceText: 'text-blue-surface-text',
+    fg: 'text-blue-fg',
     text: 'text-blue-text',
     border: 'border-blue-border',
   },
   {
     hue: 'indigo',
-    fill: 'bg-indigo-fill',
+    bg: 'bg-indigo-bg',
     surface: 'bg-indigo-surface',
-    surfaceText: 'text-indigo-surface-text',
+    fg: 'text-indigo-fg',
     text: 'text-indigo-text',
     border: 'border-indigo-border',
   },
   {
     hue: 'violet',
-    fill: 'bg-violet-fill',
+    bg: 'bg-violet-bg',
     surface: 'bg-violet-surface',
-    surfaceText: 'text-violet-surface-text',
+    fg: 'text-violet-fg',
     text: 'text-violet-text',
     border: 'border-violet-border',
   },
   {
     hue: 'purple',
-    fill: 'bg-purple-fill',
+    bg: 'bg-purple-bg',
     surface: 'bg-purple-surface',
-    surfaceText: 'text-purple-surface-text',
+    fg: 'text-purple-fg',
     text: 'text-purple-text',
     border: 'border-purple-border',
   },
   {
     hue: 'fuchsia',
-    fill: 'bg-fuchsia-fill',
+    bg: 'bg-fuchsia-bg',
     surface: 'bg-fuchsia-surface',
-    surfaceText: 'text-fuchsia-surface-text',
+    fg: 'text-fuchsia-fg',
     text: 'text-fuchsia-text',
     border: 'border-fuchsia-border',
   },
   {
     hue: 'pink',
-    fill: 'bg-pink-fill',
+    bg: 'bg-pink-bg',
     surface: 'bg-pink-surface',
-    surfaceText: 'text-pink-surface-text',
+    fg: 'text-pink-fg',
     text: 'text-pink-text',
     border: 'border-pink-border',
   },
   {
     hue: 'rose',
-    fill: 'bg-rose-fill',
+    bg: 'bg-rose-bg',
     surface: 'bg-rose-surface',
-    surfaceText: 'text-rose-surface-text',
+    fg: 'text-rose-fg',
     text: 'text-rose-text',
     border: 'border-rose-border',
   },
@@ -171,6 +173,16 @@ export const palette = {
   hues: styles,
 };
 
+const validHues: ReadonlySet<Hue> = new Set<Hue>([neutral.hue, ...styles.map((s) => s.hue)]);
+
+/**
+ * Normalise an arbitrary string into a known `Hue`, falling back to `'neutral'` when the
+ * input doesn't match one of the catalogued palette entries. Useful when accepting hue
+ * values from user-authored data (e.g. ECHO objects, plugin settings) that need to be
+ * forwarded to a hue-keyed prop like `Tag`'s `palette`.
+ */
+export const toHue = (hue: string | undefined): Hue => (hue && validHues.has(hue as Hue) ? (hue as Hue) : 'neutral');
+
 // TODO(burdon): Rename getClassNames.
 export const getStyles = (hue: string): ColorStyles => {
   return styles.find((color) => color.hue === hue) || neutral;

package/src/util/mx.ts

@@ -2,23 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
-import {
-  Children,
-  createElement,
-  forwardRef,
-  type ForwardRefExoticComponent,
-  type ForwardedRef,
-  type HTMLAttributes,
-  isValidElement,
-  type ReactNode,
-  type RefAttributes,
-  CSSProperties,
-} from 'react';
 import { extendTailwindMerge, validators } from 'tailwind-merge';
 
-import { log } from '@dxos/log';
-import { ThemedClassName, type ComposableProps, type SlottableProps } from '@dxos/ui-types';
-
 type AdditionalClassGroups = 'density' | 'dx-focus-ring';
 
 export const mx = extendTailwindMerge<AdditionalClassGroups>({
@@ -40,7 +25,7 @@ export const mx = extendTailwindMerge<AdditionalClassGroups>({
         validators.isArbitraryNumber,
       ],
 
-      density: ['dx-density-fine', 'dx-density-coarse'],
+      density: ['dx-density-sm', 'dx-density-md', 'dx-density-lg'],
 
       'dx-focus-ring': [
         'dx-focus-ring',
@@ -61,113 +46,3 @@ export const mx = extendTailwindMerge<AdditionalClassGroups>({
     },
   },
 });
-
-/**
- * Reconciles className properties from a parent slot.
- * - `className` is set by the Slot merge mechanism.
- * - `classNames` is the consumer-facing prop for theming overrides.
- * Use `composableProps` to reconcile both into a single `className`.
- */
-// TODO(burdon): Move to react-ui.
-export const composableProps = <P extends HTMLElement = HTMLElement>(
-  { className, classNames, role, style, ...props }: ComposableProps,
-  { classNames: defaultClassNames, ...defaults }: ThemedClassName<Partial<HTMLAttributes<P>>> | undefined = {},
-) => ({
-  // Default props.
-  ...(defaults as object),
-
-  // Spread supplied props.
-  ...props,
-
-  // Prefer explicit role, then defaults role, then 'none'.
-  role: role ?? defaults.role ?? 'none',
-
-  // Merge styles.
-  style: { ...defaults.style, ...style } as CSSProperties,
-
-  // Compose classnames.
-  className: mx(defaultClassNames, className, classNames),
-});
-
-/**
- * Factory for slottable components.
- * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
- * Consumers see only `SlottableProps<P>` — a narrow type exposing `classNames`, `className`,
- * `children`, `asChild`, and the custom props `P`.
- *
- * @example
- * ```tsx
- * const MyPanel = slottable<HTMLDivElement, { border?: boolean }>(
- *   ({ children, asChild, border, ...props }, forwardedRef) => {
- *     const Comp = asChild ? Slot : Primitive.div;
- *     return (
- *       <Comp {...composableProps(props, { classNames: border && 'border' })} ref={forwardedRef}>
- *         {children}
- *       </Comp>
- *     );
- *   },
- * );
- * ```
- */
-/** Symbol used to mark components created by `composable()` or `slottable()`. */
-const COMPOSABLE = Symbol.for('dxos.composable');
-
-export function slottable<E extends HTMLElement, P extends object = {}>(
-  render: (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
-): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>> {
-  const wrapped = (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => {
-    let warn = false;
-    if (props.asChild) {
-      try {
-        const child = Children.only(props.children);
-        if (isValidElement(child) && typeof child.type !== 'string' && !(child.type as any)[COMPOSABLE]) {
-          warn = true;
-          log.warn('slot child is not composable; create it with composable() or slottable()', {
-            child: (child.type as any).displayName ?? (child.type as any).name,
-          });
-        }
-      } catch {
-        // Children.only throws if not exactly one child — Slot handles this.
-      }
-    }
-
-    const result = render(props, forwardedRef);
-    if (warn) {
-      return createElement('div', { role: 'none', className: 'dx-slot-warning' }, result);
-    }
-
-    return result;
-  };
-
-  const component = forwardRef(wrapped as any) as any;
-  (component as any)[COMPOSABLE] = true;
-  return component;
-}
-
-/**
- * Factory for composable (leaf) components.
- * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
- * Consumers see only `ComposableProps<P>` — a narrow type exposing `classNames`, `className`,
- * `children`, and the custom props `P`.
- *
- * For generic components, use `any` for the type parameter inside `composable` and
- * cast the result to restore the generic signature for consumers.
- *
- * @example
- * ```tsx
- * const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef) => {
- *   return (
- *     <button {...composableProps(props, { classNames: 'btn' })} ref={forwardedRef}>
- *       {children}
- *     </button>
- *   );
- * });
- * ```
- */
-export function composable<E extends HTMLElement, P extends object = {}>(
-  render: (props: ComposableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
-): ForwardRefExoticComponent<ComposableProps<P> & RefAttributes<E>> {
-  const component = forwardRef(render as any) as any;
-  (component as any)[COMPOSABLE] = true;
-  return component;
-}

package/src/util/valence.ts

@@ -14,20 +14,30 @@ export const textValence = (valence?: MessageValence) => {
       return 'font-medium text-warning-text';
     case 'error':
       return 'font-medium text-error-text';
+    default:
+      return 'font-medium';
   }
 };
 
 export const messageValence = (valence?: MessageValence) => {
   switch (valence) {
     case 'success':
-      return 'font-medium text-success-text border-success-text bg-success-surface';
+      return 'font-medium border-success-text text-success-fg bg-success-surface';
     case 'info':
-      return 'font-medium text-info-text border-info-text bg-info-surface';
+      return 'font-medium border-info-text text-info-fg bg-info-surface';
     case 'warning':
-      return 'font-medium text-warning-text border-warning-text bg-warning-surface';
+      return 'font-medium border-warning-text text-warning-fg bg-warning-surface';
     case 'error':
-      return 'font-medium text-error-text border-error-text bg-error-surface';
+      return 'font-medium border-error-text text-error-fg bg-error-surface';
     default:
-      return 'font-medium text-neutral-text border-neutral-text bg-neutral-surface';
+      return 'font-medium border-neutral-text text-neutral-fg bg-neutral-surface';
   }
 };
+
+/**
+ * Classes for a Button rendered inside a Message.Root that should inherit the message's valence color.
+ * Message.Root sets --dx-valence-bg / --dx-valence-bg-hover / --dx-valence-text on its DOM node.
+ * Pass variant='valence' to the Button so button.css reads those variables.
+ */
+export const buttonValence = (_valence?: MessageValence): string =>
+  'text-(--dx-valence-text) bg-(--dx-valence-bg) hover:bg-(--dx-valence-bg-hover)';

package/dist/types/src/theme/components/avatar.d.ts

@@ -1,21 +0,0 @@
-import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
-export type AvatarStyleProps = Partial<{
-    size: Size;
-    srOnly: boolean;
-    status: 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
-    animation: 'pulse' | 'none';
-    variant: 'circle' | 'square';
-    inGroup: boolean;
-}>;
-export declare const avatarRoot: ComponentFunction<AvatarStyleProps>;
-export declare const avatarLabel: ComponentFunction<AvatarStyleProps>;
-export declare const avatarDescription: ComponentFunction<AvatarStyleProps>;
-export declare const avatarFrame: ComponentFunction<AvatarStyleProps>;
-export declare const avatarStatusIcon: ComponentFunction<AvatarStyleProps>;
-export declare const avatarRing: ComponentFunction<AvatarStyleProps>;
-export declare const avatarFallbackText: ComponentFunction<AvatarStyleProps>;
-export declare const avatarGroup: ComponentFunction<AvatarStyleProps>;
-export declare const avatarGroupLabel: ComponentFunction<AvatarStyleProps>;
-export declare const avatarGroupDescription: ComponentFunction<AvatarStyleProps>;
-export declare const avatarTheme: Theme<AvatarStyleProps>;
-//# sourceMappingURL=avatar.d.ts.map

package/dist/types/src/theme/components/avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/avatar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,IAAI,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAI/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7E,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,gBAAgB,CAMxD,CAAC;AAEJ,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAA2D,CAAC;AAExH,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,gBAAgB,CACb,CAAC;AAEtD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CACyC,CAAC;AAEtG,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,gBAAgB,CAU9D,CAAC;AAEJ,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,gBAAgB,CAmBxD,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,gBAAgB,CAAgD,CAAC;AAEpH,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CACpB,CAAC;AAEzC,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,gBAAgB,CAO9D,CAAC;AAEJ,eAAO,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,gBAAgB,CAClB,CAAC;AAEtD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAW/C,CAAC"}

package/dist/types/src/theme/components/breadcrumb.d.ts

@@ -1,9 +0,0 @@
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-export type breadcrumbStyleProps = {};
-export declare const breadcrumbRoot: ComponentFunction<breadcrumbStyleProps>;
-export declare const breadcrumbList: ComponentFunction<breadcrumbStyleProps>;
-export declare const breadcrumbListItem: ComponentFunction<breadcrumbStyleProps>;
-export declare const breadcrumbCurrent: ComponentFunction<breadcrumbStyleProps>;
-export declare const breadcrumbSeparator: ComponentFunction<breadcrumbStyleProps>;
-export declare const breadcrumbTheme: Theme<breadcrumbStyleProps>;
-//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/types/src/theme/components/breadcrumb.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/breadcrumb.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAIpE,MAAM,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEtC,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,oBAAoB,CACzB,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,oBAAoB,CAA8C,CAAC;AAElH,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,oBAAoB,CAA8C,CAAC;AAEtH,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,oBAAoB,CAAkC,CAAC;AAEzG,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,oBAAoB,CAC9C,CAAC;AAE3B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,oBAAoB,CAMvD,CAAC"}

package/dist/types/src/theme/components/button.d.ts

@@ -1,15 +0,0 @@
-import type { Density, Elevation, Theme } from '@dxos/ui-types';
-export declare const primaryButtonColors = "text-accent-surface-text bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100";
-export declare const staticDefaultButtonColors = "bg-input-surface text-input-surface-text";
-export declare const defaultButtonColors: string;
-export declare const ghostButtonColors: string;
-export type ButtonStyleProps = Partial<{
-    inGroup?: boolean;
-    textWrap?: boolean;
-    density: Density;
-    elevation: Elevation;
-    disabled: boolean;
-    variant: 'default' | 'primary' | 'ghost' | 'outline';
-}>;
-export declare const buttonTheme: Theme<ButtonStyleProps>;
-//# sourceMappingURL=button.d.ts.map