nuance-ui 0.2.7 → 0.2.9

package/dist/runtime/components/breadcrumbs.vue

@@ -33,85 +33,85 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 </script>
 
 <template>
-	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
-		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
-			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
-				<slot
-					:name='item.slot ?? "item"'
-					:item='item'
-					:ix='ix'
-					:active='item.active ?? ix === breadcrumbs.length - 1'
-				>
-					<Button
-						:size
-						:variant
-						:class='$style.item'
-						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
-						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
-						@click.stop.prevent='$emit("click", item)'
-					>
-						<template v-if='item?.icon' #leftSection>
-							<Icon :name='item.icon' :class='$style.icon' />
-						</template>
-						{{ item.label }}
-					</Button>
-				</slot>
-			</li>
-			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
-				<slot name='separator'>
-					<Icon :name='separator' />
-				</slot>
-			</li>
-		</template>
-	</Box>
+	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
+		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
+			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
+				<slot
+					:name='item.slot ?? "item"'
+					:item='item'
+					:ix='ix'
+					:active='item.active ?? ix === breadcrumbs.length - 1'
+				>
+					<Button
+						:size
+						:variant
+						:class='$style.item'
+						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
+						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
+						@click.stop.prevent='$emit("click", item)'
+					>
+						<template v-if='item?.icon' #leftSection>
+							<Icon :name='item.icon' :class='$style.icon' />
+						</template>
+						{{ item.label }}
+					</Button>
+				</slot>
+			</li>
+			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
+				<slot name='separator'>
+					<Icon :name='separator' />
+				</slot>
+			</li>
+		</template>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--bc-spacing: var(--spacing-xs);
-
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--bc-spacing);
-	align-items: center;
-}
-
-.breadcrumb {
-	line-height: 1;
-
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-
-}
-
-.item {
-	display: flex;
-	gap: .25rem;
-	align-items: center;
-
-	font-weight: 600;
-	text-transform: capitalize;
-}
-
-.icon {
-	width: 1.2em;
-	height: 1.2em;
-}
-
-.separator {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	line-height: 1;
-
-	@mixin where-light {
-		color: var(--color-gray-7);
-	}
-
-	@mixin where-dark {
-		color: var(--color-dark-2);
-	}
-}
+.root {
+	--bc-spacing: var(--spacing-xs);
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--bc-spacing);
+	align-items: center;
+}
+
+.breadcrumb {
+	line-height: 1;
+
+	color: var(--color-text);
+	white-space: nowrap;
+	-webkit-tap-highlight-color: transparent;
+
+}
+
+.item {
+	display: flex;
+	gap: .25rem;
+	align-items: center;
+
+	font-weight: 600;
+	text-transform: capitalize;
+}
+
+.icon {
+	width: 1.2em;
+	height: 1.2em;
+}
+
+.separator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	line-height: 1;
+
+	@mixin where-light {
+		color: var(--color-gray-7);
+	}
+
+	@mixin where-dark {
+		color: var(--color-dark-2);
+	}
+}
 </style>

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

@@ -28,6 +28,8 @@ export interface ButtonProps extends BoxProps {
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
     /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
+    /** Icon displayed before the label */
+    icon?: string;
     /**
      * `pointer-events` value for the right section
      * @default `'all'`
@@ -36,13 +38,13 @@ export interface ButtonProps extends BoxProps {
     /** 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.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 },
@@ -72,7 +74,7 @@ const style = computed(() => useStyleResolver((theme) => {
 		type='button'
 		:mod='[
   {
-    "with-left-section": !!$slots?.leftSection,
+    "with-left-section": !!$slots?.leftSection || !!icon,
     "with-right-section": !!$slots?.rightSection
   },
   mod
@@ -87,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

@@ -28,6 +28,8 @@ export interface ButtonProps extends BoxProps {
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
     /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
+    /** Icon displayed before the label */
+    icon?: string;
     /**
      * `pointer-events` value for the right section
      * @default `'all'`
@@ -36,13 +38,13 @@ export interface ButtonProps extends BoxProps {
     /** 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/unstyled-button.vue

@@ -9,30 +9,30 @@ const { is = "button", ...props } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
-		<slot />
-	</Box>
+	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-:where(.unstyled) {
-	touch-action: manipulation;
-	cursor: pointer;
-
-	padding: 0;
-	border: 0;
-
-	font-size: var(--font-size-md);
-	color: inherit;
-	text-align: left;
-	text-decoration: none;
-
-	appearance: none;
-	background-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-
-	@mixin where-rtl {
-		text-align: right;
-	}
-}
+:where(.unstyled) {
+	touch-action: manipulation;
+	cursor: pointer;
+
+	padding: 0;
+	border: 0;
+
+	font-size: var(--font-size-md);
+	color: inherit;
+	text-align: left;
+	text-decoration: none;
+
+	appearance: none;
+	background-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+
+	@mixin where-rtl {
+		text-align: right;
+	}
+}
 </style>

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

@@ -3,7 +3,7 @@ import type { NuanceSize } from '@nui/types';
 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

@@ -3,7 +3,7 @@ import type { NuanceSize } from '@nui/types';
 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/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-header.d.vue.ts

@@ -1,12 +1,18 @@
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarHeaderProps extends BoxProps {
+    /** Icon for the previous navigation button */
     prevIcon?: string;
+    /** Icon for the next navigation button */
     nextIcon?: string;
+    /** Whether the previous button is rendered */
     withPrev?: boolean;
+    /** Whether the next button is rendered */
     withNext?: boolean;
+    /** Returns true when the next button should be disabled */
     nextDisabled?: () => boolean;
+    /** Returns true when the previous button should be disabled */
     prevDisabled?: () => boolean;
-    /** Label disabled state  */
+    /** Disables the level label button */
     disabled?: boolean;
 }
 export interface CalendarHeaderEmits {

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

@@ -26,102 +26,102 @@ defineEmits(["prev", "level", "next"]);
 </script>
 
 <template>
-	<Box :is v-bind='props' :class='$style.header'>
-		<UnstyledButton
-			v-if='withPrev'
-			aria-label='Previous page'
-			:disabled='prevDisabled?.()'
-			:class='$style.control'
-			@click='$emit("prev")'
-		>
-			<Icon :name='prevIcon' :class='$style.icon' />
-		</UnstyledButton>
-
-		<UnstyledButton
-			:disabled
-			:class='$style.level'
-			@click='$emit("level")'
-		>
-			<slot />
-		</UnstyledButton>
-
-		<UnstyledButton
-			v-if='withNext'
-			aria-label='Next page'
-			:disabled='nextDisabled?.()'
-			:class='$style.control'
-			@click='$emit("next")'
-		>
-			<Icon :name='nextIcon' :class='$style.icon' />
-		</UnstyledButton>
-	</Box>
+	<Box :is v-bind='props' :class='$style.header'>
+		<UnstyledButton
+			v-if='withPrev'
+			aria-label='Previous page'
+			:disabled='prevDisabled?.()'
+			:class='$style.control'
+			@click='$emit("prev")'
+		>
+			<Icon :name='prevIcon' :class='$style.icon' />
+		</UnstyledButton>
+
+		<UnstyledButton
+			:disabled
+			:class='$style.level'
+			@click='$emit("level")'
+		>
+			<slot />
+		</UnstyledButton>
+
+		<UnstyledButton
+			v-if='withNext'
+			aria-label='Next page'
+			:disabled='nextDisabled?.()'
+			:class='$style.control'
+			@click='$emit("next")'
+		>
+			<Icon :name='nextIcon' :class='$style.icon' />
+		</UnstyledButton>
+	</Box>
 </template>
 
 <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-radius: var(--radius-default);
-
-	display: flex;
-}
-
-.level,
-.control {
-	cursor: pointer;
-	user-select: none;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	height: var(--dch-control-size);
-	border-radius: var(--dch-control-radius);
-
-	opacity: 1;
-
-	&:where([data-static]) {
-		cursor: default;
-	}
-
-	&:hover {
-		&:where(:not([data-static], :disabled)) {
-			@mixin light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-
-		opacity: 0.2;
-	}
-}
-
-.level {
-	flex: 1;
-
-	font-size: var(--dch-fz, var(--font-size-sm));
-	font-weight: 500;
-	text-transform: capitalize;
-}
-
-.control {
-	width: var(--dch-control-size);
-}
-
-.icon {
-	width: 60%;
-	height: 60%;
-}
+.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-radius: var(--radius-default);
+
+	display: flex;
+}
+
+.level,
+.control {
+	cursor: pointer;
+	user-select: none;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: var(--dch-control-size);
+	border-radius: var(--dch-control-radius);
+
+	opacity: 1;
+
+	&:where([data-static]) {
+		cursor: default;
+	}
+
+	&:hover {
+		&:where(:not([data-static], :disabled)) {
+			@mixin light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	&:where(:disabled) {
+		cursor: not-allowed;
+
+		opacity: 0.2;
+	}
+}
+
+.level {
+	flex: 1;
+
+	font-size: var(--dch-fz, var(--font-size-sm));
+	font-weight: 500;
+	text-transform: capitalize;
+}
+
+.control {
+	width: var(--dch-control-size);
+}
+
+.icon {
+	width: 60%;
+	height: 60%;
+}
 </style>

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

@@ -1,12 +1,18 @@
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarHeaderProps extends BoxProps {
+    /** Icon for the previous navigation button */
     prevIcon?: string;
+    /** Icon for the next navigation button */
     nextIcon?: string;
+    /** Whether the previous button is rendered */
     withPrev?: boolean;
+    /** Whether the next button is rendered */
     withNext?: boolean;
+    /** Returns true when the next button should be disabled */
     nextDisabled?: () => boolean;
+    /** Returns true when the previous button should be disabled */
     prevDisabled?: () => boolean;
-    /** Label disabled state  */
+    /** Disables the level label button */
     disabled?: boolean;
 }
 export interface CalendarHeaderEmits {

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

@@ -73,7 +73,7 @@ useCalendarSelection({
 </script>
 
 <template>
-	<Box>
-		<slot :config />
-	</Box>
+	<Box>
+		<slot :config />
+	</Box>
 </template>

package/dist/runtime/components/calendar/ui/levels/calendar-decade.d.vue.ts

@@ -2,9 +2,11 @@ import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
 import type { CalendarCellProps } from '../core/index.js';
 export interface CalendarDecadeProps extends CalendarCellProps {
+    /** Start date of the decade */
     date: DateInput;
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
+    /** Allows selecting a year as the final value without drilling down */
     selectable?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<CalendarDecadeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {