nuance-ui 0.1.8 → 0.1.10

package/dist/runtime/components/tree/_ui/tree-root.d.vue.ts

@@ -1,28 +1,34 @@
-import type { NuanceSize } from '@nui/types';
+import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
 import type { TreeIconResolver, TreeModels } from '../model.js';
 export type TreeRootProps<T extends string = string> = RovingFocusProps & {
-    size?: NuanceSize | string;
     iconResolver?: TreeIconResolver<T>;
     removable?: boolean;
+    selectable?: boolean;
+    variant?: ButtonProps['variant'];
+    color?: ButtonProps['color'];
+    size?: ButtonProps['size'];
 };
 declare const __VLS_export: <T extends string = string>(__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<(RovingFocusProps & {
-        size?: NuanceSize | string;
         iconResolver?: TreeIconResolver<T> | undefined;
         removable?: boolean;
+        selectable?: boolean;
+        variant?: ButtonProps["variant"];
+        color?: ButtonProps["color"];
+        size?: ButtonProps["size"];
     } & {
         tree: TreeModels<T>["tree"];
         active?: TreeModels<T>["active"];
         selected?: TreeModels<T>["selected"];
         expanded?: TreeModels<T>["expanded"];
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:tree", value: import("..").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:tree", value: import("@nui/components").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void)>>> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         default?: (props: {}) => any;
     };
-    emit: ((evt: "update:tree", value: import("..").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
+    emit: ((evt: "update:tree", value: import("@nui/components").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/tree/_ui/tree-root.vue

@@ -7,19 +7,25 @@ import Box from "../../box.vue";
 import RovingFocus from "../../roving-focus/roving-focus.vue";
 import { useProvideTreeState } from "../lib/context";
 const {
-  size,
+  color,
   attr,
   loop,
   orientation,
+  variant = "subtle",
+  size = "compact-sm",
   iconResolver = () => ({ icon: "gravity-ui:file" }),
-  removable = false
+  removable = false,
+  selectable = false
 } = defineProps({
   loop: { type: Boolean, required: false },
   orientation: { type: String, required: false },
   attr: { type: String, required: false },
-  size: { type: String, required: false },
   iconResolver: { type: Function, required: false },
-  removable: { type: Boolean, required: false }
+  removable: { type: Boolean, required: false },
+  selectable: { type: Boolean, required: false },
+  variant: { type: String, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false }
 });
 const tree = defineModel("tree", { type: Array, ...{ required: true } });
 const active = defineModel("active", { type: null, ...{ default: null } });
@@ -35,7 +41,11 @@ useProvideTreeState({
   active,
   selected,
   expanded,
-  iconResolver
+  iconResolver,
+  size,
+  color,
+  variant,
+  selectable
 });
 if (removable) {
   useEventListener(root, "keydown", (event) => {

package/dist/runtime/components/tree/_ui/tree-root.vue.d.ts

@@ -1,28 +1,34 @@
-import type { NuanceSize } from '@nui/types';
+import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
 import type { TreeIconResolver, TreeModels } from '../model.js';
 export type TreeRootProps<T extends string = string> = RovingFocusProps & {
-    size?: NuanceSize | string;
     iconResolver?: TreeIconResolver<T>;
     removable?: boolean;
+    selectable?: boolean;
+    variant?: ButtonProps['variant'];
+    color?: ButtonProps['color'];
+    size?: ButtonProps['size'];
 };
 declare const __VLS_export: <T extends string = string>(__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<(RovingFocusProps & {
-        size?: NuanceSize | string;
         iconResolver?: TreeIconResolver<T> | undefined;
         removable?: boolean;
+        selectable?: boolean;
+        variant?: ButtonProps["variant"];
+        color?: ButtonProps["color"];
+        size?: ButtonProps["size"];
     } & {
         tree: TreeModels<T>["tree"];
         active?: TreeModels<T>["active"];
         selected?: TreeModels<T>["selected"];
         expanded?: TreeModels<T>["expanded"];
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:tree", value: import("..").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:tree", value: import("@nui/components").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void)>>> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         default?: (props: {}) => any;
     };
-    emit: ((evt: "update:tree", value: import("..").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
+    emit: ((evt: "update:tree", value: import("@nui/components").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/tree/lib/context.d.ts

@@ -1,4 +1,4 @@
-import type { TreeIconResolver, TreeItem } from '@nui/components';
+import type { ButtonProps, TreeIconResolver, TreeItem } from '@nui/components';
 import type { ModelRef } from 'vue';
 type EventType = 'select' | 'expand';
 type SelectMode = 'single' | 'multiple' | 'range';
@@ -8,6 +8,10 @@ export interface TreeContext<T extends string = string> {
     selected: ModelRef<T[]>;
     expanded: ModelRef<T[]>;
     iconResolver: TreeIconResolver<T>;
+    selectable: boolean;
+    variant: ButtonProps['variant'];
+    color: ButtonProps['color'];
+    size: ButtonProps['size'];
 }
 export interface TreeState<T extends string = string> {
     active: ModelRef<T | null>;
@@ -18,6 +22,10 @@ export interface TreeState<T extends string = string> {
     on: ((type: 'expand', value: T) => void) & ((type: 'select', value: T, mode?: SelectMode) => void);
     off: (type: EventType, value: T) => void;
     setActive: (value: T | null) => void;
+    selectable: boolean;
+    variant: ButtonProps['variant'];
+    color: ButtonProps['color'];
+    size: ButtonProps['size'];
 }
 export declare function useProvideTreeState<T extends string = string>(ctx: TreeContext<T>): TreeState<T>;
 export declare function useTreeState<T extends string = string>(): TreeState<T>;

package/dist/runtime/components/tree/lib/context.js

@@ -6,12 +6,16 @@ const [useProvide, useState] = createStrictInjection(({
   active,
   selected,
   expanded,
-  iconResolver
+  iconResolver,
+  selectable,
+  ...rest
 }) => {
   const setActive = (value) => active.value = value;
   function on(type, value, mode) {
     if (type === "select") {
       setActive(value);
+      if (!selectable)
+        return;
       switch (mode) {
         case "single":
           return selected.value = [value];
@@ -48,8 +52,8 @@ const [useProvide, useState] = createStrictInjection(({
         return;
       }
       case "expand": {
-        const children = getBranchChildren(tree.value, value);
-        return expanded.value = expanded.value.filter((v) => !children.includes(v)).filter((v) => v !== value);
+        const children = new Set(getBranchChildren(tree.value, value));
+        return expanded.value = expanded.value.filter((v) => v !== value && !children.has(v));
       }
       default:
         return console.warn(`Unknown target type in NuiTree: ${type}`);
@@ -61,34 +65,31 @@ const [useProvide, useState] = createStrictInjection(({
         const isSelected = selected.value.includes(value);
         if (mode === "single")
           return on(type, value, mode);
-        if (mode === "multiple") {
-          if (isSelected)
-            return off(type, value);
-          return on(type, value, mode);
-        }
+        if (mode === "multiple")
+          return isSelected ? off(type, value) : on(type, value, mode);
         if (mode === "range")
           return on(type, value, mode);
         return;
       }
       case "expand": {
         const isExpanded = expanded.value.includes(value);
-        if (isExpanded)
-          return off(type, value);
-        return on(type, value);
+        return isExpanded ? off(type, value) : on(type, value);
       }
       default:
         console.warn(`Unknown target type in NuiTree: ${type}`);
     }
   };
   return {
+    on,
+    off,
+    toggle,
+    setActive,
     active,
     selected,
     expanded,
     iconResolver,
-    toggle,
-    on,
-    off,
-    setActive
+    selectable,
+    ...rest
   };
 }, {
   injectionKey,

package/dist/runtime/components/tree/tree.vue

@@ -1,15 +1,22 @@
 <script setup>
-import { unref } from "vue";
 import UTreeItem from "./_ui/tree-item.vue";
 import TreeRoot from "./_ui/tree-root.vue";
 import { getExpandedItems } from "./lib/get-default";
-const props = defineProps({
+const {
+  color,
+  variant = "subtle",
+  size = "compact-sm",
+  ...props
+} = defineProps({
   loop: { type: Boolean, required: false },
   orientation: { type: String, required: false },
   attr: { type: String, required: false },
-  size: { type: String, required: false },
   iconResolver: { type: Function, required: false },
-  removable: { type: Boolean, required: false }
+  removable: { type: Boolean, required: false },
+  selectable: { type: Boolean, required: false },
+  variant: { type: String, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false }
 });
 const tree = defineModel("tree", { type: Array, ...{ required: true } });
 const active = defineModel("active", { type: null, ...{ default: null } });
@@ -25,9 +32,12 @@ expanded.value = getExpandedItems(tree.value);
 		v-model:active='active'
 		v-model:selected='selected'
 		v-model:expanded='expanded'
+		:size
+		:color
+		:variant
 	>
 		<UTreeItem
-			v-for='item in unref(tree)'
+			v-for='item in tree'
 			:key='item.value'
 			:item
 			:level='1'

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

@@ -1,2 +1,2 @@
-import type { UiKitGradient } from '@nui/types';
-export declare const DEFAULT_GRADIENT: UiKitGradient;
+import type { NuanceGradient } from '@nui/types';
+export declare const DEFAULT_GRADIENT: NuanceGradient;

package/dist/runtime/styles/colors.css

@@ -1 +1 @@
-:root{--color-white:#fff;--color-black:#000;--color-primary-0:var(--color-blue-0);--color-primary-1:var(--color-blue-1);--color-primary-2:var(--color-blue-2);--color-primary-3:var(--color-blue-3);--color-primary-4:var(--color-blue-4);--color-primary-5:var(--color-blue-5);--color-primary-6:var(--color-blue-6);--color-primary-7:var(--color-blue-7);--color-primary-8:var(--color-blue-8);--color-primary-9:var(--color-blue-9);--color-primary-filled:var(--color-blue-filled);--color-primary-filled-hover:var(--color-blue-filled-hover);--color-primary-light:alpha(var(--color-blue-light),.15);--color-primary-light-hover:var(--color-blue-light-hover);--color-primary-light-color:var(--color-blue-light-color);--color-primary-outline:var(--color-blue-outline);--color-primary-outline-hover:alpha(var(--color-blue-outline),.1);--color-dark-0:#c9c9c9;--color-dark-1:#b8b8b8;--color-dark-2:#828282;--color-dark-3:#696969;--color-dark-4:#424242;--color-dark-5:#3b3b3b;--color-dark-6:#2e2e2e;--color-dark-7:#242424;--color-dark-8:#1f1f1f;--color-dark-9:#141414;--color-slate-0:#f8f9fb;--color-slate-1:#f1f3f6;--color-slate-2:#e4e7ed;--color-slate-3:#dadce5;--color-slate-4:#c1c6d4;--color-slate-5:#9096b2;--color-slate-6:#4a5568;--color-slate-7:#313446;--color-slate-8:#252938;--color-slate-9:#1d1f29;--color-gray-0:#f8f9fa;--color-gray-1:#f1f3f5;--color-gray-2:#e9ecef;--color-gray-3:#dee2e6;--color-gray-4:#ced4da;--color-gray-5:#adb5bd;--color-gray-6:#868e96;--color-gray-7:#495057;--color-gray-8:#343a40;--color-gray-9:#212529;--color-red-0:#fdf4f4;--color-red-1:#f5e0e0;--color-red-2:#e8c5c5;--color-red-3:#d49999;--color-red-4:#c27373;--color-red-5:#a85a5a;--color-red-6:#8f4545;--color-red-7:#763636;--color-red-8:#5d2a2a;--color-red-9:#4a2121;--color-pink-0:#fdf6f8;--color-pink-1:#f7e4e9;--color-pink-2:#edc2d0;--color-pink-3:#dd9bb0;--color-pink-4:#c97a93;--color-pink-5:#b26179;--color-pink-6:#954d65;--color-pink-7:#7a3e52;--color-pink-8:#603140;--color-pink-9:#4d2733;--color-grape-0:#f8f0fc;--color-grape-1:#f3d9fa;--color-grape-2:#eebefa;--color-grape-3:#e599f7;--color-grape-4:#da77f2;--color-grape-5:#cc5de8;--color-grape-6:#be4bdb;--color-grape-7:#ae3ec9;--color-grape-8:#9c36b5;--color-grape-9:#862e9c;--color-violet-0:#f3f0ff;--color-violet-1:#e5dbff;--color-violet-2:#d0bfff;--color-violet-3:#b197fc;--color-violet-4:#9775fa;--color-violet-5:#845ef7;--color-violet-6:#7950f2;--color-violet-7:#7048e8;--color-violet-8:#6741d9;--color-violet-9:#5f3dc4;--color-indigo-0:#edf2ff;--color-indigo-1:#dbe4ff;--color-indigo-2:#bac8ff;--color-indigo-3:#91a7ff;--color-indigo-4:#748ffc;--color-indigo-5:#5c7cfa;--color-indigo-6:#4c6ef5;--color-indigo-7:#4263eb;--color-indigo-8:#3b5bdb;--color-indigo-9:#364fc7;--color-blue-0:#e7f5ff;--color-blue-1:#d0ebff;--color-blue-2:#a5d8ff;--color-blue-3:#74c0fc;--color-blue-4:#4dabf7;--color-blue-5:#339af0;--color-blue-6:#228be6;--color-blue-7:#1c7ed6;--color-blue-8:#1971c2;--color-blue-9:#1864ab;--color-cyan-0:#e3fafc;--color-cyan-1:#c5f6fa;--color-cyan-2:#99e9f2;--color-cyan-3:#66d9e8;--color-cyan-4:#3bc9db;--color-cyan-5:#22b8cf;--color-cyan-6:#15aabf;--color-cyan-7:#1098ad;--color-cyan-8:#0c8599;--color-cyan-9:#0b7285;--color-teal-0:#e6fcf5;--color-teal-1:#c3fae8;--color-teal-2:#96f2d7;--color-teal-3:#63e6be;--color-teal-4:#38d9a9;--color-teal-5:#20c997;--color-teal-6:#12b886;--color-teal-7:#0ca678;--color-teal-8:#099268;--color-teal-9:#087f5b;--color-green-0:#ebfbee;--color-green-1:#d3f9d8;--color-green-2:#b2f2bb;--color-green-3:#8ce99a;--color-green-4:#69db7c;--color-green-5:#51cf66;--color-green-6:#40c057;--color-green-7:#37b24d;--color-green-8:#2f9e44;--color-green-9:#2b8a3e;--color-lime-0:#f4fce3;--color-lime-1:#e9fac8;--color-lime-2:#d8f5a2;--color-lime-3:#c0eb75;--color-lime-4:#a9e34b;--color-lime-5:#94d82d;--color-lime-6:#82c91e;--color-lime-7:#74b816;--color-lime-8:#66a80f;--color-lime-9:#5c940d;--color-yellow-0:#fdfbf0;--color-yellow-1:#f9f4d6;--color-yellow-2:#f0e6a6;--color-yellow-3:#e3d372;--color-yellow-4:#d4bf47;--color-yellow-5:#c2a72b;--color-yellow-6:#a68c1a;--color-yellow-7:#8a7315;--color-yellow-8:#6e5a12;--color-yellow-9:#584610;--color-orange-0:#fdf6f0;--color-orange-1:#f7e6d3;--color-orange-2:#edd1b0;--color-orange-3:#deb887;--color-orange-4:#cd9a5b;--color-orange-5:#b8833a;--color-orange-6:#a0692f;--color-orange-7:#8b5a28;--color-orange-8:#704621;--color-orange-9:#5a3419}
+:root{--color-white:#fff;--color-black:#000;--color-primary-0:var(--color-blue-0);--color-primary-1:var(--color-blue-1);--color-primary-2:var(--color-blue-2);--color-primary-3:var(--color-blue-3);--color-primary-4:var(--color-blue-4);--color-primary-5:var(--color-blue-5);--color-primary-6:var(--color-blue-6);--color-primary-7:var(--color-blue-7);--color-primary-8:var(--color-blue-8);--color-primary-9:var(--color-blue-9);--color-primary-filled:var(--color-blue-filled);--color-primary-filled-hover:var(--color-blue-filled-hover);--color-primary-light:alpha(var(--color-blue-light),.15);--color-primary-light-hover:var(--color-blue-light-hover);--color-primary-light-color:var(--color-blue-light-color);--color-primary-outline:var(--color-blue-outline);--color-primary-outline-hover:alpha(var(--color-blue-outline),.1);--color-dark-0:#c9c9c9;--color-dark-1:#b8b8b8;--color-dark-2:#828282;--color-dark-3:#696969;--color-dark-4:#424242;--color-dark-5:#3b3b3b;--color-dark-6:#2e2e2e;--color-dark-7:#242424;--color-dark-8:#1f1f1f;--color-dark-9:#141414;--color-slate-0:#f8f9fb;--color-slate-1:#f1f3f6;--color-slate-2:#e4e7ed;--color-slate-3:#dadce5;--color-slate-4:#c1c6d4;--color-slate-5:#9096b2;--color-slate-6:#4a5568;--color-slate-7:#313446;--color-slate-8:#252938;--color-slate-9:#1d1f29;--color-gray-0:#f8f9fa;--color-gray-1:#f1f3f5;--color-gray-2:#e9ecef;--color-gray-3:#dee2e6;--color-gray-4:#ced4da;--color-gray-5:#adb5bd;--color-gray-6:#868e96;--color-gray-7:#495057;--color-gray-8:#343a40;--color-gray-9:#212529;--color-red-0:#fff5f5;--color-red-1:#ffe3e3;--color-red-2:#ffc9c9;--color-red-3:#ffa8a8;--color-red-4:#ff8787;--color-red-5:#ff6b6b;--color-red-6:#fa5252;--color-red-7:#f03e3e;--color-red-8:#e03131;--color-red-9:#c92a2a;--color-pink-0:#fdf6f8;--color-pink-1:#f7e4e9;--color-pink-2:#edc2d0;--color-pink-3:#dd9bb0;--color-pink-4:#c97a93;--color-pink-5:#b26179;--color-pink-6:#954d65;--color-pink-7:#7a3e52;--color-pink-8:#603140;--color-pink-9:#4d2733;--color-grape-0:#f8f0fc;--color-grape-1:#f3d9fa;--color-grape-2:#eebefa;--color-grape-3:#e599f7;--color-grape-4:#da77f2;--color-grape-5:#cc5de8;--color-grape-6:#be4bdb;--color-grape-7:#ae3ec9;--color-grape-8:#9c36b5;--color-grape-9:#862e9c;--color-violet-0:#f3f0ff;--color-violet-1:#e5dbff;--color-violet-2:#d0bfff;--color-violet-3:#b197fc;--color-violet-4:#9775fa;--color-violet-5:#845ef7;--color-violet-6:#7950f2;--color-violet-7:#7048e8;--color-violet-8:#6741d9;--color-violet-9:#5f3dc4;--color-indigo-0:#edf2ff;--color-indigo-1:#dbe4ff;--color-indigo-2:#bac8ff;--color-indigo-3:#91a7ff;--color-indigo-4:#748ffc;--color-indigo-5:#5c7cfa;--color-indigo-6:#4c6ef5;--color-indigo-7:#4263eb;--color-indigo-8:#3b5bdb;--color-indigo-9:#364fc7;--color-blue-0:#e7f5ff;--color-blue-1:#d0ebff;--color-blue-2:#a5d8ff;--color-blue-3:#74c0fc;--color-blue-4:#4dabf7;--color-blue-5:#339af0;--color-blue-6:#228be6;--color-blue-7:#1c7ed6;--color-blue-8:#1971c2;--color-blue-9:#1864ab;--color-cyan-0:#e3fafc;--color-cyan-1:#c5f6fa;--color-cyan-2:#99e9f2;--color-cyan-3:#66d9e8;--color-cyan-4:#3bc9db;--color-cyan-5:#22b8cf;--color-cyan-6:#15aabf;--color-cyan-7:#1098ad;--color-cyan-8:#0c8599;--color-cyan-9:#0b7285;--color-teal-0:#e6fcf5;--color-teal-1:#c3fae8;--color-teal-2:#96f2d7;--color-teal-3:#63e6be;--color-teal-4:#38d9a9;--color-teal-5:#20c997;--color-teal-6:#12b886;--color-teal-7:#0ca678;--color-teal-8:#099268;--color-teal-9:#087f5b;--color-green-0:#ebfbee;--color-green-1:#d3f9d8;--color-green-2:#b2f2bb;--color-green-3:#8ce99a;--color-green-4:#69db7c;--color-green-5:#51cf66;--color-green-6:#40c057;--color-green-7:#37b24d;--color-green-8:#2f9e44;--color-green-9:#2b8a3e;--color-lime-0:#f4fce3;--color-lime-1:#e9fac8;--color-lime-2:#d8f5a2;--color-lime-3:#c0eb75;--color-lime-4:#a9e34b;--color-lime-5:#94d82d;--color-lime-6:#82c91e;--color-lime-7:#74b816;--color-lime-8:#66a80f;--color-lime-9:#5c940d;--color-yellow-0:#fff9db;--color-yellow-1:#fff3bf;--color-yellow-2:#ffec99;--color-yellow-3:#ffe066;--color-yellow-4:#ffd43b;--color-yellow-5:#fcc419;--color-yellow-6:#fab005;--color-yellow-7:#f59f00;--color-yellow-8:#f08c00;--color-yellow-9:#e67700;--color-orange-0:#fff4e6;--color-orange-1:#ffe8cc;--color-orange-2:#ffd8a8;--color-orange-3:#ffc078;--color-orange-4:#ffa94d;--color-orange-5:#ff922b;--color-orange-6:#fd7e14;--color-orange-7:#f76707;--color-orange-8:#e8590c;--color-orange-9:#d9480f}

package/dist/runtime/styles/light-theme.css

@@ -1 +1 @@
-:root{@mixin light-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-black);--color-text:#000;--color-body:#fff;--color-error:var(--color-red-6);--color-placeholder:var(--color-gray-5);--color-anchor:var(--color-blue-6);--color-default:var(--color-white);--color-default-hover:var(--color-gray-0);--color-default-color:var(--color-black);--color-default-border:var(--color-gray-4);--color-dimmed:var(--color-gray-6);--color-disabled:var(--color-gray-2);--color-disabled-text:var(--color-gray-5);--color-disabled-border:var(--color-gray-3);--color-dark-color:var(--color-dark-filled);--color-dark-filled:var(--color-dark-6);--color-dark-filled-hover:var(--color-dark-7);--color-dark-light:rgba(46,46,46,.1);--color-dark-light-hover:rgba(46,46,46,.12);--color-dark-light-color:var(--color-dark-6);--color-dark-outline:var(--color-dark-6);--color-dark-outline-hover:rgba(46,46,46,.05);--color-gray-color:var(--color-gray-filled);--color-gray-filled:var(--color-gray-6);--color-gray-filled-hover:var(--color-gray-7);--color-gray-light:hsla(210,7%,56%,.1);--color-gray-light-hover:hsla(210,7%,56%,.12);--color-gray-light-color:var(--color-gray-6);--color-gray-outline:var(--color-gray-6);--color-gray-outline-hover:hsla(210,7%,56%,.05);--color-red-color:var(--color-red-filled);--color-red-filled:var(--color-red-6);--color-red-filled-hover:var(--color-red-7);--color-red-light:rgba(250,82,82,.1);--color-red-light-hover:rgba(250,82,82,.12);--color-red-light-color:var(--color-red-6);--color-red-outline:var(--color-red-6);--color-red-outline-hover:rgba(250,82,82,.05);--color-pink-color:var(--color-pink-filled);--color-pink-filled:var(--color-pink-6);--color-pink-filled-hover:var(--color-pink-7);--color-pink-light:rgba(230,73,128,.1);--color-pink-light-hover:rgba(230,73,128,.12);--color-pink-light-color:var(--color-pink-6);--color-pink-outline:var(--color-pink-6);--color-pink-outline-hover:rgba(230,73,128,.05);--color-grape-color:var(--color-grape-filled);--color-grape-filled:var(--color-grape-6);--color-grape-filled-hover:var(--color-grape-7);--color-grape-light:rgba(190,75,219,.1);--color-grape-light-hover:rgba(190,75,219,.12);--color-grape-light-color:var(--color-grape-6);--color-grape-outline:var(--color-grape-6);--color-grape-outline-hover:rgba(190,75,219,.05);--color-violet-color:var(--color-violet-filled);--color-violet-filled:var(--color-violet-6);--color-violet-filled-hover:var(--color-violet-7);--color-violet-light:rgba(121,80,242,.1);--color-violet-light-hover:rgba(121,80,242,.12);--color-violet-light-color:var(--color-violet-6);--color-violet-outline:var(--color-violet-6);--color-violet-outline-hover:rgba(121,80,242,.05);--color-indigo-color:var(--color-indigo-filled);--color-indigo-filled:var(--color-indigo-6);--color-indigo-filled-hover:var(--color-indigo-7);--color-indigo-light:rgba(76,110,245,.1);--color-indigo-light-hover:rgba(76,110,245,.12);--color-indigo-light-color:var(--color-indigo-6);--color-indigo-outline:var(--color-indigo-6);--color-indigo-outline-hover:rgba(76,110,245,.05);--color-blue-color:var(--color-blue-filled);--color-blue-filled:var(--color-blue-6);--color-blue-filled-hover:var(--color-blue-7);--color-blue-light:rgba(34,139,230,.1);--color-blue-light-hover:rgba(34,139,230,.12);--color-blue-light-color:var(--color-blue-6);--color-blue-outline:var(--color-blue-6);--color-blue-outline-hover:rgba(34,139,230,.05);--color-cyan-color:var(--color-cyan-filled);--color-cyan-filled:var(--color-cyan-6);--color-cyan-filled-hover:var(--color-cyan-7);--color-cyan-light:rgba(21,170,191,.1);--color-cyan-light-hover:rgba(21,170,191,.12);--color-cyan-light-color:var(--color-cyan-6);--color-cyan-outline:var(--color-cyan-6);--color-cyan-outline-hover:rgba(21,170,191,.05);--color-teal-color:var(--color-teal-filled);--color-teal-filled:var(--color-teal-6);--color-teal-filled-hover:var(--color-teal-7);--color-teal-light:rgba(18,184,134,.1);--color-teal-light-hover:rgba(18,184,134,.12);--color-teal-light-color:var(--color-teal-6);--color-teal-outline:var(--color-teal-6);--color-teal-outline-hover:rgba(18,184,134,.05);--color-green-color:var(--color-green-filled);--color-green-filled:var(--color-green-6);--color-green-filled-hover:var(--color-green-7);--color-green-light:rgba(64,192,87,.1);--color-green-light-hover:rgba(64,192,87,.12);--color-green-light-color:var(--color-green-6);--color-green-outline:var(--color-green-6);--color-green-outline-hover:rgba(64,192,87,.05);--color-lime-color:var(--color-lime-filled);--color-lime-filled:var(--color-lime-6);--color-lime-filled-hover:var(--color-lime-7);--color-lime-light:rgba(130,201,30,.1);--color-lime-light-hover:rgba(130,201,30,.12);--color-lime-light-color:var(--color-lime-6);--color-lime-outline:var(--color-lime-6);--color-lime-outline-hover:rgba(130,201,30,.05);--color-yellow-color:var(--color-yellow-filled);--color-yellow-filled:var(--color-yellow-6);--color-yellow-filled-hover:var(--color-yellow-7);--color-yellow-light:rgba(250,176,5,.1);--color-yellow-light-hover:rgba(250,176,5,.12);--color-yellow-light-color:var(--color-yellow-6);--color-yellow-outline:var(--color-yellow-6);--color-yellow-outline-hover:rgba(250,176,5,.05);--color-orange-color:var(--color-orange-filled);--color-orange-filled:var(--color-orange-6);--color-orange-filled-hover:var(--color-orange-7);--color-orange-light:rgba(253,126,20,.1);--color-orange-light-hover:rgba(253,126,20,.12);--color-orange-light-color:var(--color-orange-6);--color-orange-outline:var(--color-orange-6);--color-orange-outline-hover:rgba(253,126,20,.05)}}
+:root{@mixin light-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-black);--color-text:#000;--color-body:#fff;--color-error:var(--color-red-6);--color-placeholder:var(--color-gray-5);--color-anchor:var(--color-blue-6);--color-default:var(--color-white);--color-default-hover:var(--color-gray-0);--color-default-color:var(--color-black);--color-default-border:var(--color-gray-4);--color-dimmed:var(--color-gray-6);--color-disabled:var(--color-gray-2);--color-disabled-text:var(--color-gray-5);--color-disabled-border:var(--color-gray-3);--color-dark-color:var(--color-dark-filled);--color-dark-filled:var(--color-dark-6);--color-dark-filled-hover:var(--color-dark-7);--color-dark-light:alpha(var(--color-dark-6),0.1);--color-dark-light-hover:alpha(var(--color-dark-6),0.12);--color-dark-light-color:var(--color-dark-6);--color-dark-outline:var(--color-dark-6);--color-dark-outline-hover:alpha(var(--color-dark-6),0.05);--color-gray-color:var(--color-gray-filled);--color-gray-filled:var(--color-gray-6);--color-gray-filled-hover:var(--color-gray-7);--color-gray-light:alpha(var(--color-gray-6),0.1);--color-gray-light-hover:alpha(var(--color-gray-6),0.12);--color-gray-light-color:var(--color-gray-6);--color-gray-outline:var(--color-gray-6);--color-gray-outline-hover:alpha(var(--color-gray-6),0.05);--color-red-color:var(--color-red-filled);--color-red-filled:var(--color-red-6);--color-red-filled-hover:var(--color-red-7);--color-red-light:alpha(var(--color-red-8),.1);--color-red-light-hover:alpha(var(--color-red-8),.12);--color-red-light-color:var(--color-red-6);--color-red-outline:var(--color-red-6);--color-red-outline-hover:alpha(var(--color-red-8),.01);--color-pink-color:var(--color-pink-filled);--color-pink-filled:var(--color-pink-6);--color-pink-filled-hover:var(--color-pink-7);--color-pink-light:alpha(var(--color-pink-6),0.1);--color-pink-light-hover:alpha(var(--color-pink-6),0.12);--color-pink-light-color:var(--color-pink-6);--color-pink-outline:var(--color-pink-6);--color-pink-outline-hover:alpha(var(--color-pink-6),0.05);--color-grape-color:var(--color-grape-filled);--color-grape-filled:var(--color-grape-6);--color-grape-filled-hover:var(--color-grape-7);--color-grape-light:alpha(var(--color-grape-6),0.1);--color-grape-light-hover:alpha(var(--color-grape-6),0.12);--color-grape-light-color:var(--color-grape-6);--color-grape-outline:var(--color-grape-6);--color-grape-outline-hover:alpha(var(--color-grape-6),0.05);--color-violet-color:var(--color-violet-filled);--color-violet-filled:var(--color-violet-6);--color-violet-filled-hover:var(--color-violet-7);--color-violet-light:alpha(var(--color-violet-6),0.1);--color-violet-light-hover:alpha(var(--color-violet-6),0.12);--color-violet-light-color:var(--color-violet-6);--color-violet-outline:var(--color-violet-6);--color-violet-outline-hover:alpha(var(--color-violet-6),0.05);--color-indigo-color:var(--color-indigo-filled);--color-indigo-filled:var(--color-indigo-6);--color-indigo-filled-hover:var(--color-indigo-7);--color-indigo-light:alpha(var(--color-indigo-6),0.1);--color-indigo-light-hover:alpha(var(--color-indigo-6),0.12);--color-indigo-light-color:var(--color-indigo-6);--color-indigo-outline:var(--color-indigo-6);--color-indigo-outline-hover:alpha(var(--color-indigo-6),0.05);--color-blue-color:var(--color-blue-filled);--color-blue-filled:var(--color-blue-6);--color-blue-filled-hover:var(--color-blue-7);--color-blue-light:alpha(var(--color-blue-6),0.1);--color-blue-light-hover:alpha(var(--color-blue-6),0.12);--color-blue-light-color:var(--color-blue-6);--color-blue-outline:var(--color-blue-6);--color-blue-outline-hover:alpha(var(--color-blue-6),0.05);--color-cyan-color:var(--color-cyan-filled);--color-cyan-filled:var(--color-cyan-6);--color-cyan-filled-hover:var(--color-cyan-7);--color-cyan-light:alpha(var(--color-cyan-6),0.1);--color-cyan-light-hover:alpha(var(--color-cyan-6),0.12);--color-cyan-light-color:var(--color-cyan-6);--color-cyan-outline:var(--color-cyan-6);--color-cyan-outline-hover:alpha(var(--color-cyan-6),0.05);--color-teal-color:var(--color-teal-filled);--color-teal-filled:var(--color-teal-6);--color-teal-filled-hover:var(--color-teal-7);--color-teal-light:alpha(var(--color-teal-6),0.1);--color-teal-light-hover:alpha(var(--color-teal-6),0.12);--color-teal-light-color:var(--color-teal-6);--color-teal-outline:var(--color-teal-6);--color-teal-outline-hover:alpha(var(--color-teal-6),0.05);--color-green-color:var(--color-green-filled);--color-green-filled:var(--color-green-6);--color-green-filled-hover:var(--color-green-7);--color-green-light:alpha(var(--color-green-6),0.1);--color-green-light-hover:alpha(var(--color-green-6),0.12);--color-green-light-color:var(--color-green-6);--color-green-outline:var(--color-green-6);--color-green-outline-hover:alpha(var(--color-green-6),0.05);--color-lime-color:var(--color-lime-filled);--color-lime-filled:var(--color-lime-6);--color-lime-filled-hover:var(--color-lime-7);--color-lime-light:alpha(var(--color-lime-6),0.1);--color-lime-light-hover:alpha(var(--color-lime-6),0.12);--color-lime-light-color:var(--color-lime-6);--color-lime-outline:var(--color-lime-6);--color-lime-outline-hover:alpha(var(--color-lime-6),0.05);--color-yellow-color:var(--color-yellow-filled);--color-yellow-filled:var(--color-yellow-6);--color-yellow-filled-hover:var(--color-yellow-7);--color-yellow-light:alpha(var(--color-yellow-6),0.1);--color-yellow-light-hover:alpha(var(--color-yellow-6),0.12);--color-yellow-light-color:var(--color-yellow-6);--color-yellow-outline:var(--color-yellow-6);--color-yellow-outline-hover:alpha(var(--color-yellow-6),0.05);--color-orange-color:var(--color-orange-filled);--color-orange-filled:var(--color-orange-6);--color-orange-filled-hover:var(--color-orange-7);--color-orange-light:alpha(var(--color-orange-6),0.1);--color-orange-light-hover:alpha(var(--color-orange-6),0.12);--color-orange-light-color:var(--color-orange-6);--color-orange-outline:var(--color-orange-6);--color-orange-outline-hover:alpha(var(--color-orange-6),0.05)}}

package/dist/runtime/types/theme.d.ts

@@ -16,7 +16,7 @@ type ShadedColor = `dark.${NuanceColorShade}` | `slate.${NuanceColorShade}` | `g
 export type NuanceDefaultThemeColor = 'dark' | 'slate' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal' | 'black' | 'white';
 export type NuanceColor = NuanceDefaultThemeColor | ShadedColor;
 export type NuanceTheme = 'light' | 'dark';
-export interface UiKitGradient {
+export interface NuanceGradient {
     bg?: NuanceColor | string;
     from: NuanceColor | string;
     to: NuanceColor | string;

package/dist/runtime/utils/color-functions/get-gradient.d.ts

@@ -1,3 +1,3 @@
-import type { NuanceTheme, UiKitGradient } from '@nui/types';
-export declare function getGradient(gradient: UiKitGradient | undefined, theme: NuanceTheme): string;
-export declare function getGradientOutline(gradient: UiKitGradient | undefined, theme: NuanceTheme): string;
+import type { NuanceGradient, NuanceTheme } from '@nui/types';
+export declare function getGradient(gradient: NuanceGradient | undefined, theme: NuanceTheme): string;
+export declare function getGradientOutline(gradient: NuanceGradient | undefined, theme: NuanceTheme): string;

package/dist/runtime/utils/tree.d.ts

@@ -5,6 +5,25 @@ export interface TreeNode<T extends string = string> {
     /** Optional array of child nodes */
     children?: TreeNode<T>[];
 }
+/**
+ * Filters tree nodes based on a predicate function.
+ * Returns a new tree containing only nodes that match the predicate.
+ * Parent nodes are kept if they have matching children.
+ *
+ * @template Node - The type of tree nodes
+ * @param {Node[]} tree - The tree to filter
+ * @param {(node: Node) => boolean} predicate - Function to test each node
+ * @returns {Node[]} New filtered tree
+ * @example
+ * const tree = [
+ *   { value: 'folder', children: [{ value: 'file1' }, { value: 'file2' }] },
+ *   { value: 'file3' }
+ * ]
+ * // Keep only folders (nodes with children)
+ * filterTree(tree, node => node.children && node.children.length > 0)
+ * // Result: [{ value: 'folder', children: [{ value: 'file1' }, { value: 'file2' }] }]
+ */
+export declare function filterTree<Node extends TreeNode = TreeNode>(tree: Node[], predicate: (node: Node) => boolean): Node[];
 /**
  * Searches for a tree item by its value using depth-first search.
  * @template T - The type of node values

package/dist/runtime/utils/tree.js

@@ -7,6 +7,21 @@ function traverse(nodes) {
   }
   return result;
 }
+export function filterTree(tree, predicate) {
+  const result = [];
+  for (const node of tree) {
+    const filteredChildren = node.children?.length ? filterTree(node.children, predicate) : void 0;
+    if (predicate(node) || filteredChildren && filteredChildren.length > 0) {
+      const newNode = { ...node };
+      if (filteredChildren && filteredChildren.length > 0)
+        newNode.children = filteredChildren;
+      else
+        delete newNode.children;
+      result.push(newNode);
+    }
+  }
+  return result;
+}
 export function findTreeItem(items, value) {
   for (const item of items) {
     if (item.value === value)
@@ -66,20 +81,5 @@ export function getTreeItemsBetween(tree, start, end) {
 }
 export function removeTreeNodes(tree, valuesToRemove) {
   const removeSet = new Set(valuesToRemove);
-  function recurse(nodes) {
-    const result = [];
-    for (const node of nodes) {
-      if (removeSet.has(node.value))
-        continue;
-      const newNode = { ...node };
-      if (node.children?.length) {
-        const filteredChildren = recurse(node.children);
-        if (filteredChildren.length > 0)
-          newNode.children = filteredChildren;
-      }
-      result.push(newNode);
-    }
-    return result;
-  }
-  return recurse(tree);
+  return filterTree(tree, (n) => !removeSet.has(n.value));
 }

package/dist/runtime/utils/vars-resolver/create-variant-color-resolver.d.ts

@@ -1,4 +1,4 @@
-import type { NuanceColor, NuanceTheme, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
 interface VariantColorResolverResult {
     background: string;
     hover: string;
@@ -8,7 +8,7 @@ interface VariantColorResolverResult {
 export declare function createVariantColorResolver({ color, variant, gradient, theme, }: {
     color: NuanceColor | string | undefined;
     variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     theme: NuanceTheme;
 }): VariantColorResolverResult;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.8",
+	"version": "0.1.10",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",