@byyuurin/ui 0.0.11 → 0.1.0

package/dist/runtime/components/Button.vue.d.ts

@@ -1,26 +1,42 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
-import type { UseComponentIconsProps } from '../composables/useComponentIcons.js';
-import type { button } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-import type { LinkProps } from './Link.vue.js';
-export interface ButtonSlots {
-    default?: (props?: {}) => any;
-    leading?: (props?: {}) => any;
-    trailing?: (props?: {}) => any;
-}
-type ButtonVariants = VariantProps<typeof button>;
-export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom' | 'underline'> {
-    icon?: string;
+import theme from '#build/ui/button';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, LinkProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface ButtonProps extends ComponentBaseProps, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
+    icon?: IconProps['name'];
     label?: string;
-    variant?: ButtonVariants['variant'];
-    size?: ButtonVariants['size'];
-    loading?: boolean;
-    active?: boolean;
-    disabled?: boolean;
+    /** @default "solid" */
+    variant?: ThemeVariants['variant'];
+    activeVariant?: ThemeVariants['variant'];
+    /** @default "md"  */
+    size?: ThemeVariants['size'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    activeColor?: ThemeVariants['color'];
+    /** Render the button with equal padding on all sides. */
+    square?: boolean;
+    /** Render the button full width. */
+    block?: boolean;
+    /** Set loading state automatically based on the `@click` promise state */
+    loadingAuto?: boolean;
+    onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface ButtonSlots {
+    default: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    leading: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    trailing: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
-    variant: "solid" | "outline" | "soft" | "soft-outline" | "link" | "ghost";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Calendar.vue

@@ -1,5 +1,5 @@
 <script>
-
+import theme from "#build/ui/calendar";
 </script>
 
 <script setup>
@@ -7,23 +7,31 @@ import { reactiveOmit } from "@vueuse/core";
 import { useForwardPropsEmits } from "reka-ui";
 import { Calendar as BaseCalendar, RangeCalendar } from "reka-ui/namespaced";
 import { computed } from "vue";
+import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useTheme } from "../composables/useTheme";
+import { cv, merge } from "../utils/style";
 import Button from "./Button.vue";
 const props = defineProps({
-  nextYearIcon: { type: String, required: false },
-  nextMonthIcon: { type: String, required: false },
-  prevYearIcon: { type: String, required: false },
-  prevMonthIcon: { type: String, required: false },
+  as: { type: null, required: false },
+  nextYearIcon: { type: [String, Object], required: false },
+  nextYear: { type: Object, required: false },
+  nextMonthIcon: { type: [String, Object], required: false },
+  nextMonth: { type: Object, required: false },
+  prevYearIcon: { type: [String, Object], required: false },
+  prevYear: { type: Object, required: false },
+  prevMonthIcon: { type: [String, Object], required: false },
+  prevMonth: { type: Object, required: false },
   size: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
   range: { type: Boolean, required: false },
   multiple: { type: Boolean, required: false },
   monthControls: { type: Boolean, required: false, default: true },
   yearControls: { type: Boolean, required: false, default: true },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
-  class: { type: null, required: false },
   ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   defaultPlaceholder: { type: null, required: false },
   placeholder: { type: null, required: false },
   pagedNavigation: { type: Boolean, required: false },
@@ -47,25 +55,28 @@ const props = defineProps({
   isDateHighlightable: { type: Function, required: false },
   fixedDate: { type: String, required: false }
 });
-const emit = defineEmits(["update:modelValue", "update:placeholder", "update:startValue"]);
+const emit = defineEmits(["update:modelValue", "update:placeholder", "update:validModelValue", "update:startValue"]);
 defineSlots();
-const rootProps = useForwardPropsEmits(reactiveOmit(props, "range", "modelValue", "defaultValue", "size", "monthControls", "yearControls", "class", "ui"), emit);
+const rootProps = useForwardPropsEmits(reactiveOmit(props, "range", "modelValue", "defaultValue", "size", "color", "variant", "monthControls", "yearControls", "class", "ui"), emit);
 const { code: locale, dir, t } = useLocale();
-const { theme, generateStyle } = useTheme();
-const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronDoubleLeft : theme.value.app.icons.chevronDoubleRight));
-const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight));
-const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronDoubleRight : theme.value.app.icons.chevronDoubleLeft));
-const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.calendar));
+  return styler({
+    ...props,
+    outsideView: props.numberOfMonths === 1
+  });
+});
+const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
+const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft));
+const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
 function paginateYear(date, sign) {
   if (sign === -1)
     return date.subtract({ years: 1 });
   return date.add({ years: 1 });
 }
 const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar);
-const style = computed(() => generateStyle("calendar", {
-  ...props,
-  multipleMonths: props.numberOfMonths > 1
-}));
 </script>
 
 <template>
@@ -76,70 +87,68 @@ const style = computed(() => generateStyle("calendar", {
     :default-value="props.defaultValue"
     :locale="locale"
     :dir="dir"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
     data-part="root"
   >
-    <Calendar.Header :class="style.header({ class: props.ui?.header })" data-part="header">
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })" data-part="header">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
-        <Button :icon="prevYearIcon" :size="props.size" variant="ghost" />
+        <Button :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
-        <Button :icon="prevMonthIcon" :size="props.size" variant="ghost" />
+        <Button :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
       </Calendar.Prev>
 
-      <Calendar.Heading v-slot="{ headingValue }" :class="style.heading({ class: props.ui?.heading })" data-part="heading">
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })" data-part="heading">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
       </Calendar.Heading>
       <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
-        <Button :icon="nextMonthIcon" :size="props.size" variant="ghost" />
+        <Button :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
       </Calendar.Next>
       <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
-        <Button :icon="nextYearIcon" :size="props.size" variant="ghost" />
+        <Button :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div :class="style.body({ class: props.ui?.body })" data-part="body">
+    <div :class="ui.body({ class: props.ui?.body })" data-part="body">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
-        :class="style.grid({ class: props.ui?.grid })"
+        :class="ui.grid({ class: props.ui?.grid })"
         data-part="grid"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow :class="style.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })" data-part="grid-week-day-row">
-            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="style.headCell({ class: props.ui?.headCell })" data-part="head-cell">
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })" data-part="grid-week-day-row">
+            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="ui.headCell({ class: props.ui?.headCell })" data-part="head-cell">
               <slot name="week-day" :day="day">
                 {{ day }}
               </slot>
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody :class="style.gridBody({ class: props.ui?.gridBody })" data-part="grid-body">
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })" data-part="grid-body">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDates-${index}`"
-            :class="style.gridRow({ class: props.ui?.gridRow })"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
             data-part="grid-row"
           >
             <Calendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
-              :class="style.cell({ class: props.ui?.cell })"
+              :class="ui.cell({ class: props.ui?.cell })"
               data-part="cell"
             >
               <Calendar.CellTrigger
-                v-slot="{ disabled, unavailable }"
                 :day="weekDate"
                 :month="month.value"
-                as-child
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+                data-part="cell-trigger"
               >
-                <div :class="style.cellTrigger({ class: props.ui?.cellTrigger, disabled: disabled || unavailable })" data-part="cell-trigger">
-                  <slot name="day" :day="weekDate">
-                    {{ weekDate.day }}
-                  </slot>
-                </div>
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
               </Calendar.CellTrigger>
             </Calendar.Cell>
           </Calendar.GridRow>

package/dist/runtime/components/Calendar.vue.d.ts

@@ -1,50 +1,62 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { DateValue } from '@internationalized/date';
 import type { CalendarCellTriggerProps, CalendarRootEmits, CalendarRootProps, DateRange, RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui';
-import type { calendar } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
-    'update:modelValue': [date: CalendarModelValue<R, M>];
-}
-export interface CalendarSlots {
-    'heading'?: (props: {
-        value: string;
-    }) => any;
-    'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => any;
-    'week-day'?: (props: {
-        day: string;
-    }) => any;
-}
-type CalendarVariants = VariantProps<typeof calendar>;
+import theme from '#build/ui/calendar';
+import type { ButtonProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { MaybeNull, StaticSlot } from '../types/utils';
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true ? DateRange : M extends true ? DateValue[] : DateValue;
-type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? (DateRange | null) : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? MaybeNull<DateRange> : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);
 type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
 type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
-export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends ComponentAttrs<typeof calendar>, _CalendarRootProps, _RangeCalendarRootProps {
+type ThemeVariants = VariantProps<typeof theme>;
+export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends ComponentBaseProps, _CalendarRootProps, _RangeCalendarRootProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: CalendarRootProps['as'];
     /**
      * The icon to use for the next year control.
      * @default app.icons.chevronDoubleRight
      */
-    nextYearIcon?: string;
+    nextYearIcon?: IconProps['name'];
+    /**
+     * Configure the next year button.
+     */
+    nextYear?: ButtonProps;
     /**
      * The icon to use for the next month control.
      * @default app.icons.chevronRight
      */
-    nextMonthIcon?: string;
+    nextMonthIcon?: IconProps['name'];
+    /**
+     * Configure the next month button.
+     */
+    nextMonth?: ButtonProps;
     /**
      * The icon to use for the previous year control.
      * @default app.icons.chevronDoubleLeft
      */
-    prevYearIcon?: string;
+    prevYearIcon?: IconProps['name'];
+    /**
+     * Configure the prev year button.
+     */
+    prevYear?: ButtonProps;
     /**
      * The icon to use for the previous month control.
      * @default app.icons.chevronLeft
      */
-    prevMonthIcon?: string;
+    prevMonthIcon?: IconProps['name'];
+    /**
+     * Configure the prev month button.
+     */
+    prevMonth?: ButtonProps;
     /**
      * @default "md"
      */
-    size?: CalendarVariants['size'];
+    size?: ThemeVariants['size'];
+    color?: ThemeVariants['color'];
+    variant?: ThemeVariants['variant'];
     /** Whether or not a range of dates can be selected */
     range?: R & boolean;
     /** Whether or not multiple dates can be selected */
@@ -55,21 +67,36 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     yearControls?: boolean;
     defaultValue?: CalendarDefaultValue<R, M>;
     modelValue?: CalendarDefaultValue<R, M>;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+    'update:modelValue': [date: CalendarModelValue<R, M>];
+}
+export interface CalendarSlots {
+    'heading': StaticSlot<{
+        value: string;
+    }>;
+    'day': StaticSlot<Pick<CalendarCellTriggerProps, 'day'>>;
+    'week-day': StaticSlot<{
+        day: string;
+    }>;
 }
-declare const _default: <R extends boolean, M extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
-        readonly "onUpdate:placeholder"?: ((...args: unknown[]) => any) | undefined;
-        readonly "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:placeholder" | "onUpdate:startValue"> & CalendarProps<R, M> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<CalendarProps<R, M> & {
+        "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+        "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
+        "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: CalendarSlots;
-    emit: ((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+    emit: ((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Card.vue

@@ -1,37 +1,41 @@
 <script>
-
+import theme from "#build/ui/card";
 </script>
 
 <script setup>
 import { Primitive } from "reka-ui";
 import { computed } from "vue";
-import { useTheme } from "../composables/useTheme";
+import { useAppConfig } from "#imports";
+import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
   variant: { type: null, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
-  class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
 });
 const slots = defineSlots();
-const { generateStyle } = useTheme();
-const style = computed(() => generateStyle("card", props));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.card));
+  return styler(props);
+});
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
+  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
     <slot name="content">
       <div
         v-if="slots.header || props.title || slots.title || props.description || slots.description"
-        :class="style.header({ class: props.ui?.header })"
+        :class="ui.header({ class: props.ui?.header })"
         data-part="header"
       >
         <slot name="header">
           <Primitive
             v-if="props.title || slots.title"
-            :as="slots.title ? void 0 : 'h2'"
-            :class="style.title({ class: props.ui?.title })"
+            :as="!!slots.title ? void 0 : 'h2'"
+            :class="ui.title({ class: props.ui?.title })"
             data-part="title"
           >
             <slot name="title">
@@ -40,9 +44,9 @@ const style = computed(() => generateStyle("card", props));
           </Primitive>
           <Primitive
             v-if="props.description || slots.description"
-            :as="slots.description ? void 0 : 'p'"
+            :as="!!slots.description ? void 0 : 'p'"
             :as-child="!!slots.description"
-            :class="style.description({ class: props.ui?.description })"
+            :class="ui.description({ class: props.ui?.description })"
             data-part="description"
           >
             <slot name="description">
@@ -52,11 +56,11 @@ const style = computed(() => generateStyle("card", props));
         </slot>
       </div>
 
-      <div v-if="slots.default" :class="style.body({ class: props.ui?.body })" data-part="body">
+      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
         <slot></slot>
       </div>
 
-      <div v-if="slots.footer" :class="style.footer({ class: props.ui?.footer })" data-part="footer">
+      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
         <slot name="footer"></slot>
       </div>
     </slot>

package/dist/runtime/components/Card.vue.d.ts

@@ -1,27 +1,31 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps } from 'reka-ui';
-import type { card } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-export interface CardSlots {
-    default?: (props?: {}) => any;
-    content?: (props?: {}) => any;
-    header?: (props?: {}) => any;
-    title?: (props?: {}) => any;
-    description?: (props?: {}) => any;
-    footer?: (props?: {}) => any;
-}
-type CardVariants = VariantProps<typeof card>;
-export interface CardProps extends ComponentAttrs<typeof card> {
+import theme from '#build/ui/card';
+import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface CardProps extends ComponentBaseProps {
     /**
      * The element or component this component should render as.
      * @default "div"
      */
     as?: PrimitiveProps['as'];
-    variant?: CardVariants['variant'];
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
     title?: string;
     description?: string;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface CardSlots {
+    default: StaticSlot;
+    content: StaticSlot;
+    header: StaticSlot;
+    title: StaticSlot;
+    description: StaticSlot;
+    footer: StaticSlot;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {