nuance-ui 0.2.7 → 0.2.9

package/dist/runtime/components/input/ui/input-inline.vue.d.ts

@@ -3,17 +3,21 @@ import type { BoxProps } from '../../box.vue.js';
 export interface InlineInputProps extends BoxProps {
     /** Input id */
     id: string;
+    /** Label text */
     label?: string;
+    /** Helper text displayed below the label */
     description?: string;
+    /** Error message displayed below the label */
     error?: string;
-    /** Disabled input prop */
+    /** Disables the component */
     disabled?: boolean | undefined;
     /** Component size */
     size?: NuanceSize | string;
+    /** Position of the label relative to the input control */
     labelPosition?: 'left' | 'right';
-    /** Body html element */
+    /** HTML element used for the body wrapper */
     bodyElement?: keyof HTMLElementTagNameMap;
-    /** Label html element */
+    /** HTML element used for the label */
     labelElement?: keyof HTMLElementTagNameMap;
 }
 declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: {};

package/dist/runtime/components/input/ui/input-wrapper.d.vue.ts

@@ -1,9 +1,12 @@
 import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface InputWrapperProps extends WrapperContext {
+    /** Error message displayed below the input */
     error?: string;
+    /** Helper text displayed below the input */
     description?: string;
+    /** Label displayed above the input */
     label?: string;
-    /** Required input prop @default false */
+    /** Marks the field as required */
     required?: boolean;
 }
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};

package/dist/runtime/components/input/ui/input-wrapper.vue.d.ts

@@ -1,9 +1,12 @@
 import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface InputWrapperProps extends WrapperContext {
+    /** Error message displayed below the input */
     error?: string;
+    /** Helper text displayed below the input */
     description?: string;
+    /** Label displayed above the input */
     label?: string;
-    /** Required input prop @default false */
+    /** Marks the field as required */
     required?: boolean;
 }
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};

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

@@ -27,6 +27,7 @@ const props = defineProps({
   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 },
@@ -36,26 +37,26 @@ const { link, rest } = pickLinkProps(props);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
-		<Button
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
+		<Button
 			v-bind='{
   ...rest,
   is: rest?.is || "a",
   href,
   rel: "rel" in linkProps ? linkProps.rel : void 0,
   target: "target" in linkProps ? linkProps.target : void 0
-}'
-			@click='navigate'
-		>
-			<template v-if='$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<slot />
-
-			<template v-if='$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</template>
-		</Button>
-	</NuxtLink>
+}'
+			@click='navigate'
+		>
+			<template v-if='$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<slot />
+
+			<template v-if='$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</Button>
+	</NuxtLink>
 </template>

package/dist/runtime/components/link/link.vue

@@ -37,22 +37,22 @@ const { link, rest: { underline, ...rest } } = pickLinkProps(props);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
-		<Text
-			is='a'
-			:class='[$style.root, { [$style.underline]: underline }]'
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
+		<Text
+			is='a'
+			:class='[$style.root, { [$style.underline]: underline }]'
 			v-bind='{
   ...rest,
   ...$attrs,
   href,
   rel: "rel" in linkProps ? linkProps.rel : void 0,
   target: "target" in linkProps ? linkProps.target : void 0
-}'
-			@click='navigate'
-		>
-			<slot />
-		</Text>
-	</NuxtLink>
+}'
+			@click='navigate'
+		>
+			<slot />
+		</Text>
+	</NuxtLink>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/bars-loader.vue

@@ -1,9 +1,9 @@
 <template>
-	<span :class='$style.root'>
-		<span :class='$style.bar' />
-		<span :class='$style.bar' />
-		<span :class='$style.bar' />
-	</span>
+	<span :class='$style.root'>
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+	</span>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/dots-loader.vue

@@ -1,9 +1,9 @@
 <template>
-	<span :class='$style.root'>
-		<span :class='$style.dot' />
-		<span :class='$style.dot' />
-		<span :class='$style.dot' />
-	</span>
+	<span :class='$style.root'>
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+	</span>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/oval-loader.vue

@@ -1,5 +1,5 @@
 <template>
-	<span :class='$style.root' />
+	<span :class='$style.root' />
 </template>
 
 <style module>

package/dist/runtime/components/modal/modal-close-button.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogCloseButton v-bind='props'>
-		<slot />
-	</DialogCloseButton>
+	<DialogCloseButton v-bind='props'>
+		<slot />
+	</DialogCloseButton>
 </template>

package/dist/runtime/components/modal/modal-header.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogHeader v-bind='props'>
-		<slot />
-	</DialogHeader>
+	<DialogHeader v-bind='props'>
+		<slot />
+	</DialogHeader>
 </template>

package/dist/runtime/components/modal/modal-root.vue

@@ -31,17 +31,17 @@ const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 </script>
 
 <template>
-	<DialogRoot
-		v-model:open='opened'
-		:mod='[{ centered, "full-screen": fullScreen }, mod]'
-		:root-class='css.root'
-		:within-portal
-		:close-on-click-outside
-		:without-overlay
-		v-bind='rest'
-		@open='$emit("open")'
-		@close='$emit("close")'
-	>
-		<slot />
-	</DialogRoot>
+	<DialogRoot
+		v-model:open='opened'
+		:mod='[{ centered, "full-screen": fullScreen }, mod]'
+		:root-class='css.root'
+		:within-portal
+		:close-on-click-outside
+		:without-overlay
+		v-bind='rest'
+		@open='$emit("open")'
+		@close='$emit("close")'
+	>
+		<slot />
+	</DialogRoot>
 </template>

package/dist/runtime/components/modal/modal-title.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogTitle v-bind='props'>
-		<slot />
-	</DialogTitle>
+	<DialogTitle v-bind='props'>
+		<slot />
+	</DialogTitle>
 </template>

package/dist/runtime/components/nav-link/nav-icon-link.vue

@@ -40,19 +40,19 @@ const { link, rest } = pickLinkProps(etc);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
-		<ActionIcon
-			is='a'
-			v-bind='{ ...rest, ...$attrs }'
-			:href
-			:variant='isActive ? active : notActive'
-			:mod='[{ active: isActive }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
-			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
-			:target='"target" in linkProps ? linkProps?.target : void 0'
-			@click='navigate'
-		>
-			<slot />
-		</ActionIcon>
-	</NuxtLink>
+	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
+		<ActionIcon
+			is='a'
+			v-bind='{ ...rest, ...$attrs }'
+			:href
+			:variant='isActive ? active : notActive'
+			:mod='[{ active: isActive }, mod]'
+			:aria-current="isActive ? 'page' : void 0"
+			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
+			:target='"target" in linkProps ? linkProps?.target : void 0'
+			@click='navigate'
+		>
+			<slot />
+		</ActionIcon>
+	</NuxtLink>
 </template>

package/dist/runtime/components/nav-link/nav-link.d.vue.ts

@@ -19,16 +19,18 @@ export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'cu
      * @default `'filled'`
      */
     variant?: 'filled' | 'light' | 'subtle';
+    /** Icon displayed before the label */
+    icon?: string;
 }
-declare var __VLS_16: {}, __VLS_24: {}, __VLS_32: {}, __VLS_34: {};
+declare var __VLS_16: {}, __VLS_29: {}, __VLS_37: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_16) => any;
 } & {
-    default?: (props: typeof __VLS_24) => any;
+    default?: (props: typeof __VLS_29) => any;
 } & {
-    description?: (props: typeof __VLS_32) => any;
+    description?: (props: typeof __VLS_37) => any;
 } & {
-    rightSection?: (props: typeof __VLS_34) => any;
+    rightSection?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/nav-link/nav-link.vue

@@ -13,6 +13,7 @@ const props = defineProps({
   noWrap: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   variant: { type: String, required: false },
+  icon: { type: String, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
   to: { type: null, required: false },
@@ -40,7 +41,8 @@ const {
     color,
     noWrap,
     description,
-    spacing
+    spacing,
+    icon
   }
 } = pickLinkProps(props);
 const style = computed(() => useStyleResolver((theme) => {
@@ -55,137 +57,139 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
-		<UnstyledButton
-			is='a'
-			:href
-			:style
-			:class='$style.root'
-			:mod='[{ active: isActive, disabled }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
-			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
-			:target='"target" in linkProps ? linkProps?.target : void 0'
-			@click='navigate'
-		>
-			<span v-if='$slots.leftSection' :class='$style.section' data-position='left'>
-				<slot name='leftSection' />
-			</span>
-
-			<Box :class='$style.body' :mod='{ "no-wrap": noWrap }'>
-				<span :class='$style.label'>
-					<slot />
-				</span>
-				<Box :class='$style.description' :mod='{ active }'>
-					<slot name='description'>
-						{{ description }}
-					</slot>
-				</Box>
-			</Box>
-
-			<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
-				<slot name='rightSection' />
-			</span>
-		</UnstyledButton>
-	</NuxtLink>
+	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
+		<UnstyledButton
+			is='a'
+			:href
+			:style
+			:class='$style.root'
+			:mod='[{ active: isActive, disabled }, mod]'
+			:aria-current="isActive ? 'page' : void 0"
+			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
+			:target='"target" in linkProps ? linkProps?.target : void 0'
+			@click='navigate'
+		>
+			<span v-if='$slots.leftSection || icon' :class='$style.section' data-position='left'>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</span>
+
+			<Box :class='$style.body' :mod='{ "no-wrap": noWrap }'>
+				<span :class='$style.label'>
+					<slot />
+				</span>
+				<Box :class='$style.description' :mod='{ active }'>
+					<slot name='description'>
+						{{ description }}
+					</slot>
+				</Box>
+			</Box>
+
+			<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
+				<slot name='rightSection' />
+			</span>
+		</UnstyledButton>
+	</NuxtLink>
 </template>
 
 <style module lang="postcss">
-.root {
-	--nl-spacing-xs: .25rem;
-	--nl-spacing-sm: .5rem;
-	--nl-spacing-md: .75rem;
-	--nl-spacing-lg: 1rem;
-	--nl-spacing-xl: 1.25rem;
-
-	--nl-bg: var(--color-primary-light);
-	--nl-hover: var(--color-primary-light-hover);
-	--nl-color: var(--color-primary-light-color);
-	--nl-spacing: var(--nl-spacing-xs);
-
-	user-select: none;
-
-	display: flex;
-	gap: var(--nl-spacing);
-	align-items: center;
-
-	width: 100%;
-	padding: .25rem var(--spacing-sm);
-	border-radius: var(--radius-default);
-
-	&:where([data-disabled]) {
-		pointer-events: none;
-
-		opacity: 0.4;
-	}
-
-	&:hover {
-		@mixin where-light {
-			background-color: var(--color-gray-0);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-6);
-		}
-	}
-
-	&:where([data-active]) {
-		color: var(--nl-color);
-
-		background-color: var(--nl-bg);
-
-		.description {
-			--description-opacity: 0.9;
-			--description-color: var(--nl-color);
-		}
-
-		&:hover {
-			background-color: var(--nl-hover);
-		}
-	}
-}
-
-.section {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	transition: transform 150ms ease;
-
-	&>svg {
-		display: block;
-	}
-
-	&:where([data-rotate]) {
-		transform: rotate(90deg);
-	}
-}
-
-.label {
-	font-size: var(--font-size-sm);
-}
-
-.body {
-	overflow: hidden;
-	flex: 1;
-
-	text-overflow: ellipsis;
-
-	&:where([data-no-wrap]) {
-		white-space: nowrap;
-	}
-}
-
-.description {
-	overflow: hidden;
-
-	font-size: var(--font-size-xs);
-	color: var(--description-color, var(--color-dimmed));
-	text-overflow: ellipsis;
-
-	opacity: var(--description-opacity, 1);
-
-	:where([data-no-wrap]) & {
-		white-space: nowrap;
-	}
-}
+.root {
+	--nl-spacing-xs: .25rem;
+	--nl-spacing-sm: .5rem;
+	--nl-spacing-md: .75rem;
+	--nl-spacing-lg: 1rem;
+	--nl-spacing-xl: 1.25rem;
+
+	--nl-bg: var(--color-primary-light);
+	--nl-hover: var(--color-primary-light-hover);
+	--nl-color: var(--color-primary-light-color);
+	--nl-spacing: var(--nl-spacing-xs);
+
+	user-select: none;
+
+	display: flex;
+	gap: var(--nl-spacing);
+	align-items: center;
+
+	width: 100%;
+	padding: .25rem var(--spacing-sm);
+	border-radius: var(--radius-default);
+
+	&:where([data-disabled]) {
+		pointer-events: none;
+
+		opacity: 0.4;
+	}
+
+	&:hover {
+		@mixin where-light {
+			background-color: var(--color-gray-0);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-6);
+		}
+	}
+
+	&:where([data-active]) {
+		color: var(--nl-color);
+
+		background-color: var(--nl-bg);
+
+		.description {
+			--description-opacity: 0.9;
+			--description-color: var(--nl-color);
+		}
+
+		&:hover {
+			background-color: var(--nl-hover);
+		}
+	}
+}
+
+.section {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	transition: transform 150ms ease;
+
+	&>svg {
+		display: block;
+	}
+
+	&:where([data-rotate]) {
+		transform: rotate(90deg);
+	}
+}
+
+.label {
+	font-size: var(--font-size-sm);
+}
+
+.body {
+	overflow: hidden;
+	flex: 1;
+
+	text-overflow: ellipsis;
+
+	&:where([data-no-wrap]) {
+		white-space: nowrap;
+	}
+}
+
+.description {
+	overflow: hidden;
+
+	font-size: var(--font-size-xs);
+	color: var(--description-color, var(--color-dimmed));
+	text-overflow: ellipsis;
+
+	opacity: var(--description-opacity, 1);
+
+	:where([data-no-wrap]) & {
+		white-space: nowrap;
+	}
+}
 </style>

package/dist/runtime/components/nav-link/nav-link.vue.d.ts

@@ -19,16 +19,18 @@ export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'cu
      * @default `'filled'`
      */
     variant?: 'filled' | 'light' | 'subtle';
+    /** Icon displayed before the label */
+    icon?: string;
 }
-declare var __VLS_16: {}, __VLS_24: {}, __VLS_32: {}, __VLS_34: {};
+declare var __VLS_16: {}, __VLS_29: {}, __VLS_37: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_16) => any;
 } & {
-    default?: (props: typeof __VLS_24) => any;
+    default?: (props: typeof __VLS_29) => any;
 } & {
-    description?: (props: typeof __VLS_32) => any;
+    description?: (props: typeof __VLS_37) => any;
 } & {
-    rightSection?: (props: typeof __VLS_34) => any;
+    rightSection?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,9 +1,11 @@
 import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface PaperProps extends BoxProps {
+    /** Shadow token */
     shadow?: NuanceShadow;
-    /** Border radius @default 'theme.defaultRadius' */
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Adds a border */
     withBorder?: boolean;
 }
 declare var __VLS_8: {};

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

@@ -1,9 +1,11 @@
 import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface PaperProps extends BoxProps {
+    /** Shadow token */
     shadow?: NuanceShadow;
-    /** Border radius @default 'theme.defaultRadius' */
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Adds a border */
     withBorder?: boolean;
 }
 declare var __VLS_8: {};