@dxos/ui-theme 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

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

@@ -1,13 +0,0 @@
-import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
-export type SelectStyleProps = Partial<{
-    elevation: Elevation;
-}>;
-export declare const selectContent: ComponentFunction<SelectStyleProps>;
-export declare const selectViewport: ComponentFunction<SelectStyleProps>;
-export declare const selectItem: ComponentFunction<SelectStyleProps>;
-export declare const selectItemIndicator: ComponentFunction<SelectStyleProps>;
-export declare const selectArrow: ComponentFunction<SelectStyleProps>;
-export declare const selectSeparator: ComponentFunction<SelectStyleProps>;
-export declare const selectScrollButton: ComponentFunction<SelectStyleProps>;
-export declare const selectTheme: Theme<SelectStyleProps>;
-//# sourceMappingURL=select.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/select.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAIpF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,gBAAgB,CAQ7D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,gBAAgB,CAAkC,CAAC;AAElG,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,gBAAgB,CAOxD,CAAC;AAEJ,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,gBAAgB,CAAkD,CAAC;AAEvH,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAAoD,CAAC;AAEjH,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,gBAAgB,CACL,CAAC;AAE5D,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,gBAAgB,CACwB,CAAC;AAE5F,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAQ/C,CAAC"}

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

@@ -1,8 +0,0 @@
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-export type SeparatorStyleProps = {
-    orientation?: 'horizontal' | 'vertical';
-    subdued?: boolean;
-};
-export declare const separatorRoot: ComponentFunction<SeparatorStyleProps>;
-export declare const separatorTheme: Theme<SeparatorStyleProps>;
-//# sourceMappingURL=separator.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/separator.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAIpE,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,mBAAmB,CAM9D,CAAC;AAEJ,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,mBAAmB,CAErD,CAAC"}

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

@@ -1,7 +0,0 @@
-import type { ComponentFunction, Theme } from '@dxos/ui-types';
-export type SkeletonStyleProps = {
-    variant?: 'default' | 'circle' | 'text';
-};
-export declare const skeletonRoot: ComponentFunction<SkeletonStyleProps>;
-export declare const skeletonTheme: Theme<SkeletonStyleProps>;
-//# sourceMappingURL=skeleton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/skeleton.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAI/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,kBAAkB,CAM5D,CAAC;AAEJ,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CAEnD,CAAC"}

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

@@ -1,4 +0,0 @@
-import { type Theme } from '@dxos/ui-types';
-export type SplitterStyleProps = {};
-export declare const splitterTheme: Theme<SplitterStyleProps>;
-//# sourceMappingURL=splitter.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"splitter.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/splitter.ts"],"names":[],"mappings":"AAIA,OAAO,EAA0B,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAIpE,MAAM,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAQpC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CAGnD,CAAC"}

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

@@ -1,9 +0,0 @@
-import type { ComponentFunction, Theme } from '@dxos/ui-types';
-export type StatusStyleProps = {
-    variant?: 'default' | 'main-bottom';
-    indeterminate?: boolean;
-};
-export declare const statusRoot: ComponentFunction<StatusStyleProps>;
-export declare const statusBar: ComponentFunction<StatusStyleProps>;
-export declare const statusTheme: Theme<StatusStyleProps>;
-//# sourceMappingURL=status.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/status.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAI/D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,gBAAgB,CAKxD,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,gBAAgB,CAMvD,CAAC;AAEJ,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAG/C,CAAC"}

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

@@ -1,7 +0,0 @@
-import { type ChromaticPalette, type ComponentFunction, type MessageValence, type NeutralPalette, type Theme } from '@dxos/ui-types';
-export type TagStyleProps = {
-    palette?: ChromaticPalette | NeutralPalette | MessageValence;
-};
-export declare const tagRoot: ComponentFunction<TagStyleProps>;
-export declare const tagTheme: Theme<TagStyleProps>;
-//# sourceMappingURL=tag.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/tag.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,KAAK,EACX,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,gBAAgB,GAAG,cAAc,GAAG,cAAc,CAAC;CAC9D,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAAuC,CAAC;AAE7F,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAEzC,CAAC"}

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

@@ -1,12 +0,0 @@
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-export type ToastStyleProps = Partial<{
-    srOnly: boolean;
-}>;
-export declare const toastViewport: ComponentFunction<ToastStyleProps>;
-export declare const toastRoot: ComponentFunction<ToastStyleProps>;
-export declare const toastBody: ComponentFunction<ToastStyleProps>;
-export declare const toastActions: ComponentFunction<ToastStyleProps>;
-export declare const toastTitle: ComponentFunction<ToastStyleProps>;
-export declare const toastDescription: ComponentFunction<ToastStyleProps>;
-export declare const toastTheme: Theme<ToastStyleProps>;
-//# sourceMappingURL=toast.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/toast.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAIpE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC;IACpC,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,eAAe,CAM1D,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAWtD,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACG,CAAC;AAE7D,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,eAAe,CACD,CAAC;AAE5D,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CACD,CAAC;AAE1D,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,eAAe,CACC,CAAC;AAElE,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAO7C,CAAC"}

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

@@ -1,11 +0,0 @@
-import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
-export type ToolbarStyleProps = Partial<{
-    density: Density;
-    disabled: boolean;
-    layoutManaged: boolean;
-}>;
-export declare const toolbarLayout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout";
-export declare const toolbarRoot: ComponentFunction<ToolbarStyleProps>;
-export declare const toolbarText: ComponentFunction<ToolbarStyleProps>;
-export declare const toolbarTheme: Theme<ToolbarStyleProps>;
-//# sourceMappingURL=toolbar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/toolbar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAIlF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,6GACkF,CAAC;AAE7G,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,iBAAiB,CAQ5D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,iBAAiB,CAE5D,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAGjD,CAAC"}

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

@@ -1,8 +0,0 @@
-import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
-export type TooltipStyleProps = Partial<{
-    elevation: Elevation;
-}>;
-export declare const tooltipContent: ComponentFunction<TooltipStyleProps>;
-export declare const tooltipArrow: ComponentFunction<TooltipStyleProps>;
-export declare const tooltipTheme: Theme<TooltipStyleProps>;
-//# sourceMappingURL=tooltip.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/tooltip.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAIpF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACtC,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAM7D,CAAC;AAEJ,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAC1B,CAAC;AAErC,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAGjD,CAAC"}

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

@@ -1,10 +0,0 @@
-import type { ComponentFunction, Theme } from '@dxos/ui-types';
-export type TreegridStyleProps = Partial<{
-    level: number;
-    indent: boolean;
-}>;
-export declare const treegridRoot: ComponentFunction<TreegridStyleProps>;
-export declare const treegridRow: ComponentFunction<TreegridStyleProps>;
-export declare const treegridCell: ComponentFunction<TreegridStyleProps>;
-export declare const treegridTheme: Theme<TreegridStyleProps>;
-//# sourceMappingURL=treegrid.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"treegrid.d.ts","sourceRoot":"","sources":["../../../../../src/theme/components/treegrid.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAI/D,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC,CAAC;AAaH,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,kBAAkB,CAAqC,CAAC;AAErG,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,kBAAkB,CACY,CAAC;AAE3E,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,kBAAkB,CAC/B,CAAC;AAEjC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CAInD,CAAC"}

package/dist/types/src/theme/index.d.ts

@@ -1,4 +0,0 @@
-export * from './components';
-export * from './primitives';
-export * from './theme';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/theme/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/types/src/theme/primitives/column.d.ts

@@ -1,29 +0,0 @@
-import { type ComponentFunction } from '@dxos/ui-types';
-/**
- * Column-aware theme utilities.
- * Components apply these in their theme functions to participate in the Column grid
- * without importing Column React components.
- *
- * CSS custom property cascade:
- * - Column.Root sets `--dx-col: 2 / span 1` (center column placement).
- * - ScrollArea.Viewport resets `--dx-col: auto` after consuming `--gutter`.
- * - Components apply `grid-column: var(--dx-col, auto)` to auto-center in Column
- *   or do nothing outside Column / inside ScrollArea.
- */
-export declare const withColumn: {
-    /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
-    center: () => string;
-    /** Propagates the Column grid to children via subgrid. No-op outside Column.
-     *  Direct children default to center column unless they are a dx-container (ScrollArea). */
-    propagate: () => string;
-    /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
-    consumed: () => string;
-};
-export type ColumnStyleProps = {};
-export declare const columnTheme: {
-    root: ComponentFunction<ColumnStyleProps>;
-    row: ComponentFunction<ColumnStyleProps>;
-    bleed: ComponentFunction<ColumnStyleProps>;
-    center: ComponentFunction<ColumnStyleProps>;
-};
-//# sourceMappingURL=column.d.ts.map

package/dist/types/src/theme/primitives/column.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"column.d.ts","sourceRoot":"","sources":["../../../../../src/theme/primitives/column.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU;IACrB,kGAAkG;;IAGlG;gGAC4F;;IAI5F,gFAAgF;;CAEjF,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAiClC,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC"}

package/dist/types/src/theme/primitives/index.d.ts

@@ -1,3 +0,0 @@
-export * from './column';
-export * from './panel';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/theme/primitives/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/primitives/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/types/src/theme/primitives/panel.d.ts

@@ -1,13 +0,0 @@
-import { type ComponentFunction } from '@dxos/ui-types';
-type Size = 'lg' | 'md' | 'sm';
-export type PanelStyleProps = {
-    size?: Size;
-};
-export declare const panelTheme: {
-    root: ComponentFunction<PanelStyleProps>;
-    toolbar: ComponentFunction<PanelStyleProps>;
-    content: ComponentFunction<PanelStyleProps>;
-    statusbar: ComponentFunction<PanelStyleProps>;
-};
-export {};
-//# sourceMappingURL=panel.d.ts.map

package/dist/types/src/theme/primitives/panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../../../src/theme/primitives/panel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAyBF,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC"}

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

@@ -1,5 +0,0 @@
-import { type Theme, type ThemeFunction } from '@dxos/ui-types';
-export declare const defaultTheme: Theme<Record<string, any>>;
-export declare const bindTheme: <P extends Record<string, any>>(theme: Theme<Record<string, any>>) => ThemeFunction<P>;
-export declare const defaultTx: ThemeFunction<Record<string, any>>;
-//# sourceMappingURL=theme.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAA+C,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAiC7G,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAwCnD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAG,aAAa,CAAC,CAAC,CAK3G,CAAC;AAEF,eAAO,MAAM,SAAS,oCAA0B,CAAC"}

package/src/css/components/selected.css

@@ -1,30 +0,0 @@
-/**
- * Selected / Highlighted state utilities
- */
-
-@layer dx-components {
-  .dx-hover {
-    @apply cursor-pointer hover:bg-highlight-surface! hover:text-highlight-surface-text!;
-  }
-
-  /** TODO(burdon): Disambiguate from dx-hover */
-  .dx-highlighted {
-    @apply data-[highlighted]:bg-highlight-surface
-      data-[highlighted]:text-highlight-surface-text
-      hover:data-[highlighted]:bg-highlight-surface-hover;
-  }
-
-  /** TODO(burdon): Only show active if container has attention. */
-  .dx-current {
-    @apply dx-ring-pseudo
-      aria-[current=true]:bg-highlight-surface aria-[current=true]:text-highlight-surface-text
-      aria-[current=true]:after:ring-active-separator!;
-  }
-
-  .dx-selected {
-    @apply aria-selected:bg-selected-surface
-      aria-selected:text-selected-surface-text hover:aria-selected:text-selected-surface-text
-      aria-selected:font-semibold aria-selected:tracking-normal
-      transition-[color,font-variation-settings,letter-spacing];
-  }
-}

package/src/theme/components/avatar.ts

@@ -1,95 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
-
-import { mx, getSize, getHeight } from '../../util';
-
-export type AvatarStyleProps = Partial<{
-  size: Size;
-  srOnly: boolean;
-  status: 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
-  animation: 'pulse' | 'none';
-  variant: 'circle' | 'square';
-  inGroup: boolean;
-}>;
-
-export const avatarRoot: ComponentFunction<AvatarStyleProps> = ({ size = 10, inGroup }, ...etc) =>
-  mx(
-    'relative inline-flex shrink-0',
-    getSize(size),
-    inGroup && (size === 'px' || size <= 3 ? '-mr-1' : '-mr-2'),
-    ...etc,
-  );
-
-export const avatarLabel: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) => mx(srOnly && 'sr-only', ...etc);
-
-export const avatarDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
-  mx('text-description', srOnly && 'sr-only', ...etc);
-
-export const avatarFrame: ComponentFunction<AvatarStyleProps> = ({ variant }, ...etc) =>
-  mx('h-full w-full bg-(--surface-bg)', variant === 'circle' ? 'rounded-full' : 'rounded-sm', ...etc);
-
-export const avatarStatusIcon: ComponentFunction<AvatarStyleProps> = ({ status, size = 3 }, ...etc) =>
-  mx(
-    'absolute bottom-0 end-0',
-    getSize(size),
-    status === 'inactive'
-      ? 'text-amber-400 dark:text-amber-300'
-      : status === 'active'
-        ? 'text-emerald-400 dark:text-emerald-300'
-        : 'text-neutral-400 dark:text-neutral-300',
-    ...etc,
-  );
-
-export const avatarRing: ComponentFunction<AvatarStyleProps> = ({ status, variant, animation }, ...etc) =>
-  mx(
-    'absolute inset-0 border-2',
-    variant === 'circle' ? 'rounded-full' : 'rounded-sm',
-    status === 'current'
-      ? 'border-primary-400 dark:border-primary-500'
-      : status === 'active'
-        ? 'border-emerald-400 dark:border-emerald-400'
-        : status === 'error'
-          ? 'border-rose-400 dark:border-rose-500'
-          : status === 'warning'
-            ? 'border-amber-400 dark:border-amber-500'
-            : status === 'inactive'
-              ? 'border-separator'
-              : status === 'internal'
-                ? 'border-fuchsia-600'
-                : 'border-[color:var(--surface-bg)]',
-    animation === 'pulse' ? 'animate-halo-pulse' : '',
-    ...etc,
-  );
-
-export const avatarFallbackText: ComponentFunction<AvatarStyleProps> = (_props, ...etc) => mx('fill-white', ...etc);
-
-export const avatarGroup: ComponentFunction<AvatarStyleProps> = (_props, ...etc) =>
-  mx('inline-flex items-center', ...etc);
-
-export const avatarGroupLabel: ComponentFunction<AvatarStyleProps> = ({ size, srOnly }, ...etc) =>
-  mx(
-    srOnly
-      ? 'sr-only'
-      : 'rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center',
-    size && getHeight(size),
-    ...etc,
-  );
-
-export const avatarGroupDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
-  mx(srOnly ? 'sr-only' : 'text-description', ...etc);
-
-export const avatarTheme: Theme<AvatarStyleProps> = {
-  root: avatarRoot,
-  label: avatarLabel,
-  description: avatarDescription,
-  statusIcon: avatarStatusIcon,
-  frame: avatarFrame,
-  ring: avatarRing,
-  fallbackText: avatarFallbackText,
-  group: avatarGroup,
-  groupLabel: avatarGroupLabel,
-  groupDescription: avatarGroupDescription,
-};

package/src/theme/components/breadcrumb.ts

@@ -1,29 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type breadcrumbStyleProps = {};
-
-export const breadcrumbRoot: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) =>
-  mx('shrink-0 flex items-center', ...etc);
-
-export const breadcrumbList: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
-
-export const breadcrumbListItem: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
-
-export const breadcrumbCurrent: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx(...etc);
-
-export const breadcrumbSeparator: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) =>
-  mx('opacity-50', ...etc);
-
-export const breadcrumbTheme: Theme<breadcrumbStyleProps> = {
-  root: breadcrumbRoot,
-  list: breadcrumbList,
-  listItem: breadcrumbListItem,
-  current: breadcrumbCurrent,
-  separator: breadcrumbSeparator,
-};

package/src/theme/components/button.ts

@@ -1,48 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import type { ComponentFunction, Density, Elevation, Theme } from '@dxos/ui-types';
-
-import { ghostHover } from '../../fragments';
-import { mx } from '../../util';
-
-export 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 const staticDefaultButtonColors = 'bg-input-surface text-input-surface-text';
-
-export const defaultButtonColors = mx(
-  staticDefaultButtonColors,
-  'data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface',
-);
-
-export const ghostButtonColors = mx(
-  ghostHover,
-  'hover:text-inherit data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface',
-);
-
-export type ButtonStyleProps = Partial<{
-  inGroup?: boolean;
-  textWrap?: boolean;
-  density: Density;
-  elevation: Elevation;
-  disabled: boolean;
-  variant: 'default' | 'primary' | 'ghost' | 'outline';
-}>;
-
-const buttonRoot: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
-  return mx('dx-button dx-focus-ring group [&_span]:truncate', ...etc);
-};
-
-const buttonGroup: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {
-  return mx(
-    'inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
-    ...etc,
-  );
-};
-
-export const buttonTheme: Theme<ButtonStyleProps> = {
-  root: buttonRoot,
-  group: buttonGroup,
-};

package/src/theme/components/card.ts

@@ -1,102 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type CardStyleProps = {
-  border?: boolean;
-  fullWidth?: boolean;
-  srOnly?: boolean;
-  variant?: 'default' | 'subtitle' | 'description';
-  density?: Density;
-  truncate?: boolean;
-  padding?: boolean;
-};
-
-const cardRoot: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc) =>
-  mx(
-    'dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden',
-    border &&
-      'bg-card-surface border border-separator dark:border-subdued-separator rounded-xs dx-focus-ring-group-y-indicator',
-    fullWidth && 'max-w-none!',
-    ...etc,
-  );
-
-const cardToolbar: ComponentFunction<CardStyleProps> = (_, ...etc) =>
-  mx(
-    'dx-card__toolbar dx-density-fine bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! [contain:none]',
-    ...etc,
-  );
-
-const cardTitle: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__title grow truncate', ...etc);
-
-const cardContent: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__content contents pb-1 last:pb-0', ...etc);
-
-const cardHeading: ComponentFunction<CardStyleProps> = ({ variant = 'default' }, ...etc) =>
-  mx(
-    'dx-card__heading',
-    variant === 'default' && 'py-1',
-    variant === 'subtitle' && 'py-2 text-xs text-description font-medium uppercase',
-    ...etc,
-  );
-
-const cardText: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate: _truncate }, ...etc) =>
-  mx(
-    'dx-card__text items-center overflow-hidden',
-    variant === 'default' && 'py-1',
-    variant === 'description' && 'py-1.5 text-description',
-    ...etc,
-  );
-
-const cardTextSpan: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate }, ...etc) =>
-  mx(variant === 'description' && 'text-sm text-description line-clamp-3', truncate && 'truncate', ...etc);
-
-const cardPoster: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__poster col-span-3 max-h-[200px]', ...etc);
-
-const cardPosterIcon: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]', ...etc);
-
-const cardAction: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__acztion col-span-3 !grid grid-cols-subgrid p-0! w-full text-start overflow-hidden', ...etc);
-
-const cardActionLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__action-label min-w-0 flex-1 truncate', ...etc);
-
-const cardLink: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!', ...etc);
-
-const cardLinkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__link-label min-w-0 flex-1 truncate', ...etc);
-
-const cardRow: ComponentFunction<CardStyleProps> = (_, ...etc) =>
-  mx('dx-card__row col-span-3 grid grid-cols-subgrid', ...etc);
-
-const cardIconBlock: ComponentFunction<CardStyleProps> = ({ padding }, ...etc) =>
-  mx(
-    'dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center',
-    padding && '[&>*]:p-1',
-    ...etc,
-  );
-
-export const cardTheme: Theme<CardStyleProps> = {
-  root: cardRoot,
-  toolbar: cardToolbar,
-  title: cardTitle,
-  content: cardContent,
-  row: cardRow,
-  heading: cardHeading,
-  text: cardText,
-  'text-span': cardTextSpan,
-  poster: cardPoster,
-  'poster-icon': cardPosterIcon,
-  action: cardAction,
-  'action-label': cardActionLabel,
-  link: cardLink,
-  'link-label': cardLinkLabel,
-  'icon-block': cardIconBlock,
-};

package/src/theme/components/dialog.ts

@@ -1,61 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-import { withColumn } from '../primitives/column';
-
-export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
-
-const sizeMap: Record<DialogSize, string> = {
-  sm: 'md:max-w-[24rem]',
-  md: 'md:max-w-[32rem]!',
-  lg: 'md:max-w-[40rem]!',
-  xl: 'md:max-w-[60rem]!',
-};
-
-export type DialogStyleProps = {
-  srOnly?: boolean;
-  inOverlayLayout?: boolean;
-  elevation?: Elevation;
-  size?: DialogSize;
-};
-
-export const dialogOverlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
-
-export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size = 'md' }, ...etc) => {
-  return mx(
-    '@container',
-    'dx-dialog__content dx-focus-ring dx-modal-surface dx-density-coarse py-4',
-    !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
-    sizeMap[size],
-    ...etc,
-  );
-};
-
-export const dialogHeader: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
-  mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
-
-export const dialogBody: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
-  mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
-
-export const dialogActionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
-  mx('dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse', withColumn.center(), ...etc);
-
-export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
-  mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
-
-export const dialogDescription: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
-  mx('dx-dialog__description', 'text-description', srOnly && 'sr-only', ...etc);
-
-export const dialogTheme: Theme<DialogStyleProps> = {
-  overlay: dialogOverlay,
-  content: dialogContent,
-  header: dialogHeader,
-  body: dialogBody,
-  actionbar: dialogActionBar,
-  title: dialogTitle,
-  description: dialogDescription,
-};

package/src/theme/components/focus.ts

@@ -1,33 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type FocusStyleProps = {
-  border?: boolean;
-};
-
-/**
- * Focus ring styles shared by Focus.Group and Focus.Item.
- * Uses a `::after` pseudo-element overlay so the ring paints above child content
- * (inset box-shadow alone is obscured by children with backgrounds).
- * The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
- * When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
- */
-const focusRing: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
-  mx(
-    'dx-ring-pseudo outline-hidden',
-    'focus:after:ring-neutral-focus-indicator',
-    'data-[focus-state=active]:after:ring-neutral-focus-indicator',
-    'data-[focus-state=error]:after:ring-rose-500',
-    border && 'border border-separator',
-    ...etc,
-  );
-
-export const focusTheme: Theme<FocusStyleProps> = {
-  group: focusRing,
-  item: focusRing,
-};