@brickflow/ui 0.0.26 → 0.0.28

package/dist/module.d.mts

@@ -1,10 +1,13 @@
 import * as _nuxt_schema from '@nuxt/schema';
+export { BrickflowConfig, BrickflowI18n, BrickflowRouteLocationParam } from '../dist/runtime/composables/useTranslate.js';
 
 interface ModuleOptions {
     componentPrefix?: string;
     configPath?: string;
-    target?: string;
+    iconsPath?: string;
+    theme?: boolean;
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };

package/dist/module.json

@@ -4,9 +4,9 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,9 +1,88 @@
-import { defineNuxtModule, createResolver, resolvePath, addTemplate, addImportsDir, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, resolvePath, addTemplate, updateTemplates, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { createJiti } from 'jiti';
-import { readFile, mkdir, writeFile, readdir } from 'node:fs/promises';
-import { resolve, basename, extname, relative, join } from 'node:path';
+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 { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon';
+
+const ICON_FILE_PATTERN = /\.svg$/i;
+const minifyCss = (css) => css.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,>+~])\s*/g, "$1").replace(/;\}/g, "}").trim();
+const normalizeGeneratedCss = (css) => `${css.replace(/"/g, "'").replace(/^ {4}/gm, "  ").replace(/(\.(?:eot|ttf|woff2?))\?[^#'")]+(#iefix)?/gi, "$1$2").replace(/src: ([^\n]+),\n([^\n]+),\n([^\n]+);/, "src:\n    $1,\n    $2,\n    $3;").replace(
+  /i\[class\^='icon-'\]:before, i\[class\*=' icon-'\]:before \{/,
+  "@layer base {\n  i[class^='icon-'],\n  i[class*=' icon-'] {\n    container-type: inline-size;\n    display: inline-flex;\n    width: 1em;\n  }\n}\n\ni[class^='icon-']:before,\ni[class*=' icon-']:before {\n  font-size: 100cqw;"
+).replace(/\n{3,}/g, "\n\n").trim()}
+`;
+const getIconFontNames = async (inputDir) => {
+  const entries = await readdir(inputDir, { withFileTypes: true });
+  const invalidEntries = entries.filter((entry) => !entry.isFile() || !ICON_FILE_PATTERN.test(entry.name));
+  if (invalidEntries.length > 0) {
+    throw new Error(
+      `brickflowUi.iconsPath must be a flat directory containing only .svg files. Invalid entries: ${invalidEntries.map((entry) => entry.name).join(", ")}`
+    );
+  }
+  if (entries.length === 0) {
+    throw new Error("brickflowUi.iconsPath must contain at least one .svg file");
+  }
+  return entries.map((entry) => entry.name.replace(ICON_FILE_PATTERN, "")).sort((a, b) => a.localeCompare(b));
+};
+const getIconFontCssPath = (outputDir) => join(outputDir, "icon.minify.css");
+const createIconFontAssetsInlineLimit = (outputDir, currentLimit) => {
+  const normalizedOutputDir = outputDir.replaceAll("\\", "/");
+  return (filePath, content) => {
+    if (filePath.replaceAll("\\", "/").startsWith(`${normalizedOutputDir}/`)) {
+      return false;
+    }
+    if (typeof currentLimit === "function") {
+      return currentLimit(filePath, content);
+    }
+    return typeof currentLimit === "number" ? content.length < currentLimit : void 0;
+  };
+};
+const generateIconFont = async ({ inputDir, outputDir }) => {
+  await getIconFontNames(inputDir);
+  await mkdir(outputDir, { recursive: true });
+  await generateFonts({
+    assetTypes: [OtherAssetType.CSS],
+    fontsUrl: ".",
+    fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
+    inputDir,
+    name: "icon",
+    normalize: true,
+    outputDir
+  });
+  const cssPath = join(outputDir, "icon.css");
+  const css = normalizeGeneratedCss(await readFile(cssPath, "utf8"));
+  await writeFile(cssPath, css);
+  await writeFile(getIconFontCssPath(outputDir), minifyCss(css));
+};
+const brickflowUiIconFontPlugin = (options) => ({
+  buildStart: () => generateIconFont(options),
+  name: "brickflow-ui-icons"
+});
+
+const CSS_FILE_PATTERN = /\.css(?:\?.*)?$/;
+const CUSTOM_DARK_VARIANT = "@custom-variant dark (&:where([data-ui-theme='dark'], [data-ui-theme='dark'] *));";
+const TAILWIND_IMPORT_PATTERN = /@import\s+(['"])tailwindcss\1\s*;/u;
+const brickflowUiTailwindVariantPlugin = () => ({
+  enforce: "pre",
+  name: "brickflow-ui-tailwind-variant",
+  transform(code, id) {
+    if (!CSS_FILE_PATTERN.test(id) || code.includes("@custom-variant dark")) {
+      return null;
+    }
+    const importMatch = code.match(TAILWIND_IMPORT_PATTERN);
+    if (!importMatch) {
+      return null;
+    }
+    const index = (importMatch.index ?? 0) + importMatch[0].length;
+    return {
+      code: `${code.slice(0, index)}
+${CUSTOM_DARK_VARIANT}${code.slice(index)}`,
+      map: null
+    };
+  }
+});
 
 const UI_STYLE_PATTERN = /\bUI_STYLE((?:\.[A-Za-z_$][\w$]*)+)/g;
 const SCRIPT_FILE_PATTERN = /\.(?:[cm]?[jt]sx?|vue)(?:\?.*)?$/;
@@ -29,7 +108,9 @@ const resolveUiStyleConfigPath = (id, path) => {
   if (!cleanId.endsWith(".vue")) {
     return path;
   }
-  return [toCamelCase(basename(cleanId, extname(cleanId))), ...path];
+  const componentName = basename(cleanId, extname(cleanId));
+  const configName = componentName === "index" ? basename(dirname(cleanId)) : componentName;
+  return [toCamelCase(configName), ...path];
 };
 const resolveStyleValue = (styles, id, path) => {
   const configPathValue = readPath(styles, resolveUiStyleConfigPath(id, path));
@@ -140,6 +221,107 @@ const brickflowUiStylePlugin = (options) => ({
 });
 
 const UI_STYLE_FILE_PATTERN = /\.(?:[cm]?[jt]sx?|vue)$/;
+const UI_COMPONENT_FILE_PATTERN = /(?:^|[/\\])index\.vue$/;
+const UI_DEMO_FILE_PATTERN = /\.demo\.vue$/;
+const THEME_BOOTSTRAP_SCRIPT = `;(() => {
+  let storedTheme
+
+  try {
+    storedTheme = localStorage.getItem('ui-theme')
+  } catch {}
+
+  const theme =
+    storedTheme === 'dark' || storedTheme === 'light'
+      ? storedTheme
+      : window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+  const root = document.documentElement
+
+  root.dataset.uiTheme = theme
+  root.style.colorScheme = theme
+})()`;
+const toKebabCase = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\\/]/g, "-").toLowerCase();
+const getComponentName = (path) => path.replace(/[/\\]index\.vue$/, "").replaceAll("/", " / ");
+const readObjectPath = (source, path) => path.reduce((value, key) => {
+  if (!value || typeof value !== "object") {
+    return void 0;
+  }
+  return value[key];
+}, source);
+const getBracedContent = (source, fromIndex) => {
+  const openingIndex = source.indexOf("{", fromIndex);
+  if (openingIndex === -1) {
+    return void 0;
+  }
+  let depth = 0;
+  for (let index = openingIndex; index < source.length; index += 1) {
+    const character = source[index];
+    if (character === "{") {
+      depth += 1;
+    } else if (character === "}") {
+      depth -= 1;
+    }
+    if (depth === 0) {
+      return source.slice(openingIndex + 1, index);
+    }
+  }
+  return void 0;
+};
+const getPropsSource = (source) => {
+  const interfaceIndex = source.indexOf("interface Props");
+  if (interfaceIndex !== -1) {
+    return getBracedContent(source, interfaceIndex);
+  }
+  const definePropsIndex = source.indexOf("defineProps<");
+  return definePropsIndex === -1 ? void 0 : getBracedContent(source, definePropsIndex);
+};
+const collectComponentProps = (source) => {
+  const propsSource = getPropsSource(source);
+  if (!propsSource) {
+    return [];
+  }
+  return propsSource.split("\n").flatMap((sourceLine) => {
+    const line = sourceLine.trim().replace(/[;,]$/, "");
+    const separatorIndex = line.indexOf(":");
+    const name = line.slice(0, separatorIndex);
+    const type = line.slice(separatorIndex + 1).trim();
+    if (separatorIndex === -1 || !/^[a-z_$][\w$]*\??$/i.test(name) || !type) {
+      return [];
+    }
+    return [
+      {
+        name: name.replace(/\?$/, ""),
+        required: !name.endsWith("?"),
+        type
+      }
+    ];
+  });
+};
+const collectComponentSlots = (source) => {
+  const conditionalSlots = [...source.matchAll(/\$slots\.([A-Za-z_$][\w$]*)/g)].map((match) => match[1]).filter((slot) => Boolean(slot));
+  const renderedSlots = [...source.matchAll(/<slot\b[^>]*>/g)].map((match) => {
+    const name = match[0].match(/\bname=["']([^"']+)["']/)?.[1];
+    return name ?? "default";
+  });
+  return [.../* @__PURE__ */ new Set([...conditionalSlots, ...renderedSlots])].sort();
+};
+const toComponentStyleKey = (path) => {
+  const componentName = basename(dirname(path));
+  return `${componentName[0]?.toLowerCase()}${componentName.slice(1)}`;
+};
+const collectComponentStyleValues = (source, componentPath, styles) => [...new Set(collectUiStylePathsFromCode(source).map((path) => path.join(".")))].sort().map((path) => {
+  const segments = path.split(".");
+  const componentValue = readObjectPath(styles, [toComponentStyleKey(componentPath), ...segments]);
+  const globalValue = readObjectPath(styles, segments);
+  let value;
+  if (typeof componentValue === "string") {
+    value = componentValue;
+  } else if (typeof globalValue === "string") {
+    value = globalValue;
+  }
+  return { path, value };
+});
 const scanUiStyleFiles = async (directory) => {
   const entries = await readdir(directory, { withFileTypes: true }).catch(() => []);
   const files = [];
@@ -159,7 +341,8 @@ const module$1 = defineNuxtModule({
   defaults: {
     componentPrefix: "Brick",
     configPath: "~/ui.config.ts",
-    target: "world"
+    iconsPath: void 0,
+    theme: false
   },
   meta: {
     compatibility: {
@@ -169,17 +352,106 @@ const module$1 = defineNuxtModule({
     name: "@brickflow/ui"
   },
   async setup(options, nuxt) {
+    const nuxtOptions = nuxt.options;
+    nuxtOptions.routeRules ??= {};
+    const uiRouteRule = nuxtOptions.routeRules["/ui"] ?? {};
+    nuxtOptions.routeRules["/ui"] = {
+      ...uiRouteRule,
+      headers: {
+        "X-Robots-Tag": "noindex, nofollow, noarchive",
+        ...uiRouteRule.headers
+      },
+      ssr: uiRouteRule.ssr ?? false
+    };
     const resolver = createResolver(import.meta.url);
-    const currentConfig = nuxt.options.runtimeConfig.public.brickflowUi ?? {};
     const defaultConfigPath = resolver.resolve("./runtime/tailwind");
     const runtimePath = resolver.resolve("./runtime");
+    const componentsDirectory = resolve(runtimePath, "components");
     const resolvedConfigPath = await resolvePath(options.configPath ?? defaultConfigPath).catch(
       () => defaultConfigPath
     );
+    if (options.theme) {
+      nuxt.options.app.head.script ??= [];
+      nuxt.options.app.head.script.unshift({
+        innerHTML: THEME_BOOTSTRAP_SCRIPT,
+        key: "ui-theme"
+      });
+    }
+    const iconFont = options.iconsPath ? {
+      inputDir: await resolvePath(options.iconsPath).catch(() => resolve(options.iconsPath)),
+      outputDir: resolve(nuxt.options.buildDir, "brickflow/icons")
+    } : void 0;
+    if (iconFont) {
+      nuxt.options.css.push(getIconFontCssPath(iconFont.outputDir));
+    }
     const loadConfig = createJiti(import.meta.url, {
       interopDefault: true,
       moduleCache: false
     });
+    const toPascalCase = (value) => value.split(/[/\\._-]+/).filter(Boolean).map((segment) => `${segment[0]?.toUpperCase()}${segment.slice(1)}`).join("");
+    const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const getUiComponentNameFromImport = (specifier, demoPath, componentsRoot) => {
+      if (!specifier.startsWith(".")) {
+        return void 0;
+      }
+      const componentPath = resolve(dirname(demoPath), specifier);
+      if (relative(componentsRoot, componentPath).startsWith("..") || !UI_COMPONENT_FILE_PATTERN.test(componentPath)) {
+        return void 0;
+      }
+      return toPascalCase(relative(componentsRoot, componentPath).replace(/[/\\]index\.vue$/, ""));
+    };
+    const createDemoCode = (source, demoPath, componentsRoot, componentPrefix) => {
+      const importedComponents = /* @__PURE__ */ new Map();
+      const removeScriptBlocks = (code, shouldRemove) => {
+        const openingTagPrefix = "<script";
+        const closingTag = "<\/script>";
+        let result = "";
+        let cursor = 0;
+        let scriptStart = code.indexOf(openingTagPrefix, cursor);
+        while (scriptStart !== -1) {
+          const nextCharacter = code[scriptStart + openingTagPrefix.length];
+          if (nextCharacter && !/[\s>]/.test(nextCharacter)) {
+            scriptStart = code.indexOf(openingTagPrefix, scriptStart + openingTagPrefix.length);
+            continue;
+          }
+          const openingEnd = code.indexOf(">", scriptStart);
+          const closingStart = openingEnd === -1 ? -1 : code.indexOf(closingTag, openingEnd);
+          if (openingEnd === -1 || closingStart === -1) {
+            break;
+          }
+          const openingTag = code.slice(scriptStart, openingEnd + 1);
+          const content = code.slice(openingEnd + 1, closingStart);
+          result += code.slice(cursor, scriptStart);
+          if (!shouldRemove(openingTag, content)) {
+            result += code.slice(scriptStart, closingStart + closingTag.length);
+          }
+          cursor = closingStart + closingTag.length;
+          scriptStart = code.indexOf(openingTagPrefix, cursor);
+        }
+        return result + code.slice(cursor);
+      };
+      const isSetupScript = (openingTag) => /\bsetup(?:\s|>)/.test(openingTag);
+      const codeWithoutMeta = removeScriptBlocks(source, (openingTag) => !isSetupScript(openingTag));
+      const codeWithoutImports = codeWithoutMeta.replace(
+        /^\s*import\s+([A-Za-z_$][\w$]*)\s+from\s+['"]([^'"]+)['"];?\s*$/gm,
+        (statement, localName, specifier) => {
+          const componentName = getUiComponentNameFromImport(specifier, demoPath, componentsRoot);
+          if (!componentName) {
+            return statement;
+          }
+          importedComponents.set(localName, `${componentPrefix}${componentName}`);
+          return "";
+        }
+      );
+      const codeWithPrefixedComponents = [...importedComponents.entries()].reduce(
+        (code, [localName, componentName]) => code.replace(new RegExp(`<(/?)${escapeRegExp(localName)}(?=[\\s>/])`, "g"), `<$1${componentName}`),
+        codeWithoutImports
+      );
+      return removeScriptBlocks(
+        codeWithPrefixedComponents,
+        (openingTag, content) => isSetupScript(openingTag) && !content.trim()
+      );
+    };
     const loadUiConfig = async () => {
       const validateConfig = defineBrickflowUiConfig;
       return validateConfig(
@@ -209,6 +481,17 @@ const module$1 = defineNuxtModule({
         })
       );
     };
+    const iconFontTemplate = addTemplate({
+      filename: "brickflow/brickflow-ui-icons.mjs",
+      getContents: async () => {
+        const iconNames = iconFont ? await getIconFontNames(iconFont.inputDir) : [];
+        return [
+          `export const iconNames = ${JSON.stringify(iconNames)}`,
+          `export const firstIconName = ${JSON.stringify(iconNames[0] ?? "")}`,
+          ""
+        ].join("\n");
+      }
+    });
     const uiConfigTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-config.mjs",
       getContents: () => [
@@ -223,12 +506,112 @@ const module$1 = defineNuxtModule({
         ""
       ].join("\n")
     });
-    nuxt.options.runtimeConfig.public.brickflowUi = {
-      ...currentConfig,
-      message: "world",
-      target: options.target ?? "world"
-    };
+    const uiOptionsTemplate = addTemplate({
+      filename: "brickflow/brickflow-ui-options.mjs",
+      getContents: () => `export const uiThemeEnabled = ${JSON.stringify(options.theme === true)}
+`
+    });
+    const uiCatalogTemplate = addTemplate({
+      filename: "brickflow/ui-catalog.ts",
+      getContents: async () => {
+        const files = await scanUiStyleFiles(componentsDirectory);
+        const styles = (await loadUiConfig()).uiStyles;
+        const components = await Promise.all(
+          files.filter((path) => UI_COMPONENT_FILE_PATTERN.test(path)).sort().map(async (path) => {
+            const source = await readFile(path, "utf8");
+            const relativePath = relative(componentsDirectory, path).replaceAll("\\", "/");
+            const demos = await Promise.all(
+              files.filter((file) => dirname(file) === dirname(path) && UI_DEMO_FILE_PATTERN.test(file)).sort().map(async (demoPath) => ({
+                code: createDemoCode(
+                  await readFile(demoPath, "utf8"),
+                  demoPath,
+                  componentsDirectory,
+                  options.componentPrefix ?? "Brick"
+                ),
+                id: toKebabCase(basename(demoPath).replace(UI_DEMO_FILE_PATTERN, "")),
+                path: demoPath
+              }))
+            );
+            return {
+              demos,
+              id: toKebabCase(relativePath.replace(/[/\\]index\.vue$/, "")),
+              name: getComponentName(relativePath),
+              path,
+              props: collectComponentProps(source),
+              slots: collectComponentSlots(source),
+              styles: collectComponentStyleValues(source, path, styles)
+            };
+          })
+        );
+        return [
+          "import type { Component } from 'vue'",
+          ...components.map(
+            (component, index) => `import Component${index} from ${JSON.stringify(component.path.replaceAll("\\", "/"))}`
+          ),
+          ...components.flatMap(
+            (component, componentIndex) => component.demos.map(
+              (demo, demoIndex) => `import Demo${componentIndex}_${demoIndex}, { uiDemo as uiDemo${componentIndex}_${demoIndex} } from ${JSON.stringify(demo.path.replaceAll("\\", "/"))}`
+            )
+          ),
+          "",
+          "export interface BrickflowUiDemo {",
+          "  code: string",
+          "  component: Component",
+          "  description?: string",
+          "  id: string",
+          "  title: string",
+          "}",
+          "",
+          "export interface BrickflowUiDemoMeta {",
+          "  description?: string",
+          "  title?: string",
+          "}",
+          "",
+          "export interface BrickflowUiProp {",
+          "  name: string",
+          "  required: boolean",
+          "  type: string",
+          "}",
+          "",
+          "export interface BrickflowUiStyleValue {",
+          "  path: string",
+          "  value?: string",
+          "}",
+          "",
+          "export interface BrickflowUiComponent {",
+          "  component: Component",
+          "  demos: BrickflowUiDemo[]",
+          "  id: string",
+          "  name: string",
+          "  props: BrickflowUiProp[]",
+          "  slots: string[]",
+          "  styles: BrickflowUiStyleValue[]",
+          "}",
+          "",
+          "export const uiComponents = [",
+          ...components.map(
+            (component, componentIndex) => `  { component: Component${componentIndex}, demos: [${component.demos.map(
+              (demo, demoIndex) => `{ code: ${JSON.stringify(demo.code)}, component: Demo${componentIndex}_${demoIndex}, description: uiDemo${componentIndex}_${demoIndex}.description, id: ${JSON.stringify(demo.id)}, title: uiDemo${componentIndex}_${demoIndex}.title ?? 'Demo' }`
+            ).join(
+              ", "
+            )}], id: ${JSON.stringify(component.id)}, name: ${JSON.stringify(component.name)}, props: ${JSON.stringify(component.props)}, slots: ${JSON.stringify(component.slots)}, styles: ${JSON.stringify(component.styles)} },`
+          ),
+          "] satisfies BrickflowUiComponent[]",
+          ""
+        ].join("\n");
+      }
+    });
     nuxt.options.alias["#brickflow-ui-config"] = uiConfigTemplate.dst;
+    nuxt.options.alias["#brickflow-ui-catalog"] = uiCatalogTemplate.dst;
+    nuxt.options.alias["#brickflow-ui-icons"] = iconFontTemplate.dst;
+    nuxt.options.alias["#brickflow-ui-options"] = uiOptionsTemplate.dst;
+    nuxt.hook("pages:extend", (pages) => {
+      pages.push({
+        file: resolver.resolve("./runtime/pages/ui.vue"),
+        name: "brickflow-ui",
+        path: "/ui"
+      });
+    });
     await generateUiStyleTypes();
     nuxt.hook("prepare:types", async ({ references }) => {
       await generateUiStyleTypes();
@@ -240,20 +623,35 @@ const module$1 = defineNuxtModule({
         return;
       }
       await generateUiStyleTypes();
+      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 });
+      }
     });
     nuxt.hook("vite:extendConfig", (config) => {
       const viteConfig = config;
       viteConfig.plugins ??= [];
+      if (iconFont) {
+        viteConfig.build ??= {};
+        viteConfig.build.assetsInlineLimit = createIconFontAssetsInlineLimit(
+          iconFont.outputDir,
+          viteConfig.build.assetsInlineLimit
+        );
+        viteConfig.plugins.push(brickflowUiIconFontPlugin(iconFont));
+      }
       viteConfig.plugins.push(
         brickflowUiStylePlugin({
           configPath: resolvedConfigPath,
           getStyles: async () => (await loadUiConfig()).uiStyles
         })
       );
+      if (options.theme) {
+        viteConfig.plugins.push(brickflowUiTailwindVariantPlugin());
+      }
       viteConfig.plugins.push(tailwindcss());
     });
     addImportsDir(resolver.resolve("./runtime/composables"));
     addComponentsDir({
+      ignore: ["**/*.demo.vue"],
       path: resolver.resolve("./runtime/components"),
       pathPrefix: false,
       prefix: options.componentPrefix ?? "Brick"

package/dist/runtime/components/Button/icons.demo.d.vue.ts

@@ -0,0 +1,8 @@
+export declare const uiDemo: {
+    description: string;
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=icons.demo.vue.d.ts.map

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

@@ -0,0 +1,25 @@
+<script>
+export const uiDemo = {
+  description: "Set leadingIcon and trailingIcon to an icon name. Slots take precedence when both are provided.",
+  title: "Icons"
+};
+</script>
+
+<script setup>
+import { firstIconName } from "#brickflow-ui-icons";
+import Button from "./index.vue";
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <Button :icon="firstIconName">Launch</Button>
+    <Button :trailingIcon="firstIconName">Add to cart</Button>
+    <Button
+      :icon="firstIconName"
+      :trailingIcon="firstIconName"
+      variant="soft"
+    >
+      View profile
+    </Button>
+  </div>
+</template>

package/dist/runtime/components/Button/icons.demo.vue.d.ts

@@ -0,0 +1,8 @@
+export declare const uiDemo: {
+    description: string;
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=icons.demo.vue.d.ts.map

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

@@ -0,0 +1,45 @@
+import type { RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    block?: boolean;
+    color?: ButtonColor;
+    disabled?: boolean;
+    icon?: string;
+    loading?: boolean;
+    rounded?: boolean;
+    size?: ButtonSize;
+    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' | 'glass' | '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";
+    to: RouteLocationRaw;
+    color: ButtonColor;
+    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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=index.vue.d.ts.map