nuance-ui 0.2.6 → 0.2.8

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

@@ -1,20 +1,33 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '../types/index.js';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface BadgeProps extends BoxProps {
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'light' | 'outline' | 'dot' | 'default' | 'gradient';
-    /** Controls `font-size`, `height` and horizontal `padding` @default `'md'` */
+    /**
+     * Component size
+     * @default `'md'`
+     */
     size?: NuanceSize | string;
-    /** If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed */
+    /** Makes the badge width equal to its height and removes horizontal padding */
     circle?: boolean;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `'xl'` */
+    /**
+     * Border radius
+     * @default `'sm'`
+     */
     radius?: NuanceRadius;
-    /** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor | string;
-    /** Gradient configuration used when `variant=\"gradient\"` @default `theme.defaultGradient` */
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Determines whether Badge should take 100% of its parent width @default `false` */
+    /**
+     * Stretches the badge to fill its parent width
+     * @default `false`
+     */
     fullWidth?: boolean;
-    /** Icon displayed before to the label */
+    /** Icon displayed before the label */
     icon?: string;
 }
 declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {};

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

@@ -1,8 +1,12 @@
 import type { Mod } from '@nui/utils';
 import type { Component } from 'vue';
 export interface BoxProps {
+    /**
+     * Rendered element or component
+     * @default `'div'`
+     */
     is?: keyof HTMLElementTagNameMap | Component;
-    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[] | Mod[][] | null;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/box.vue

@@ -16,7 +16,7 @@ const _mod = computed(() => {
 </script>
 
 <template>
-	<component :is v-bind='_mod'>
-		<slot />
-	</component>
+	<component :is v-bind='_mod'>
+		<slot />
+	</component>
 </template>

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

@@ -1,8 +1,12 @@
 import type { Mod } from '@nui/utils';
 import type { Component } from 'vue';
 export interface BoxProps {
+    /**
+     * Rendered element or component
+     * @default `'div'`
+     */
     is?: keyof HTMLElementTagNameMap | Component;
-    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[] | Mod[][] | null;
 }
 declare var __VLS_8: {};

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

@@ -4,21 +4,41 @@ import type { BoxProps } from './box.vue.js';
 import type { ButtonProps } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    /** Marks item as active */
     active?: boolean;
+    /** Item label */
     label: string;
+    /** Icon displayed before the label */
     icon?: string;
+    /** Additional class applied to the item */
     class?: string;
+    /** Named slot used to render the item */
     slot?: string;
 }
 export interface BreadcrumbsProps extends BoxProps {
-    /** Manual items array */
+    /** Items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
-    /** Separator icon between items @default `'gravity-ui:chevron-right'` */
+    /**
+     * Separator icon between items
+     * @default `'gravity-ui:chevron-right'`
+     */
     separator?: string;
-    /** Controls spacing between separator and breadcrumb @default `'xs'` */
+    /** Spacing token */
     spacing?: NuanceSpacing;
+    /**
+     * Visual variant
+     * @default `'subtle'`
+     */
     variant?: ButtonProps['variant'];
+    /**
+     * Color from theme
+     * @default `'primary'`
+     */
     color?: ButtonProps['color'];
+    /**
+     * Component size
+     * @default `'compact-sm'`
+     */
     size?: ButtonProps['size'];
 }
 declare var __VLS_9: string, __VLS_10: {

package/dist/runtime/components/breadcrumbs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useTheme } from "@nui/composals";
+import { useTheme } from "@nui/composables";
 import { getSpacing } from "@nui/utils";
 import { computed, unref } from "vue";
 import Box from "./box.vue";
@@ -89,9 +89,9 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 	display: flex;
 	gap: .25rem;
 	align-items: center;
-	text-transform: capitalize;
 
 	font-weight: 600;
+	text-transform: capitalize;
 }
 
 .icon {

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

@@ -4,21 +4,41 @@ import type { BoxProps } from './box.vue.js';
 import type { ButtonProps } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    /** Marks item as active */
     active?: boolean;
+    /** Item label */
     label: string;
+    /** Icon displayed before the label */
     icon?: string;
+    /** Additional class applied to the item */
     class?: string;
+    /** Named slot used to render the item */
     slot?: string;
 }
 export interface BreadcrumbsProps extends BoxProps {
-    /** Manual items array */
+    /** Items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
-    /** Separator icon between items @default `'gravity-ui:chevron-right'` */
+    /**
+     * Separator icon between items
+     * @default `'gravity-ui:chevron-right'`
+     */
     separator?: string;
-    /** Controls spacing between separator and breadcrumb @default `'xs'` */
+    /** Spacing token */
     spacing?: NuanceSpacing;
+    /**
+     * Visual variant
+     * @default `'subtle'`
+     */
     variant?: ButtonProps['variant'];
+    /**
+     * Color from theme
+     * @default `'primary'`
+     */
     color?: ButtonProps['color'];
+    /**
+     * Component size
+     * @default `'compact-sm'`
+     */
     size?: ButtonProps['size'];
 }
 declare var __VLS_9: string, __VLS_10: {

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

@@ -1,5 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonGroupProps extends BoxProps {
+    /**
+     * Layout direction of the group
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -9,7 +9,7 @@ const { is, mod, orientation = "horizontal" } = defineProps({
 </script>
 
 <template>
-	<Box :is :mod='[mod, { orientation }]' :class='css.group' role='group'>
-		<slot />
-	</Box>
+	<Box :is :mod='[mod, { orientation }]' :class='css.group' role='group'>
+		<slot />
+	</Box>
 </template>

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

@@ -1,5 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonGroupProps extends BoxProps {
+    /**
+     * Layout direction of the group
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -1,35 +1,50 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
+    /** Spacing token */
     spacing?: NuanceSize | string;
+    /**
+     * Visual variant
+     * @default `'default'`
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
     /** Styles API */
-    classes?: {
-        root?: string | string[];
-        inner?: string | string[];
-        label?: string | string[];
-        section?: string | string[];
-    };
-    /** section pointer-events */
+    classes?: Classes<'root' | 'inner' | 'label' | 'section'>;
+    /**
+     * `pointer-events` value for the left section
+     * @default `'none'`
+     */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
-    /** section pointer-events */
+    /** Icon displayed before the label */
+    icon?: string;
+    /**
+     * `pointer-events` value for the right section
+     * @default `'all'`
+     */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
 }
-declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
+declare var __VLS_19: {}, __VLS_26: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_21) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    rightSection?: (props: typeof __VLS_23) => any;
+    rightSection?: (props: typeof __VLS_28) => 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);--button-spacing:0;--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(--button-spacing);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)}
+.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-spacing:0;--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(--button-spacing);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{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getFontSize, getRadius, getSize, getSpacing } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -13,6 +13,7 @@ const {
   gradient,
   loading,
   classes,
+  icon,
   leftSectionPE = "none",
   leftSectionProps,
   rightSectionPE = "all",
@@ -31,6 +32,7 @@ const {
   classes: { type: Object, required: false },
   leftSectionPE: { type: null, required: false },
   leftSectionProps: { type: Object, required: false },
+  icon: { type: String, required: false },
   rightSectionPE: { type: null, required: false },
   rightSectionProps: { type: Object, required: false },
   is: { type: null, required: false },
@@ -69,9 +71,10 @@ const style = computed(() => useStyleResolver((theme) => {
 <template>
 	<Box
 		:is
+		type='button'
 		:mod='[
   {
-    "with-left-section": !!$slots?.leftSection,
+    "with-left-section": !!$slots?.leftSection || !!icon,
     "with-right-section": !!$slots?.rightSection
   },
   mod
@@ -86,13 +89,15 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		<span :class='[css.inner, classes?.inner]'>
 			<span
-				v-if='$slots.leftSection'
+				v-if='$slots.leftSection || icon'
 				:class='[css.section, classes?.section]'
 				data-position='left'
 				v-bind='leftSectionProps'
 				:style='style.leftSection'
 			>
-				<slot name='leftSection' />
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
 			</span>
 
 			<span :class='[css.label, classes?.label]'>

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

@@ -1,35 +1,50 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
+    /** Spacing token */
     spacing?: NuanceSize | string;
+    /**
+     * Visual variant
+     * @default `'default'`
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
     /** Styles API */
-    classes?: {
-        root?: string | string[];
-        inner?: string | string[];
-        label?: string | string[];
-        section?: string | string[];
-    };
-    /** section pointer-events */
+    classes?: Classes<'root' | 'inner' | 'label' | 'section'>;
+    /**
+     * `pointer-events` value for the left section
+     * @default `'none'`
+     */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
-    /** section pointer-events */
+    /** Icon displayed before the label */
+    icon?: string;
+    /**
+     * `pointer-events` value for the right section
+     * @default `'all'`
+     */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
 }
-declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
+declare var __VLS_19: {}, __VLS_26: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_21) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    rightSection?: (props: typeof __VLS_23) => any;
+    rightSection?: (props: typeof __VLS_28) => 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/calendar.d.vue.ts

@@ -1,9 +1,9 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
-import type { CalendarLevel, DateSelection, SelectionMode } from './model.js';
+import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;

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

@@ -1,9 +1,9 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
-import type { CalendarLevel, DateSelection, SelectionMode } from './model.js';
+import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;

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

@@ -1,4 +1,4 @@
 export type * from './calendar.vue';
-export * from './model.js';
+export * from './types.js';
 export type * from './ui/core';
 export type * from './ui/levels';

package/dist/runtime/components/calendar/index.js

@@ -1 +1 @@
-export * from "./model.js";
+export * from "./types.js";

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

@@ -1,6 +1,6 @@
 import type { DateInput, FormatToken } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
 import type { ModelRef, Ref } from 'vue';
 interface State {
     date: ModelRef<DateInput>;

package/dist/runtime/components/calendar/lib/context.js

@@ -1,4 +1,4 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createStrictInjection } from "@nui/composables";
 const injectionKey = Symbol("nui-calendar");
 const [Provide, Inject] = createStrictInjection((state) => state, {
   injectionKey,

package/dist/runtime/components/calendar/lib/use-calendar-navigation.d.ts

@@ -1,7 +1,7 @@
 import type { DateInput } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
+import type { DateConfig } from '@nui/composables';
 import type { ModelRef } from 'vue';
-import type { CalendarLevel } from '../model.js';
+import type { CalendarLevel } from '../types.js';
 export declare function useCalendarNavigation({ date, level, numberOfMonths, disabled, minDate, maxDate, prevDisabled, nextDisabled, minLevel, maxLevel, }: {
     date: ModelRef<DateInput>;
     level: ModelRef<CalendarLevel>;

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

@@ -1,5 +1,5 @@
 import { addMonth, addYear, date as fDate, format, isAfter, isBefore, sameYear } from "@formkit/tempo";
-import { isSameMonth } from "@nui/helpers/date";
+import { isSameMonth } from "@nui/utils";
 import { computed } from "vue";
 const LEVEL_ORDER = ["month", "year", "decade"];
 export function useCalendarNavigation({

package/dist/runtime/components/calendar/lib/use-calendar-selection.d.ts

@@ -1,8 +1,8 @@
 import type { DateInput } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
 import type { ModelRef } from 'vue';
-import type { DateSelection, SelectionMode } from '../model.js';
+import type { DateSelection, SelectionMode } from '../types.js';
 export interface UseCalendarSelectionProps<T extends SelectionMode = 'single'> {
     mode: T;
     value: ModelRef<DateSelection<T>>;

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

@@ -1,6 +1,6 @@
 import { sameDay, weekEnd, weekStart } from "@formkit/tempo";
-import { createStrictInjection } from "@nui/helpers";
-import { isSameWeek } from "@nui/helpers/date";
+import { createStrictInjection } from "@nui/composables";
+import { isSameWeek } from "@nui/utils";
 const injectionKey = Symbol("nui-calendar-select");
 const [Provide, Inject] = createStrictInjection((state) => state, {
   injectionKey,

package/dist/runtime/components/calendar/{model.d.ts → types.d.ts}

@@ -1,13 +1,14 @@
 import type { FormatOptions } from '@formkit/tempo';
 import type { CalendarHeaderEmits } from './ui/core/index.js';
-/**
- *  `@formkit/tempo` config
- */
+/** `@formkit/tempo` format options without the `date` field */
 export type CalendarSettings = Omit<FormatOptions, 'date'>;
+/** Calendar drill-down level */
 export type CalendarLevel = 'month' | 'year' | 'decade';
+/** Date selection mode */
 export type SelectionMode = 'single' | 'range' | 'week' | 'multiple';
 /** ISO string value */
 export type Selection = string | null;
+/** Selected value shape based on the selection mode */
 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;
 export interface CalendarEmits<T extends SelectionMode = 'single'> extends CalendarHeaderEmits {
     select: [date: DateSelection<T>];

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

@@ -1,6 +1,7 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | string;
 }
 declare var __VLS_8: {};