@dxos/ui-theme 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/util/tv.test.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { mx } from './mx';
+import { bridgeTv, tv } from './tv';
+
+describe('tv', () => {
+  test('resolves standard tailwind conflicts like mx', ({ expect }) => {
+    const recipe = tv({ base: 'text-sm', variants: { big: { true: 'text-lg' } } });
+    expect(recipe({ big: true })).toBe(mx('text-sm', 'text-lg'));
+    expect(recipe({ big: true })).toContain('text-lg');
+    expect(recipe({ big: true })).not.toContain('text-sm');
+  });
+
+  test('keeps dxos custom color tokens (text-base-fg over text-description)', ({ expect }) => {
+    const recipe = tv({ base: 'text-description', variants: { strong: { true: 'text-base-fg' } } });
+    expect(recipe({ strong: true })).toBe(mx('text-description', 'text-base-fg'));
+    expect(recipe({ strong: true })).toContain('text-base-fg');
+  });
+});
+
+describe('bridgeTv', () => {
+  test('adapts a slots recipe into Theme<P> functions with overrides', ({ expect }) => {
+    const recipe = tv({
+      slots: { root: 'p-1', label: 'text-sm' },
+      variants: { variant: { settings: { root: 'p-4', label: 'text-lg' } } },
+    });
+    const theme = bridgeTv(recipe, ['root', 'label']);
+    expect(typeof theme.root).toBe('function');
+    expect(theme.root({ variant: 'settings' })).toContain('p-4');
+    // consumer override wins via per-slot merge.
+    expect(theme.label({ variant: 'settings' }, 'text-xl')).toContain('text-xl');
+    expect(theme.label({ variant: 'settings' }, 'text-xl')).not.toContain('text-lg');
+  });
+});

package/src/util/tv.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createTV } from 'tailwind-variants';
+
+import { type ClassNameArray, type ClassNameValue, type Theme } from '@dxos/ui-types';
+
+import { twMergeConfig } from './tw-merge-config';
+
+export type { VariantProps } from 'tailwind-variants';
+
+/**
+ * Shared tailwind-variants instance bound to the dxos tailwind-merge config (see {@link twMergeConfig}),
+ * so recipes resolve class conflicts identically to {@link mx}. All component theme recipes import this,
+ * never the bare `tailwind-variants` package.
+ */
+export const tv = createTV({ twMerge: true, twMergeConfig });
+
+type SlotsRecipe<P extends Record<string, any>, S extends string> = (
+  props?: P,
+) => Record<S, (opts?: { class?: ClassNameValue }) => string>;
+
+/**
+ * The {@link Theme} sub-tree produced by {@link bridgeTv}, with each slot's resolver explicitly typed
+ * so call sites (and tests) stay fully typed instead of falling back to `any`.
+ */
+export type BridgedTheme<P extends Record<string, any>, S extends string> = Theme<P> & {
+  [K in S]: (styleProps: P, ...etc: ClassNameArray) => string;
+};
+
+/**
+ * Adapt a tailwind-variants slots recipe into the existing {@link Theme} shape (a map of
+ * {@link import('@dxos/ui-types').ComponentFunction}) so it can register in the `tx` theme tree and be
+ * consumed via `tx('component.slot', styleProps, ...classNames)`. Slots are enumerated explicitly (not
+ * via Proxy) so unknown paths resolve to `undefined` exactly as `getDeep` does today, and the result is
+ * a plain, inspectable object. Derive `slots` from `Object.keys(recipe())` at the call site.
+ */
+export const bridgeTv = <P extends Record<string, any>, S extends string>(
+  recipe: SlotsRecipe<P, S>,
+  slots: readonly S[],
+): BridgedTheme<P, S> =>
+  Object.fromEntries(
+    slots.map((slot) => [slot, (styleProps: P, ...etc: ClassNameArray) => recipe(styleProps)[slot]({ class: etc })]),
+  ) as BridgedTheme<P, S>;

package/src/util/tw-merge-config.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+/**
+ * Shared tailwind-merge configuration. The single source for both {@link mx} (extendTailwindMerge)
+ * and the {@link tv} instance (createTV `twMergeConfig`) so conflict resolution can't drift —
+ * notably for dxos custom tokens (`text-base-fg`, density, focus-ring).
+ */
+export const twMergeConfig = {
+  extend: {
+    classGroups: {
+      'font-family': ['font-body', 'font-mono'],
+      'font-weight': [
+        'font-thin',
+        'font-extralight',
+        'font-light',
+        'font-normal',
+        'font-medium',
+        'font-semibold',
+        'font-bold',
+        'font-extrabold',
+        'font-black',
+      ],
+      'density': ['dx-density-sm', 'dx-density-md', 'dx-density-lg'],
+      'dx-focus-ring': [
+        'dx-focus-ring',
+        'dx-focus-ring-inset',
+        'dx-focus-ring-always',
+        'dx-focus-ring-inset-always',
+        'dx-focus-ring-group',
+        'dx-focus-ring-group-x',
+        'dx-focus-ring-group-y',
+        'dx-focus-ring-group-always',
+        'dx-focus-ring-group-x-always',
+        'dx-focus-ring-group-y-always',
+        'dx-focus-ring-inset-over-all',
+        'dx-focus-ring-inset-over-all-always',
+        'dx-focus-ring-main',
+        'dx-focus-ring-main-always',
+      ],
+    },
+  },
+} as const;
+
+export type AdditionalClassGroups = 'density' | 'dx-focus-ring';