@brickflow/ui 0.0.39 → 0.0.41

package/dist/module.json

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

package/dist/module.mjs

@@ -536,10 +536,13 @@ 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 collectComponentStyleValues = (source, componentPath, config) => [
+  ...collectUiStylePathsFromCode(source),
+  ...collectUiConfigStyleReferencePaths(config.uiConfig).filter(([component]) => component === toComponentStyleKey(componentPath)).map((path) => path.slice(1))
+].map((path) => path.join(".")).filter(Boolean).filter((path, index, paths) => paths.indexOf(path) === index).sort().map((path) => {
   const segments = path.split(".");
-  const componentValue = readObjectPath(styles, [toComponentStyleKey(componentPath), ...segments]);
-  const globalValue = readObjectPath(styles, segments);
+  const componentValue = readObjectPath(config.uiStyles, [toComponentStyleKey(componentPath), ...segments]);
+  const globalValue = readObjectPath(config.uiStyles, segments);
   let value;
   if (typeof componentValue === "string") {
     value = componentValue;
@@ -747,6 +750,9 @@ const module$1 = defineNuxtModule({
       getContents: async () => {
         const iconNames = iconFont ? await getIconFontNames(iconFont.inputDir) : [];
         return [
+          "import { uiConfig } from '#brickflow-ui-config'",
+          "",
+          "export const buttonConfig = uiConfig.button",
           `export const iconNames = ${JSON.stringify(iconNames)}`,
           `export const firstIconName = ${JSON.stringify(iconNames[0] ?? "")}`,
           ""
@@ -778,7 +784,7 @@ const module$1 = defineNuxtModule({
       filename: "brickflow/ui-catalog.ts",
       getContents: async () => {
         const files = await scanUiStyleFiles(componentsDirectory);
-        const styles = (await loadUiConfig()).uiStyles;
+        const config = await loadUiConfig();
         const components = await Promise.all(
           files.filter((path) => UI_COMPONENT_FILE_PATTERN.test(path)).sort().map(async (path) => {
             const source = await readFile(path, "utf8");
@@ -802,7 +808,7 @@ const module$1 = defineNuxtModule({
               path,
               props: collectComponentProps(source),
               slots: collectComponentSlots(source),
-              styles: collectComponentStyleValues(source, path, styles)
+              styles: collectComponentStyleValues(source, path, config)
             };
           })
         );
@@ -880,13 +886,15 @@ const module$1 = defineNuxtModule({
     });
     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)) {
+      const isConfigFile = absolutePath === resolvedConfigPath;
+      const isRuntimeFile = !relative(runtimePath, absolutePath).startsWith("..") && UI_STYLE_FILE_PATTERN.test(path);
+      if (!isConfigFile && !isRuntimeFile) {
         return;
       }
       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))) {
+      if (isConfigFile || !relative(componentsDirectory, absolutePath).startsWith("..") && (UI_COMPONENT_FILE_PATTERN.test(path) || UI_DEMO_FILE_PATTERN.test(path))) {
         await updateTemplates({ filter: (template) => template.filename === uiCatalogTemplate.filename });
       }
     });

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

@@ -17,7 +17,6 @@ import Button from "./index.vue";
     <Button
       :icon="firstIconName"
       :trailingIcon="firstIconName"
-      variant="soft"
     >
       View profile
     </Button>

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

@@ -1,4 +1,6 @@
 import type { RouteLocationRaw } from 'vue-router';
+declare const UI_CONFIG: any;
+export type ButtonConfig = typeof UI_CONFIG;
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

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

@@ -22,13 +22,7 @@ const props = defineProps({
 });
 const colorClasses = UI_CONFIG.colorClasses;
 const sizeClasses = UI_CONFIG.sizeClasses;
-const sizeIconClasses = {
-  lg: UI_STYLE.size.lgIcon,
-  md: UI_STYLE.size.mdIcon,
-  sm: UI_STYLE.size.smIcon,
-  xl: UI_STYLE.size.xlIcon,
-  xs: UI_STYLE.size.xsIcon
-};
+const sizeIconClasses = UI_CONFIG.sizeIconClasses;
 const component = computed(() => props.to === void 0 ? "button" : BaseLink);
 const disabled = computed(() => props.disabled || props.loading);
 const isButton = computed(() => props.to === void 0);

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

@@ -1,4 +1,6 @@
 import type { RouteLocationRaw } from 'vue-router';
+declare const UI_CONFIG: any;
+export type ButtonConfig = typeof UI_CONFIG;
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

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

@@ -5,74 +5,42 @@ export const uiDemo = {
 </script>
 
 <script setup>
-import { firstIconName } from "#brickflow-ui-icons";
+import { buttonConfig, firstIconName } from "#brickflow-ui-icons";
 import Button from "./index.vue";
 </script>
 
 <template>
   <div class="flex flex-col gap-3">
     <div class="flex flex-wrap items-center gap-3">
-      <Button
-        :icon="firstIconName"
-        size="xs"
-      >
-        Button
-      </Button>
-      <Button
-        :icon="firstIconName"
-        size="sm"
-      >
-        Button
-      </Button>
-      <Button :icon="firstIconName">Button</Button>
-      <Button
-        :icon="firstIconName"
-        size="lg"
-      >
-        Button
-      </Button>
-      <Button
-        :icon="firstIconName"
-        size="xl"
-      >
-        Button
-      </Button>
+      <div
+        v-for="(_, size) in buttonConfig.sizeClasses"
+        :key="size"
+        class="flex flex-col items-center gap-1"
+      >
+        <span class="text-xs text-zinc-500">{{ size }}</span>
+        <Button
+          :icon="firstIconName"
+          :size="size"
+        >
+          Button
+        </Button>
+      </div>
     </div>
     <div class="flex flex-wrap items-center gap-3">
-      <Button
-        :icon="firstIconName"
-        size="xs"
-        rounded
-      >
-        Button
-      </Button>
-      <Button
-        :icon="firstIconName"
-        size="sm"
-        rounded
-      >
-        Button
-      </Button>
-      <Button
-        :icon="firstIconName"
-        rounded
-      >
-        Button
-      </Button>
-      <Button
-        :icon="firstIconName"
-        size="lg"
-        rounded
-      >
-        Button
-      </Button>
-      <Button
-        :icon="firstIconName"
-        size="xl"
-        rounded
-      >
-        Button
-      </Button>
+      <div
+        v-for="(_, size) in buttonConfig.sizeClasses"
+        :key="size"
+        class="flex flex-col items-center gap-1"
+      >
+        <span class="text-xs text-zinc-500">{{ size }}</span>
+        <Button
+          :icon="firstIconName"
+          :size="size"
+          rounded
+        >
+          Button
+        </Button>
+      </div>
     </div>
   </div>
 </template>

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

@@ -5,13 +5,61 @@ export const uiDemo = {
 </script>
 
 <script setup>
+import { buttonConfig } from "#brickflow-ui-icons";
 import Button from "./index.vue";
+const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {};
 </script>
 
 <template>
   <div class="flex flex-wrap items-center gap-3">
-    <Button loading>Loading</Button>
-    <Button disabled>Disabled</Button>
+    <div class="basis-full">
+      <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://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 items-center justify-around gap-3 text-xs text-slate-600">
+          <span
+            v-for="(_, variant) in firstColorClasses"
+            :key="variant"
+          >
+            {{ variant }}
+          </span>
+        </div>
+        <div
+          v-for="(variants, color) in buttonConfig.colorClasses"
+          :key="color"
+          class="relative flex w-full items-center gap-3 p-2"
+        >
+          <span class="absolute top-1/2 right-full mr-3 -translate-y-1/2 text-xs text-slate-600">
+            {{ color }}
+          </span>
+          <div
+            v-for="(_, variant) in variants"
+            :key="variant"
+            class="flex flex-col items-stretch gap-2"
+          >
+            <Button
+              disabled
+              :color="color"
+              :variant="variant"
+            >
+              Disabled
+            </Button>
+            <Button
+              loading
+              :color="color"
+              :variant="variant"
+            >
+              Loading
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <Button to="/">Link</Button>
     <Button block>Block</Button>
   </div>

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

@@ -5,13 +5,9 @@ export const uiDemo = {
 </script>
 
 <script setup>
+import { buttonConfig } from "#brickflow-ui-icons";
 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 ?? [];
+const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {};
 </script>
 
 <template>
@@ -22,26 +18,26 @@ const variants = colors[0]?.variants ?? [];
         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">
+    <div class="flex w-full items-center justify-around gap-3 text-xs text-slate-600">
       <span
-        v-for="variant in variants"
+        v-for="(_, variant) in firstColorClasses"
         :key="variant"
       >
         {{ variant }}
       </span>
     </div>
     <div
-      v-for="color in colors"
-      :key="color.name"
-      class="relative flex w-full flex-wrap items-center gap-3 p-2"
+      v-for="(variants, color) in buttonConfig.colorClasses"
+      :key="color"
+      class="relative flex w-full items-center gap-3 p-2"
     >
       <span class="absolute top-1/2 right-full mr-3 -translate-y-1/2 text-xs text-slate-600">
-        {{ color.name }}
+        {{ color }}
       </span>
       <Button
-        v-for="variant in color.variants"
+        v-for="(_, variant) in variants"
         :key="variant"
-        :color="color.name"
+        :color="color"
         :variant="variant"
       >
         Button

package/dist/runtime/components/Icon/gallery.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=gallery.demo.vue.d.ts.map

package/dist/runtime/components/Icon/gallery.demo.vue

@@ -0,0 +1,132 @@
+<script>
+export const uiDemo = {
+  description: "Browse every icon available in the project, filter by name, and click to copy its name.",
+  title: "Icon gallery"
+};
+</script>
+
+<script setup>
+import { computed, onBeforeUnmount, ref } from "vue";
+import { iconNames } from "#brickflow-ui-icons";
+import Icon from "./index.vue";
+const search = ref("");
+const copiedIconName = ref("");
+const copyError = ref("");
+let copiedTimeout;
+const filteredIconNames = computed(() => {
+  const query = search.value.trim().toLocaleLowerCase();
+  return query ? iconNames.filter((name) => name.toLocaleLowerCase().includes(query)) : iconNames;
+});
+const copyIconName = async (name) => {
+  copyError.value = "";
+  try {
+    await navigator.clipboard.writeText(name);
+    clearTimeout(copiedTimeout);
+    copiedIconName.value = name;
+    copiedTimeout = setTimeout(() => {
+      copiedIconName.value = "";
+    }, 2e3);
+  } catch {
+    copyError.value = "Could not copy the icon name. Please try again.";
+  }
+};
+onBeforeUnmount(() => clearTimeout(copiedTimeout));
+</script>
+
+<template>
+  <div class="space-y-5 text-zinc-100">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <label class="relative block w-full max-w-md">
+        <span class="sr-only">Search icons</span>
+        <svg
+          class="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-500"
+          aria-hidden="true"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            cx="11"
+            cy="11"
+            r="8"
+          />
+          <path d="m21 21-4.3-4.3" />
+        </svg>
+        <input
+          v-model="search"
+          class="w-full max-w-60 rounded-lg border border-zinc-700 bg-zinc-950 py-2 pr-3 pl-9 text-sm text-zinc-200 caret-blue-400 outline-none placeholder:text-zinc-500 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20"
+          placeholder="Search icon"
+          type="search"
+        />
+      </label>
+
+      <p
+        class="text-sm text-zinc-400"
+        aria-live="polite"
+      >
+        {{ filteredIconNames.length }} of {{ iconNames.length }} icons
+      </p>
+    </div>
+
+    <p
+      class="sr-only"
+      role="status"
+    >
+      {{ copiedIconName ? `Copied ${copiedIconName}` : "" }}
+    </p>
+    <p
+      v-if="copyError"
+      class="text-sm text-red-400"
+      role="alert"
+    >
+      {{ copyError }}
+    </p>
+
+    <ul
+      v-if="filteredIconNames.length"
+      class="grid grid-cols-6 gap-3 lp:grid-cols-5 tb:grid-cols-4 mb:grid-cols-3 ms:grid-cols-2"
+    >
+      <li
+        v-for="name in filteredIconNames"
+        :key="name"
+        class="min-w-0"
+      >
+        <button
+          type="button"
+          :aria-label="`Copy ${name}`"
+          :class="[
+  'group flex w-full cursor-pointer flex-col items-center gap-3 rounded-xl border px-3 py-5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400',
+  copiedIconName === name ? 'border-green-500/50 bg-green-500/10' : 'border-zinc-900 bg-zinc-950/50 hover:border-zinc-700 hover:bg-zinc-900/70'
+]"
+          :title="`Copy ${name}`"
+          @click="copyIconName(name)"
+        >
+          <Icon
+            :name="name"
+            aria-hidden="true"
+            class="text-3xl text-zinc-100"
+          />
+          <span
+            :class="[
+  'w-full truncate text-center font-mono text-xs transition-colors',
+  copiedIconName === name ? 'text-green-400' : 'text-zinc-400 group-hover:text-zinc-100'
+]"
+          >
+            {{ copiedIconName === name ? "Copied" : name }}
+          </span>
+        </button>
+      </li>
+    </ul>
+
+    <div
+      v-else
+      class="rounded-xl border border-dashed border-zinc-700 px-6 py-12 text-center"
+    >
+      <p class="text-sm font-medium text-zinc-200">No icons found</p>
+      <p class="mt-1 text-sm text-zinc-500">Try another name.</p>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Icon/gallery.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=gallery.demo.vue.d.ts.map

package/dist/runtime/composables/useTranslate.js

@@ -13,5 +13,5 @@ export function provideBrickflowConfig(app, config) {
   app.provide(brickflowConfigKey, config);
 }
 export function useTranslate() {
-  return inject(brickflowConfigKey)?.i18n ?? useTranslateFallback();
+  return inject(brickflowConfigKey, void 0)?.i18n ?? useTranslateFallback();
 }

package/dist/runtime/icon-font.d.ts

@@ -1,4 +1,5 @@
 declare module '#brickflow-ui-icons' {
+  export const buttonConfig: import('./components/Button/index.vue').ButtonConfig
   export const firstIconName: string
   export const iconNames: readonly string[]
 }

package/dist/runtime/pages/ui.vue

@@ -425,7 +425,7 @@ watch(
             :key="component.id"
             :aria-current="activeComponent?.id === component.id ? 'page' : void 0"
             :class="[
-  'block rounded-lg px-3 py-2.5 text-sm transition',
+  'block rounded-lg px-3 py-2.5 text-sm font-semibold tracking-wide transition',
   activeComponent?.id === component.id ? 'bg-blue-900 text-blue-100' : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100'
 ]"
             :to="{
@@ -456,7 +456,7 @@ watch(
             :key="component.id"
             :aria-current="activeComponent?.id === component.id ? 'page' : void 0"
             :class="[
-  'block rounded-lg px-3 py-2 text-sm transition',
+  'block rounded-lg px-3 py-2 text-sm font-semibold tracking-wide transition',
   activeComponent?.id === component.id ? 'bg-blue-900 text-blue-100' : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100'
 ]"
             :to="{
@@ -562,7 +562,7 @@ watch(
                 </svg>
               </button>
             </header>
-            <div class="p-8 mb:p-4">
+            <div class="overflow-auto p-8 mb:p-4">
               <component :is="demo.component" />
             </div>
             <div
@@ -726,5 +726,5 @@ watch(
 </style>
 
 <style module>
-:global(.ui-code-comment){color:var(--color-zinc-500)}:global(.ui-code-string){color:var(--color-emerald-400)}:global(.ui-code-keyword){color:var(--color-blue-400)}:global(.ui-code-number){color:var(--color-amber-300)}:global(.ui-code-tag){color:var(--color-cyan-500)}:global(.ui-code-attribute){color:var(--color-violet-300)}:global(.ui-code-punctuation){color:var(--color-zinc-400)}:global(.ui-color-swatch){background:var(--ui-color-swatch);border:1px solid hsla(0,0%,100%,.1);border-radius:.2rem;display:inline-block;height:.65rem;margin-right:.25rem;opacity:.85;vertical-align:-.1rem;width:.65rem}.mobileNavigation{width:min(18rem,calc(100vw - 3rem))}@media (width >= 40rem){.styleGrid{grid-template-columns:minmax(12rem,.8fr) minmax(0,1.8fr)}}.styleValue :global(.ui-code-keyword){color:var(--color-zinc-500)}.styleValue :global(.ui-code-attribute){color:var(--color-zinc-200)}.styleValue :global(.ui-code-string){color:var(--color-zinc-300)}.styleValue :global(.ui-code-number){color:var(--color-zinc-400)}.styleValue :global(.ui-code-punctuation){color:var(--color-zinc-500)}
+:global(.ui-code-comment){color:var(--color-zinc-500,#71717a)}:global(.ui-code-string){color:var(--color-emerald-400,#34d399)}:global(.ui-code-keyword){color:var(--color-blue-400,#60a5fa)}:global(.ui-code-number){color:var(--color-amber-300,#fcd34d)}:global(.ui-code-tag){color:var(--color-cyan-500,#22d3ee)}:global(.ui-code-attribute){color:var(--color-violet-300,#c4b5fd)}:global(.ui-code-punctuation){color:var(--color-zinc-400,#a1a1aa)}:global(.ui-color-swatch){background:var(--ui-color-swatch);border:1px solid hsla(0,0%,100%,.1);border-radius:.2rem;display:inline-block;height:.65rem;margin-right:.25rem;opacity:.85;vertical-align:-.1rem;width:.65rem}.mobileNavigation{width:min(18rem,calc(100vw - 3rem))}@media (width >= 40rem){.styleGrid{grid-template-columns:minmax(12rem,.8fr) minmax(0,1.8fr)}}.styleValue :global(.ui-code-keyword){color:var(--color-zinc-500,#71717a)}.styleValue :global(.ui-code-attribute){color:var(--color-zinc-200,#e4e4e7)}.styleValue :global(.ui-code-string){color:var(--color-zinc-300,#d4d4d8)}.styleValue :global(.ui-code-number){color:var(--color-zinc-400,#a1a1aa)}.styleValue :global(.ui-code-punctuation){color:var(--color-zinc-500,#71717a)}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -41,11 +41,11 @@
   "devDependencies": {
     "@brickflow/lint": "workspace:*",
     "@brickflow/prettier": "workspace:*",
-    "@nuxt/kit": "4.5.1",
+    "@nuxt/kit": "4.5.2",
     "@nuxt/module-builder": "1.0.3",
-    "nuxt": "4.5.1",
-    "vue": "3.5.40",
-    "vue-tsc": "3.3.9"
+    "nuxt": "4.5.2",
+    "vue": "3.5.42",
+    "vue-tsc": "3.3.11"
   },
   "author": "",
   "license": "ISC"