@byyuurin/ui 0.0.5 → 0.0.6

package/README.md

@@ -5,7 +5,6 @@ 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]
 
 ## Preview
@@ -30,7 +29,7 @@ pnpm i -D @iconify-json/[the-collection-you-want]
 
 ```ts
 // uno.config.ts
-import ui from '@byyuurin/ui/unocss-preset'
+import { preset as ui } from '@byyuurin/ui/unocss'
 import { defineConfig, presetIcons, presetUno } from 'unocss'
 
 export default defineConfig({
@@ -43,6 +42,9 @@ export default defineConfig({
       radius: '0rem', // optional
       radiusBox: '0rem', // optional
       radiusButton: '0rem', // optional
+      radiusCheckbox: '0rem', // optional
+      radiusRadio: '0rem', // optional
+      radiusSwitch: '0rem', // optional
       radiusTabs: '0rem', // optional
       cb: '#1f2937', // optional
       c1: '#ffffff', // optional
@@ -53,6 +55,12 @@ export default defineConfig({
 })
 ```
 
+New Rules
+
+- `ui-[color]`
+- `bg-solid-[color]`
+- `bg-solid-[color]/[opacity]`
+
 ### Vite
 
 ```ts
@@ -62,7 +70,6 @@ import UI from '@byyuurin/ui/vite'
 import Vue from '@vitejs/plugin-vue'
 import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
-import Inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   plugins: [
@@ -111,7 +118,7 @@ export default defineNuxtConfig({
 
 ## License
 
-[MIT](./LICENSE) License © 2024-PRESENT [Yuurin](https://github.com/byyurin)
+[MIT](./LICENSE) License © 2024-PRESENT [Yuurin](https://github.com/byyuurin)
 
 <!-- Badges -->
 
@@ -121,7 +128,5 @@ export default defineNuxtConfig({
 [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
+[license-src]: https://img.shields.io/github/license/byyuurin/ui.svg?style=flat&colorA=080f12&colorB=1fa669
+[license-href]: https://github.com/byyuurin/ui/blob/main/LICENSE

package/dist/index.d.ts

@@ -3,7 +3,9 @@ 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 ButtonGroup } from './runtime/components/ButtonGroup.vue';
 export { default as Card } from './runtime/components/Card.vue';
+export { default as Carousel } from './runtime/components/Carousel.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';
@@ -11,6 +13,7 @@ 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 Pagination } from './runtime/components/Pagination.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';

package/dist/index.mjs

@@ -3,7 +3,9 @@ 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 ButtonGroup } from "./runtime/components/ButtonGroup.vue";
 export { default as Card } from "./runtime/components/Card.vue";
+export { default as Carousel } from "./runtime/components/Carousel.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";
@@ -11,6 +13,7 @@ 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 Pagination } from "./runtime/components/Pagination.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";

package/dist/nuxt.mjs

@@ -1,7 +1,5 @@
 import { defineNuxtModule, useLogger, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { p as packageName } from './shared/ui.CzDyI29e.mjs';
-import 'node:url';
-import 'pathe';
+import { p as packageName } from './shared/ui.D4zm1r0C.mjs';
 
 const nuxt = defineNuxtModule({
   meta: {
@@ -21,6 +19,9 @@ const nuxt = defineNuxtModule({
       logger.error(`\`${packageName}\` requires the \`@unocss/nuxt\` module to be installed.`);
       return;
     }
+    nuxt.options.vite.optimizeDeps ??= {};
+    nuxt.options.vite.optimizeDeps.include ??= [];
+    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`);
     nuxt.options.alias["#ui"] = resolve("./runtime");
     addComponentsDir({
       path: resolve("./runtime/components"),

package/dist/nuxt.mjs.map

@@ -1 +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;;;;"}
+{"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 './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.vite.optimizeDeps ??= {}\r\n    nuxt.options.vite.optimizeDeps.include ??= []\r\n    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`)\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,IAAK,IAAA,CAAA,OAAA,CAAQ,IAAK,CAAA,YAAA,KAAiB,EAAC;AACpC,IAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,CAAK,YAAa,CAAA,OAAA,KAAY,EAAC;AAC5C,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA,YAAA,CAAa,QAAQ,IAAK,CAAA,CAAA,EAAG,WAAW,CAAS,OAAA,CAAA,CAAA;AAEnE,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/App.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
+import type { UserConfig } from '@unocss/core'
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import type { UserConfig } from 'unocss'
 import type { ThemeExtension, ToasterProps } from '../types'
 
 export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {

package/dist/runtime/components/Badge.vue

@@ -37,7 +37,6 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<BadgeProps>(), {
-  size: 'md',
   position: 'top-right',
 })
 

package/dist/runtime/components/Button.vue

@@ -28,6 +28,7 @@ export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>,
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useTheme } from '../composables/useTheme'
 import { omit, pickLinkProps } from '../utils'
@@ -35,11 +36,11 @@ import Link from './Link.vue'
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   variant: 'solid',
-  size: 'md',
 })
 
 const slots = defineSlots<ButtonSlots>()
 
+const { size, orientation } = useButtonGroup(props)
 const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: props.loading })),
 )
@@ -52,6 +53,8 @@ const style = computed(() => {
   const styler = createStyler(theme.value.button)
   return styler({
     ...props,
+    size: size.value,
+    groupOrientation: orientation.value,
     prefix: isPrefix.value,
     suffix: isSuffix.value,
     class: [

package/dist/runtime/components/ButtonGroup.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { buttonGroup } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type ButtonGroupVariant = VariantProps<typeof buttonGroup>
+
+export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'>, Pick<PrimitiveProps, 'as'> {
+  size?: ButtonGroupVariant['size']
+  orientation?: ButtonGroupVariant['orientation']
+}
+
+export interface ButtonGroupSlots {
+  default?: (props?: any) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { provideButtonGroup } from '../composables/useButtonGroup'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<ButtonGroupProps>(), {
+  orientation: 'horizontal',
+})
+
+defineSlots<ButtonGroupSlots>()
+
+provideButtonGroup(computed(() => ({
+  size: props.size,
+  orientation: props.orientation,
+})))
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.buttonGroup)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style">
+    <slot></slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Carousel.vue

@@ -0,0 +1,310 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+import type { AutoHeightOptionsType } from 'embla-carousel-auto-height'
+import type { AutoScrollOptionsType } from 'embla-carousel-auto-scroll'
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay'
+import type { ClassNamesOptionsType } from 'embla-carousel-class-names'
+import type { FadeOptionsType } from 'embla-carousel-fade'
+import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
+import type { AcceptableValue, PrimitiveProps } from 'reka-ui'
+import type { carousel } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+type CarouselVariants = VariantProps<typeof carousel>
+
+export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<PrimitiveProps, 'as'>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+  /**
+   * Configure the prev button when arrows are enabled.
+   * @default { size: 'md', variant: 'link' }
+   */
+  prev?: ButtonProps
+  /**
+   * The icon displayed in the prev button.
+   * @default `app.icons.arrowLeft`
+   */
+  prevIcon?: string
+  /**
+   * Configure the next button when arrows are enabled.
+   * @default { size: 'md', variant: 'link' }
+   */
+  next?: ButtonProps
+  /**
+   * The icon displayed in the next button.
+   * @default `app.icons.arrowRight`
+   */
+  nextIcon?: string
+  /**
+   * Display prev and next buttons to scroll the carousel.
+   * @default false
+   */
+  arrows?: boolean
+  /**
+   * Display dots to scroll to a specific slide.
+   * @default false
+   */
+  dots?: boolean
+  orientation?: CarouselVariants['orientation']
+  items?: T[]
+  dir?: 'rtl' | 'ltr'
+  /**
+   * Enable Autoplay plugin
+   * @link https://www.embla-carousel.com/plugins/autoplay/
+   */
+  autoplay?: boolean | AutoplayOptionsType
+  /**
+   * Enable Auto Scroll plugin
+   * @link https://www.embla-carousel.com/plugins/auto-scroll/
+   */
+  autoScroll?: boolean | AutoScrollOptionsType
+  /**
+   * Enable Auto Height plugin
+   * @link https://www.embla-carousel.com/plugins/auto-height/
+   */
+  autoHeight?: boolean | AutoHeightOptionsType
+  /**
+   * Enable Class Names plugin
+   * @link https://www.embla-carousel.com/plugins/class-names/
+   */
+  classNames?: boolean | ClassNamesOptionsType
+  /**
+   * Enable Fade plugin
+   * @link https://www.embla-carousel.com/plugins/fade/
+   */
+  fade?: boolean | FadeOptionsType
+  /**
+   * Enable Wheel Gestures plugin
+   * @link https://www.embla-carousel.com/plugins/wheel-gestures/
+   */
+  wheelGestures?: boolean | WheelGesturesPluginOptions
+}
+
+export interface CarouselSlots<T> {
+  default?: (props: { item: T, index: number }) => any
+}
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { computedAsync, reactivePick } from '@vueuse/core'
+import useEmblaCarousel from 'embla-carousel-vue'
+import { Primitive, useForwardProps } from 'reka-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<CarouselProps<T>>(), {
+  orientation: 'horizontal',
+  arrows: false,
+  dots: false,
+
+  dir: 'ltr',
+
+  // Embla Options
+  active: true,
+  align: 'center',
+  breakpoints: () => ({}),
+  containScroll: 'trimSnaps',
+  dragFree: false,
+  dragThreshold: 10,
+  duration: 25,
+  inViewThreshold: 0,
+  loop: false,
+  skipSnaps: false,
+  slidesToScroll: 1,
+  startIndex: 0,
+  watchDrag: true,
+  watchResize: true,
+  watchSlides: true,
+  watchFocus: true,
+
+  // Embla Plugins
+  autoplay: false,
+  autoScroll: false,
+  autoHeight: false,
+  classNames: false,
+  fade: false,
+  wheelGestures: false,
+})
+defineSlots<CarouselSlots<T>>()
+
+const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.carousel)
+  return styler(props)
+})
+
+const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowRight : theme.value.app.icons.arrowLeft))
+const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowLeft : theme.value.app.icons.arrowRight))
+
+const options = computed<EmblaOptionsType>(() => ({
+  ...(props.fade ? { align: 'center', containScroll: false } : {}),
+  ...rootProps.value,
+  axis: props.orientation === 'horizontal' ? 'x' : 'y',
+  direction: props.dir === 'rtl' ? 'rtl' : 'ltr',
+}))
+
+const plugins = computedAsync<EmblaPluginType[]>(async () => {
+  const plugins: EmblaPluginType[] = []
+
+  if (props.autoplay) {
+    const AutoplayPlugin = await import('embla-carousel-autoplay').then((r) => r.default)
+    plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
+  }
+
+  if (props.autoScroll) {
+    const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then((r) => r.default)
+    plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
+  }
+
+  if (props.autoHeight) {
+    const AutoHeightPlugin = await import('embla-carousel-auto-height').then((r) => r.default)
+    plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
+  }
+
+  if (props.classNames) {
+    const ClassNamesPlugin = await import('embla-carousel-class-names').then((r) => r.default)
+    plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
+  }
+
+  if (props.fade) {
+    const FadePlugin = await import('embla-carousel-fade').then((r) => r.default)
+    plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
+  }
+
+  if (props.wheelGestures) {
+    const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
+    plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
+  }
+
+  return plugins
+})
+
+const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)
+
+watch([options, plugins], () => {
+  emblaApi.value?.reInit(options.value, plugins.value)
+})
+
+function scrollPrev() {
+  emblaApi.value?.scrollPrev()
+}
+
+function scrollNext() {
+  emblaApi.value?.scrollNext()
+}
+
+function scrollTo(index: number) {
+  emblaApi.value?.scrollTo(index)
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+
+const canScrollNext = ref(false)
+const canScrollPrev = ref(false)
+const selectedIndex = ref<number>(0)
+const scrollSnaps = ref<number[]>([])
+
+function onInit(api: EmblaCarouselType) {
+  scrollSnaps.value = api?.scrollSnapList() || []
+}
+
+function onSelect(api: EmblaCarouselType) {
+  canScrollNext.value = api?.canScrollNext() || false
+  canScrollPrev.value = api?.canScrollPrev() || false
+  selectedIndex.value = api?.selectedScrollSnap() || 0
+}
+
+onMounted(() => {
+  if (!emblaApi.value)
+    return
+
+  emblaApi.value?.on('init', onInit)
+  emblaApi.value?.on('init', onSelect)
+  emblaApi.value?.on('reInit', onInit)
+  emblaApi.value?.on('reInit', onSelect)
+  emblaApi.value?.on('select', onSelect)
+})
+
+defineExpose({
+  emblaRef,
+  emblaApi,
+})
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    :dir="props.dir"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="style.viewport({ class: props.ui?.viewport })">
+      <div :class="style.container({ class: props.ui?.container })">
+        <div
+          v-for="(item, index) in props.items"
+          :key="index"
+          role="group"
+          aria-roledescription="slide"
+          :class="style.item({ class: props.ui?.item })"
+        >
+          <slot :item="item" :index="index"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="props.arrows || props.dots" :class="style.controls({ class: props.ui?.controls })">
+      <div v-if="props.arrows" :class="style.arrows({ class: props.ui?.arrows })">
+        <Button
+          :disabled="!canScrollPrev"
+          :icon="prevIcon"
+          size="md"
+          variant="outline"
+          aria-label="prev"
+          v-bind="typeof props.prev === 'object' ? props.prev : undefined"
+          :class="style.prev({ class: props.ui?.prev })"
+          @click="scrollPrev"
+        />
+        <Button
+          :disabled="!canScrollNext"
+          :icon="nextIcon"
+          size="md"
+          variant="outline"
+          aria-label="next"
+          v-bind="typeof props.next === 'object' ? props.next : undefined"
+          :class="style.next({ class: props.ui?.next })"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="props.dots" :class="style.dots({ class: props.ui?.dots })">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button
+            :aria-label="`Go to ${index + 1}`"
+            :class="style.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            @click="scrollTo(index)"
+          ></button>
+        </template>
+      </div>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/Checkbox.vue

@@ -40,7 +40,6 @@ import { computed, useId } from 'vue'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
-  size: 'md',
   required: false,
   disabled: false,
 })

package/dist/runtime/components/Chip.vue

@@ -23,22 +23,27 @@ export interface ChipSlots {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<ChipProps>(), {
   variant: 'solid',
-  size: 'md',
 })
 
 const slots = defineSlots<ChipSlots>()
 
+const { size, orientation } = useButtonGroup(props)
 const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.chip)
-  return styler(props)
+  return styler({
+    ...props,
+    size: size.value,
+    groupOrientation: orientation.value,
+  })
 })
 </script>
 

package/dist/runtime/components/Input.vue

@@ -46,6 +46,7 @@ export interface InputSlots {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed, onMounted, ref } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useTheme } from '../composables/useTheme'
 import { looseToNumber } from '../utils'
@@ -56,7 +57,6 @@ defineOptions({
 
 const props = withDefaults(defineProps<InputProps>(), {
   type: 'text',
-  size: 'md',
   variant: 'outline',
   autocomplete: 'off',
   autofocusDelay: 0,
@@ -68,14 +68,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)
-  // @ts-expect-error ignore type
   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,
   })
@@ -131,7 +135,7 @@ onMounted(() => {
 <template>
   <Primitive
     :as="as"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :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 })">
@@ -150,7 +154,7 @@ onMounted(() => {
       :value="modelValue"
       :name="props.name"
       :placeholder="props.placeholder"
-      :class="style.base({ class: props.ui?.base })"
+      :class="style.input({ class: props.ui?.input })"
       :disabled="props.disabled"
       :required="props.required"
       :autocomplete="props.autocomplete"

package/dist/runtime/components/Modal.vue

@@ -47,11 +47,10 @@ 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/useTheme'
-import UButton from './Button.vue'
+import Button from './Button.vue'
 
 const props = withDefaults(defineProps<ModalProps>(), {
   modal: true,
-  size: 'md',
   portal: true,
   overlay: true,
   transition: true,
@@ -110,7 +109,7 @@ const style = computed(() => {
 
               <DialogClose as-child>
                 <slot name="close">
-                  <UButton
+                  <Button
                     v-if="props.close"
                     variant="ghost"
                     :icon="props.closeIcon || theme.app.icons.close"