nuance-ui 0.2.18 → 0.2.20

package/dist/runtime/components/modal/modal-header.vue.d.ts

@@ -1,11 +1,9 @@
 import type { DialogHeaderProps } from '../dialog/index.js';
-export interface ModalHeaderProps extends DialogHeaderProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass'>;
-export interface ModalRootProps extends OmittedDialogRootProps {
+export interface ModalRootProps extends DialogRootProps {
     /** If set, the modal is centered vertically @default `false` */
     centered?: boolean;
     /** If set, the modal takes the entire screen @default `false` */

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

@@ -8,6 +8,7 @@ const {
   withoutOverlay = false,
   withinPortal = false,
   closeOnClickOutside = true,
+  classes,
   ...rest
 } = defineProps({
   centered: { type: Boolean, required: false },
@@ -15,6 +16,7 @@ const {
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
   portalTarget: { type: [String, Object, null], required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
@@ -34,11 +36,11 @@ const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 	<DialogRoot
 		v-model:open='opened'
 		:mod='[{ centered, "full-screen": fullScreen }, mod]'
-		:root-class='css.root'
 		:within-portal
 		:close-on-click-outside
 		:without-overlay
 		v-bind='rest'
+		:classes='{ ...classes, root: [css.root, classes?.root] }'
 		@open='$emit("open")'
 		@close='$emit("close")'
 	>

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

@@ -1,6 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass'>;
-export interface ModalRootProps extends OmittedDialogRootProps {
+export interface ModalRootProps extends DialogRootProps {
     /** If set, the modal is centered vertically @default `false` */
     centered?: boolean;
     /** If set, the modal takes the entire screen @default `false` */

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

@@ -0,0 +1,14 @@
+import type { DialogSectionProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,14 @@
+<script setup>
+import DialogSection from "../dialog/ui/dialog-section.vue";
+const props = defineProps({
+  bordered: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<DialogSection v-bind='props'>
+		<slot />
+	</DialogSection>
+</template>

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

@@ -0,0 +1,14 @@
+import type { DialogSectionProps } from '../dialog/index.js';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,11 +1,9 @@
 import type { DialogTitleProps } from '../dialog/index.js';
-export interface ModalTitleProps extends DialogTitleProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,11 +1,9 @@
 import type { DialogTitleProps } from '../dialog/index.js';
-export interface ModalTitleProps extends DialogTitleProps {
-}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ModalTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/pin-input/lib.d.ts

@@ -0,0 +1,2 @@
+export declare function pinValidate(code: string, type: 'alphanumeric' | 'number' | RegExp): boolean;
+export declare function createPinArray(length: number, value: string): string[];

package/dist/runtime/components/pin-input/lib.js

@@ -0,0 +1,19 @@
+const regex = {
+  number: /^\d+$/,
+  alphanumeric: /^[a-z0-9]+$/i
+};
+export function pinValidate(code, type) {
+  const re = type instanceof RegExp ? type : regex[type] ?? null;
+  return re?.test(code);
+}
+export function createPinArray(length, value) {
+  if (length < 1)
+    return [];
+  const values = Array.from({ length }).fill("");
+  if (value) {
+    const splitted = value.trim().split("");
+    for (let i = 0; i < Math.min(length, splitted.length); i += 1)
+      values[i] = splitted[i] === " " ? "" : splitted[i];
+  }
+  return values;
+}

package/dist/runtime/components/pin-input/pin-input.d.vue.ts

@@ -0,0 +1,55 @@
+import type { NuanceRadius, NuanceSize, NuanceSpacing } from '../../types/index.js';
+import type { BoxProps } from '../box.vue.js';
+export interface PinInputEmits {
+    complete: [value: string];
+}
+export interface PinInputProps extends BoxProps {
+    /** Id auto-generated if not provided */
+    id?: string;
+    /** Hidden input `name` attribute */
+    name?: string;
+    /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' */
+    gap?: NuanceSpacing;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'md' */
+    radius?: NuanceRadius;
+    /** Controls inputs `width` and `height` @default 'sm' */
+    size?: NuanceSize;
+    /** If set, the first input is focused when component is mounted @default false */
+    autoFocus?: boolean;
+    /** Inputs placeholder */
+    placeholder?: string;
+    /** Determines whether focus should be moved automatically to the next input once filled @default true */
+    manageFocus?: boolean;
+    /** Determines whether `autocomplete="one-time-code"` attribute should be set on all inputs @default true */
+    otp?: boolean;
+    /** Adds disabled attribute to all inputs */
+    disabled?: boolean;
+    /** Sets `aria-invalid` attribute and applies error styles to all inputs */
+    error?: boolean;
+    /** Determines which values can be entered @default 'alphanumeric' */
+    type?: 'alphanumeric' | 'number' | RegExp;
+    /** Changes input type to `"password"` @default false */
+    mask?: boolean;
+    /** Number of inputs @default 4 */
+    length?: number;
+    /** If set, the user cannot edit the value */
+    readOnly?: boolean;
+    /** `aria-label` attribute */
+    ariaLabel?: string;
+    /** Marks the field as required */
+    required?: boolean;
+}
+type __VLS_Props = PinInputProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/pin-input/pin-input.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { useVarsResolver } from "@nui/composables";
+import { getSize } from "@nui/utils";
+import { computed, useId } from "vue";
+import Group from "../group.vue";
+import InputBase from "../input/ui/input-base.vue";
+import VisuallyHiddenInput from "../visually-hidden/visually-hidden-input.vue";
+import { createPinArray, pinValidate } from "./lib";
+import { usePinInput } from "./use-pin-input";
+const {
+  id,
+  name,
+  disabled,
+  required,
+  length = 4,
+  otp = true,
+  type = "number",
+  mask,
+  gap = "xs",
+  placeholder,
+  autoFocus,
+  manageFocus = true,
+  size,
+  radius = "md",
+  readOnly,
+  error
+} = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  gap: { type: [String, Number], required: false },
+  radius: { type: [String, Number], required: false },
+  size: { type: String, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  manageFocus: { type: Boolean, required: false },
+  otp: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: Boolean, required: false },
+  type: { type: null, required: false },
+  mask: { type: Boolean, required: false },
+  length: { type: Number, required: false },
+  readOnly: { type: Boolean, required: false },
+  ariaLabel: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+defineEmits(["complete"]);
+const uuid = computed(() => id ?? useId());
+const inputMode = computed(() => type === "number" ? "numeric" : "text");
+const model = defineModel({ type: String, ...{ default: "" } });
+const {
+  refs,
+  focus,
+  focusedIx,
+  cells,
+  setFieldValue,
+  handleKeydown
+} = usePinInput({
+  length: () => length,
+  manageFocus,
+  value: model,
+  inputMode
+});
+function handleInput(event, ix) {
+  const target = event.target;
+  const inputValue = target.value;
+  if (inputValue.length > 1) {
+    const isPaste = inputValue.length > 2;
+    if (isPaste) {
+      const isValid = pinValidate(inputValue, type);
+      if (!isValid)
+        return;
+      cells.value = createPinArray(length, inputValue);
+      const filledCount = Math.min(inputValue.length, length);
+      if (filledCount < length)
+        focus("next", filledCount - 1);
+      return;
+    }
+    const newChar = inputValue.split("")[inputValue.length - 1];
+    if (pinValidate(newChar, type)) {
+      setFieldValue(newChar, ix);
+      focus("next", ix);
+    }
+    return;
+  }
+  if (inputValue.length === 1) {
+    if (pinValidate(inputValue, type)) {
+      setFieldValue(inputValue, ix);
+      focus("next", ix);
+    } else {
+      setFieldValue("", ix);
+    }
+  } else if (inputValue.length === 0) {
+    setFieldValue("", ix);
+  }
+}
+function handlePaste(event) {
+  const pasteData = event.clipboardData?.getData("text/plain").replace(/\s+/g, "").trim();
+  const isValid = pinValidate(pasteData, type);
+  if (!isValid)
+    return;
+  const pasteArray = createPinArray(length, pasteData);
+  cells.value = pasteArray;
+  const filledCount = pasteArray.filter((v) => v !== "").length;
+  const focusIx = filledCount >= length ? length - 1 : filledCount;
+  refs.value[focusIx]?.focus();
+}
+const style = useVarsResolver(() => ({
+  root: {
+    "--pin-size": getSize(size, "pin-size"),
+    "--pin-fz": getSize(size, "pin-fz")
+  }
+}));
+</script>
+
+<template>
+	<Group
+		role='group'
+		wrap='nowrap'
+		:gap
+		dir='ltr'
+		:class='$style.root'
+		:style='style.root'
+	>
+		<InputBase
+			v-for='(ids, ix) in length'
+			:id='`${uuid}-${ix + 1}`'
+			:key='ids'
+			:error
+			:class='$style.pinRoot'
+			:radius
+		>
+			<template #default='{ id: _id, css }'>
+				<input
+					:id='_id'
+					:key='ids'
+					:ref='refs.set'
+					:class='[css, $style.pin]'
+					:value='cells[ix]'
+					:autocomplete='otp ? "one-time-code" : void 0'
+					:input-mode
+					:type='mask ? "password" : "text"'
+					:placeholder
+					:autofocus='autoFocus && ix === 0'
+					:readonly='readOnly'
+					:disabled
+					@input='handleInput($event, ix)'
+					@focus='(event) => {
+  if (!readOnly) {
+    event.target?.select();
+    focusedIx = ix;
+  }
+}'
+					@blur='focusedIx = -1'
+					@paste.prevent='handlePaste'
+					@keydown='handleKeydown($event, ix)'
+				>
+			</template>
+		</InputBase>
+	</Group>
+	<VisuallyHiddenInput
+		:name
+		:disabled
+		:required
+	/>
+</template>
+
+<style module>
+.root{--pin-size-xs:rem(30px);--pin-size-sm:rem(36px);--pin-size-md:rem(42px);--pin-size-lg:rem(50px);--pin-size-xl:rem(60px);--pin-size:var(--pin-size-sm);--pin-fz-xs:1.125rem;--pin-fz-sm:1.5rem;--pin-fz-md:1.75rem;--pin-fz-lg:2rem;--pin-fz-xl:2.5rem;--pin-fz:var(--pin-fz-sm)}.pinRoot{@mixin where-light{--input-bd:var(--color-gray-2);--input-bg:var(--color-gray-0)}@mixin where-dark{--input-bd:var(--color-gray-7);--input-bg:var(--color-dark-9)}}.pin{font-size:var(--pin-fz);font-weight:600;height:calc(var(--pin-size) + var(--pin-size)/3);line-height:1;padding:0;text-align:center;width:var(--pin-size)}
+</style>

package/dist/runtime/components/pin-input/pin-input.vue.d.ts

@@ -0,0 +1,55 @@
+import type { NuanceRadius, NuanceSize, NuanceSpacing } from '../../types/index.js';
+import type { BoxProps } from '../box.vue.js';
+export interface PinInputEmits {
+    complete: [value: string];
+}
+export interface PinInputProps extends BoxProps {
+    /** Id auto-generated if not provided */
+    id?: string;
+    /** Hidden input `name` attribute */
+    name?: string;
+    /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' */
+    gap?: NuanceSpacing;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'md' */
+    radius?: NuanceRadius;
+    /** Controls inputs `width` and `height` @default 'sm' */
+    size?: NuanceSize;
+    /** If set, the first input is focused when component is mounted @default false */
+    autoFocus?: boolean;
+    /** Inputs placeholder */
+    placeholder?: string;
+    /** Determines whether focus should be moved automatically to the next input once filled @default true */
+    manageFocus?: boolean;
+    /** Determines whether `autocomplete="one-time-code"` attribute should be set on all inputs @default true */
+    otp?: boolean;
+    /** Adds disabled attribute to all inputs */
+    disabled?: boolean;
+    /** Sets `aria-invalid` attribute and applies error styles to all inputs */
+    error?: boolean;
+    /** Determines which values can be entered @default 'alphanumeric' */
+    type?: 'alphanumeric' | 'number' | RegExp;
+    /** Changes input type to `"password"` @default false */
+    mask?: boolean;
+    /** Number of inputs @default 4 */
+    length?: number;
+    /** If set, the user cannot edit the value */
+    readOnly?: boolean;
+    /** `aria-label` attribute */
+    ariaLabel?: string;
+    /** Marks the field as required */
+    required?: boolean;
+}
+type __VLS_Props = PinInputProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/pin-input/use-pin-input.d.ts

@@ -0,0 +1,18 @@
+import type { MaybeRefOrGetter, ModelRef } from 'vue';
+export declare function usePinInput<Element extends HTMLInputElement>({ value: model, length, allowedKeys, manageFocus, inputMode, }: {
+    value: ModelRef<string>;
+    /** current length */
+    length: MaybeRefOrGetter<number>;
+    /** @default ['Backspace', 'Tab', 'Control', 'Delete', 'ArrowLeft', 'ArrowRight'] */
+    allowedKeys?: string[];
+    /** @default true */
+    manageFocus?: boolean;
+    inputMode: MaybeRefOrGetter<'numeric' | 'text'>;
+}): {
+    refs: Readonly<import("vue").Ref<Readonly<import("@vueuse/core").TemplateRefsList<Element>>, Readonly<import("@vueuse/core").TemplateRefsList<Element>>>>;
+    cells: import("vue").WritableComputedRef<string[], string[]>;
+    focusedIx: import("vue").Ref<number, number>;
+    focus: (dir: "next" | "prev", ix: number) => void;
+    handleKeydown: (event: KeyboardEvent, ix: number) => void;
+    setFieldValue: (value: string, ix: number) => string[];
+};

package/dist/runtime/components/pin-input/use-pin-input.js

@@ -0,0 +1,94 @@
+import { useTemplateRefsList } from "@vueuse/core";
+import { computed, ref, toValue } from "vue";
+import { createPinArray } from "./lib.js";
+export function usePinInput({
+  value: model,
+  length,
+  allowedKeys = ["Backspace", "Tab", "Control", "Delete", "ArrowLeft", "ArrowRight"],
+  manageFocus = true,
+  inputMode
+}) {
+  const refs = useTemplateRefsList();
+  const focusedIx = ref(-1);
+  const cells = computed({
+    get: () => createPinArray(toValue(length), model.value),
+    set: (value) => {
+      model.value = value.join("").trim();
+    }
+  });
+  function setFieldValue(value, ix) {
+    const values = [...cells.value];
+    values[ix] = value;
+    cells.value = values;
+    return values;
+  }
+  function focus(dir, ix) {
+    if (dir === "next") {
+      const nextIx = ix + 1;
+      if (nextIx < toValue(length))
+        refs.value[nextIx]?.focus();
+    } else if (dir === "prev") {
+      const prevIx = ix - 1;
+      if (prevIx >= 0)
+        refs.value[prevIx]?.focus();
+    }
+  }
+  function handleKeydown(event, ix) {
+    const inputValue = event.target.value;
+    if (inputMode === "numeric") {
+      const isModifierShortcut = event.ctrlKey || event.metaKey;
+      const isAllowedKey = allowedKeys.includes(event.key) || isModifierShortcut || !Number.isNaN(Number(event.key));
+      if (!isAllowedKey)
+        return event.preventDefault();
+    }
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        focus("prev", ix);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        focus("next", ix);
+        break;
+      case "Tab":
+        if (event.shiftKey && ix > 0 && manageFocus) {
+          event.preventDefault();
+          focus("prev", ix);
+        }
+        break;
+      case " ":
+        event.preventDefault();
+        focus("next", ix);
+        break;
+      case "Delete":
+        event.preventDefault();
+        setFieldValue("", ix);
+        break;
+      case "Backspace":
+        if (inputValue === "") {
+          event.preventDefault();
+          focus("prev", ix);
+        } else {
+          setFieldValue("", ix);
+          if (ix < toValue(length) - 1) {
+            event.preventDefault();
+            focus("prev", ix);
+          }
+        }
+        break;
+      default:
+        if (inputValue.length > 0 && event.key === cells.value[ix]) {
+          event.preventDefault();
+          focus("next", ix);
+        }
+    }
+  }
+  return {
+    refs,
+    cells,
+    focusedIx,
+    focus,
+    handleKeydown,
+    setFieldValue
+  };
+}

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

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'vue';
+import type { NuanceSpacing } from '../types/index.js';
+import type { BoxProps } from './box.vue.js';
+export interface StackProps extends BoxProps {
+    /** Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem @default 'md' */
+    gap?: NuanceSpacing;
+    /** Controls `align-items` CSS property @default 'stretch' */
+    align?: CSSProperties['alignItems'];
+    /** Controls `justify-content` CSS property @default 'flex-start' */
+    justify?: CSSProperties['justifyContent'];
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<StackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StackProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/stack.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { getSpacing, useVarsResolver } from "#imports";
+import Box from "./box.vue";
+const {
+  gap,
+  align,
+  justify,
+  ...props
+} = defineProps({
+  gap: { type: [String, Number], required: false },
+  align: { type: void 0, required: false },
+  justify: { type: void 0, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = useVarsResolver(() => ({
+  root: {
+    "--stack-gap": getSpacing(gap),
+    "--stack-align": align ?? void 0,
+    "--stack-justify": justify ?? void 0
+  }
+}));
+</script>
+
+<template>
+	<Box v-bind='props' :style='style.root' :class='$style.root'>
+		<slot />
+	</Box>
+</template>
+
+<style module>
+.root{align-items:var(--stack-align,stretch);display:flex;flex-direction:column;gap:var(--stack-gap,var(--spacing-md));justify-content:var(--stack-justify,flex-start)}
+</style>

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

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'vue';
+import type { NuanceSpacing } from '../types/index.js';
+import type { BoxProps } from './box.vue.js';
+export interface StackProps extends BoxProps {
+    /** Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem @default 'md' */
+    gap?: NuanceSpacing;
+    /** Controls `align-items` CSS property @default 'stretch' */
+    align?: CSSProperties['alignItems'];
+    /** Controls `justify-content` CSS property @default 'flex-start' */
+    justify?: CSSProperties['justifyContent'];
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<StackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StackProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};