@veevarts/design-system 2.0.0-alpha.57 → 2.0.0-alpha.59

package/dist/patterns/TimeField/TimeField.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { TimeFieldProps } from './types';
+export declare function TimeField({ value: valueProp, defaultValue, onChange, label, 'aria-label': ariaLabel, placeholder, emptyContent, invalidMessage, minTime, minTimeMessage, listStart, listEnd, listStep, locale, isRequired, isDisabled, isInvalid, errorMessage, isClearable, clearLabel, onBlur, size, variant, labelPlacement, className, inputProps, popoverProps, 'data-testid': dataTestId, }: TimeFieldProps): JSX.Element;
+export declare namespace TimeField {
+    var displayName: string;
+}

package/dist/patterns/TimeField/index.d.ts

@@ -0,0 +1,3 @@
+export { TimeField } from './TimeField';
+export { parseTimeInput } from './time';
+export type { TimeFieldProps } from './types';

package/dist/patterns/TimeField/time.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The time logic behind {@link TimeField}, kept free of React so it can be
+ * tested and reused on its own. Every time in and out is 24-hour `"HH:mm"`.
+ */
+/** Minutes since midnight of an `"HH:mm"` time. */
+export declare function toMinutes(time: string): number;
+/**
+ * Read typed text as a time: `"HH:mm"`, or `null` when it is not one.
+ *
+ * Forgiving on purpose: `"7:15 pm"`, `"7:15pm"`, `"715p"`, `"7p"`, `"19:15"`,
+ * `"1915"` and `"7"` all work; case, spaces and dots do not matter
+ * (`"7:15 P.M."`). Without am/pm, hours 1–6 read as afternoon (no venue opens
+ * at 3 AM) and every other hour as 24-hour: `"3"` is 15:00, `"7"` is 07:00,
+ * `"19"` is 19:00, `"0"` is midnight.
+ *
+ * @example
+ * parseTimeInput('715p'); // '19:15'
+ * parseTimeInput('3');    // '15:00'
+ * parseTimeInput('25');   // null
+ */
+export declare function parseTimeInput(input: string): string | null;
+/**
+ * The suggested times: `start` to `end` inclusive, every `step` whole
+ * minutes. Empty when `step` is under a minute or `end` is before `start`.
+ */
+export declare function buildTimeOptions(start: string, end: string, step: number): string[];
+/**
+ * Whether the list keeps `time` while `query` is typed. It compares against
+ * the 12-hour form (`"7:30"`) and the 24-hour forms (`"19:30"`, `"07:30"`), so
+ * it does not depend on how the label is formatted: `"7"` keeps 7:00 and
+ * 7:30 AM and PM, `"7p"` only the PM ones, `"19"` the 7 PM ones, `"p"` every
+ * PM time.
+ */
+export declare function matchesTimeQuery(time: string, query: string): boolean;
+/**
+ * The label for a time in `locale`: `"7:15 PM"` in `en-US`, `"19:15"` in
+ * `en-GB`, `"7:15 p. m."` in `es-CO`. No-break spaces become plain ones, so
+ * the label matches what people type and what tests search for.
+ */
+export declare function formatTimeLabel(time: string, locale: string): string;

package/dist/patterns/TimeField/types.d.ts

@@ -0,0 +1,77 @@
+import { FocusEvent, ReactNode } from 'react';
+import { AutocompleteProps } from '../../components';
+/** One row of the list: the `"HH:mm"` key and its locale label. */
+export interface TimeFieldOption {
+    key: string;
+    label: string;
+}
+export interface TimeFieldProps {
+    /**
+     * The time as 24-hour `"HH:mm"` text, or `null` for none. Omit for
+     * uncontrolled mode.
+     */
+    value?: string | null;
+    /** Starting time in uncontrolled mode. */
+    defaultValue?: string | null;
+    /** Called with the committed `"HH:mm"`, or `null` when a clearable field is emptied. */
+    onChange?: (time: string | null) => void;
+    /** Visible label. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    'aria-label'?: string;
+    /** "e.g. 7:15 PM". */
+    placeholder?: string;
+    /**
+     * Shown in the list when nothing matches the typed text, or the text was
+     * erased ("Type a time like 7:15 PM"). Required and non-empty: HeroUI's
+     * own is English, and an Autocomplete that hides an empty list loses its
+     * options to `aria-hidden` when they come back.
+     */
+    emptyContent: ReactNode;
+    /** Shown when the typed text is not a time ("Enter a time like 7:15 PM."). */
+    invalidMessage: ReactNode;
+    /**
+     * Earliest allowed `"HH:mm"`. Earlier times leave the list, and typing
+     * one, or receiving one as `value`, shows `minTimeMessage`.
+     */
+    minTime?: string;
+    /** Shown for a time before `minTime` ("Ends after it starts."). Defaults to `invalidMessage`. */
+    minTimeMessage?: ReactNode;
+    /** First time the list suggests. @default '07:00' */
+    listStart?: string;
+    /** Last time the list suggests, inclusive. @default '21:00' */
+    listEnd?: string;
+    /** Minutes between suggested times. @default 30 */
+    listStep?: number;
+    /**
+     * BCP 47 locale the times are written in: "7:15 PM" in `en-US`, "19:15"
+     * in `en-GB`. Pass the same one as `HeroUIProvider`. @default 'en-US'
+     */
+    locale?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    /** Marks the field invalid from outside; `errorMessage` is shown with it. */
+    isInvalid?: boolean;
+    errorMessage?: ReactNode;
+    /**
+     * Whether the field may be emptied: a clear button shows, and leaving it
+     * empty commits `null`. Otherwise leaving it empty restores the time it
+     * had. @default false
+     */
+    isClearable?: boolean;
+    /** Accessible name of the clear button ("Clear time"); HeroUI gives it none. */
+    clearLabel?: string;
+    /** Called after the field has committed what was typed (react-hook-form's `field.onBlur`). */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    size?: AutocompleteProps['size'];
+    /** @default 'bordered' */
+    variant?: AutocompleteProps['variant'];
+    /** @default 'outside-top' */
+    labelPlacement?: AutocompleteProps['labelPlacement'];
+    className?: string;
+    /** Passed to HeroUI's input: `{ classNames: { inputWrapper: 'h-11' } }`. */
+    inputProps?: AutocompleteProps['inputProps'];
+    /** Passed to HeroUI's popover. */
+    popoverProps?: AutocompleteProps['popoverProps'];
+    /** Lands on the `<input>`. Options get `${data-testid}-option-${HH:mm}`. */
+    'data-testid'?: string;
+}

package/dist/patterns/index.d.ts

@@ -71,6 +71,8 @@ export { UnderlineTabs } from './UnderlineTabs';
 export type { UnderlineTabsProps, UnderlineTabItem, UnderlineTabsSize, UnderlineTabsLevel } from './UnderlineTabs';
 export { AdminFieldLabel, AdminTextField, adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
 export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps, } from './AdminTextField';
+export { TimeField, parseTimeInput } from './TimeField';
+export type { TimeFieldProps } from './TimeField';
 export { RowActions } from './RowActions';
 export type { RowActionsProps, RowAction } from './RowActions';
 export { PickerRow } from './PickerRow';

package/dist/tailwind/index.cjs

@@ -23,6 +23,9 @@ __export(index_exports, {
   adminSurfaceCss: () => adminSurfaceCss,
   adminSurfaceTailwindColors: () => adminSurfaceTailwindColors,
   adminSurfaceTokens: () => adminSurfaceTokens,
+  assistantSurfacePlugin: () => assistantSurfacePlugin,
+  assistantSurfaceTailwindColors: () => assistantSurfaceTailwindColors,
+  assistantSurfaceTokens: () => assistantSurfaceTokens,
   colors: () => colors,
   createHeroUIConfig: () => createHeroUIConfig,
   deepMerge: () => deepMerge,
@@ -258,12 +261,12 @@ function adminSurfaceCss({
   scope = ".acct",
   fontFamily = "'NeueMontreal', system-ui, sans-serif"
 } = {}) {
-  const declarations = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  const declarations2 = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
   const typography2 = fontFamily ? `
   font-family: ${fontFamily};
   color: var(--ink);` : "";
   return `${scope} {
-${declarations}${typography2}
+${declarations2}${typography2}
 }
 `;
 }
@@ -308,6 +311,70 @@ var posSurfaceTokens = {
 };
 var posSurfaceTailwindColors = { ...posSurfaceTokens };
 
+// src/tokens/assistant-surface.ts
+var info = colors.palettes.info;
+var HEROUI_CONTENT = {
+  light: { content1: "#ffffff", content2: "#f4f4f5" },
+  dark: { content1: "#18181b", content2: "#27272a" }
+};
+var ASSISTANT_SURFACE_TOKEN_NAMES = [
+  /** Text and icon tone that marks something as the assistant's. */
+  "accent",
+  /** Tint behind small assistant marks (an avatar disc, an info notice). */
+  "fill",
+  /** Hairline around assistant regions. */
+  "border",
+  /** Fill of the person's own turn. */
+  "user-bubble",
+  /** Fill of the assistant's turn, where an app draws it as a bubble. */
+  "assistant-bubble",
+  /** Focus ring inside assistant surfaces. */
+  "focus"
+];
+var assistantSurfaceTokens = {
+  light: {
+    accent: info[600],
+    fill: info[100],
+    border: info[200],
+    "user-bubble": HEROUI_CONTENT.light.content2,
+    "assistant-bubble": HEROUI_CONTENT.light.content1,
+    focus: info[500]
+  },
+  dark: {
+    accent: info[300],
+    fill: info[900],
+    border: info[800],
+    "user-bubble": HEROUI_CONTENT.dark.content2,
+    "assistant-bubble": HEROUI_CONTENT.dark.content1,
+    focus: info[400]
+  }
+};
+function hexToChannels(hex) {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error(`bad hex: ${hex}`);
+  return [1, 3, 5].map((start) => parseInt(hex.slice(start, start + 2), 16)).join(" ");
+}
+var assistantSurfaceVar = (name) => `--ai-${name}`;
+var declarations = (theme) => Object.fromEntries(
+  ASSISTANT_SURFACE_TOKEN_NAMES.map((name) => [
+    assistantSurfaceVar(name),
+    hexToChannels(assistantSurfaceTokens[theme][name])
+  ])
+);
+var ASSISTANT_SURFACE_SELECTORS = {
+  light: ':root, .light, [data-theme="light"]',
+  dark: ".dark"
+};
+var assistantSurfaceBase = {
+  [ASSISTANT_SURFACE_SELECTORS.light]: declarations("light"),
+  [ASSISTANT_SURFACE_SELECTORS.dark]: declarations("dark")
+};
+var assistantSurfaceTailwindColors = Object.fromEntries(
+  ASSISTANT_SURFACE_TOKEN_NAMES.map((name) => [
+    name,
+    `rgb(var(${assistantSurfaceVar(name)}, ${hexToChannels(assistantSurfaceTokens.light[name])}) / <alpha-value>)`
+  ])
+);
+
 // src/tailwind/index.ts
 var tailwindTheme = {
   colors: {
@@ -323,7 +390,11 @@ var tailwindTheme = {
     // `danger`/`info`/`warn` do not shadow the semantic palettes, and fed
     // from the token object so utility and token cannot disagree.
     // See src/tokens/pos-surface.ts.
-    pos: posSurfaceTailwindColors
+    pos: posSurfaceTailwindColors,
+    // Assistant palette. Unlike `acct`/`pos` these resolve to CSS custom
+    // properties, because they have a dark value: the preset's plugin
+    // below writes the properties. See src/tokens/assistant-surface.ts.
+    ai: assistantSurfaceTailwindColors
   },
   fontFamily: typography.fontFamily,
   spacing,
@@ -402,11 +473,15 @@ var veevartContent = [
   "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
   "./node_modules/@veevarts/design-system/dist/**/*.{js,mjs,jsx,tsx}"
 ];
+function assistantSurfacePlugin({ addBase }) {
+  addBase(assistantSurfaceBase);
+}
 var veevartPreset = {
   theme: {
     extend: tailwindTheme
   },
-  darkMode: "class"
+  darkMode: "class",
+  plugins: [assistantSurfacePlugin]
 };
 var tokens = {
   colors,
@@ -419,6 +494,9 @@ var tokens = {
   adminSurfaceCss,
   adminSurfaceTailwindColors,
   adminSurfaceTokens,
+  assistantSurfacePlugin,
+  assistantSurfaceTailwindColors,
+  assistantSurfaceTokens,
   colors,
   createHeroUIConfig,
   deepMerge,

package/dist/tailwind/index.d.ts

@@ -3,6 +3,7 @@ import { typography } from '../tokens/typography';
 import { spacing } from '../tokens/spacing';
 export { colors, typography, spacing };
 export { adminSurfaceCss, adminSurfaceTokens, adminSurfaceTailwindColors } from '../tokens/admin-surface';
+export { assistantSurfaceTokens, assistantSurfaceTailwindColors } from '../tokens/assistant-surface';
 export interface ColorPalette {
     50: string;
     100: string;
@@ -48,6 +49,7 @@ export declare const tailwindTheme: {
     colors: {
         acct: Record<string, string>;
         pos: Record<string, string>;
+        ai: Record<"accent" | "fill" | "border" | "user-bubble" | "assistant-bubble" | "focus", string>;
         secondary: "#000000";
         success: "#057A54";
         warning: "#F5A524";
@@ -251,11 +253,28 @@ export declare function createHeroUIConfig(overrides?: HeroUIConfigOverrides): H
  * Includes HeroUI theme and Design System components
  */
 export declare const veevartContent: string[];
+/** The slice of Tailwind's plugin API the preset's plugins use. */
+export interface PresetPluginApi {
+    addBase: (base: Record<string, Record<string, string>>) => void;
+}
+/**
+ * Writes the `--ai-*` custom properties: light values on `:root`, dark values
+ * under `.dark`. The `ai-*` colours read them, so without this plugin they
+ * stay on their light fallbacks.
+ *
+ * A plain function, not `tailwindcss/plugin`, so this bundle does not pull
+ * Tailwind in. Add it to `plugins` yourself only if you extend
+ * `tokens.tailwindTheme` instead of using `veevartPreset`.
+ */
+export declare function assistantSurfacePlugin({ addBase }: PresetPluginApi): void;
 /**
  * Veevart Design System Tailwind preset
  *
  * Use this preset in your tailwind.config.js to get all Veevart tokens
  * and styling defaults. Use veevartContent in your content array.
+ *
+ * Tailwind runs a preset's plugins alongside the app's own (HeroUI's, for
+ * instance), so the app keeps declaring `plugins` as before.
  */
 export declare const veevartPreset: {
     theme: {
@@ -263,6 +282,7 @@ export declare const veevartPreset: {
             colors: {
                 acct: Record<string, string>;
                 pos: Record<string, string>;
+                ai: Record<"accent" | "fill" | "border" | "user-bubble" | "assistant-bubble" | "focus", string>;
                 secondary: "#000000";
                 success: "#057A54";
                 warning: "#F5A524";
@@ -351,6 +371,7 @@ export declare const veevartPreset: {
         };
     };
     darkMode: "class";
+    plugins: (typeof assistantSurfacePlugin)[];
 };
 /**
  * All tokens bundled together for convenience
@@ -508,6 +529,7 @@ export declare const tokens: {
         colors: {
             acct: Record<string, string>;
             pos: Record<string, string>;
+            ai: Record<"accent" | "fill" | "border" | "user-bubble" | "assistant-bubble" | "focus", string>;
             secondary: "#000000";
             success: "#057A54";
             warning: "#F5A524";

package/dist/tailwind/index.mjs

@@ -219,12 +219,12 @@ function adminSurfaceCss({
   scope = ".acct",
   fontFamily = "'NeueMontreal', system-ui, sans-serif"
 } = {}) {
-  const declarations = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  const declarations2 = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
   const typography2 = fontFamily ? `
   font-family: ${fontFamily};
   color: var(--ink);` : "";
   return `${scope} {
-${declarations}${typography2}
+${declarations2}${typography2}
 }
 `;
 }
@@ -269,6 +269,70 @@ var posSurfaceTokens = {
 };
 var posSurfaceTailwindColors = { ...posSurfaceTokens };
 
+// src/tokens/assistant-surface.ts
+var info = colors.palettes.info;
+var HEROUI_CONTENT = {
+  light: { content1: "#ffffff", content2: "#f4f4f5" },
+  dark: { content1: "#18181b", content2: "#27272a" }
+};
+var ASSISTANT_SURFACE_TOKEN_NAMES = [
+  /** Text and icon tone that marks something as the assistant's. */
+  "accent",
+  /** Tint behind small assistant marks (an avatar disc, an info notice). */
+  "fill",
+  /** Hairline around assistant regions. */
+  "border",
+  /** Fill of the person's own turn. */
+  "user-bubble",
+  /** Fill of the assistant's turn, where an app draws it as a bubble. */
+  "assistant-bubble",
+  /** Focus ring inside assistant surfaces. */
+  "focus"
+];
+var assistantSurfaceTokens = {
+  light: {
+    accent: info[600],
+    fill: info[100],
+    border: info[200],
+    "user-bubble": HEROUI_CONTENT.light.content2,
+    "assistant-bubble": HEROUI_CONTENT.light.content1,
+    focus: info[500]
+  },
+  dark: {
+    accent: info[300],
+    fill: info[900],
+    border: info[800],
+    "user-bubble": HEROUI_CONTENT.dark.content2,
+    "assistant-bubble": HEROUI_CONTENT.dark.content1,
+    focus: info[400]
+  }
+};
+function hexToChannels(hex) {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error(`bad hex: ${hex}`);
+  return [1, 3, 5].map((start) => parseInt(hex.slice(start, start + 2), 16)).join(" ");
+}
+var assistantSurfaceVar = (name) => `--ai-${name}`;
+var declarations = (theme) => Object.fromEntries(
+  ASSISTANT_SURFACE_TOKEN_NAMES.map((name) => [
+    assistantSurfaceVar(name),
+    hexToChannels(assistantSurfaceTokens[theme][name])
+  ])
+);
+var ASSISTANT_SURFACE_SELECTORS = {
+  light: ':root, .light, [data-theme="light"]',
+  dark: ".dark"
+};
+var assistantSurfaceBase = {
+  [ASSISTANT_SURFACE_SELECTORS.light]: declarations("light"),
+  [ASSISTANT_SURFACE_SELECTORS.dark]: declarations("dark")
+};
+var assistantSurfaceTailwindColors = Object.fromEntries(
+  ASSISTANT_SURFACE_TOKEN_NAMES.map((name) => [
+    name,
+    `rgb(var(${assistantSurfaceVar(name)}, ${hexToChannels(assistantSurfaceTokens.light[name])}) / <alpha-value>)`
+  ])
+);
+
 // src/tailwind/index.ts
 var tailwindTheme = {
   colors: {
@@ -284,7 +348,11 @@ var tailwindTheme = {
     // `danger`/`info`/`warn` do not shadow the semantic palettes, and fed
     // from the token object so utility and token cannot disagree.
     // See src/tokens/pos-surface.ts.
-    pos: posSurfaceTailwindColors
+    pos: posSurfaceTailwindColors,
+    // Assistant palette. Unlike `acct`/`pos` these resolve to CSS custom
+    // properties, because they have a dark value: the preset's plugin
+    // below writes the properties. See src/tokens/assistant-surface.ts.
+    ai: assistantSurfaceTailwindColors
   },
   fontFamily: typography.fontFamily,
   spacing,
@@ -363,11 +431,15 @@ var veevartContent = [
   "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
   "./node_modules/@veevarts/design-system/dist/**/*.{js,mjs,jsx,tsx}"
 ];
+function assistantSurfacePlugin({ addBase }) {
+  addBase(assistantSurfaceBase);
+}
 var veevartPreset = {
   theme: {
     extend: tailwindTheme
   },
-  darkMode: "class"
+  darkMode: "class",
+  plugins: [assistantSurfacePlugin]
 };
 var tokens = {
   colors,
@@ -379,6 +451,9 @@ export {
   adminSurfaceCss,
   adminSurfaceTailwindColors,
   adminSurfaceTokens,
+  assistantSurfacePlugin,
+  assistantSurfaceTailwindColors,
+  assistantSurfaceTokens,
   colors,
   createHeroUIConfig,
   deepMerge,

package/dist/tokens/assistant-surface.d.ts

@@ -0,0 +1,66 @@
+/**
+ * The assistant ("AI") palette: the one place an assistant surface takes its
+ * accent, tints and focus ring from, in light AND dark (INI-0581).
+ *
+ * PLACEHOLDER HUE. Design has not picked the assistant colour yet. These
+ * values are the `info` blue scale, the only hue in the DS that no product
+ * already uses for something else, and they ship so the assistant pieces can
+ * be built and measured now. When Design signs a hue off, change the two maps
+ * below and nothing else: every `ai-*` utility, the CSS custom properties and
+ * the contrast tests all read from here. The two bubbles are neutrals on
+ * purpose (only the assistant carries the hue); Design may retune them too.
+ *
+ * WHY IT CARRIES ITS OWN DARK VALUES. The DS has no dark theme:
+ * `createHeroUIConfig` builds `themes.light` only. HeroUI's semantic colours
+ * (`content1`, `foreground`, `default-*`, `divider`) still flip under `.dark`,
+ * so the assistant pieces style with those plus this palette, and this
+ * palette flips with them. A full DS dark theme is a separate, larger piece
+ * of work.
+ *
+ * HOW IT REACHES THE PAGE. The preset adds a plugin that writes each token as
+ * a custom property and maps `ai-*` colours to those properties. **The class
+ * is the switch:** dark values under `.dark`, light values on `:root`,
+ * `.light` and `[data-theme="light"]`. Those are the selectors every HeroUI
+ * 2.x in the DS peer range writes its own variables under, so the palette and
+ * HeroUI's colours flip together; `src/tailwind/__test__/assistant-heroui-parity.test.ts`
+ * holds that against the installed HeroUI. `[data-theme="dark"]` is NOT a
+ * switch: HeroUI 2.8 no longer writes dark variables there (2.7 still did),
+ * so honouring it would turn `ai-*` dark on white HeroUI cards. An app that
+ * puts `.dark` on a subtree gets dark values on that subtree only.
+ *
+ * Kept apart from `adminSurfaceTokens` on purpose: consumers test that they
+ * override every admin token, and a new key there would break them.
+ */
+/** The token names, in the order the docs list them. */
+export declare const ASSISTANT_SURFACE_TOKEN_NAMES: readonly ["accent", "fill", "border", "user-bubble", "assistant-bubble", "focus"];
+export type AssistantSurfaceTokenName = (typeof ASSISTANT_SURFACE_TOKEN_NAMES)[number];
+export type AssistantSurfaceTheme = 'light' | 'dark';
+/** Token name → hex, per theme. Exported so tests and tooling can assert on it directly. */
+export declare const assistantSurfaceTokens: Record<AssistantSurfaceTheme, Record<AssistantSurfaceTokenName, string>>;
+/**
+ * `#1d4ed8` → `29 78 216`: the channel form Tailwind's `<alpha-value>` needs.
+ * Throws on anything but `#rrggbb`, so a typo in a hue change fails the tests
+ * instead of shipping a colour that resolves to nothing.
+ */
+export declare function hexToChannels(hex: string): string;
+/** The custom property behind a token: `accent` → `--ai-accent`. */
+export declare const assistantSurfaceVar: (name: AssistantSurfaceTokenName) => string;
+/**
+ * Where each theme's values are written: the selectors every HeroUI 2.x in
+ * the peer range writes its own light and dark variables under (see the module
+ * comment for why `[data-theme="dark"]` is left out). A `.light` island inside
+ * a `.dark` page flips back for both palettes at once.
+ */
+export declare const ASSISTANT_SURFACE_SELECTORS: Record<AssistantSurfaceTheme, string>;
+/** The custom properties as a CSS-in-JS rule set, ready for Tailwind's `addBase`. */
+export declare const assistantSurfaceBase: Record<string, Record<string, string>>;
+/**
+ * The palette as Tailwind colours, namespaced under `ai`: `text-ai-accent`,
+ * `bg-ai-user-bubble`, `ring-ai-focus`, with opacity modifiers working.
+ *
+ * Each colour falls back to its LIGHT value when the property is missing, so
+ * an app that extends `tokens.tailwindTheme` without the preset's plugin still
+ * gets a readable light palette instead of colours that resolve to nothing.
+ * Dark values need the plugin.
+ */
+export declare const assistantSurfaceTailwindColors: Record<AssistantSurfaceTokenName, string>;

package/dist/tokens/index.d.ts

@@ -3,5 +3,7 @@ export { spacing } from './spacing';
 export { typography } from './typography';
 export { adminSurfaceCss, adminSurfaceTokens } from './admin-surface';
 export { posSurfaceTokens, posSurfaceTailwindColors } from './pos-surface';
+export { assistantSurfaceTokens } from './assistant-surface';
 export type { ColorToken } from './colors';
 export type { AdminSurfaceCssOptions } from './admin-surface';
+export type { AssistantSurfaceTheme, AssistantSurfaceTokenName } from './assistant-surface';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.0.0-alpha.57",
+    "version": "2.0.0-alpha.59",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",