@brickflow/ui 0.0.52 → 0.0.54

package/dist/module.json

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

package/dist/module.mjs

@@ -265,7 +265,6 @@ const collectUiStylePathsFromCode = (code) => {
   }
   return paths.filter((path) => path.length > 0);
 };
-const collectUiStyleConfigPathsFromCode = (code, id) => collectUiStylePathsFromCode(code).map((path) => resolveUiStyleConfigPath(id, path));
 const collectUiConfigValuePaths = (value, prefix) => {
   if (typeof value === "string" || isBrickflowUiStyleReference(value)) {
     return [prefix];
@@ -345,18 +344,31 @@ const collectUiConfigSchemaEntriesFromCode = (code, id) => {
   }
   return entries;
 };
-const collectUiConfigStyleReferencePathsFromValue = (value, componentPath) => {
-  if (isBrickflowUiStyleReference(value)) {
-    return [[...componentPath, ...getBrickflowUiStyleReferencePath(value)]];
-  }
-  if (typeof value === "string") {
-    return [];
+const collectUiStylePathsWithConfig = (code, id, config) => {
+  const [componentName] = resolveUiStyleConfigPath(id, []);
+  const componentConfig = componentName ? config[componentName] : void 0;
+  const configReferences = [];
+  const addConfigReferences = (value, configPath = []) => {
+    if (isBrickflowUiStyleReference(value)) {
+      const referencePath = getBrickflowUiStyleReferencePath(value);
+      configReferences.push(`UI_STYLE.${referencePath.join(".")}`);
+      if (configPath.length >= 2 && referencePath.length >= configPath.length) {
+        const prefixLength = referencePath.length - configPath.length + 1;
+        const requiredPath = [...referencePath.slice(0, prefixLength), ...configPath.slice(1)];
+        configReferences.push(`UI_STYLE.${requiredPath.join(".")}`);
+      }
+    } else if (typeof value !== "string") {
+      for (const [key, childValue] of Object.entries(value)) {
+        addConfigReferences(childValue, [...configPath, key]);
+      }
+    }
+  };
+  if (componentConfig) {
+    addConfigReferences(componentConfig);
   }
-  return Object.values(value).flatMap(
-    (childValue) => collectUiConfigStyleReferencePathsFromValue(childValue, componentPath)
-  );
+  return collectUiStylePathsFromCode(`${configReferences.join("\n")}
+${code}`);
 };
-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) {
@@ -575,10 +587,7 @@ const toComponentStyleKey = (path) => {
   const componentName = basename(dirname(path));
   return `${componentName[0]?.toLowerCase()}${componentName.slice(1)}`;
 };
-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 collectComponentStyleValues = (source, componentPath, config) => collectUiStylePathsWithConfig(source, componentPath, config.uiConfig).map((path) => path.join(".")).filter(Boolean).filter((path, index, paths) => paths.indexOf(path) === index).sort().map((path) => {
   const segments = path.split(".");
   const componentValue = readObjectPath(config.uiStyles, [toComponentStyleKey(componentPath), ...segments]);
   const globalValue = readObjectPath(config.uiStyles, segments);
@@ -736,15 +745,14 @@ const module$1 = defineNuxtModule({
         }))
       );
       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)
+      const stylePaths = fileContents.map(({ content, file }) => ({
+        file,
+        paths: collectUiStylePathsWithConfig(content, file, uiConfig)
+      }));
+      const paths = stylePaths.flatMap(({ paths: componentPaths }) => componentPaths);
+      const configPaths = stylePaths.flatMap(
+        ({ file, paths: componentPaths }) => componentPaths.map((path) => resolveUiStyleConfigPath(file, path))
       );
-      configPaths.push(...uiConfigStyleReferencePaths);
       const uiConfigPaths = fileContents.flatMap(
         ({ content, file }) => collectUiConfigPathsFromCode(content, file, uiConfig)
       );
@@ -783,15 +791,14 @@ const module$1 = defineNuxtModule({
     });
     nuxt.hook("prepare:types", ({ references }) => {
       references.push({ path: resolver.resolve("./runtime/config.d.ts") });
+      references.push({ path: resolver.resolve("./runtime/ui-config.d.ts") });
+      references.push({ path: resolver.resolve("./runtime/brickflow-ui.d.ts") });
     });
     const iconFontTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-icons.mjs",
       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] ?? "")}`,
           ""
@@ -814,6 +821,14 @@ const module$1 = defineNuxtModule({
         ""
       ].join("\n")
     });
+    const brickflowUiTemplate = addTemplate({
+      filename: "brickflow/brickflow-ui.mjs",
+      getContents: () => [
+        "export { UI_CONFIG, UI_STYLE, uiConfig, uiStyles } from './brickflow-ui-config.mjs'",
+        "export { firstIconName, iconNames } from './brickflow-ui-icons.mjs'",
+        ""
+      ].join("\n")
+    });
     const uiOptionsTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-options.mjs",
       getContents: () => `export const uiThemeEnabled = ${JSON.stringify(options.theme === true)}
@@ -909,6 +924,7 @@ const module$1 = defineNuxtModule({
         ].join("\n");
       }
     });
+    nuxt.options.alias["#brickflow-ui"] = brickflowUiTemplate.dst;
     nuxt.options.alias["#brickflow-ui-config"] = uiConfigTemplate.dst;
     nuxt.options.alias["#brickflow-ui-catalog"] = uiCatalogTemplate.dst;
     nuxt.options.alias["#brickflow-ui-icons"] = iconFontTemplate.dst;

package/dist/runtime/brickflow-ui.d.ts

@@ -0,0 +1,4 @@
+declare module '#brickflow-ui' {
+  export { UI_CONFIG, UI_STYLE, uiConfig, uiStyles } from '#brickflow-ui-config'
+  export { firstIconName, iconNames } from '#brickflow-ui-icons'
+}

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

@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts" setup>
-  import { firstIconName } from '#brickflow-ui-icons'
+  import { firstIconName } from '#brickflow-ui'
 
   import Button from './index.vue'
 </script>

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

@@ -21,6 +21,8 @@
 
   import Icon from '../Icon/index.vue'
   import BaseLink from '../Link/index.vue'
+  import TransitionSize from '../TransitionSize/index.vue'
+
   const props = withDefaults(
     defineProps<{
       block?: boolean
@@ -57,6 +59,8 @@
   type ButtonSize = Extract<keyof typeof sizeClasses, string>
   type ButtonVariant = Extract<keyof (typeof colorClasses)[ButtonColor], string>
 
+  const baseRef = shallowRef()
+
   const isButton = computed(() => props.to === undefined)
   const component = computed(() => (isButton.value ? 'button' : BaseLink))
   const disabled = computed(() => props.disabled || props.loading)
@@ -82,6 +86,7 @@
 <template>
   <component
     :is="component"
+    ref="baseRef"
     v-bind="animationTapClass ? { onPointerupPassive: handleTap } : {}"
     :to="props.to"
     :target="isButton ? undefined : props.target"
@@ -97,7 +102,23 @@
     }"
     @contextmenu.prevent
   >
+    <TransitionSize
+      v-if="!$slots.leading && !props.icon && !props.trailingIcon"
+      dimension="width"
+      :flexParent="baseRef?.$el || baseRef"
+      flexDirection="start"
+    >
+      <span v-if="props.loading">
+        <Icon
+          :name="UI_CONFIG.loadingIconName"
+          :class="[UI_STYLE.state.loading, sizeIconClasses[props.size]]"
+          aria-hidden="true"
+        />
+      </span>
+    </TransitionSize>
+
     <Transition
+      v-if="$slots.leading || props.icon"
       :name="UI_CONFIG.loadingIconTransition"
       mode="out-in"
     >
@@ -109,7 +130,7 @@
         />
       </span>
       <span
-        v-else-if="$slots.leading || props.icon"
+        v-else
         :class="UI_STYLE.slot.leading"
       >
         <slot name="leading">
@@ -129,17 +150,30 @@
       <slot />
     </span>
 
-    <span
+    <Transition
       v-if="$slots.trailing || props.trailingIcon"
-      :class="UI_STYLE.slot.trailing"
+      :name="UI_CONFIG.loadingIconTransition"
+      mode="out-in"
     >
-      <slot name="trailing">
+      <span v-if="props.loading && !props.icon">
         <Icon
-          :name="props.trailingIcon!"
-          :class="sizeIconClasses[props.size]"
+          :name="UI_CONFIG.loadingIconName"
+          :class="[UI_STYLE.state.loading, sizeIconClasses[props.size]]"
           aria-hidden="true"
         />
-      </slot>
-    </span>
+      </span>
+      <span
+        v-else
+        :class="UI_STYLE.slot.trailing"
+      >
+        <slot name="trailing">
+          <Icon
+            :name="props.trailingIcon!"
+            :class="sizeIconClasses[props.size]"
+            aria-hidden="true"
+          />
+        </slot>
+      </span>
+    </Transition>
   </component>
 </template>

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

@@ -5,9 +5,11 @@
 </script>
 
 <script lang="ts" setup>
-  import { buttonConfig, firstIconName } from '#brickflow-ui-icons'
+  import { firstIconName, uiConfig } from '#brickflow-ui'
 
   import Button from './index.vue'
+
+  const buttonConfig = uiConfig.button
 </script>
 
 <template>

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

@@ -7,11 +7,12 @@
 <script lang="ts" setup>
   import { ref } from 'vue'
 
-  import { buttonConfig, firstIconName } from '#brickflow-ui-icons'
+  import { firstIconName, uiConfig } from '#brickflow-ui'
 
   import Button from './index.vue'
 
-  const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {}
+  const buttonConfig = uiConfig.button
+  const firstColorClasses = buttonConfig.colorClasses[buttonConfig.colorDefault]
 
   const stateActive = ref(true)
 </script>

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

@@ -5,11 +5,12 @@
 </script>
 
 <script lang="ts" setup>
-  import { buttonConfig } from '#brickflow-ui-icons'
+  import { uiConfig } from '#brickflow-ui'
 
   import Button from './index.vue'
 
-  const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {}
+  const buttonConfig = uiConfig.button
+  const firstColorClasses = buttonConfig.colorClasses[buttonConfig.colorDefault]
 </script>
 
 <template>

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

@@ -8,7 +8,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue'
 
-  import { firstIconName } from '#brickflow-ui-icons'
+  import { firstIconName } from '#brickflow-ui'
 
   import Icon from './index.vue'
 

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

@@ -8,7 +8,7 @@
 <script lang="ts" setup>
   import { computed, onBeforeUnmount, ref } from 'vue'
 
-  import { iconNames } from '#brickflow-ui-icons'
+  import { iconNames } from '#brickflow-ui'
 
   import Icon from './index.vue'
 

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

@@ -1,10 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
 
-  defineOptions({
-    inheritAttrs: false,
-  })
-
   const props = withDefaults(
     defineProps<{
       name: string
@@ -17,7 +13,6 @@
 
 <template>
   <i
-    v-bind="$attrs"
     :class="classes"
     role="img"
   />

package/dist/runtime/components/Input/align.demo.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Alignment',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { capitalize } from 'vue'
+
+  import Input from './index.vue'
+
+  const alignments = ['left', 'center', 'right'] as const
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-3">
+    <Input
+      v-for="align in alignments"
+      :key="align"
+      :align="align"
+      :label="`${capitalize(align)} aligned`"
+      placeholder="Type here"
+    />
+  </div>
+</template>

package/dist/runtime/components/Input/auto-width.demo.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Auto Width',
+  }
+</script>
+
+<script lang="ts" setup>
+  import Input from './index.vue'
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <Input
+      placeholder="Type here"
+      label="Auto Width"
+      autoWidth
+      class="max-w-sm"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,317 @@
+<script lang="ts">
+  const UI_CONFIG = defineUiConfig<{
+    hidePasswordIconName: string
+    searchClearIconName: string
+    showPasswordIconName: string
+    sizeClasses: Record<
+      string,
+      {
+        description: string
+        field: string
+        fieldWrap: string
+        icon: string
+        label: string
+      }
+    >
+    sizeDefault: string
+    variantClasses: Record<
+      string,
+      {
+        description: string
+        field: string
+        fieldWrap: string
+        icon: string
+        label: string
+      }
+    >
+    variantDefault: string
+  }>()
+
+  export type InputConfig = typeof UI_CONFIG
+</script>
+
+<script setup lang="ts">
+  import { twMerge } from 'tailwind-merge'
+  import { computed, ref, shallowRef, useAttrs, useId, useSlots, watch } from 'vue'
+
+  import Icon from '../Icon/index.vue'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      align?: 'center' | 'left' | 'right'
+      autoWidth?: boolean
+      description?: string
+      disabled?: boolean
+      icon?: string
+      label?: string
+      onBlur?: (value: null | string, target: HTMLInputElement) => void
+      onFocus?: (value: null | string, target: HTMLInputElement | null) => void
+      onIconClick?: () => void
+      onTrailingIconClick?: () => void
+      onValueChange?: (value: null | string, target: HTMLInputElement) => void
+      onValueInput?: (value: null | string, target: HTMLInputElement | null) => void
+      placeholder?: string
+      readonly?: boolean
+      size?: InputSize
+      trailingIcon?: string
+      type?: 'decimal' | 'email' | 'numeric' | 'password' | 'search' | 'tel' | 'text' | 'url'
+      value?: null | string
+      variant?: InputVariant
+    }>(),
+    {
+      align: 'left',
+      autoWidth: false,
+      description: undefined,
+      disabled: false,
+      icon: undefined,
+      label: undefined,
+      onBlur: undefined,
+      onFocus: undefined,
+      onIconClick: undefined,
+      onTrailingIconClick: undefined,
+      onValueChange: undefined,
+      onValueInput: undefined,
+      placeholder: '',
+      readonly: false,
+      size: 'md',
+      trailingIcon: undefined,
+      type: 'text',
+      value: undefined,
+      variant: UI_CONFIG.variantDefault,
+    },
+  )
+
+  const model = shallowRef<null | string>('')
+  // const model = defineModel<null | number | string>({ default: '' })
+
+  const attrs = useAttrs()
+  const slots = useSlots()
+  const generatedId = useId()
+  const inputRef = ref<HTMLInputElement | null>(null)
+  const widthMeasureRef = ref<HTMLSpanElement | null>(null)
+  const measuredWidth = ref(0)
+  const hasFocus = ref(false)
+  const showPassword = ref(false)
+
+  const sizeClasses = UI_CONFIG.sizeClasses
+  const variantClasses = UI_CONFIG.variantClasses
+  type InputSize = Extract<keyof typeof sizeClasses, string>
+  type InputVariant = Extract<keyof typeof variantClasses, string>
+  const sizeClass = computed(() => sizeClasses[props.size])
+  const variantClass = computed(() => variantClasses[props.variant])
+
+  const fieldId = computed(() => String(attrs.id ?? generatedId))
+  const descriptionId = computed(() => `${fieldId.value}-description`)
+  const currentValue = computed(() => (props.value === undefined ? model.value : props.value))
+  const widthMeasureText = computed(() => currentValue.value || props.placeholder || ' ')
+  const isEmptyField = computed(() => {
+    return Boolean(currentValue.value)
+  })
+
+  const hasDescription = computed(() => Boolean(props.description || slots.description || slots.error))
+  const inputType = computed(() => {
+    return props.type === 'password' && !showPassword.value ? 'password' : 'text'
+  })
+  const classes = computed(() => [
+    UI_STYLE.base,
+    props.autoWidth && UI_STYLE.state.autoWidth,
+    props.disabled && UI_STYLE.state.disabled,
+  ])
+  const fieldWrapClasses = computed(() => [
+    twMerge(UI_STYLE.fieldWrap, sizeClass.value.fieldWrap, variantClass.value.fieldWrap),
+    props.readonly && UI_STYLE.state.readonly,
+  ])
+  const fieldClasses = computed(() => [
+    twMerge(UI_STYLE.field, sizeClass.value.field, variantClass.value.field),
+    props.align === 'center' && UI_STYLE.align.center,
+    props.align === 'right' && UI_STYLE.align.right,
+    props.autoWidth && UI_STYLE.state.autoWidthField,
+  ])
+  const labelClasses = computed(() => twMerge(UI_STYLE.label, sizeClass.value.label, variantClass.value.label))
+  const descriptionClasses = computed(() =>
+    twMerge(UI_STYLE.description, sizeClass.value.description, variantClass.value.description),
+  )
+  const leadingIconClasses = computed(() =>
+    twMerge(
+      UI_STYLE.slot.leading,
+      sizeClass.value.icon,
+      variantClass.value.icon,
+      props.onIconClick && UI_STYLE.slot.hasAction,
+    ),
+  )
+  const trailingIconClasses = computed(() =>
+    twMerge(
+      UI_STYLE.slot.trailing,
+      sizeClass.value.icon,
+      variantClass.value.icon,
+      props.onTrailingIconClick && UI_STYLE.slot.hasAction,
+    ),
+  )
+  const fieldStyle = computed(() =>
+    props.autoWidth ? { flexShrink: 1, maxWidth: '100%', width: `${measuredWidth.value}px` } : { undefined },
+  )
+
+  watch(
+    [widthMeasureText, () => props.autoWidth, () => props.size, () => props.variant, widthMeasureRef],
+    () => {
+      if (props.autoWidth && widthMeasureRef.value) {
+        measuredWidth.value = Math.ceil(widthMeasureRef.value.getBoundingClientRect().width) + 2
+      }
+    },
+    { flush: 'post', immediate: true },
+  )
+
+  function clear(): void {
+    setValue('')
+    focus()
+  }
+
+  function focus(): void {
+    inputRef.value?.focus()
+  }
+
+  function handleBlur(event: FocusEvent): void {
+    hasFocus.value = false
+    props.onBlur?.(currentValue.value, event.target as HTMLInputElement)
+  }
+
+  function handleFocus(event: FocusEvent): void {
+    hasFocus.value = true
+    props.onFocus?.(currentValue.value, event.target as HTMLInputElement)
+  }
+
+  function onChange(event: Event): void {
+    const target = event.target as HTMLInputElement
+    props.onValueChange?.(target.value, target)
+  }
+
+  function onInput(event: Event): void {
+    setValue((event.target as HTMLInputElement).value)
+  }
+
+  function setValue(value: null | string): void {
+    model.value = value
+    props.onValueInput?.(value, inputRef.value)
+  }
+
+  defineExpose({ clear, fieldId, focus, hasFocus, inputRef })
+</script>
+
+<template>
+  <div :class="[classes, $attrs.class]">
+    <label
+      v-if="props.label || $slots.label"
+      :for="fieldId"
+      :class="labelClasses"
+    >
+      <slot name="label">{{ props.label }}</slot>
+    </label>
+
+    <label
+      :for="fieldId"
+      :class="fieldWrapClasses"
+      :style="props.autoWidth ? { maxWidth: '100%', width: 'fit-content' } : undefined"
+    >
+      <span
+        v-if="props.autoWidth"
+        ref="widthMeasureRef"
+        aria-hidden="true"
+        :class="[fieldClasses, 'pointer-events-none invisible absolute w-max whitespace-pre']"
+      >
+        {{ widthMeasureText }}
+      </span>
+      <slot name="leading">
+        <component
+          :is="props.onIconClick ? 'button' : 'label'"
+          v-if="props.icon"
+          type="button"
+          :for="fieldId"
+          :disabled="props.disabled || !props.onIconClick"
+          :class="leadingIconClasses"
+          @click="props.onIconClick?.()"
+        >
+          <Icon
+            :name="props.icon"
+            aria-hidden="true"
+          />
+        </component>
+      </slot>
+
+      <input
+        v-bind="{ ...$attrs, class: undefined, id: undefined }"
+        :id="fieldId"
+        ref="inputRef"
+        :value="currentValue"
+        :type="inputType"
+        :inputmode="props.type === 'password' ? undefined : props.type"
+        :disabled="props.disabled"
+        :readonly="props.readonly"
+        :placeholder="props.placeholder"
+        :aria-describedby="hasDescription ? descriptionId : undefined"
+        :class="fieldClasses"
+        :style="fieldStyle"
+        @input="onInput"
+        @change="onChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+
+      <button
+        v-if="props.type === 'password'"
+        type="button"
+        :disabled="props.disabled"
+        :class="[trailingIconClasses, UI_STYLE.slot.hasAction]"
+        :aria-label="showPassword ? 'Hide password' : 'Show password'"
+        @click="showPassword = !showPassword"
+      >
+        <Icon
+          :name="showPassword ? UI_CONFIG.hidePasswordIconName : UI_CONFIG.showPasswordIconName"
+          aria-hidden="true"
+        />
+      </button>
+      <button
+        v-else-if="props.type === 'search' && isEmptyField"
+        type="button"
+        :disabled="props.disabled || props.readonly"
+        :class="[trailingIconClasses, UI_STYLE.slot.hasAction]"
+        aria-label="Clear search"
+        @click="clear"
+      >
+        <Icon
+          :name="UI_CONFIG.searchClearIconName"
+          aria-hidden="true"
+        />
+      </button>
+      <slot
+        v-else
+        name="trailing"
+      >
+        <component
+          :is="props.onTrailingIconClick ? 'button' : 'label'"
+          v-if="props.trailingIcon"
+          type="button"
+          :for="fieldId"
+          :disabled="props.disabled || !props.onTrailingIconClick"
+          :class="trailingIconClasses"
+          @click="props.onTrailingIconClick?.()"
+        >
+          <Icon
+            :name="props.trailingIcon"
+            aria-hidden="true"
+          />
+        </component>
+      </slot>
+    </label>
+
+    <div
+      v-if="hasDescription"
+      :id="descriptionId"
+      :class="descriptionClasses"
+    >
+      <slot name="error" />
+      <slot name="description">{{ props.description }}</slot>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Input/label.demo.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Label & Description, Placeholder',
+  }
+</script>
+
+<script lang="ts" setup>
+  import Input from './index.vue'
+</script>
+
+<template>
+  <div class="max-w-sm">
+    <Input
+      label="Email address"
+      description="We will use this address to contact you."
+      placeholder="name@example.com"
+      type="email"
+    />
+  </div>
+</template>

package/dist/runtime/components/Input/readonly.demo.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Read-only & Slot',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { firstIconName } from '#brickflow-ui'
+
+  import Input from './index.vue'
+</script>
+
+<template>
+  <div class="max-w-sm">
+    <Input
+      label="Read-only value"
+      value="You can select this text"
+      :trailingIcon="firstIconName"
+      readonly
+    >
+      <template #trailing>
+        <div class="h-full bg-red-900 text-red-300">SLOT TEXT</div>
+      </template>
+    </Input>
+  </div>
+</template>

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Sizes & Icons',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { firstIconName, uiConfig } from '#brickflow-ui'
+
+  import Button from '../Button/index.vue'
+  import Input from './index.vue'
+
+  const inputConfig = uiConfig.input
+
+  function copy(): void {
+    console.log('Click')
+  }
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div
+      v-for="(_, size) in inputConfig.sizeClasses"
+      :key="size"
+      class="grid gap-x-2 gap-y-1.5"
+      style="grid-template-columns: minmax(0, 24rem) max-content; grid-template-rows: repeat(3, auto)"
+    >
+      <Input
+        :size="size"
+        :icon="firstIconName"
+        :trailingIcon="firstIconName"
+        description="Some text description"
+        placeholder="Type here"
+        :label="`Size: ${size}`"
+        class="row-span-3 grid! grid-rows-subgrid"
+        @iconClick="copy"
+      />
+      <Button
+        :size="size"
+        class="col-start-2 row-start-2 self-center"
+      >
+        Button
+      </Button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Input/type.demo.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Input Types',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { capitalize } from 'vue'
+
+  import Input from './index.vue'
+
+  const types = ['text', 'email', 'decimal', 'numeric', 'password', 'search', 'tel', 'url'] as const
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-3">
+    <Input
+      v-for="type in types"
+      :key="type"
+      :type="type"
+      :label="capitalize(type)"
+      :placeholder="`Enter ${type}`"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Variants & Disabled',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { uiConfig } from '#brickflow-ui'
+
+  import Input from './index.vue'
+
+  const inputConfig = uiConfig.input
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <div
+      v-for="(_, variant) in inputConfig.variantClasses"
+      :key="variant"
+      class="flex flex-col gap-3"
+    >
+      <Input
+        :variant="variant"
+        :label="`Variant ${variant}`"
+        placeholder="Type here"
+      />
+      <Input
+        :variant="variant"
+        :label="`Disabled ${variant}`"
+        value="Unavailable"
+        disabled
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/InputNumber/basic.demo.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Number & Bounds',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const quantity = ref<null | number>(null)
+  const price = ref<null | number>(25)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      v-model="quantity"
+      label="Quantity"
+      description="Use ↑ and ↓ to change by one."
+      :min="0"
+      :max="20"
+      block
+    />
+    <InputNumber
+      v-model="price"
+      label="Price"
+      description="Changes in steps of five."
+      :min="0"
+      :max="100"
+      :step="5"
+      block
+    />
+    <p class="text-sm text-gray-400">Quantity: {{ quantity ?? '—' }} · Price: {{ price ?? '—' }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+
+  import Input from '../Input/index.vue'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      max?: number
+      min?: number
+      onValueChange?: (value: null | number, target: HTMLInputElement) => void
+      onValueInput?: (value: null | number, target: HTMLInputElement | null) => void
+      step?: number
+      value?: null | number
+    }>(),
+    {
+      max: undefined,
+      min: undefined,
+      onValueChange: undefined,
+      onValueInput: undefined,
+      step: 1,
+      value: undefined,
+    },
+  )
+
+  const model = defineModel<null | number>({ default: null })
+  const rawValue = ref<null | string>(null)
+  const currentValue = computed(() => (props.value === undefined ? model.value : props.value))
+  const inputValue = computed(
+    () => rawValue.value ?? (currentValue.value === null ? '' : String(currentValue.value)),
+  )
+
+  function clamp(value: number): number {
+    return Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, value))
+  }
+
+  function handleBlur(): void {
+    rawValue.value = null
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      return
+    }
+
+    event.preventDefault()
+    const next = (currentValue.value ?? 0) + (event.key === 'ArrowUp' ? props.step : -props.step)
+    const value = clamp(next)
+    rawValue.value = String(value)
+    model.value = value
+    props.onValueInput?.(value, event.target as HTMLInputElement)
+  }
+
+  function handleValueChange(value: null | string, target: HTMLInputElement): void {
+    const parsed = toNumber(value)
+    const bounded = parsed === null ? null : clamp(parsed)
+    rawValue.value = null
+    model.value = bounded
+    props.onValueChange?.(bounded, target)
+  }
+
+  function handleValueInput(value: null | string, target: HTMLInputElement | null): void {
+    rawValue.value = value ?? ''
+    const number = toNumber(value)
+    model.value = number
+    props.onValueInput?.(number, target)
+  }
+
+  function toNumber(value: null | string): null | number {
+    if (value === null || value.trim() === '') {
+      return null
+    }
+
+    const number = Number(value.replace(',', '.'))
+    return Number.isFinite(number) ? number : null
+  }
+</script>
+
+<template>
+  <Input
+    v-bind="{
+      ...$attrs,
+      onValueInput: handleValueInput,
+      onValueChange: handleValueChange,
+      onBlur: handleBlur,
+      onKeydown: handleKeydown,
+    }"
+    :value="inputValue"
+    type="decimal"
+    :min="props.min"
+    :max="props.max"
+    :step="props.step"
+  >
+    <template
+      v-if="$slots.label"
+      #label
+    >
+      <slot name="label" />
+    </template>
+    <template
+      v-if="$slots.left"
+      #left
+    >
+      <slot name="left" />
+    </template>
+    <template
+      v-if="$slots.right"
+      #right
+    >
+      <slot name="right" />
+    </template>
+    <template
+      v-if="$slots.error"
+      #error
+    >
+      <slot name="error" />
+    </template>
+    <template
+      v-if="$slots.description"
+      #description
+    >
+      <slot name="description" />
+    </template>
+  </Input>
+</template>

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

@@ -0,0 +1,121 @@
+<template>
+  <Transition
+    :name="props.name"
+    :mode="props.mode"
+    @beforeEnter="beforeStart"
+    @enter="start"
+    @afterEnter="afterEnter"
+    @beforeLeave="beforeLeave"
+    @leave="leave"
+    @afterLeave="afterLeave"
+  >
+    <slot></slot>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+  import { computed, nextTick, ref } from 'vue'
+
+  const props = withDefaults(
+    defineProps<{
+      dimension?: 'height' | 'width'
+      duration?: number
+      expandClasses?: ''
+      flexDirection?: 'end' | 'start'
+      flexParent?: Element
+      mode?: 'default' | 'in-out' | 'out-in'
+      name?: string
+    }>(),
+    {
+      dimension: 'height',
+      duration: 300,
+      expandClasses: '',
+      flexDirection: 'start',
+      flexParent: undefined,
+      gap: 0,
+      mode: undefined,
+      name: undefined,
+    },
+  )
+
+  const gap = ref(0)
+
+  const sizeName = computed(() => props.dimension)
+  const marginName = computed(() => {
+    const xDirection = props.flexDirection === 'start' ? 'marginLeft' : 'marginRight'
+    const yDirection = props.flexDirection === 'start' ? 'marginTop' : 'marginBottom'
+    return props.dimension === 'height' ? yDirection : xDirection
+  })
+  const scrollName = computed(() => (props.dimension === 'height' ? 'scrollHeight' : 'scrollWidth'))
+  const expandClass = computed(() => {
+    return (props.expandClasses || '!transition-all !ease-in-out !overflow-hidden will-change-transform').split(
+      ' ',
+    )
+  })
+
+  const beforeStart = (event: Element): void => {
+    const el = event as HTMLElement
+    shrink(el)
+  }
+  const start = (event: Element): void => {
+    const el = event as HTMLElement
+    el.dataset.oldOverflow = el.style.overflow
+
+    // Wait until component mounted to get proper height
+    nextTick(() => {
+      if (el[scrollName.value] === 0) {
+        el.style[sizeName.value] = ''
+      } else {
+        el.style[sizeName.value] = `${el[scrollName.value]}px`
+        el.style.padding = ''
+        if (props.flexParent) {
+          el.style[marginName.value] = ''
+        }
+      }
+      el.style.overflow = 'hidden'
+    })
+  }
+  const afterEnter = (event: Element): void => {
+    const el = event as HTMLElement
+    release(el)
+  }
+  const beforeLeave = (event: Element): void => {
+    const el = event as HTMLElement
+    const computedStyle = getComputedStyle(el)
+    el.dataset.oldOverflow = computedStyle.overflow
+
+    el.style[sizeName.value] = `${el[scrollName.value]}px`
+    if (props.flexParent) {
+      el.style[marginName.value] = ''
+    }
+    el.style.overflow = 'hidden'
+  }
+  const leave = (event: Element): void => {
+    const el = event as HTMLElement
+    if (el[scrollName.value] !== 0) {
+      shrink(el)
+    }
+  }
+  const afterLeave = (event: Element): void => {
+    const el = event as HTMLElement
+    release(el)
+  }
+
+  function release(el: HTMLElement): void {
+    el.classList.add(...expandClass.value)
+    el.style.transitionDuration = ''
+    el.style[sizeName.value] = ''
+    el.style[marginName.value] = ''
+    el.style.overflow = String(el.dataset.oldOverflow)
+  }
+  function shrink(el: HTMLElement): void {
+    el.classList.add(...expandClass.value)
+    el.style.transitionDuration = `${props.duration}ms`
+    el.style[sizeName.value] = '0'
+    el.style.padding = '0'
+    if (props.flexParent) {
+      gap.value = parseInt(window.getComputedStyle(props.flexParent)?.gap) || 0
+      el.style[marginName.value] = `-${gap.value}px`
+    }
+  }
+</script>

package/dist/runtime/config.d.ts

@@ -1,18 +1,5 @@
 export {}
 
-declare module '#brickflow-ui-config' {
-  import type { BrickflowUiConfig } from './tailwind'
-
-  export const UI_CONFIG: BrickflowUiConfigType
-  export const UI_STYLE: BrickflowUiStyleType
-  export const uiConfig: BrickflowUiConfig['uiConfig']
-  export const uiStyles: BrickflowUiConfig['uiStyles']
-
-  const config: BrickflowUiConfig
-
-  export default config
-}
-
 declare global {
   type BrickflowUiConfigFor<TExpected extends BrickflowUiConfigObject> = {
     [TKey in keyof BrickflowUiConfigLiteralPaths]: BrickflowUiConfigLiteralPaths[TKey] extends TExpected

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

@@ -1,5 +1,4 @@
 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/ui-config.d.ts

@@ -0,0 +1,10 @@
+declare module '#brickflow-ui-config' {
+  export const UI_CONFIG: BrickflowUiConfigType
+  export const UI_STYLE: BrickflowUiStyleType
+  export const uiConfig: BrickflowUiConfigLiteralPaths
+  export const uiStyles: BrickflowUiStyleType
+
+  const config: { uiConfig: typeof uiConfig; uiStyles: typeof uiStyles }
+
+  export default config
+}

package/dist/runtime/ui.css

@@ -1 +1 @@
-@import "./ui-breakpoint.css";@media (width < 1440px){.dkHidden{display:none!important}}@media (width < 1024px),(width >= 1440px){.lpHidden{display:none!important}}@media (width < 768px),(width >= 1024px){.tbHidden{display:none!important}}@media (width < 480px),(width >= 768px){.mbHidden{display:none!important}}@media (width >= 480px){.msHidden{display:none!important}}
+@import "./ui-breakpoint.css";@source "./components";@media (width < 1440px){.dkHidden{display:none!important}}@media (width < 1024px),(width >= 1440px){.lpHidden{display:none!important}}@media (width < 768px),(width >= 1024px){.tbHidden{display:none!important}}@media (width < 480px),(width >= 768px){.mbHidden{display:none!important}}@media (width >= 480px){.msHidden{display:none!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -17,7 +17,6 @@
       "import": "./dist/runtime/tailwind.js"
     },
     "./ui.css": {
-      "development": "./src/runtime/ui.css",
       "default": "./dist/runtime/ui.css"
     }
   },