@byyuurin/ui 0.0.8 → 0.0.9

package/dist/runtime/components/Select.vue

@@ -124,27 +124,24 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen'
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as SelectContentProps)
 const arrowProps = toRef(() => props.arrow as SelectArrowProps)
 
-const { theme, createStyler } = useTheme()
+const { theme, generateStyle } = useTheme()
 
 const { size, orientation } = useButtonGroup(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, {
   trailingIcon: theme.value.app.icons.chevronDown,
 })))
 
+const style = computed(() => generateStyle('select', {
+  ...props,
+  size: size.value,
+  groupOrientation: orientation.value,
+  leading: isLeading.value,
+  trailing: isTrailing.value,
+}))
+
 const groups = computed(() => props.options?.length ? (Array.isArray(props.options[0]) ? props.options : [props.options]) as SelectOption[][] : [])
 const items = computed(() => groups.value.flat() as T[])
 
-const style = computed(() => {
-  const styler = createStyler(theme.value.select)
-  return styler({
-    ...props,
-    size: size.value,
-    groupOrientation: orientation.value,
-    leading: isLeading.value,
-    trailing: isTrailing.value,
-  })
-})
-
 function typedItem(item: SelectOption) {
   return item as unknown as T
 }
@@ -162,7 +159,7 @@ function displayValue(value?: MaybeArray<AcceptableValue>): string | undefined {
     return value.map((v) => displayValue(v)).filter(Boolean).join(', ')
 
   const item = items.value.find((item) => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
-  return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
+  return (item != null) && (typeof item === 'object' ? get(item, props.labelKey as string) : item.toString())
 }
 
 function onUpdate(value: any) {

package/dist/runtime/components/Separator.vue

@@ -37,12 +37,8 @@ const slots = defineSlots<SeparatorSlots>()
 
 const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
 
-const { theme, createStyler } = useTheme()
-
-const style = computed(() => {
-  const styler = createStyler(theme.value.separator)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('separator', props))
 </script>
 
 <template>

package/dist/runtime/components/Skeleton.vue

@@ -19,11 +19,8 @@ import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<SkeletonProps>(), {})
 
-const { theme, createStyler } = useTheme()
-const styler = computed(() => {
-  const styler = createStyler(theme.value.skeleton)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const styler = computed(() => generateStyle('skeleton', props))
 </script>
 
 <template>

package/dist/runtime/components/Slider.vue

@@ -63,11 +63,8 @@ const sliderValue = computed({
 
 const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.slider)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('slider', props))
 
 function onChange(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'

package/dist/runtime/components/Switch.vue

@@ -47,11 +47,12 @@ const modelValue = defineModel<boolean>({ default: undefined })
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 const id = useId()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.switch)
-  return styler({ ...props, checked: false, unchecked: false })
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('switch', {
+  ...props,
+  checked: false,
+  unchecked: false,
+}))
 
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'

package/dist/runtime/components/Table.vue

@@ -229,11 +229,8 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
 }
 
 const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.table)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('table', props))
 
 defineExpose({
   tableApi,

package/dist/runtime/components/Tabs.vue

@@ -73,11 +73,8 @@ const slots = defineSlots<TabsSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emit)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.tabs)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('tabs', props))
 </script>
 
 <template>

package/dist/runtime/components/Textarea.vue

@@ -61,11 +61,8 @@ const [modelValue, modelModifiers] = defineModel<string | number>()
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.textarea)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('textarea', props))
 
 function autoFocus() {
   if (props.autofocus)

package/dist/runtime/components/Toast.vue

@@ -61,14 +61,11 @@ const el = ref<InstanceType<typeof ToastRoot>>()
 const { height } = useElementBounding(() => el.value?.$el.getBoundingClientRect ? el.value.$el : undefined)
 
 const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.toast)
-  return styler({
-    ...props,
-    title: !!(props.title || slots.title),
-  })
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('toast', {
+  ...props,
+  title: !!(props.title || slots.title),
+}))
 
 defineExpose({
   height,
@@ -108,7 +105,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(props.orientation === 'horizontal' && actions?.length) || props.close !== null" :class="style.actions({ class: props.ui?.actions })">
+    <div v-if="(props.orientation === 'horizontal' && actions?.length) || props.close || slots.close" :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>
@@ -117,10 +114,9 @@ defineExpose({
         </slot>
       </template>
 
-      <ToastClose as-child>
+      <ToastClose v-if="props.close || slots.close" as-child>
         <slot name="close" :ui="ui">
           <Button
-            v-if="props.close"
             :icon="props.closeIcon || theme.app.icons.close"
             size="sm"
             variant="link"

package/dist/runtime/components/{Toaster.vue → ToastProvider.vue}

@@ -1,16 +1,21 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { ToastProviderProps } from 'reka-ui'
-import type { toaster } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ToastProviderProps as RekaToastProviderProps } from 'reka-ui'
+import type { toastProvider } from '../theme'
+import type { ComponentAttrs, ToastProps } from '../types'
+
+export interface ToastState extends Omit<ToastProps, 'defaultOpen'> {
+  id: string | number
+  onClick?: (toast: ToastState) => void
+}
 
 export interface ToasterSlots {
   default?: (props?: {}) => any
 }
 
-type ToasterVariants = VariantProps<typeof toaster>
+type ToasterVariants = VariantProps<typeof toastProvider>
 
-export interface ToasterProps extends ComponentAttrs<typeof toaster>, Omit<ToastProviderProps, 'swipeDirection'> {
+export interface ToastProviderProps extends ComponentAttrs<typeof toastProvider>, Omit<RekaToastProviderProps, 'swipeDirection'> {
   /** @default "bottom-right" */
   position?: ToasterVariants['position']
   /**
@@ -35,7 +40,7 @@ import { useToast } from '../composables/useToast'
 import { omit } from '../utils'
 import Toast from './Toast.vue'
 
-const props = withDefaults(defineProps<ToasterProps>(), {
+const props = withDefaults(defineProps<ToastProviderProps>(), {
   position: 'bottom-right',
   expand: true,
   portal: true,
@@ -61,20 +66,17 @@ const swipeDirection = computed(() => {
       return 'left'
   }
 
-  console.warn(`[Toaster] Unknown position "${props.position}"`)
+  console.warn(`[ToastProvider] Unknown position "${props.position}"`)
 
   return 'right'
 })
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.toaster)
-  return styler({
-    ...props,
-    swipeDirection: swipeDirection.value,
-    clickable: false,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('toastProvider', {
+  ...props,
+  swipeDirection: swipeDirection.value,
+  clickable: false,
+}))
 
 function onUpdateOpen(value: boolean, id: string | number) {
   if (value)

package/dist/runtime/components/Tooltip.vue

@@ -44,11 +44,8 @@ const contentProps = toRef(() => defu(props.content, contentDefaults) as Tooltip
 
 const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.tooltip)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('tooltip', props))
 </script>
 
 <template>

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

@@ -29,7 +29,7 @@ export declare const kbdKeysMap: {
 export type KbdKey = keyof typeof kbdKeysMap;
 export type KbdKeySpecific = keyof KbdKeysSpecificMap;
 export declare const useKbd: () => {
-    macOS: import("vue").ComputedRef<any>;
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     getKbdKey: (value?: KbdKey | (string & {})) => string | undefined;
 };
 export {};

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

@@ -0,0 +1,29 @@
+import type { Component } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+export interface OverlayOptions<ComponentProps = Record<string, any>> {
+    defaultOpen?: boolean;
+    props?: ComponentProps;
+    unmountOnHide?: boolean;
+}
+interface _ComponentState<T extends Component> {
+    component?: T;
+    id: string | number;
+    isMounted: boolean;
+    modelValue: boolean;
+    resolve?: (value: unknown) => void;
+}
+export type OverlayComponentState = OverlayOptions<Component> & _ComponentState<Component>;
+export interface OverlayComponentInstance<T> {
+    open: (props?: ComponentProps<T>) => Promise<any>;
+    close: (value?: any) => void;
+    patch: (props: Partial<ComponentProps<T>>) => void;
+}
+export declare const useOverlay: () => {
+    overlays: import("vue").ShallowReactive<OverlayComponentState[]>;
+    open: <T extends Component>(id: OverlayComponentState["id"], props?: ComponentProps<T>) => Promise<any>;
+    close: (id: OverlayComponentState["id"], value?: any) => void;
+    create: <T extends Component>(component: T, options?: OverlayOptions<ComponentProps<T>>) => OverlayComponentInstance<T>;
+    patch: <T extends Component>(id: OverlayComponentState["id"], props: Partial<ComponentProps<T>>) => void;
+    unmount: (id: OverlayComponentState["id"]) => void;
+};
+export {};

package/dist/runtime/composables/useOverlay.js

@@ -0,0 +1,69 @@
+import { createSharedComposable } from "@vueuse/core";
+import { markRaw, reactive, shallowReactive } from "vue";
+export const useOverlay = createSharedComposable(() => {
+  const overlays = shallowReactive([]);
+  const generateId = () => `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  function create(component, options = {}) {
+    const { props = {}, defaultOpen = false, unmountOnHide = true } = options;
+    const state = reactive({
+      id: generateId(),
+      modelValue: defaultOpen,
+      component: markRaw(component),
+      isMounted: defaultOpen,
+      unmountOnHide,
+      props
+    });
+    overlays.push(state);
+    return {
+      open: (props2) => open(state.id, props2),
+      close: (value) => close(state.id, value),
+      patch: (props2) => patch(state.id, props2)
+    };
+  }
+  function open(id, props) {
+    const overlay = getOverlay(id);
+    if (props)
+      patch(id, props);
+    overlay.modelValue = true;
+    overlay.isMounted = true;
+    return new Promise((resolve) => {
+      overlay.resolve = resolve;
+    });
+  }
+  function close(id, value) {
+    const overlay = getOverlay(id);
+    overlay.modelValue = false;
+    if (overlay.resolve) {
+      overlay.resolve(value);
+      overlay.resolve = void 0;
+    }
+  }
+  function unmount(id) {
+    const overlay = getOverlay(id);
+    overlay.isMounted = false;
+    if (overlay.unmountOnHide) {
+      const index = overlays.findIndex((item) => item.id === id);
+      overlays.splice(index, 1);
+    }
+  }
+  function patch(id, props) {
+    const overlay = getOverlay(id);
+    Object.entries(props).forEach(([key, value]) => {
+      overlay.props[key] = value;
+    });
+  }
+  function getOverlay(id) {
+    const item = overlays.find((item2) => item2.id === id);
+    if (!item)
+      throw new Error("Overlay not found");
+    return item;
+  }
+  return {
+    overlays,
+    open,
+    close,
+    create,
+    patch,
+    unmount
+  };
+});

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

@@ -1,5 +1,9 @@
-import * as theme from '../theme/index.js';
+import * as uiTheme from '../theme/index.js';
+import type { StylerProps, StylerReturnType, StylerTheme } from '../types/index.js';
+type UITheme = typeof uiTheme;
 export declare const useTheme: () => {
-    theme: import("vue").ComputedRef<typeof theme>;
+    theme: import("vue").ComputedRef<typeof uiTheme>;
     createStyler: <V extends import("@byyuurin/ui-kit").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit").CVCompoundVariants<V, S, B>, DV extends import("@byyuurin/ui-kit").CVDefaultVariants<V, S>, B extends import("@byyuurin/ui-kit").ClassValue = undefined, S extends import("@byyuurin/ui-kit").CVSlots = undefined>(theme: import("@byyuurin/ui-kit").CVMeta<V, CV, DV, B, S>) => [keyof V] extends string[] ? (props: import("@byyuurin/ui-kit").VariantProps<import("@byyuurin/ui-kit").CVReturnType<V, S, B>> & import("..").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit").CVHandler<V, S, string>; } : (props?: import("..").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit").CVHandler<V, S, string>; };
+    generateStyle: <T extends keyof UITheme>(name: T, props?: StylerProps<UITheme[T]>) => StylerReturnType<StylerTheme<UITheme[T]>>;
 };
+export {};

package/dist/runtime/composables/useTheme.js

@@ -2,15 +2,21 @@ import { transformUnoRules } from "@byyuurin/ui/unocss";
 import { createSharedComposable } from "@vueuse/core";
 import { computed, toValue } from "vue";
 import { injectThemeExtension, injectUnoConfig } from "../app/injections.js";
-import * as theme from "../theme/index.js";
+import * as uiTheme from "../theme/index.js";
 import { extendTheme, prepareStyler } from "../utils/index.js";
 export const useTheme = createSharedComposable(() => {
   const themeExtension = injectThemeExtension();
   const unoConfig = injectUnoConfig();
   const mergeRules = transformUnoRules(toValue(unoConfig));
   const { createStyler } = prepareStyler(mergeRules);
+  const theme = computed(() => extendTheme(toValue(themeExtension), uiTheme));
+  function generateStyle(name, props) {
+    const styler = createStyler(theme.value[name]);
+    return styler(props);
+  }
   return {
-    theme: computed(() => extendTheme(toValue(themeExtension), theme)),
-    createStyler
+    theme,
+    createStyler,
+    generateStyle
   };
 });

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

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

package/dist/runtime/composables/useToast.js

@@ -1,11 +1,12 @@
 import { createSharedComposable } from "@vueuse/core";
 import { nextTick, ref } from "vue";
+import { useState } from "#imports";
 export const useToast = createSharedComposable(() => {
-  const toasts = ref([]);
+  const toasts = useState("toasts", () => []);
   const running = ref(false);
   const maxToasts = 5;
   const queue = [];
-  const generateId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  const generateId = () => `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
   async function processQueue() {
     if (running.value || queue.length === 0)
       return;
@@ -28,7 +29,7 @@ export const useToast = createSharedComposable(() => {
     return body;
   }
   function update(id, toast) {
-    const index = toasts.value.findIndex((t) => t.id === id);
+    const index = toasts.value.findIndex((toast2) => toast2.id === id);
     if (index === -1)
       return;
     toasts.value[index] = {
@@ -37,7 +38,7 @@ export const useToast = createSharedComposable(() => {
     };
   }
   function remove(id) {
-    const index = toasts.value.findIndex((t) => t.id === id);
+    const index = toasts.value.findIndex((toast) => toast.id === id);
     if (index === -1)
       return;
     toasts.value[index] = {
@@ -45,7 +46,7 @@ export const useToast = createSharedComposable(() => {
       open: false
     };
     setTimeout(() => {
-      toasts.value = toasts.value.filter((t) => t.id !== id);
+      toasts.value = toasts.value.filter((toast) => toast.id !== id);
     }, 200);
   }
   function clear() {

package/dist/runtime/index.d.ts

@@ -7,6 +7,7 @@ export { default as Badge } from './components/Badge.vue.js';
 export { default as Breadcrumb } from './components/Breadcrumb.vue.js';
 export { default as Button } from './components/Button.vue.js';
 export { default as ButtonGroup } from './components/ButtonGroup.vue.js';
+export { default as Calendar } from './components/Calendar.vue.js';
 export { default as Card } from './components/Card.vue.js';
 export { default as Carousel } from './components/Carousel.vue.js';
 export { default as Checkbox } from './components/Checkbox.vue.js';
@@ -19,7 +20,7 @@ export { default as Kbd } from './components/Kbd.vue.js';
 export { default as Link } from './components/Link.vue.js';
 export { default as LinkBase } from './components/LinkBase.vue.js';
 export { default as Modal } from './components/Modal.vue.js';
-export { default as ModalProvider } from './components/ModalProvider.vue.js';
+export { default as OverlayProvider } from './components/OverlayProvider.vue.js';
 export { default as Pagination } from './components/Pagination.vue.js';
 export { default as PinInput } from './components/PinInput.vue.js';
 export { default as Popover } from './components/Popover.vue.js';
@@ -35,6 +36,6 @@ export { default as Table } from './components/Table.vue.js';
 export { default as Tabs } from './components/Tabs.vue.js';
 export { default as Textarea } from './components/Textarea.vue.js';
 export { default as Toast } from './components/Toast.vue.js';
-export { default as Toaster } from './components/Toaster.vue.js';
+export { default as ToastProvider } from './components/ToastProvider.vue.js';
 export { default as Tooltip } from './components/Tooltip.vue.js';
 export * from './types/index.js';

package/dist/runtime/index.js

@@ -7,6 +7,7 @@ export { default as Badge } from "./components/Badge.vue";
 export { default as Breadcrumb } from "./components/Breadcrumb.vue";
 export { default as Button } from "./components/Button.vue";
 export { default as ButtonGroup } from "./components/ButtonGroup.vue";
+export { default as Calendar } from "./components/Calendar.vue";
 export { default as Card } from "./components/Card.vue";
 export { default as Carousel } from "./components/Carousel.vue";
 export { default as Checkbox } from "./components/Checkbox.vue";
@@ -19,7 +20,7 @@ export { default as Kbd } from "./components/Kbd.vue";
 export { default as Link } from "./components/Link.vue";
 export { default as LinkBase } from "./components/LinkBase.vue";
 export { default as Modal } from "./components/Modal.vue";
-export { default as ModalProvider } from "./components/ModalProvider.vue";
+export { default as OverlayProvider } from "./components/OverlayProvider.vue";
 export { default as Pagination } from "./components/Pagination.vue";
 export { default as PinInput } from "./components/PinInput.vue";
 export { default as Popover } from "./components/Popover.vue";
@@ -35,6 +36,6 @@ export { default as Table } from "./components/Table.vue";
 export { default as Tabs } from "./components/Tabs.vue";
 export { default as Textarea } from "./components/Textarea.vue";
 export { default as Toast } from "./components/Toast.vue";
-export { default as Toaster } from "./components/Toaster.vue";
+export { default as ToastProvider } from "./components/ToastProvider.vue";
 export { default as Tooltip } from "./components/Tooltip.vue";
 export * from "./types/index.js";

package/dist/runtime/locale/en.js

@@ -6,6 +6,12 @@ export default defineLocale({
     alert: {
       close: "Close"
     },
+    calendar: {
+      prevYear: "Previous year",
+      nextYear: "Next year",
+      prevMonth: "Previous month",
+      nextMonth: "Next month"
+    },
     carousel: {
       prev: "Prev",
       next: "Next",

package/dist/runtime/locale/zh-tw.js

@@ -6,6 +6,12 @@ export default defineLocale({
     alert: {
       close: "\u95DC\u9589"
     },
+    calendar: {
+      prevYear: "\u53BB\u5E74",
+      nextYear: "\u660E\u5E74",
+      prevMonth: "\u4E0A\u500B\u6708",
+      nextMonth: "\u4E0B\u500B\u6708"
+    },
     carousel: {
       prev: "\u4E0A\u4E00\u9801",
       next: "\u4E0B\u4E00\u9801",

package/dist/runtime/theme/accordion.js

@@ -3,16 +3,16 @@ export default ct(
   /* @unocss-include */
   {
     slots: {
-      root: "w-full color-ui-cb",
+      root: "w-full color-ui-base",
       item: "border-b last:border-b-0",
       header: "flex",
-      trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 outline-none focus-visible:outline-ui-cb/80 min-w-0",
+      trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 outline-none focus-visible:outline-ui-base/80 min-w-0",
       content: [
         "overflow-hidden focus:outline-none",
         "data-[state=open]:animate-[accordion-down_200ms_ease-out]",
         "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
       ],
-      body: "text-sm pb-4 color-ui-cb/80",
+      body: "text-sm pb-4 color-ui-base/80",
       leadingIcon: "shrink-0 size-5",
       trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-all duration-200",
       label: "text-start break-words"

package/dist/runtime/theme/alert.js

@@ -18,13 +18,13 @@ export default ct(
           close: "ui-base-inverted"
         },
         "outline": {
-          root: "color-ui-content bg-ui-cx ring ring-inset ring-ui-fill/30"
+          root: "color-ui-fill bg-ui-base ring ring-inset ring-ui-fill/30"
         },
         "soft": {
-          root: "color-ui-content bg-soft-ui-fill/10"
+          root: "color-ui-fill bg-soft-ui-fill/10"
         },
         "soft-outline": {
-          root: "color-ui-content bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
+          root: "color-ui-fill bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
         }
       },
       orientation: {

package/dist/runtime/theme/avatar.js

@@ -5,8 +5,8 @@ export default ct(
     slots: {
       root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-soft-ui-cb/10",
       image: "size-full rounded-inherit object-cover",
-      fallback: "leading-none color-ui-cb/60 truncate",
-      icon: "size-3/4 color-ui-cb/60 shrink-0"
+      fallback: "leading-none color-ui-base/60 truncate",
+      icon: "size-3/4 color-ui-base/60 shrink-0"
     },
     variants: {
       size: {