nuance-ui 0.2.17 → 0.2.19

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/roving-focus/lib/context.d.ts

@@ -20,7 +20,7 @@ export declare const useProvideRovingFocus: (args_0: State) => {
     attr: string;
     list: Readonly<ShallowRef<HTMLElement | null>>;
     loop: boolean | undefined;
-    orientation: "both" | "horizontal" | "vertical" | undefined;
+    orientation: "horizontal" | "vertical" | "both" | undefined;
     init: () => number;
     focus: {
         (dir: "first" | "last"): void;
@@ -38,7 +38,7 @@ export declare const useRovingFocus: () => {
     attr: string;
     list: Readonly<ShallowRef<HTMLElement | null>>;
     loop: boolean | undefined;
-    orientation: "both" | "horizontal" | "vertical" | undefined;
+    orientation: "horizontal" | "vertical" | "both" | undefined;
     init: () => number;
     focus: {
         (dir: "first" | "last"): void;

package/dist/runtime/components/segmented-control.d.vue.ts

@@ -0,0 +1,46 @@
+import type { AnyString, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface SegmentedControlItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps extends BoxProps {
+    /** Items to render as controls */
+    data: (string | SegmentedControlItem)[];
+    /** Component size */
+    size?: NuanceSize | AnyString;
+    /** Border radius */
+    radius?: NuanceRadius;
+    /** Color from theme */
+    color?: NuanceColor;
+    /** Indicator `transition-duration` in ms */
+    transitionDuration?: number;
+    /** Indicator `transition-timing-function` */
+    transitionTimingFunction?: string;
+    /** Fills parent width */
+    fullWidth?: boolean;
+    /** Component orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Disables the component */
+    disabled?: boolean;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /**
+     * Show borders between items
+     * @default `true`
+     */
+    withItemsBorders?: boolean;
+}
+type __VLS_Props = SegmentedControlProps;
+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 | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/segmented-control.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { useVarsResolver } from "@nui/composables";
+import { getFontSize, getRadius, getSize, getThemeColor } from "@nui/utils";
+import { useTemplateRefsList } from "@vueuse/core";
+import { computed, useId, useTemplateRef } from "vue";
+import Box from "./box.vue";
+import FloatingIndicator from "./floating-indicator.vue";
+const {
+  is,
+  mod,
+  data,
+  size,
+  radius,
+  color,
+  transitionDuration,
+  transitionTimingFunction,
+  fullWidth,
+  orientation = "horizontal",
+  disabled,
+  readOnly,
+  withItemsBorders = true
+} = defineProps({
+  data: { type: Array, required: true },
+  size: { type: [String, Object], required: false },
+  radius: { type: [String, Number], required: false },
+  color: { type: null, required: false },
+  transitionDuration: { type: Number, required: false },
+  transitionTimingFunction: { type: String, required: false },
+  fullWidth: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readOnly: { type: Boolean, required: false },
+  withItemsBorders: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const value = defineModel({ type: String });
+const items = computed(
+  () => data.map((item) => typeof item === "string" ? { value: item, label: item } : item)
+);
+if (value.value === void 0) {
+  const first = items.value.find((i) => !i.disabled);
+  if (first)
+    value.value = first.value;
+}
+const groupName = useId();
+const rootRef = useTemplateRef("root");
+const labelRefs = useTemplateRefsList();
+const activeTarget = computed(() => {
+  if (value.value === void 0)
+    return null;
+  const index = items.value.findIndex((i) => i.value === value.value);
+  return index !== -1 ? labelRefs.value[index] ?? null : null;
+});
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--sc-radius": getRadius(radius),
+    "--sc-color": color ? getThemeColor(color, theme) : void 0,
+    "--sc-shadow": color ? void 0 : "var(--shadow-xs)",
+    "--sc-transition-duration": transitionDuration === void 0 ? void 0 : `${transitionDuration}ms`,
+    "--sc-transition-timing-function": transitionTimingFunction,
+    "--sc-padding": getSize(size, "sc-padding"),
+    "--sc-font-size": getFontSize(size)
+  }
+}));
+</script>
+
+<template>
+	<Box
+		:is
+		ref='root'
+		:style='style.root'
+		:class='$style.root'
+		:mod='[{
+  "full-width": fullWidth,
+  orientation,
+  disabled,
+  "with-items-borders": withItemsBorders
+}, mod]'
+		role='radiogroup'
+	>
+		<FloatingIndicator
+			v-if='typeof value !== void 0'
+			:target='activeTarget'
+			:parent='rootRef'
+			:class='$style.indicator'
+			:orientation
+		/>
+
+		<Box
+			v-for='item in items'
+			:key='item.value'
+			:class='$style.control'
+			:mod='{ active: value === item.value, orientation }'
+		>
+			<input
+				:id='`${groupName}-${item.value}`'
+				:key='`${item.value}-input`'
+				:class='$style.input'
+				type='radio'
+				:name='groupName'
+				:value='item.value'
+				:checked='value === item.value'
+				:disabled='disabled || item.disabled'
+				@change='!readOnly && (value = item.value)'
+			>
+
+			<Box
+				is='label'
+				:ref='labelRefs.set'
+				:for='`${groupName}-${item.value}`'
+				:class='$style.label'
+				:style='{
+  "--sc-label-color": !!color && "var(--color-white)"
+}'
+				:mod='{
+  "active": value === item.value && !(disabled || item.disabled),
+  "disabled": disabled || item.disabled,
+  "read-only": readOnly
+}'
+			>
+				<span :class='$style.innerLabel'>{{ item.label }}</span>
+			</Box>
+		</Box>
+	</Box>
+</template>
+
+<style module>
+.root{--sc-padding-xs:2px 6px;--sc-padding-sm:3px 10px;--sc-padding-md:4px 14px;--sc-padding-lg:7px 16px;--sc-padding-xl:10px 20px;--sc-padding:var(--sc-padding-sm);--sc-radius:var(--radius-md);--sc-transition-duration:200ms;--sc-transition-timing-function:ease;--sc-font-size:var(--font-size-sm);border-radius:var(--sc-radius,var(--radius-md));display:inline-flex;flex-direction:row;overflow:hidden;padding:4px;position:relative;width:auto}.root:where([data-full-width]){display:flex}.root:where([data-orientation=vertical]){display:flex;flex-direction:column;width:-moz-max-content;width:max-content}.root:where([data-orientation=vertical]):where([data-full-width]){width:auto}.root{@mixin where-light{background-color:var(--color-gray-1)}}.root{@mixin where-dark{background-color:var(--color-dark-8)}}.indicator{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);display:block;position:absolute;z-index:1}.indicator:where([data-orientation=horizontal]){bottom:4px;top:4px}.indicator:where([data-orientation=vertical]){left:4px;right:4px}.indicator{@mixin where-light{background-color:var(--sc-color,var(--color-white));box-shadow:var(--sc-shadow,none)}}.indicator{@mixin where-dark{background-color:var(--sc-color,var(--color-dark-5));box-shadow:none}}.label{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);cursor:pointer;display:block;font-size:var(--sc-font-size);font-weight:500;outline:var(--segmented-control-outline,none);overflow:hidden;padding:var(--sc-padding);text-align:center;text-overflow:ellipsis;transition:color var(--sc-transition-duration) var(--sc-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;@mixin where-light{color:var(--color-gray-7)}@mixin where-dark{color:var(--color-dark-1)}}.label:where([data-read-only]){cursor:default}.label:where([data-active]){@mixin where-light{color:var(--sc-label-color,var(--color-black))}@mixin where-dark{color:var(--sc-label-color,var(--color-white))}}.label:where([data-active]):before{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);content:"";inset:0;position:absolute;z-index:0}.root:where([data-initialized]) .label:where([data-active]):before{display:none}.label:where([data-active]):before{@mixin where-light{box-shadow:var(--sc-shadow,none)}}.label:where([data-active]):before{@mixin where-dark{box-shadow:none}}.label:where([data-active])[data-disabled],fieldset:disabled .label:where([data-active]){color:var(--color-disabled-text);cursor:not-allowed}.label:where(:not([data-disabled],[data-active],[data-read-only])){@mixin hover{@mixin where-light{color:var(--color-black)}@mixin where-dark{color:var(--color-white)}}}fieldset:disabled .label{@mixin hover{color:var(--color-disabled-text)!important}}.input{height:0;opacity:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}.input:focus-visible+.label{--segmented-control-outline:2px solid var(--color-primary-filled)}.control{flex:1;position:relative;transition:border-color var(--sc-transition-duration) var(--sc-transition-timing-function);z-index:2}.root[data-with-items-borders] :where(.control):before{background-color:var(--separator-color);bottom:0;content:"";inset-inline-start:0;position:absolute;top:0;transition:background-color var(--sc-transition-duration) var(--sc-transition-timing-function);width:1px}.control[data-orientation=vertical]:before{bottom:auto;height:1px;top:0;inset-inline:0;width:auto}.control:first-of-type:before,[data-mantine-color-scheme] .control[data-active]+.control:before,[data-mantine-color-scheme] .control[data-active]:before{--separator-color:transparent}.control{@mixin where-light{--separator-color:var(--color-gray-3)}}.control{@mixin where-dark{--separator-color:var(--color-dark-4)}}.innerLabel{position:relative;z-index:2}
+</style>

package/dist/runtime/components/segmented-control.vue.d.ts

@@ -0,0 +1,46 @@
+import type { AnyString, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface SegmentedControlItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps extends BoxProps {
+    /** Items to render as controls */
+    data: (string | SegmentedControlItem)[];
+    /** Component size */
+    size?: NuanceSize | AnyString;
+    /** Border radius */
+    radius?: NuanceRadius;
+    /** Color from theme */
+    color?: NuanceColor;
+    /** Indicator `transition-duration` in ms */
+    transitionDuration?: number;
+    /** Indicator `transition-timing-function` */
+    transitionTimingFunction?: string;
+    /** Fills parent width */
+    fullWidth?: boolean;
+    /** Component orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Disables the component */
+    disabled?: boolean;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /**
+     * Show borders between items
+     * @default `true`
+     */
+    withItemsBorders?: boolean;
+}
+type __VLS_Props = SegmentedControlProps;
+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 | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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;
+    };
+};