nuance-ui 0.1.1

package/dist/runtime/components/combobox/lib/use-combobox/handlers.js

@@ -0,0 +1,82 @@
+import { nextTick } from "vue";
+import { getFirstIndex, getNextIndex, getPreviousIndex } from "./get-index.js";
+export function clearSelected({ listId, attrs }) {
+  const selected = document.querySelector(`#${listId} [${attrs.selected}]`);
+  selected?.removeAttribute(attrs.selected);
+  selected?.removeAttribute("aria-selected");
+}
+export function selectOption(ix, {
+  listId,
+  attrs,
+  scrollBehavior,
+  clearFn
+}) {
+  const items = document.querySelectorAll(`#${listId} [${attrs.option}]`);
+  if (!items)
+    return;
+  const nextIndex = ix >= items.length ? 0 : ix < 0 ? items.length - 1 : ix;
+  if (items?.[nextIndex] && !items[nextIndex].hasAttribute(attrs.disabled)) {
+    clearFn(listId);
+    const item = items[nextIndex];
+    item.setAttribute(attrs.selected, "true");
+    item.setAttribute("aria-selected", "true");
+    item.scrollIntoView({ block: "nearest", behavior: scrollBehavior });
+    return { ix: nextIndex, value: item.id };
+  }
+  return { ix: nextIndex, value: null };
+}
+export function selectActiveOption({
+  listId,
+  attrs,
+  selectFn
+}) {
+  const activeOption = document.querySelector(`#${listId} [${attrs.active}]`);
+  if (activeOption) {
+    const items = document.querySelectorAll(`#${listId} [${attrs.option}]`);
+    const index = Array.from(items).findIndex((option) => option === activeOption);
+    return selectFn(index);
+  }
+  return selectFn(0);
+}
+export function selectNextOption(ix, {
+  listId,
+  loop,
+  attrs,
+  selectFn
+}) {
+  return selectFn(getNextIndex(
+    ix,
+    document.querySelectorAll(`#${listId} [${attrs.option}]`),
+    loop,
+    attrs.disabled
+  ));
+}
+export function selectPrevOption(ix, {
+  listId,
+  loop,
+  attrs,
+  selectFn
+}) {
+  return selectFn(getPreviousIndex(
+    ix,
+    document.querySelectorAll(`#${listId} [${attrs.option}]`),
+    loop,
+    attrs.disabled
+  ));
+}
+export function selectFirstOption({ listId, attrs, selectFn }) {
+  return selectFn(
+    getFirstIndex(document.querySelectorAll(`#${listId} [${attrs.option}]`), attrs.disabled)
+  );
+}
+export function updateSelectedOptionIx(target = "selected", { listId, attrs, scrollIntoView, scrollBehavior }) {
+  let ix = -1;
+  nextTick(() => {
+    const items = document.querySelectorAll(`#${listId} [${attrs.option}]`);
+    const index = Array.from(items).findIndex((option) => option.hasAttribute(attrs[target]));
+    ix = index;
+    if (scrollIntoView)
+      items[index]?.scrollIntoView({ block: "nearest", behavior: scrollBehavior });
+  });
+  return ix;
+}

package/dist/runtime/components/combobox/lib/use-combobox/index.d.ts

@@ -0,0 +1 @@
+export { type ComboboxStore, useCombobox } from './use-combobox.js';

package/dist/runtime/components/combobox/lib/use-combobox/index.js

@@ -0,0 +1 @@
+export { useCombobox } from "./use-combobox.js";

package/dist/runtime/components/combobox/lib/use-combobox/use-combobox.d.ts

@@ -0,0 +1,70 @@
+import type { ModelRef, ShallowRef } from 'vue';
+import type { ComboboxDropdownEventSource } from '../../types/index.js';
+import type { ComboboxAttrs } from '../const.js';
+export interface ComboboxStore {
+    /** Id passed to dropdown */
+    listId: string;
+    /** Opens dropdown */
+    openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
+    /** Closes dropdown */
+    closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
+    /** Toggles dropdown opened state */
+    toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
+    /** Returns currently selected option index or `-1` if none of the options is selected */
+    getSelectedOptionIx: () => number;
+    /** Selects `Combobox.Option` by index */
+    selectOption: (index: number) => void;
+    /**
+     * Selects first `Combobox.Option` with `active` prop.
+     *  If there are no such options, the function does nothing.
+     */
+    selectActiveOption: () => string | null;
+    /**
+     * Selects first `Combobox.Option` that is not disabled.
+     *  If there are no such options, the function does nothing.
+     */
+    selectFirstOption: () => string | null;
+    /**
+     * Selects next `Combobox.Option` that is not disabled.
+     *  If the current option is the last one, the function selects first option, if `loop` is true.
+     */
+    selectNextOption: () => string | null;
+    /**
+     * Selects previous `Combobox.Option` that is not disabled.
+     *  If the current option is the first one, the function selects last option, if `loop` is true.
+     */
+    selectPrevOption: () => string | null;
+    /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */
+    resetSelectedOption: () => void;
+    /**
+     * Triggers `onClick` event of selected option.
+     *  If there is no selected option, the function does nothing.
+     */
+    clickSelectedOption: () => void;
+    /**
+     * Updates selected option index to currently selected or active option.
+     *  The function is required to be used with searchable components to update selected option index
+     *  when options list changes based on search query.
+     */
+    updateSelectedOptionIx: (target?: 'active' | 'selected', options?: {
+        scrollIntoView?: boolean;
+    }) => void;
+    /** Ref of `Combobox.Search` input */
+    searchRef: ShallowRef<HTMLInputElement | null>;
+    /** Moves focus to `Combobox.Search` input */
+    focusSearch: () => void;
+    /** Ref of the target element */
+    targetRef: ShallowRef<HTMLElement | null>;
+    /** Moves focus to the target element */
+    focusTarget: () => void;
+}
+export declare function useCombobox({ onSelect, onClear, onCloseDropdown, onOpenDropdown, opened, ..._options }: {
+    attrs?: ComboboxAttrs;
+    scrollBehavior?: ScrollBehavior;
+    loop?: boolean;
+    onSelect?: (ix: number) => void;
+    onClear?: () => void;
+    onOpenDropdown?: (eventSource: ComboboxDropdownEventSource) => void;
+    onCloseDropdown?: (eventSource: ComboboxDropdownEventSource) => void;
+    opened: ModelRef<boolean>;
+}): ComboboxStore;

package/dist/runtime/components/combobox/lib/use-combobox/use-combobox.js

@@ -0,0 +1,97 @@
+import { unrefElement } from "@vueuse/core";
+import { nextTick, shallowRef, useId } from "vue";
+import { COMBOBOX_ATTRS } from "../const.js";
+import {
+  clearSelected,
+  selectActiveOption,
+  selectFirstOption,
+  selectNextOption,
+  selectOption,
+  selectPrevOption,
+  updateSelectedOptionIx
+} from "./handlers.js";
+export function useCombobox({ onSelect, onClear, onCloseDropdown, onOpenDropdown, opened, ..._options }) {
+  const listId = useId();
+  const targetRef = shallowRef(null);
+  const searchRef = shallowRef(null);
+  const openDropdown = (eventSource = "unknown") => {
+    if (!opened.value) {
+      opened.value = true;
+      onOpenDropdown?.(eventSource);
+    }
+  };
+  const closeDropdown = (eventSource = "unknown") => {
+    if (opened.value) {
+      opened.value = false;
+      onCloseDropdown?.(eventSource);
+    }
+  };
+  const toggleDropdown = (eventSource = "unknown") => {
+    if (opened.value)
+      closeDropdown(eventSource);
+    else
+      openDropdown(eventSource);
+  };
+  const options = {
+    attrs: _options?.attrs ?? COMBOBOX_ATTRS,
+    scrollBehavior: _options?.scrollBehavior ?? "instant",
+    loop: _options?.loop ?? true,
+    listId,
+    selectFn: (ix) => ix ? `${ix}` : null
+  };
+  let selectedOptionIx = -1;
+  const getSelectedIx = () => selectedOptionIx;
+  const clear = () => {
+    clearSelected(options);
+    onClear?.();
+  };
+  const select = (ix) => {
+    const res = selectOption(ix, { ...options, clearFn: clear });
+    if (res) {
+      selectedOptionIx = res.ix;
+      onSelect?.(res.ix);
+      return res.value;
+    }
+    return null;
+  };
+  options.selectFn = select;
+  const selectActive = () => selectActiveOption(options);
+  const selectNext = () => selectNextOption(getSelectedIx(), options);
+  const selectPrev = () => selectPrevOption(getSelectedIx(), options);
+  const selectFirst = () => selectFirstOption(options);
+  const updateSelectedIx = (target) => updateSelectedOptionIx(target, options);
+  const resetSelectedOption = () => {
+    selectedOptionIx = -1;
+    clear();
+  };
+  const clickSelectedOption = () => {
+    const items = document.querySelectorAll(`#${options.listId} [${options.attrs.option}]`);
+    const item = items?.[selectedOptionIx];
+    item?.click();
+  };
+  const focusSearch = () => {
+    nextTick(() => unrefElement(searchRef)?.focus());
+  };
+  const focusTarget = () => {
+    nextTick(() => unrefElement(targetRef)?.focus());
+  };
+  return {
+    listId,
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    selectOption: select,
+    selectActiveOption: selectActive,
+    selectNextOption: selectNext,
+    selectPrevOption: selectPrev,
+    selectFirstOption: selectFirst,
+    resetSelectedOption,
+    clickSelectedOption,
+    getSelectedOptionIx: getSelectedIx,
+    targetRef,
+    focusTarget,
+    searchRef,
+    focusSearch,
+    updateSelectedOptionIx: updateSelectedIx
+  };
+}

package/dist/runtime/components/combobox/lib/use-combobox-data/get-parsed-combobox-data.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxData, ComboboxItemExt, ComboboxParsedItem } from '../../types/index.js';
+export declare function getParsedComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext> | undefined): ComboboxParsedItem<Value, Ext>[];

package/dist/runtime/components/combobox/lib/use-combobox-data/get-parsed-combobox-data.js

@@ -0,0 +1,23 @@
+import { isOptionsGroup } from "../utils/index.js";
+function parseItem(item) {
+  if (typeof item === "number")
+    return { value: item.toString(), label: item.toString() };
+  if (isOptionsGroup(item)) {
+    return {
+      group: item.group,
+      items: item.items.map((i) => parseItem(i))
+    };
+  }
+  if ("value" in item && !("label" in item)) {
+    return {
+      ...item,
+      label: item.value
+    };
+  }
+  return item;
+}
+export function getParsedComboboxData(data) {
+  if (!data)
+    return [];
+  return data.map((item) => parseItem(item));
+}

package/dist/runtime/components/combobox/lib/use-combobox-data/index.d.ts

@@ -0,0 +1 @@
+export { useComboboxData } from './use-combobox-data.js';

package/dist/runtime/components/combobox/lib/use-combobox-data/index.js

@@ -0,0 +1 @@
+export { useComboboxData } from "./use-combobox-data.js";

package/dist/runtime/components/combobox/lib/use-combobox-data/use-combobox-data.d.ts

@@ -0,0 +1,7 @@
+import type { ComboboxData, ComboboxItem, ComboboxItemExt, ComboboxParsedItem } from '../../types/index.js';
+export declare function getOptionsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxParsedItem<Value, Ext>[]): Record<string, ComboboxItem<Value, Ext>>;
+export declare function getLabelsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxParsedItem<Value, Ext>[]): Record<string, string>;
+export declare function useComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext>): {
+    parsed: import("vue").ComputedRef<ComboboxParsedItem<Value, Ext>[]>;
+    options: import("vue").ComputedRef<Record<string, ComboboxItem<Value, Ext>>>;
+};

package/dist/runtime/components/combobox/lib/use-combobox-data/use-combobox-data.js

@@ -0,0 +1,23 @@
+import { computed } from "vue";
+import { getParsedComboboxData } from "./get-parsed-combobox-data.js";
+export function getOptionsLockup(options) {
+  return options.reduce((acc, item) => {
+    if ("group" in item)
+      return { ...acc, ...getOptionsLockup(item.items) };
+    acc[item.value] = item;
+    return acc;
+  }, {});
+}
+export function getLabelsLockup(options) {
+  return options.reduce((acc, item) => {
+    if ("group" in item)
+      return { ...acc, ...getLabelsLockup(item.items) };
+    acc[item.label] = item;
+    return acc;
+  }, {});
+}
+export function useComboboxData(data) {
+  const parsed = computed(() => getParsedComboboxData(data));
+  const options = computed(() => getOptionsLockup(parsed.value));
+  return { parsed, options };
+}

package/dist/runtime/components/combobox/lib/use-combobox-target.d.ts

@@ -0,0 +1,25 @@
+interface UseComboboxTargetPropsInput {
+    targetType: 'input' | 'button' | undefined;
+    withAriaAttributes: boolean | undefined;
+    withKeyboardNavigation: boolean | undefined;
+    withExpandedAttribute: boolean | undefined;
+    autoComplete: string | undefined;
+}
+export declare function useComboboxTarget({ targetType, withAriaAttributes, autoComplete, withExpandedAttribute, withKeyboardNavigation, }: UseComboboxTargetPropsInput): import("vue").ComputedRef<{
+    'aria-haspopup': "listbox";
+    'aria-expanded': boolean | undefined;
+    'aria-controls': string | undefined;
+    'aria-activedescendant': string | undefined;
+    autoComplete: string | undefined;
+    'data-expanded': true | undefined;
+    'data-stop-propagation': true | undefined;
+} | {
+    'aria-haspopup'?: undefined;
+    'aria-expanded'?: undefined;
+    'aria-controls'?: undefined;
+    'aria-activedescendant'?: undefined;
+    autoComplete?: undefined;
+    'data-expanded'?: undefined;
+    'data-stop-propagation'?: undefined;
+}>;
+export {};

package/dist/runtime/components/combobox/lib/use-combobox-target.js

@@ -0,0 +1,65 @@
+import { onKeyStroke } from "@vueuse/core";
+import { computed, shallowRef } from "vue";
+import { useComboboxState } from "./context.js";
+export function useComboboxTarget({
+  targetType,
+  withAriaAttributes,
+  autoComplete,
+  withExpandedAttribute,
+  withKeyboardNavigation
+}) {
+  const ctx = useComboboxState();
+  const selected = shallowRef(null);
+  onKeyStroke(["ArrowUp", "ArrowDown", "Enter", "Escape", "Space"], (event) => {
+    if (ctx.readOnly || !withKeyboardNavigation)
+      return;
+    if (event.isComposing)
+      return;
+    event.preventDefault();
+    event.stopPropagation();
+    switch (event.code) {
+      case "ArrowUp":
+      case "ArrowDown": {
+        if (!ctx.opened.value) {
+          ctx.store.openDropdown("keyboard");
+          selected.value = ctx.store.selectActiveOption();
+          ctx.store.updateSelectedOptionIx("selected", { scrollIntoView: true });
+        } else {
+          selected.value = event.code === "ArrowDown" ? ctx.store.selectNextOption() : ctx.store.selectPrevOption();
+        }
+        break;
+      }
+      case "Enter":
+      case "NumpadEnter": {
+        if (event.keyCode === 229)
+          break;
+        const selectedIx = ctx.store.getSelectedOptionIx();
+        if (ctx.opened.value && selectedIx !== -1)
+          ctx.store.clickSelectedOption();
+        else if (targetType === "button")
+          ctx.store.openDropdown("keyboard");
+        break;
+      }
+      case "Escape": {
+        ctx.store.closeDropdown("keyboard");
+        break;
+      }
+      case "Space": {
+        if (targetType === "button")
+          ctx.store.toggleDropdown("keyboard");
+        break;
+      }
+      default:
+        break;
+    }
+  }, { target: ctx.store.targetRef });
+  return computed(() => withAriaAttributes ? {
+    "aria-haspopup": "listbox",
+    "aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.opened.value) : void 0,
+    "aria-controls": ctx.opened.value && ctx.store.listId ? ctx.store.listId : void 0,
+    "aria-activedescendant": ctx.opened.value ? selected.value || void 0 : void 0,
+    autoComplete,
+    "data-expanded": ctx.opened.value || void 0,
+    "data-stop-propagation": ctx.opened.value || void 0
+  } : {});
+}

package/dist/runtime/components/combobox/lib/utils/default-option-filter.d.ts

@@ -0,0 +1,7 @@
+import type { ComboboxItemExt, ComboboxParsedItem } from '../../types/index.js';
+export interface FilterOptionsInput<Value extends string = string, Ext extends ComboboxItemExt = object> {
+    options: ComboboxParsedItem<Value, Ext>[];
+    search: string;
+    limit: number;
+}
+export declare function defaultOptionsFilter<Value extends string = string, Ext extends ComboboxItemExt = object>({ options, search, limit, }: FilterOptionsInput<Value, Ext>): ComboboxParsedItem<Value, Ext>[];

package/dist/runtime/components/combobox/lib/utils/default-option-filter.js

@@ -0,0 +1,27 @@
+import { isOptionsGroup } from "./is-options-group.js";
+export function defaultOptionsFilter({
+  options,
+  search,
+  limit
+}) {
+  const parsedSearch = search.trim().toLowerCase();
+  const result = [];
+  for (let i = 0; i < options.length; i += 1) {
+    const item = options[i];
+    if (result.length === limit)
+      return result;
+    if (isOptionsGroup(item)) {
+      result.push({
+        group: item.group,
+        items: defaultOptionsFilter({
+          options: item.items,
+          search,
+          limit: limit - result.length
+        })
+      });
+    }
+    if (!isOptionsGroup(item) && item.label.toLowerCase().includes(parsedSearch))
+      result.push(item);
+  }
+  return result;
+}

package/dist/runtime/components/combobox/lib/utils/index.d.ts

@@ -0,0 +1,5 @@
+import type { ComboboxItem, ComboboxItemExt } from '../../types/index.js';
+export * from './default-option-filter.js';
+export { isEmptyComboboxData } from './is-empty-combobox-data.js';
+export { isOptionsGroup } from './is-options-group.js';
+export declare function isValueChecked<Value extends string = string, Ext extends ComboboxItemExt = object>(value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | undefined | null, optionValue: ComboboxItem<Value, Ext>): boolean;

package/dist/runtime/components/combobox/lib/utils/index.js

@@ -0,0 +1,6 @@
+export * from "./default-option-filter.js";
+export { isEmptyComboboxData } from "./is-empty-combobox-data.js";
+export { isOptionsGroup } from "./is-options-group.js";
+export function isValueChecked(value, optionValue) {
+  return Array.isArray(value) ? value.some(({ value: value2 }) => value2 === optionValue.value) : value?.value === optionValue.value;
+}

package/dist/runtime/components/combobox/lib/utils/is-empty-combobox-data.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxParsedItem } from '../../types/index.js';
+export declare function isEmptyComboboxData(data: ComboboxParsedItem[]): boolean;

package/dist/runtime/components/combobox/lib/utils/is-empty-combobox-data.js

@@ -0,0 +1,11 @@
+export function isEmptyComboboxData(data) {
+  if (data.length === 0)
+    return true;
+  for (const item of data) {
+    if (!("group" in item))
+      return false;
+    if (item.items.length > 0)
+      return false;
+  }
+  return true;
+}

package/dist/runtime/components/combobox/lib/utils/is-options-group.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxItemExt, ComboboxParsedItem, ComboboxParsedItemGroup } from '../../types/index.js';
+export declare function isOptionsGroup<Value extends string = string, Ext extends ComboboxItemExt = object>(item: ComboboxParsedItem<Value, Ext>): item is ComboboxParsedItemGroup<Value, Ext>;

package/dist/runtime/components/combobox/lib/utils/is-options-group.js

@@ -0,0 +1,3 @@
+export function isOptionsGroup(item) {
+  return "group" in item;
+}

package/dist/runtime/components/combobox/types/index.d.ts

@@ -0,0 +1,19 @@
+import type { ComboboxItem, ComboboxItemExt, ComboboxItemGroup } from './item.js';
+export type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';
+export type ComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object> = (ComboboxItem<Value, Ext> | ComboboxItemGroup<Value, Ext>)[];
+export interface ComboboxRootEmits {
+    clear: [];
+    select: [number];
+    /** Called when dropdown opens with event source: keyboard, mouse or unknown */
+    open: [ComboboxDropdownEventSource];
+    /** Called when dropdown closes with event source: keyboard, mouse or unknown */
+    close: [ComboboxDropdownEventSource];
+    /** Called when item is selected with the `Enter` key or by clicking it */
+    submit: [string, ComboboxItem];
+}
+export interface ComboboxItemProps {
+    withCheckIcon?: boolean;
+    checkIcon?: string;
+    iconPosition?: 'left' | 'right';
+}
+export * from './item.js';

package/dist/runtime/components/combobox/types/index.js

@@ -0,0 +1 @@
+export * from "./item.js";

package/dist/runtime/components/combobox/types/item.d.ts

@@ -0,0 +1,22 @@
+interface BaseComboboxFields {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export type ComboboxItemExt = Omit<object, keyof BaseComboboxFields>;
+export type ComboboxItem<Value extends string = string, Ext extends ComboboxItemExt = object> = BaseComboboxFields & {
+    value: Value;
+} & Ext;
+export interface ComboboxParsedItemGroup<Value extends string = string, Ext extends ComboboxItemExt = object> {
+    group: string;
+    icon?: string;
+    items: ComboboxItem<Value, Ext>[];
+}
+export type ComboboxParsedItem<Value extends string = string, Ext extends ComboboxItemExt = object> = ComboboxItem<Value, Ext> | ComboboxParsedItemGroup<Value, Ext>;
+export interface ComboboxItemGroup<Value extends string = string, Ext extends ComboboxItemExt = object> {
+    group: string;
+    icon?: string;
+    items: ComboboxItem<Value, Ext>[];
+}
+export {};

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

@@ -0,0 +1,19 @@
+import type { UiKitSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface ContainerProps extends /* @vue-ignore */ BoxProps {
+    size?: UiKitSize | string | number;
+    fluid?: boolean;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & 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/container.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { getSize } from "@nui/utils";
+import { computed } from "vue";
+import Box from "./box.vue";
+const {
+  is,
+  mod,
+  fluid,
+  size
+} = defineProps({
+  size: { type: [String, Number], required: false },
+  fluid: { type: Boolean, required: false }
+});
+const style = computed(() => ({
+  "--container-size": fluid ? void 0 : getSize(size, "container-size")
+}));
+const _mod = computed(() => [{ fluid }, mod]);
+</script>
+
+<template>
+	<Box
+		:is
+		:style
+		:mod='_mod'
+		:class='$style.root'
+	>
+		<slot />
+	</Box>
+</template>
+
+<style module>
+.root{--container-size-xs:var(--breakpoint-xs);--container-size-sm:var(--breakpoint-sm);--container-size-md:var(--breakpoint-md);--container-size-lg:var(--breakpoint-lg);--container-size-xl:var(--breakpoint-xl);--container-size:var(--container-size-md);margin-inline:auto;max-width:var(--container-size);padding-inline:var(--spacing-md)}.root:where([data-fluid]){max-width:100%}
+</style>

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

@@ -0,0 +1,19 @@
+import type { UiKitSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface ContainerProps extends /* @vue-ignore */ BoxProps {
+    size?: UiKitSize | string | number;
+    fluid?: boolean;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & 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/dialog/dialog-close-button.d.vue.ts

@@ -0,0 +1,14 @@
+import type { ActionIconProps } from '../action-icon/index.js';
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & 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/dialog/dialog-close-button.vue

@@ -0,0 +1,28 @@
+<script setup>
+import ActionIcon from "../action-icon/action-icon.vue";
+import { useDialogState } from "./lib";
+const { variant = "subtle", icon = "gravity-ui:xmark", ...props } = defineProps({
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  gradient: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  radius: { type: [String, Number], required: false },
+  classes: { type: Object, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  icon: { type: String, required: false }
+});
+const close = useDialogState();
+</script>
+
+<template>
+	<ActionIcon
+		:icon
+		:variant
+		tabindex='0'
+		v-bind='props'
+		@click='close'
+	>
+		<slot />
+	</ActionIcon>
+</template>