nuance-ui 0.1.38 → 0.1.39

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

@@ -10,10 +10,10 @@ export interface ButtonProps extends BoxProps {
     radius?: NuanceRadius;
     /** Styles API */
     classes?: {
-        root?: string;
-        inner?: string;
-        label?: string;
-        section?: string;
+        root?: string | string[];
+        inner?: string | string[];
+        label?: string | string[];
+        section?: string | string[];
     };
     /** section pointer-events */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
@@ -22,13 +22,13 @@ export interface ButtonProps extends BoxProps {
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
     rightSectionProps?: HTMLAttributes;
 }
-declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_15) => any;
+    leftSection?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_21) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_23) => 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/button.module.css

@@ -1 +1 @@
-.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:calc(var(--button-padding-x)/1.5)}.root:where([data-with-right-section]){padding-inline-end:calc(var(--button-padding-x)/1.5)}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease}.inner,.label{align-items:center;display:flex;height:100%}.label{opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;pointer-events:var(--section-pointer-events)}.section:where([data-position=left]){margin-inline-end:var(--spacing-xs)}.section:where([data-position=right]){margin-inline-start:var(--spacing-xs)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--button-border-width:1px;display:flex}.group :where(.root):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--button-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--button-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--button-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--button-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--button-border-width)/2)}.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-border-width)/2)}
+.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--spacing-xs);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--button-border-width:1px;display:flex}.group :where(.root):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--button-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--button-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--button-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--button-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--button-border-width)/2)}.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-border-width)/2)}

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

@@ -10,10 +10,10 @@ export interface ButtonProps extends BoxProps {
     radius?: NuanceRadius;
     /** Styles API */
     classes?: {
-        root?: string;
-        inner?: string;
-        label?: string;
-        section?: string;
+        root?: string | string[];
+        inner?: string | string[];
+        label?: string | string[];
+        section?: string | string[];
     };
     /** section pointer-events */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
@@ -22,13 +22,13 @@ export interface ButtonProps extends BoxProps {
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
     rightSectionProps?: HTMLAttributes;
 }
-declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_15) => any;
+    leftSection?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_21) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_23) => 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/unstyled-button.d.vue.ts

@@ -2,9 +2,9 @@ import type { BoxProps } from '../box.vue.js';
 import type { InputBaseProps } from '../input/index.js';
 interface UnstyledButtonProps extends InputBaseProps, BoxProps {
 }
-declare var __VLS_6: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<UnstyledButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnstyledButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/button/unstyled-button.vue

@@ -9,13 +9,13 @@ const { is = "button", ...props } = defineProps({
 </script>
 
 <template>
-	<Box :is v-bind='props' :class='$style.root' type='button'>
+	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
 		<slot />
 	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
+:where(.unstyled) {
 	touch-action: manipulation;
 	cursor: pointer;
 

package/dist/runtime/components/button/unstyled-button.vue.d.ts

@@ -2,9 +2,9 @@ import type { BoxProps } from '../box.vue.js';
 import type { InputBaseProps } from '../input/index.js';
 interface UnstyledButtonProps extends InputBaseProps, BoxProps {
 }
-declare var __VLS_6: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<UnstyledButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnstyledButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -4,7 +4,7 @@ import type { CalendarLevel, DateSelection, SelectionMode } from './model.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
     /** Controls size */
-    size?: NuanceSize;
+    size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;
     /** Callback function to determine whether the prev button should be disabled */
@@ -18,8 +18,8 @@ export interface CalendarProps<T extends SelectionMode = 'single'> extends Calen
     /** Detects the presence of spaces between cells. @default `true` */
     withCellSpacing?: boolean;
 }
-declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(CalendarProps<T> & {
+declare const __VLS_export: <T extends SelectionMode = "single">(__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<(CalendarProps<T> & {
         date?: DateInput;
         level?: CalendarLevel;
         value?: DateSelection<T>;
@@ -31,24 +31,36 @@ declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: No
         "onUpdate:date"?: ((value: DateInput) => any) | undefined;
         "onUpdate:level"?: ((value: CalendarLevel) => any) | undefined;
         "onUpdate:value"?: ((value: DateSelection<T> | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         level?: (props: {
-            config: any;
+            config: Omit<import("@formkit/tempo").FormatOptions, "date" | "format"> & {
+                firstDayOfWeek: number;
+            } & {
+                firstDayOfWeek: number;
+                locale?: string;
+                genitive?: boolean;
+                tz?: string;
+                partFilter?: (part: import("@formkit/tempo").Part) => boolean;
+            };
         }) => any;
     } & {
         weekday?: (props: {}) => any;
     } & {
         day?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: DateSelection<T>) => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void)) & (((evt: "update:date", value: DateInput) => void) & ((evt: "update:level", value: CalendarLevel) => void) & ((evt: "update:value", value: DateSelection<T> | undefined) => void));
+    emit: (((evt: "select", args_0: DateSelection<T>) => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void)) & (((event: "update:date", value: DateInput) => void) & ((event: "update:level", value: CalendarLevel) => void) & ((event: "update:value", value: DateSelection<T> | undefined) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/calendar/calendar.vue

@@ -18,7 +18,6 @@ const props = defineProps({
   maxDate: { type: [Date, String], required: false },
   excludeDate: { type: Function, required: false },
   highlightToday: { type: Boolean, required: false, default: true },
-  hideWeekdays: { type: Boolean, required: false, default: false },
   hideOutsideDates: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },
   readonly: { type: Boolean, required: false, default: false },
@@ -122,6 +121,7 @@ const [calendars, nav] = useCalendarNavigation({
 
 	display: flex;
 	gap: var(--spacing-sm);
+
 	width: fit-content;
 }
 </style>

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

@@ -4,7 +4,7 @@ import type { CalendarLevel, DateSelection, SelectionMode } from './model.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
     /** Controls size */
-    size?: NuanceSize;
+    size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;
     /** Callback function to determine whether the prev button should be disabled */
@@ -18,8 +18,8 @@ export interface CalendarProps<T extends SelectionMode = 'single'> extends Calen
     /** Detects the presence of spaces between cells. @default `true` */
     withCellSpacing?: boolean;
 }
-declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(CalendarProps<T> & {
+declare const __VLS_export: <T extends SelectionMode = "single">(__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<(CalendarProps<T> & {
         date?: DateInput;
         level?: CalendarLevel;
         value?: DateSelection<T>;
@@ -31,24 +31,36 @@ declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: No
         "onUpdate:date"?: ((value: DateInput) => any) | undefined;
         "onUpdate:level"?: ((value: CalendarLevel) => any) | undefined;
         "onUpdate:value"?: ((value: DateSelection<T> | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         level?: (props: {
-            config: any;
+            config: Omit<import("@formkit/tempo").FormatOptions, "date" | "format"> & {
+                firstDayOfWeek: number;
+            } & {
+                firstDayOfWeek: number;
+                locale?: string;
+                genitive?: boolean;
+                tz?: string;
+                partFilter?: (part: import("@formkit/tempo").Part) => boolean;
+            };
         }) => any;
     } & {
         weekday?: (props: {}) => any;
     } & {
         day?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: DateSelection<T>) => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void)) & (((evt: "update:date", value: DateInput) => void) & ((evt: "update:level", value: CalendarLevel) => void) & ((evt: "update:value", value: DateSelection<T> | undefined) => void));
+    emit: (((evt: "select", args_0: DateSelection<T>) => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void)) & (((event: "update:date", value: DateInput) => void) & ((event: "update:level", value: CalendarLevel) => void) & ((event: "update:value", value: DateSelection<T> | undefined) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/calendar/lib/context.d.ts

@@ -6,7 +6,7 @@ interface State {
     date: ModelRef<DateInput>;
     hideOutsideDates: Ref<boolean>;
     weekdays: Ref<string[]>;
-    config: Ref<DateConfig>;
+    config: DateConfig;
     weekdayFormat?: FormatToken;
     fixedWeeks?: boolean;
     minDate?: DateInput;

package/dist/runtime/components/calendar/lib/use-calendar-selection.js

@@ -25,10 +25,11 @@ export function useCalendarSelection({
       }
       case "range": {
         const [start, end] = value.value;
-        if (!start && !end)
-          return false;
-        if (start || end)
-          return sameDay(date, start) || sameDay(date, end);
+        if (start || end) {
+          const isStart = !!start && sameDay(date, start);
+          const isEnd = !!end && sameDay(date, end);
+          return isStart || isEnd;
+        }
         return false;
       }
       case "week": {

package/dist/runtime/components/calendar/model.d.ts

@@ -1,9 +1,10 @@
-import type { DateInput, FormatOptions } from '@formkit/tempo';
+import type { FormatOptions } from '@formkit/tempo';
 /**
  *  `@formkit/tempo` config
  */
 export type CalendarSettings = Omit<FormatOptions, 'date'>;
 export type CalendarLevel = 'month' | 'year' | 'decade';
 export type SelectionMode = 'single' | 'range' | 'week' | 'multiple';
-export type Selection = DateInput | null;
+/** ISO string value */
+export type Selection = string | null;
 export type DateSelection<T extends SelectionMode = 'single'> = T extends 'single' ? Selection : T extends 'range' ? [Selection, Selection] : T extends 'week' ? [Selection, Selection] : T extends 'multiple' ? Selection[] : never;

package/dist/runtime/components/calendar/ui/core/calendar-cell.d.vue.ts

@@ -3,9 +3,9 @@ import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
     size?: NuanceSize | string;
 }
-declare var __VLS_6: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CalendarCellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalendarCellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/calendar/ui/core/calendar-cell.vue

@@ -27,18 +27,22 @@ const style = computed(() => ({
 	--day-size-xl: rem(54px);
 	--day-size: var(--day-size-sm);
 
-	width: var(--day-size, var(--day-size-sm));
-	height: var(--day-size, var(--day-size-sm));
-	font-size: calc(var(--day-size) / 2.8);
+	cursor: pointer;
+	user-select: none;
+
 	display: inline-flex;
-	justify-content: center;
 	align-items: center;
-	user-select: none;
-	cursor: pointer;
-	background-color: transparent;
+	justify-content: center;
+
+	width: var(--day-size, var(--day-size-sm));
+	height: var(--day-size, var(--day-size-sm));
 	border-radius: var(--radius-default);
+
+	font-size: calc(var(--day-size) / 2.8);
 	color: var(--color-text);
 
+	background-color: transparent;
+
 	&:hover {
 		&:where(:not([data-static], &:disabled, [data-selected], [data-in-range])) {
 			@mixin light {
@@ -52,8 +56,8 @@ const style = computed(() => ({
 	}
 
 	&:where([data-static]) {
-		user-select: auto;
 		cursor: default;
+		user-select: auto;
 	}
 
 	&:where([data-weekend]) {
@@ -61,6 +65,7 @@ const style = computed(() => ({
 	}
 
 	&:where([data-outside]) {
+		/* stylelint-disable-next-line function-no-unknown */
 		color: alpha(var(--color-dimmed), .5);
 	}
 
@@ -79,9 +84,10 @@ const style = computed(() => ({
 	}
 
 	&:where([data-in-range]) {
-		background-color: var(--color-primary-light-hover);
 		border-radius: 0;
 
+		background-color: var(--color-primary-light-hover);
+
 		&:hover {
 			&:where(:not(:disabled, [data-static])) {
 				background-color: var(--color-primary-light);
@@ -97,8 +103,8 @@ const style = computed(() => ({
 
 	&:where([data-last-in-range]) {
 		border-radius: 0;
-		border-end-end-radius: var(--radius-default);
 		border-start-end-radius: var(--radius-default);
+		border-end-end-radius: var(--radius-default);
 	}
 
 	&:where([data-last-in-range][data-first-in-range]) {
@@ -106,9 +112,10 @@ const style = computed(() => ({
 	}
 
 	&:where([data-selected]) {
-		background-color: var(--color-primary-filled);
 		color: var(--color-white);
 
+		background-color: var(--color-primary-filled);
+
 		&:hover {
 			&:where(:not(:disabled, [data-static])) {
 				background-color: var(--color-primary-filled-hover);
@@ -117,9 +124,11 @@ const style = computed(() => ({
 	}
 
 	&:where(:disabled) {
-		color: alpha(var(--color-disabled), .5);
-		cursor: not-allowed;
 		pointer-events: none;
+		cursor: not-allowed;
+
+		/* stylelint-disable-next-line function-no-unknown */
+		color: alpha(var(--color-disabled), .5);
 	}
 }
 </style>

package/dist/runtime/components/calendar/ui/core/calendar-cell.vue.d.ts

@@ -3,9 +3,9 @@ import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
     size?: NuanceSize | string;
 }
-declare var __VLS_6: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CalendarCellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalendarCellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/calendar/ui/core/calendar-header.d.vue.ts

@@ -14,9 +14,9 @@ export interface CalendarHeaderEmits {
     level: [];
     next: [];
 }
-declare var __VLS_25: {};
+declare var __VLS_29: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_25) => any;
+    default?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CalendarHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     next: () => any;

package/dist/runtime/components/calendar/ui/core/calendar-header.vue

@@ -59,28 +59,31 @@ defineEmits(["prev", "level", "next"]);
 
 <style lang="postcss" module>
 .header {
-  --dch-control-size-xs: rem(30px);
-  --dch-control-size-sm: rem(36px);
-  --dch-control-size-md: rem(42px);
-  --dch-control-size-lg: rem(48px);
-  --dch-control-size-xl: rem(54px);
-  --dch-control-size: var(--dch-control-size-sm);
+	--dch-control-size-xs: rem(30px);
+	--dch-control-size-sm: rem(36px);
+	--dch-control-size-md: rem(42px);
+	--dch-control-size-lg: rem(48px);
+	--dch-control-size-xl: rem(54px);
+	--dch-control-size: var(--dch-control-size-sm);
 
-  --dch-control-radius: var(--radius-default);
+	--dch-control-radius: var(--radius-default);
 
 	display: flex;
 }
 
 .level,
 .control {
-	height: var(--dch-control-size);
-	border-radius: var(--dch-control-radius);
+	cursor: pointer;
+	user-select: none;
+
 	display: flex;
-	justify-content: center;
 	align-items: center;
-	user-select: none;
+	justify-content: center;
+
+	height: var(--dch-control-size);
+	border-radius: var(--dch-control-radius);
+
 	opacity: 1;
-	cursor: pointer;
 
 	&:where([data-static]) {
 		cursor: default;
@@ -99,16 +102,18 @@ defineEmits(["prev", "level", "next"]);
 	}
 
 	&:where(:disabled) {
-		opacity: 0.2;
 		cursor: not-allowed;
+
+		opacity: 0.2;
 	}
 }
 
 .level {
-  flex: 1;
-  font-size: var(--dch-fz, var(--font-size-sm));
-  font-weight: 500;
-  text-transform: capitalize;
+	flex: 1;
+
+	font-size: var(--dch-fz, var(--font-size-sm));
+	font-weight: 500;
+	text-transform: capitalize;
 }
 
 .control {

package/dist/runtime/components/calendar/ui/core/calendar-header.vue.d.ts

@@ -14,9 +14,9 @@ export interface CalendarHeaderEmits {
     level: [];
     next: [];
 }
-declare var __VLS_25: {};
+declare var __VLS_29: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_25) => any;
+    default?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CalendarHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     next: () => any;

package/dist/runtime/components/calendar/ui/core/calendar-root.d.vue.ts

@@ -19,8 +19,6 @@ export interface CalendarRootProps<T extends SelectionMode> {
     excludeDate?: DateMatcher;
     /** Determines whether today should be highlighted with a border @default `false` */
     highlightToday?: boolean;
-    /** Determines whether weekdays row should be hidden @default `false` */
-    hideWeekdays?: boolean;
     /** Determines whether outside dates should be hidden @default `false` */
     hideOutsideDates?: boolean;
     /** Whether the calendar is disabled */
@@ -30,28 +28,40 @@ export interface CalendarRootProps<T extends SelectionMode> {
     /** `@formkit/tempo` locale config */
     config?: DateConfig;
 }
-declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(CalendarRootProps<T> & {
+declare const __VLS_export: <T extends SelectionMode = "single">(__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<(CalendarRootProps<T> & {
         date: DateInput;
         select?: DateSelection<T>;
     }) & {
         onSelect?: ((args_0: DateSelection<T>) => any) | undefined;
         "onUpdate:date"?: ((value: DateInput) => any) | undefined;
         "onUpdate:select"?: ((value: DateSelection<T>) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         default?: (props: {
-            config: any;
+            config: Omit<import("@formkit/tempo").FormatOptions, "date" | "format"> & {
+                firstDayOfWeek: number;
+            } & {
+                firstDayOfWeek: number;
+                locale?: string;
+                genitive?: boolean;
+                tz?: string;
+                partFilter?: (part: import("@formkit/tempo").Part) => boolean;
+            };
         }) => any;
     };
-    emit: ((evt: "select", args_0: DateSelection<T>) => void) & (((evt: "update:date", value: DateInput) => void) & ((evt: "update:select", value: DateSelection<T>) => void));
+    emit: ((evt: "select", args_0: DateSelection<T>) => void) & (((event: "update:date", value: DateInput) => void) & ((event: "update:select", value: DateSelection<T>) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/calendar/ui/core/calendar-root.vue

@@ -14,7 +14,6 @@ const props = defineProps({
   maxDate: { type: [Date, String], required: false },
   excludeDate: { type: Function, required: false },
   highlightToday: { type: Boolean, required: false, default: true },
-  hideWeekdays: { type: Boolean, required: false, default: false },
   hideOutsideDates: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },
   readonly: { type: Boolean, required: false, default: false },
@@ -22,14 +21,14 @@ const props = defineProps({
 });
 const emit = defineEmits(["select"]);
 const date = defineModel("date", { type: [Date, String], ...{ required: true } });
-const config = computed(() => props.config ?? useDatesConfig());
+const config = useDatesConfig(props.config);
 const hideOutsideDates = computed(() => props.numberOfMonths && props.numberOfMonths > 1 || props.hideOutsideDates);
 const weekdays = computed(() => {
-  const days = range(props.weekdayFormat, config.value?.locale, config.value?.genitive);
-  if (config.value.firstDayOfWeek === 1) {
+  const days = range(props.weekdayFormat, config?.locale, config?.genitive);
+  if (config.firstDayOfWeek === 1) {
     return [
-      ...days.slice(config.value.firstDayOfWeek),
-      ...days.slice(0, config.value.firstDayOfWeek)
+      ...days.slice(config.firstDayOfWeek),
+      ...days.slice(0, config.firstDayOfWeek)
     ];
   }
   return days;
@@ -67,7 +66,7 @@ useProvideCalendarState({
 useCalendarSelection({
   value: select,
   mode: props.mode,
-  config: config.value,
+  config,
   readonly: props.readonly,
   onSelect: (data) => emit("select", data)
 });