nuance-ui 0.2.6 → 0.2.7

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getFontSize, getRadius, getSize, getSpacing } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -67,47 +67,48 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		:is
+	<Box
+		:is
+		type='button'
 		:mod='[
   {
     "with-left-section": !!$slots?.leftSection,
     "with-right-section": !!$slots?.rightSection
   },
   mod
-]'
-		:style='style.root'
-		:class='[css.root, classes?.root]'
-		:disabled='loading'
-	>
-		<Transition name='fade-down'>
-			<Loader v-show='loading' :class='css.loader' :color :size />
-		</Transition>
-
-		<span :class='[css.inner, classes?.inner]'>
-			<span
-				v-if='$slots.leftSection'
-				:class='[css.section, classes?.section]'
-				data-position='left'
-				v-bind='leftSectionProps'
-				:style='style.leftSection'
-			>
-				<slot name='leftSection' />
-			</span>
-
-			<span :class='[css.label, classes?.label]'>
-				<slot />
-			</span>
-
-			<span
-				v-if='$slots.rightSection'
-				data-position='right'
-				:class='[css.section, classes?.section]'
-				v-bind='rightSectionProps'
-				:style='style.rightSection'
-			>
-				<slot name='rightSection' />
-			</span>
-		</span>
-	</Box>
+]'
+		:style='style.root'
+		:class='[css.root, classes?.root]'
+		:disabled='loading'
+	>
+		<Transition name='fade-down'>
+			<Loader v-show='loading' :class='css.loader' :color :size />
+		</Transition>
+
+		<span :class='[css.inner, classes?.inner]'>
+			<span
+				v-if='$slots.leftSection'
+				:class='[css.section, classes?.section]'
+				data-position='left'
+				v-bind='leftSectionProps'
+				:style='style.leftSection'
+			>
+				<slot name='leftSection' />
+			</span>
+
+			<span :class='[css.label, classes?.label]'>
+				<slot />
+			</span>
+
+			<span
+				v-if='$slots.rightSection'
+				data-position='right'
+				:class='[css.section, classes?.section]'
+				v-bind='rightSectionProps'
+				:style='style.rightSection'
+			>
+				<slot name='rightSection' />
+			</span>
+		</span>
+	</Box>
 </template>

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

@@ -1,26 +1,39 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
+    /** Spacing token */
     spacing?: NuanceSize | string;
+    /**
+     * Visual variant
+     * @default `'default'`
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
     /** Styles API */
-    classes?: {
-        root?: string | string[];
-        inner?: string | string[];
-        label?: string | string[];
-        section?: string | string[];
-    };
-    /** section pointer-events */
+    classes?: Classes<'root' | 'inner' | 'label' | 'section'>;
+    /**
+     * `pointer-events` value for the left section
+     * @default `'none'`
+     */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
-    /** section pointer-events */
+    /**
+     * `pointer-events` value for the right section
+     * @default `'all'`
+     */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
 }
 declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};

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

@@ -1,6 +1,6 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
-import type { CalendarLevel, DateSelection, SelectionMode } from './model.js';
+import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
     /** Controls size */

package/dist/runtime/components/calendar/calendar.vue

@@ -42,86 +42,86 @@ const [calendars, nav] = useCalendarNavigation({
 </script>
 
 <template>
-	<CalendarRoot
-		v-slot='{ config }'
-		v-model:date='date'
-		v-model:select='select'
-		v-bind='props'
-		:class='$style.content'
-		@select='(select) => $emit("select", select)'
-	>
-		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
-			<CalendarHeader
-				:with-prev='ix === 0'
-				:with-next='ix === calendars.length - 1'
-				:prev-disabled='nav.isPrevDisabled'
-				:next-disabled='nav.isNextDisabled'
+	<CalendarRoot
+		v-slot='{ config }'
+		v-model:date='date'
+		v-model:select='select'
+		v-bind='props'
+		:class='$style.content'
+		@select='(select) => $emit("select", select)'
+	>
+		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
+			<CalendarHeader
+				:with-prev='ix === 0'
+				:with-next='ix === calendars.length - 1'
+				:prev-disabled='nav.isPrevDisabled'
+				:next-disabled='nav.isNextDisabled'
 				@prev='() => {
   nav.move(-1);
   $emit("prev");
-}'
+}'
 				@next='() => {
   nav.move(1);
   $emit("next");
-}'
+}'
 				@level='() => {
   level = nav.nextLevel();
   $emit("level");
-}'
-			>
-				<slot name='level' :config>
-					{{ nav.getLevelLabel(calendar, config) }}
-				</slot>
-			</CalendarHeader>
-
-			<CalendarMonth
-				v-if='level === "month"'
-				:month='calendar'
-				:with-week-numbers='props.withWeekNumbers'
-				:with-cell-spacing='props.withCellSpacing'
-				:size
-			>
-				<template v-if='!!$slots.weekday' #weekday>
-					<slot name='weekday' />
-				</template>
-
-				<slot name='day' />
-			</CalendarMonth>
-			<CalendarYear
-				v-if='level === "year"'
-				:year='calendar'
-				:size
-				:selectable='props.minLevel === "year"'
+}'
+			>
+				<slot name='level' :config>
+					{{ nav.getLevelLabel(calendar, config) }}
+				</slot>
+			</CalendarHeader>
+
+			<CalendarMonth
+				v-if='level === "month"'
+				:month='calendar'
+				:with-week-numbers='props.withWeekNumbers'
+				:with-cell-spacing='props.withCellSpacing'
+				:size
+			>
+				<template v-if='!!$slots.weekday' #weekday>
+					<slot name='weekday' />
+				</template>
+
+				<slot name='day' />
+			</CalendarMonth>
+			<CalendarYear
+				v-if='level === "year"'
+				:year='calendar'
+				:size
+				:selectable='props.minLevel === "year"'
 				@select='(month) => {
   if (props.minLevel !== "year") {
     level = nav.prevLevel();
     date = month;
   }
-}'
-			/>
-			<CalendarDecade
-				v-if='level === "decade"'
-				:date='calendar'
-				:size
-				:selectable='props.minLevel === "decade"'
+}'
+			/>
+			<CalendarDecade
+				v-if='level === "decade"'
+				:date='calendar'
+				:size
+				:selectable='props.minLevel === "decade"'
 				@select='(year) => {
   if (props.minLevel !== "decade") {
     level = nav.prevLevel();
     date = year;
   }
-}'
-			/>
-		</section>
-	</CalendarRoot>
+}'
+			/>
+		</section>
+	</CalendarRoot>
 </template>
 
 <style lang="postcss" module>
-.content {
-	--calendar-cell-spacing: rem(1px);
-
-	display: flex;
-	gap: var(--spacing-sm);
-
-	width: fit-content;
-}
+.content {
+	--calendar-cell-spacing: rem(1px);
+
+	display: flex;
+	gap: var(--spacing-sm);
+
+	width: fit-content;
+}
 </style>

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

@@ -1,6 +1,6 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
-import type { CalendarLevel, DateSelection, SelectionMode } from './model.js';
+import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
     /** Controls size */

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

@@ -1,4 +1,4 @@
 export type * from './calendar.vue';
-export * from './model.js';
+export * from './types.js';
 export type * from './ui/core';
 export type * from './ui/levels';

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

@@ -1 +1 @@
-export * from "./model.js";
+export * from "./types.js";

package/dist/runtime/components/calendar/lib/context.d.ts

@@ -1,6 +1,6 @@
 import type { DateInput, FormatToken } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
 import type { ModelRef, Ref } from 'vue';
 interface State {
     date: ModelRef<DateInput>;

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

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

package/dist/runtime/components/calendar/lib/use-calendar-navigation.d.ts

@@ -1,7 +1,7 @@
 import type { DateInput } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
+import type { DateConfig } from '@nui/composables';
 import type { ModelRef } from 'vue';
-import type { CalendarLevel } from '../model.js';
+import type { CalendarLevel } from '../types.js';
 export declare function useCalendarNavigation({ date, level, numberOfMonths, disabled, minDate, maxDate, prevDisabled, nextDisabled, minLevel, maxLevel, }: {
     date: ModelRef<DateInput>;
     level: ModelRef<CalendarLevel>;

package/dist/runtime/components/calendar/lib/use-calendar-navigation.js

@@ -1,5 +1,5 @@
 import { addMonth, addYear, date as fDate, format, isAfter, isBefore, sameYear } from "@formkit/tempo";
-import { isSameMonth } from "@nui/helpers/date";
+import { isSameMonth } from "@nui/utils";
 import { computed } from "vue";
 const LEVEL_ORDER = ["month", "year", "decade"];
 export function useCalendarNavigation({

package/dist/runtime/components/calendar/lib/use-calendar-selection.d.ts

@@ -1,8 +1,8 @@
 import type { DateInput } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
 import type { ModelRef } from 'vue';
-import type { DateSelection, SelectionMode } from '../model.js';
+import type { DateSelection, SelectionMode } from '../types.js';
 export interface UseCalendarSelectionProps<T extends SelectionMode = 'single'> {
     mode: T;
     value: ModelRef<DateSelection<T>>;

package/dist/runtime/components/calendar/lib/use-calendar-selection.js

@@ -1,6 +1,6 @@
 import { sameDay, weekEnd, weekStart } from "@formkit/tempo";
-import { createStrictInjection } from "@nui/helpers";
-import { isSameWeek } from "@nui/helpers/date";
+import { createStrictInjection } from "@nui/composables";
+import { isSameWeek } from "@nui/utils";
 const injectionKey = Symbol("nui-calendar-select");
 const [Provide, Inject] = createStrictInjection((state) => state, {
   injectionKey,

package/dist/runtime/components/calendar/ui/core/calendar-cell.d.vue.ts

@@ -1,6 +1,7 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | string;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/calendar/ui/core/calendar-cell.vue

@@ -13,122 +13,122 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<UnstyledButton v-bind='props' :style :class='$style.cell'>
-		<slot	/>
-	</UnstyledButton>
+	<UnstyledButton v-bind='props' :style :class='$style.cell'>
+		<slot	/>
+	</UnstyledButton>
 </template>
 
 <style lang="postcss" module>
-.cell {
-	--day-size-xs: rem(30px);
-	--day-size-sm: rem(36px);
-	--day-size-md: rem(42px);
-	--day-size-lg: rem(48px);
-	--day-size-xl: rem(54px);
-	--day-size: var(--day-size-sm);
-
-	cursor: pointer;
-	user-select: none;
-
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	width: var(--day-size, var(--day-size-sm));
-	height: var(--day-size, var(--day-size-sm));
-	border-radius: var(--radius-default);
-
-	font-size: calc(var(--day-size) / 2.8);
-	color: var(--color-text);
-
-	background-color: transparent;
-
-	&:hover {
-		&:where(:not([data-static], &:disabled, [data-selected], [data-in-range])) {
-			@mixin light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&:where([data-static]) {
-		cursor: default;
-		user-select: auto;
-	}
-
-	&:where([data-weekend]) {
-		color: var(--color-red-6);
-	}
-
-	&:where([data-outside]) {
-		/* stylelint-disable-next-line function-no-unknown */
-		color: alpha(var(--color-dimmed), .5);
-	}
-
-	&:where([data-hidden]) {
-		display: none;
-	}
-
-	&:where([data-today]:not([data-selected], [data-in-range])) {
-		@mixin where-light {
-			border: 1px solid var(--color-gray-4);
-		}
-
-		@mixin where-dark {
-			border: 1px solid var(--color-dark-4);
-		}
-	}
-
-	&:where([data-in-range]) {
-		border-radius: 0;
-
-		background-color: var(--color-primary-light-hover);
-
-		&:hover {
-			&:where(:not(:disabled, [data-static])) {
-				background-color: var(--color-primary-light);
-			}
-		}
-	}
-
-	&:where([data-first-in-range]) {
-		border-radius: 0;
-		border-start-start-radius: var(--radius-default);
-		border-end-start-radius: var(--radius-default);
-	}
-
-	&:where([data-last-in-range]) {
-		border-radius: 0;
-		border-start-end-radius: var(--radius-default);
-		border-end-end-radius: var(--radius-default);
-	}
-
-	&:where([data-last-in-range][data-first-in-range]) {
-		border-radius: var(--radius-default);
-	}
-
-	&:where([data-selected]) {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-
-		&:hover {
-			&:where(:not(:disabled, [data-static])) {
-				background-color: var(--color-primary-filled-hover);
-			}
-		}
-	}
-
-	&:where(:disabled) {
-		pointer-events: none;
-		cursor: not-allowed;
-
-		/* stylelint-disable-next-line function-no-unknown */
-		color: alpha(var(--color-disabled), .5);
-	}
-}
+.cell {
+	--day-size-xs: rem(30px);
+	--day-size-sm: rem(36px);
+	--day-size-md: rem(42px);
+	--day-size-lg: rem(48px);
+	--day-size-xl: rem(54px);
+	--day-size: var(--day-size-sm);
+
+	cursor: pointer;
+	user-select: none;
+
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	width: var(--day-size, var(--day-size-sm));
+	height: var(--day-size, var(--day-size-sm));
+	border-radius: var(--radius-default);
+
+	font-size: calc(var(--day-size) / 2.8);
+	color: var(--color-text);
+
+	background-color: transparent;
+
+	&:hover {
+		&:where(:not([data-static], &:disabled, [data-selected], [data-in-range])) {
+			@mixin light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	&:where([data-static]) {
+		cursor: default;
+		user-select: auto;
+	}
+
+	&:where([data-weekend]) {
+		color: var(--color-red-6);
+	}
+
+	&:where([data-outside]) {
+		/* stylelint-disable-next-line function-no-unknown */
+		color: alpha(var(--color-dimmed), .5);
+	}
+
+	&:where([data-hidden]) {
+		display: none;
+	}
+
+	&:where([data-today]:not([data-selected], [data-in-range])) {
+		@mixin where-light {
+			border: 1px solid var(--color-gray-4);
+		}
+
+		@mixin where-dark {
+			border: 1px solid var(--color-dark-4);
+		}
+	}
+
+	&:where([data-in-range]) {
+		border-radius: 0;
+
+		background-color: var(--color-primary-light-hover);
+
+		&:hover {
+			&:where(:not(:disabled, [data-static])) {
+				background-color: var(--color-primary-light);
+			}
+		}
+	}
+
+	&:where([data-first-in-range]) {
+		border-radius: 0;
+		border-start-start-radius: var(--radius-default);
+		border-end-start-radius: var(--radius-default);
+	}
+
+	&:where([data-last-in-range]) {
+		border-radius: 0;
+		border-start-end-radius: var(--radius-default);
+		border-end-end-radius: var(--radius-default);
+	}
+
+	&:where([data-last-in-range][data-first-in-range]) {
+		border-radius: var(--radius-default);
+	}
+
+	&:where([data-selected]) {
+		color: var(--color-white);
+
+		background-color: var(--color-primary-filled);
+
+		&:hover {
+			&:where(:not(:disabled, [data-static])) {
+				background-color: var(--color-primary-filled-hover);
+			}
+		}
+	}
+
+	&:where(:disabled) {
+		pointer-events: none;
+		cursor: not-allowed;
+
+		/* stylelint-disable-next-line function-no-unknown */
+		color: alpha(var(--color-disabled), .5);
+	}
+}
 </style>

package/dist/runtime/components/calendar/ui/core/calendar-cell.vue.d.ts

@@ -1,6 +1,7 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | string;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/calendar/ui/core/calendar-root.d.vue.ts

@@ -1,7 +1,7 @@
 import type { DateInput, FormatToken } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
-import type { DateSelection, SelectionMode } from '../../model.js';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
+import type { DateSelection, SelectionMode } from '../../types.js';
 export interface CalendarRootProps<T extends SelectionMode> {
     /** Selection mode @default 'single' */
     mode?: T;

package/dist/runtime/components/calendar/ui/core/calendar-root.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { range } from "@formkit/tempo";
-import { useDatesConfig } from "@nui/composals";
+import { useDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import Box from "../../../box.vue";
 import { useProvideCalendarState } from "../../lib/context";