nuance-ui 0.2.7 → 0.2.9

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

@@ -1,26 +1,53 @@
 import type { NuanceColor, NuanceRadius } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface TabsRootProps extends BoxProps {
+    /** Value of the tab activated by default (uncontrolled) */
     defaultTab?: string;
-    /** Tabs orientation, `'horizontal'` by default */
+    /**
+     * Tabs orientation
+     * @default `'horizontal'`
+     */
     orientation?: 'vertical' | 'horizontal';
-    /** `TabsList` placement relative to `TabsPanel`, applicable only when `orientation="vertical"`, `'left'` by default */
+    /**
+     * `TabsList` placement relative to `TabsPanel`, applicable only when `orientation="vertical"`
+     * @default `'left'`
+     */
     placement?: 'left' | 'right';
+    /**
+     * Visual variant
+     * @default `'default'`
+     */
     variant?: 'default' | 'pills' | 'outline';
-    /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+    /**
+     * Whether arrow key presses loop through items
+     * @default `true`
+     */
     loop?: boolean;
-    /** Determines whether tab should be activated with arrow key press, `true` by default */
+    /**
+     * Whether a tab is activated on arrow key press
+     * @default `true`
+     */
     activateTabWithKeyboard?: boolean;
-    /** Determines whether tab can be deactivated, `false` by default */
+    /**
+     * Whether a tab can be deactivated
+     * @default `false`
+     */
     allowTabDeactivation?: boolean;
-    /** Changes colors of `TabsTab` components when variant is `pills` or `default`, does nothing for other variants */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    /** Border radius */
     radius?: NuanceRadius;
-    /** Determines whether tabs should have inverted styles, `false` by default */
+    /**
+     * Inverts tab styles
+     * @default `false`
+     */
     inverted?: boolean;
-    /** If set to `false`, `TabsPanel` content will be unmounted when the associated tab is not active, `true` by default */
+    /**
+     * If `false`, panel content is unmounted when inactive
+     * @default `true`
+     */
     keepMounted?: boolean;
+    /** Root element id */
     id?: string;
 }
 type __VLS_Props = TabsRootProps;

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

@@ -58,17 +58,17 @@ useProvideTabsContext({
 </script>
 
 <template>
-	<Box
-		:is
-		:style
+	<Box
+		:is
+		:style
 		:mod='[mod, {
   orientation,
   inverted: orientation === "horizontal" && inverted,
   placement: orientation === "vertical" && placement,
   variant
-}]'
-		:class='css.root'
-	>
-		<slot />
-	</Box>
+}]'
+		:class='css.root'
+	>
+		<slot />
+	</Box>
 </template>

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

@@ -1,26 +1,53 @@
 import type { NuanceColor, NuanceRadius } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface TabsRootProps extends BoxProps {
+    /** Value of the tab activated by default (uncontrolled) */
     defaultTab?: string;
-    /** Tabs orientation, `'horizontal'` by default */
+    /**
+     * Tabs orientation
+     * @default `'horizontal'`
+     */
     orientation?: 'vertical' | 'horizontal';
-    /** `TabsList` placement relative to `TabsPanel`, applicable only when `orientation="vertical"`, `'left'` by default */
+    /**
+     * `TabsList` placement relative to `TabsPanel`, applicable only when `orientation="vertical"`
+     * @default `'left'`
+     */
     placement?: 'left' | 'right';
+    /**
+     * Visual variant
+     * @default `'default'`
+     */
     variant?: 'default' | 'pills' | 'outline';
-    /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+    /**
+     * Whether arrow key presses loop through items
+     * @default `true`
+     */
     loop?: boolean;
-    /** Determines whether tab should be activated with arrow key press, `true` by default */
+    /**
+     * Whether a tab is activated on arrow key press
+     * @default `true`
+     */
     activateTabWithKeyboard?: boolean;
-    /** Determines whether tab can be deactivated, `false` by default */
+    /**
+     * Whether a tab can be deactivated
+     * @default `false`
+     */
     allowTabDeactivation?: boolean;
-    /** Changes colors of `TabsTab` components when variant is `pills` or `default`, does nothing for other variants */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    /** Border radius */
     radius?: NuanceRadius;
-    /** Determines whether tabs should have inverted styles, `false` by default */
+    /**
+     * Inverts tab styles
+     * @default `false`
+     */
     inverted?: boolean;
-    /** If set to `false`, `TabsPanel` content will be unmounted when the associated tab is not active, `true` by default */
+    /**
+     * If `false`, panel content is unmounted when inactive
+     * @default `true`
+     */
     keepMounted?: boolean;
+    /** Root element id */
     id?: string;
 }
 type __VLS_Props = TabsRootProps;

package/dist/runtime/components/tabs/tabs-tab.d.vue.ts

@@ -1,15 +1,19 @@
 import type { Mod } from '@nui/utils';
 export interface TabsTabProps {
+    /** Tab value, must match the corresponding `TabsPanel` value */
     value: string;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[];
+    /** Icon displayed before the label */
+    icon?: string;
 }
-declare var __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+declare var __VLS_10: {}, __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_10) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_17) => any;
 } & {
-    rightSection?: (props: typeof __VLS_14) => any;
+    rightSection?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TabsTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/tabs/tabs-tab.vue

@@ -3,39 +3,42 @@ import { computed } from "vue";
 import UnstyledButton from "../button/unstyled-button.vue";
 import { useTabsState } from "./lib";
 import css from "./tabs.module.css";
-const { value, mod } = defineProps({
+const { value, mod, icon } = defineProps({
   value: { type: String, required: true },
-  mod: { type: [Object, Array], required: false }
+  mod: { type: [Object, Array], required: false },
+  icon: { type: String, required: false }
 });
 const ctx = useTabsState();
 const active = computed(() => value === ctx?.active.value);
 </script>
 
 <template>
-	<UnstyledButton
-		:id='ctx?.getTabId(value)'
+	<UnstyledButton
+		:id='ctx?.getTabId(value)'
 		:mod='[mod, {
   variant: ctx?.variant,
   active,
   orientation: ctx?.orientation,
   inverted: ctx?.inverted,
   placement: ctx?.orientation === "vertical" && ctx.placement
-}]'
-		:class='css.tab'
-		role='tab'
-		:aria-selected='active'
-		:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
-		:aria-controls='ctx?.getPanelId(value)'
-		@click='ctx?.onUpdate(value)'
-	>
-		<span v-if='$slots.leftSection' :class='css.tabSection' data-position='left'>
-			<slot name='leftSection' />
-		</span>
-		<span v-if='$slots.default' :class='css.tabLabel'>
-			<slot />
-		</span>
-		<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
-			<slot name='rightSection' />
-		</span>
-	</UnstyledButton>
+}]'
+		:class='css.tab'
+		role='tab'
+		:aria-selected='active'
+		:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
+		:aria-controls='ctx?.getPanelId(value)'
+		@click='ctx?.onUpdate(value)'
+	>
+		<span v-if='$slots.leftSection || icon' :class='css.tabSection' data-position='left'>
+			<slot name='leftSection'>
+				<Icon v-if='icon' :name='icon' />
+			</slot>
+		</span>
+		<span v-if='$slots.default' :class='css.tabLabel'>
+			<slot />
+		</span>
+		<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
+			<slot name='rightSection' />
+		</span>
+	</UnstyledButton>
 </template>

package/dist/runtime/components/tabs/tabs-tab.vue.d.ts

@@ -1,15 +1,19 @@
 import type { Mod } from '@nui/utils';
 export interface TabsTabProps {
+    /** Tab value, must match the corresponding `TabsPanel` value */
     value: string;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[];
+    /** Icon displayed before the label */
+    icon?: string;
 }
-declare var __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+declare var __VLS_10: {}, __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_10) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_17) => any;
 } & {
-    rightSection?: (props: typeof __VLS_14) => any;
+    rightSection?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TabsTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -14,12 +14,17 @@ export interface TextProps extends BoxProps {
     inline?: boolean;
     /** Determines whether font properties should be inherited from the parent, `false` by default */
     inherit?: boolean;
-    /** Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default */
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Visual variant */
     variant?: 'text' | 'gradient';
+    /** Font size token */
     fz?: NuanceSize | `h${TitleOrder}` | string;
+    /** Line height token */
     lh?: NuanceSize | string;
+    /** Font weight */
     fw?: CSSProperties['font-weight'];
+    /** Text color from theme */
     c?: NuanceColor | 'dimmed';
 }
 declare var __VLS_8: {};

package/dist/runtime/components/text.vue

@@ -51,74 +51,74 @@ const style = computed(() => useStyleResolver((theme) => ({
 </script>
 
 <template>
-	<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
-		<slot />
-	</Box>
+	<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--text-fz: var(--font-size-sm);
-	--text-lh: var(--line-height-sm);
-	--text-color: inherit;
-	--text-fw: normal;
-	--text-gradient: none;
-	--text-line-clamp: none;
-
-	margin: 0;
-	padding: 0;
-
-	font-size: var(--text-fz);
-	font-weight: var(--text-fw);
-	line-height: var(--text-lh);
-	color: var(--text-color);
-	text-decoration: none;
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-truncate]) {
-		overflow: hidden;
-
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&:where([data-truncate='start']) {
-		direction: rtl;
-
-		text-align: right;
-
-		@mixin where-rtl {
-			direction: ltr;
-
-			text-align: left;
-		}
-	}
-
-	&:where([data-variant='gradient']) {
-		background-image: var(--text-gradient);
-		-webkit-background-clip: text;
-		background-clip: text;
-		-webkit-text-fill-color: transparent;
-	}
-
-	&:where([data-line-clamp]) {
-		overflow: hidden;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: var(--text-line-clamp);
-
-		text-overflow: ellipsis;
-	}
-
-	&:where([data-inherit]) {
-		font-size: inherit;
-		font-weight: inherit;
-		line-height: inherit;
-		color: inherit;
-	}
-
-	&:where([data-inline]) {
-		line-height: 1;
-	}
-}
+.root {
+	--text-fz: var(--font-size-sm);
+	--text-lh: var(--line-height-sm);
+	--text-color: inherit;
+	--text-fw: normal;
+	--text-gradient: none;
+	--text-line-clamp: none;
+
+	margin: 0;
+	padding: 0;
+
+	font-size: var(--text-fz);
+	font-weight: var(--text-fw);
+	line-height: var(--text-lh);
+	color: var(--text-color);
+	text-decoration: none;
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-truncate]) {
+		overflow: hidden;
+
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:where([data-truncate='start']) {
+		direction: rtl;
+
+		text-align: right;
+
+		@mixin where-rtl {
+			direction: ltr;
+
+			text-align: left;
+		}
+	}
+
+	&:where([data-variant='gradient']) {
+		background-image: var(--text-gradient);
+		-webkit-background-clip: text;
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+	}
+
+	&:where([data-line-clamp]) {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: var(--text-line-clamp);
+
+		text-overflow: ellipsis;
+	}
+
+	&:where([data-inherit]) {
+		font-size: inherit;
+		font-weight: inherit;
+		line-height: inherit;
+		color: inherit;
+	}
+
+	&:where([data-inline]) {
+		line-height: 1;
+	}
+}
 </style>

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

@@ -14,12 +14,17 @@ export interface TextProps extends BoxProps {
     inline?: boolean;
     /** Determines whether font properties should be inherited from the parent, `false` by default */
     inherit?: boolean;
-    /** Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default */
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Visual variant */
     variant?: 'text' | 'gradient';
+    /** Font size token */
     fz?: NuanceSize | `h${TitleOrder}` | string;
+    /** Line height token */
     lh?: NuanceSize | string;
+    /** Font weight */
     fw?: CSSProperties['font-weight'];
+    /** Text color from theme */
     c?: NuanceColor | 'dimmed';
 }
 declare var __VLS_8: {};

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

@@ -1,22 +1,24 @@
 import type { InputBaseProps, InputWrapperProps } from './input/index.js';
 export interface TextareaProps extends InputWrapperProps, InputBaseProps {
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = TextareaProps;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_27: {}, __VLS_30: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_22) => any;
+    label?: (props: typeof __VLS_27) => any;
 } & {
-    error?: (props: typeof __VLS_25) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    description?: (props: typeof __VLS_28) => any;
+    description?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     $el: HTMLTextAreaElement | null | undefined;

package/dist/runtime/components/textarea.vue

@@ -3,7 +3,8 @@ import { unrefElement, useTextareaAutosize } from "@vueuse/core";
 import { useTemplateRef } from "vue";
 import InputBase from "./input/ui/input-base.vue";
 import InputWrapper from "./input/ui/input-wrapper.vue";
-const props = defineProps({
+const { icon, ...props } = defineProps({
+  icon: { type: String, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -32,40 +33,42 @@ defineExpose({
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
-		<InputBase>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<template #default='{ id, css }'>
-				<textarea
-					v-bind='{ ...$attrs, class: void 0 }'
-					:id
-					ref='input'
-					v-model='model'
-					:class='[css, $style.textarea]'
-					:required='props.required'
-					:disabled='props.required'
-					:readonly='props.readonly'
-				/>
-			</template>
-
-			<template v-if='!!$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</template>
-		</InputBase>
-
-		<template v-if='!!$slots.label' #label>
-			<slot name='label' />
-		</template>
-		<template v-if='!!$slots.error' #error>
-			<slot name='error' />
-		</template>
-		<template v-if='!!$slots.description' #description>
-			<slot name='description' />
-		</template>
-	</InputWrapper>
+	<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
+		<InputBase>
+			<template v-if='!!$slots.leftSection || icon' #leftSection>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</template>
+
+			<template #default='{ id, css }'>
+				<textarea
+					v-bind='{ ...$attrs, class: void 0 }'
+					:id
+					ref='input'
+					v-model='model'
+					:class='[css, $style.textarea]'
+					:required='props.required'
+					:disabled='props.required'
+					:readonly='props.readonly'
+				/>
+			</template>
+
+			<template v-if='!!$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</InputBase>
+
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+	</InputWrapper>
 </template>
 
 <style module>

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

@@ -1,22 +1,24 @@
 import type { InputBaseProps, InputWrapperProps } from './input/index.js';
 export interface TextareaProps extends InputWrapperProps, InputBaseProps {
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = TextareaProps;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_27: {}, __VLS_30: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_22) => any;
+    label?: (props: typeof __VLS_27) => any;
 } & {
-    error?: (props: typeof __VLS_25) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    description?: (props: typeof __VLS_28) => any;
+    description?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     $el: HTMLTextAreaElement | null | undefined;

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

@@ -1,6 +1,11 @@
 import type { TextProps } from './text.vue.js';
 export interface TitleProps extends Omit<TextProps, 'is'> {
+    /**
+     * Heading level
+     * @default `'2'`
+     */
     order?: '1' | '2' | '3' | '4' | '5' | '6';
+    /** CSS `text-wrap` value */
     textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
 }
 declare var __VLS_8: {};

package/dist/runtime/components/title.vue

@@ -26,21 +26,21 @@ const style = computed(() => ({ "--title-text-wrap": textWrap }));
 </script>
 
 <template>
-	<Text
-		:is='`h${order}`'
-		v-bind='rest'
-		:size='size || `h${order}`'
-		:class='$style.root'
-		:style
-	>
-		<slot />
-	</Text>
+	<Text
+		:is='`h${order}`'
+		v-bind='rest'
+		:size='size || `h${order}`'
+		:class='$style.root'
+		:style
+	>
+		<slot />
+	</Text>
 </template>
 
 <style module lang="postcss">
-.root {
-	--title-text-wrap: pretty;
-
-	text-wrap: var(--title-text-wrap);
-}
+.root {
+	--title-text-wrap: pretty;
+
+	text-wrap: var(--title-text-wrap);
+}
 </style>

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

@@ -1,6 +1,11 @@
 import type { TextProps } from './text.vue.js';
 export interface TitleProps extends Omit<TextProps, 'is'> {
+    /**
+     * Heading level
+     * @default `'2'`
+     */
     order?: '1' | '2' | '3' | '4' | '5' | '6';
+    /** CSS `text-wrap` value */
     textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
 }
 declare var __VLS_8: {};