nuance-ui 0.2.6 → 0.2.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-header.d.vue.ts

@@ -1,12 +1,18 @@
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarHeaderProps extends BoxProps {
+    /** Icon for the previous navigation button */
     prevIcon?: string;
+    /** Icon for the next navigation button */
     nextIcon?: string;
+    /** Whether the previous button is rendered */
     withPrev?: boolean;
+    /** Whether the next button is rendered */
     withNext?: boolean;
+    /** Returns true when the next button should be disabled */
     nextDisabled?: () => boolean;
+    /** Returns true when the previous button should be disabled */
     prevDisabled?: () => boolean;
-    /** Label disabled state  */
+    /** Disables the level label button */
     disabled?: boolean;
 }
 export interface CalendarHeaderEmits {

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

@@ -1,12 +1,18 @@
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarHeaderProps extends BoxProps {
+    /** Icon for the previous navigation button */
     prevIcon?: string;
+    /** Icon for the next navigation button */
     nextIcon?: string;
+    /** Whether the previous button is rendered */
     withPrev?: boolean;
+    /** Whether the next button is rendered */
     withNext?: boolean;
+    /** Returns true when the next button should be disabled */
     nextDisabled?: () => boolean;
+    /** Returns true when the previous button should be disabled */
     prevDisabled?: () => boolean;
-    /** Label disabled state  */
+    /** Disables the level label button */
     disabled?: boolean;
 }
 export interface CalendarHeaderEmits {

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";

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

@@ -1,6 +1,6 @@
 <script setup>
 import { isAfter, isBefore, sameDay } from "@formkit/tempo";
-import { createMonth, getWeekNumber, isSameMonth, isWeekend as isWeekendDay } from "@nui/helpers/date";
+import { createMonth, getWeekNumber, isSameMonth, isWeekend as isWeekendDay } from "@nui/utils";
 import { shallowRef, watch } from "vue";
 import Box from "../../../box.vue";
 import { useCalendarState } from "../../lib/context";

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

@@ -1,6 +1,6 @@
 <script setup>
 import { date, isAfter, isBefore, range } from "@formkit/tempo";
-import { isSameMonth } from "@nui/helpers/date";
+import { isSameMonth } from "@nui/utils";
 import { chunk } from "es-toolkit";
 import { computed } from "vue";
 import Box from "../../../box.vue";

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.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.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,9 +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;
+    /** 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

@@ -6,28 +6,42 @@ import { useProvideCheckboxCard } from "./lib/card.context";
 import { useCheckboxGroupState } from "./lib/group.context";
 const {
   withBorder,
-  value: _value,
+  value,
   mod,
-  radius
+  radius,
+  disabled: _disabled
 } = defineProps({
   mod: { type: [Object, Array], required: false },
   withBorder: { type: Boolean, required: false },
   radius: { type: [String, Number], required: false },
+  disabled: { type: Boolean, required: false, skipCheck: true },
   value: { type: String, required: false }
 });
 const ctx = useCheckboxGroupState();
 const modelValue = defineModel({ type: Boolean, ...{ default: false } });
-const checked = computed(() => {
-  if (ctx?.value && _value)
-    return ctx?.value.value.includes(_value);
-  return modelValue.value;
+const checked = computed({
+  get: () => {
+    if (ctx && value !== void 0)
+      return ctx.isSelected(value);
+    return modelValue.value;
+  },
+  set: (check) => {
+    if (ctx && value !== void 0)
+      return ctx.update(value);
+    modelValue.value = check;
+  }
+});
+const disabled = computed(() => {
+  if (_disabled)
+    return true;
+  if (ctx && value !== void 0)
+    return ctx.isDisabled(value);
+  return false;
+});
+useProvideCheckboxCard({
+  value: checked,
+  onUpdate: () => checked.value = !checked.value
 });
-function onUpdate() {
-  if (_value && ctx?.onUpdate)
-    return ctx.onUpdate(_value);
-  return modelValue.value = !modelValue.value;
-}
-useProvideCheckboxCard({ value: checked, onUpdate });
 const style = computed(() => ({
   "--card-radius": getRadius(radius)
 }));
@@ -36,10 +50,11 @@ const style = computed(() => ({
 <template>
 	<UnstyledButton
 		:mod='[{ checked, "with-border": withBorder }, mod]'
-		:value='_value'
+		:value='checked'
 		:class='$style.root'
 		:style
-		@click='onUpdate()'
+		:disabled
+		@click='checked = !checked'
 	>
 		<slot />
 	</UnstyledButton>

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

@@ -1,9 +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;
+    /** Disables the component */
+    disabled?: boolean | undefined;
+    /** Value used in checkbox group context */
     value?: string;
 }
 type __VLS_Props = CheckboxCardProps;

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

@@ -1,8 +1,19 @@
 import type { NuanceSize } from '@nui/types';
 import type { InputWrapperProps } from '../input/index.js';
 export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'resize' | 'multiline' | 'id' | 'size'> {
-    name: string;
+    /** Input name */
+    name?: string;
+    /** Component size */
     size?: NuanceSize;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * Maximum number of checkboxes that can be selected.
+     * Unselected switches are disabled once the limit is reached
+     */
+    maxSelectedValues?: number;
 }
 type __VLS_Props = CheckboxGroupProps;
 type __VLS_ModelProps = {

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

@@ -3,9 +3,19 @@ import { useId } from "vue";
 import InputWrapper from "../input/ui/input-wrapper.vue";
 import VisuallyHiddenInput from "../visually-hidden/visually-hidden-input.vue";
 import { useProvideCheckboxGroup } from "./lib/group.context";
-const { size, name, ...rest } = defineProps({
-  name: { type: String, required: true },
+const {
+  size,
+  name,
+  maxSelectedValues,
+  disabled,
+  readOnly,
+  ...rest
+} = defineProps({
+  name: { type: String, required: false },
   size: { type: String, required: false },
+  readOnly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  maxSelectedValues: { type: Number, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -17,24 +27,24 @@ const { size, name, ...rest } = defineProps({
 });
 const value = defineModel({ type: Array, ...{ default: [] } });
 const id = useId();
-useProvideCheckboxGroup({ value, size });
+useProvideCheckboxGroup({ value, size, maxSelectedValues, disabled, readOnly });
 </script>
 
 <template>
-	<InputWrapper :id v-bind='rest'>
-		<template #label>
-			<slot name='label' />
-		</template>
-
-		<slot />
-
-		<template #description>
-			<slot name='description' />
-		</template>
-		<template #error>
-			<slot name='error' />
-		</template>
-
-		<VisuallyHiddenInput :id v-model='value' :name />
-	</InputWrapper>
+	<InputWrapper :id v-bind='rest'>
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<slot />
+
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+
+		<VisuallyHiddenInput :id v-model='value' :name />
+	</InputWrapper>
 </template>