@brickflow/ui 0.0.40 → 0.0.43

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.40",
+  "version": "0.0.43",
   "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

@@ -1,13 +1,14 @@
-<script>
-export const uiDemo = {
-  description: "Set leadingIcon and trailingIcon to an icon name. Slots take precedence when both are provided.",
-  title: "Icons"
-};
+<script lang="ts">
+  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 lang="ts" setup>
+  import { firstIconName } from '#brickflow-ui-icons'
+
+  import Button from './index.vue'
 </script>
 
 <template>
@@ -17,7 +18,6 @@ import Button from "./index.vue";
     <Button
       :icon="firstIconName"
       :trailingIcon="firstIconName"
-      variant="soft"
     >
       View profile
     </Button>

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

@@ -1,53 +1,79 @@
-<script>
-const UI_CONFIG = defineUiConfig();
+<script lang="ts">
+  const UI_CONFIG = defineUiConfig<{
+    colorClasses: Record<string, Record<string, string>>
+    colorDefault: string
+    loadingIconName: string
+    sizeClasses: Record<string, string>
+    sizeDefault: string
+    sizeIconClasses: Record<string, string>
+    variantDefault: string
+  }>()
+
+  export type ButtonConfig = typeof UI_CONFIG
 </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: 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: 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: UI_CONFIG.variantDefault }
-});
-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 component = computed(() => props.to === void 0 ? "button" : BaseLink);
-const disabled = computed(() => props.disabled || props.loading);
-const isButton = computed(() => props.to === void 0);
-const classes = computed(() => [
-  UI_STYLE.base,
-  sizeClasses[props.size],
-  colorClasses[props.color][props.variant],
-  props.block && UI_STYLE.state.block,
-  props.square && UI_STYLE.state.square,
-  disabled.value && UI_STYLE.state.disabled
-]);
-const isAnimating = shallowRef(false);
-const animationTapClass = UI_STYLE.animationTap;
-function handleTap() {
-  isAnimating.value = false;
-  requestAnimationFrame(() => {
-    isAnimating.value = true;
-  });
-}
+<script setup lang="ts">
+  import type { RouteLocationRaw } from 'vue-router'
+
+  import { computed, shallowRef } from 'vue'
+
+  import Icon from '../Icon/index.vue'
+  import BaseLink from '../Link/index.vue'
+  const props = withDefaults(
+    defineProps<{
+      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
+    }>(),
+    {
+      color: UI_CONFIG.colorDefault,
+      icon: undefined,
+      rounded: false,
+      size: UI_CONFIG.sizeDefault,
+      to: undefined,
+      trailingIcon: undefined,
+      type: 'button',
+      variant: UI_CONFIG.variantDefault,
+    },
+  )
+
+  const colorClasses = UI_CONFIG.colorClasses
+  const sizeClasses = UI_CONFIG.sizeClasses
+  const sizeIconClasses = UI_CONFIG.sizeIconClasses
+  type ButtonColor = Extract<keyof typeof colorClasses, string>
+  type ButtonSize = Extract<keyof typeof sizeClasses, string>
+  type ButtonVariant = Extract<keyof (typeof colorClasses)[ButtonColor], string>
+
+  const component = computed(() => (props.to === undefined ? 'button' : BaseLink))
+  const disabled = computed(() => props.disabled || props.loading)
+  const isButton = computed(() => props.to === undefined)
+  const classes = computed(() => [
+    UI_STYLE.base,
+    sizeClasses[props.size],
+    colorClasses[props.color][props.variant],
+    props.block && UI_STYLE.state.block,
+    props.square && UI_STYLE.state.square,
+    disabled.value && UI_STYLE.state.disabled,
+  ])
+
+  const isAnimating = shallowRef(false)
+  const animationTapClass = UI_STYLE.animationTap
+  function handleTap(): void {
+    isAnimating.value = false
+
+    requestAnimationFrame(() => {
+      isAnimating.value = true
+    })
+  }
 </script>
 
 <template>
@@ -55,16 +81,16 @@ function handleTap() {
     :is="component"
     v-bind="animationTapClass ? { onPointerupPassive: handleTap } : {}"
     :to="props.to"
-    :type="isButton ? props.type : void 0"
-    :disabled="isButton ? disabled : void 0"
-    :aria-busy="props.loading || void 0"
-    :aria-disabled="disabled || void 0"
-    :tabindex="disabled && !isButton ? -1 : void 0"
+    :type="isButton ? props.type : undefined"
+    :disabled="isButton ? disabled : undefined"
+    :aria-busy="props.loading || undefined"
+    :aria-disabled="disabled || undefined"
+    :tabindex="disabled && !isButton ? -1 : undefined"
     :class="[classes, isAnimating && animationTapClass]"
     data-testid="ui-button"
     :style="{
-  borderRadius: props.rounded && '99999px'
-}"
+      borderRadius: props.rounded && '99999px',
+    }"
     @contextmenu.prevent
   >
     <span
@@ -80,7 +106,7 @@ function handleTap() {
         />
         <Icon
           v-else
-          :name="props.icon"
+          :name="props.icon!"
           :class="sizeIconClasses[props.size]"
           aria-hidden="true"
         />
@@ -100,7 +126,7 @@ function handleTap() {
     >
       <slot name="trailing">
         <Icon
-          :name="props.trailingIcon"
+          :name="props.trailingIcon!"
           :class="sizeIconClasses[props.size]"
           aria-hidden="true"
         />

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

@@ -1,78 +1,47 @@
-<script>
-export const uiDemo = {
-  title: "Size & Rounded"
-};
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Size & Rounded',
+  }
 </script>
 
-<script setup>
-import { firstIconName } from "#brickflow-ui-icons";
-import Button from "./index.vue";
+<script lang="ts" setup>
+  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/slots.demo.vue

@@ -1,13 +1,15 @@
-<script>
-export const uiDemo = {
-  title: "Slots"
-};
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Slots',
+  }
 </script>
 
-<script setup>
-import { ref } from "vue";
-import Button from "./index.vue";
-const clicks = ref(0);
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import Button from './index.vue'
+
+  const clicks = ref(0)
 </script>
 
 <template>

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

@@ -1,17 +1,67 @@
-<script>
-export const uiDemo = {
-  title: "State"
-};
+<script lang="ts">
+  export const uiDemo = {
+    title: 'State',
+  }
 </script>
 
-<script setup>
-import Button from "./index.vue";
+<script lang="ts" 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

@@ -1,17 +1,15 @@
-<script>
-export const uiDemo = {
-  title: "Color & Variants"
-};
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Color & Variants',
+  }
 </script>
 
-<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 lang="ts" setup>
+  import { buttonConfig } from '#brickflow-ui-icons'
+
+  import Button from './index.vue'
+
+  const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {}
 </script>
 
 <template>
@@ -22,26 +20,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/basic.demo.vue

@@ -1,15 +1,18 @@
-<script>
-export const uiDemo = {
-  description: "The name matches the SVG filename without its extension.",
-  title: "Basic usage"
-};
+<script lang="ts">
+  export const uiDemo = {
+    description: 'The name matches the SVG filename without its extension.',
+    title: 'Basic usage',
+  }
 </script>
 
-<script setup>
-import { ref } from "vue";
-import { firstIconName } from "#brickflow-ui-icons";
-import Icon from "./index.vue";
-const iconName = ref(firstIconName);
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import { firstIconName } from '#brickflow-ui-icons'
+
+  import Icon from './index.vue'
+
+  const iconName = ref(firstIconName)
 </script>
 
 <template>

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

@@ -0,0 +1,142 @@
+<script lang="ts">
+  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 lang="ts" 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: ReturnType<typeof setTimeout> | undefined
+
+  const filteredIconNames = computed(() => {
+    const query = search.value.trim().toLocaleLowerCase()
+
+    return query ? iconNames.filter((name) => name.toLocaleLowerCase().includes(query)) : iconNames
+  })
+
+  const copyIconName = async (name: string): Promise<void> => {
+    copyError.value = ''
+
+    try {
+      await navigator.clipboard.writeText(name)
+      clearTimeout(copiedTimeout)
+      copiedIconName.value = name
+      copiedTimeout = setTimeout(() => {
+        copiedIconName.value = ''
+      }, 2000)
+    } 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>