@byyuurin/ui 0.0.5 → 0.0.6

package/dist/runtime/components/Pagination.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui'
+import type { pagination } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick<PaginationRootProps, 'as' | 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'> {
+  /**
+   * The icon to use for the first page control.
+   * @default app.icons.doubleLeft
+   */
+  firstIcon?: string
+  /**
+   * The icon to use for the last page control.
+   * @default app.icons.doubleRight
+   */
+  lastIcon?: string
+  /**
+   * The icon to use for the previous page control.
+   * @default app.icons.arrowLeft
+   */
+  prevIcon?: string
+  /**
+   * The icon to use for the next page control.
+   * @default app.icons.arrowRight
+   */
+  nextIcon?: string
+  /**
+   * The icon to use for the ellipsis control.
+   * @default app.icons.ellipsis
+   */
+  ellipsisIcon?: string
+  /**
+   * The size of the pagination controls.
+   * @default 'md'
+   */
+  size?: ButtonProps['size']
+  /**
+   * The variant of the pagination controls.
+   * @default 'outline'
+   */
+  variant?: ButtonProps['variant']
+  /**
+   * The variant of the active pagination control.
+   * @default 'solid'
+   */
+  activeVariant?: ButtonProps['variant']
+  /**
+   * Whether to show the first, previous, next, and last controls.
+   * @default true
+   */
+  showControls?: boolean
+}
+
+export interface PaginationEmits extends PaginationRootEmits {}
+
+export interface PaginationSlots {
+  first?: (props?: {}) => any
+  prev?: (props?: {}) => any
+  next?: (props?: {}) => any
+  last?: (props?: {}) => any
+  ellipsis?: (props?: {}) => any
+  item?: (props: {
+    page: number
+    pageCount: number
+    item: {
+      type: 'ellipsis'
+    } | {
+      type: 'page'
+      value: number
+    }
+    index: number
+  }) => any
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  variant: 'outline',
+  activeVariant: 'solid',
+  showControls: true,
+  showEdges: false,
+  itemsPerPage: 10,
+  siblingCount: 2,
+  total: 0,
+})
+
+const emit = defineEmits<PaginationEmits>()
+const slots = defineSlots<PaginationSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emit)
+
+const { theme, createStyler } = useTheme()
+
+const firstIcon = computed(() => props.firstIcon || theme.value.app.icons.doubleLeft)
+const prevIcon = computed(() => props.prevIcon || theme.value.app.icons.arrowLeft)
+const nextIcon = computed(() => props.nextIcon || theme.value.app.icons.arrowRight)
+const lastIcon = computed(() => props.lastIcon || theme.value.app.icons.doubleRight)
+const ellipsisIcon = computed(() => props.ellipsisIcon || theme.value.app.icons.ellipsis)
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.pagination)
+  return styler(props)
+})
+</script>
+
+<template>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <PaginationList v-slot="{ items }" :class="style.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="props.showControls || !!slots.first" as-child>
+        <slot name="first">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="firstIcon" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="props.showControls || !!slots.prev" as-child>
+        <slot name="prev">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="prevIcon" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <Button
+              :class="style.item({ class: props.ui?.item })"
+              :variant="props.page === item.value ? props.activeVariant : props.variant"
+              :size="props.size"
+              :label="String(item.value)"
+              :ui="{ label: style.label() }"
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
+          <slot name="ellipsis">
+            <Button
+              :variant="props.variant"
+              :size="props.size"
+              :icon="ellipsisIcon"
+              :disabled="props.disabled /* TODO: remove after reka-ui update */"
+              :class="[
+                style.item({ class: props.ui?.item }),
+                style.ellipsis({ class: props.ui?.ellipsis }),
+              ]"
+            />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="props.showControls || !!slots.next" as-child>
+        <slot name="next">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="nextIcon" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="props.showControls || !!slots.last" as-child>
+        <slot name="last">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="lastIcon" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>

package/dist/runtime/components/PinInput.vue

@@ -31,7 +31,6 @@ import { looseToNumber } from '../utils'
 
 const props = withDefaults(defineProps<PinInputProps>(), {
   variant: 'outline',
-  size: 'md',
   length: 5,
   type: 'text',
 })

package/dist/runtime/components/RadioGroup.vue

@@ -74,7 +74,6 @@ import { useTheme } from '../composables/useTheme'
 import { get } from '../utils'
 
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
-  size: 'md',
   valueKey: 'value',
   labelKey: 'label',
   descriptionKey: 'description',

package/dist/runtime/components/ScrollArea.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { ScrollAreaRootProps } from 'reka-ui'
 import type { scrollArea } from '../theme'
-import { transitionProps } from '../theme/scrollArea'
+import { transitionProps } from '../theme/scroll-area'
 import type { ComponentAttrs } from '../types'
 
 export interface ScrollAreaProps extends ComponentAttrs<typeof scrollArea>, Pick<ScrollAreaRootProps, 'type' | 'dir' | 'scrollHideDelay'> {}

package/dist/runtime/components/Select.vue

@@ -105,13 +105,13 @@ import { reactivePick } from '@vueuse/core'
 import { defu } from 'defu'
 import { SelectArrow, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectViewport, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useTheme } from '../composables/useTheme'
 import { compare, get } from '../utils'
 
 const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {
   variant: 'outline',
-  size: 'md',
   valueKey: 'value' as never,
   labelKey: 'label' as never,
   portal: true,
@@ -125,6 +125,8 @@ const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffse
 const arrowProps = toRef(() => props.arrow as SelectArrowProps)
 
 const { theme, createStyler } = useTheme()
+
+const { size, orientation } = useButtonGroup(props)
 const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(toRef(() => defu(props, {
   suffixIcon: theme.value.app.icons.down,
 })))
@@ -136,6 +138,8 @@ const style = computed(() => {
   const styler = createStyler(theme.value.select)
   return styler({
     ...props,
+    size: size.value,
+    groupOrientation: orientation.value,
     prefix: isPrefix.value,
     suffix: isSuffix.value,
   })

package/dist/runtime/components/Slider.vue

@@ -31,7 +31,6 @@ import { computed } from 'vue'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<SliderProps>(), {
-  size: 'md',
   orientation: 'horizontal',
   step: 1,
   max: 100,

package/dist/runtime/components/Switch.vue

@@ -40,9 +40,7 @@ import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka
 import { computed, useId } from 'vue'
 import { useTheme } from '../composables/useTheme'
 
-const props = withDefaults(defineProps<SwitchProps>(), {
-  size: 'md',
-})
+const props = withDefaults(defineProps<SwitchProps>(), {})
 const emit = defineEmits<SwitchEmits>()
 const slots = defineSlots<SwitchSlots>()
 const modelValue = defineModel<boolean>({ default: undefined })

package/dist/runtime/components/Tabs.vue

@@ -59,7 +59,6 @@ const props = withDefaults(defineProps<TabsProps<T>>(), {
   defaultValue: '0',
   variant: 'solid',
   orientation: 'horizontal',
-  size: 'md',
   full: true,
   content: true,
   labelKey: 'label',

package/dist/runtime/components/Textarea.vue

@@ -49,7 +49,6 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<TextareaProps>(), {
-  size: 'md',
   variant: 'outline',
   rows: 3,
   maxRows: 0,

package/dist/runtime/components/Toast.vue

@@ -1,21 +1,30 @@
 <script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
 import type { PrimitiveProps, ToastRootEmits, ToastRootProps } from 'reka-ui'
 import type { toast } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+type ToastVariants = VariantProps<typeof toast>
+
 export interface ToastProps extends ComponentAttrs<typeof toast>, Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
   /** @default "li" */
   as?: PrimitiveProps['as']
   title?: string
   description?: string
   icon?: string
+  orientation?: ToastVariants['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 toast.
    * @default true
    */
   close?: ButtonProps | boolean
-  /** @default `app.icons.close` */
+  /** @default app.icons.close */
   closeIcon?: string
 }
 
@@ -39,6 +48,7 @@ import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
+  orientation: 'vertical',
   close: true,
 })
 
@@ -50,12 +60,13 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen',
 const el = ref<InstanceType<typeof ToastRoot>>()
 const { height } = useElementBounding(() => el.value?.$el.getBoundingClientRect ? el.value.$el : undefined)
 
-const multiline = computed(() => !!props.title && !!props.description)
-
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.toast)
-  return styler({ ...props, multiline: multiline.value })
+  return styler({
+    ...props,
+    title: !!(props.title || slots.title),
+  })
 })
 
 defineExpose({
@@ -68,7 +79,7 @@ defineExpose({
     ref="el"
     v-slot="{ remaining, duration }"
     v-bind="rootProps"
-    :class="style.root({ class: [props.class, props.ui?.root], multiline })"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
     :style="{ '--height': height }"
   >
     <slot name="icon">
@@ -87,7 +98,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="multiline && actions?.length" :class="style.actions({ class: props.ui?.actions, multiline: true })">
+      <div v-if="props.orientation === 'vertical' && actions?.length" :class="style.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <Button size="xs" v-bind="action" />
@@ -96,8 +107,8 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(!multiline && actions?.length) || props.close !== null" :class="style.actions({ class: props.ui?.actions, multiline: false })">
-      <template v-if="!multiline">
+    <div v-if="(props.orientation === 'horizontal' && actions?.length) || props.close !== null" :class="style.actions({ class: props.ui?.actions })">
+      <template v-if="props.orientation === 'horizontal'">
         <slot name="actions">
           <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <Button size="xs" v-bind="action" />
@@ -107,7 +118,7 @@ defineExpose({
 
       <ToastClose as-child>
         <slot name="close" :ui="ui">
-          <UButton
+          <Button
             v-if="props.close"
             :icon="props.closeIcon || theme.app.icons.close"
             size="md"

package/dist/runtime/components/Toaster.vue

@@ -72,6 +72,7 @@ const style = computed(() => {
   return styler({
     ...props,
     swipeDirection: swipeDirection.value,
+    clickable: false,
   })
 })
 
@@ -114,11 +115,9 @@ function getOffset(index: number) {
         '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
         '--transform': 'translateY(var(--translate)) scale(var(--scale))',
       }"
-      :class="[style.base(), {
-        'cursor-pointer': !!toast.click,
-      }]"
+      :class="style.base({ clickable: !!(toast.onClick) })"
       @update:open="onUpdateOpen($event, toast.id)"
-      @click="toast.click && toast.click(toast)"
+      @click="toast.onClick && toast.onClick(toast)"
     />
 
     <ToastPortal :disabled="!portal">

package/dist/runtime/composables/useButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import type { ComputedRef } from 'vue';
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue';
+interface ButtonGroupInjectData {
+    size: ButtonGroupProps['size'];
+    orientation: ButtonGroupProps['orientation'];
+}
+export declare const InjectionKeyButtonGroup: import("vue").InjectionKey<ComputedRef<ButtonGroupInjectData>>, injectButtonGroup: () => ComputedRef<ButtonGroupInjectData> | undefined, provideButtonGroup: (value: ComputedRef<ButtonGroupInjectData>) => void;
+type UseButtonGroupProps = Pick<ButtonGroupProps, 'size'>;
+export declare function useButtonGroup(props?: UseButtonGroupProps): {
+    size: ComputedRef<any>;
+    orientation: ComputedRef<any>;
+};
+export {};

package/dist/runtime/composables/useButtonGroup.mjs

@@ -0,0 +1,14 @@
+import { computed } from "vue";
+import { defineInjection } from "./defineInjection.mjs";
+export const {
+  InjectionKey: InjectionKeyButtonGroup,
+  inject: injectButtonGroup,
+  provide: provideButtonGroup
+} = defineInjection("ui.buttonGroup");
+export function useButtonGroup(props = {}) {
+  const buttonGroup = injectButtonGroup();
+  return {
+    size: computed(() => props.size ?? buttonGroup?.value.size),
+    orientation: computed(() => buttonGroup?.value.orientation)
+  };
+}

package/dist/runtime/composables/useTheme.d.ts

@@ -1,9 +1,9 @@
-import type { UserConfig } from 'unocss';
+import type { UserConfig } from '@unocss/core';
 import type { MaybeRefOrGetter } from 'vue';
 import * as theme from '../theme';
 export declare const InjectionKeyThemeExtension: import("vue").InjectionKey<MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>>, provideThemeExtension: (value: MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>;
 export declare const InjectionKeyUnoConfig: import("vue").InjectionKey<UserConfig<object>>, provideUnoConfig: (value: UserConfig<object>) => void, injectUnoConfig: () => UserConfig<object>;
 export declare const useTheme: () => {
     theme: import("vue").ComputedRef<typeof theme>;
-    createStyler: <V extends import("@byyuurin/ui-kit/index").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit/index").CVCompoundVariants<V, S, B>, B extends import("@byyuurin/ui-kit/index").ClassValue = undefined, S extends import("@byyuurin/ui-kit/index").CVSlots = undefined>(theme: import("@byyuurin/ui-kit/index").CVMeta<V, CV, never, B, S>) => [keyof V] extends string[] ? (props: Required<import("@byyuurin/ui-kit/index").VariantProps<import("@byyuurin/ui-kit/index").CVReturnType<V, S, B>>> & import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; } : (props?: import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; };
+    createStyler: <V extends import("@byyuurin/ui-kit/index").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit/index").CVCompoundVariants<V, S, B>, DV extends import("@byyuurin/ui-kit/index").CVDefaultVariants<V, S>, B extends import("@byyuurin/ui-kit/index").ClassValue = undefined, S extends import("@byyuurin/ui-kit/index").CVSlots = undefined>(theme: import("@byyuurin/ui-kit/index").CVMeta<V, CV, DV, B, S>) => [keyof V] extends string[] ? (props: import("@byyuurin/ui-kit/index").VariantProps<import("@byyuurin/ui-kit/index").CVReturnType<V, S, B>> & import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; } : (props?: import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; };
 };

package/dist/runtime/composables/useTheme.mjs

@@ -1,4 +1,4 @@
-import { transformUnoRules } from "@byyuurin/ui/unocss-preset";
+import { transformUnoRules } from "@byyuurin/ui/unocss";
 import { createSharedComposable } from "@vueuse/core";
 import { computed, toValue } from "vue";
 import * as theme from "../theme/index.mjs";

package/dist/runtime/composables/useToast.d.ts

@@ -1,7 +1,7 @@
-import type { ToastProps } from '@byyuurin/ui';
+import type { ToastProps } from '../types';
 export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
     id: string | number;
-    click?: (toast: Toast) => void;
+    onClick?: (toast: Toast) => void;
 }
 export declare const useToast: () => {
     toasts: import("vue").Ref<{
@@ -9,13 +9,13 @@ export declare const useToast: () => {
         [x: number]: any;
         [x: symbol]: ToastProps;
         id: string | number;
-        click?: ((toast: Toast) => void) | undefined;
+        onClick?: ((toast: Toast) => void) | undefined;
     }[], Toast[] | {
         [x: string]: any;
         [x: number]: any;
         [x: symbol]: ToastProps;
         id: string | number;
-        click?: ((toast: Toast) => void) | undefined;
+        onClick?: ((toast: Toast) => void) | undefined;
     }[]>;
     add: (toast: Partial<Toast>) => Toast;
     update: (id: string | number, toast: Partial<Omit<Toast, "id">>) => void;

package/dist/runtime/composables/useToast.mjs

@@ -1,17 +1,30 @@
 import { createSharedComposable } from "@vueuse/core";
-import { ref } from "vue";
+import { nextTick, ref } from "vue";
 export const useToast = createSharedComposable(() => {
   const toasts = ref([]);
+  const running = ref(false);
+  const maxToasts = 5;
+  const queue = [];
+  const generateId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  async function processQueue() {
+    if (running.value || queue.length === 0)
+      return;
+    running.value = true;
+    while (queue.length > 0) {
+      const toast = queue.shift();
+      await nextTick();
+      toasts.value = [...toasts.value, toast].slice(-maxToasts);
+    }
+    running.value = false;
+  }
   function add(toast) {
     const body = {
-      id: Date.now().toString(),
+      id: generateId(),
       open: true,
       ...toast
     };
-    const index = toasts.value.findIndex((t) => t.id === body.id);
-    if (index === -1)
-      toasts.value.push(body);
-    toasts.value = toasts.value.slice(-5);
+    queue.push(body);
+    processQueue();
     return body;
   }
   function update(id, toast) {

package/dist/runtime/theme/accordion.d.ts

@@ -35,5 +35,22 @@ declare const _default: {
         trailingIcon: string;
         label: string;
     }, undefined>;
+    defaultVariants: import("@byyuurin/ui-kit/index").CVDefaultVariants<{
+        disabled: {
+            true: {
+                trigger: string;
+            };
+        };
+    }, {
+        root: string;
+        item: string;
+        header: string;
+        trigger: string;
+        content: string[];
+        body: string;
+        icon: string;
+        trailingIcon: string;
+        label: string;
+    }>;
 };
 export default _default;

package/dist/runtime/theme/alert.d.ts

@@ -81,5 +81,45 @@ declare const _default: {
         actions: string;
         close: string;
     }, undefined>;
+    defaultVariants: import("@byyuurin/ui-kit/index").CVDefaultVariants<{
+        variant: {
+            solid: {
+                root: string;
+                close: string;
+            };
+            outline: {
+                root: string;
+            };
+            soft: {
+                root: string;
+            };
+            'soft-outline': {
+                root: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                actions: string;
+            };
+            vertical: {
+                root: string;
+                actions: string;
+            };
+        };
+        title: {
+            true: {
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        actions: string;
+        close: string;
+    }>;
 };
 export default _default;

package/dist/runtime/theme/alert.mjs

@@ -14,17 +14,17 @@ export default ct(
     variants: {
       variant: {
         "solid": {
-          root: "color-ui-c1 bg-ui-fill",
+          root: "color-ui-c1 bg-solid-ui-fill",
           close: "ui-base-inverted"
         },
         "outline": {
-          root: "color-ui-content bg-ui-c1 ring ring-inset ring-ui-fill"
+          root: "color-ui-content bg-solid-ui-c1 ring ring-inset ring-ui-fill"
         },
         "soft": {
-          root: "color-ui-content bg-ui-fill/10"
+          root: "color-ui-content bg-solid-ui-fill/10"
         },
         "soft-outline": {
-          root: "color-ui-content bg-ui-fill/10 ring ring-inset ring-ui-fill/40"
+          root: "color-ui-content bg-solid-ui-fill/10 ring ring-inset ring-ui-fill/40"
         }
       },
       orientation: {

package/dist/runtime/theme/app.d.ts

@@ -5,6 +5,11 @@ declare const _default: {
         check: string;
         indeterminate: string;
         down: string;
+        arrowLeft: string;
+        arrowRight: string;
+        doubleLeft: string;
+        doubleRight: string;
+        ellipsis: string;
     };
 };
 export default _default;

package/dist/runtime/theme/app.mjs

@@ -5,6 +5,11 @@ export default {
     loading: "i-mdi-loading",
     check: "i-mdi-check-bold",
     indeterminate: "i-mdi-minus-thick",
-    down: "i-mdi-chevron-down"
+    down: "i-mdi-chevron-down",
+    arrowLeft: "i-mdi-chevron-left",
+    arrowRight: "i-mdi-chevron-right",
+    doubleLeft: "i-mdi-chevron-double-left",
+    doubleRight: "i-mdi-chevron-double-right",
+    ellipsis: "i-mdi-dots-horizontal"
   }
 };

package/dist/runtime/theme/badge.d.ts

@@ -75,5 +75,8 @@ declare const _default: {
             base: string;
         };
     })[];
+    defaultVariants: {
+        size: "md";
+    };
 };
 export default _default;

package/dist/runtime/theme/badge.mjs

@@ -6,7 +6,7 @@ export default ct(
       root: "relative inline-flex items-center justify-center shrink-0",
       base: [
         "inline-block rounded-full ring ring-ui-c1 flex items-center justify-center color-ui-c1 font-medium whitespace-nowrap",
-        "h-1.2em min-w-1.2em p-0.2em text-0.8em bg-ui-fill"
+        "h-1.2em min-w-1.2em p-0.2em text-0.8em bg-solid-ui-fill"
       ]
     },
     variants: {
@@ -84,6 +84,9 @@ export default ct(
           base: "translate-y-1/2 -translate-x-1/2 transform"
         }
       }
-    ]
+    ],
+    defaultVariants: {
+      size: "md"
+    }
   }
 );