@brickflow/ui 0.0.33 → 0.0.35

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,9 +1,9 @@
-import { defineNuxtModule, createResolver, resolvePath, addTemplate, updateTemplates, addImportsDir, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, resolvePath, addTypeTemplate, addTemplate, updateTemplates, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { createJiti } from 'jiti';
 import { readdir, mkdir, readFile, writeFile } from 'node:fs/promises';
-import { join, resolve, basename, extname, dirname, relative } from 'node:path';
-import { defineBrickflowUiConfig } from '../dist/runtime/tailwind.js';
+import { join, basename, extname, dirname, resolve, relative } from 'node:path';
+import { isBrickflowUiStyleReference, getBrickflowUiStyleReferencePath, defineBrickflowUi } from '../dist/runtime/tailwind.js';
 import { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon';
 
 const ICON_FILE_PATTERN = /\.svg$/i;
@@ -85,6 +85,8 @@ ${CUSTOM_DARK_VARIANT}${code.slice(index)}`,
 });
 
 const UI_STYLE_PATTERN = /\bUI_STYLE((?:\.[A-Za-z_$][\w$]*)+)/g;
+const UI_CONFIG_PATTERN = /\bUI_CONFIG((?:\.[A-Za-z_$][\w$]*)+)/g;
+const UI_CONFIG_MACRO = "defineUiConfig";
 const SCRIPT_FILE_PATTERN = /\.(?:[cm]?[jt]sx?|vue)(?:\?.*)?$/;
 const TYPE_INDENT = "  ";
 const refreshUiStyleModules = (server) => {
@@ -109,7 +111,7 @@ const resolveUiStyleConfigPath = (id, path) => {
     return path;
   }
   const componentName = basename(cleanId, extname(cleanId));
-  const configName = componentName === "index" ? basename(dirname(cleanId)) : componentName;
+  const configName = componentName === "index" || componentName.endsWith(".demo") ? basename(dirname(cleanId)) : componentName;
   return [toCamelCase(configName), ...path];
 };
 const resolveStyleValue = (styles, id, path) => {
@@ -123,6 +125,73 @@ const resolveStyleValue = (styles, id, path) => {
   }
   return configPathValue ?? globalValue;
 };
+const resolveUiConfigValue = (config, id, path) => {
+  const configPathValue = readPath(config, resolveUiStyleConfigPath(id, path));
+  return configPathValue ?? readPath(config, path);
+};
+const resolveUiConfigStyleReferences = (value, styles, id) => {
+  if (isBrickflowUiStyleReference(value)) {
+    const stylePath = getBrickflowUiStyleReferencePath(value);
+    const styleValue = resolveStyleValue(styles, id, [...stylePath]);
+    if (typeof styleValue !== "string") {
+      throw new TypeError(`UI_STYLE.${stylePath.join(".")} does not resolve to a string in ${id}.`);
+    }
+    return styleValue;
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return Object.fromEntries(
+    Object.entries(value).map(([key, childValue]) => [
+      key,
+      resolveUiConfigStyleReferences(childValue, styles, id)
+    ])
+  );
+};
+const replaceUiConfigMacros = (code, config, styles, id, error) => {
+  let result = "";
+  let cursor = 0;
+  while (cursor < code.length) {
+    const start = code.indexOf(UI_CONFIG_MACRO, cursor);
+    if (start === -1) {
+      return result + code.slice(cursor);
+    }
+    const genericStart = start + UI_CONFIG_MACRO.length;
+    let callStart = genericStart;
+    if (code[genericStart] === "<") {
+      let depth = 0;
+      let index = genericStart;
+      for (; index < code.length; index += 1) {
+        if (code[index] === "<") {
+          depth += 1;
+        }
+        if (code[index] === ">") {
+          depth -= 1;
+        }
+        if (depth === 0) {
+          break;
+        }
+      }
+      callStart = index + 1;
+    }
+    while (/\s/u.test(code[callStart] ?? "")) {
+      callStart += 1;
+    }
+    if (code.slice(callStart, callStart + 2) !== "()") {
+      result += code.slice(cursor, callStart);
+      cursor = callStart;
+      continue;
+    }
+    const value = resolveUiConfigValue(config, id, []);
+    if (value === void 0) {
+      error(`defineUiConfig() in ${id} has no matching uiConfig entry.`);
+    }
+    result += code.slice(cursor, start);
+    result += JSON.stringify(resolveUiConfigStyleReferences(value, styles, id));
+    cursor = callStart + 2;
+  }
+  return result;
+};
 const createUiStylePathTree = () => ({
   children: /* @__PURE__ */ new Map()
 });
@@ -134,16 +203,18 @@ const addPathToTree = (tree, path) => {
     currentTree = childTree;
   }
 };
-const renderTypeTree = (tree, level, objectType) => {
+const renderTypeTree = (tree, level, objectType, leafType = "string", path = []) => {
   const lines = [];
   const indent = TYPE_INDENT.repeat(level);
   for (const [key, childTree] of [...tree.children.entries()].sort(([a], [b]) => a.localeCompare(b))) {
     if (childTree.children.size === 0) {
-      lines.push(`${indent}readonly ${key}: string`);
+      const childPath = [...path, key];
+      const childLeafType = typeof leafType === "function" ? leafType(childPath) : leafType;
+      lines.push(`${indent}readonly ${key}: ${childLeafType}`);
       continue;
     }
     lines.push(objectType ? `${indent}readonly ${key}: ${objectType} & {` : `${indent}readonly ${key}: {`);
-    lines.push(...renderTypeTree(childTree, level + 1, objectType));
+    lines.push(...renderTypeTree(childTree, level + 1, objectType, leafType, [...path, key]));
     lines.push(`${indent}}`);
   }
   return lines;
@@ -156,18 +227,111 @@ const collectUiStylePathsFromCode = (code) => {
   return paths.filter((path) => path.length > 0);
 };
 const collectUiStyleConfigPathsFromCode = (code, id) => collectUiStylePathsFromCode(code).map((path) => resolveUiStyleConfigPath(id, path));
-const renderInterfaceDeclaration = (name, paths, objectType) => {
+const collectUiConfigValuePaths = (value, prefix) => {
+  if (typeof value === "string" || isBrickflowUiStyleReference(value)) {
+    return [prefix];
+  }
+  return Object.entries(value).flatMap(
+    ([key, childValue]) => collectUiConfigValuePaths(childValue, [...prefix, key])
+  );
+};
+const collectUiConfigPathsFromCode = (code, id, config) => {
+  const paths = [];
+  for (const match of code.matchAll(UI_CONFIG_PATTERN)) {
+    const path = match[1]?.slice(1).split(".") ?? [];
+    const value = resolveUiConfigValue(config, id, path);
+    paths.push(...value === void 0 ? [path] : collectUiConfigValuePaths(value, path));
+  }
+  return paths.filter((path) => path.length > 0);
+};
+const collectUiConfigComponentPathsFromCode = (code, id, config) => {
+  const paths = [];
+  for (const match of code.matchAll(UI_CONFIG_PATTERN)) {
+    const path = match[1]?.slice(1).split(".") ?? [];
+    const componentPath = resolveUiStyleConfigPath(id, path);
+    const value = readPath(config, componentPath);
+    paths.push(
+      ...value === void 0 ? [componentPath] : collectUiConfigValuePaths(value, componentPath)
+    );
+  }
+  if (code.includes(UI_CONFIG_MACRO)) {
+    const componentPath = resolveUiStyleConfigPath(id, []);
+    const value = readPath(config, componentPath);
+    if (value !== void 0) {
+      paths.push(...collectUiConfigValuePaths(value, componentPath));
+    }
+  }
+  return paths.filter((path) => path.length > 0);
+};
+const collectUiConfigSchemaEntriesFromCode = (code, id) => {
+  const entries = [];
+  let cursor = 0;
+  while (cursor < code.length) {
+    const start = code.indexOf(UI_CONFIG_MACRO, cursor);
+    if (start === -1) {
+      return entries;
+    }
+    const genericStart = start + UI_CONFIG_MACRO.length;
+    if (code[genericStart] !== "<") {
+      cursor = genericStart;
+      continue;
+    }
+    let depth = 0;
+    let genericEnd = genericStart;
+    for (; genericEnd < code.length; genericEnd += 1) {
+      if (code[genericEnd] === "<") {
+        depth += 1;
+      }
+      if (code[genericEnd] === ">") {
+        depth -= 1;
+      }
+      if (depth === 0) {
+        break;
+      }
+    }
+    let callStart = genericEnd + 1;
+    while (/\s/u.test(code[callStart] ?? "")) {
+      callStart += 1;
+    }
+    if (code.slice(callStart, callStart + 2) !== "()") {
+      cursor = callStart;
+      continue;
+    }
+    const schema = code.slice(genericStart + 1, genericEnd).trim();
+    const path = resolveUiStyleConfigPath(id, []);
+    if (schema.startsWith("{") && path.length > 0) {
+      entries.push({ path, schema });
+    }
+    cursor = callStart + 2;
+  }
+  return entries;
+};
+const collectUiConfigStyleReferencePathsFromValue = (value, componentPath) => {
+  if (isBrickflowUiStyleReference(value)) {
+    return [[...componentPath, ...getBrickflowUiStyleReferencePath(value)]];
+  }
+  if (typeof value === "string") {
+    return [];
+  }
+  return Object.values(value).flatMap(
+    (childValue) => collectUiConfigStyleReferencePathsFromValue(childValue, componentPath)
+  );
+};
+const collectUiConfigStyleReferencePaths = (config) => Object.entries(config).flatMap(([key, value]) => collectUiConfigStyleReferencePathsFromValue(value, [key]));
+const renderInterfaceDeclaration = (name, paths, objectType, leafType = "string") => {
   const tree = createUiStylePathTree();
   for (const path of paths) {
     addPathToTree(tree, path);
   }
-  return [`  interface ${name} {`, ...renderTypeTree(tree, 2, objectType), "  }"];
+  return [`  interface ${name} {`, ...renderTypeTree(tree, 2, objectType, leafType), "  }"];
 };
 const createUiStyleTypeDeclaration = (options) => {
   return [
     "declare global {",
     ...renderInterfaceDeclaration("BrickflowUiConfigStylePaths", options.configPaths),
     "",
+    ...renderInterfaceDeclaration("BrickflowUiConfigPaths", options.uiConfigPaths),
+    "",
     ...renderInterfaceDeclaration("BrickflowUiStylePaths", options.paths, "BrickflowUiStyleValue"),
     "}",
     "",
@@ -175,6 +339,39 @@ const createUiStyleTypeDeclaration = (options) => {
     ""
   ].join("\n");
 };
+const createUiConfigLiteralTypeDeclaration = (paths, config) => [
+  "declare global {",
+  ...renderInterfaceDeclaration("BrickflowUiConfigLiteralPaths", paths, void 0, (path) => {
+    const value = config ? readPath(config, path) : void 0;
+    return typeof value === "string" ? toStringLiteral(value) : "string";
+  }),
+  "}",
+  "",
+  "export {}",
+  ""
+].join("\n");
+const createUiConfigSchemaTypeDeclaration = (entries) => {
+  const schemasByPath = /* @__PURE__ */ new Map();
+  for (const { path, schema } of entries) {
+    const pathKey = path.join(".");
+    const schemas = schemasByPath.get(pathKey) ?? [];
+    schemas.push(schema);
+    schemasByPath.set(pathKey, schemas);
+  }
+  return [
+    "declare global {",
+    "  interface BrickflowUiConfigSchema {",
+    ...[...schemasByPath.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([path, schemas]) => {
+      const [componentName] = path.split(".");
+      return `    readonly ${componentName}: ${schemas.map((schema) => `(${schema})`).join(" & ")}`;
+    }),
+    "  }",
+    "}",
+    "",
+    "export {}",
+    ""
+  ].join("\n");
+};
 const brickflowUiStylePlugin = (options) => ({
   buildStart: {
     handler() {
@@ -197,13 +394,42 @@ const brickflowUiStylePlugin = (options) => ({
   },
   name: "brickflow-ui-style",
   async transform(code, id) {
-    if (!SCRIPT_FILE_PATTERN.test(id) || !code.includes("UI_STYLE.")) {
+    const cleanId = id.split("?")[0] ?? id;
+    const isVirtualModule = cleanId.startsWith("\0") || cleanId.startsWith("virtual:");
+    const isVueSubmodule = cleanId.endsWith(".vue") && id.includes("?vue");
+    if (isVirtualModule || isVueSubmodule && !code.includes(UI_CONFIG_MACRO) || !SCRIPT_FILE_PATTERN.test(id) || !code.includes("UI_STYLE.") && !code.includes("UI_CONFIG.") && !code.includes(UI_CONFIG_MACRO)) {
       return null;
     }
     this.addWatchFile?.(options.configPath);
     const styles = await options.getStyles();
+    const config = await options.getConfig();
+    const isConfigFile = normalizePath(cleanId) === normalizePath(options.configPath);
+    const hasUiConfigMacro = cleanId.endsWith(".vue") && code.includes(UI_CONFIG_MACRO);
     let changed = false;
-    const transformedCode = code.replace(UI_STYLE_PATTERN, (match, rawPath) => {
+    const codeWithUiConfigMacros = hasUiConfigMacro ? replaceUiConfigMacros(code, config, styles, id, this.error.bind(this)) : code;
+    if (codeWithUiConfigMacros !== code) {
+      changed = true;
+    }
+    const transformedCode = codeWithUiConfigMacros.replace(UI_CONFIG_PATTERN, (match, rawPath) => {
+      if (hasUiConfigMacro) {
+        return match;
+      }
+      const path = rawPath.slice(1).split(".");
+      const value = resolveUiConfigValue(config, id, path);
+      changed = true;
+      if (value === void 0) {
+        return "undefined";
+      }
+      try {
+        const resolvedValue = resolveUiConfigStyleReferences(value, styles, id);
+        return typeof resolvedValue === "string" ? toStringLiteral(resolvedValue) : JSON.stringify(resolvedValue);
+      } catch (error) {
+        this.error(error instanceof Error ? error.message : String(error));
+      }
+    }).replace(UI_STYLE_PATTERN, (match, rawPath) => {
+      if (isConfigFile) {
+        return match;
+      }
       const path = rawPath.slice(1).split(".");
       const value = resolveStyleValue(styles, id, path);
       if (typeof value === "string") {
@@ -453,14 +679,13 @@ const module$1 = defineNuxtModule({
       );
     };
     const loadUiConfig = async () => {
-      const validateConfig = defineBrickflowUiConfig;
+      const validateConfig = defineBrickflowUi;
       return validateConfig(
         await loadConfig.import(resolvedConfigPath).catch(() => ({}))
       );
     };
     await loadUiConfig();
-    const uiStyleTypePath = resolve(nuxt.options.buildDir, "types/brickflow-ui-style.d.ts");
-    const generateUiStyleTypes = async () => {
+    const getUiStyleTypeContents = async () => {
       const files = await scanUiStyleFiles(runtimePath);
       const fileContents = await Promise.all(
         files.map(async (file) => ({
@@ -468,19 +693,55 @@ const module$1 = defineNuxtModule({
           file
         }))
       );
-      const paths = fileContents.flatMap(({ content }) => collectUiStylePathsFromCode(content));
+      const uiConfig = (await loadUiConfig()).uiConfig;
+      const uiConfigStyleReferencePaths = collectUiConfigStyleReferencePaths(uiConfig);
+      const paths = [
+        ...fileContents.flatMap(({ content }) => collectUiStylePathsFromCode(content)),
+        ...uiConfigStyleReferencePaths.map((path) => path.slice(1))
+      ];
       const configPaths = fileContents.flatMap(
         ({ content, file }) => collectUiStyleConfigPathsFromCode(content, file)
       );
-      await mkdir(resolve(nuxt.options.buildDir, "types"), { recursive: true });
-      await writeFile(
-        uiStyleTypePath,
-        createUiStyleTypeDeclaration({
-          configPaths,
-          paths
-        })
+      configPaths.push(...uiConfigStyleReferencePaths);
+      const uiConfigPaths = fileContents.flatMap(
+        ({ content, file }) => collectUiConfigPathsFromCode(content, file, uiConfig)
       );
+      return createUiStyleTypeDeclaration({
+        configPaths,
+        paths,
+        uiConfigPaths
+      });
     };
+    const uiStyleTypeTemplate = addTypeTemplate({
+      filename: "types/brickflow-ui-style.d.ts",
+      getContents: getUiStyleTypeContents
+    });
+    const uiConfigLiteralTypeTemplate = addTypeTemplate({
+      filename: "types/brickflow-ui-config-literals.d.ts",
+      getContents: async () => {
+        const files = await scanUiStyleFiles(runtimePath);
+        const uiConfig = (await loadUiConfig()).uiConfig;
+        const paths = await Promise.all(
+          files.map(
+            async (file) => collectUiConfigComponentPathsFromCode(await readFile(file, "utf8"), file, uiConfig)
+          )
+        );
+        return createUiConfigLiteralTypeDeclaration(paths.flat(), uiConfig);
+      }
+    });
+    const uiConfigSchemaTypeTemplate = addTypeTemplate({
+      filename: "types/brickflow-ui-config-contract.d.ts",
+      getContents: async () => {
+        const files = await scanUiStyleFiles(componentsDirectory);
+        const entries = await Promise.all(
+          files.map(async (file) => collectUiConfigSchemaEntriesFromCode(await readFile(file, "utf8"), file))
+        );
+        return createUiConfigSchemaTypeDeclaration(entries.flat());
+      }
+    });
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ path: resolver.resolve("./runtime/config.d.ts") });
+    });
     const iconFontTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-icons.mjs",
       getContents: async () => {
@@ -495,12 +756,14 @@ const module$1 = defineNuxtModule({
     const uiConfigTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-config.mjs",
       getContents: () => [
+        `import { defineBrickflowUi } from ${JSON.stringify(resolver.resolve("./runtime/tailwind").replaceAll("\\", "/"))}`,
         `import rawConfig from ${JSON.stringify(resolvedConfigPath.replaceAll("\\", "/"))}`,
-        `import { defineBrickflowUiConfig } from ${JSON.stringify(resolver.resolve("./runtime/tailwind").replaceAll("\\", "/"))}`,
         "",
-        "const config = defineBrickflowUiConfig(rawConfig)",
+        "const config = defineBrickflowUi(rawConfig)",
         "",
         "export const UI_STYLE = config.uiStyles",
+        "export const UI_CONFIG = config.uiConfig",
+        "export const uiConfig = config.uiConfig",
         "export const uiStyles = config.uiStyles",
         "export default config",
         ""
@@ -615,17 +878,14 @@ const module$1 = defineNuxtModule({
         path: "/ui"
       });
     });
-    await generateUiStyleTypes();
-    nuxt.hook("prepare:types", async ({ references }) => {
-      await generateUiStyleTypes();
-      references.push({ path: uiStyleTypePath });
-    });
     nuxt.hook("builder:watch", async (_event, path) => {
       const absolutePath = resolve(nuxt.options.srcDir, path);
       if (relative(runtimePath, absolutePath).startsWith("..") || !UI_STYLE_FILE_PATTERN.test(path)) {
         return;
       }
-      await generateUiStyleTypes();
+      await updateTemplates({
+        filter: (template) => template.filename === uiStyleTypeTemplate.filename || template.filename === uiConfigLiteralTypeTemplate.filename || template.filename === uiConfigSchemaTypeTemplate.filename
+      });
       if (!relative(componentsDirectory, absolutePath).startsWith("..") && (UI_COMPONENT_FILE_PATTERN.test(path) || UI_DEMO_FILE_PATTERN.test(path))) {
         await updateTemplates({ filter: (template) => template.filename === uiCatalogTemplate.filename });
       }
@@ -644,6 +904,7 @@ const module$1 = defineNuxtModule({
       viteConfig.plugins.push(
         brickflowUiStylePlugin({
           configPath: resolvedConfigPath,
+          getConfig: async () => (await loadUiConfig()).uiConfig,
           getStyles: async () => (await loadUiConfig()).uiStyles
         })
       );

package/dist/runtime/components/Button/index.d.vue.ts

@@ -1,42 +1,48 @@
 import type { RouteLocationRaw } from 'vue-router';
-type __VLS_Props = {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     block?: boolean;
-    color?: ButtonColor;
+    color?: string;
     disabled?: boolean;
     icon?: string;
     loading?: boolean;
     rounded?: boolean;
-    size?: ButtonSize;
+    size?: string;
     square?: boolean;
     to?: RouteLocationRaw;
     trailingIcon?: string;
-    type?: 'button' | 'reset' | 'submit';
-    variant?: ButtonVariant;
-};
-type ButtonColor = 'alt' | 'danger' | 'info' | 'main' | 'plain' | 'warn' | 'win';
-type ButtonSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-type ButtonVariant = 'ghost' | 'mist' | 'soft' | 'solid' | 'subtle';
-declare var __VLS_10: {}, __VLS_22: {}, __VLS_24: {};
-type __VLS_Slots = {} & {
-    leading?: (props: typeof __VLS_10) => any;
-} & {
-    default?: (props: typeof __VLS_22) => any;
-} & {
-    trailing?: (props: typeof __VLS_24) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: ButtonSize;
+    type?: "button" | "reset" | "submit";
+    variant?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    block?: boolean;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+    loading?: boolean;
+    rounded?: boolean;
+    size?: string;
+    square?: boolean;
+    to?: RouteLocationRaw;
+    trailingIcon?: string;
+    type?: "button" | "reset" | "submit";
+    variant?: string;
+}> & Readonly<{}>, {
+    size: string;
     type: "button" | "reset" | "submit";
-    color: ButtonColor;
+    color: string;
     to: RouteLocationRaw;
     icon: string;
     rounded: boolean;
     trailingIcon: string;
-    variant: ButtonVariant;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+    variant: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    leading?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    trailing?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Button/index.vue

@@ -1,28 +1,27 @@
+<script>
+const UI_CONFIG = defineUiConfig();
+</script>
+
 <script setup>
 import { computed, shallowRef } from "vue";
 import Icon from "../Icon/index.vue";
 import BaseLink from "../Link/index.vue";
 const props = defineProps({
   block: { type: Boolean, required: false },
-  color: { type: String, required: false, default: "main" },
+  color: { type: String, required: false, default: UI_CONFIG.colorDefault },
   disabled: { type: Boolean, required: false },
   icon: { type: String, required: false, default: void 0 },
   loading: { type: Boolean, required: false },
   rounded: { type: Boolean, required: false, default: false },
-  size: { type: String, required: false, default: "md" },
+  size: { type: String, required: false, default: UI_CONFIG.sizeDefault },
   square: { type: Boolean, required: false },
   to: { type: null, required: false, default: void 0 },
   trailingIcon: { type: String, required: false, default: void 0 },
   type: { type: String, required: false, default: "button" },
-  variant: { type: String, required: false, default: "solid" }
+  variant: { type: String, required: false, default: UI_CONFIG.variantDefault }
 });
-const sizeClasses = {
-  lg: UI_STYLE.size.lg,
-  md: UI_STYLE.size.md,
-  sm: UI_STYLE.size.sm,
-  xl: UI_STYLE.size.xl,
-  xs: UI_STYLE.size.xs
-};
+const colorClasses = UI_CONFIG.colorClasses;
+const sizeClasses = UI_CONFIG.sizeClasses;
 const sizeIconClasses = {
   lg: UI_STYLE.size.lgIcon,
   md: UI_STYLE.size.mdIcon,
@@ -30,57 +29,6 @@ const sizeIconClasses = {
   xl: UI_STYLE.size.xlIcon,
   xs: UI_STYLE.size.xsIcon
 };
-const colorClasses = {
-  alt: {
-    ghost: UI_STYLE.color.alt.ghost,
-    mist: UI_STYLE.color.alt.mist,
-    soft: UI_STYLE.color.alt.soft,
-    solid: UI_STYLE.color.alt.solid,
-    subtle: UI_STYLE.color.alt.subtle
-  },
-  danger: {
-    ghost: UI_STYLE.color.danger.ghost,
-    mist: UI_STYLE.color.danger.mist,
-    soft: UI_STYLE.color.danger.soft,
-    solid: UI_STYLE.color.danger.solid,
-    subtle: UI_STYLE.color.danger.subtle
-  },
-  info: {
-    ghost: UI_STYLE.color.info.ghost,
-    mist: UI_STYLE.color.info.mist,
-    soft: UI_STYLE.color.info.soft,
-    solid: UI_STYLE.color.info.solid,
-    subtle: UI_STYLE.color.info.subtle
-  },
-  main: {
-    ghost: UI_STYLE.color.main.ghost,
-    mist: UI_STYLE.color.main.mist,
-    soft: UI_STYLE.color.main.soft,
-    solid: UI_STYLE.color.main.solid,
-    subtle: UI_STYLE.color.main.subtle
-  },
-  plain: {
-    ghost: UI_STYLE.color.plain.ghost,
-    mist: UI_STYLE.color.plain.mist,
-    soft: UI_STYLE.color.plain.soft,
-    solid: UI_STYLE.color.plain.solid,
-    subtle: UI_STYLE.color.plain.subtle
-  },
-  warn: {
-    ghost: UI_STYLE.color.warn.ghost,
-    mist: UI_STYLE.color.warn.mist,
-    soft: UI_STYLE.color.warn.soft,
-    solid: UI_STYLE.color.warn.solid,
-    subtle: UI_STYLE.color.warn.subtle
-  },
-  win: {
-    ghost: UI_STYLE.color.win.ghost,
-    mist: UI_STYLE.color.win.mist,
-    soft: UI_STYLE.color.win.soft,
-    solid: UI_STYLE.color.win.solid,
-    subtle: UI_STYLE.color.win.subtle
-  }
-};
 const component = computed(() => props.to === void 0 ? "button" : BaseLink);
 const disabled = computed(() => props.disabled || props.loading);
 const isButton = computed(() => props.to === void 0);
@@ -126,7 +74,7 @@ function handleTap() {
       <slot name="leading">
         <Icon
           v-if="props.loading"
-          :name="UI_STYLE.state.loadingIconName"
+          :name="UI_CONFIG.loadingIconName"
           :class="UI_STYLE.state.loading"
           aria-hidden="true"
         />

package/dist/runtime/components/Button/index.vue.d.ts

@@ -1,42 +1,48 @@
 import type { RouteLocationRaw } from 'vue-router';
-type __VLS_Props = {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     block?: boolean;
-    color?: ButtonColor;
+    color?: string;
     disabled?: boolean;
     icon?: string;
     loading?: boolean;
     rounded?: boolean;
-    size?: ButtonSize;
+    size?: string;
     square?: boolean;
     to?: RouteLocationRaw;
     trailingIcon?: string;
-    type?: 'button' | 'reset' | 'submit';
-    variant?: ButtonVariant;
-};
-type ButtonColor = 'alt' | 'danger' | 'info' | 'main' | 'plain' | 'warn' | 'win';
-type ButtonSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-type ButtonVariant = 'ghost' | 'mist' | 'soft' | 'solid' | 'subtle';
-declare var __VLS_10: {}, __VLS_22: {}, __VLS_24: {};
-type __VLS_Slots = {} & {
-    leading?: (props: typeof __VLS_10) => any;
-} & {
-    default?: (props: typeof __VLS_22) => any;
-} & {
-    trailing?: (props: typeof __VLS_24) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: ButtonSize;
+    type?: "button" | "reset" | "submit";
+    variant?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    block?: boolean;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+    loading?: boolean;
+    rounded?: boolean;
+    size?: string;
+    square?: boolean;
+    to?: RouteLocationRaw;
+    trailingIcon?: string;
+    type?: "button" | "reset" | "submit";
+    variant?: string;
+}> & Readonly<{}>, {
+    size: string;
     type: "button" | "reset" | "submit";
-    color: ButtonColor;
+    color: string;
     to: RouteLocationRaw;
     icon: string;
     rounded: boolean;
     trailingIcon: string;
-    variant: ButtonVariant;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+    variant: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    leading?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    trailing?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Button/variants.demo.vue

@@ -6,199 +6,43 @@ export const uiDemo = {
 
 <script setup>
 import Button from "./index.vue";
+const UI_CONFIG = defineUiConfig();
+const colors = Object.entries(UI_CONFIG.colorClasses).map(([name, classes]) => ({
+  name,
+  variants: Object.keys(classes)
+}));
+const variants = colors[0]?.variants ?? [];
 </script>
 
 <template>
-  <div class="relative flex w-fit flex-col flex-wrap items-start gap-3 pl-13">
+  <div class="relative flex w-fit flex-col items-start gap-3 pl-13">
     <div class="absolute top-0 left-0 z-0 size-full object-cover pt-7 pl-13">
       <img
-        src="https://picsum.photos/1000/1000"
+        src="https://images.unsplash.com/photo-1545346315-f4c47e3e1b55?ixid=M3w4MjcwNjd8MHwxfHNlYXJjaHwyfHxzdHJvbmclMjBtYW58ZW58MHx8fHwxNzg4MjIyNTU1fDA&ixlib=rb-4.1.0&w=1000&h=1000&fit=max&q=80"
         class="top-0 z-0 size-full rounded-xl object-cover opacity-50"
       />
     </div>
     <div class="flex w-full flex-wrap items-center justify-around gap-3 text-xs text-slate-600">
-      <span>solid</span>
-      <span>ghost</span>
-      <span>mist</span>
-      <span>soft</span>
-      <span>subtle</span>
+      <span
+        v-for="variant in variants"
+        :key="variant"
+      >
+        {{ variant }}
+      </span>
     </div>
     <div
-      class="absolute top-0 left-0 flex h-full flex-col items-center justify-around gap-3 pt-7 text-xs text-slate-600"
+      v-for="color in colors"
+      :key="color.name"
+      class="relative flex w-full flex-wrap items-center gap-3 p-2"
     >
-      <span>main</span>
-      <span>plain</span>
-      <span>alt</span>
-      <span>danger</span>
-      <span>info</span>
-      <span>warn</span>
-      <span>win</span>
-    </div>
-    <div class="flex flex-wrap items-center gap-3 p-2">
-      <Button>Button</Button>
-      <Button variant="ghost">Button</Button>
-      <Button variant="mist">Button</Button>
-      <Button variant="soft">Button</Button>
-      <Button variant="subtle">Button</Button>
-    </div>
-    <div class="flex flex-wrap items-center gap-3 p-2">
-      <Button color="plain">Button</Button>
-      <Button
-        color="plain"
-        variant="ghost"
-      >
-        Button
-      </Button>
-      <Button
-        color="plain"
-        variant="mist"
-      >
-        Button
-      </Button>
-      <Button
-        color="plain"
-        variant="soft"
-      >
-        Button
-      </Button>
-      <Button
-        color="plain"
-        variant="subtle"
-      >
-        Button
-      </Button>
-    </div>
-    <div class="flex flex-wrap items-center gap-3 p-2">
-      <Button color="alt">Button</Button>
-      <Button
-        color="alt"
-        variant="ghost"
-      >
-        Button
-      </Button>
-      <Button
-        color="alt"
-        variant="mist"
-      >
-        Button
-      </Button>
-      <Button
-        color="alt"
-        variant="soft"
-      >
-        Button
-      </Button>
-      <Button
-        color="alt"
-        variant="subtle"
-      >
-        Button
-      </Button>
-    </div>
-    <div class="flex flex-wrap items-center gap-3 p-2">
-      <Button color="danger">Button</Button>
-      <Button
-        color="danger"
-        variant="ghost"
-      >
-        Button
-      </Button>
-      <Button
-        color="danger"
-        variant="mist"
-      >
-        Button
-      </Button>
-      <Button
-        color="danger"
-        variant="soft"
-      >
-        Button
-      </Button>
-      <Button
-        color="danger"
-        variant="subtle"
-      >
-        Button
-      </Button>
-    </div>
-    <div class="flex flex-wrap items-center gap-3 p-2">
-      <Button color="info">Button</Button>
-      <Button
-        color="info"
-        variant="ghost"
-      >
-        Button
-      </Button>
-      <Button
-        color="info"
-        variant="mist"
-      >
-        Button
-      </Button>
-      <Button
-        color="info"
-        variant="soft"
-      >
-        Button
-      </Button>
-      <Button
-        color="info"
-        variant="subtle"
-      >
-        Button
-      </Button>
-    </div>
-    <div class="flex flex-wrap items-center gap-3 p-2">
-      <Button color="warn">Button</Button>
-      <Button
-        color="warn"
-        variant="ghost"
-      >
-        Button
-      </Button>
-      <Button
-        color="warn"
-        variant="mist"
-      >
-        Button
-      </Button>
-      <Button
-        color="warn"
-        variant="soft"
-      >
-        Button
-      </Button>
-      <Button
-        color="warn"
-        variant="subtle"
-      >
-        Button
-      </Button>
-    </div>
-    <div class="flex flex-wrap items-center gap-3 p-2">
-      <Button color="win">Button</Button>
-      <Button
-        color="win"
-        variant="ghost"
-      >
-        Button
-      </Button>
-      <Button
-        color="win"
-        variant="mist"
-      >
-        Button
-      </Button>
-      <Button
-        color="win"
-        variant="soft"
-      >
-        Button
-      </Button>
-      <Button
-        color="win"
-        variant="subtle"
+      <span class="absolute top-1/2 right-full mr-3 -translate-y-1/2 text-xs text-slate-600">
+        {{ color.name }}
+      </span>
+      <Button
+        v-for="variant in color.variants"
+        :key="variant"
+        :color="color.name"
+        :variant="variant"
       >
         Button
       </Button>

package/dist/runtime/config.d.ts

@@ -3,7 +3,9 @@ export {}
 declare module '#brickflow-ui-config' {
   import type { BrickflowUiConfig } from './tailwind'
 
-  export const UI_STYLE: BrickflowUiConfig['uiStyles']
+  export const UI_CONFIG: BrickflowUiConfigType
+  export const UI_STYLE: BrickflowUiStyleType
+  export const uiConfig: BrickflowUiConfig['uiConfig']
   export const uiStyles: BrickflowUiConfig['uiStyles']
 
   const config: BrickflowUiConfig
@@ -12,6 +14,22 @@ declare module '#brickflow-ui-config' {
 }
 
 declare global {
+  type BrickflowUiConfigFor<TExpected extends BrickflowUiConfigObject> = {
+    [TKey in keyof BrickflowUiConfigLiteralPaths]: BrickflowUiConfigLiteralPaths[TKey] extends TExpected
+      ? BrickflowUiConfigLiteralPaths[TKey]
+      : never
+  }[keyof BrickflowUiConfigLiteralPaths] extends infer TMatched
+    ? [TMatched] extends [never]
+      ? TExpected
+      : TMatched
+    : never
+
+  interface BrickflowUiConfigLiteralPaths {}
+
+  interface BrickflowUiConfigPaths {}
+
+  type BrickflowUiConfigType = BrickflowUiConfigPaths & Record<string, unknown>
+
   interface BrickflowUiStylePaths {}
 
   type BrickflowUiStyleType = BrickflowUiStylePaths & BrickflowUiStyleValue
@@ -21,10 +39,15 @@ declare global {
   }
 
   const UI_STYLE: BrickflowUiStyleType
+
+  const UI_CONFIG: BrickflowUiConfigType
+
+  function defineUiConfig<TConfig extends BrickflowUiConfigObject>(): BrickflowUiConfigFor<TConfig>
 }
 
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
+    readonly UI_CONFIG: BrickflowUiConfigType
     readonly UI_STYLE: BrickflowUiStyleType
   }
 }

package/dist/runtime/tailwind.d.ts

@@ -1,14 +1,29 @@
-export interface BrickflowUiConfig<TStyles = BrickflowUiStyles> {
+declare const UI_STYLE_REFERENCE: unique symbol;
+export interface BrickflowUiConfig<TStyles = BrickflowUiStyles, TConfig = BrickflowUiConfigObject> {
+    uiConfig: TConfig;
     uiStyles: TStyles;
 }
+export type BrickflowUiConfigObject = {
+    readonly [key: string]: BrickflowUiConfigValue;
+};
+export type BrickflowUiConfigValue = BrickflowUiConfigObject | BrickflowUiStyleReference | string;
+export interface BrickflowUiStyleReference {
+    readonly [UI_STYLE_REFERENCE]: readonly string[];
+}
+/** A chainable compile-time reference to a string in `uiStyles`. */
+export type BrickflowUiStyleReferenceValue = string & {
+    readonly [key: string]: any;
+};
 declare global {
+    interface BrickflowUiConfigSchema {
+    }
     interface BrickflowUiConfigStylePaths {
     }
     type BrickflowUiStyleObject = {
         readonly [key: string]: BrickflowUiStyleObject | string;
     };
 }
-export type BrickflowUiConfigInput<TStyles extends BrickflowUiStyleObject = BrickflowUiStyles> = {
+export type BrickflowUiConfigInput<TStyles extends BrickflowUiStyleObject = BrickflowUiStyles, TConfig extends BrickflowUiConfigObject = BrickflowUiConfigObject> = BrickflowUiConfigInputConfig<TConfig> & {
     readonly uiStyles?: TStyles;
 };
 export type BrickflowUiNoExtraKeys<TValue, TShape> = TValue extends string ? TShape extends string ? TValue : never : TShape extends string ? never : {
@@ -16,10 +31,27 @@ export type BrickflowUiNoExtraKeys<TValue, TShape> = TValue extends string ? TSh
 };
 export type BrickflowUiStrictStyles<TStyles extends BrickflowUiConfigStylePaths> = BrickflowUiNoExtraKeys<TStyles, BrickflowUiConfigStylePaths> & TStyles;
 export type BrickflowUiStyles = BrickflowUiStyleObject;
+type BrickflowUiConfigContext = keyof BrickflowUiConfigSchema extends never ? unknown : {
+    readonly uiConfig: BrickflowUiConfigSchema;
+};
+type BrickflowUiConfigInputConfig<TConfig extends BrickflowUiConfigObject> = keyof BrickflowUiConfigSchema extends never ? {
+    readonly uiConfig?: TConfig;
+} : {
+    readonly uiConfig: TConfig;
+};
+type BrickflowUiConfigValidation<TConfig extends BrickflowUiConfigObject> = keyof BrickflowUiConfigSchema extends never ? unknown : TConfig extends BrickflowUiConfigSchema ? unknown : {
+    readonly __brickflowUiConfigError: 'uiConfig does not satisfy a component config schema';
+};
 export declare const emptyUiStyles: {};
-export declare const emptyBrickflowUiConfig: BrickflowUiConfig<typeof emptyUiStyles>;
-export declare function defineBrickflowUiConfig(): BrickflowUiConfig<typeof emptyUiStyles>;
-export declare function defineBrickflowUiConfig<const TStyles extends BrickflowUiConfigStylePaths>(config: BrickflowUiConfigInput<BrickflowUiStrictStyles<TStyles>>): BrickflowUiConfig<TStyles>;
+export declare const emptyUiConfig: {};
+export declare const emptyBrickflowUiConfig: BrickflowUiConfig<typeof emptyUiStyles, typeof emptyUiConfig>;
+export declare function defineBrickflowUi(): BrickflowUiConfig<typeof emptyUiStyles, typeof emptyUiConfig>;
+export declare function defineBrickflowUi<const TStyles extends BrickflowUiConfigStylePaths, const TConfig extends BrickflowUiConfigObject>(config: BrickflowUiConfigContext & BrickflowUiConfigInput<BrickflowUiStrictStyles<TStyles>, TConfig> & BrickflowUiConfigValidation<TConfig>): BrickflowUiConfig<TStyles, TConfig>;
 export declare const uiStyles: {};
+export declare const uiConfig: {};
+/** A compile-time reference to a value in `uiStyles`, for use inside `uiConfig`. */
+export declare const UI_STYLE: BrickflowUiStyleReferenceValue;
+export declare const isBrickflowUiStyleReference: (value: unknown) => value is BrickflowUiStyleReference;
+export declare const getBrickflowUiStyleReferencePath: (value: BrickflowUiStyleReference) => readonly string[];
 export default emptyBrickflowUiConfig;
 //# sourceMappingURL=tailwind.d.ts.map

package/dist/runtime/tailwind.js

@@ -1,22 +1,68 @@
+const UI_STYLE_REFERENCE = Symbol.for("@brickflow/ui/style-reference");
 export const emptyUiStyles = {};
+export const emptyUiConfig = {};
 export const emptyBrickflowUiConfig = {
+  uiConfig: emptyUiConfig,
   uiStyles: emptyUiStyles
 };
-export function defineBrickflowUiConfig(config = {}) {
+export function defineBrickflowUi(config = {}) {
+  const uiConfig2 = config.uiConfig ?? emptyUiConfig;
   const uiStyles2 = config.uiStyles ?? emptyUiStyles;
+  validateUiConfig(uiConfig2);
   validateUiStyles(uiStyles2);
   return {
+    uiConfig: uiConfig2,
     uiStyles: uiStyles2
   };
 }
 export const uiStyles = emptyBrickflowUiConfig.uiStyles;
+export const uiConfig = emptyBrickflowUiConfig.uiConfig;
+const createUiStyleReference = (path = []) => new Proxy(
+  { [UI_STYLE_REFERENCE]: path },
+  {
+    get(target, key) {
+      if (key === UI_STYLE_REFERENCE) {
+        return target[UI_STYLE_REFERENCE];
+      }
+      return typeof key === "string" ? createUiStyleReference([...path, key]) : void 0;
+    }
+  }
+);
+export const UI_STYLE = createUiStyleReference();
+export const isBrickflowUiStyleReference = (value) => Boolean(value && typeof value === "object" && UI_STYLE_REFERENCE in value);
+export const getBrickflowUiStyleReferencePath = (value) => value[UI_STYLE_REFERENCE];
+if (!("UI_STYLE" in globalThis)) {
+  Object.defineProperty(globalThis, "UI_STYLE", {
+    configurable: true,
+    value: UI_STYLE
+  });
+}
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function validateUiConfig(value, path = "uiConfig") {
+  if (!isRecord(value)) {
+    throw new TypeError(`${path} must be an object.`);
+  }
+  for (const [key, childValue] of Object.entries(value)) {
+    const childPath = `${path}.${key}`;
+    if (typeof childValue === "string" || isBrickflowUiStyleReference(childValue)) {
+      continue;
+    }
+    if (isRecord(childValue)) {
+      validateUiConfig(childValue, childPath);
+      continue;
+    }
+    throw new TypeError(`${childPath} must be a string, UI_STYLE reference, or an object.`);
+  }
+}
 function validateUiStyles(value, path = "uiStyles") {
   if (!isRecord(value)) {
     throw new TypeError(`${path} must be an object.`);
   }
   for (const [key, childValue] of Object.entries(value)) {
     const childPath = `${path}.${key}`;
+    if (isBrickflowUiStyleReference(childValue)) {
+      throw new TypeError(`${childPath} cannot reference UI_STYLE.`);
+    }
     if (typeof childValue === "string") {
       continue;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [