@bitrix24/b24ui-nuxt 0.4.7 → 0.4.9

package/dist/module.cjs

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

package/dist/module.d.cts

@@ -5,7 +5,7 @@ interface ModuleOptions {
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     * @link https://bitrix24.github.io/b24ui/guide/color-mode-nuxt.html
      */
     colorMode?: boolean;
 }

package/dist/module.d.mts

@@ -5,7 +5,7 @@ interface ModuleOptions {
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     * @link https://bitrix24.github.io/b24ui/guide/color-mode-nuxt.html
      */
     colorMode?: boolean;
 }

package/dist/module.d.ts

@@ -5,7 +5,7 @@ interface ModuleOptions {
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation#colormode
+     * @link https://bitrix24.github.io/b24ui/guide/color-mode-nuxt.html
      */
     colorMode?: boolean;
 }

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "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.CPOPpSQq.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.D6rkGFKm.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,211 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
+import type { DateValue } from '@internationalized/date'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/calendar'
+import { tv } from '../utils/tv'
+import type { IconComponent } from '../types'
+import type { PartialString } from '../types/utils'
+
+const appConfigCalendar = _appConfig as AppConfig & { b24ui: { calendar: Partial<typeof theme> } }
+
+const calendar = tv({ extend: tv(theme), ...(appConfigCalendar.b24ui?.calendar || {}) })
+
+type CalendarVariants = VariantProps<typeof calendar>
+
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? DateRange
+  : M extends true
+    ? DateValue[]
+    : DateValue
+
+export interface CalendarProps<R extends boolean, M extends boolean> extends Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon to use for the next year control.
+   * @defaultValue icons.chevronDoubleRight
+   * @IconComponent
+   */
+  nextYearIcon?: IconComponent
+  /**
+   * The icon to use for the next month control.
+   * @defaultValue icons.chevronRight
+   * @IconComponent
+   */
+  nextMonthIcon?: IconComponent
+  /**
+   * The icon to use for the previous year control.
+   * @defaultValue icons.chevronDoubleLeft
+   * @IconComponent
+   */
+  prevYearIcon?: IconComponent
+  /**
+   * The icon to use for the previous month control.
+   * @defaultValue icons.chevronLeft
+   * @IconComponent
+   */
+  prevMonthIcon?: IconComponent
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: CalendarVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: CalendarVariants['size']
+  /** Whether a range of dates can be selected */
+  range?: R & boolean
+  /** Whether multiple dates can be selected */
+  multiple?: M & boolean
+  /** Show month controls */
+  monthControls?: boolean
+  /** Show year controls */
+  yearControls?: boolean
+  defaultValue?: CalendarModelValue<R, M>
+  modelValue?: CalendarModelValue<R, M>
+  class?: any
+  b24ui?: PartialString<typeof calendar.slots>
+}
+
+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
+}
+</script>
+
+<script setup lang="ts" generic="R extends boolean = false, M extends boolean = false">
+import { computed } from 'vue'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Calendar as SingleCalendar, RangeCalendar } from 'reka-ui/namespaced'
+import { reactiveOmit } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Button from './Button.vue'
+
+const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
+  fixedWeeks: true,
+  monthControls: true,
+  yearControls: true
+})
+const emits = defineEmits<CalendarEmits<R, M>>()
+defineSlots<CalendarSlots>()
+
+const { code: locale, dir, t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'size', 'monthControls', 'yearControls', 'class', 'b24ui'), emits)
+
+const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === 'rtl' ? icons.chevronDoubleLeft : icons.chevronDoubleRight))
+const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === 'rtl' ? icons.chevronLeft : icons.chevronRight))
+const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === 'rtl' ? icons.chevronDoubleRight : icons.chevronDoubleLeft))
+const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl' ? icons.chevronRight : icons.chevronLeft))
+
+const b24ui = computed(() => calendar({
+  color: props.color,
+  size: props.size
+}))
+
+function paginateYear(date: DateValue, sign: -1 | 1) {
+  if (sign === -1) {
+    return date.subtract({ years: 1 })
+  }
+
+  return date.add({ years: 1 })
+}
+
+const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
+
+const btnSize = computed(() => {
+  switch (props.size) {
+    case 'lg': return 'sm'
+    default: return 'xs'
+  }
+})
+</script>
+
+<template>
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-bind="rootProps"
+    :model-value="(modelValue as CalendarModelValue<true & false>)"
+    :default-value="(defaultValue as CalendarModelValue<true & false>)"
+    :locale="locale"
+    :dir="dir"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+  >
+    <Calendar.Header :class="b24ui.header({ class: props.b24ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <B24Button :icon="prevYearIcon" :size="btnSize" color="link" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <B24Button :icon="prevMonthIcon" :size="btnSize" color="link" />
+      </Calendar.Prev>
+      <Calendar.Heading v-slot="{ headingValue }" :class="b24ui.heading({ class: props.b24ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+        <B24Button :icon="nextMonthIcon" :size="btnSize" color="link" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <B24Button :icon="nextYearIcon" :size="btnSize" color="link" />
+      </Calendar.Next>
+    </Calendar.Header>
+    <div :class="b24ui.body({ class: props.b24ui?.body })">
+      <Calendar.Grid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="b24ui.grid({ class: props.b24ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="b24ui.gridWeekDaysRow({ class: props.b24ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="b24ui.headCell({ class: props.b24ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="b24ui.gridBody({ class: props.b24ui?.gridBody })">
+          <Calendar.GridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            :class="b24ui.gridRow({ class: props.b24ui?.gridRow })"
+          >
+            <Calendar.Cell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="b24ui.cell({ class: props.b24ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                :day="weekDate"
+                :month="month.value"
+                :class="b24ui.cellTrigger({ class: props.b24ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
+</template>

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

@@ -2,6 +2,7 @@ import type { Locale, Direction } from '../types/locale';
 interface DefineLocaleOptions<M> {
     name: string;
     code: string;
+    locale: string;
     dir?: Direction;
     messages: M;
 }

package/dist/runtime/dictionary/icons.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Default icons
+ * ---
+ * @link https://bitrix24.github.io/b24icons/
+ */
 declare const _default: {
     arrowLeft: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
     arrowRight: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;

package/dist/runtime/dictionary/icons.js

@@ -6,6 +6,7 @@ import ChevronDownIcon from "@bitrix24/b24icons-vue/actions/ChevronDownIcon";
 import ChevronToTheLeftIcon from "@bitrix24/b24icons-vue/actions/ChevronToTheLeftIcon";
 import ChevronToTheRightIcon from "@bitrix24/b24icons-vue/actions/ChevronToTheRightIcon";
 import DoubleShevronsRightIcon from "@bitrix24/b24icons-vue/actions/DoubleShevronsRightIcon";
+import DoubleShevronsLeftIcon from "@bitrix24/b24icons-vue/actions/DoubleShevronsLeftIcon";
 import Cross30Icon from "@bitrix24/b24icons-vue/actions/Cross30Icon";
 import DotsIcon from "@bitrix24/b24icons-vue/button/DotsIcon";
 import OpenIn50Icon from "@bitrix24/b24icons-vue/actions/OpenIn50Icon";
@@ -18,7 +19,7 @@ export default {
   arrowLeft: ArrowToTheLeftIcon,
   arrowRight: ArrowToTheRightIcon,
   check: CheckIcon,
-  chevronDoubleLeft: ChevronToTheLeftIcon,
+  chevronDoubleLeft: DoubleShevronsLeftIcon,
   chevronDoubleRight: DoubleShevronsRightIcon,
   chevronDown: ChevronDownIcon,
   chevronLeft: ChevronToTheLeftIcon,

package/dist/runtime/locale/ar.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "\u0639\u0631\u0628\u064A,",
   code: "ar",
+  locale: "ar",
   dir: "rtl",
   messages: {
     inputMenu: {

package/dist/runtime/locale/br.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Portugu\xEAs (Brasil)",
   code: "br",
+  locale: "pt-BR",
   messages: {
     inputMenu: {
       noMatch: "Nenhum dado correspondente",

package/dist/runtime/locale/de.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Deutsch",
   code: "de",
+  locale: "de",
   messages: {
     inputMenu: {
       noMatch: "Nichts gefunden",

package/dist/runtime/locale/en.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "English",
   code: "en",
+  locale: "en",
   messages: {
     inputMenu: {
       noMatch: "No matching data",

package/dist/runtime/locale/fr.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Fran\xE7ais",
   code: "fr",
+  locale: "fr",
   messages: {
     inputMenu: {
       noMatch: "Aucune donn\xE9e correspondante",

package/dist/runtime/locale/id.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Bahasa Indonesia",
   code: "id",
+  locale: "id",
   messages: {
     inputMenu: {
       noMatch: "Tidak ada data yang cocok",

package/dist/runtime/locale/it.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Italiano",
   code: "it",
+  locale: "it",
   messages: {
     inputMenu: {
       noMatch: "Nessun dato corrispondente",

package/dist/runtime/locale/ja.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "\u65E5\u672C\u8A9E",
   code: "ja",
+  locale: "ja",
   messages: {
     inputMenu: {
       noMatch: "\u4E00\u81F4\u3059\u308B\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093",

package/dist/runtime/locale/kz.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "\u049A\u0430\u0437\u0430\u049B\u0448\u0430",
   code: "kz",
+  locale: "kk",
   messages: {
     inputMenu: {
       noMatch: "\u0421\u04D9\u0439\u043A\u0435\u0441 \u0434\u0435\u0440\u0435\u043A\u0442\u0435\u0440 \u0436\u043E\u049B",

package/dist/runtime/locale/la.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Espa\xF1ol",
   code: "la",
+  locale: "es",
   messages: {
     inputMenu: {
       noMatch: "No hay datos coincidentes",

package/dist/runtime/locale/ms.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Bahasa Melayu",
   code: "ms",
+  locale: "ms",
   messages: {
     inputMenu: {
       noMatch: "Tiada data yang sepadan",

package/dist/runtime/locale/pl.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Polski",
   code: "pl",
+  locale: "pl",
   messages: {
     inputMenu: {
       noMatch: "Brak pasuj\u0105cych danych",

package/dist/runtime/locale/ru.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439",
   code: "ru",
+  locale: "ru",
   messages: {
     inputMenu: {
       noMatch: "\u0421\u043E\u0432\u043F\u0430\u0434\u0435\u043D\u0438\u0439 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",

package/dist/runtime/locale/sc.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "\u4E2D\u6587\uFF08\u7B80\u4F53\uFF09",
   code: "sc",
+  locale: "zh-CN",
   messages: {
     inputMenu: {
       noMatch: "\u6CA1\u6709\u5339\u914D\u7684\u6570\u636E",

package/dist/runtime/locale/tc.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "\u4E2D\u6587\uFF08\u7E41\u9AD4)",
   code: "tc",
+  locale: "zh-TW",
   messages: {
     inputMenu: {
       noMatch: "\u6C92\u6709\u76F8\u7B26\u7684\u8CC7\u6599",

package/dist/runtime/locale/th.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "\u0E20\u0E32\u0E29\u0E32\u0E44\u0E17\u0E22",
   code: "th",
+  locale: "th",
   messages: {
     inputMenu: {
       noMatch: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E15\u0E23\u0E07\u0E01\u0E31\u0E19",

package/dist/runtime/locale/tr.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "T\xFCrk\xE7e",
   code: "tr",
+  locale: "tr",
   messages: {
     inputMenu: {
       noMatch: "E\u015Fle\u015Fen veri yok",

package/dist/runtime/locale/ua.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430",
   code: "ua",
+  locale: "uk",
   messages: {
     inputMenu: {
       noMatch: "\u0417\u0431\u0456\u0433\u0456\u0432 \u043D\u0435 \u0437\u043D\u0430\u0439\u0434\u0435\u043D\u043E",

package/dist/runtime/locale/vn.js

@@ -2,6 +2,7 @@ import { defineLocale } from "../composables/defineLocale.js";
 export default defineLocale({
   name: "Ti\u1EBFng Vi\u1EC7t",
   code: "vn",
+  locale: "vi",
   messages: {
     inputMenu: {
       noMatch: "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3 ph\xF9 h\u1EE3p",

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

@@ -6,6 +6,7 @@ export * from '../components/AvatarGroup.vue';
 export * from '../components/Badge.vue';
 export * from '../components/Button.vue';
 export * from '../components/ButtonGroup.vue';
+export * from '../components/Calendar.vue';
 export * from '../components/Checkbox.vue';
 export * from '../components/Chip.vue';
 export * from '../components/Container.vue';

package/dist/runtime/types/index.js

@@ -6,6 +6,7 @@ export * from "../components/AvatarGroup.vue";
 export * from "../components/Badge.vue";
 export * from "../components/Button.vue";
 export * from "../components/ButtonGroup.vue";
+export * from "../components/Calendar.vue";
 export * from "../components/Checkbox.vue";
 export * from "../components/Chip.vue";
 export * from "../components/Container.vue";

package/dist/shared/{b24ui-nuxt.lbv7ybxH.cjs → b24ui-nuxt.CH0xlXgy.cjs}

@@ -1277,6 +1277,118 @@ const button = {
   }
 };
 
+const calendar = {
+  slots: {
+    root: "font-b24-system w-full",
+    header: "flex items-center justify-between",
+    body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
+    heading: "text-center font-semibold truncate mx-auto",
+    grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
+    gridRow: "grid grid-cols-7",
+    gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
+    gridBody: "grid",
+    headCell: "font-normal text-base-500 dark:text-base-500",
+    cell: "relative text-center cursor-pointer aria-disabled:cursor-not-allowed",
+    cellTrigger: [
+      "m-0.5 relative",
+      "flex items-center justify-center",
+      "rounded-full whitespace-nowrap",
+      "focus-visible:ring-2 focus:outline-none",
+      "data-disabled:text-base-500 dark:data-disabled:text-base-600",
+      "data-unavailable:text-base-500 dark:data-unavailable:text-base-600",
+      "data-outside-view:text-base-500 dark:data-outside-view:text-base-600",
+      "data-[selected]:text-white dark:data-[selected]:text-base-100",
+      "data-unavailable:line-through",
+      "data-unavailable:pointer-events-none",
+      "data-today:font-semibold",
+      "transition"
+    ].join(" ")
+  },
+  variants: {
+    color: {
+      default: {
+        cellTrigger: [
+          "focus-visible:ring-base-300 data-[selected]:bg-base-500 data-today:not-data-[selected]:text-blue-500 data-[highlighted]:bg-base-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-base-500/20",
+          "dark:focus-visible:ring-base-800 dark:data-[selected]:bg-base-800 dark:data-today:not-data-[selected]:text-blue-600 dark:data-[highlighted]:bg-base-800/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-base-800/20"
+        ].join(" ")
+      },
+      danger: {
+        cellTrigger: [
+          "focus-visible:ring-red-300 data-[selected]:bg-red-500 data-today:not-data-[selected]:text-red-500 data-[highlighted]:bg-red-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-red-500/20",
+          "dark:focus-visible:ring-red-800 dark:data-[selected]:bg-red-500 dark:data-today:not-data-[selected]:text-red-600 dark:data-[highlighted]:bg-red-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-red-500/20"
+        ].join(" ")
+      },
+      success: {
+        cellTrigger: [
+          "focus-visible:ring-green-300 data-[selected]:bg-green-500 data-today:not-data-[selected]:text-green-500 data-[highlighted]:bg-green-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-green-500/20",
+          "dark:focus-visible:ring-green-800 dark:data-[selected]:bg-green-500 dark:data-today:not-data-[selected]:text-green-600 dark:data-[highlighted]:bg-green-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-green-500/20"
+        ].join(" ")
+      },
+      warning: {
+        cellTrigger: [
+          "focus-visible:ring-orange-300 data-[selected]:bg-orange-500 data-today:not-data-[selected]:text-orange-500 data-[highlighted]:bg-orange-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-orange-500/20",
+          "dark:focus-visible:ring-orange-800 dark:data-[selected]:bg-orange-500 dark:data-today:not-data-[selected]:text-orange-600 dark:data-[highlighted]:bg-orange-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-orange-500/20"
+        ].join(" ")
+      },
+      primary: {
+        cellTrigger: [
+          "focus-visible:ring-blue-300 data-[selected]:bg-blue-500 data-today:not-data-[selected]:text-blue-500 data-[highlighted]:bg-blue-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-blue-500/20",
+          "dark:focus-visible:ring-blue-800 dark:data-[selected]:bg-blue-500 dark:data-today:not-data-[selected]:text-blue-600 dark:data-[highlighted]:bg-blue-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-blue-500/20"
+        ].join(" ")
+      },
+      secondary: {
+        cellTrigger: [
+          "focus-visible:ring-cyan-300 data-[selected]:bg-cyan-500 data-today:not-data-[selected]:text-cyan-500 data-[highlighted]:bg-cyan-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-cyan-500/20",
+          "dark:focus-visible:ring-cyan-800 dark:data-[selected]:bg-cyan-500 dark:data-today:not-data-[selected]:text-cyan-600 dark:data-[highlighted]:bg-cyan-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-cyan-500/20"
+        ].join(" ")
+      },
+      collab: {
+        cellTrigger: [
+          "focus-visible:ring-collab-300 data-[selected]:bg-collab-500 data-today:not-data-[selected]:text-collab-500 data-[highlighted]:bg-collab-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-collab-500/20",
+          "dark:focus-visible:ring-collab-800 dark:data-[selected]:bg-collab-500 dark:data-today:not-data-[selected]:text-collab-600 dark:data-[highlighted]:bg-collab-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-collab-500/20"
+        ].join(" ")
+      },
+      ai: {
+        cellTrigger: [
+          "focus-visible:ring-ai-300 data-[selected]:bg-ai-500 data-today:not-data-[selected]:text-ai-500 data-[highlighted]:bg-ai-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-ai-500/20",
+          "dark:focus-visible:ring-ai-800 dark:data-[selected]:bg-ai-500 dark:data-today:not-data-[selected]:text-ai-600 dark:data-[highlighted]:bg-ai-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-ai-500/20"
+        ].join(" ")
+      }
+    },
+    size: {
+      xs: {
+        heading: "text-md",
+        cell: "text-sm",
+        headCell: "text-[10px]",
+        cellTrigger: "size-7",
+        body: "space-y-2 pt-2"
+      },
+      sm: {
+        heading: "text-md",
+        headCell: "text-sm",
+        cell: "text-sm",
+        cellTrigger: "size-7"
+      },
+      md: {
+        heading: "text-lg",
+        headCell: "text-md",
+        cell: "text-md",
+        cellTrigger: "size-8"
+      },
+      lg: {
+        heading: "text-2xl",
+        headCell: "text-lg",
+        cell: "text-lg",
+        cellTrigger: "size-9 text-lg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+};
+
 const checkbox = {
   slots: {
     root: "relative flex items-start",
@@ -5294,6 +5406,7 @@ const theme = {
   badge: badge,
   button: button,
   buttonGroup: buttonGroup,
+  calendar: calendar,
   checkbox: checkbox,
   chip: chip,
   container: container,