@brickflow/ui 0.0.40 → 0.0.41

package/dist/module.json

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

package/dist/module.mjs

@@ -750,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] ?? "")}`,
           ""

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/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

@@ -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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.40",
+  "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"