nuance-ui 0.1.1

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

@@ -0,0 +1,45 @@
+import type { ComboboxData, ComboboxItem, ComboboxItemExt, ComboboxTargetProps } from '../combobox/index.js';
+import type { InputProps } from '../input/index.js';
+export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends /* @vue-ignore */ Omit<InputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'>, Pick<ComboboxTargetProps, 'autoComplete'> {
+    data: ComboboxData<Value, Ext>;
+    /** Determines whether the select should be searchable @default `false` */
+    searchable?: boolean;
+    /** If set, the check icon is displayed near the selected option label @default `true` */
+    withCheckIcon?: boolean;
+    /** Position of the check icon relative to the option label @default `'left'` */
+    iconPosition?: 'left' | 'right';
+    /** Message displayed when no option matches the current search query when the `searchable` prop is set or there is no data */
+    nothingFoundMessage?: string;
+    /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */
+    allowDeselect?: boolean;
+    /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    limit?: number;
+}
+declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(SelectProps<Value, Ext> & {
+        open?: boolean;
+        modelValue?: ComboboxItem<Value, Ext> | null;
+        search?: string;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        label?: (props: {}) => any;
+    } & {
+        description?: (props: {}) => any;
+    } & {
+        error?: (props: {}) => any;
+    } & {
+        leftSection?: (props: {}) => any;
+    } & {
+        rightSection?: (props: {}) => any;
+    };
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export { useTabsState } from './lib.js';

package/dist/runtime/components/tabs/index.js

@@ -0,0 +1 @@
+export { useTabsState } from "./lib.js";

package/dist/runtime/components/tabs/lib.d.ts

@@ -0,0 +1,142 @@
+import type { ModelRef } from 'vue';
+export interface TabsContext {
+    /**
+     * Unique identifier for the entire tabs group.
+     * Used as a prefix for generating accessible tab and panel IDs.
+     */
+    id: string;
+    /**
+     * Two-way bound active tab value.
+     * `null` means no tab is selected (only possible when `allowTabDeactivation` is `true`).
+     */
+    active: ModelRef<string | null>;
+    /** Whether keyboard navigation should loop from last to first (and vice versa). */
+    loop: boolean;
+    /** Whether pressing Enter/Space on a focused tab should activate it. */
+    activateTabWithKeyboard: boolean;
+    /**
+     * Allows clicking an already active tab to deactivate it (sets `active` to `null`).
+     * Useful for "deselectable" tabs.
+     */
+    allowTabDeactivation: boolean;
+    /** Visual variant of the tabs component. */
+    variant: 'default' | 'pills' | 'outline';
+    /** Inverted color scheme (typically used on dark backgrounds). */
+    inverted: boolean;
+    /**
+     * Keep tab panels mounted in the DOM when inactive.
+     * Useful for preserving state, animations, or SEO.
+     */
+    keepMounted: boolean;
+    /**
+     * For vertical tabs: placement of the tab list relative to the panels.
+     * `'left'` → tabs on the left, `'right'` → tabs on the right.
+     */
+    placement: 'right' | 'left';
+    /** Explicit orientation. Usually inferred from layout, but can be forced. */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Generates a unique accessible ID for a tab element based on its value.
+     * @param value - The logical value of the tab (e.g. `'profile'`, `'settings'`)
+     * @returns Accessible ID string (e.g. `'tabs-abc123-tab-profile'`)
+     */
+    getTabId: (value: string) => string;
+    /**
+     * Generates a unique accessible ID for a tab panel based on its value.
+     * @param value - The logical value of the tab
+     * @returns Accessible ID string (e.g. `'tabs-abc123-panel-profile'`)
+     */
+    getPanelId: (value: string) => string;
+}
+export declare const useProvideTabsContext: (args_0: TabsContext) => {
+    active: ModelRef<string | null>;
+    onUpdate: (tab: string) => string | null;
+    /**
+     * Unique identifier for the entire tabs group.
+     * Used as a prefix for generating accessible tab and panel IDs.
+     */
+    id: string;
+    /** Whether keyboard navigation should loop from last to first (and vice versa). */
+    loop: boolean;
+    /** Whether pressing Enter/Space on a focused tab should activate it. */
+    activateTabWithKeyboard: boolean;
+    /** Visual variant of the tabs component. */
+    variant: "default" | "pills" | "outline";
+    /** Inverted color scheme (typically used on dark backgrounds). */
+    inverted: boolean;
+    /**
+     * Keep tab panels mounted in the DOM when inactive.
+     * Useful for preserving state, animations, or SEO.
+     */
+    keepMounted: boolean;
+    /**
+     * For vertical tabs: placement of the tab list relative to the panels.
+     * `'left'` → tabs on the left, `'right'` → tabs on the right.
+     */
+    placement: "right" | "left";
+    /** Explicit orientation. Usually inferred from layout, but can be forced. */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Generates a unique accessible ID for a tab element based on its value.
+     * @param value - The logical value of the tab (e.g. `'profile'`, `'settings'`)
+     * @returns Accessible ID string (e.g. `'tabs-abc123-tab-profile'`)
+     */
+    getTabId: (value: string) => string;
+    /**
+     * Generates a unique accessible ID for a tab panel based on its value.
+     * @param value - The logical value of the tab
+     * @returns Accessible ID string (e.g. `'tabs-abc123-panel-profile'`)
+     */
+    getPanelId: (value: string) => string;
+};
+/**
+ * Consumes the {@link NTabsRoot} context.
+ *
+ * Returns the full context plus a safe `onUpdate` handler that respects
+ * the `allowTabDeactivation` option.
+ *
+ * @remarks
+ * Должен вызываться только внутри компонента, который является потомком {@link NTabsRoot}.
+ * Предоставляет доступ к состоянию и методам управления вкладками.
+ */
+export declare const useTabsState: () => {
+    active: ModelRef<string | null>;
+    onUpdate: (tab: string) => string | null;
+    /**
+     * Unique identifier for the entire tabs group.
+     * Used as a prefix for generating accessible tab and panel IDs.
+     */
+    id: string;
+    /** Whether keyboard navigation should loop from last to first (and vice versa). */
+    loop: boolean;
+    /** Whether pressing Enter/Space on a focused tab should activate it. */
+    activateTabWithKeyboard: boolean;
+    /** Visual variant of the tabs component. */
+    variant: "default" | "pills" | "outline";
+    /** Inverted color scheme (typically used on dark backgrounds). */
+    inverted: boolean;
+    /**
+     * Keep tab panels mounted in the DOM when inactive.
+     * Useful for preserving state, animations, or SEO.
+     */
+    keepMounted: boolean;
+    /**
+     * For vertical tabs: placement of the tab list relative to the panels.
+     * `'left'` → tabs on the left, `'right'` → tabs on the right.
+     */
+    placement: "right" | "left";
+    /** Explicit orientation. Usually inferred from layout, but can be forced. */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Generates a unique accessible ID for a tab element based on its value.
+     * @param value - The logical value of the tab (e.g. `'profile'`, `'settings'`)
+     * @returns Accessible ID string (e.g. `'tabs-abc123-tab-profile'`)
+     */
+    getTabId: (value: string) => string;
+    /**
+     * Generates a unique accessible ID for a tab panel based on its value.
+     * @param value - The logical value of the tab
+     * @returns Accessible ID string (e.g. `'tabs-abc123-panel-profile'`)
+     */
+    getPanelId: (value: string) => string;
+};

package/dist/runtime/components/tabs/lib.js

@@ -0,0 +1,18 @@
+import { createStrictInjection } from "@nui/helpers";
+const [
+  useProvide,
+  useState
+] = createStrictInjection(({ allowTabDeactivation, active, ...state }) => ({
+  ...state,
+  active,
+  onUpdate: (tab) => {
+    if (allowTabDeactivation)
+      return active.value = active.value === tab ? null : tab;
+    return active.value = tab;
+  }
+}), {
+  name: "TabsContext",
+  injectionKey: Symbol("TabsContext")
+});
+export const useProvideTabsContext = useProvide;
+export const useTabsState = useState;

package/dist/runtime/components/tabs/tabs-list.d.vue.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'vue';
+import type { BoxProps } from '../box.vue.js';
+export interface TabsListProps extends /* @vue-ignore */ BoxProps {
+    grow?: boolean;
+    justify?: CSSProperties['justify-content'];
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabsListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsListProps> & 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/tabs/tabs-list.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from "vue";
+import Box from "../box.vue";
+import { useTabsState } from "./lib";
+import css from "./tabs.module.css";
+const { is = "header", mod, grow, justify } = defineProps({
+  grow: { type: Boolean, required: false },
+  justify: { type: null, required: false }
+});
+const ctx = useTabsState();
+const style = computed(() => ({ "--tabs-justify": justify }));
+</script>
+
+<template>
+	<Box
+		:is
+		:style
+		:class='css.list'
+		role='tablist'
+		:mod='[mod, {
+  variant: ctx?.variant,
+  grow,
+  orientation: ctx?.orientation,
+  placement: ctx?.orientation === "vertical" && ctx.placement,
+  inverted: ctx?.inverted
+}]'
+		:aria-orientation='ctx?.orientation'
+	>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/tabs/tabs-list.vue.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'vue';
+import type { BoxProps } from '../box.vue.js';
+export interface TabsListProps extends /* @vue-ignore */ BoxProps {
+    grow?: boolean;
+    justify?: CSSProperties['justify-content'];
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabsListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsListProps> & 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/tabs/tabs-panel.d.vue.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '../box.vue.js';
+export interface TabsPanelProps extends /* @vue-ignore */ BoxProps {
+    value: string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabsPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsPanelProps> & 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/tabs/tabs-panel.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Box from "../box.vue";
+import { useTabsState } from "./lib";
+import css from "./tabs.module.css";
+const { is = "section", mod, value } = defineProps({
+  value: { type: String, required: true }
+});
+const ctx = useTabsState();
+</script>
+
+<template>
+	<Box
+		:is
+		:id='ctx?.getPanelId(value)'
+		:mod='[mod, { orientation: ctx?.orientation }]'
+		:data-active='ctx?.active.value === value'
+		:class='css.panel'
+		role='tabpanel'
+		:aria-labelledby='ctx?.getTabId(value)'
+	>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/tabs/tabs-panel.vue.d.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '../box.vue.js';
+export interface TabsPanelProps extends /* @vue-ignore */ BoxProps {
+    value: string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabsPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsPanelProps> & 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/tabs/tabs-root.d.vue.ts

@@ -0,0 +1,47 @@
+import type { UiKitColor, UiKitRadius } from '@nui/types';
+import type { BoxProps } from '../box.vue.js';
+export interface TabsRootProps extends /* @vue-ignore */ BoxProps {
+    defaultTab?: string;
+    /** Tabs orientation, `'horizontal'` by default */
+    orientation?: 'vertical' | 'horizontal';
+    /** `TabsList` placement relative to `TabsPanel`, applicable only when `orientation="vertical"`, `'left'` by default */
+    placement?: 'left' | 'right';
+    variant?: 'default' | 'pills' | 'outline';
+    /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+    loop?: boolean;
+    /** Determines whether tab should be activated with arrow key press, `true` by default */
+    activateTabWithKeyboard?: boolean;
+    /** Determines whether tab can be deactivated, `false` by default */
+    allowTabDeactivation?: boolean;
+    /** Changes colors of `TabsTab` components when variant is `pills` or `default`, does nothing for other variants */
+    color?: UiKitColor;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    radius?: UiKitRadius;
+    /** Determines whether tabs should have inverted styles, `false` by default */
+    inverted?: boolean;
+    /** If set to `false`, `TabsPanel` content will be unmounted when the associated tab is not active, `true` by default */
+    keepMounted?: boolean;
+    id?: string;
+}
+type __VLS_Props = TabsRootProps;
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, 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/tabs/tabs-root.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { getRadius, getSafeId, getThemeColor } from "@nui/utils";
+import Box from "../box.vue";
+import { useProvideTabsContext } from "../tabs/lib";
+import css from "./tabs.module.css";
+const {
+  is,
+  id,
+  mod,
+  radius,
+  color,
+  placement = "left",
+  inverted,
+  orientation = "horizontal",
+  variant = "default",
+  defaultTab,
+  ...rest
+} = defineProps({
+  defaultTab: { type: String, required: false },
+  orientation: { type: String, required: false },
+  placement: { type: String, required: false },
+  variant: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  activateTabWithKeyboard: { type: Boolean, required: false },
+  allowTabDeactivation: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  radius: { type: [String, Number], required: false },
+  inverted: { type: Boolean, required: false },
+  keepMounted: { type: Boolean, required: false },
+  id: { type: String, required: false }
+});
+const VALUE_ERROR = "component was rendered with invalid value or without value";
+const uid = id ?? useId();
+const active = defineModel({ type: [String, null], ...{ default: null } });
+onMounted(() => {
+  if (active.value === null && defaultTab) {
+    active.value = defaultTab;
+  }
+});
+const style = computed(() => useStyleResolver((theme) => ({
+  "--tabs-radius": getRadius(radius),
+  "--tabs-color": getThemeColor(color, theme)
+})));
+useProvideTabsContext({
+  ...rest,
+  id: uid,
+  getTabId: getSafeId(`${uid}-tab`, `TabsTab ${VALUE_ERROR}`),
+  getPanelId: getSafeId(`${uid}-panel`, `TabsPanel ${VALUE_ERROR}`),
+  variant,
+  active,
+  inverted,
+  placement
+});
+</script>
+
+<template>
+	<Box
+		:is
+		:style
+		:mod='[mod, {
+  orientation,
+  inverted: orientation === "horizontal" && inverted,
+  placement: orientation === "vertical" && placement,
+  variant
+}]'
+		:class='css.root'
+	>
+		<slot />
+	</Box>
+</template>

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

@@ -0,0 +1,47 @@
+import type { UiKitColor, UiKitRadius } from '@nui/types';
+import type { BoxProps } from '../box.vue.js';
+export interface TabsRootProps extends /* @vue-ignore */ BoxProps {
+    defaultTab?: string;
+    /** Tabs orientation, `'horizontal'` by default */
+    orientation?: 'vertical' | 'horizontal';
+    /** `TabsList` placement relative to `TabsPanel`, applicable only when `orientation="vertical"`, `'left'` by default */
+    placement?: 'left' | 'right';
+    variant?: 'default' | 'pills' | 'outline';
+    /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+    loop?: boolean;
+    /** Determines whether tab should be activated with arrow key press, `true` by default */
+    activateTabWithKeyboard?: boolean;
+    /** Determines whether tab can be deactivated, `false` by default */
+    allowTabDeactivation?: boolean;
+    /** Changes colors of `TabsTab` components when variant is `pills` or `default`, does nothing for other variants */
+    color?: UiKitColor;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    radius?: UiKitRadius;
+    /** Determines whether tabs should have inverted styles, `false` by default */
+    inverted?: boolean;
+    /** If set to `false`, `TabsPanel` content will be unmounted when the associated tab is not active, `true` by default */
+    keepMounted?: boolean;
+    id?: string;
+}
+type __VLS_Props = TabsRootProps;
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, 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/tabs/tabs-tab.d.vue.ts

@@ -0,0 +1,22 @@
+import type { Mod } from '@nui/composals';
+export interface TabsTabProps {
+    value: string;
+    mod?: Mod | Mod[];
+}
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    rightSection?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabsTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsTabProps> & 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/tabs/tabs-tab.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue";
+import UnstyledButton from "../button/unstyled-button.vue";
+import { useTabsState } from "./lib";
+import css from "./tabs.module.css";
+const { value, mod } = defineProps({
+  value: { type: String, required: true },
+  mod: { type: [Object, Array], required: false }
+});
+const ctx = useTabsState();
+const active = computed(() => value === ctx?.active.value);
+</script>
+
+<template>
+	<UnstyledButton
+		:id='ctx?.getTabId(value)'
+		:mod='[mod, {
+  variant: ctx?.variant,
+  active,
+  orientation: ctx?.orientation,
+  inverted: ctx?.inverted,
+  placement: ctx?.orientation === "vertical" && ctx.placement
+}]'
+		:class='css.tab'
+		role='tab'
+		:aria-selected='active'
+		:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
+		:aria-controls='ctx?.getPanelId(value)'
+		@click='ctx?.onUpdate(value)'
+	>
+		<span v-if='$slots.leftSection' :class='css.tabSection' data-position='left'>
+			<slot name='leftSection' />
+		</span>
+		<span v-if='$slots.default' :class='css.tabLabel'>
+			<slot />
+		</span>
+		<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
+			<slot name='rightSection' />
+		</span>
+	</UnstyledButton>
+</template>

package/dist/runtime/components/tabs/tabs-tab.vue.d.ts

@@ -0,0 +1,22 @@
+import type { Mod } from '@nui/composals';
+export interface TabsTabProps {
+    value: string;
+    mod?: Mod | Mod[];
+}
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    rightSection?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabsTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsTabProps> & 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/tabs/tabs.module.css

@@ -0,0 +1 @@
+.root{--tabs-radius:var(--radius-default);--tabs-color:var(--radius-default);@mixin light{--tab-border-color:var(--color-gray-3)}@mixin dark{--tab-border-color:var(--color-dark-4)}display:var(--tabs-display);flex-direction:var(--tabs-flex-direction);--tabs-list-direction:row;--tabs-panel-grow:unset;--tabs-display:grid;--tabs-flex-direction:row;--tabs-list-border-width:0;--tabs-list-border-size:0 0 var(--tabs-list-border-width) 0;--tabs-list-gap:unset;--tabs-list-line-bottom:0;--tabs-list-line-top:unset;--tabs-list-line-start:0;--tabs-list-line-end:0;--tab-radius:var(--tabs-radius) var(--tabs-radius) 0 0;--tab-border-width:0 0 var(--tabs-list-border-width) 0}.root[data-inverted]{--tabs-list-line-bottom:unset;--tabs-list-line-top:0;--tab-radius:0 0 var(--tabs-radius) var(--tabs-radius);--tab-border-width:var(--tabs-list-border-width) 0 0 0}.root[data-inverted] .list--default:before{bottom:unset;top:0}.root[data-orientation=vertical]{--tabs-list-line-start:unset;--tabs-list-line-end:0;--tabs-list-line-top:0;--tabs-list-line-bottom:0;--tabs-list-border-size:0 var(--tabs-list-border-width) 0 0;--tab-border-width:0 var(--tabs-list-border-width) 0 0;--tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius);--tabs-list-direction:column;--tabs-panel-grow:1;--tabs-display:flex;@mixin rtl{--tabs-list-border-size:0 0 0 var(--tabs-list-border-width);--tab-border-width:0 0 0 var(--tabs-list-border-width);--tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0}}.root[data-orientation=vertical][data-placement=right]{--tabs-flex-direction:row-reverse;--tabs-list-line-start:0;--tabs-list-line-end:unset;--tabs-list-border-size:0 0 0 var(--tabs-list-border-width);--tab-border-width:0 0 0 var(--tabs-list-border-width);--tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0;@mixin rtl{--tabs-list-border-size:0 var(--tabs-list-border-width) 0 0;--tab-border-width:0 var(--tabs-list-border-width) 0 0;--tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius)}}.root[data-variant=default]{--tabs-list-border-width:2px;@mixin light{--tab-hover-color:var(--color-gray-0)}@mixin dark{--tab-hover-color:var(--color-dark-6)}}.root[data-variant=outline]{--tabs-list-border-width:1px}.root[data-variant=pills]{--tabs-list-gap:calc(var(--spacing-sm)/2);@mixin light{--tab-hover-color:var(--color-gray-0)}@mixin dark{--tab-hover-color:var(--color-dark-6)}}.list{--tabs-justify:flex-start;display:flex;flex-direction:var(--tabs-list-direction);flex-wrap:wrap;gap:var(--tabs-list-gap);justify-content:var(--tabs-justify)}.list:where([data-grow]) .tab{flex:1}.panel{flex-grow:var(--tabs-panel-grow)}.panel[data-active=false]{display:none}.tab{align-items:center;display:flex;font-size:var(--font-size-sm);line-height:1;padding:var(--spacing-xs) var(--spacing-md);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;z-index:0}.tab:where(:disabled,[data-disabled]){cursor:not-allowed;opacity:.5}.tab:focus{z-index:1}.tabSection{align-items:center;display:flex;justify-content:center}.tabSection:where([data-position=left]:not(:only-child)){margin-inline-end:var(--spacing-xs)}.tabSection:where([data-position=right]:not(:only-child)){margin-inline-start:var(--spacing-xs)}.tabLabel{flex:1;text-align:center}.list[data-variant=default]{position:relative}.list[data-variant=default]:before{border:1px solid var(--tab-border-color);bottom:var(--tabs-list-line-bottom);content:"";inset-inline-end:var(--tabs-list-line-end);inset-inline-start:var(--tabs-list-line-start);position:absolute;top:var(--tabs-list-line-top)}.tab[data-variant=default]{background-color:transparent;border-color:transparent;border-radius:var(--tab-radius);border-style:solid;border-width:var(--tab-border-width)}.tab[data-variant=default]:where([data-active]){border-color:var(--tabs-color)}.tab[data-variant=default]{@mixin hover{background-color:var(--tab-hover-color);&:where(:not([data-active])){border-color:var(--tab-border-color)}}}.tab[data-variant=default]:disabled,.tab[data-variant=default][data-disabled]{@mixin hover{background-color:transparent}}.list[data-variant=outline]{position:relative}.list[data-variant=outline]:before{border-color:var(--tab-border-color);border-style:solid;border-width:var(--tabs-list-border-size);bottom:var(--tabs-list-line-bottom);content:"";inset-inline-end:var(--tabs-list-line-end);inset-inline-start:var(--tabs-list-line-start);position:absolute;top:var(--tabs-list-line-top)}.tab[data-variant=outline]{border-bottom:1px solid transparent;border-bottom-color:var(--tab-border-bottom-color);border-left:1px solid transparent;border-radius:var(--tab-radius);border-right:1px solid transparent;border-top:1px solid transparent;border-top-color:var(--tab-border-top-color);position:relative;--tab-border-bottom-color:transparent;--tab-border-top-color:transparent;--tab-border-inline-end-color:transparent;--tab-border-inline-start-color:transparent}.tab[data-variant=outline]:where([data-active]):before{background-color:var(--tab-border-color);bottom:var(--tab-before-bottom,rem(-1px));content:"";height:1px;left:var(--tab-before-left,rem(-1px));position:absolute;right:var(--tab-before-right,auto);top:var(--tab-before-top,auto);width:1px}.tab[data-variant=outline]:where([data-active]):after{background-color:var(--tab-border-color);bottom:var(--tab-after-bottom,rem(-1px));content:"";height:1px;left:var(--tab-after-left,auto);position:absolute;right:var(--tab-after-right,rem(-1px));top:var(--tab-after-top,auto);width:1px}.tab[data-variant=outline]:where([data-active]){border-bottom-color:var(--tab-border-bottom-color);border-inline-end-color:var(--tab-border-inline-end-color);border-inline-start-color:var(--tab-border-inline-start-color);border-top-color:var(--tab-border-top-color);--tab-border-top-color:var(--tab-border-color);--tab-border-inline-start-color:var(--tab-border-color);--tab-border-inline-end-color:var(--tab-border-color);--tab-border-bottom-color:var(--color-body)}.tab[data-variant=outline]:where([data-active])[data-inverted]{--tab-border-bottom-color:var(--tab-border-color);--tab-border-top-color:var(--color-body);--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-bottom:auto;--tab-after-top:-1px}.tab[data-variant=outline]:where([data-active])[data-orientation=vertical][data-placement=left]{--tab-border-inline-end-color:var(--color-body);--tab-border-inline-start-color:var(--tab-border-color);--tab-border-bottom-color:var(--tab-border-color);--tab-before-right:-1px;--tab-before-left:auto;--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-left:auto;--tab-after-right:-1px;@mixin rtl{--tab-before-right:auto;--tab-before-left:-1px;--tab-after-left:-1px;--tab-after-right:auto}}.tab[data-variant=outline]:where([data-active])[data-orientation=vertical][data-placement=right]{--tab-border-inline-start-color:var(--color-body);--tab-border-inline-end-color:var(--tab-border-color);--tab-border-bottom-color:var(--tab-border-color);--tab-before-left:-1px;--tab-before-right:auto;--tab-before-bottom:auto;--tab-before-top:-1px;--tab-after-right:auto;--tab-after-left:-1px;@mixin rtl{--tab-before-left:auto;--tab-before-right:-1px;--tab-after-right:-1px;--tab-after-left:auto}}.tab[data-variant=pills]{background-color:var(--tab-bg);border-radius:var(--tabs-radius);color:var(--tab-color);--tab-bg:transparent;--tab-color:inherit}.tab[data-variant=pills]:not([data-disabled]){@mixin hover{--tab-bg:var(--tab-hover-color)}}.tab[data-variant=pills][data-active][data-active]{--tab-bg:var(--tabs-color);--tab-color:var(--tabs-text-color,var(--color-white));@mixin hover{--tab-bg:var(--tabs-color)}}