nuance-ui 0.2.6 → 0.2.8

package/dist/runtime/components/app-shell/app-shell.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useProvideDatesConfig } from "@nui/composals";
+import { useProvideDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import Box from "../box.vue";
 import { useProvideAppShell } from "./context";

package/dist/runtime/components/app-shell/app-shell.vue.d.ts

@@ -1,10 +1,18 @@
-import type { DateConfig } from '@nui/composals';
+import type { DateConfig } from '@nui/composables';
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellProps extends BoxProps {
-    /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
+    /**
+     * Layout mode. `alt` stretches Navbar/Aside to the full viewport height,
+     * pushing Header/Footer between them.
+     * @default 'default'
+     */
     layout?: 'default' | 'alt';
+    /**
+     * Renders dividers between shell sections
+     * @default false
+     */
     withBorder?: boolean;
-    /** Provide app config for dates */
+    /** Locale configuration for date-aware features */
     dateConfig?: Partial<DateConfig>;
 }
 type __VLS_Props = AppShellProps;

package/dist/runtime/components/app-shell/context.d.ts

@@ -1,8 +1,13 @@
 import type { ModelRef } from 'vue';
+/** Open/closed state of each AppShell region. */
 interface AppShellState {
+    /** Whether the header is collapsed. */
     header: ModelRef<boolean>;
+    /** Whether the navbar is collapsed. */
     navbar: ModelRef<boolean>;
+    /** Whether the aside panel is collapsed. */
     aside: ModelRef<boolean>;
+    /** Whether the footer is collapsed. */
     footer: ModelRef<boolean>;
 }
 export declare const useProvideAppShell: (args_0: AppShellState) => AppShellState;

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

@@ -1,7 +1,7 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceSpacing } from '@nui/types';
 export interface AvatarGroupProps extends BoxProps {
-    /** Negative space between Avatar components @default `'sm'` */
+    /** Negative spacing applied between child avatars to overlap them */
     spacing?: NuanceSpacing | string;
 }
 declare var __VLS_8: {};

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

@@ -2,8 +2,8 @@
 import { getSpacing } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
-import { useProvideAvatarGroup } from "./_lib/context";
 import css from "./avatar.module.css";
+import { useProvideAvatarGroup } from "./lib/context";
 const { mod, is, spacing } = defineProps({
   spacing: { type: [String, Number], required: false },
   is: { type: null, required: false },
@@ -16,7 +16,7 @@ useProvideAvatarGroup();
 </script>
 
 <template>
-	<Box :is :style :mod :class='css.group'>
-		<slot />
-	</Box>
+	<Box :is :style :mod :class='css.group'>
+		<slot />
+	</Box>
 </template>

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

@@ -1,7 +1,7 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceSpacing } from '@nui/types';
 export interface AvatarGroupProps extends BoxProps {
-    /** Negative space between Avatar components @default `'sm'` */
+    /** Negative spacing applied between child avatars to overlap them */
     spacing?: NuanceSpacing | string;
 }
 declare var __VLS_8: {};

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

@@ -1,24 +1,28 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 export interface AvatarProps extends BoxProps {
-    /** Width and height of the avatar, numbers are converted to rem @default `'md'` */
+    /** Component size */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `'1000px'` */
+    /** Border radius */
     radius?: NuanceRadius;
-    /** Key of `theme.colors` or any valid CSS color @default `'gray'` */
+    /** Color from theme. Pass `'initials'` to derive the color from the user's name. */
     color?: NuanceColor | 'initials';
-    /** Gradient configuration for `variant="gradient"` @default `theme.defaultGradient` */
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */
+    /** Image URL. When the image fails to load or is `null`, a placeholder is shown instead. */
     src?: string | null;
-    /** Image `alt` attribute, also used as `title` attribute for placeholder */
+    /** Image `alt` attribute. Also used as `title` for the placeholder. */
     alt?: string;
-    /** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
+    /** Name of the user. Used to render initials and to generate a color when `color="initials"`. */
     name?: string;
-    /** A list of colors that is used for autogenerated initials. By default, all default colors can be used except gray and dark. */
+    /** Palette of colors picked from for autogenerated initials. Defaults to all theme colors except gray and dark. */
     allowedInitialsColors?: NuanceColor[];
-    /** Placeholder icon */
+    /**
+     * Icon rendered when no `src` and no `name` are provided
+     * @default 'gravity-ui:person'
+     */
     placeholder?: string;
+    /** Visual variant */
     variant?: 'filled' | 'light' | 'gradient' | 'outline' | 'default';
 }
 declare var __VLS_8: {};

package/dist/runtime/components/avatar/avatar.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
-import { useAvatarGroupState } from "./_lib/context";
-import { getInitials } from "./_lib/get-initials";
-import { getInitialsColor } from "./_lib/get-initials-color";
 import css from "./avatar.module.css";
+import { useAvatarGroupState } from "./lib/context";
+import { getInitials } from "./lib/get-initials";
+import { getInitialsColor } from "./lib/get-initials-color";
 const {
   alt,
   src,

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

@@ -1,24 +1,28 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 export interface AvatarProps extends BoxProps {
-    /** Width and height of the avatar, numbers are converted to rem @default `'md'` */
+    /** Component size */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `'1000px'` */
+    /** Border radius */
     radius?: NuanceRadius;
-    /** Key of `theme.colors` or any valid CSS color @default `'gray'` */
+    /** Color from theme. Pass `'initials'` to derive the color from the user's name. */
     color?: NuanceColor | 'initials';
-    /** Gradient configuration for `variant="gradient"` @default `theme.defaultGradient` */
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */
+    /** Image URL. When the image fails to load or is `null`, a placeholder is shown instead. */
     src?: string | null;
-    /** Image `alt` attribute, also used as `title` attribute for placeholder */
+    /** Image `alt` attribute. Also used as `title` for the placeholder. */
     alt?: string;
-    /** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
+    /** Name of the user. Used to render initials and to generate a color when `color="initials"`. */
     name?: string;
-    /** A list of colors that is used for autogenerated initials. By default, all default colors can be used except gray and dark. */
+    /** Palette of colors picked from for autogenerated initials. Defaults to all theme colors except gray and dark. */
     allowedInitialsColors?: NuanceColor[];
-    /** Placeholder icon */
+    /**
+     * Icon rendered when no `src` and no `name` are provided
+     * @default 'gravity-ui:person'
+     */
     placeholder?: string;
+    /** Visual variant */
     variant?: 'filled' | 'light' | 'gradient' | 'outline' | 'default';
 }
 declare var __VLS_8: {};

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

@@ -1 +1,2 @@
 export type * from './avatar.vue';
+export { useAvatarGroupState } from './lib/context.js';

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

@@ -0,0 +1 @@
+export { useAvatarGroupState } from "./lib/context.js";

package/dist/runtime/components/background-image.d.vue.ts

@@ -1,8 +1,9 @@
 import type { NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface BackgroundImageProps extends BoxProps {
+    /** Border radius */
     radius?: NuanceRadius | string;
-    /** Image url */
+    /** Image URL */
     src: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<BackgroundImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/background-image.vue

@@ -15,25 +15,25 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :style :class='$style.root' v-bind='rest' />
+	<Box :style :class='$style.root' v-bind='rest' />
 </template>
 
 <style module lang="postcss">
-.root {
-	--bi-radius: 0rem;
-
-	position: absolute;
-	inset: 0;
-
-	display: block;
-
-	width: 100%;
-	border: 0;
-	border-radius: var(--bi-radius, 0);
-
-	text-decoration: none;
-
-	background-position: center;
-	background-size: cover;
-}
+.root {
+	--bi-radius: 0rem;
+
+	position: absolute;
+	inset: 0;
+
+	display: block;
+
+	width: 100%;
+	border: 0;
+	border-radius: var(--bi-radius, 0);
+
+	text-decoration: none;
+
+	background-position: center;
+	background-size: cover;
+}
 </style>

package/dist/runtime/components/background-image.vue.d.ts

@@ -1,8 +1,9 @@
 import type { NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface BackgroundImageProps extends BoxProps {
+    /** Border radius */
     radius?: NuanceRadius | string;
-    /** Image url */
+    /** Image URL */
     src: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<BackgroundImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/badge.d.vue.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/badge.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
+import { createVariantColorResolver, getRadius, getSize, getThemeColor } from "@nui/utils";
 import { computed } from "vue";
-import { createVariantColorResolver, getRadius, getSize, getThemeColor } from "../utils";
 import Box from "./box.vue";
 const {
   variant = "filled",
@@ -43,9 +43,9 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		:style
-		:class='$style.root'
+	<Box
+		:style
+		:class='$style.root'
 		:mod='[
   {
     "block": fullWidth,
@@ -55,164 +55,163 @@ const style = computed(() => useStyleResolver((theme) => {
     "with-right-section": !!$slots.rightSection
   },
   mod
-]'
-	>
-		<span v-if='variant === "dot"' :class='$style.dot' />
-
-		<span v-else-if='$slots.leftSection || !!icon' :class='$style.section' data-position='left'>
-			<slot name='leftSection'>
-				<Icon v-if='!!icon' :name='icon' />
-			</slot>
-		</span>
-
-		<span :class='$style.label'>
-			<slot />
-		</span>
-
-		<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
-			<slot name='rightSection' />
-		</span>
-	</Box>
+]'
+	>
+		<span v-if='variant === "dot"' :class='$style.dot' />
+
+		<span v-else-if='$slots.leftSection || !!icon' :class='$style.section' data-position='left'>
+			<slot name='leftSection'>
+				<Icon v-if='!!icon' :name='icon' />
+			</slot>
+		</span>
+
+		<span :class='$style.label'>
+			<slot />
+		</span>
+
+		<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
+			<slot name='rightSection' />
+		</span>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--badge-height-xs: rem(16px);
-	--badge-height-sm: rem(18px);
-	--badge-height-md: rem(20px);
-	--badge-height-lg: rem(26px);
-	--badge-height-xl: rem(32px);
-
-	--badge-fz-xs: rem(8px);
-	--badge-fz-sm: rem(10px);
-	--badge-fz-md: rem(12px);
-	--badge-fz-lg: rem(14px);
-	--badge-fz-xl: rem(16px);
-
-	--badge-padding-x-xs: rem(6px);
-	--badge-padding-x-sm: rem(8px);
-	--badge-padding-x-md: rem(10px);
-	--badge-padding-x-lg: rem(12px);
-	--badge-padding-x-xl: rem(16px);
-
-	--badge-height: var(--badge-height-md);
-	--badge-fz: var(--badge-fz-md);
-	--badge-padding-x: var(--badge-padding-x-md);
-	--badge-radius: 100%;
-	--badge-lh: calc(var(--badge-height) - rem(2px));
-	--badge-color: var(--color-white);
-	--badge-bg: var(--color-primary-filled);
-	--badge-border-width: 1px;
-	--badge-bd: var(--badge-border-width) solid transparent;
-
-	cursor: default;
-
-	overflow: hidden;
-	display: inline-grid;
-	align-items: center;
-	justify-content: center;
-
-	width: fit-content;
-	height: var(--badge-height);
-	padding: 0 var(--badge-padding-x);
-	border: var(--badge-bd);
-	border-radius: var(--badge-radius);
-
-	font-size: var(--badge-fz);
-	font-weight: 700;
-	line-height: var(--badge-lh);
-	color: var(--badge-color);
-	text-decoration: none;
-	text-overflow: ellipsis;
-	text-transform: uppercase;
-	letter-spacing: 0.25px;
-
-	background: var(--badge-bg);
-
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-with-left-section], [data-variant='dot']) {
-		grid-template-columns: auto 1fr;
-
-		padding-left: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
-	}
-
-	&:where([data-with-right-section]) {
-		grid-template-columns: 1fr auto;
-
-		padding-right: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
-	}
-
-	&:where([data-with-left-section][data-with-right-section],
-		[data-variant='dot'][data-with-right-section]) {
-		grid-template-columns: auto 1fr auto;
-
-		padding: 0 calc(var(--spacing-xs) / 2);
-	}
-
-	&:where([data-block]) {
-		display: flex;
-
-		width: 100%;
-	}
-
-	&:where([data-circle]) {
-		display: flex;
-
-		width: var(--badge-height);
-		padding-inline: 2px;
-	}
-
-	&:where([data-variant='dot']) {
-		@mixin where-light {
-			--badge-color: var(--color-black);
-		}
-
-		@mixin where-dark {
-			--badge-color: var(--color-white);
-		}
-	}
-}
-
-.dot {
-	--badge-dot-size: calc(var(--badge-height) / 2);
-
-	display: block;
-
-	width: var(--badge-dot-size);
-	height: var(--badge-dot-size);
-	margin-inline-end: calc(var(--badge-dot-size) / 2);
-	border-radius: var(--badge-dot-size);
-
-	background-color: var(--badge-dot-color, var(--badge-color));
-}
-
-
-.label {
-	cursor: inherit;
-
-	overflow: hidden;
-
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.section {
-	--badge-section-margin: calc(var(--spacing-xs) / 2);
-
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
-
-	&:where([data-position='left']) {
-		margin-inline-end: var(--badge-section-margin);
-	}
-
-	&:where([data-position='right']) {
-		margin-inline-start: var(--badge-section-margin);
-	}
-}
+.root {
+	--badge-height-xs: rem(16px);
+	--badge-height-sm: rem(18px);
+	--badge-height-md: rem(20px);
+	--badge-height-lg: rem(26px);
+	--badge-height-xl: rem(32px);
+
+	--badge-fz-xs: rem(8px);
+	--badge-fz-sm: rem(10px);
+	--badge-fz-md: rem(12px);
+	--badge-fz-lg: rem(14px);
+	--badge-fz-xl: rem(16px);
+
+	--badge-padding-x-xs: rem(6px);
+	--badge-padding-x-sm: rem(8px);
+	--badge-padding-x-md: rem(10px);
+	--badge-padding-x-lg: rem(12px);
+	--badge-padding-x-xl: rem(16px);
+
+	--badge-height: var(--badge-height-md);
+	--badge-fz: var(--badge-fz-md);
+	--badge-padding-x: var(--badge-padding-x-md);
+	--badge-radius: 100%;
+	--badge-lh: calc(var(--badge-height) - rem(2px));
+	--badge-color: var(--color-white);
+	--badge-bg: var(--color-primary-filled);
+	--badge-border-width: 1px;
+	--badge-bd: var(--badge-border-width) solid transparent;
+
+	cursor: default;
+
+	overflow: hidden;
+	display: inline-grid;
+	align-items: center;
+	justify-content: center;
+
+	width: fit-content;
+	height: var(--badge-height);
+	padding: 0 var(--badge-padding-x);
+	border: var(--badge-bd);
+	border-radius: var(--badge-radius);
+
+	font-size: var(--badge-fz);
+	font-weight: 700;
+	line-height: var(--badge-lh);
+	color: var(--badge-color);
+	text-decoration: none;
+	text-overflow: ellipsis;
+	text-transform: uppercase;
+	letter-spacing: 0.25px;
+
+	background: var(--badge-bg);
+
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-with-left-section], [data-variant='dot']) {
+		grid-template-columns: auto 1fr;
+
+		padding-left: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
+	}
+
+	&:where([data-with-right-section]) {
+		grid-template-columns: 1fr auto;
+
+		padding-right: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
+	}
+
+	&:where([data-with-left-section][data-with-right-section],
+		[data-variant='dot'][data-with-right-section]) {
+		grid-template-columns: auto 1fr auto;
+
+		padding: 0 calc(var(--spacing-xs) / 2);
+	}
+
+	&:where([data-block]) {
+		display: flex;
+
+		width: 100%;
+	}
+
+	&:where([data-circle]) {
+		display: flex;
+
+		width: var(--badge-height);
+		padding-inline: 2px;
+	}
+
+	&:where([data-variant='dot']) {
+		@mixin where-light {
+			--badge-color: var(--color-black);
+		}
+
+		@mixin where-dark {
+			--badge-color: var(--color-white);
+		}
+	}
+}
+
+.dot {
+	--badge-dot-size: calc(var(--badge-height) / 2);
+
+	display: block;
+
+	width: var(--badge-dot-size);
+	height: var(--badge-dot-size);
+	margin-inline-end: calc(var(--badge-dot-size) / 2);
+	border-radius: var(--badge-dot-size);
+
+	background-color: var(--badge-dot-color, var(--badge-color));
+}
+
+.label {
+	cursor: inherit;
+
+	overflow: hidden;
+
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.section {
+	--badge-section-margin: calc(var(--spacing-xs) / 2);
+
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
+
+	&:where([data-position='left']) {
+		margin-inline-end: var(--badge-section-margin);
+	}
+
+	&:where([data-position='right']) {
+		margin-inline-start: var(--badge-section-margin);
+	}
+}
 </style>