@bitrix24/b24ui-nuxt 0.2.2 → 0.2.3

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.DgnM0VWe.cjs');
+const templates = require('./shared/b24ui-nuxt.Ce3hzs_q.cjs');
 require('node:url');
 require('scule');
 

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.13.1"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CYvh5VlN.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.DY8ePXC7.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/App.vue

@@ -23,7 +23,7 @@ import { toRef, useId, provide } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import B24Toaster from './Toaster.vue'
-// import B24ModalProvider from './ModalProvider.vue'
+import B24ModalProvider from './ModalProvider.vue'
 // import B24SlideoverProvider from './SlideoverProvider.vue'
 
 const props = defineProps<AppProps>()
@@ -44,7 +44,7 @@ provide(localeContextInjectionKey, locale)
         <slot />
       </B24Toaster>
       <slot v-else />
-      <!-- B24ModalProvider / -->
+      <B24ModalProvider />
       <!-- B24SlideoverProvider / -->
     </TooltipProvider>
   </ConfigProvider>

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/modal'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+
+const appConfigModal = _appConfig as AppConfig & { b24ui: { modal: Partial<typeof theme> } }
+
+const modal = tv({ extend: tv(theme), ...(appConfigModal.b24ui?.modal || {}) })
+
+export interface ModalProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the modal. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the modal.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the modal when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  /**
+   * When `true`, the modal will take up the full screen.
+   * @defaultValue false
+   */
+  fullscreen?: boolean
+  /**
+   * Render the modal in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the modal.
+   * `{ size: 'xs', color: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   */
+  closeIcon?: IconComponent
+  /**
+   * When `false`, the modal will not close when clicking outside or pressing escape.
+   * @defaultValue true
+   */
+  dismissible?: boolean
+  class?: any
+  b24ui?: Partial<typeof modal.slots>
+}
+
+export interface ModalEmits extends DialogRootEmits {}
+
+export interface ModalSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { b24ui: any }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Button from './Button.vue'
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true,
+  dismissible: true
+})
+const emits = defineEmits<ModalEmits>()
+const slots = defineSlots<ModalSlots>()
+
+const { t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    return {
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {}
+})
+
+const b24ui = computed(() => modal({
+  transition: props.transition,
+  fullscreen: props.fullscreen
+}))
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal :disabled="!portal">
+      <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
+
+      <DialogContent :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="b24ui.header({ class: props.b24ui?.header })">
+            <slot name="header">
+              <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                <slot name="description">
+                  {{ description }}
+                </slot>
+              </DialogDescription>
+
+              <DialogClose as-child>
+                <slot name="close" :b24ui="b24ui">
+                  <B24Button
+                    v-if="close"
+                    :icon="closeIcon || icons.close"
+                    size="xs"
+                    color="link"
+                    :aria-label="t('modal.close')"
+                    v-bind="typeof close === 'object' ? close : undefined"
+                    :class="b24ui.close({ class: props.b24ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div v-if="!!slots.body" :class="b24ui.body({ class: props.b24ui?.body })">
+            <slot name="body" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+            <slot name="footer" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/dist/runtime/components/ModalDialogClose.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+export interface ModalDialogCloseSlots {
+  default(props: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from 'reka-ui'
+
+defineSlots<ModalDialogCloseSlots>()
+</script>
+
+<template>
+  <DialogClose as-child>
+    <slot />
+  </DialogClose>
+</template>

package/dist/runtime/components/ModalProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useModal, modalInjectionKey } from '../composables/useModal'
+
+const modalState = inject(modalInjectionKey)
+
+const { isOpen } = useModal()
+</script>
+
+<template>
+  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model:open="isOpen" />
+</template>

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

@@ -15,6 +15,6 @@ export interface UseComponentIconsProps {
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<any>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<IconComponent | undefined>;
-    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
+    trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
 };

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

@@ -0,0 +1,17 @@
+import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ModalProps } from '../types';
+export interface ModalState {
+    component: Component | string;
+    props: ModalProps;
+}
+export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
+declare function _useModal(): {
+    open: <T extends Component>(component: T, props?: ModalProps & ComponentProps<T>) => void;
+    close: () => Promise<void>;
+    reset: () => void;
+    patch: <T extends Component = Record<string, never>>(props: Partial<ModalProps & ComponentProps<T>>) => void;
+    isOpen: import("vue").Ref<boolean, boolean>;
+};
+export declare const useModal: typeof _useModal;
+export {};

package/dist/runtime/composables/useModal.js

@@ -0,0 +1,46 @@
+import { ref, inject } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+export const modalInjectionKey = Symbol("bitrix24-ui.modal");
+function _useModal() {
+  const modalState = inject(modalInjectionKey);
+  const isOpen = ref(false);
+  function open(component, props) {
+    if (!modalState) {
+      throw new Error("useModal() is called without provider");
+    }
+    modalState.value = {
+      component,
+      props: props ?? {}
+    };
+    isOpen.value = true;
+  }
+  async function close() {
+    if (!modalState) return;
+    isOpen.value = false;
+  }
+  function reset() {
+    if (!modalState) return;
+    modalState.value = {
+      component: "div",
+      props: {}
+    };
+  }
+  function patch(props) {
+    if (!modalState) return;
+    modalState.value = {
+      ...modalState.value,
+      props: {
+        ...modalState.value.props,
+        ...props
+      }
+    };
+  }
+  return {
+    open,
+    close,
+    reset,
+    patch,
+    isOpen
+  };
+}
+export const useModal = createSharedComposable(_useModal);

package/dist/runtime/plugins/modal.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/modal.js

@@ -0,0 +1,10 @@
+import { shallowRef } from "vue";
+import { defineNuxtPlugin } from "#imports";
+import { modalInjectionKey } from "../composables/useModal.js";
+export default defineNuxtPlugin((nuxtApp) => {
+  const modalState = shallowRef({
+    component: "div",
+    props: {}
+  });
+  nuxtApp.vueApp.provide(modalInjectionKey, modalState);
+});

package/dist/runtime/types/index.d.ts

@@ -17,6 +17,8 @@ export * from '../components/Input.vue';
 export * from '../components/InputMenu.vue';
 export * from '../components/Kbd.vue';
 export * from '../components/Link.vue';
+export * from '../components/Modal.vue';
+export * from '../components/ModalDialogClose.vue';
 export * from '../components/Progress.vue';
 export * from '../components/RadioGroup.vue';
 export * from '../components/Range.vue';

package/dist/runtime/types/index.js

@@ -17,6 +17,8 @@ export * from "../components/Input.vue";
 export * from "../components/InputMenu.vue";
 export * from "../components/Kbd.vue";
 export * from "../components/Link.vue";
+export * from "../components/Modal.vue";
+export * from "../components/ModalDialogClose.vue";
 export * from "../components/Progress.vue";
 export * from "../components/RadioGroup.vue";
 export * from "../components/Range.vue";

package/dist/shared/{b24ui-nuxt.DgnM0VWe.cjs → b24ui-nuxt.Ce3hzs_q.cjs}

@@ -720,7 +720,8 @@ const button = {
   slots: {
     base: [
       "select-none cursor-pointer inline-flex items-center",
-      "relative focus:outline-hidden",
+      "relative",
+      "outline-transparent focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2",
       "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50",
       "transition duration-150 ease-linear"
       // transition-colors
@@ -737,7 +738,6 @@ const button = {
   variants: {
     ...buttonGroupVariant,
     color: {
-      // DEFAULT ////
       default: [
         "text-white dark:text-base-100 bg-base-650 border border-base-650",
         "hover:bg-base-850 hover:border-base-850 hover:focus-visible:ring-0",
@@ -754,7 +754,6 @@ const button = {
         "focus-visible:outline-red-720",
         "ring-red-800 focus-visible:ring-red-800"
       ].join(" "),
-      // SUCCESS ////
       success: [
         "text-base-900 bg-green-450 border border-green-450",
         "hover:bg-green-370 hover:border-green-370 hover:focus-visible:ring-0",
@@ -763,7 +762,6 @@ const button = {
         "focus-visible:outline-green-450",
         "ring-green-500 focus-visible:ring-green-500"
       ].join(" "),
-      // new WARNING ////
       warning: [
         "text-white dark:text-orange-100 bg-orange-500 border border-orange-500",
         "hover:bg-orange-500/75 hover:border-orange-500/75 hover:focus-visible:ring-0",
@@ -772,7 +770,6 @@ const button = {
         "focus-visible:outline-orange-500",
         "ring-orange-800 focus-visible:ring-orange-800"
       ].join(" "),
-      // PRIMARY ////
       primary: [
         "text-white dark:text-blue-100 bg-blue-530 border border-blue-530",
         "hover:bg-blue-450 hover:border-blue-450 hover:focus-visible:ring-0",
@@ -781,7 +778,6 @@ const button = {
         "focus-visible:outline-blue-530",
         "ring-blue-800 focus-visible:ring-blue-800"
       ].join(" "),
-      // SECONDARY ////
       secondary: [
         "text-base-900 bg-cyan-160 border border-cyan-230",
         "hover:bg-cyan-150 hover:border-cyan-230 hover:focus-visible:ring-0",
@@ -790,7 +786,6 @@ const button = {
         "focus-visible:outline-cyan-160",
         "ring-cyan-500 focus-visible:ring-cyan-500"
       ].join(" "),
-      // COLLAB ////
       collab: [
         "text-white dark:text-collab-100 bg-collab-600 border border-collab-600",
         "hover:bg-collab-500 hover:border-collab-500 hover:focus-visible:ring-0",
@@ -799,7 +794,6 @@ const button = {
         "focus-visible:outline-collab-600",
         "ring-collab-900 focus-visible:ring-collab-900"
       ].join(" "),
-      // AI ////
       ai: [
         "text-white dark:text-ai-100 bg-ai-450 border border-ai-450",
         "hover:bg-ai-370 hover:border-ai-370 hover:focus-visible:ring-0",
@@ -808,7 +802,6 @@ const button = {
         "focus-visible:outline-ai-450",
         "ring-ai-900 focus-visible:ring-ai-900"
       ].join(" "),
-      // LINK ////
       link: [
         "no-underline decoration-solid decoration-auto",
         "text-base-900 decoration-gray-900 bg-transparent border border-transparent dark:text-base-300",
@@ -896,7 +889,6 @@ const button = {
   compoundVariants: [
     // region default ////
     {
-      // BASE_LIGHT ////
       color: "default",
       depth: "light",
       class: [
@@ -904,7 +896,8 @@ const button = {
         "hover:bg-base-320 hover:border-base-320 hover:focus-visible:ring-0",
         "active:bg-base-250 active:border-base-250 active:focus-visible:ring-0",
         "disabled:bg-base-200 aria-disabled:bg-base-200 disabled:border-base-300 aria-disabled:border-base-300",
-        "focus-visible:outline-base-200"
+        "focus-visible:outline-base-200",
+        "ring-base-320 focus-visible:ring-base-320"
       ].join(" ")
     },
     {
@@ -1125,12 +1118,18 @@ const button = {
       ].join(" ")
     },
     {
-      // LIGHT_BORDER ////
+      // LINK ////
       color: "link",
       depth: "light",
       useLabel: true,
       class: "ps-1.5 pe-1.5"
     },
+    {
+      color: "link",
+      depth: "normal",
+      useLabel: true,
+      class: "ps-0 pe-0"
+    },
     {
       // LIGHT_BORDER ////
       color: "link",
@@ -1266,7 +1265,11 @@ const button = {
 const checkbox = {
   slots: {
     root: "relative flex items-start",
-    base: "cursor-pointer shrink-0 flex items-center justify-center rounded-2xs text-white dark:text-base-150 ring ring-inset ring-base-300 dark:ring-base-700 focus-visible:outline-2 focus-visible:outline-offset-2",
+    base: [
+      "cursor-pointer shrink-0 flex items-center justify-center rounded-2xs text-white dark:text-base-150",
+      "ring ring-inset ring-base-300 dark:ring-base-700",
+      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
+    ].join(" "),
     container: "flex items-center",
     wrapper: "font-b24-primary ms-2",
     icon: "shrink-0 size-full",
@@ -2477,9 +2480,9 @@ const inputMenu = () => {
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
       arrow: "fill-base-master/10 dark:fill-base-100/20",
       content: [
-        "w-[var(--reka-popper-anchor-width)]",
+        "w-(--reka-popper-anchor-width)",
         // 'max-h-60',
-        // 'h-[var(--reka-popper-available-height)]',
+        // 'h-(--reka-popper-available-height)',
         "bg-white dark:bg-base-dark",
         "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
         "overflow-hidden",
@@ -2752,6 +2755,46 @@ const link = (options) => ({
   }
 });
 
+const modal = {
+  slots: {
+    overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
+    content: [
+      "py-md2 px-5",
+      "fixed w-full h-dvh bg-white dark:bg-base-950",
+      // 'divide-y divide-base-900/10 dark:divide-white/20',
+      "flex flex-col focus:outline-none"
+    ].join(" "),
+    header: "pe-5 pt-0",
+    body: "flex-1 overflow-y-auto my-2.5 text-md leading-normal",
+    footer: "flex items-center justify-center gap-3 mt-2.5 pt-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20",
+    title: "font-bold text-md leading-normal text-base-900 dark:text-base-150",
+    description: "mt-0.5 mb-1 text-base-500 dark:text-base-400 text-sm",
+    close: "absolute top-2 end-1.5 p-0.5"
+  },
+  variants: {
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+      }
+    },
+    fullscreen: {
+      true: {
+        content: "inset-0"
+      },
+      false: {
+        content: [
+          "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]",
+          "sm:min-w-[400px]",
+          "sm:max-w-[420px] sm:h-auto sm:max-h-[calc(100vh-4rem)]",
+          "sm:rounded-md sm:shadow-lg",
+          "sm:ring ring-base-300 dark:ring-base-800"
+        ].join(" ")
+      }
+    }
+  }
+};
+
 const progress = {
   slots: {
     root: "gap-2",
@@ -3032,7 +3075,11 @@ const radioGroup = {
     fieldset: "flex",
     legend: "mb-1.5 block font-medium text-base-master dark:text-base-400",
     item: "flex items-start",
-    base: "cursor-pointer rounded-full ring ring-inset ring-base-300 dark:ring-base-700 focus-visible:outline-2 focus-visible:outline-offset-2",
+    base: [
+      "cursor-pointer rounded-full",
+      "ring ring-inset ring-base-300 dark:ring-base-700",
+      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
+    ].join(" "),
     indicator: " flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-base-dark after:rounded-full",
     container: "flex items-center",
     wrapper: "font-b24-primary font-regular ms-2",
@@ -3144,7 +3191,11 @@ const range = {
     root: "relative flex items-center select-none touch-none",
     track: "relative bg-base-200 dark:bg-base-800 overflow-hidden rounded-full grow",
     range: "absolute rounded-full",
-    thumb: "rounded-full bg-white dark:bg-base-100 ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
+    thumb: [
+      "rounded-full bg-white dark:bg-base-100",
+      "ring-2",
+      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
+    ].join(" ")
   },
   variants: {
     color: {
@@ -3330,9 +3381,9 @@ const select = () => {
         placeholder: "truncate text-base-400 dark:text-base-300",
         arrow: "fill-base-master/10 dark:fill-base-100/20",
         content: [
-          "w-[var(--reka-popper-anchor-width)]",
+          "w-(--reka-popper-anchor-width)",
           // 'max-h-60',
-          // 'h-[var(--reka-popper-available-height)]',
+          // 'h-(--reka-popper-available-height)',
           "bg-white dark:bg-base-dark",
           "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
           "overflow-hidden",
@@ -3542,7 +3593,8 @@ const _switch = {
   slots: {
     root: "relative flex items-start",
     base: [
-      "cursor-pointer inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-base-200 dark:data-[state=unchecked]:bg-base-800",
+      "cursor-pointer inline-flex items-center shrink-0 rounded-full border-2 border-transparent data-[state=unchecked]:bg-base-200 dark:data-[state=unchecked]:bg-base-800",
+      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2",
       "transition-colors duration-200"
     ].join(" "),
     container: "flex items-center",
@@ -3700,12 +3752,12 @@ const tabs = {
       horizontal: {
         root: "flex-col",
         list: "w-full",
-        indicator: "left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]",
+        indicator: "left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)",
         trigger: "justify-center"
       },
       vertical: {
         list: "flex-col",
-        indicator: "top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)]"
+        indicator: "top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)"
       }
     },
     size: {
@@ -4395,8 +4447,8 @@ const toast = {
 
 const toaster = {
   slots: {
-    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
-    base: "pointer-events-auto absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
+    base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   variants: {
     position: {
@@ -4454,14 +4506,14 @@ const toaster = {
         "left",
         "right"
       ],
-      class: "data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
+      class: "data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=cancel]:translate-x-0"
     },
     {
       swipeDirection: [
         "up",
         "down"
       ],
-      class: "data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--reka-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
+      class: "data-[swipe=move]:translate-y-(--reka-toast-swipe-move-y) data-[swipe=end]:translate-y-(--reka-toast-swipe-end-y) data-[swipe=cancel]:translate-y-0"
     }
   ],
   defaultVariants: {
@@ -4507,6 +4559,7 @@ const theme = {
   inputMenu: inputMenu,
   kbd: kbd,
   link: link,
+  modal: modal,
   progress: progress,
   radioGroup: radioGroup,
   range: range,