nuance-ui 0.2.7 → 0.2.9

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

@@ -53,53 +53,53 @@ function handleSelect(year) {
 </script>
 
 <template>
-	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
-		<tbody>
-			<tr v-for='(years, yearsIx) in yearList' :key='`decade-${yearsIx}`'>
-				<td v-for='year in years' :key='year'>
-					<CalendarCell
-						:class='$style.year'
+	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
+		<tbody>
+			<tr v-for='(years, yearsIx) in yearList' :key='`decade-${yearsIx}`'>
+				<td v-for='year in years' :key='year'>
+					<CalendarCell
+						:class='$style.year'
 						:mod='{
   "today": isToday(year),
   "selected": isSelected(year),
   "in-range": isInRange(year),
   "first-in-range": isFirstInRange(year),
   "last-in-range": isLastInRange(year)
-}'
-						:disabled='isDisabled(year)'
-						:size
-						@click='handleSelect(year)'
-					>
-						{{ year }}
-					</CalendarCell>
-				</td>
-			</tr>
-		</tbody>
-	</Box>
+}'
+						:disabled='isDisabled(year)'
+						:size
+						@click='handleSelect(year)'
+					>
+						{{ year }}
+					</CalendarCell>
+				</td>
+			</tr>
+		</tbody>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.table {
-	table-layout: fixed;
-}
-
-.year {
-	--day-size-xs: 1.875rem;
-	--day-size-sm: 2.25rem;
-	--day-size-md: 2.625rem;
-	--day-size-lg: 3rem;
-	--day-size-xl: 3.375rem;
-
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: calc((var(--day-size) * 7) / 3 + .09375rem);
-
-	height: var(--day-size);
-
-	text-transform: capitalize;
-}
+.table {
+	table-layout: fixed;
+}
+
+.year {
+	--day-size-xs: 1.875rem;
+	--day-size-sm: 2.25rem;
+	--day-size-md: 2.625rem;
+	--day-size-lg: 3rem;
+	--day-size-xl: 3.375rem;
+
+	cursor: pointer;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: calc((var(--day-size) * 7) / 3 + .09375rem);
+
+	height: var(--day-size);
+
+	text-transform: capitalize;
+}
 </style>

package/dist/runtime/components/calendar/ui/levels/calendar-decade.vue.d.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, {

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

@@ -1,10 +1,11 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
 export interface CalendarMonthProps {
+    /** ISO string of the month to render */
     month: string;
     /** Detects the presence of spaces between cells. @default `true` */
     withCellSpacing?: boolean;
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;

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

@@ -1,10 +1,11 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
 export interface CalendarMonthProps {
+    /** ISO string of the month to render */
     month: string;
     /** Detects the presence of spaces between cells. @default `true` */
     withCellSpacing?: boolean;
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;

package/dist/runtime/components/calendar/ui/levels/calendar-year.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 CalendarYearProps extends CalendarCellProps {
+    /** Year date used to generate the month grid */
     year: DateInput;
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
+    /** Allows selecting a month as the final value without drilling down */
     selectable?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<CalendarYearProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/calendar/ui/levels/calendar-year.vue

@@ -48,53 +48,53 @@ function handleSelect(month) {
 </script>
 
 <template>
-	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
-		<tbody>
-			<tr v-for='(months, seasonIx) in monthList' :key='`${year}-${seasonIx}`'>
-				<td v-for='month in months' :key='`${year}-${month.ix}`'>
-					<CalendarCell
-						:class='$style.year'
+	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
+		<tbody>
+			<tr v-for='(months, seasonIx) in monthList' :key='`${year}-${seasonIx}`'>
+				<td v-for='month in months' :key='`${year}-${month.ix}`'>
+					<CalendarCell
+						:class='$style.year'
 						:mod='{
   "today": isToday(month.ix),
   "selected": isSelected(month.ix),
   "in-range": isInRange(month.ix),
   "first-in-range": isFirstInRange(month.ix),
   "last-in-range": isLastInRange(month.ix)
-}'
-						:disabled='isDisabled(month.ix)'
-						:size
-						@click='handleSelect(month.ix)'
-					>
-						{{ month.label }}
-					</CalendarCell>
-				</td>
-			</tr>
-		</tbody>
-	</Box>
+}'
+						:disabled='isDisabled(month.ix)'
+						:size
+						@click='handleSelect(month.ix)'
+					>
+						{{ month.label }}
+					</CalendarCell>
+				</td>
+			</tr>
+		</tbody>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.table {
-	table-layout: fixed;
-}
-
-.year {
-	--day-size-xs: 1.875rem;
-	--day-size-sm: 2.25rem;
-	--day-size-md: 2.625rem;
-	--day-size-lg: 3rem;
-	--day-size-xl: 3.375rem;
-
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: calc((var(--day-size) * 7) / 3 + .09375rem);
-
-	height: var(--day-size);
-
-	text-transform: capitalize;
-}
+.table {
+	table-layout: fixed;
+}
+
+.year {
+	--day-size-xs: 1.875rem;
+	--day-size-sm: 2.25rem;
+	--day-size-md: 2.625rem;
+	--day-size-lg: 3rem;
+	--day-size-xl: 3.375rem;
+
+	cursor: pointer;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: calc((var(--day-size) * 7) / 3 + .09375rem);
+
+	height: var(--day-size);
+
+	text-transform: capitalize;
+}
 </style>

package/dist/runtime/components/calendar/ui/levels/calendar-year.vue.d.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 CalendarYearProps extends CalendarCellProps {
+    /** Year date used to generate the month grid */
     year: DateInput;
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
+    /** Allows selecting a month as the final value without drilling down */
     selectable?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<CalendarYearProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/card/card-section.d.vue.ts

@@ -1,7 +1,8 @@
 import type { BoxProps } from '../box.vue.js';
 export interface CardSectionProps extends BoxProps {
+    /** Shows a top border */
     withBorder?: boolean;
-    /** Determines whether the section should inherit padding from the parent `UiCard`, `false` by default */
+    /** Inherits horizontal padding from the parent card */
     inheritPadding?: boolean;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/card/card-section.vue

@@ -10,7 +10,7 @@ const { is = "section", mod, inheritPadding, withBorder } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='css.section' :mod='[mod, { "with-border": withBorder, "inherit-padding": inheritPadding }]'>
-		<slot />
-	</Box>
+	<Box :is :class='css.section' :mod='[mod, { "with-border": withBorder, "inherit-padding": inheritPadding }]'>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/card/card-section.vue.d.ts

@@ -1,7 +1,8 @@
 import type { BoxProps } from '../box.vue.js';
 export interface CardSectionProps extends BoxProps {
+    /** Shows a top border */
     withBorder?: boolean;
-    /** Determines whether the section should inherit padding from the parent `UiCard`, `false` by default */
+    /** Inherits horizontal padding from the parent card */
     inheritPadding?: boolean;
 }
 declare var __VLS_8: {};

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

@@ -1,6 +1,7 @@
 import type { NuanceSpacing } from '@nui/types';
 import type { PaperProps } from '../paper.vue.js';
 export interface CardProps extends PaperProps {
+    /** Padding token */
     padding?: NuanceSpacing;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/card/card.vue

@@ -17,7 +17,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Paper :is :style :class='css.root' v-bind='rest'>
-		<slot />
-	</Paper>
+	<Paper :is :style :class='css.root' v-bind='rest'>
+		<slot />
+	</Paper>
 </template>

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

@@ -1,6 +1,7 @@
 import type { NuanceSpacing } from '@nui/types';
 import type { PaperProps } from '../paper.vue.js';
 export interface CardProps extends PaperProps {
+    /** Padding token */
     padding?: NuanceSpacing;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/checkbox/checkbox-card.d.vue.ts

@@ -1,12 +1,15 @@
 import type { NuanceRadius } from '@nui/types';
 import type { Mod } from '@nui/utils';
 export interface CheckboxCardProps {
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[];
+    /** Shows a border around the card */
     withBorder?: boolean;
     /** Border radius */
     radius?: NuanceRadius;
-    /** Disabled input prop */
+    /** Disables the component */
     disabled?: boolean | undefined;
+    /** Value used in checkbox group context */
     value?: string;
 }
 type __VLS_Props = CheckboxCardProps;

package/dist/runtime/components/checkbox/checkbox-card.vue.d.ts

@@ -1,12 +1,15 @@
 import type { NuanceRadius } from '@nui/types';
 import type { Mod } from '@nui/utils';
 export interface CheckboxCardProps {
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[];
+    /** Shows a border around the card */
     withBorder?: boolean;
     /** Border radius */
     radius?: NuanceRadius;
-    /** Disabled input prop */
+    /** Disables the component */
     disabled?: boolean | undefined;
+    /** Value used in checkbox group context */
     value?: string;
 }
 type __VLS_Props = CheckboxCardProps;

package/dist/runtime/components/checkbox/checkbox-indicator.d.vue.ts

@@ -1,10 +1,16 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export interface CheckboxIndicatorProps {
+    /** Color from theme */
     color?: NuanceColor;
+    /** Icon color */
     iconColor?: NuanceColor;
+    /** Visual variant */
     variant?: 'filled' | 'outline';
+    /** Border radius */
     radius?: NuanceSize;
+    /** Component size */
     size?: NuanceSize;
+    /** Displays indeterminate icon */
     indeterminate?: boolean;
 }
 type __VLS_Props = CheckboxIndicatorProps;

package/dist/runtime/components/checkbox/checkbox-indicator.vue

@@ -39,124 +39,124 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :style :class='$style.indicator' :mod='{ checked }'>
-		<slot :indeterminate='indeterminate' :class='$style.icon' :mod='{ checked }'>
-			<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' :mod='{ checked }' />
-			<Icon v-else :class='$style.icon' name='gravity-ui:minus' :mod='{ checked }' />
-		</slot>
-	</Box>
+	<Box :style :class='$style.indicator' :mod='{ checked }'>
+		<slot :indeterminate='indeterminate' :class='$style.icon' :mod='{ checked }'>
+			<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' :mod='{ checked }' />
+			<Icon v-else :class='$style.icon' name='gravity-ui:minus' :mod='{ checked }' />
+		</slot>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.indicator {
-	--checkbox-size-xs: rem(16px);
-	--checkbox-size-sm: rem(20px);
-	--checkbox-size-md: rem(24px);
-	--checkbox-size-lg: rem(30px);
-	--checkbox-size-xl: rem(36px);
-
-	--checkbox-size: var(--checkbox-size-sm);
-	--checkbox-color: var(--color-primary-filled);
-	--checkbox-icon-color: var(--color-white);
-
-	--checkbox-radius: var(--radius-default);
-
-	position: relative;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: var(--checkbox-size);
-	min-width: var(--checkbox-size);
-	height: var(--checkbox-size);
-	min-height: var(--checkbox-size);
-
-	border: 1px solid transparent;
-	border-radius: var(--checkbox-radius);
-
-	transition: border-color 100ms ease,
-		background-color 100ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	&[data-indeterminate],
-	&[data-checked] {
-		border-color: var(--checkbox-color);
-
-		background-color: var(--checkbox-color);
-
-		&>.icon {
-			transform: none;
-
-			color: var(--checkbox-icon-color);
-
-			opacity: 1;
-		}
-	}
-
-	&[data-disabled] {
-		cursor: not-allowed;
-
-		border-color: var(--color-disabled-border);
-
-		background-color: var(--color-disabled);
-
-		&[data-checked]>.icon {
-			@mixin light {
-				color: var(--color-gray-5);
-			}
-
-			@mixin dark {
-				color: var(--color-dark-3);
-			}
-		}
-	}
-
-	@mixin where-light {
-		border-color: var(--color-gray-4);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.indicator[data-variant='outline'] {
-
-	&[data-indeterminate]:not([data-disabled]),
-	&[data-checked]:not([data-disabled]) {
-		border-color: var(--checkbox-color);
-
-		background-color: transparent;
-
-		&>.icon {
-			transform: none;
-
-			color: var(--checkbox-color);
-
-			opacity: 1;
-		}
-	}
-}
-
-.icon {
-	pointer-events: none;
-
-	transform: translateY(.25rem) scale(0.5);
-
-	display: block;
-
-	width: 80%;
-
-	color: transparent;
-
-	opacity: 1;
-
-	transition: transform 100ms ease,
-		opacity 100ms ease;
-}
+.indicator {
+	--checkbox-size-xs: rem(16px);
+	--checkbox-size-sm: rem(20px);
+	--checkbox-size-md: rem(24px);
+	--checkbox-size-lg: rem(30px);
+	--checkbox-size-xl: rem(36px);
+
+	--checkbox-size: var(--checkbox-size-sm);
+	--checkbox-color: var(--color-primary-filled);
+	--checkbox-icon-color: var(--color-white);
+
+	--checkbox-radius: var(--radius-default);
+
+	position: relative;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: var(--checkbox-size);
+	min-width: var(--checkbox-size);
+	height: var(--checkbox-size);
+	min-height: var(--checkbox-size);
+
+	border: 1px solid transparent;
+	border-radius: var(--checkbox-radius);
+
+	transition: border-color 100ms ease,
+		background-color 100ms ease;
+	-webkit-tap-highlight-color: transparent;
+
+	&[data-indeterminate],
+	&[data-checked] {
+		border-color: var(--checkbox-color);
+
+		background-color: var(--checkbox-color);
+
+		&>.icon {
+			transform: none;
+
+			color: var(--checkbox-icon-color);
+
+			opacity: 1;
+		}
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		border-color: var(--color-disabled-border);
+
+		background-color: var(--color-disabled);
+
+		&[data-checked]>.icon {
+			@mixin light {
+				color: var(--color-gray-5);
+			}
+
+			@mixin dark {
+				color: var(--color-dark-3);
+			}
+		}
+	}
+
+	@mixin where-light {
+		border-color: var(--color-gray-4);
+
+		background-color: var(--color-white);
+	}
+
+	@mixin where-dark {
+		border-color: var(--color-dark-4);
+
+		background-color: var(--color-dark-6);
+	}
+}
+
+.indicator[data-variant='outline'] {
+
+	&[data-indeterminate]:not([data-disabled]),
+	&[data-checked]:not([data-disabled]) {
+		border-color: var(--checkbox-color);
+
+		background-color: transparent;
+
+		&>.icon {
+			transform: none;
+
+			color: var(--checkbox-color);
+
+			opacity: 1;
+		}
+	}
+}
+
+.icon {
+	pointer-events: none;
+
+	transform: translateY(.25rem) scale(0.5);
+
+	display: block;
+
+	width: 80%;
+
+	color: transparent;
+
+	opacity: 1;
+
+	transition: transform 100ms ease,
+		opacity 100ms ease;
+}
 </style>

package/dist/runtime/components/checkbox/checkbox-indicator.vue.d.ts

@@ -1,10 +1,16 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export interface CheckboxIndicatorProps {
+    /** Color from theme */
     color?: NuanceColor;
+    /** Icon color */
     iconColor?: NuanceColor;
+    /** Visual variant */
     variant?: 'filled' | 'outline';
+    /** Border radius */
     radius?: NuanceSize;
+    /** Component size */
     size?: NuanceSize;
+    /** Displays indeterminate icon */
     indeterminate?: boolean;
 }
 type __VLS_Props = CheckboxIndicatorProps;

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

@@ -3,13 +3,23 @@ import type { InlineInputProps } from '../input/index.js';
 export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Icon color */
     iconColor?: NuanceColor;
-    /** Visual variant @default 'filled' */
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'outline';
+    /** Border radius */
     radius?: NuanceSize;
-    /** Component size @default 'sm' */
+    /**
+     * Component size
+     * @default `'sm'`
+     */
     size?: NuanceSize;
+    /** Value used in checkbox group context */
     value?: string;
 }
 type __VLS_Props = CheckboxProps;