nuance-ui 0.2.5 → 0.2.7

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

@@ -2,18 +2,22 @@ import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
-    /** Link description, displayed below the label */
+    /** Link description displayed below the label */
     description?: string;
-    /** Determines whether the link should have active styles @default `false` */
+    /** Active state */
     active?: boolean;
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Spacing between left/right section and content */
+    /** Spacing token */
     spacing?: NuanceSpacing;
-    /** If set, label and description do not wrap to the next line @default `false` */
+    /** Prevents label and description from wrapping */
     noWrap?: boolean;
-    /** If set, disabled styles will be added to the root element @default `false` */
+    /** Disables the component */
     disabled?: boolean;
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'light' | 'subtle';
 }
 declare var __VLS_16: {}, __VLS_24: {}, __VLS_32: {}, __VLS_34: {};

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -55,137 +55,137 @@ 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' :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>
 </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

@@ -2,18 +2,22 @@ import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
-    /** Link description, displayed below the label */
+    /** Link description displayed below the label */
     description?: string;
-    /** Determines whether the link should have active styles @default `false` */
+    /** Active state */
     active?: boolean;
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Spacing between left/right section and content */
+    /** Spacing token */
     spacing?: NuanceSpacing;
-    /** If set, label and description do not wrap to the next line @default `false` */
+    /** Prevents label and description from wrapping */
     noWrap?: boolean;
-    /** If set, disabled styles will be added to the root element @default `false` */
+    /** Disables the component */
     disabled?: boolean;
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'light' | 'subtle';
 }
 declare var __VLS_16: {}, __VLS_24: {}, __VLS_32: {}, __VLS_34: {};

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

@@ -2,6 +2,7 @@ import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface PaperProps extends BoxProps {
     shadow?: NuanceShadow;
+    /** Border radius @default 'theme.defaultRadius' */
     radius?: NuanceRadius;
     withBorder?: boolean;
 }

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

@@ -2,6 +2,7 @@ import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface PaperProps extends BoxProps {
     shadow?: NuanceShadow;
+    /** Border radius @default 'theme.defaultRadius' */
     radius?: NuanceRadius;
     withBorder?: boolean;
 }

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

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

package/dist/runtime/components/popover/lib/get-arrow-position.d.ts

@@ -1,5 +1,5 @@
 import type { AlignedPlacement, Side } from '@floating-ui/vue';
-import type { ArrowPosition } from '../types/index.js';
+import type { ArrowPosition } from '../types.js';
 export declare function getArrowPosition({ placement: _placement, arrowSize, arrowOffset, arrowRadius, arrowPosition, arrowX, arrowY, dir, }: {
     placement: Side | AlignedPlacement;
     arrowSize?: number;

package/dist/runtime/components/popover/lib/use-popover.d.ts

@@ -1,6 +1,6 @@
 import type { OffsetOptions, Placement, Strategy } from '@floating-ui/vue';
 import type { CSSProperties, ModelRef, Ref, ShallowRef } from 'vue';
-import type { ArrowPosition, PopoverWidth } from '../types/index.js';
+import type { ArrowPosition, PopoverWidth } from '../types.js';
 export interface PopoverOptions {
     offset: OffsetOptions;
     placement: Placement;

package/dist/runtime/components/popover/popover-dropdown.vue

@@ -17,76 +17,77 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<div
-		:id='id'
-		ref='dropdownRef'
-		popover
-		:style='{ ...floatingStyles, ...style }'
-		:class='$style.dropdown'
-		@toggle='onToggle'
-	>
-		<slot />
-		<span
-			v-if='withArrow'
-			ref='arrowRef'
-			:class='$style.arrow'
-			:style='arrowStyles'
-		/>
-	</div>
+	<div
+		:id='id'
+		ref='dropdownRef'
+		popover
+		:style='{ ...floatingStyles, ...style }'
+		:class='$style.dropdown'
+		@toggle='onToggle'
+	>
+		<slot />
+		<span
+			v-if='withArrow'
+			ref='arrowRef'
+			:class='$style.arrow'
+			:style='arrowStyles'
+		/>
+	</div>
 </template>
 
 <style module lang="postcss">
-.dropdown {
-	--popover-radius: var(--radius-default);
-	--popover-shadow: none;
-
-	overflow: visible;
-
-	padding: var(--spacing-xs) var(--spacing-sm);
-	border: 1px solid var(--popover-border-color);
-	border-radius: var(--popover-radius);
-
-	color: var(--color-text);
-
-	opacity: 0;
-	box-shadow: var(--popover-shadow);
-
-	transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
-
-	&:popover-open {
-		opacity: 1;
-
-		@starting-style {
-			opacity: 0;
-		}
-	}
-
-	@mixin where-light {
-		--popover-border-color: var(--color-gray-2);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		--popover-border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.arrow {
-	--arrow-size: 7px;
-	--arrow-radius: 0px;
-	--arrow-placement: calc(var(--arrow-size) / 2 * -1);
-
-	position: absolute;
-	transform: rotate(45deg);
-
-	width: var(--arrow-size);
-	height: var(--arrow-size);
-
-	border: 1px solid var(--popover-border-color);
-
-	background-color: inherit;
-}
+.dropdown {
+	--popover-radius: var(--radius-default);
+	--popover-shadow: none;
+
+	overflow: visible;
+
+	padding: var(--spacing-xs) var(--spacing-sm);
+	border: 1px solid var(--popover-border-color);
+	border-radius: var(--popover-radius);
+
+	color: var(--color-text);
+
+	opacity: 0;
+	box-shadow: var(--popover-shadow);
+
+	transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+
+
+	&:popover-open {
+		opacity: 1;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+
+	@mixin where-light {
+		--popover-border-color: var(--color-gray-2);
+
+		background-color: var(--color-white);
+	}
+
+	@mixin where-dark {
+		--popover-border-color: var(--color-dark-4);
+
+		background-color: var(--color-dark-6);
+	}
+}
+
+.arrow {
+	--arrow-size: 7px;
+	--arrow-radius: 0px;
+	--arrow-placement: calc(var(--arrow-size) / 2 * -1);
+
+	position: absolute;
+	transform: rotate(45deg);
+
+	width: var(--arrow-size);
+	height: var(--arrow-size);
+
+	border: 1px solid var(--popover-border-color);
+
+	background-color: inherit;
+}
 </style>

package/dist/runtime/components/popover/popover-target.vue

@@ -8,12 +8,12 @@ const { id, store: { targetRef, opened }, disabled } = usePopoverState();
 </script>
 
 <template>
-	<Renderless
-		ref='targetRef'
-		:disabled
-		:popovertarget='id'
-		@click.stop.prevent='!disable && !disabled && (opened = !opened)'
-	>
-		<slot />
-	</Renderless>
+	<Renderless
+		ref='targetRef'
+		:disabled
+		:popovertarget='id'
+		@click.stop.prevent='!disable && !disabled && (opened = !opened)'
+	>
+		<slot />
+	</Renderless>
 </template>

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

@@ -1,4 +1,4 @@
-import type { PopoverModel, PopoverProps } from './types/index.js';
+import type { PopoverModel, PopoverProps } from './types.js';
 type __VLS_Props = PopoverProps;
 type __VLS_ModelProps = {
     'open'?: PopoverModel['open'];

package/dist/runtime/components/popover/popover.vue

@@ -75,5 +75,5 @@ useProvidePopoverState({
 </script>
 
 <template>
-	<slot />
+	<slot />
 </template>

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

@@ -1,4 +1,4 @@
-import type { PopoverModel, PopoverProps } from './types/index.js';
+import type { PopoverModel, PopoverProps } from './types.js';
 type __VLS_Props = PopoverProps;
 type __VLS_ModelProps = {
     'open'?: PopoverModel['open'];

package/dist/runtime/components/popover/{types/index.d.ts → types.d.ts}

@@ -1,6 +1,6 @@
 import type { AlignedPlacement, OffsetOptions, Side, Strategy } from '@floating-ui/vue';
+import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { CSSProperties } from 'vue';
-import type { NuanceRadius, NuanceShadow } from '~/src/runtime/types/theme';
 export type ArrowPosition = 'center' | 'side';
 export type PopoverWidth = 'target' | CSSProperties['width'] | null;
 export interface PopoverProps {
@@ -22,21 +22,22 @@ export interface PopoverProps {
     arrowRadius?: number;
     /** Arrow position */
     arrowPosition?: ArrowPosition;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
+    /** Border radius @default `theme.defaultRadius` */
     radius?: NuanceRadius;
-    /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */
+    /** Shadow token */
     shadow?: NuanceShadow;
-    /** If set, popover dropdown will not be rendered */
+    /** Disables the component */
     disabled?: boolean;
     /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default `'absolute'` */
     floatingStrategy?: Strategy;
 }
 export interface PopoverModel {
+    /** Open state */
     open: boolean;
 }
 export interface PopoverEmits {
-    /** Event handler called when the popover open */
+    /** Fired when the popover opens */
     open: [];
-    /** Event handler called when the popover closed */
+    /** Fired when the popover closes */
     close: [];
 }

package/dist/runtime/components/progress/progress-label.vue

@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<Box v-bind='props' :class='css.label'>
-		<slot />
-	</Box>
+	<Box v-bind='props' :class='css.label'>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/progress/progress-root.d.vue.ts

@@ -1,13 +1,13 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceRadius, NuanceSize } from '@nui/types';
 export interface ProgressRootProps extends BoxProps {
-    /** Controls track height @default `'md'` */
+    /** Component size @default `'md'` */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    /** Border radius @default `theme.defaultRadius` */
     radius?: NuanceRadius;
-    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    /** Sections width transition duration in ms @default `100` */
     transitionDuration?: number;
-    /** Controls orientation @default `'horizontal'` */
+    /** Orientation @default `'horizontal'` */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -25,7 +25,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
-		<slot />
-	</Box>
+	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/progress/progress-root.vue.d.ts

@@ -1,13 +1,13 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceRadius, NuanceSize } from '@nui/types';
 export interface ProgressRootProps extends BoxProps {
-    /** Controls track height @default `'md'` */
+    /** Component size @default `'md'` */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    /** Border radius @default `theme.defaultRadius` */
     radius?: NuanceRadius;
-    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    /** Sections width transition duration in ms @default `100` */
     transitionDuration?: number;
-    /** Controls orientation @default `'horizontal'` */
+    /** Orientation @default `'horizontal'` */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};