@byyuurin/ui 0.0.6 → 0.0.7

package/README.md

@@ -47,9 +47,8 @@ export default defineConfig({
       radiusSwitch: '0rem', // optional
       radiusTabs: '0rem', // optional
       cb: '#1f2937', // optional
-      c1: '#ffffff', // optional
-      c2: '#f2f2f2', // optional
-      c3: '#e5e6e6', // optional
+      cp: '#1f2937', // optional
+      cx: '#ffffff', // optional
     }),
   ],
 })
@@ -58,8 +57,8 @@ export default defineConfig({
 New Rules
 
 - `ui-[color]`
-- `bg-solid-[color]`
-- `bg-solid-[color]/[opacity]`
+- `bg-soft-[color]`
+- `bg-soft-[color]/[mix-ratio]`
 
 ### Vite
 

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@byyuurin/ui",
+  "configKey": "ui",
+  "compatibility": {
+    "nuxt": ">=3.13.1"
+  },
+  "version": "0.0.7",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/{nuxt.mjs → module.mjs}

@@ -1,7 +1,7 @@
 import { defineNuxtModule, useLogger, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { p as packageName } from './shared/ui.D4zm1r0C.mjs';
+import { p as packageName } from './shared/ui.d1728164.mjs';
 
-const nuxt = defineNuxtModule({
+const module = defineNuxtModule({
   meta: {
     name: packageName,
     configKey: "ui",
@@ -32,5 +32,5 @@ const nuxt = defineNuxtModule({
   }
 });
 
-export { nuxt as default };
-//# sourceMappingURL=nuxt.mjs.map
+export { module as default };
+//# sourceMappingURL=module.mjs.map

package/dist/module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.mjs","sources":["../src/module.ts"],"sourcesContent":["import { addComponentsDir, addImportsDir, createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'\nimport { packageName } from './shared'\n\nexport interface ModuleOptions {\n  /**\n   * prefix for components used in templates\n   *\n   * @default \"U\"\n   */\n  prefix?: string\n}\n\nexport default defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: packageName,\n    configKey: 'ui',\n    compatibility: {\n      nuxt: '>=3.13.1',\n    },\n  },\n  defaults: {\n    prefix: 'U',\n  },\n  setup(options, nuxt) {\n    const logger = useLogger(packageName)\n    const { resolve } = createResolver(import.meta.url)\n\n    // Make sure the UnoCSS Nuxt module is installed\n    if (!nuxt.options.modules.includes('@unocss/nuxt')) {\n      logger.error(`\\`${packageName}\\` requires the \\`@unocss/nuxt\\` module to be installed.`)\n      return\n    }\n\n    nuxt.options.vite.optimizeDeps ??= {}\n    nuxt.options.vite.optimizeDeps.include ??= []\n    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`)\n\n    nuxt.options.alias['#ui'] = resolve('./runtime')\n\n    addComponentsDir({\n      path: resolve('./runtime/components'),\n      prefix: options.prefix,\n      pathPrefix: false,\n    })\n\n    addImportsDir(resolve('./runtime/composables'))\n  },\n})\n"],"names":[],"mappings":";;;AAYA,eAAe,gBAAgC,CAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,SAAW,EAAA,IAAA;AAAA,IACX,aAAe,EAAA;AAAA,MACb,IAAM,EAAA,UAAA;AAAA,KACR;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,MAAQ,EAAA,GAAA;AAAA,GACV;AAAA,EACA,KAAA,CAAM,SAAS,IAAM,EAAA;AACnB,IAAM,MAAA,MAAA,GAAS,UAAU,WAAW,CAAA,CAAA;AACpC,IAAA,MAAM,EAAE,OAAA,EAAY,GAAA,cAAA,CAAe,YAAY,GAAG,CAAA,CAAA;AAGlD,IAAA,IAAI,CAAC,IAAK,CAAA,OAAA,CAAQ,OAAQ,CAAA,QAAA,CAAS,cAAc,CAAG,EAAA;AAClD,MAAO,MAAA,CAAA,KAAA,CAAM,CAAK,EAAA,EAAA,WAAW,CAA0D,wDAAA,CAAA,CAAA,CAAA;AACvF,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,OAAA,CAAQ,IAAK,CAAA,YAAA,KAAiB,EAAC,CAAA;AACpC,IAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,CAAK,YAAa,CAAA,OAAA,KAAY,EAAC,CAAA;AAC5C,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA,YAAA,CAAa,QAAQ,IAAK,CAAA,CAAA,EAAG,WAAW,CAAS,OAAA,CAAA,CAAA,CAAA;AAEnE,IAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,QAAQ,WAAW,CAAA,CAAA;AAE/C,IAAiB,gBAAA,CAAA;AAAA,MACf,IAAA,EAAM,QAAQ,sBAAsB,CAAA;AAAA,MACpC,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB,UAAY,EAAA,KAAA;AAAA,KACb,CAAA,CAAA;AAED,IAAc,aAAA,CAAA,OAAA,CAAQ,uBAAuB,CAAC,CAAA,CAAA;AAAA,GAChD;AACF,CAAC,CAAA;;;;"}

package/dist/runtime/components/Accordion.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
-import type { AccordionRootEmits, AccordionRootProps, PrimitiveProps } from 'reka-ui'
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
 import type { accordion } from '../theme'
-import type { ComponentAttrs, DynamicSlots } from '../types'
+import type { ComponentAttrs } from '../types'
 
 export interface AccordionItem {
   label?: string
   icon?: string
-  trailingIcon?: string
+  suffixIcon?: string
   slot?: string
   content?: string
   /** A unique value for the accordion item. Defaults to the index. */
@@ -20,14 +20,19 @@ type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
 
 export type AccordionSlots<T extends { slot?: string }> = {
   default?: SlotProps<T>
-  icon?: SlotProps<T>
+  prefix?: SlotProps<T>
+  suffix?: SlotProps<T>
   content?: SlotProps<T>
   body?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
+} & Record<string, SlotProps<T>>
 
-export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
-  as?: PrimitiveProps['as']
+export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'as' | 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
   items?: T[]
+  /**
+   * The icon displayed on the right side of the trigger.
+   * @default app.icons.down
+   */
+  suffixIcon?: string
   labelKey?: string
 }
 </script>
@@ -44,11 +49,11 @@ const props = withDefaults(defineProps<AccordionProps<T>>(), {
   collapsible: true,
   unmountOnHide: true,
   labelKey: 'label',
-  items: () => [],
 })
-const slots = defineSlots<AccordionSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'))
+const emit = defineEmits<AccordionEmits>()
+const slots = defineSlots<AccordionSlots<T>>()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emit)
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
@@ -69,16 +74,16 @@ const style = computed(() => {
     >
       <AccordionHeader :class="style.header({ class: props.ui?.header })">
         <AccordionTrigger :class="style.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
-          <slot name="icon" v-bind="{ item, index, open }">
-            <i v-if="item.icon" :class="style.icon({ class: [item.icon, props.ui?.icon] })"></i>
+          <slot name="prefix" v-bind="{ item, index, open }">
+            <span v-if="item.icon" :class="style.prefixIcon({ class: [item.icon, props.ui?.prefixIcon] })"></span>
           </slot>
 
           <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
             <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey) }}</slot>
           </span>
 
-          <slot name="trailing-icon" v-bind="{ item, index, open }">
-            <i v-if="item.trailingIcon" :class="style.icon({ class: [item.trailingIcon, props.ui?.trailingIcon] })"></i>
+          <slot name="suffix" v-bind="{ item, index, open }">
+            <span :class="style.suffixIcon({ class: [item.suffixIcon || props.suffixIcon || theme.app.icons.down, props.ui?.suffixIcon] })"></span>
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
@@ -100,21 +105,5 @@ const style = computed(() => {
 </template>
 
 <style>
-@keyframes accordion-up {
-  from {
-    height: var(--reka-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--reka-accordion-content-height);
-  }
-}
+@keyframes accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}
 </style>

package/dist/runtime/components/Alert.vue

@@ -74,7 +74,7 @@ const style = computed(() => {
     :class="style.root({ class: [props.class, props.ui?.root] })"
   >
     <slot name="prepend">
-      <i v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></i>
+      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
     </slot>
 
     <div :class="style.wrapper({ class: props.ui?.wrapper })">

package/dist/runtime/components/Button.vue

@@ -12,9 +12,8 @@ export interface ButtonSlots {
 }
 
 type ButtonVariants = VariantProps<typeof button>
-type UIOptions = ComponentAttrs<typeof button>['ui'] & LinkProps['ui']
 
-export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>, UseComponentIconsProps, Omit<LinkProps, 'ui' | 'raw'> {
+export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
   icon?: string
   label?: string
   variant?: ButtonVariants['variant']
@@ -22,11 +21,11 @@ export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>,
   loading?: boolean
   active?: boolean
   disabled?: boolean
-  ui?: UIOptions
 }
 </script>
 
 <script lang="ts" setup>
+import { useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
@@ -45,7 +44,7 @@ const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons
   computed(() => ({ ...props, loading: props.loading })),
 )
 
-const linkProps = pickLinkProps(props)
+const linkProps = useForwardProps(pickLinkProps(props))
 
 const { theme, createStyler } = useTheme()
 
@@ -59,8 +58,8 @@ const style = computed(() => {
     suffix: isSuffix.value,
     class: [
       props.class,
-      props.active ? props.ui?.active : props.ui?.inactive,
-      props.disabled ? props.ui?.disabled : undefined,
+      props.active ? props.activeClass : props.inactiveClass,
+      props.disabled ? props.disableClass : undefined,
     ],
   })
 })
@@ -71,14 +70,14 @@ const style = computed(() => {
     :class="style.base({ class: [props.class, props.ui?.base] })"
     :type="props.type"
     :disabled="props.disabled || props.loading"
-    v-bind="omit(linkProps, ['type', 'disabled'])"
+    v-bind="omit(linkProps, ['type', 'disabled', 'activeClass', 'inactiveClass', 'disableClass'])"
     raw
   >
     <slot name="prefix">
-      <i
+      <span
         v-if="isPrefix && prefixIconName"
         :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
-      ></i>
+      ></span>
     </slot>
     <span
       v-if="props.label || slots.default"
@@ -87,10 +86,10 @@ const style = computed(() => {
       <slot>{{ label }}</slot>
     </span>
     <slot name="suffix">
-      <i
+      <span
         v-if="isSuffix && suffixIconName"
         :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
-      ></i>
+      ></span>
     </slot>
   </Link>
 </template>

package/dist/runtime/components/Card.vue

@@ -1,14 +1,9 @@
 <script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
 import type { PrimitiveProps } from 'reka-ui'
 import type { card } from '../theme'
 import type { ComponentAttrs } from '../types'
 
-export interface CardProps extends ComponentAttrs<typeof card> {
-  as?: PrimitiveProps['as']
-  title?: string
-  description?: string
-}
-
 export interface CardSlots {
   default?: (props?: {}) => any
   content?: (props?: {}) => any
@@ -17,6 +12,14 @@ export interface CardSlots {
   description?: (props?: any) => any
   footer?: (props?: {}) => any
 }
+
+type CardVariants = VariantProps<typeof card>
+export interface CardProps extends ComponentAttrs<typeof card> {
+  as?: PrimitiveProps['as']
+  variant?: CardVariants['variant']
+  title?: string
+  description?: string
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Checkbox.vue

@@ -78,11 +78,11 @@ function onUpdate(value: any) {
         @update:model-value="onUpdate"
       >
         <CheckboxIndicator as-child force-mount>
-          <i
+          <span
             v-if="modelValue === 'indeterminate'"
             :class="style.icon({ class: [props.indeterminateIcon || theme.app.icons.indeterminate, props.ui?.icon] })"
-          ></i>
-          <i v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })"></i>
+          ></span>
+          <span v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })"></span>
         </CheckboxIndicator>
       </CheckboxRoot>
     </div>

package/dist/runtime/components/Chip.vue

@@ -50,7 +50,7 @@ const style = computed(() => {
 <template>
   <Primitive :as="props.as" :class="style.base({ class: [props.class, props.ui?.base] })">
     <slot name="prefix">
-      <i v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></i>
+      <span v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></span>
     </slot>
 
     <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
@@ -58,7 +58,7 @@ const style = computed(() => {
     </span>
 
     <slot name="suffix">
-      <i v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></i>
+      <span v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></span>
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Collapsible.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import type { collapsible } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+}
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default?: (props: { open: boolean }) => any
+  content?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<CollapsibleProps>(), {
+  unmountOnHide: true,
+})
+const emit = defineEmits<CollapsibleEmits>()
+const slots = defineSlots<CollapsibleSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emit)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.collapsible)
+  return styler(props)
+})
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="rootProps"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+  >
+    <CollapsibleTrigger v-if="slots.default" as-child>
+      <slot :open="open"></slot>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent :class="style.content({ class: props.ui?.content })">
+      <slot name="content"></slot>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>
+
+<style>
+@keyframes collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}
+</style>

package/dist/runtime/components/Drawer.vue

@@ -15,8 +15,10 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
    * @default true
    */
   overlay?: boolean
-  blur?: boolean
-  full?: boolean
+  /**
+   * Whether to inset the drawer from the edges.
+   */
+  inset?: boolean
   /**
    * Render a handle on the drawer.
    * @default true

package/dist/runtime/components/Input.vue

@@ -140,10 +140,10 @@ onMounted(() => {
   >
     <span v-if="isPrefix || slots.prefix" :class="style.prefix({ class: props.ui?.prefix })">
       <slot name="prefix">
-        <i
+        <span
           v-if="isPrefix && prefixIconName"
           :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
-        ></i>
+        ></span>
       </slot>
     </span>
 
@@ -168,10 +168,10 @@ onMounted(() => {
 
     <span v-if="isSuffix || slots.suffix" :class="style.suffix({ class: props.ui?.suffix })">
       <slot name="suffix">
-        <i
+        <span
           v-if="isSuffix && suffixIconName"
           :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
-        ></i>
+        ></span>
       </slot>
     </span>
   </Primitive>

package/dist/runtime/components/InputNumber.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { NumberFieldRootProps } from 'reka-ui'
+import type { inputNumber } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+export interface InputNumberEmits {
+  (e: 'update:modelValue', payload: number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', payload: Event): void
+}
+
+export interface InputNumberSlots {
+  increment?: (props?: {}) => any
+  decrement?: (props?: {}) => any
+}
+
+type InputNumberVariants = VariantProps<typeof inputNumber>
+
+export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pick<NumberFieldRootProps, 'as' | 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  variant?: InputNumberVariants['variant']
+  size?: InputNumberVariants['size']
+  underline?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  /**
+   * The orientation of the input menu.
+   * @default 'horizontal'
+   */
+  orientation?: InputNumberVariants['orientation']
+  /**
+   * Configure the increment button. The `color` and `size` are inherited.
+   * @default { variant: 'link' }
+   */
+  increment?: ButtonProps
+  /**
+   * The icon displayed to increment the value.
+   * @default app.icons.plus
+   */
+  incrementIcon?: string
+  /**
+   * Configure the decrement button. The `color` and `size` are inherited.
+   * @default { variant: 'link' }
+   */
+  decrement?: ButtonProps
+  /**
+   * The icon displayed to decrement the value.
+   * @default app.icons.minus
+   */
+  decrementIcon?: string
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   */
+  locale?: string
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, onMounted, ref } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  orientation: 'horizontal',
+})
+
+const emit = defineEmits<InputNumberEmits>()
+defineSlots<InputNumberSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'formatOptions'), emit)
+
+const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
+
+const { theme, createStyler } = useTheme()
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.plus : theme.value.app.icons.up))
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.minus : theme.value.app.icons.down))
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.inputNumber)
+  return styler(props)
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+defineExpose({
+  inputRef,
+})
+
+function autoFocus() {
+  if (props.autofocus)
+    inputRef.value?.$el?.focus()
+}
+
+function onUpdate(value: number) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emit('blur', event)
+}
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="rootProps"
+    :id="props.id"
+    :name="props.name"
+    :disabled="props.disabled"
+    :locale="props.locale"
+    :class="style.base({ class: [props.class, props.ui?.base] })"
+    :aria-disabled="props.disabled ? true : undefined"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="$attrs"
+      ref="inputRef"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :class="style.input({ class: props.ui?.input })"
+      @blur="onBlur"
+    />
+
+    <div :class="style.increment({ class: props.ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="props.disabled">
+        <slot name="increment">
+          <Button
+            :icon="incrementIcon"
+            :size="props.size"
+            variant="link"
+            aria-label="increment"
+            v-bind="typeof props.increment === 'object' ? props.increment : undefined"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div :class="style.decrement({ class: props.ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="props.disabled">
+        <slot name="decrement">
+          <Button
+            :icon="decrementIcon"
+            :size="props.size"
+            variant="link"
+            aria-label="decrement"
+            v-bind="typeof props.decrement === 'object' ? props.decrement : undefined"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
+</template>