@brickflow/ui 0.0.54 → 0.0.56

package/dist/module.json

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

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

@@ -21,11 +21,19 @@
   <div class="flex flex-wrap items-center gap-3">
     <button
       type="button"
-      class="cursor-pointer rounded-xl bg-blue-500 px-3 py-2"
+      class="w-30 cursor-pointer rounded-xl px-3 py-2"
+      :class="stateActive ? 'bg-blue-500' : 'bg-blue-800'"
       @click="stateActive = !stateActive"
     >
       {{ stateActive ? 'On' : 'Off' }}
     </button>
+    <Button
+      :loading="stateActive"
+      :icon="firstIconName"
+    >
+      Loading
+    </Button>
+    <Button :loading="stateActive">Loading</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">

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

@@ -0,0 +1,5 @@
+<template>
+  <form class="flex flex-col gap-4">
+    <slot />
+  </form>
+</template>

package/dist/runtime/components/Form/login.demo.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Email & Password',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import Button from '../Button/index.vue'
+  import Input from '../Input/index.vue'
+  import Form from './index.vue'
+
+  const email = ref('')
+  const password = ref('')
+  const submittedEmail = ref('')
+
+  function handleSubmit(): void {
+    submittedEmail.value = email.value
+  }
+</script>
+
+<template>
+  <Form
+    class="max-w-sm"
+    @submit.prevent="handleSubmit"
+  >
+    <Input
+      :value="email"
+      label="Email"
+      placeholder="example@brickflow.com"
+      type="email"
+      autocomplete="email"
+      @input="email = $event"
+    />
+    <Input
+      :value="password"
+      label="Password"
+      type="password"
+      autocomplete="current-password"
+      @input="password = $event"
+    />
+    <Button
+      type="submit"
+      class="self-start"
+    >
+      Sign in
+    </Button>
+    <p
+      v-if="submittedEmail"
+      role="status"
+      class="text-sm"
+    >
+      Submitted for {{ submittedEmail }}
+    </p>
+  </Form>
+</template>

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

@@ -41,17 +41,18 @@
   const props = withDefaults(
     defineProps<{
       align?: 'center' | 'left' | 'right'
+      autocomplete?: string
       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
+      onBlur?: (value: string, target: HTMLInputElement) => void
+      onChange?: (value: string, target: HTMLInputElement) => void
+      onFocus?: (value: string, target: HTMLInputElement | null) => void
       onIconClick?: () => void
+      onInput?: (value: string, target: HTMLInputElement | null) => void
       onTrailingIconClick?: () => void
-      onValueChange?: (value: null | string, target: HTMLInputElement) => void
-      onValueInput?: (value: null | string, target: HTMLInputElement | null) => void
       placeholder?: string
       readonly?: boolean
       size?: InputSize
@@ -62,17 +63,18 @@
     }>(),
     {
       align: 'left',
+      autocomplete: undefined,
       autoWidth: false,
       description: undefined,
       disabled: false,
       icon: undefined,
       label: undefined,
       onBlur: undefined,
+      onChange: undefined,
       onFocus: undefined,
       onIconClick: undefined,
+      onInput: undefined,
       onTrailingIconClick: undefined,
-      onValueChange: undefined,
-      onValueInput: undefined,
       placeholder: '',
       readonly: false,
       size: 'md',
@@ -83,8 +85,7 @@
     },
   )
 
-  const model = shallowRef<null | string>('')
-  // const model = defineModel<null | number | string>({ default: '' })
+  const model = shallowRef('')
 
   const attrs = useAttrs()
   const slots = useSlots()
@@ -104,7 +105,7 @@
 
   const fieldId = computed(() => String(attrs.id ?? generatedId))
   const descriptionId = computed(() => `${fieldId.value}-description`)
-  const currentValue = computed(() => (props.value === undefined ? model.value : props.value))
+  const currentValue = computed(() => (props.value === undefined ? model.value : (props.value ?? '')))
   const widthMeasureText = computed(() => currentValue.value || props.placeholder || ' ')
   const isEmptyField = computed(() => {
     return Boolean(currentValue.value)
@@ -177,23 +178,23 @@
     props.onBlur?.(currentValue.value, event.target as HTMLInputElement)
   }
 
+  function handleChange(event: Event): void {
+    const target = event.target as HTMLInputElement
+    props.onChange?.(target.value, target)
+  }
+
   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 {
+  function handleInput(event: Event): void {
     setValue((event.target as HTMLInputElement).value)
   }
 
-  function setValue(value: null | string): void {
+  function setValue(value: string): void {
     model.value = value
-    props.onValueInput?.(value, inputRef.value)
+    props.onInput?.(value, inputRef.value)
   }
 
   defineExpose({ clear, fieldId, focus, hasFocus, inputRef })
@@ -246,14 +247,15 @@
         :value="currentValue"
         :type="inputType"
         :inputmode="props.type === 'password' ? undefined : props.type"
+        :autocomplete="props.autocomplete"
         :disabled="props.disabled"
         :readonly="props.readonly"
         :placeholder="props.placeholder"
         :aria-describedby="hasDescription ? descriptionId : undefined"
         :class="fieldClasses"
         :style="fieldStyle"
-        @input="onInput"
-        @change="onChange"
+        @input="handleInput"
+        @change="handleChange"
         @focus="handleFocus"
         @blur="handleBlur"
       />

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

@@ -5,6 +5,8 @@
 </script>
 
 <script lang="ts" setup>
+  import { ref } from 'vue'
+
   import { firstIconName, uiConfig } from '#brickflow-ui'
 
   import Button from '../Button/index.vue'
@@ -15,6 +17,7 @@
   function copy(): void {
     console.log('Click')
   }
+  const text = ref('')
 </script>
 
 <template>
@@ -26,6 +29,7 @@
       style="grid-template-columns: minmax(0, 24rem) max-content; grid-template-rows: repeat(3, auto)"
     >
       <Input
+        :value="text"
         :size="size"
         :icon="firstIconName"
         :trailingIcon="firstIconName"
@@ -34,6 +38,7 @@
         :label="`Size: ${size}`"
         class="row-span-3 grid! grid-rows-subgrid"
         @iconClick="copy"
+        @input="text = $event"
       />
       <Button
         :size="size"

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Denominator limits decimal places: 0 for integers, 2 for up to two decimal digits.',
+    title: 'Denominator',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const price = ref<number>(8.55)
+  const price2 = ref<number>(12.55)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      :value="price"
+      :denominator="0"
+      label="Denominator: 0"
+      :description="`Value: ${price}`"
+      :min="-99"
+      :max="200"
+      @input="price = $event"
+    ></InputNumber>
+    <InputNumber
+      :value="price2"
+      :denominator="2"
+      label="Denominator: 2"
+      :description="`Value: ${price2}`"
+      :min="-99"
+      :max="200"
+      @input="price2 = $event"
+    ></InputNumber>
+  </div>
+</template>

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

@@ -1,79 +1,184 @@
-<script setup lang="ts">
-  import { computed, ref } from 'vue'
+<script setup lang="ts" generic="T extends boolean = false">
+  import { shallowRef, watch } from 'vue'
 
+  import { isEmpty } from '../../utils/checkup.js'
   import Input from '../Input/index.vue'
 
   defineOptions({ inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
+      align?: InputProps['align']
+      autocomplete?: string
+      autoWidth?: boolean
+      denominator?: number
+      description?: string
+      disabled?: boolean
+      icon?: string
+      label?: string
       max?: number
       min?: number
-      onValueChange?: (value: null | number, target: HTMLInputElement) => void
-      onValueInput?: (value: null | number, target: HTMLInputElement | null) => void
+      nullable?: boolean & T
+      onBlur?: (value: true extends NoInfer<T> ? null | number : number) => void
+      onChange?: (value: string, target: HTMLInputElement) => void
+      onFocus?: (value: true extends NoInfer<T> ? null | number : number) => void
+      onIconClick?: () => void
+      onInput?: (value: true extends NoInfer<T> ? null | number : number) => void
+      onKeydown?: (event: KeyboardEvent) => void
+      onTrailingIconClick?: () => void
+      placeholder?: string
+      readonly?: boolean
+      size?: InputProps['size']
       step?: number
-      value?: null | number
+      trailingIcon?: string
+      value: true extends NoInfer<T> ? null | number : number
+      variant?: InputProps['variant']
     }>(),
     {
+      align: undefined,
+      autocomplete: undefined,
+      autoWidth: false,
+      denominator: 0,
+      description: undefined,
+      disabled: false,
+      icon: undefined,
+      label: undefined,
       max: undefined,
       min: undefined,
-      onValueChange: undefined,
-      onValueInput: undefined,
+      nullable: undefined,
+      onBlur: undefined,
+      onChange: undefined,
+      onFocus: undefined,
+      onIconClick: undefined,
+      onInput: undefined,
+      onKeydown: undefined,
+      onTrailingIconClick: undefined,
+      placeholder: undefined,
+      readonly: false,
+      size: undefined,
       step: 1,
-      value: undefined,
+      trailingIcon: undefined,
+      variant: 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)),
+  type InputProps = InstanceType<typeof Input>['$props']
+
+  const inputValue = shallowRef(prepareValue(props.value))
+
+  watch(
+    () => props.value,
+    () => {
+      inputValue.value = prepareValue(props.value)
+    },
   )
 
-  function clamp(value: number): number {
-    return Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, value))
+  function handleBlur(value: string, target: HTMLInputElement): void {
+    if (!target) {
+      return
+    }
+    if (props.nullable && target.value === '') {
+      inputValue.value = ''
+      props.onBlur?.(null as typeof props.value)
+      return
+    }
+    const nextValue = prepareValue(props.value)
+    target.value = nextValue
+    inputValue.value = nextValue
+    props.onBlur?.(props.value)
   }
 
-  function handleBlur(): void {
-    rawValue.value = null
+  function handleChange(value: string, target: HTMLInputElement): void {
+    props.onChange?.(value, target)
   }
 
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+  function handleFocus(): void {
+    props.onFocus?.(props.value)
+  }
+
+  const allowedRegexp = /^-?\d*(?:\.\d*)?$/
+  const validNumberRegexp = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/
+
+  function handleInput(rawValue: string, target: HTMLInputElement | null): void {
+    if (!target) {
       return
     }
+    let nextValue = rawValue.replace(/,/, '.')
+    target.value = nextValue
 
-    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)
-  }
+    if (isEmpty(nextValue)) {
+      if (props.nullable) {
+        inputValue.value = ''
+        props.onInput?.(null as typeof props.value)
+      }
+      return
+    }
+    if (!allowedRegexp.test(nextValue)) {
+      target.value = inputValue.value
+      return
+    }
+    const fraction = nextValue.split('.')[1]
+    if (fraction !== undefined && (props.denominator === 0 || fraction.length > props.denominator)) {
+      nextValue =
+        props.denominator === 0
+          ? nextValue.slice(0, nextValue.indexOf('.'))
+          : nextValue.slice(0, nextValue.indexOf('.') + props.denominator + 1)
+      target.value = nextValue
+    }
+    if (isEmpty(nextValue) || !validNumberRegexp.test(nextValue)) {
+      if (isEmpty(nextValue) && props.nullable) {
+        inputValue.value = ''
+        props.onInput?.(null as typeof props.value)
+      }
+      return
+    }
 
-  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)
-  }
+    let nextValueNumber = Number(nextValue)
+    if (!isEmpty(props.min) && nextValueNumber < props.min) {
+      target.value = prepareValue(props.min)
+      nextValueNumber = props.min
+    }
+    if (!isEmpty(props.max) && nextValueNumber > props.max) {
+      target.value = prepareValue(props.max)
+      nextValueNumber = props.max
+    }
 
-  function handleValueInput(value: null | string, target: HTMLInputElement | null): void {
-    rawValue.value = value ?? ''
-    const number = toNumber(value)
-    model.value = number
-    props.onValueInput?.(number, target)
+    props.onInput?.(nextValueNumber)
   }
 
-  function toNumber(value: null | string): null | number {
-    if (value === null || value.trim() === '') {
-      return null
+  function handleKeydown(event: KeyboardEvent): void {
+    props.onKeydown?.(event)
+    if (event.defaultPrevented || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) {
+      return
+    }
+    const target = event.target
+    if (!(target instanceof HTMLInputElement) || target.disabled || target.readOnly) {
+      return
     }
+    if (!Number.isFinite(props.step) || props.step <= 0) {
+      return
+    }
+
+    event.preventDefault()
+    const parsedValue = Number(target.value)
+    const currentValue = target.value !== '' && Number.isFinite(parsedValue) ? parsedValue : (props.value ?? 0)
+    const direction = event.key === 'ArrowUp' ? 1 : -1
+    const step = props.step * (event.shiftKey ? 2 : 1)
+    const precision = Math.max(0, Math.min(100, Math.trunc(props.denominator)))
+    let nextValue = Number((currentValue + direction * step).toFixed(precision))
+    if (!isEmpty(props.min) && nextValue < props.min) {
+      nextValue = props.min
+    }
+    if (!isEmpty(props.max) && nextValue > props.max) {
+      nextValue = props.max
+    }
+
+    target.value = prepareValue(nextValue)
+    props.onInput?.(nextValue)
+  }
 
-    const number = Number(value.replace(',', '.'))
-    return Number.isFinite(number) ? number : null
+  function prepareValue(value: typeof props.value): string {
+    return value === null ? '' : String(value)
   }
 </script>
 
@@ -81,16 +186,28 @@
   <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"
+    :align="props.align"
+    :autocomplete="props.autocomplete"
+    :autoWidth="props.autoWidth"
+    :label="props.label"
+    :description="props.description"
+    :disabled="props.disabled"
+    :icon="props.icon"
+    :placeholder="props.placeholder"
+    :readonly="props.readonly"
+    :size="props.size"
+    :trailingIcon="props.trailingIcon"
+    :type="props.denominator === 0 ? 'numeric' : 'decimal'"
+    :variant="props.variant"
+    @input="handleInput"
+    @change="handleChange"
+    @blur="handleBlur"
+    @focus="handleFocus"
+    @iconClick="props.onIconClick?.()"
+    @keydown="handleKeydown"
+    @trailingIconClick="props.onTrailingIconClick?.()"
   >
     <template
       v-if="$slots.label"
@@ -99,16 +216,16 @@
       <slot name="label" />
     </template>
     <template
-      v-if="$slots.left"
-      #left
+      v-if="$slots.leading"
+      #leading
     >
-      <slot name="left" />
+      <slot name="leading" />
     </template>
     <template
-      v-if="$slots.right"
-      #right
+      v-if="$slots.trailing"
+      #trailing
     >
-      <slot name="right" />
+      <slot name="trailing" />
     </template>
     <template
       v-if="$slots.error"

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Min & Max',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const price1 = ref<number>(25)
+  const price2 = ref<number>(-10)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      :value="price1"
+      label="Min: 0 — Max: 200"
+      :description="`Value: ${price1}`"
+      :min="0"
+      :max="200"
+      @input="price1 = $event"
+    >
+      <template #leading><span class="text-green-400">$</span></template>
+    </InputNumber>
+    <InputNumber
+      :value="price2"
+      label="Min: -100 — Max: 199"
+      :description="`Value: ${price2}`"
+      :min="-100"
+      :max="199"
+      @input="price2 = $event"
+    >
+      <template #leading><span class="text-green-400">$</span></template>
+    </InputNumber>
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Nullable',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const value = ref<null | number>(null)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      :value="value"
+      nullable
+      label="Nullable (clear to set null)"
+      :description="`Value: ${value === null ? 'null' : value}`"
+      @input="value = $event"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Step sets the change per arrow key press. Hold Shift to double it.',
+    title: 'Step',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const quantity = ref<number>(2)
+  const price = ref<number>(25)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      :value="quantity"
+      :step="1"
+      label="Step: 1"
+      :min="0"
+      :max="200"
+      :description="`Value: ${quantity}`"
+      @input="quantity = $event"
+    />
+    <InputNumber
+      :value="price"
+      :step="5"
+      label="Step: 5"
+      :min="-10"
+      :max="200"
+      :description="`Value: ${price}`"
+      @input="price = $event"
+    />
+  </div>
+</template>

package/dist/runtime/nuxt-components.d.ts

@@ -0,0 +1,7 @@
+import type { defineNuxtLink } from 'nuxt/app'
+
+declare module 'vue' {
+  interface GlobalComponents {
+    NuxtLink: ReturnType<typeof defineNuxtLink>
+  }
+}

package/dist/runtime/utils/checkup.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @returns isEmpty('') => true
+ * @returns isEmpty([]) => true
+ * @returns isEmpty([1]) => false
+ * @returns isEmpty([null]) => false
+ * @returns isEmpty({}) => true
+ * @returns isEmpty({ key: '' }) => false
+ * @returns isEmpty(undefined) => true
+ * @returns isEmpty(null) => true
+ * @returns isEmpty(new Date()) => false
+ * @returns isEmpty(new Date('Invalid Date')) => false
+ * @returns isEmpty(true) => false
+ * @returns isEmpty(false) => false
+ * @returns isEmpty(0), 0, false
+ * @returns isEmpty(() => undefined) => false
+ * @returns isEmpty(Infinity) => false
+ * @returns isEmpty(-Infinity) => false
+ * @returns isEmpty(new Promise((resolve) => resolve(''))) => true
+ */
+export declare function isEmpty<T>(value: T): value is Extract<T, [] | null | undefined>;
+export declare function isFloat(value: number): boolean;
+export declare function isNumber(value: unknown): value is number;
+export declare function isPromise<T>(value: T): value is T extends Promise<unknown> ? T : never;
+export declare function isString(value: unknown): value is string;
+export declare function isValidDate(date: Date | number | string): boolean;
+export declare const isNonNullable: <T>(value: T) => value is NonNullable<T>;
+export declare function isElement<T>(value: T): value is Extract<T, Element>;
+export declare function isExternalLink(link: string): boolean;
+export declare function isFormData(value?: FormData | Record<string, unknown> | unknown): value is FormData;
+export declare function isFunction(value: unknown): value is (...args: unknown[]) => unknown;
+export declare function isTouchDevice(): boolean;
+//# sourceMappingURL=checkup.d.ts.map

package/dist/runtime/utils/checkup.js

@@ -0,0 +1,67 @@
+export function isEmpty(value) {
+  if (typeof value === "boolean" || typeof value === "function") {
+    return false;
+  }
+  if (typeof value === "undefined" || value === null || typeof value === "string" && value.length === 0) {
+    return true;
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return false;
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    return true;
+  }
+  if (isDate(value)) {
+    return false;
+  }
+  return Object.keys(value).length === 0;
+}
+export function isFloat(value) {
+  return Number(value) === value && value % 1 !== 0;
+}
+export function isNumber(value) {
+  return typeof value === "number";
+}
+export function isPromise(value) {
+  return Boolean(value) && (typeof value === "object" || typeof value === "function") && typeof value?.then === "function";
+}
+export function isString(value) {
+  return typeof value === "string";
+}
+export function isValidDate(date) {
+  if (typeof date === "string") {
+    return Boolean(Date.parse(date));
+  }
+  if (isNaN(date)) {
+    return false;
+  }
+  return typeof date === "number" || date instanceof Date;
+}
+function isDate(value) {
+  if (Object.prototype.toString.call(value) === "[object Date]") {
+    return true;
+  }
+  return false;
+}
+export const isNonNullable = (value) => {
+  return value !== void 0 && value !== null;
+};
+export function isElement(value) {
+  return value instanceof Element;
+}
+export function isExternalLink(link) {
+  const EXTERNAL_LINK_REGEX = /^(?:https?:\/\/|mailto:|tel:)/;
+  return EXTERNAL_LINK_REGEX.test(link);
+}
+export function isFormData(value) {
+  if (!value) {
+    return false;
+  }
+  return typeof value === "object" && typeof value.append === "function" && typeof value.has === "function";
+}
+export function isFunction(value) {
+  return typeof value === "function";
+}
+export function isTouchDevice() {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [

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

@@ -1,37 +0,0 @@
-<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>