@sewadah/selaras 0.3.0 → 0.3.2

package/README.md

@@ -128,7 +128,10 @@ See the full [Theming guide](./docs/content/overview/theming.md).
   # Generate type stubs and prepare the docs site
   npm run docs:prepare
 
-  # Develop with the docs site (documentation + component showcase)
+  # Develop with the Selaras documentation site in /docs
+  npm run dev
+
+  # Develop the standalone documentation template preview
   npm run docs:dev
 
   # Generate the static docs site

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -41,7 +41,10 @@ function createBuiltinColorRegistry(classPrefix) {
         fill,
         fillHover: hover,
         fillPressed: pressed,
-        onFill: foundation("neutral", brightIntent ? 950 : dark ? 950 : 25),
+        // The vivid light-mode intent fills intentionally use white text.
+        // Dark mode restores the shared dark foreground on its lighter fills.
+        // Consumers can override onFill in their own recipe.
+        onFill: brightIntent && !dark ? "#ffffff" : foundation("neutral", dark ? 950 : 25),
         indicator,
         subtle,
         subtleHover: brightIntent ? `color-mix(in oklab, ${subtle} 96%, ${text})` : dark ? `color-mix(in oklab, ${foundation(role, 500)} 32%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 94%, ${text})`,
@@ -83,10 +86,11 @@ const module$1 = defineNuxtModule({
       path: resolver.resolve("./runtime/components"),
       prefix: options.prefix,
       pathPrefix: false,
-      // SColumn/SColumnGroup are plain .ts files (never render real DOM), not
-      // .vue SFCs - addComponentsDir only scans .vue by default.
-      extensions: ["vue", "ts"],
-      // ModalRenderer is App.vue's own internal render loop for useModal(),
+      // SColumn/SColumnGroup are plain render-function modules (never render
+      // real DOM). Source uses .ts; the published build emits .js.
+      extensions: ["vue", "ts", "js"],
+      // ModalRenderer/ConfirmRenderer are App.vue's internal render loops for
+      // useModal()/useConfirm(),
       // mirroring the same un-exported overlay-provider pattern other Nuxt
       // component libraries commonly use internally - not meant to be
       // placed by a consumer (App.vue already mounts one; a second copy
@@ -99,7 +103,7 @@ const module$1 = defineNuxtModule({
       // meant to be placed directly either. SlideoverRenderer/DrawerRenderer
       // are useSlideover()'s/useDrawer()'s own render loops, same reasoning
       // as ModalRenderer.
-      ignore: ["**/ModalRenderer.vue", "**/NavigationMenuAccordionItem.vue", "**/NavigationMenuFlyoutList.vue", "**/NavigationMenuFlyoutTrigger.vue", "**/SlideoverRenderer.vue", "**/DrawerRenderer.vue"]
+      ignore: ["**/ModalRenderer.vue", "**/ConfirmRenderer.vue", "**/NavigationMenuAccordionItem.vue", "**/NavigationMenuFlyoutList.vue", "**/NavigationMenuFlyoutTrigger.vue", "**/SlideoverRenderer.vue", "**/DrawerRenderer.vue"]
     });
     const hasContentModule = nuxt.options.modules.some((m) => {
       const name = typeof m === "string" ? m : Array.isArray(m) && typeof m[0] === "string" ? m[0] : void 0;
@@ -117,6 +121,7 @@ const module$1 = defineNuxtModule({
     }
     addImports([
       { name: "useCommandPalette", from: resolver.resolve("./runtime/composables/use-command-palette") },
+      { name: "useConfirm", from: resolver.resolve("./runtime/composables/use-confirm") },
       { name: "useDrawer", from: resolver.resolve("./runtime/composables/use-drawer") },
       { name: "useIcons", from: resolver.resolve("./runtime/composables/use-icons") },
       { name: "useLocale", from: resolver.resolve("./runtime/composables/use-locale") },
@@ -135,6 +140,16 @@ const module$1 = defineNuxtModule({
       from: resolver.resolve("./runtime/directives/ripple"),
       meta: { vueDirective: true }
     });
+    addImports({
+      name: "vMask",
+      from: resolver.resolve("./runtime/directives/mask"),
+      meta: { vueDirective: true }
+    });
+    addImports({
+      name: "vHotkey",
+      from: resolver.resolve("./runtime/directives/hotkey"),
+      meta: { vueDirective: true }
+    });
     addTemplate({
       filename: "selaras-class-prefix.mjs",
       getContents: () => `export const classPrefix = ${JSON.stringify(options.classPrefix ?? null)}

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

@@ -7,6 +7,8 @@ export interface AlertDialogProps {
     defaultOpen?: boolean;
     title?: string;
     description?: string;
+    /** Optional icon shown beside the dialog heading. */
+    icon?: string;
     /** Label for the default Cancel button - only rendered when no `footer` slot is given. @default 'Cancel' */
     cancelLabel?: string;
     /** Label for the default action button - only rendered when no `footer` slot is given. @default 'Continue' */
@@ -33,15 +35,15 @@ export interface AlertDialogEmits {
     /** Fires once the close transition has actually finished (or immediately, if `transition` is off) - the signal a programmatic caller needs before it's safe to unmount this instance without cutting its exit animation short. */
     'afterLeave': [];
 }
-declare var __VLS_16: {}, __VLS_39: {}, __VLS_53: {}, __VLS_55: {};
+declare var __VLS_16: {}, __VLS_39: {}, __VLS_58: {}, __VLS_60: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_16) => any;
 } & {
     header?: (props: typeof __VLS_39) => any;
 } & {
-    body?: (props: typeof __VLS_53) => any;
+    body?: (props: typeof __VLS_58) => any;
 } & {
-    footer?: (props: typeof __VLS_55) => any;
+    footer?: (props: typeof __VLS_60) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<AlertDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/runtime/components/AlertDialog.vue

@@ -3,13 +3,16 @@ import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDe
 import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from "vue";
 import { useMessages } from "../composables/use-messages";
 import { alertDialogTheme } from "../theme/alert-dialog";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
+  icon: { type: String, required: false },
   cancelLabel: { type: String, required: false },
   actionLabel: { type: String, required: false },
   actionColor: { type: null, required: false },
@@ -65,8 +68,8 @@ const messages = useMessages();
 const theme = useComponentTheme("alertDialog", alertDialogTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ transition: props.transition }));
+const contentProps = useRootProps(() => ui.value.content, () => props.ui?.content);
 const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
 const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
 const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
@@ -96,14 +99,19 @@ const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer
         @pointer-down-outside="onPointerDownOutside"
         @animationend="onContentAnimationEnd"
       >
-        <div v-if="title || description || $slots.header" v-bind="headerProps">
+        <div v-if="title || description || icon || $slots.header" v-bind="headerProps">
           <slot name="header">
-            <AlertDialogTitle v-if="title" v-bind="titleProps">
-              {{ title }}
-            </AlertDialogTitle>
-            <AlertDialogDescription v-if="description" v-bind="descriptionProps">
-              {{ description }}
-            </AlertDialogDescription>
+            <div class="flex items-start gap-3">
+              <Icon v-if="icon" :name="icon" class="mt-0.5 size-5 shrink-0" aria-hidden="true" />
+              <div class="min-w-0">
+                <AlertDialogTitle v-if="title" v-bind="titleProps">
+                  {{ title }}
+                </AlertDialogTitle>
+                <AlertDialogDescription v-if="description" v-bind="descriptionProps">
+                  {{ description }}
+                </AlertDialogDescription>
+              </div>
+            </div>
           </slot>
         </div>
         <div v-if="$slots.body" v-bind="bodyProps">

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

@@ -7,6 +7,8 @@ export interface AlertDialogProps {
     defaultOpen?: boolean;
     title?: string;
     description?: string;
+    /** Optional icon shown beside the dialog heading. */
+    icon?: string;
     /** Label for the default Cancel button - only rendered when no `footer` slot is given. @default 'Cancel' */
     cancelLabel?: string;
     /** Label for the default action button - only rendered when no `footer` slot is given. @default 'Continue' */
@@ -33,15 +35,15 @@ export interface AlertDialogEmits {
     /** Fires once the close transition has actually finished (or immediately, if `transition` is off) - the signal a programmatic caller needs before it's safe to unmount this instance without cutting its exit animation short. */
     'afterLeave': [];
 }
-declare var __VLS_16: {}, __VLS_39: {}, __VLS_53: {}, __VLS_55: {};
+declare var __VLS_16: {}, __VLS_39: {}, __VLS_58: {}, __VLS_60: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_16) => any;
 } & {
     header?: (props: typeof __VLS_39) => any;
 } & {
-    body?: (props: typeof __VLS_53) => any;
+    body?: (props: typeof __VLS_58) => any;
 } & {
-    footer?: (props: typeof __VLS_55) => any;
+    footer?: (props: typeof __VLS_60) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<AlertDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/runtime/components/App.vue

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { useAppConfig, useHead } from "#imports";
 import { useLocale } from "../composables/use-locale";
 import { generateRuntimeTokenOverrideCss } from "../utils/color-registry";
+import ConfirmRenderer from "./ConfirmRenderer.vue";
 import DrawerRenderer from "./DrawerRenderer.vue";
 import ModalRenderer from "./ModalRenderer.vue";
 import SlideoverRenderer from "./SlideoverRenderer.vue";
@@ -29,5 +30,6 @@ useHead({
     <ModalRenderer />
     <SlideoverRenderer />
     <DrawerRenderer />
+    <ConfirmRenderer />
   </ConfigProvider>
 </template>

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

@@ -1,7 +1,7 @@
 import type { AutocompleteProps, AutocompleteSlots, AutocompleteValue } from '../utils/autocomplete-contracts.js';
-import type { SelectModel } from '../utils/select-contracts.js';
+import type { SelectEntry, SelectModel } from '../utils/select-contracts.js';
 export type { AutocompleteEmits, AutocompleteProps, AutocompleteSlots } from '../utils/autocomplete-contracts.js';
-declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AutocompleteProps<Entry, Key, Multiple, Forced> & {
         "onUpdate:modelValue"?: ((value: SelectModel<AutocompleteValue<Entry, Key, Forced>, Multiple>) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/runtime/components/Autocomplete.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   name: { type: String, required: false },
   form: { type: String, required: false },
   items: { type: Array, required: true },
-  valueKey: { type: String, required: false },
+  valueKey: { type: void 0, required: false },
   labelKey: { type: String, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
@@ -30,7 +30,9 @@ const props = defineProps({
   searchTerm: { type: String, required: false },
   resetSearchTermOnBlur: { type: Boolean, required: false },
   resetSearchTermOnSelect: { type: Boolean, required: false },
-  arrow: { type: Boolean, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });

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

@@ -1,7 +1,7 @@
 import type { AutocompleteProps, AutocompleteSlots, AutocompleteValue } from '../utils/autocomplete-contracts.js';
-import type { SelectModel } from '../utils/select-contracts.js';
+import type { SelectEntry, SelectModel } from '../utils/select-contracts.js';
 export type { AutocompleteEmits, AutocompleteProps, AutocompleteSlots } from '../utils/autocomplete-contracts.js';
-declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AutocompleteProps<Entry, Key, Multiple, Forced> & {
         "onUpdate:modelValue"?: ((value: SelectModel<AutocompleteValue<Entry, Key, Forced>, Multiple>) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;

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

@@ -8,6 +8,8 @@ type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface ButtonProps {
     /** A tag name ('a', 'span', ...) or a component reference (e.g. NuxtLink, via resolveComponent) - Primitive renders whichever is given. */
     as?: string | Component;
+    /** Nuxt route or URL. Renders NuxtLink unless an explicit `as` overrides it. */
+    to?: string;
     /** Native button type when `as="button"`. Defaults to `button` so actions inside forms do not submit accidentally. */
     type?: 'button' | 'submit' | 'reset';
     color?: ColorRole;
@@ -25,17 +27,17 @@ export interface ButtonProps {
     square?: boolean;
     ui?: UiProp<ButtonThemeSlots>;
 }
-declare var __VLS_13: {
+declare var __VLS_15: {
     class: unknown;
-}, __VLS_20: {}, __VLS_22: {
+}, __VLS_22: {}, __VLS_24: {
     class: unknown;
 };
 type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_13) => any;
+    icon?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_22) => any;
 } & {
-    'trailing-icon'?: (props: typeof __VLS_22) => any;
+    'trailing-icon'?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/Button.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { Primitive } from "reka-ui";
-import { computed, useSlots } from "vue";
+import { computed, getCurrentInstance, useSlots } from "vue";
+import { NuxtLink } from "#components";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { useRippleEnabled } from "../composables/use-ripple";
@@ -12,6 +13,7 @@ import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
+  to: { type: String, required: false },
   type: { type: String, required: false, default: "button" },
   color: { type: null, required: false },
   variant: { type: null, required: false },
@@ -26,11 +28,20 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = useSlots();
+const hasExplicitAs = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "as");
+const resolvedAs = computed(() => hasExplicitAs ? props.as : props.to ? NuxtLink : props.as);
+const isNativeButton = computed(() => resolvedAs.value === "button");
+function onClick(event) {
+  if (props.disabled && !isNativeButton.value) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
 const iconOnly = computed(() => !slots.default);
 const icons = useIcons();
 const messages = useMessages();
 const rippleEnabledSetting = useRippleEnabled();
-const rippleEnabled = computed(() => rippleEnabledSetting.value && props.variant !== "text");
+const rippleEnabled = computed(() => rippleEnabledSetting.value && props.variant !== "text" && props.variant !== "link");
 const theme = useComponentTheme("button", buttonTheme);
 const themeProps = useThemeProps("button");
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "primary", "primary"));
@@ -46,7 +57,7 @@ const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
 </script>
 
 <template>
-  <Primitive v-ripple="rippleEnabled" :as="as" :type="as === 'button' ? type : void 0" :disabled="disabled" :aria-busy="loading || void 0" :data-selaras-color="effectiveColor" v-bind="rootProps">
+  <Primitive v-ripple="rippleEnabled" :as="resolvedAs" :to="resolvedAs === NuxtLink || typeof resolvedAs !== 'string' ? to : void 0" :type="isNativeButton ? type : void 0" :disabled="isNativeButton ? disabled : void 0" :aria-disabled="!isNativeButton && disabled ? 'true' : void 0" :tabindex="!isNativeButton && disabled ? -1 : void 0" :aria-busy="loading || void 0" :data-selaras-color="effectiveColor" v-bind="rootProps" @click="onClick">
     <Icon v-if="loading" :name="icons.loading" :class="applyClassPrefix('animate-spin')" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <!--
       A named slot (not just the `icon` prop) so a consumer building a

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

@@ -8,6 +8,8 @@ type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface ButtonProps {
     /** A tag name ('a', 'span', ...) or a component reference (e.g. NuxtLink, via resolveComponent) - Primitive renders whichever is given. */
     as?: string | Component;
+    /** Nuxt route or URL. Renders NuxtLink unless an explicit `as` overrides it. */
+    to?: string;
     /** Native button type when `as="button"`. Defaults to `button` so actions inside forms do not submit accidentally. */
     type?: 'button' | 'submit' | 'reset';
     color?: ColorRole;
@@ -25,17 +27,17 @@ export interface ButtonProps {
     square?: boolean;
     ui?: UiProp<ButtonThemeSlots>;
 }
-declare var __VLS_13: {
+declare var __VLS_15: {
     class: unknown;
-}, __VLS_20: {}, __VLS_22: {
+}, __VLS_22: {}, __VLS_24: {
     class: unknown;
 };
 type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_13) => any;
+    icon?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_22) => any;
 } & {
-    'trailing-icon'?: (props: typeof __VLS_22) => any;
+    'trailing-icon'?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,69 @@
+import type { DateValue } from '@internationalized/date';
+import type { CalendarThemeSlots } from '../theme/calendar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = {
+    'day'?: (props: CalendarDaySlotProps) => any;
+    /** Renders beside the date trigger within its grid cell. Safe for event links/buttons. */
+    'day-details'?: (props: {
+        date: DateValue;
+        month: DateValue;
+    }) => any;
+    'footer'?: () => any;
+};
+export interface CalendarProps {
+    modelValue?: DateValue;
+    defaultValue?: DateValue;
+    /** The displayed month when controlled independently of the selected date. */
+    placeholder?: DateValue;
+    defaultPlaceholder?: DateValue;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateDisabled?: (date: DateValue) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    locale?: string;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    fixedWeeks?: boolean;
+    disableDaysOutsideCurrentView?: boolean;
+    preventDeselect?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    initialFocus?: boolean;
+    calendarLabel?: string;
+    color?: ColorRole;
+    activeColor?: ColorRole;
+    ui?: UiProp<CalendarThemeSlots>;
+}
+export interface CalendarEmits {
+    'update:modelValue': [value: DateValue | undefined];
+    'update:placeholder': [value: DateValue];
+}
+export interface CalendarDaySlotProps {
+    date: DateValue;
+    month: DateValue;
+    dayValue: string;
+    selected: boolean;
+    today: boolean;
+    disabled: boolean;
+    unavailable: boolean;
+    outsideView: boolean;
+    outsideVisibleView: boolean;
+}
+declare const __VLS_base: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | undefined) => any;
+    "update:placeholder": (value: DateValue) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | undefined) => any) | undefined;
+    "onUpdate:placeholder"?: ((value: DateValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,163 @@
+<script setup>
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrev,
+  CalendarRoot
+} from "reka-ui";
+import { computed, getCurrentInstance, useId, useSlots } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { calendarTheme } from "../theme/calendar";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: Object, required: false },
+  defaultValue: { type: Object, required: false },
+  placeholder: { type: Object, required: false },
+  defaultPlaceholder: { type: Object, required: false },
+  minValue: { type: Object, required: false },
+  maxValue: { type: Object, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  locale: { type: String, required: false },
+  numberOfMonths: { type: Number, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  weekStartsOn: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  initialFocus: { type: Boolean, required: false },
+  calendarLabel: { type: String, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  activeColor: { type: null, required: false, default: "primary" },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:placeholder"]);
+defineSlots();
+const slots = useSlots();
+const instance = getCurrentInstance();
+const detailsId = useId();
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("calendar", calendarTheme);
+const ui = computed(() => theme.value());
+const color = computed(() => resolveRegisteredColorRole(props.color, "neutral"));
+const activeColor = computed(() => resolveRegisteredColorRole(props.activeColor, "primary"));
+const rootModelValue = computed(() => {
+  const vnodeProps = instance.vnode.props ?? {};
+  const isControlled = Object.hasOwn(vnodeProps, "modelValue") || Object.hasOwn(vnodeProps, "model-value");
+  return isControlled && props.modelValue === void 0 ? null : props.modelValue;
+});
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const headingProps = computed(() => resolveSlot(ui.value.heading, props.ui?.heading));
+const gridsProps = computed(() => resolveSlot(ui.value.grids, props.ui?.grids));
+const gridProps = computed(() => resolveSlot(ui.value.grid, props.ui?.grid));
+const gridHeadProps = computed(() => resolveSlot(ui.value.gridHead, props.ui?.gridHead));
+const headCellProps = computed(() => resolveSlot(ui.value.headCell, props.ui?.headCell));
+const cellProps = computed(() => resolveSlot(ui.value.cell, props.ui?.cell));
+const dayButtonProps = computed(() => resolveSlot(ui.value.dayButton, props.ui?.dayButton));
+const dayDetailsProps = computed(() => resolveSlot(ui.value.dayDetails, props.ui?.dayDetails));
+const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
+const navButtonUi = { leadingIcon: "rtl:-scale-x-100" };
+const dayDetailsId = (month, date) => `${detailsId}-${month.toString()}-${date.toString()}`;
+</script>
+
+<template>
+  <CalendarRoot
+    :model-value="rootModelValue"
+    :default-value="defaultValue"
+    :placeholder="placeholder"
+    :default-placeholder="defaultPlaceholder"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-disabled="isDateDisabled"
+    :is-date-unavailable="isDateUnavailable"
+    :locale="locale"
+    :number-of-months="numberOfMonths"
+    :paged-navigation="pagedNavigation"
+    :week-starts-on="weekStartsOn"
+    :weekday-format="weekdayFormat"
+    :fixed-weeks="fixedWeeks"
+    :disable-days-outside-current-view="disableDaysOutsideCurrentView"
+    :prevent-deselect="preventDeselect"
+    :disabled="disabled"
+    :readonly="readonly"
+    :initial-focus="initialFocus"
+    :calendar-label="calendarLabel"
+    :data-selaras-color="activeColor"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+    @update:placeholder="(value) => emit('update:placeholder', value)"
+  >
+    <template #default="{ grid, weekDays }">
+      <CalendarHeader v-bind="headerProps">
+        <CalendarPrev as-child>
+          <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronLeft" :aria-label="messages.previousMonth" :ui="navButtonUi" />
+        </CalendarPrev>
+        <CalendarHeading v-bind="headingProps" />
+        <CalendarNext as-child>
+          <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronRight" :aria-label="messages.nextMonth" :ui="navButtonUi" />
+        </CalendarNext>
+      </CalendarHeader>
+
+      <div v-bind="gridsProps">
+        <CalendarGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
+          <CalendarGridHead v-bind="gridHeadProps">
+            <CalendarGridRow>
+              <CalendarHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
+                {{ day }}
+              </CalendarHeadCell>
+            </CalendarGridRow>
+          </CalendarGridHead>
+          <CalendarGridBody>
+            <CalendarGridRow v-for="(week, weekIndex) in month.rows" :key="weekIndex">
+              <CalendarCell v-for="date in week" :key="date.toString()" :date="date" v-bind="cellProps">
+                <CalendarCellTrigger
+                  v-slot="dayState"
+                  :day="date"
+                  :month="month.value"
+                  as-child
+                >
+                  <Button
+                    :variant="dayState.selected ? 'solid' : 'ghost'"
+                    :color="dayState.selected ? activeColor : color"
+                    size="sm"
+                    square
+                    :disabled="dayState.disabled"
+                    :aria-describedby="slots['day-details'] ? dayDetailsId(month.value, date) : void 0"
+                    v-bind="dayButtonProps"
+                  >
+                    <slot name="day" :date="date" :month="month.value" v-bind="dayState">
+                      {{ dayState.dayValue }}
+                    </slot>
+                  </Button>
+                </CalendarCellTrigger>
+                <div v-if="slots['day-details']" :id="dayDetailsId(month.value, date)" v-bind="dayDetailsProps">
+                  <slot name="day-details" :date="date" :month="month.value" />
+                </div>
+              </CalendarCell>
+            </CalendarGridRow>
+          </CalendarGridBody>
+        </CalendarGrid>
+      </div>
+      <div v-if="slots.footer" v-bind="footerProps">
+        <slot name="footer" />
+      </div>
+    </template>
+  </CalendarRoot>
+</template>