nuance-ui 0.2.35 → 0.3.0

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

@@ -1,3 +1,4 @@
+export type * from './accordion.vue';
 export * from './action-icon/index.js';
 export * from './app-shell/index.js';
 export * from './avatar/index.js';
@@ -10,6 +11,7 @@ export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
+export * from './collapsible/index.js';
 export * from './combobox/index.js';
 export type * from './container.vue';
 export type * from './date-time-picker.vue';

package/dist/runtime/components/index.js

@@ -6,6 +6,7 @@ export * from "./calendar/index.js";
 export * from "./card/index.js";
 export * from "./checkbox/index.js";
 export * from "./chip/index.js";
+export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
 export * from "./dialog/index.js";
 export * from "./drawer/index.js";

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

@@ -1,5 +1,5 @@
 import type { NuxtLinkProps } from '#app';
 export declare function pickLinkProps<T extends NuxtLinkProps>(props: T): {
-    link: Pick<T, "replace" | "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
-    rest: Omit<T, "replace" | "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
+    link: Pick<T, "replace" | "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
+    rest: Omit<T, "replace" | "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
 };

package/dist/runtime/components/link/link-button.vue

@@ -30,6 +30,10 @@ const props = defineProps({
   leftSectionProps: { type: Object, required: false },
   rightSectionProps: { type: Object, required: false },
   variant: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  activeMode: { type: String, required: false },
+  activeVariant: { type: String, required: false },
+  activeColor: { type: null, required: false },
   classes: { type: Object, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }

package/dist/runtime/components/modal/modal-close-button.vue

@@ -2,6 +2,7 @@
 import DialogCloseButton from "../dialog/ui/dialog-close-button.vue";
 const props = defineProps({
   size: { type: null, required: false },
+  iconSize: { type: [Number, String], required: false },
   gradient: { type: Object, required: false },
   color: { type: null, required: false },
   radius: { type: [String, Number, Object], required: false },
@@ -10,6 +11,10 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   mod: { type: [Object, Array, null], required: false },
   variant: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  activeMode: { type: String, required: false },
+  activeVariant: { type: String, required: false },
+  activeColor: { type: null, required: false },
   classes: { type: Object, required: false }
 });
 </script>

package/dist/runtime/components/nav-link/nav-icon-link.d.vue.ts

@@ -1,23 +1,17 @@
 import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
-export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+export interface NavIconLinkProps extends Omit<ActionIconProps, 'active'>, Omit<NuxtLinkProps, 'href' | 'custom'> {
     /** Link target */
     to: NuxtLinkProps['to'];
     /** Color from theme */
     color?: NuanceColor;
     /** Icon name shorthand */
     icon?: string;
-    /**
-     * Variant applied in active state
-     * @default `'filled'`
-     */
-    active?: ActionIconProps['variant'];
-    /**
-     * Variant applied in inactive state
-     * @default `'default'`
-     */
-    notActive?: ActionIconProps['variant'];
+    /** Variant applied in inactive state @default 'default' */
+    variant?: ActionIconProps['variant'];
+    /** Variant applied in active state @default 'filled' */
+    activeVariant?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/nav-link/nav-icon-link.vue

@@ -3,23 +3,25 @@ import ActionIcon from "../action-icon/action-icon.vue";
 import { pickLinkProps } from "../link";
 defineOptions({ inheritAttrs: false });
 const {
-  active = "filled",
-  notActive = "default",
+  variant,
+  activeVariant,
   mod,
   ...etc
 } = defineProps({
   to: { type: null, required: true },
   color: { type: null, required: false },
   icon: { type: String, required: false },
-  active: { type: String, required: false },
-  notActive: { type: String, required: false },
+  variant: { type: String, required: false },
+  activeVariant: { type: String, required: false },
   size: { type: null, required: false },
+  iconSize: { type: [Number, String], required: false },
   gradient: { type: Object, required: false },
   radius: { type: [String, Number, Object], required: false },
   loading: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   mod: { type: [Object, Array, null], required: false },
-  variant: { type: String, required: false },
+  activeMode: { type: String, required: false },
+  activeColor: { type: null, required: false },
   classes: { type: Object, required: false },
   external: { type: Boolean, required: false },
   target: { type: [String, Object, null], required: false },
@@ -45,9 +47,11 @@ const { link, rest } = pickLinkProps(etc);
 			is='a'
 			v-bind='{ ...rest, ...$attrs }'
 			:href
-			:variant='isActive ? active : notActive'
-			:mod='[{ active: isActive }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
+			:variant
+			:active='isActive'
+			:active-variant
+			active-mode='current'
+			:mod
 			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
 			:target='"target" in linkProps ? linkProps?.target : void 0'
 			@click='navigate'

package/dist/runtime/components/nav-link/nav-icon-link.vue.d.ts

@@ -1,23 +1,17 @@
 import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
-export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+export interface NavIconLinkProps extends Omit<ActionIconProps, 'active'>, Omit<NuxtLinkProps, 'href' | 'custom'> {
     /** Link target */
     to: NuxtLinkProps['to'];
     /** Color from theme */
     color?: NuanceColor;
     /** Icon name shorthand */
     icon?: string;
-    /**
-     * Variant applied in active state
-     * @default `'filled'`
-     */
-    active?: ActionIconProps['variant'];
-    /**
-     * Variant applied in inactive state
-     * @default `'default'`
-     */
-    notActive?: ActionIconProps['variant'];
+    /** Variant applied in inactive state @default 'default' */
+    variant?: ActionIconProps['variant'];
+    /** Variant applied in active state @default 'filled' */
+    activeVariant?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/scroll-area.vue

@@ -1,6 +1,7 @@
 <script setup>
+import { useVarsResolver } from "@nui/composables";
+import { getSize } from "@nui/utils";
 import { useResizeObserver } from "@vueuse/core";
-import { getSize, useVarsResolver } from "#imports";
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
 import Box from "./box.vue";
 const {

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

@@ -40,8 +40,8 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         onSubmit?: ((args_0: string, args_1: import("./combobox/index.js").ComboboxItem<string, object>) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
         onOpen?: ((args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => any) | undefined;
-        "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:search"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -63,7 +63,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         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: import("./combobox/index.js").ComboboxItem<string, object>) => void) & ((evt: "open", args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    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: import("./combobox/index.js").ComboboxItem<string, object>) => void) & ((evt: "open", args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:open", value: boolean) => void) & ((event: "update:search", value: string) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -40,8 +40,8 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         onSubmit?: ((args_0: string, args_1: import("./combobox/index.js").ComboboxItem<string, object>) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
         onOpen?: ((args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => any) | undefined;
-        "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:search"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -63,7 +63,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         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: import("./combobox/index.js").ComboboxItem<string, object>) => void) & ((evt: "open", args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    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: import("./combobox/index.js").ComboboxItem<string, object>) => void) & ((evt: "open", args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:open", value: boolean) => void) & ((event: "update:search", value: string) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/table/ui/table-sortable-header.vue

@@ -23,6 +23,10 @@ const {
   leftSectionProps: { type: Object, required: false },
   rightSectionProps: { type: Object, required: false },
   variant: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  activeMode: { type: String, required: false },
+  activeVariant: { type: String, required: false },
+  activeColor: { type: null, required: false },
   classes: { type: Object, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },

package/dist/runtime/components/table/ui/table.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useVarsResolver } from "@nui/composables";
 import { getThemeColor } from "@nui/utils";
 import {
   FlexRender,
@@ -9,7 +10,6 @@ import {
   useVueTable
 } from "@tanstack/vue-table";
 import { reactivePick, unrefElement } from "@vueuse/core";
-import { useVarsResolver } from "#imports";
 import { computed, ref, useTemplateRef, watch } from "vue";
 import Box from "../../box.vue";
 import { createRowHandlers, processColumns, resolveValue, valueUpdater } from "../lib";

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

@@ -62,8 +62,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
-    variant: TabsVariant;
     orientation: "vertical" | "horizontal";
+    variant: TabsVariant;
     placement: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -62,8 +62,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
-    variant: TabsVariant;
     orientation: "vertical" | "horizontal";
+    variant: TabsVariant;
     placement: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/theme-toggle.vue

@@ -3,6 +3,7 @@ import { useConfig, useTheme } from "@nui/composables";
 import ActionIcon from "./action-icon/action-icon.vue";
 const props = defineProps({
   size: { type: null, required: false },
+  iconSize: { type: [Number, String], required: false },
   gradient: { type: Object, required: false },
   color: { type: null, required: false },
   radius: { type: [String, Number, Object], required: false },
@@ -11,6 +12,10 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   mod: { type: [Object, Array, null], required: false },
   variant: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  activeMode: { type: String, required: false },
+  activeVariant: { type: String, required: false },
+  activeColor: { type: null, required: false },
   classes: { type: Object, required: false }
 });
 const theme = useTheme();

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

@@ -15,6 +15,16 @@ export interface TransitionProps {
      * @default `0`
      */
     delay?: number;
+    /**
+   * Controls the timing sequence of leaving/entering transitions.
+   * Default behavior is simultaneous.
+   */
+    mode?: 'in-out' | 'out-in' | 'default';
+    /**
+   * Whether to apply transition on initial render.
+   * Default: false
+   */
+    appear?: boolean;
 }
 declare var __VLS_9: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/transition.vue

@@ -3,11 +3,15 @@ import { computed } from "vue";
 const {
   name = "pop-bottom-left",
   duration = 250,
-  delay
+  delay,
+  appear,
+  mode
 } = defineProps({
   name: { type: String, required: false },
   duration: { type: Number, required: false },
-  delay: { type: Number, required: false }
+  delay: { type: Number, required: false },
+  mode: { type: String, required: false },
+  appear: { type: Boolean, required: false }
 });
 const emit = defineEmits(["afterLeave"]);
 const style = computed(() => ({
@@ -17,7 +21,14 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Transition :class='$style.root' :style :name @after-leave='() => emit("afterLeave")'>
+	<Transition
+		:class='$style.root'
+		:style
+		:name
+		:mode
+		:appear
+		@after-leave='() => emit("afterLeave")'
+	>
 		<slot />
 	</Transition>
 </template>

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

@@ -15,6 +15,16 @@ export interface TransitionProps {
      * @default `0`
      */
     delay?: number;
+    /**
+   * Controls the timing sequence of leaving/entering transitions.
+   * Default behavior is simultaneous.
+   */
+    mode?: 'in-out' | 'out-in' | 'default';
+    /**
+   * Whether to apply transition on initial render.
+   * Default: false
+   */
+    appear?: boolean;
 }
 declare var __VLS_9: {};
 type __VLS_Slots = {} & {

package/dist/runtime/composables/use-config.d.ts

@@ -2,5 +2,6 @@ import type { VariantColorResolverOptions } from '@nui/utils';
 /** Returns the configured icon registry merged with module defaults. */
 export declare function useConfig(): {
     icons: any;
+    activeVariants: any;
     variantResolver: (options: VariantColorResolverOptions) => import("#imports").VariantColorResolverResult;
 };

package/dist/runtime/composables/use-config.js

@@ -1,9 +1,10 @@
 import { createVariantColorResolver } from "@nui/utils";
 import { useAppConfig } from "#imports";
 export function useConfig() {
-  const { icons, gradient } = useAppConfig().nui;
+  const { icons, gradient, activeVariants } = useAppConfig().nui;
   return {
     icons,
+    activeVariants,
     variantResolver: (options) => createVariantColorResolver({
       ...options,
       gradient: options.gradient ?? gradient

package/dist/runtime/modals/modals-provider.vue

@@ -3,14 +3,12 @@ import { $modals } from "./modal-manager";
 </script>
 
 <template>
-	<ClientOnly>
-		<div id='nui-modals-root'>
-			<component
-				:is='entry.component'
-				v-for='[id, entry] in $modals.modals'
-				:key='id'
-				v-bind='entry.props'
-			/>
-		</div>
-	</ClientOnly>
+	<div id='nui-modals-root'>
+		<component
+			:is='entry.component'
+			v-for='[id, entry] in $modals.modals'
+			:key='id'
+			v-bind='entry.props'
+		/>
+	</div>
 </template>

package/dist/runtime/utils/const/active-variants.d.ts

@@ -0,0 +1,11 @@
+/** Variant an ActionIcon switches to when `active`, keyed by its base variant. */
+export declare const DEFAULT_ACTIVE_VARIANTS: {
+    readonly default: "filled";
+    readonly light: "filled";
+    readonly outline: "filled";
+    readonly subtle: "light";
+    readonly filled: "filled";
+    readonly gradient: "gradient";
+    readonly 'gradient-outline': "gradient";
+};
+export type ActiveVariantsMap = Record<keyof typeof DEFAULT_ACTIVE_VARIANTS, string>;

package/dist/runtime/utils/const/active-variants.js

@@ -0,0 +1,9 @@
+export const DEFAULT_ACTIVE_VARIANTS = {
+  "default": "filled",
+  "light": "filled",
+  "outline": "filled",
+  "subtle": "light",
+  "filled": "filled",
+  "gradient": "gradient",
+  "gradient-outline": "gradient"
+};

package/dist/runtime/utils/const/index.d.ts

@@ -1,2 +1,3 @@
+export * from './active-variants.js';
 export * from './gradient.js';
 export * from './icons.js';

package/dist/runtime/utils/const/index.js

@@ -1,2 +1,3 @@
+export * from "./active-variants.js";
 export * from "./gradient.js";
 export * from "./icons.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.35",
+	"version": "0.3.0",
 	"description": "A modern Nuxt UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
@@ -46,7 +46,7 @@
 		"dev": "npm run dev:prepare && nuxi dev playground",
 		"dev:build": "nuxi build playground",
 		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-		"release": "npm run lint && npm run prepack && changelogen --release && git push --follow-tags",
+		"release": "npm run lint && npm run prepack && changelogen --release --minor && git push --follow-tags",
 		"lint": "eslint ./src",
 		"test": "vitest run",
 		"test:watch": "vitest watch",
@@ -77,11 +77,11 @@
 		}
 	},
 	"devDependencies": {
-		"@antfu/eslint-config": "^8.2.0",
-		"@nuxt/icon": "^2.2.1",
+		"@antfu/eslint-config": "^9.1.0",
 		"@nuxt/devtools": "^3.1.1",
 		"@nuxt/eslint": "1.10.0",
 		"@nuxt/eslint-config": "^1.13.0",
+		"@nuxt/icon": "^2.2.1",
 		"@nuxt/image": "^2.0.0",
 		"@nuxt/module-builder": "^1.0.2",
 		"@nuxt/schema": "^4.4.2",