nuance-ui 0.2.18 → 0.2.19

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.18",
+  "version": "0.2.19",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -0,0 +1,18 @@
+import type { BoxProps } from './box.vue.js';
+export interface CenterProps extends BoxProps {
+    /** If set, `inline-flex` is used instead of `flex` */
+    inline?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CenterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CenterProps> & 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/center.vue

@@ -0,0 +1,26 @@
+<script setup>
+import Box from "./box.vue";
+const {
+  inline,
+  mod,
+  ...props
+} = defineProps({
+  inline: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<Box
+		v-bind='props'
+		:class='$style.root'
+		:mod='[{ inline }, mod]'
+	>
+		<slot />
+	</Box>
+</template>
+
+<style module>
+.root{align-items:center;display:flex;justify-content:center}.root:where([data-inline]){display:inline-flex}
+</style>

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

@@ -0,0 +1,18 @@
+import type { BoxProps } from './box.vue.js';
+export interface CenterProps extends BoxProps {
+    /** If set, `inline-flex` is used instead of `flex` */
+    inline?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CenterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CenterProps> & 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/group.d.vue.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'vue';
+import type { NuanceSpacing } from '../types/index.js';
+import type { BoxProps } from './box.vue.js';
+export interface GroupProps extends BoxProps {
+    /** Controls `justify-content` CSS property @default 'flex-start' */
+    justify?: CSSProperties['justifyContent'];
+    /** Controls `align-items` CSS property @default 'center' */
+    align?: CSSProperties['alignItems'];
+    /** Controls `flex-wrap` CSS property @default 'wrap' */
+    wrap?: CSSProperties['flexWrap'];
+    /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'md' */
+    gap?: NuanceSpacing;
+    /** Determines whether each child element should have `flex-grow: 1` style @default false */
+    grow?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<GroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GroupProps> & 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/group.vue

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

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

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'vue';
+import type { NuanceSpacing } from '../types/index.js';
+import type { BoxProps } from './box.vue.js';
+export interface GroupProps extends BoxProps {
+    /** Controls `justify-content` CSS property @default 'flex-start' */
+    justify?: CSSProperties['justifyContent'];
+    /** Controls `align-items` CSS property @default 'center' */
+    align?: CSSProperties['alignItems'];
+    /** Controls `flex-wrap` CSS property @default 'wrap' */
+    wrap?: CSSProperties['flexWrap'];
+    /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'md' */
+    gap?: NuanceSpacing;
+    /** Determines whether each child element should have `flex-grow: 1` style @default false */
+    grow?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<GroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GroupProps> & 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/input/ui/input-base.d.vue.ts

@@ -3,6 +3,7 @@ import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface BaseInputProps extends Omit<WrapperContext, 'id'> {
     /** Styles API */
     classes?: Classes<'root' | 'section'>;
+    error?: boolean;
 }
 type __VLS_Slots = {
     leftSection: [];

package/dist/runtime/components/input/ui/input-base.vue

@@ -5,6 +5,7 @@ import Box from "../../box.vue";
 import { useInputWrapperState } from "../lib/input-wrapper.context";
 const { classes, ...props } = defineProps({
   classes: { type: Object, required: false },
+  error: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   radius: { type: [String, Number, Object], required: false },
   size: { type: [String, Object], required: false },
@@ -35,7 +36,7 @@ const style = computed(() => ({
   "with-left-section": !!$slots.leftSection,
   "with-right-section": !!$slots.rightSection,
   "variant": api.variant,
-  "error": !!api?.error
+  "error": !!api?.error || props.error
 }]'
 	>
 		<span
@@ -59,5 +60,5 @@ const style = computed(() => ({
 </template>
 
 <style module>
-.root{--input-height-xs:rem(30px);--input-height-sm:rem(36px);--input-height-md:rem(42px);--input-height-lg:rem(50px);--input-height-xl:rem(60px);--input-padding-y-xs:rem(5px);--input-padding-y-sm:rem(6px);--input-padding-y-md:rem(8px);--input-padding-y-lg:rem(10px);--input-padding-y-xl:rem(13px);--input-height:var(--input-height-sm);--input-radius:var(--radius-default);--input-cursor:text;--input-text-align:left;--input-line-height:calc(var(--input-height) - rem(2px));--input-padding:calc(var(--input-height)/3);--input-padding-inline-start:var(--input-padding);--input-padding-inline-end:var(--input-padding);--input-placeholder-color:var(--color-placeholder);--input-color:var(--color-text);--input-left-section-width:calc(var(--input-height) - rem(2px));--input-right-section-width:calc(var(--input-height) - rem(2px));--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-left-section-size:var(--input-left-section-width);--input-right-section-size:var(--input-right-section-width);--input-fz:var(--font-size-sm);--input-size:var(--input-height);--input-resize:none;--section-y:1px;--left-section-start:1px;--left-section-border-radius:var(--input-radius) 0 0 var(--input-radius);--right-section-end:1px;--right-section-border-radius:0 var(--input-radius) var(--input-radius) 0;position:relative}.root[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--input-padding-inline-start:0;--input-padding-inline-end:0}.root[data-pointer]{--input-cursor:pointer}.root[data-multiline]{--input-padding-y-xs:4.5px;--input-padding-y-sm:5.5px;--input-padding-y-md:7px;--input-padding-y-lg:9.5px;--input-padding-y-xl:13px;--input-size:auto;--input-line-height:var(--line-height);--input-padding-y:var(--input-padding-y-sm)}.root[data-with-left-section]{--input-padding-inline-start:var(--input-left-section-size)}.root[data-with-right-section]{--input-padding-inline-end:var(--input-right-section-size)}.root[data-error]{--input-color:var(--color-error);--input-placeholder-color:var(--color-error);--input-section-color:var(--color-error);--input-bd:var(--color-error)}.root{@mixin where-light{--input-disabled-bg:var(--color-gray-1);--input-disabled-color:var(--color-gray-6);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-gray-4);--input-bg:var(--color-white);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-gray-1);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-dark{--input-disabled-bg:var(--color-dark-6);--input-disabled-color:var(--color-dark-2);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-dark-4);--input-bg:var(--color-dark-6);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-dark-5);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-rtl{--input-text-align:right;--left-section-border-radius:0 var(--input-radius) var(--input-radius) 0;--right-section-border-radius:var(--input-radius) 0 0 var(--input-radius)}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-bg);border:rem(1px) solid var(--input-bd);border-radius:var(--input-radius);color:var(--input-color);cursor:var(--input-cursor);display:block;font-family:var(--font-family),serif;font-size:var(--input-fz);height:var(--input-size);line-height:var(--input-line-height);min-height:var(--input-height);overflow:var(--input-overflow);padding-bottom:var(--input-padding-y,0);padding-inline-end:var(--input-padding-inline-end);padding-top:var(--input-padding-y,0);padding-inline-start:var(--input-padding-inline-start);resize:var(--input-resize,none);text-align:var(--input-text-align);transition:border-color .1s ease;width:100%;-webkit-tap-highlight-color:transparent}.input[data-no-overflow]{--input-overflow:hidden}.input:focus,.input:focus-within{--input-bd:var(--input-bd-focus);outline:none}[data-error] .input:focus,[data-error] .input:focus-within{--input-bd:var(--color-error)}.input::-moz-placeholder{color:var(--input-placeholder-color);opacity:1}.input::placeholder{color:var(--input-placeholder-color);opacity:1}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button,.input::-webkit-search-cancel-button,.input::-webkit-search-decoration,.input::-webkit-search-results-button,.input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input:disabled,.input[data-disabled]{background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.input:has(input:disabled){background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.section{align-items:center;border-radius:var(--section-border-radius);bottom:var(--section-y);color:var(--input-section-color,var(--color-dimmed));display:flex;inset-inline-end:var(--section-end);inset-inline-start:var(--section-start);justify-content:center;pointer-events:var(--section-pointer-events);position:absolute;top:var(--section-y);width:var(--section-size);z-index:1}.section[data-position=right]{--section-pointer-events:var(--input-right-section-pointer-events);--section-end:var(--right-section-end);--section-size:var(--input-right-section-size);--section-border-radius:var(--right-section-border-radius)}.section[data-position=left]{--section-pointer-events:var(--input-left-section-pointer-events);--section-start:var(--left-section-start);--section-size:var(--input-left-section-size);--section-border-radius:var(--left-section-border-radius)}
+.root{--input-height-xs:rem(30px);--input-height-sm:rem(36px);--input-height-md:rem(42px);--input-height-lg:rem(50px);--input-height-xl:rem(60px);--input-padding-y-xs:rem(5px);--input-padding-y-sm:rem(6px);--input-padding-y-md:rem(8px);--input-padding-y-lg:rem(10px);--input-padding-y-xl:rem(13px);--input-height:var(--input-height-sm);--input-radius:var(--radius-default);--input-cursor:text;--input-text-align:left;--input-line-height:calc(var(--input-height) - rem(2px));--input-padding:calc(var(--input-height)/3);--input-padding-inline-start:var(--input-padding);--input-padding-inline-end:var(--input-padding);--input-placeholder-color:var(--color-placeholder);--input-color:var(--color-text);--input-left-section-width:calc(var(--input-height) - rem(2px));--input-right-section-width:calc(var(--input-height) - rem(2px));--input-left-section-pointer-events:none;--input-right-section-pointer-events:none;--input-left-section-size:var(--input-left-section-width);--input-right-section-size:var(--input-right-section-width);--input-fz:var(--font-size-sm);--input-size:var(--input-height);--input-resize:none;--section-y:1px;--left-section-start:1px;--left-section-border-radius:var(--input-radius) 0 0 var(--input-radius);--right-section-end:1px;--right-section-border-radius:0 var(--input-radius) var(--input-radius) 0;position:relative}.root[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--input-padding-inline-start:0;--input-padding-inline-end:0}.root[data-pointer]{--input-cursor:pointer}.root[data-multiline]{--input-padding-y-xs:4.5px;--input-padding-y-sm:5.5px;--input-padding-y-md:7px;--input-padding-y-lg:9.5px;--input-padding-y-xl:13px;--input-size:auto;--input-line-height:var(--line-height);--input-padding-y:var(--input-padding-y-sm)}.root[data-with-left-section]{--input-padding-inline-start:var(--input-left-section-size)}.root[data-with-right-section]{--input-padding-inline-end:var(--input-right-section-size)}.root{@mixin where-light{--input-disabled-bg:var(--color-gray-1);--input-disabled-color:var(--color-gray-6);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-gray-4);--input-bg:var(--color-white);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-gray-1);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root{@mixin where-dark{--input-disabled-bg:var(--color-dark-6);--input-disabled-color:var(--color-dark-2);&[data-variant=default]:not(&[data-error]){--input-bd:var(--color-dark-4);--input-bg:var(--color-dark-6);--input-bd-focus:var(--color-primary-filled)}&[data-variant=filled]:not(&[data-error]){--input-bd:transparent;--input-bg:var(--color-dark-5);--input-bd-focus:var(--color-primary-filled)}&[data-variant=unstyled]:not(&[data-error]){--input-bd:transparent;--input-bg:transparent;--input-bd-focus:transparent}}}.root[data-error]{--input-color:var(--color-error);--input-placeholder-color:var(--color-error);--input-section-color:var(--color-error);--input-bd:var(--color-error)}.root{@mixin where-rtl{--input-text-align:right;--left-section-border-radius:0 var(--input-radius) var(--input-radius) 0;--right-section-border-radius:var(--input-radius) 0 0 var(--input-radius)}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-bg);border:rem(1px) solid var(--input-bd);border-radius:var(--input-radius);color:var(--input-color);cursor:var(--input-cursor);display:block;font-family:var(--font-family),serif;font-size:var(--input-fz);height:var(--input-size);line-height:var(--input-line-height);min-height:var(--input-height);overflow:var(--input-overflow);padding-bottom:var(--input-padding-y,0);padding-inline-end:var(--input-padding-inline-end);padding-top:var(--input-padding-y,0);padding-inline-start:var(--input-padding-inline-start);resize:var(--input-resize,none);text-align:var(--input-text-align);transition:border-color .1s ease;width:100%;-webkit-tap-highlight-color:transparent}.input[data-no-overflow]{--input-overflow:hidden}.input:focus,.input:focus-within{--input-bd:var(--input-bd-focus);outline:none}[data-error] .input:focus,[data-error] .input:focus-within{--input-bd:var(--color-error)}.input::-moz-placeholder{color:var(--input-placeholder-color);opacity:1}.input::placeholder{color:var(--input-placeholder-color);opacity:1}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button,.input::-webkit-search-cancel-button,.input::-webkit-search-decoration,.input::-webkit-search-results-button,.input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input:disabled,.input:has(input:disabled),.input[data-disabled]{background-color:var(--input-disabled-bg);color:var(--input-disabled-color);cursor:not-allowed;opacity:.6}.input:-moz-read-only{cursor:default}.input:read-only{cursor:default}.section{align-items:center;border-radius:var(--section-border-radius);bottom:var(--section-y);color:var(--input-section-color,var(--color-dimmed));display:flex;inset-inline-end:var(--section-end);inset-inline-start:var(--section-start);justify-content:center;pointer-events:var(--section-pointer-events);position:absolute;top:var(--section-y);width:var(--section-size);z-index:1}.section[data-position=right]{--section-pointer-events:var(--input-right-section-pointer-events);--section-end:var(--right-section-end);--section-size:var(--input-right-section-size);--section-border-radius:var(--right-section-border-radius)}.section[data-position=left]{--section-pointer-events:var(--input-left-section-pointer-events);--section-start:var(--left-section-start);--section-size:var(--input-left-section-size);--section-border-radius:var(--left-section-border-radius)}
 </style>

package/dist/runtime/components/input/ui/input-base.vue.d.ts

@@ -3,6 +3,7 @@ import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface BaseInputProps extends Omit<WrapperContext, 'id'> {
     /** Styles API */
     classes?: Classes<'root' | 'section'>;
+    error?: boolean;
 }
 type __VLS_Slots = {
     leftSection: [];

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,
+  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
+					:auto-focus='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;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.18",
+	"version": "0.2.19",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",