@byyuurin/ui 0.0.4 → 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
@@ -50,44 +52,38 @@ export default defineConfig({
       c3: '#e5e6e6', // optional
     }),
   ],
-  content: {
-    pipeline: {
-      include: [
-        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
-        /\/(?:theme).*\.(ts|m?js)($|\?)/,
-      ],
-    },
-  },
 })
 ```
 
+New Rules
+
+- `ui-[color]`
+- `bg-solid-[color]`
+- `bg-solid-[color]/[opacity]`
+
 ### Vite
 
 ```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'
 
 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',
+      },
     }),
   ],
 })
@@ -122,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 -->
 
@@ -132,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

@@ -1,3 +1,29 @@
-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 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';
+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';
+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,29 @@
-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 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";
+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";
+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,5 @@
-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.D4zm1r0C.mjs';
 
 const nuxt = defineNuxtModule({
   meta: {
@@ -10,22 +10,27 @@ 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.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"),
+      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 './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/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/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

@@ -0,0 +1,70 @@
+<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>(), {
+  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,17 +28,19 @@ export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>,
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useComponentIcons, useTheme } from '../composables'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
 import { omit, pickLinkProps } from '../utils'
 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 })),
 )
@@ -51,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: [
@@ -77,7 +81,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/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/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 })"