@byyuurin/ui 0.0.4 → 0.0.5

package/README.md

@@ -50,14 +50,6 @@ export default defineConfig({
       c3: '#e5e6e6', // optional
     }),
   ],
-  content: {
-    pipeline: {
-      include: [
-        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
-        /\/(?:theme).*\.(ts|m?js)($|\?)/,
-      ],
-    },
-  },
 })
 ```
 
@@ -66,28 +58,25 @@ export default defineConfig({
 ```ts
 // vite.config.ts
 
-import UIResolver from '@byyuurin/ui/resolver'
+import UI from '@byyuurin/ui/vite'
 import Vue from '@vitejs/plugin-vue'
 import UnoCSS from 'unocss/vite'
-import AutoImport from 'unplugin-auto-import/vite'
-import VueComponents from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
+import Inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   plugins: [
     UnoCSS(),
     Vue(),
-    VueComponents({
-      dts: 'src/typed-components.d.ts',
-      resolvers: [
-        UIResolver({
-          prefix: 'U', // optional
-        }),
-      ],
-    }),
-    AutoImport({
-      dts: 'src/typed-imports.d.ts',
-      imports: ['vue'],
+    UI({
+      prefix: 'U', // optional
+      autoImport: {
+        dts: 'src/typed-imports.d.ts',
+        imports: ['vue'],
+      },
+      components: {
+        dts: 'src/typed-components.d.ts',
+      },
     }),
   ],
 })

package/dist/index.d.ts

@@ -1,3 +1,26 @@
-export * from './runtime/components';
-export * from './runtime/composables';
+export { default as Accordion } from './runtime/components/Accordion.vue';
+export { default as Alert } from './runtime/components/Alert.vue';
+export { default as App } from './runtime/components/App.vue';
+export { default as Badge } from './runtime/components/Badge.vue';
+export { default as Button } from './runtime/components/Button.vue';
+export { default as Card } from './runtime/components/Card.vue';
+export { default as Checkbox } from './runtime/components/Checkbox.vue';
+export { default as Chip } from './runtime/components/Chip.vue';
+export { default as Drawer } from './runtime/components/Drawer.vue';
+export { default as Input } from './runtime/components/Input.vue';
+export { default as Link } from './runtime/components/Link.vue';
+export { default as Modal } from './runtime/components/Modal.vue';
+export { default as ModalProvider } from './runtime/components/ModalProvider.vue';
+export { default as PinInput } from './runtime/components/PinInput.vue';
+export { default as Popover } from './runtime/components/Popover.vue';
+export { default as RadioGroup } from './runtime/components/RadioGroup.vue';
+export { default as ScrollArea } from './runtime/components/ScrollArea.vue';
+export { default as Select } from './runtime/components/Select.vue';
+export { default as Slider } from './runtime/components/Slider.vue';
+export { default as Switch } from './runtime/components/Switch.vue';
+export { default as Tabs } from './runtime/components/Tabs.vue';
+export { default as Textarea } from './runtime/components/Textarea.vue';
+export { default as Toast } from './runtime/components/Toast.vue';
+export { default as Toaster } from './runtime/components/Toaster.vue';
+export { default as Tooltip } from './runtime/components/Tooltip.vue';
 export * from './runtime/types';

package/dist/index.mjs

@@ -1,3 +1,26 @@
-export * from "./runtime/components/index.mjs";
-export * from "./runtime/composables/index.mjs";
+export { default as Accordion } from "./runtime/components/Accordion.vue";
+export { default as Alert } from "./runtime/components/Alert.vue";
+export { default as App } from "./runtime/components/App.vue";
+export { default as Badge } from "./runtime/components/Badge.vue";
+export { default as Button } from "./runtime/components/Button.vue";
+export { default as Card } from "./runtime/components/Card.vue";
+export { default as Checkbox } from "./runtime/components/Checkbox.vue";
+export { default as Chip } from "./runtime/components/Chip.vue";
+export { default as Drawer } from "./runtime/components/Drawer.vue";
+export { default as Input } from "./runtime/components/Input.vue";
+export { default as Link } from "./runtime/components/Link.vue";
+export { default as Modal } from "./runtime/components/Modal.vue";
+export { default as ModalProvider } from "./runtime/components/ModalProvider.vue";
+export { default as PinInput } from "./runtime/components/PinInput.vue";
+export { default as Popover } from "./runtime/components/Popover.vue";
+export { default as RadioGroup } from "./runtime/components/RadioGroup.vue";
+export { default as ScrollArea } from "./runtime/components/ScrollArea.vue";
+export { default as Select } from "./runtime/components/Select.vue";
+export { default as Slider } from "./runtime/components/Slider.vue";
+export { default as Switch } from "./runtime/components/Switch.vue";
+export { default as Tabs } from "./runtime/components/Tabs.vue";
+export { default as Textarea } from "./runtime/components/Textarea.vue";
+export { default as Toast } from "./runtime/components/Toast.vue";
+export { default as Toaster } from "./runtime/components/Toaster.vue";
+export { default as Tooltip } from "./runtime/components/Tooltip.vue";
 export * from "./runtime/types/index.mjs";

package/dist/nuxt.d.mts

@@ -4,7 +4,7 @@ interface ModuleOptions {
     /**
      * prefix for components used in templates
      *
-     * @default ""
+     * @default "U"
      */
     prefix?: string;
 }

package/dist/nuxt.d.ts

@@ -4,7 +4,7 @@ interface ModuleOptions {
     /**
      * prefix for components used in templates
      *
-     * @default ""
+     * @default "U"
      */
     prefix?: string;
 }

package/dist/nuxt.mjs

@@ -1,5 +1,7 @@
-import { defineNuxtModule, useLogger, addComponent } from '@nuxt/kit';
-import { p as packageName, c as componentNames } from './shared/ui.Cmq14xN9.mjs';
+import { defineNuxtModule, useLogger, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { p as packageName } from './shared/ui.CzDyI29e.mjs';
+import 'node:url';
+import 'pathe';
 
 const nuxt = defineNuxtModule({
   meta: {
@@ -10,22 +12,24 @@ const nuxt = defineNuxtModule({
     }
   },
   defaults: {
-    prefix: ""
+    prefix: "U"
   },
   setup(options, nuxt) {
     const logger = useLogger(packageName);
+    const { resolve } = createResolver(import.meta.url);
     if (!nuxt.options.modules.includes("@unocss/nuxt")) {
       logger.error(`\`${packageName}\` requires the \`@unocss/nuxt\` module to be installed.`);
       return;
     }
-    for (const component of componentNames) {
-      addComponent({
-        name: `${options.prefix}${component}`,
-        export: component,
-        filePath: packageName
-      });
-    }
+    nuxt.options.alias["#ui"] = resolve("./runtime");
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      prefix: options.prefix,
+      pathPrefix: false
+    });
+    addImportsDir(resolve("./runtime/composables"));
   }
 });
 
 export { nuxt as default };
+//# sourceMappingURL=nuxt.mjs.map

package/dist/nuxt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nuxt.mjs","sources":["../src/nuxt.ts"],"sourcesContent":["import { addComponentsDir, addImportsDir, createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'\r\nimport type {} from '@nuxt/schema' // Mandatory to avoid a bug when building\r\nimport { packageName } from './internal/shared'\r\n\r\nexport interface ModuleOptions {\r\n  /**\r\n   * prefix for components used in templates\r\n   *\r\n   * @default \"U\"\r\n   */\r\n  prefix?: string\r\n}\r\n\r\nexport default defineNuxtModule<ModuleOptions>({\r\n  meta: {\r\n    name: packageName,\r\n    configKey: 'ui',\r\n    compatibility: {\r\n      nuxt: '>=3.13.1',\r\n    },\r\n  },\r\n  defaults: {\r\n    prefix: 'U',\r\n  },\r\n  setup(options, nuxt) {\r\n    const logger = useLogger(packageName)\r\n    const { resolve } = createResolver(import.meta.url)\r\n\r\n    // Make sure the UnoCSS Nuxt module is installed\r\n    if (!nuxt.options.modules.includes('@unocss/nuxt')) {\r\n      logger.error(`\\`${packageName}\\` requires the \\`@unocss/nuxt\\` module to be installed.`)\r\n      return\r\n    }\r\n\r\n    nuxt.options.alias['#ui'] = resolve('./runtime')\r\n\r\n    addComponentsDir({\r\n      path: resolve('./runtime/components'),\r\n      prefix: options.prefix,\r\n      pathPrefix: false,\r\n    })\r\n\r\n    addImportsDir(resolve('./runtime/composables'))\r\n  },\r\n})\r\n"],"names":[],"mappings":";;;;;AAaA,aAAe,gBAAgC,CAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,SAAW,EAAA,IAAA;AAAA,IACX,aAAe,EAAA;AAAA,MACb,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,MAAQ,EAAA;AAAA,GACV;AAAA,EACA,KAAA,CAAM,SAAS,IAAM,EAAA;AACnB,IAAM,MAAA,MAAA,GAAS,UAAU,WAAW,CAAA;AACpC,IAAA,MAAM,EAAE,OAAA,EAAY,GAAA,cAAA,CAAe,YAAY,GAAG,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;AACvF,MAAA;AAAA;AAGF,IAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,QAAQ,WAAW,CAAA;AAE/C,IAAiB,gBAAA,CAAA;AAAA,MACf,IAAA,EAAM,QAAQ,sBAAsB,CAAA;AAAA,MACpC,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB,UAAY,EAAA;AAAA,KACb,CAAA;AAED,IAAc,aAAA,CAAA,OAAA,CAAQ,uBAAuB,CAAC,CAAA;AAAA;AAElD,CAAC,CAAA;;;;"}

package/dist/runtime/components/Accordion.vue

@@ -36,7 +36,7 @@ export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pic
 import { reactivePick } from '@vueuse/core'
 import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 import { get } from '../utils'
 
 const props = withDefaults(defineProps<AccordionProps<T>>(), {

package/dist/runtime/components/Alert.vue

@@ -0,0 +1,120 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { alert } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+type AlertVariants = VariantProps<typeof alert>
+
+export interface AlertProps extends ComponentAttrs<typeof alert>, Pick<PrimitiveProps, 'as'> {
+  title?: string
+  description?: string
+  icon?: string
+  variant?: AlertVariants['variant']
+  orientation?: AlertVariants['orientation']
+  /**
+   * Display a list of actions:
+   * - under the title and description when orientation is `vertical`
+   * - next to the close button when orientation is `horizontal`
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the alert.
+   * @default false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @default app.icons.close
+   */
+  closeIcon?: string
+}
+
+export interface AlertEmits {
+  (event: 'update:open', value: boolean): void
+}
+
+export interface AlertSlots {
+  prepend?: (props?: {}) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
+  actions?: (props?: {}) => any
+  close?: (props: { ui: ComponentAttrs<typeof alert>['ui'] }) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  variant: 'solid',
+  orientation: 'vertical',
+})
+
+const emit = defineEmits<AlertEmits>()
+const slots = defineSlots<AlertSlots>()
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.alert)
+  return styler({
+    ...props,
+    title: !!props.title || !!slots.title,
+  })
+})
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :data-orientation="props.orientation"
+    :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>
+    </slot>
+
+    <div :class="style.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="props.title || slots.title" :class="style.title({ class: props.ui?.title })">
+        <slot name="title">
+          {{ props.title }}
+        </slot>
+      </div>
+      <div v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </div>
+
+      <div v-if="props.orientation === 'vertical' && props.actions?.length" :class="style.actions({ class: props.ui?.actions })">
+        <slot name="actions">
+          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="(props.orientation === 'horizontal' && props.actions?.length) || props.close" :class="style.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+      <template v-if="props.orientation === 'horizontal' && props.actions?.length">
+        <slot name="actions">
+          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </template>
+
+      <slot name="close" :ui="props.ui">
+        <Button
+          v-if="props.close"
+          :icon="props.closeIcon || theme.app.icons.close"
+          size="md"
+          variant="link"
+          aria-label="Close"
+          v-bind="typeof props.close === 'object' ? props.close : undefined"
+          :class="style.close({ class: props.ui?.close })"
+          @click="emit('update:open', false)"
+        />
+      </slot>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/Badge.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { badge } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type BadgeVariants = VariantProps<typeof badge>
+
+export interface BadgeProps extends ComponentAttrs<typeof badge>, Pick<PrimitiveProps, 'as'> {
+  text?: string | number
+  size?: BadgeVariants['size']
+  position?: BadgeVariants['position']
+  show?: boolean
+  /** When `true`, keep the badge inside the component for rounded elements. */
+  inset?: boolean
+  /** When `true`, render the badge relatively to the parent. */
+  standalone?: boolean
+}
+
+export interface BadgeEmits {
+  (e: 'update:show', payload: boolean): void
+}
+
+export interface BadgeSlots {
+  default?: (props?: {}) => any
+  content?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive, Slot } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  size: 'md',
+  position: 'top-right',
+})
+
+defineEmits<BadgeEmits>()
+defineSlots<BadgeSlots>()
+
+const show = defineModel<boolean>('show', { default: true })
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.badge)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+  >
+    <Slot v-bind="$attrs">
+      <slot></slot>
+    </Slot>
+
+    <span v-if="show" :class="style.base({ class: props.ui?.base })">
+      <slot name="content">
+        {{ props.text }}
+      </slot>
+    </span>
+  </Primitive>
+</template>

package/dist/runtime/components/Button.vue

@@ -28,7 +28,8 @@ export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>,
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useComponentIcons, useTheme } from '../composables'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
 import { omit, pickLinkProps } from '../utils'
 import Link from './Link.vue'
 
@@ -77,7 +78,7 @@ const style = computed(() => {
       ></i>
     </slot>
     <span
-      v-if="slots.default || props.label"
+      v-if="props.label || slots.default"
       :class="style.label({ class: props.ui?.label })"
     >
       <slot>{{ label }}</slot>

package/dist/runtime/components/Card.vue

@@ -22,7 +22,7 @@ export interface CardSlots {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<CardProps>(), {})
 const slots = defineSlots<CardSlots>()
@@ -38,12 +38,12 @@ const style = computed(() => {
   <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
     <slot name="content">
       <div
-        v-if="slots.header || slots.title || props.title || slots.description || props.description"
+        v-if="slots.header || props.title || slots.title || props.description || slots.description "
         :class="style.header({ class: props.ui?.header })"
       >
         <slot name="header">
           <Primitive
-            v-if="slots.title || props.title"
+            v-if="props.title || slots.title"
             :as="slots.title ? undefined : 'h2'"
             :class="style.title({ class: props.ui?.title })"
           >
@@ -52,7 +52,7 @@ const style = computed(() => {
             </slot>
           </Primitive>
           <Primitive
-            v-if="slots.description || props.description"
+            v-if="props.description || slots.description"
             :as="slots.description ? undefined : 'p'"
             :as-child="!!slots.description"
             :class="style.description({ class: props.ui?.description })"

package/dist/runtime/components/Checkbox.vue

@@ -37,7 +37,7 @@ export interface CheckboxSlots {
 import { reactivePick } from '@vueuse/core'
 import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from 'reka-ui'
 import { computed, useId } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
   size: 'md',

package/dist/runtime/components/Chip.vue

@@ -0,0 +1,59 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { chip } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps extends ComponentAttrs<typeof chip>, Pick<PrimitiveProps, 'as'>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  variant?: ChipVariants['variant']
+  size?: ChipVariants['size']
+  label?: string
+}
+
+export interface ChipSlots {
+  prefix?: (props?: {}) => any
+  default?: (props?: {}) => any
+  suffix?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<ChipProps>(), {
+  variant: 'solid',
+  size: 'md',
+})
+
+const slots = defineSlots<ChipSlots>()
+
+const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.chip)
+  return styler(props)
+})
+</script>
+
+<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>
+    </slot>
+
+    <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
+      <slot>{{ props.label }}</slot>
+    </span>
+
+    <slot name="suffix">
+      <i v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></i>
+    </slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Drawer.vue

@@ -53,7 +53,7 @@ import { reactivePick } from '@vueuse/core'
 import { useForwardPropsEmits } from 'reka-ui'
 import { DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from 'vaul-vue'
 import { computed, toRef } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
   direction: 'bottom',
@@ -94,7 +94,7 @@ const style = computed(() => {
         <slot name="content">
           <div :class="style.container({ class: props.ui?.container })">
             <div
-              v-if="slots.header || (props.title || slots.title) || (props.description || slots.description)"
+              v-if="slots.header || props.title || slots.title || props.description || slots.description"
               :class="style.header({ class: props.ui?.header })"
             >
               <slot name="header">

package/dist/runtime/components/Input.vue

@@ -46,7 +46,8 @@ export interface InputSlots {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed, onMounted, ref } from 'vue'
-import { useComponentIcons, useTheme } from '../composables'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
 import { looseToNumber } from '../utils'
 
 defineOptions({

package/dist/runtime/components/Link.vue

@@ -32,7 +32,7 @@ export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'> {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<LinkProps>(), {
   as: 'button',

package/dist/runtime/components/Modal.vue

@@ -46,7 +46,7 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
 import { reactivePick } from '@vueuse/core'
 import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ModalProps>(), {
@@ -95,7 +95,7 @@ const style = computed(() => {
       <DialogContent :class="style.content({ class: props.ui?.content })" v-bind="contentProps" v-on="contentEvents">
         <slot name="content">
           <div
-            v-if="slots.header || (props.title || slots.title) || (props.description || slots.description) || (props.close || slots.close)"
+            v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
             :class="style.header({ class: props.ui?.header })"
           >
             <slot name="header">

package/dist/runtime/components/PinInput.vue

@@ -0,0 +1,86 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PinInputRootProps } from 'reka-ui'
+import type { pinInput } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type PinInputVariants = VariantProps<typeof pinInput>
+
+export interface PinInputProps extends ComponentAttrs<typeof pinInput>, Pick<PinInputRootProps, 'as' | 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+  variant?: PinInputVariants['variant']
+  size?: PinInputVariants['size']
+  length?: number | string
+  underline?: boolean
+  highlight?: boolean
+}
+
+export interface PinInputEmits {
+  (event: 'update:modelValue', value: string[]): void
+  (event: 'complete', value: string[]): void
+  (event: 'change', payload: Event): void
+  (event: 'blur', payload: Event): void
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { looseToNumber } from '../utils'
+
+const props = withDefaults(defineProps<PinInputProps>(), {
+  variant: 'outline',
+  size: 'md',
+  length: 5,
+  type: 'text',
+})
+
+const emit = defineEmits<PinInputEmits>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emit)
+
+const completed = ref(false)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.pinInput)
+  return styler(props)
+})
+
+function onComplete(value: string[]) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  if (!event.relatedTarget || completed.value)
+    emit('blur', event)
+}
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="rootProps"
+    :id="props.id"
+    :name="props.name"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    @complete="onComplete"
+  >
+    <span
+      v-for="(ids, index) in looseToNumber(props.length)"
+      :key="ids"
+      :class="style.container({ class: props.ui?.container })"
+      :aria-disabled="props.disabled ? true : undefined"
+    >
+      <PinInputInput
+        :index="index"
+        :class="style.base({ class: props.ui?.base })"
+        v-bind="$attrs"
+        :disabled="props.disabled"
+        @blur="onBlur"
+      />
+    </span>
+  </PinInputRoot>
+</template>