@byyuurin/ui 0.0.7 → 0.0.9

package/dist/runtime/components/Chip.vue

@@ -5,19 +5,24 @@ import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { chip } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface ChipSlots {
+  leading?: (props?: {}) => any
+  default?: (props?: {}) => any
+  trailing?: (props?: {}) => any
+}
+
 type ChipVariants = VariantProps<typeof chip>
 
-export interface ChipProps extends ComponentAttrs<typeof chip>, Pick<PrimitiveProps, 'as'>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface ChipProps extends ComponentAttrs<typeof chip>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   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">
@@ -34,31 +39,28 @@ const props = withDefaults(defineProps<ChipProps>(), {
 const slots = defineSlots<ChipSlots>()
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.chip)
-  return styler({
-    ...props,
-    size: size.value,
-    groupOrientation: orientation.value,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('chip', {
+  ...props,
+  size: size.value,
+  groupOrientation: orientation.value,
+}))
 </script>
 
 <template>
   <Primitive :as="props.as" :class="style.base({ class: [props.class, props.ui?.base] })">
-    <slot name="prefix">
-      <span v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></span>
+    <slot name="leading">
+      <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"></span>
     </slot>
 
     <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
       <slot>{{ props.label }}</slot>
     </span>
 
-    <slot name="suffix">
-      <span v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></span>
+    <slot name="trailing">
+      <span v-if="isTrailing && trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"></span>
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Collapsible.vue

@@ -3,15 +3,15 @@ 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
 }
+
+export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+}
 </script>
 
 <script setup lang="ts">
@@ -28,11 +28,8 @@ 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)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('collapsible', props))
 </script>
 
 <template>

package/dist/runtime/components/Drawer.vue

@@ -1,11 +1,27 @@
 <script lang="ts">
-import type { DialogContentProps, PrimitiveProps } from 'reka-ui'
-import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
 import type { drawer } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ButtonProps, ComponentAttrs } from '../types'
 
-export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
-  as?: PrimitiveProps['as']
+export interface DrawerEmits extends DialogRootEmits {
+  'after-leave': []
+}
+
+export interface DrawerSlots {
+  default?: (props?: {}) => any
+  content?: (props?: {}) => any
+  header?: (props?: {}) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
+  close?: (props?: {}) => any
+  body?: (props?: {}) => any
+  footer?: (props?: {}) => any
+}
+
+type DrawerVariants = VariantProps<typeof drawer>
+
+export interface DrawerProps extends ComponentAttrs<typeof drawer>, DialogRootProps {
   title?: string
   description?: string
   /** The content of the drawer. */
@@ -15,108 +31,134 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
    * @default true
    */
   overlay?: boolean
+  /** @default true */
+  transition?: boolean
+  /**
+   * The direction of the drawer.
+   * @default "bottom"
+   */
+  direction?: DrawerVariants['direction']
   /**
    * Whether to inset the drawer from the edges.
    */
   inset?: boolean
   /**
-   * Render a handle on the drawer.
+   * Render the drawer in a portal.
    * @default true
    */
-  handle?: boolean
+  portal?: boolean
   /**
-   * Render the drawer in a portal.
+   * Display a close button to dismiss the drawer.
    * @default true
    */
-  portal?: boolean
+  close?: ButtonProps | boolean
+  /** @default app.icons.close */
+  closeIcon?: string
   /**
    * When `false`, the drawer will not close when clicking outside or pressing escape.
    * @default true
    */
   dismissible?: boolean
 }
-
-export interface DrawerEmits extends DrawerRootEmits {}
-
-export interface DrawerSlots {
-  default?: (props?: {}) => any
-  handle?: (props?: {}) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  body?: (props?: {}) => any
-  footer?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">
 import { reactivePick } from '@vueuse/core'
-import { useForwardPropsEmits } from 'reka-ui'
-import { DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from 'vaul-vue'
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
 import { computed, toRef } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
   direction: 'bottom',
+  modal: true,
   portal: true,
   overlay: true,
-  handle: true,
+  transition: true,
+  dismissible: true,
+  close: true,
 })
 const emit = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'direction', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emit)
-const contentProps = toRef(() => props.content)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emit)
+const contentProps = toRef(() => ({
+  ...props.content,
+  ...(slots.content || slots.header || (!props.description && !slots.description)) ? { 'aria-describedby': undefined } : {},
+}))
+const contentEvents = computed(() => {
+  if (props.dismissible)
+    return {}
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.drawer)
-  return styler(props)
+  return {
+    pointerDownOutside: (e: Event) => e.preventDefault(),
+    interactOutside: (e: Event) => e.preventDefault(),
+    escapeKeyDown: (e: Event) => e.preventDefault(),
+  }
 })
+
+const { t } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('drawer', props))
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
-    <DrawerTrigger v-if="slots.default" as-child :class="props.class">
-      <slot></slot>
-    </DrawerTrigger>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="slots.default" as-child :class="props.class">
+      <slot :open="open"></slot>
+    </DialogTrigger>
 
-    <DrawerPortal :disabled="!props.portal">
-      <DrawerOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
+    <DialogPortal :disabled="!props.portal">
+      <DialogOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
 
-      <DrawerContent
+      <DialogContent
         :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        :data-direction="props.direction"
         v-bind="contentProps"
+        v-on="contentEvents"
+        @after-leave="emit('after-leave')"
       >
-        <slot name="handle">
-          <div v-if="props.handle" :class="style.handle({ class: props.ui?.handle })"></div>
-        </slot>
+        <VisuallyHidden v-if="slots.content || slots.header || (!props.title && !slots.title)">
+          <DialogTitle />
+        </VisuallyHidden>
 
         <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 || props.close || slots.close"
               :class="style.header({ class: props.ui?.header })"
             >
               <slot name="header">
-                <DrawerTitle
+                <DialogTitle
                   v-if="props.title || slots.title"
                   :class="style.title({ class: props.ui?.title })"
                 >
                   <slot name="title">
                     {{ props.title }}
                   </slot>
-                </DrawerTitle>
+                </DialogTitle>
+
+                <DialogClose v-if="props.close || slots.close" as-child>
+                  <slot name="close">
+                    <Button
+                      variant="ghost"
+                      :icon="props.closeIcon || theme.app.icons.close"
+                      v-bind="typeof props.close === 'boolean' ? {} : props.close"
+                      :class="style.close({ class: props.ui?.close })"
+                      :aria-label="t('modal.close')"
+                    />
+                  </slot>
+                </DialogClose>
 
-                <DrawerDescription
+                <DialogDescription
                   v-if="props.description || slots.description"
                   :class="style.description({ class: props.ui?.description })"
                 >
                   <slot name="description">
                     {{ props.description }}
                   </slot>
-                </DrawerDescription>
+                </DialogDescription>
               </slot>
             </div>
 
@@ -129,7 +171,7 @@ const style = computed(() => {
             </div>
           </div>
         </slot>
-      </DrawerContent>
-    </DrawerPortal>
-  </DrawerRoot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
 </template>

package/dist/runtime/components/Input.vue

@@ -6,12 +6,24 @@ import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { input } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface InputEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface InputSlots {
+  leading?: (props?: {}) => any
+  default?: (props?: {}) => any
+  trailing?: (props?: {}) => any
+}
+
 type InputVariants = VariantProps<typeof input>
 
 export interface InputProps extends ComponentAttrs<typeof input>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'div'
+   * @default "div"
    */
   as?: PrimitiveProps['as']
   id?: string
@@ -29,18 +41,6 @@ export interface InputProps extends ComponentAttrs<typeof input>, UseComponentIc
   autofocusDelay?: number
   disabled?: boolean
 }
-
-export interface InputEmits {
-  (e: 'update:modelValue', payload: string | number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
-}
-
-export interface InputSlots {
-  prefix?: (props?: {}) => any
-  default?: (props?: {}) => any
-  suffix?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -69,21 +69,18 @@ const [modelValue, modelModifiers] = defineModel<string | number>()
 const inputRef = ref<HTMLInputElement | null>(null)
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
-
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.input)
-  return styler({
-    ...props,
-    // @ts-expect-error ignore type
-    type: props.type,
-    size: size.value,
-    groupOrientation: orientation.value,
-    prefix: isPrefix.value || !!slots.prefix,
-    suffix: isSuffix.value || !!slots.suffix,
-  })
-})
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
+
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('input', {
+  ...props,
+  // @ts-expect-error ignore type
+  type: props.type,
+  size: size.value,
+  groupOrientation: orientation.value,
+  leading: isLeading.value || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+}))
 
 function autoFocus() {
   if (props.autofocus)
@@ -138,11 +135,11 @@ onMounted(() => {
     :class="style.base({ class: [props.class, props.ui?.base] })"
     :aria-disabled="props.disabled ? true : undefined"
   >
-    <span v-if="isPrefix || slots.prefix" :class="style.prefix({ class: props.ui?.prefix })">
-      <slot name="prefix">
+    <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })">
+      <slot name="leading">
         <span
-          v-if="isPrefix && prefixIconName"
-          :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
+          v-if="isLeading && leadingIconName"
+          :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"
         ></span>
       </slot>
     </span>
@@ -166,11 +163,11 @@ onMounted(() => {
 
     <slot></slot>
 
-    <span v-if="isSuffix || slots.suffix" :class="style.suffix({ class: props.ui?.suffix })">
-      <slot name="suffix">
+    <span v-if="isTrailing || slots.trailing" :class="style.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
         <span
-          v-if="isSuffix && suffixIconName"
-          :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
+          v-if="isTrailing && trailingIconName"
+          :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"
         ></span>
       </slot>
     </span>

package/dist/runtime/components/InputNumber.vue

@@ -27,7 +27,7 @@ export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pi
   highlight?: boolean
   /**
    * The orientation of the input menu.
-   * @default 'horizontal'
+   * @default "horizontal"
    */
   orientation?: InputNumberVariants['orientation']
   /**
@@ -63,6 +63,7 @@ export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pi
 import { reactivePick } from '@vueuse/core'
 import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, onMounted, ref } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -81,14 +82,12 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', '
 
 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 { t } = useLocale()
+const { theme, generateStyle } = useTheme()
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.plus : theme.value.app.icons.chevronUp))
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.minus : theme.value.app.icons.chevronDown))
 
-const style = computed(() => {
-  const styler = createStyler(theme.value.inputNumber)
-  return styler(props)
-})
+const style = computed(() => generateStyle('inputNumber', props))
 
 onMounted(() => {
   setTimeout(() => {
@@ -143,7 +142,7 @@ function onBlur(event: FocusEvent) {
             :icon="incrementIcon"
             :size="props.size"
             variant="link"
-            aria-label="increment"
+            :aria-label="t('inputNumber.increment')"
             v-bind="typeof props.increment === 'object' ? props.increment : undefined"
           />
         </slot>
@@ -157,7 +156,7 @@ function onBlur(event: FocusEvent) {
             :icon="decrementIcon"
             :size="props.size"
             variant="link"
-            aria-label="decrement"
+            :aria-label="t('inputNumber.decrement')"
             v-bind="typeof props.decrement === 'object' ? props.decrement : undefined"
           />
         </slot>

package/dist/runtime/components/Kbd.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { KbdKey } from '../composables/useKbd'
+import type { kbd } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface KbdSlots {
+  default?: (props?: {}) => any
+}
+
+type KbdVariants = VariantProps<typeof kbd>
+
+export interface KbdProps extends Omit<ComponentAttrs<typeof kbd>, 'ui'> {
+  /**
+   * The element or component this component should render as.
+   * @default "kbd"
+   */
+  as?: PrimitiveProps['as']
+  variant?: KbdVariants['variant']
+  size?: KbdVariants['size']
+  value?: KbdKey | (string & {})
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { useKbd } from '../composables/useKbd'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<KbdProps>(), {
+  as: 'kbd',
+})
+
+defineSlots<KbdSlots>()
+
+const { getKbdKey } = useKbd()
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('kbd', props))
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style">
+    <slot>{{ getKbdKey(props.value) }}</slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Link.vue

@@ -5,6 +5,10 @@ import type { RouteLocationRaw, RouterLinkProps } from 'vue-router'
 import type { link } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface LinkSlots {
+  default?: (props: { active: boolean }) => any
+}
+
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
   /**
    * Route Location the link should navigate to when clicked on.
@@ -54,12 +58,12 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
 export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'>, NuxtLinkProps {
   /**
    * The element or component this component should render as when not a link.
-   * @default 'button'
+   * @default "button"
    */
   as?: PrimitiveProps['as']
   /**
    * The type of the button when not a link.
-   * @default 'button'
+   * @default "button"
    */
   type?: ButtonHTMLAttributes['type']
   label?: string
@@ -81,10 +85,6 @@ export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'>, Nuxt
   /** When `true`, only styles from `class`, `ui.active`, and `ui.inactive` will be applied. */
   raw?: boolean
 }
-
-export interface LinkSlots {
-  default?: (props: { active: boolean }) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -163,10 +163,12 @@ function isPartiallyEqual(item1: any, item2: any) {
 }
 
 const isExternalLink = computed(() => {
-  if (!props.to)
+  const to = props.to || props.href
+
+  if (!to)
     return false
 
-  return typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true })
+  return typeof to === 'string' && hasProtocol(to, { acceptRelative: true })
 })
 
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
@@ -301,6 +303,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           href: to ? href : undefined,
           navigate,
         }"
+        :is-external="isExternalLink"
         :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
       >
         <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
@@ -317,8 +320,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           as,
           type,
           disabled,
-          href: to,
-          target: isExternalLink ? '_blank' : undefined,
+          href: to || href,
+          target: target || (isExternalLink ? '_blank' : undefined),
           active: false,
         }"
       >
@@ -332,8 +335,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
         as,
         type,
         disabled,
-        href: (to as string),
-        target: isExternalLink ? '_blank' : undefined,
+        href: ((typeof to === 'string' ? to : href) as string),
+        target: target || (isExternalLink ? '_blank' : undefined),
       }"
       :is-external="isExternalLink"
       :class="resolveLinkClass()"

package/dist/runtime/components/LinkBase.vue

@@ -4,7 +4,7 @@ import type { PrimitiveProps } from 'reka-ui'
 export interface LinkBaseProps {
   /**
    * The element or component this component should render as.
-   * @default 'button'
+   * @default "button"
    */
   as?: PrimitiveProps['as']
   type?: string