@byyuurin/ui 0.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Yuurin<https://github.com/byyuurin>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+# @byyuurin/ui
+
+A collection of Vue.js components for my projects.
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![bundle][bundle-src]][bundle-href]
+[![JSDocs][jsdocs-src]][jsdocs-href]
+[![License][license-src]][license-href]
+
+## Setup
+
+```ssh
+pnpm i @byyuurin/ui
+```
+
+## License
+
+[MIT](./LICENSE) License © 2024-PRESENT [Yuurin](https://github.com/byyurin)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@byyuurin/ui?style=flat&colorA=080f12&colorB=1fa669
+[npm-version-href]: https://npmjs.com/package/@byyuurin/ui
+[npm-downloads-src]: https://img.shields.io/npm/dm/@byyuurin/ui?style=flat&colorA=080f12&colorB=1fa669
+[npm-downloads-href]: https://npmjs.com/package/@byyuurin/ui
+[bundle-src]: https://img.shields.io/bundlephobia/minzip/@byyuurin/ui?style=flat&colorA=080f12&colorB=1fa669&label=minzip
+[bundle-href]: https://bundlephobia.com/result?p=@byyuurin/ui
+[license-src]: https://img.shields.io/github/license/byyuurin/@byyuurin/ui.svg?style=flat&colorA=080f12&colorB=1fa669
+[license-href]: https://github.com/byyuurin/@byyuurin/ui/blob/main/LICENSE
+[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
+[jsdocs-href]: https://www.jsdocs.io/package/@byyuurin/ui

package/dist/components/Accordion.vue

@@ -0,0 +1,104 @@
+<script lang="ts">
+import type { AccordionRootEmits, AccordionRootProps, PrimitiveProps } from 'reka-ui'
+import type { accordion } from '../theme'
+import type { ComponentAttrs, DynamicSlots } from '../types'
+
+export interface AccordionItem {
+  label?: string
+  icon?: string
+  trailingIcon?: string
+  slot?: string
+  content?: string
+  /** A unique value for the accordion item. Defaults to the index. */
+  value?: string
+  disabled?: boolean
+}
+
+export interface AccordionEmits extends AccordionRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
+
+export type AccordionSlots<T extends { slot?: string }> = {
+  default?: SlotProps<T>
+  icon?: SlotProps<T>
+  content?: SlotProps<T>
+  body?: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+
+export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+  as?: PrimitiveProps['as']
+  items?: T[]
+  labelKey?: string
+}
+</script>
+
+<script setup lang="ts" generic="T extends AccordionItem">
+import { reactivePick } from '@vueuse/core'
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables'
+import { get } from '../utils'
+
+const props = withDefaults(defineProps<AccordionProps<T>>(), {
+  type: 'single',
+  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 { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.accordion)
+  return styler(props)
+})
+</script>
+
+<template>
+  <AccordionRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <AccordionItem
+      v-for="(item, index) in props.items"
+      v-slot="{ open }"
+      :key="index"
+      :value="item.value || String(index)"
+      :disabled="item.disabled"
+      :class="style.item({ class: props.ui?.item })"
+    >
+      <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>
+
+          <span v-if="get(item, props.labelKey as string) || slots.default" :class="style.label({ class: props.ui?.label })">
+            <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey as string) }}</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>
+        </AccordionTrigger>
+      </AccordionHeader>
+
+      <AccordionContent
+        v-if="item.content || slots.content || (item.slot && slots[item.slot]) || slots.body || (slots[`${item.slot}-body`])"
+        :class="style.content({ class: props.ui?.content })"
+      >
+        <slot :name="item.slot || 'content'" v-bind="{ item, index, open }">
+          <div :class="style.body({ class: props.ui?.body })">
+            <slot :name="item.slot ? item.slot : 'body'" v-bind="{ item, index, open }">
+              {{ item.content }}
+            </slot>
+          </div>
+        </slot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>
+
+<style>
+@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/components/App.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
+import type { ThemeExtension, ToasterProps } from '../types'
+
+export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+  ui?: ThemeExtension
+  tooltip?: TooltipProviderProps
+  toaster?: ToasterProps
+}
+
+export interface AppSlots {
+  default: (props?: Record<string, unknown>) => any
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
+import { computed, shallowRef, toRef, useId } from 'vue'
+import type { ModalState } from '../composables/useModal'
+import { provideModalState } from '../composables/useModal'
+import { provideThemeExtension } from '../composables/useTheme'
+import ModalProvider from './ModalProvider.vue'
+import Toaster from './Toaster.vue'
+
+const props = withDefaults(defineProps<AppProps>(), {
+  ui: () => ({}),
+})
+
+defineSlots<AppSlots>()
+
+const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
+const tooltipProps = toRef(() => props.tooltip)
+const toasterProps = toRef(() => props.toaster)
+
+const modalState = shallowRef<ModalState>({
+  component: 'div',
+  props: {},
+})
+
+const themeExtension = computed(() => props.ui)
+
+provideModalState(modalState)
+provideThemeExtension(themeExtension)
+</script>
+
+<template>
+  <ConfigProvider :use-id="useId" v-bind="configProviderProps">
+    <TooltipProvider v-bind="tooltipProps">
+      <Toaster v-if="props.toaster !== null" v-bind="toasterProps">
+        <slot></slot>
+      </Toaster>
+      <slot v-else></slot>
+    </TooltipProvider>
+    <ModalProvider />
+  </ConfigProvider>
+</template>

package/dist/components/Button.vue

@@ -0,0 +1,94 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { button } from '../theme'
+import type { ComponentAttrs } from '../types'
+import type { LinkProps } from './Link.vue'
+
+export interface ButtonSlots {
+  default?: (props?: any) => any
+  prefix?: (props?: any) => any
+  suffix?: (props?: any) => any
+}
+
+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'> {
+  icon?: string
+  label?: string
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  round?: boolean
+  loading?: boolean
+  active?: boolean
+  disabled?: boolean
+  ui?: UIOptions
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useComponentIcons, useTheme } from '../composables'
+import { pickLinkProps } from '../internal'
+import { omit } from '../utils'
+import Link from './Link.vue'
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: 'solid',
+  size: 'md',
+})
+
+const slots = defineSlots<ButtonSlots>()
+
+const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(
+  computed(() => ({ ...props, loading: props.loading })),
+)
+
+const linkProps = pickLinkProps(props)
+
+const { theme, createStyler } = useTheme()
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.button)
+  return styler({
+    ...props,
+    prefix: isPrefix.value,
+    suffix: isSuffix.value,
+    class: [
+      props.class,
+      props.active ? props.ui?.active : props.ui?.inactive,
+      props.disabled ? props.ui?.disabled : undefined,
+    ],
+  })
+})
+</script>
+
+<template>
+  <Link
+    :class="style.base({ class: [props.class, props.ui?.base] })"
+    :type="props.type"
+    :disabled="props.disabled || props.loading"
+    v-bind="omit(linkProps, ['type', 'disabled'])"
+    raw
+  >
+    <slot name="prefix">
+      <i
+        v-if="isPrefix && prefixIconName"
+        :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
+      ></i>
+    </slot>
+    <span
+      v-if="slots.default || props.label"
+      :class="style.label({ class: props.ui?.label })"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+    <slot name="suffix">
+      <i
+        v-if="isSuffix && suffixIconName"
+        :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
+      ></i>
+    </slot>
+  </Link>
+</template>

package/dist/components/Card.vue

@@ -0,0 +1,76 @@
+<script lang="ts">
+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
+  header?: (props?: {}) => any
+  title?: (props?: any) => any
+  description?: (props?: any) => any
+  footer?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables'
+
+const props = withDefaults(defineProps<CardProps>(), {})
+const slots = defineSlots<CardSlots>()
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.card)
+  return styler(props)
+})
+</script>
+
+<template>
+  <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"
+        :class="style.header({ class: props.ui?.header })"
+      >
+        <slot name="header">
+          <Primitive
+            v-if="slots.title || props.title"
+            :as="slots.title ? undefined : 'h2'"
+            :class="style.title({ class: props.ui?.title })"
+          >
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </Primitive>
+          <Primitive
+            v-if="slots.description || props.description"
+            :as="slots.description ? undefined : 'p'"
+            :as-child="!!slots.description"
+            :class="style.description({ class: props.ui?.description })"
+          >
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </Primitive>
+        </slot>
+      </div>
+
+      <div v-if="slots.default" :class="style.body({ class: props.ui?.body })">
+        <slot></slot>
+      </div>
+
+      <div v-if="slots.footer" :class="style.footer({ class: props.ui?.footer })">
+        <slot name="footer"></slot>
+      </div>
+    </slot>
+  </Primitive>
+</template>

package/dist/components/Checkbox.vue

@@ -0,0 +1,104 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { CheckboxRootProps, PrimitiveProps } from 'reka-ui'
+import type { checkbox } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type CheckboxVariants = VariantProps<typeof checkbox>
+
+export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+  as?: PrimitiveProps['as']
+  label?: string
+  description?: string
+  size?: CheckboxVariants['size']
+  /**
+   * The icon displayed when checked.
+   * @default app.icons.check
+   */
+  icon?: string
+  /**
+   * The icon displayed when the checkbox is indeterminate.
+   * @default app.icons.indeterminate
+   */
+  indeterminateIcon?: string
+}
+
+export interface CheckboxEmits {
+  (event: 'change', payload: Event): void
+}
+
+export interface CheckboxSlots {
+  label?: (props: { label?: string }) => any
+  description?: (props: { description?: string }) => any
+}
+</script>
+
+<script lang="ts" setup>
+import { reactivePick } from '@vueuse/core'
+import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from 'reka-ui'
+import { computed, useId } from 'vue'
+import { useTheme } from '../composables'
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  size: 'md',
+  required: false,
+  disabled: false,
+})
+const emit = defineEmits<CheckboxEmits>()
+const slots = defineSlots<CheckboxSlots>()
+
+const innerValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
+
+const id = props.id ?? useId()
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.checkbox)
+  return styler({
+    ...props,
+    checked: Boolean(innerValue.value ?? props.defaultValue),
+  })
+})
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: value })
+  emit('change', event)
+}
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <div :class="style.container({ class: props.ui?.container })">
+      <CheckboxRoot
+        :id="id"
+        v-bind="rootProps"
+        v-slot="{ modelValue }"
+        v-model="innerValue"
+        :name="props.name"
+        :disabled="props.disabled"
+        :class="style.base({ class: props.ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <CheckboxIndicator as-child>
+          <i
+            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>
+        </CheckboxIndicator>
+      </CheckboxRoot>
+    </div>
+    <div v-if="props.label || slots.label || props.description || slots.description" :class="style.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })">
+        <slot name="label" :label="props.label">{{ props.label }}</slot>
+      </Label>
+      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
+</template>

package/dist/components/Drawer.vue

@@ -0,0 +1,133 @@
+<script lang="ts">
+import type { DialogContentProps, PrimitiveProps } from 'reka-ui'
+import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import type { drawer } from '../theme'
+import type { 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']
+  title?: string
+  description?: string
+  /** The content of the drawer. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the drawer.
+   * @default true
+   */
+  overlay?: boolean
+  blur?: boolean
+  full?: boolean
+  /**
+   * Render a handle on the drawer.
+   * @default true
+   */
+  handle?: boolean
+  /**
+   * Render the drawer in a portal.
+   * @default true
+   */
+  portal?: boolean
+  /**
+   * 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 { computed, toRef } from 'vue'
+import { useTheme } from '../composables'
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  direction: 'bottom',
+  portal: true,
+  overlay: true,
+  handle: 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 { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.drawer)
+  return styler(props)
+})
+</script>
+
+<template>
+  <DrawerRoot v-bind="rootProps">
+    <DrawerTrigger v-if="slots.default" as-child :class="props.class">
+      <slot></slot>
+    </DrawerTrigger>
+
+    <DrawerPortal :disabled="!props.portal">
+      <DrawerOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
+
+      <DrawerContent
+        :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        v-bind="contentProps"
+      >
+        <slot name="handle">
+          <div v-if="props.handle" :class="style.handle({ class: props.ui?.handle })"></div>
+        </slot>
+
+        <slot name="content">
+          <div :class="style.container({ class: props.ui?.container })">
+            <div
+              v-if="slots.header || (props.title || slots.title) || (props.description || slots.description)"
+              :class="style.header({ class: props.ui?.header })"
+            >
+              <slot name="header">
+                <DrawerTitle
+                  v-if="props.title || slots.title"
+                  :class="style.title({ class: props.ui?.title })"
+                >
+                  <slot name="title">
+                    {{ props.title }}
+                  </slot>
+                </DrawerTitle>
+
+                <DrawerDescription
+                  v-if="props.description || slots.description"
+                  :class="style.description({ class: props.ui?.description })"
+                >
+                  <slot name="description">
+                    {{ props.description }}
+                  </slot>
+                </DrawerDescription>
+              </slot>
+            </div>
+
+            <div v-if="slots.body" :class="style.body({ class: props.ui?.body })">
+              <slot name="body"></slot>
+            </div>
+
+            <div v-if="slots.footer" :class="style.footer({ class: props.ui?.footer })">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </slot>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>