nuance-ui 0.2.28 → 0.2.30

package/dist/runtime/components/timeline.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { useVarsResolver } from "@nui/composables";
+import { getRadius, getSize, getThemeColor, rem } from "@nui/utils";
+import { computed } from "vue";
+import Box from "./box.vue";
+const {
+  items,
+  radius = "full",
+  align = "left",
+  size,
+  lineWidth = 4,
+  color,
+  classes,
+  mod,
+  reverse,
+  orientation = "vertical",
+  valueKey = "value"
+} = defineProps({
+  items: { type: Array, required: true },
+  color: { type: null, required: false },
+  radius: { type: [String, Number], required: false },
+  size: { type: [String, Object], required: false },
+  align: { type: String, required: false },
+  lineWidth: { type: [Number, String], required: false },
+  reverse: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  valueKey: { type: String, required: false },
+  classes: { type: Object, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+defineEmits(["select"]);
+defineSlots();
+const modelValue = defineModel({ type: [String, Number, null] });
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--tl-size": getSize(size, "tl-size"),
+    "--tl-line-width": rem(lineWidth),
+    "--tl-radius": radius === void 0 ? void 0 : getRadius(radius),
+    "--tl-color": color ? getThemeColor(color, theme) : void 0
+  }
+}));
+const currentStepIx = computed(() => {
+  const value = modelValue.value;
+  if (value == null)
+    return -1;
+  if (typeof value === "string") {
+    return items.findIndex((item) => item[valueKey] === value);
+  }
+  return reverse ? items.length - 1 - value : value;
+});
+function getActive(ix) {
+  if (currentStepIx.value === -1)
+    return false;
+  if (ix === currentStepIx.value)
+    return true;
+  if (reverse) {
+    return ix > currentStepIx.value;
+  } else {
+    return ix < currentStepIx.value;
+  }
+}
+</script>
+
+<template>
+	<Box
+		:style='style.root'
+		:class='[$style.root, classes?.root]'
+		:mod='[{ align, orientation }, mod]'
+	>
+		<Box
+			v-for='(item, ix) in items'
+			:key='item.id'
+			:class='[$style.item, classes?.item]'
+			:mod='{
+  "active": getActive(ix),
+  "line-active": getActive(ix)
+}'
+			@click='$emit("select", item, $event)'
+		>
+			<Box
+				:class='[$style.bullet, classes?.bullet]'
+				:mod='{
+  align,
+  "active": getActive(ix),
+  "with-child": !!item?.icon || !!$slots.bullet
+}'
+			>
+				<slot name='bullet' :item>
+					<Icon v-if='item?.icon' :name='item.icon' />
+				</slot>
+			</Box>
+
+			<div :class='[$style.body, classes?.body]'>
+				<div v-if='item.label' :class='[$style.label, classes?.label]'>
+					<slot name='label' :item>
+						{{ item?.label }}
+					</slot>
+				</div>
+				<div :class='[$style.content, classes?.content]'>
+					<slot name='content' :item>
+						{{ item?.description }}
+					</slot>
+				</div>
+			</div>
+		</Box>
+	</Box>
+</template>
+
+<style module>
+.root{--tl-size-xs:1rem;--tl-size-sm:1.25rem;--tl-size-md:1.5rem;--tl-size-lg:1.75rem;--tl-size-xl:2rem;--tl-size:var(--tl-size-md);--tl-offset:calc((var(--tl-size) - var(--tl-line-width))/2);--tl-line-width:.25rem;--tl-radius:1000px;--tl-color:var(--color-primary-filled)}.root:where([data-align=left]){padding-inline-start:var(--tl-offset)}.root:where([data-align=right]){padding-inline-end:var(--tl-offset)}.root:where([data-orientation=horizontal]){display:flex;flex-direction:row;padding-block-start:var(--tl-offset);padding-inline:0}.item{--tli-bd-style:solid;--tli-bd-color:var(--color-primary-filled);--item-border:var(--tl-line-width) var(--tli-bd-style) var(--tli-bd-color);color:var(--color-text);position:relative}.item:before{border-inline-start:var(--item-border);bottom:0;content:"";display:var(--timeline-line-display,none);left:var(--timeline-line-left,0);pointer-events:none;position:absolute;right:var(--timeline-line-right,0);top:0}.root[data-align=left] .item:before{--timeline-line-left:calc(var(--tl-line-width)*-1);--timeline-line-right:auto;@mixin rtl{--timeline-line-left:auto;--timeline-line-right:calc(var(--tl-line-width)*-1)}}.root[data-align=right] .item:before{--timeline-line-left:auto;--timeline-line-right:calc(var(--tl-line-width)*-1);@mixin rtl{--timeline-line-left:calc(var(--tl-line-width)*-1);--timeline-line-right:auto}}.root:where([data-align=left]) .item{padding-inline-start:var(--tl-offset);text-align:left}.root:where([data-align=right]) .item{padding-inline-end:var(--tl-offset);text-align:right}.root:where([data-orientation=horizontal]) .item{flex:1;padding-block-start:var(--tl-offset);padding-inline:0;text-align:center}.root:where([data-orientation=horizontal]) .item:before{--timeline-line-top:calc((var(--tl-size) - var(--tl-line-width))/2);border-inline-start:none;border-top:var(--item-border);bottom:auto;height:var(--tl-line-width);left:0;right:0;top:var(--timeline-line-top,0)}.root:where([data-orientation=horizontal]) .item:where(:not(:last-of-type)){--timeline-line-display:block;padding-bottom:0}.item{@mixin where-light{--tli-bd-color:var(--color-gray-3)}}.item{@mixin where-dark{--tli-bd-color:var(--color-dark-4)}}.item:where([data-line-active]){--tli-bd-color:var(--tl-color)}.item:where(:not(:last-of-type)){--timeline-line-display:block;padding-bottom:var(--spacing-xl)}.root:where([data-orientation=horizontal]) .item:where(:not(:first-of-type)){padding-bottom:0}.bullet{--tl-bullet-offset:calc(var(--tl-size)/2*-1 + var(--tl-line-width)/2*-1);align-items:center;background-color:var(--color-body);border:var(--tl-line-width) solid;border-radius:var(--tli-radius,var(--tl-radius));color:var(--color-text);display:flex;height:var(--tl-size);justify-content:center;position:absolute;top:0;width:var(--tl-size);@mixin where-light{border-color:var(--color-gray-3)}@mixin where-dark{border-color:var(--color-dark-4)}}.root:where([data-align=left]) .bullet{left:var(--tl-bullet-offset);right:auto;@mixin where-rtl{left:auto;right:var(--tl-bullet-offset)}}.root:where([data-align=right]) .bullet{left:auto;right:var(--tl-bullet-offset);@mixin where-rtl{left:var(--tl-bullet-offset);right:auto}}.root:where([data-orientation=horizontal]) .bullet{--tl-bullet-offset:0}.bullet:where([data-with-child]){border-width:var(--tl-line-width);@mixin where-light{background-color:var(--color-gray-3)}@mixin where-dark{background-color:var(--color-dark-4)}}.bullet:where([data-active]){background-color:var(--color-white);border-color:var(--tli-color,var(--tl-color));color:var(--tl-icon-color,var(--color-white))}.bullet:where([data-active]):where([data-with-child]){background-color:var(--tli-color,var(--tl-color));color:var(--tl-icon-color,var(--color-white))}.root:where([data-align=left]) .body{padding-inline-start:var(--tl-offset);text-align:left;@mixin where-rtl{text-align:right}}.root:where([data-align=right]) .body{padding-inline-end:var(--tl-offset);text-align:right;@mixin where-rtl{text-align:left}}.root:where([data-orientation=horizontal]) .body{padding-block-start:calc(var(--tl-offset) + var(--spacing-xs));padding-inline:0}.label{font-weight:600;line-height:var(--tl-size)}.content{color:var(--color-dimmed)}
+</style>

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

@@ -0,0 +1,93 @@
+import type { AnyString, Classes, DynamicSlots, NuanceColor, NuanceRadius, NuanceSize, SlotProps } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface TimelineItem {
+    /** Unique item id */
+    id: string;
+    label: string;
+    active?: boolean;
+    description?: string;
+    /** Icon inside bullet */
+    icon?: string;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`,
+     * numbers are converted to rem
+     * @default 'xl'
+     */
+    radius?: NuanceRadius;
+    /**
+     * Key of `theme.colors` or any valid CSS color to control active item colors
+     * @default theme.primaryColor
+     */
+    color?: NuanceColor;
+    /** Controls line border style @default 'solid' */
+    lineVariant?: 'solid' | 'dashed' | 'dotted';
+    /** Value used for model-based active state */
+    value?: string | number;
+    slot?: string;
+    [key: string]: any;
+}
+export interface TimelineVars {
+    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius';
+}
+export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
+    bullet?: SlotProps<T>;
+    label?: SlotProps<T>;
+    content?: SlotProps<T>;
+} & DynamicSlots<T, 'bullet' | 'label' | 'content', {
+    item: T;
+}>;
+export interface TimelineEmits<T extends TimelineItem = TimelineItem> {
+    select: [item: T, event: Event];
+}
+export interface TimelineProps<T extends TimelineItem> extends BoxProps {
+    items: T[];
+    /**
+     * Key of `theme.colors` or any valid CSS color to control active item colors
+     * @default theme.primaryColor
+     */
+    color?: NuanceColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem
+     * @default 'full'
+     */
+    radius?: NuanceRadius;
+    /** Size of the bullet @default 20 */
+    size?: NuanceSize | AnyString;
+    /** Position of content relative to the bullet @default 'left' */
+    align?: 'right' | 'left';
+    /** Control width of the line */
+    lineWidth?: number | string;
+    /** If set, the active items direction is reversed without reversing items order @default false */
+    reverse?: boolean;
+    /** @default 'vertical' */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Key of item used to match against model value.
+     * @default 'value'
+     */
+    valueKey?: keyof T & string;
+    classes?: Classes<'root' | 'item' | 'body' | 'content' | 'bullet' | 'label'>;
+}
+declare const __VLS_export: <T extends TimelineItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(TimelineProps<T> & {
+        modelValue?: string | number | null;
+    }) & {
+        onSelect?: ((item: T, event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TimelineSlots<T>;
+    emit: ((evt: "select", item: T, event: Event) => void) & ((event: "update:modelValue", value: string | number | null | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useTheme } from "@nui/composables";
+import { useConfig, useTheme } from "@nui/composables";
 import { getThemeColor } from "@nui/utils";
 import { computed, watch } from "vue";
 import ActionIcon from "../../action-icon/action-icon.vue";
@@ -12,8 +12,8 @@ import { filterTreeItems } from "../lib/filter-tree-items";
 import { useTreeItemHandlers } from "../lib/item-handlers";
 const {
   type = "file",
-  icon = "gravity-ui:folder",
-  trailingIcon = "gravity-ui:folder-open",
+  icon,
+  trailingIcon,
   path,
   name,
   level,
@@ -29,6 +29,9 @@ const {
   children: { type: Array, required: false }
 });
 const { value: theme } = useTheme();
+const { icons } = useConfig();
+const resolvedIcon = computed(() => icon ?? icons.folder);
+const resolvedTrailingIcon = computed(() => trailingIcon ?? icons.folderOpen);
 const isFolder = computed(() => type === "directory");
 const ctx = useTreeState();
 const selected = computed(() => ctx.selected.value.includes(path));
@@ -74,8 +77,8 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 					</template>
 
 					<template v-else-if='isFolder'>
-						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
-						<Icon v-else :class='$style.icon' :name='icon' />
+						<Icon v-if='expanded' :class='$style.icon' :name='resolvedTrailingIcon' />
+						<Icon v-else :class='$style.icon' :name='resolvedIcon' />
 					</template>
 
 					<template v-else>
@@ -91,7 +94,7 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 
 				<template v-if='isFolder' #rightSection>
 					<ActionIcon
-						icon='gravity-ui:chevron-down'
+						:icon='icons.chevronDown'
 						size='sm'
 						:color='ctx.color'
 						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
+import { useConfig, useVarsResolver } from "@nui/composables";
 import { getSize } from "@nui/utils";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 import { useTemplateRef } from "vue";
@@ -13,7 +13,7 @@ const {
   orientation,
   variant = "subtle",
   size = "md",
-  iconResolver = () => ({ icon: "gravity-ui:file" }),
+  iconResolver,
   removable = false,
   selectable = false,
   loadBranch,
@@ -32,6 +32,8 @@ const {
   attr: { type: String, required: false }
 });
 const emit = defineEmits(["delete"]);
+const { icons } = useConfig();
+const resolvedIconResolver = iconResolver ?? (() => ({ icon: icons.file }));
 const active = defineModel("active", { type: [String, null], ...{ default: null } });
 const selected = defineModel("selected", { type: Array, ...{ default: [] } });
 const expanded = defineModel("expanded", { type: Array, ...{ default: [] } });
@@ -47,7 +49,7 @@ useProvideTreeState({
   active,
   selected,
   expanded,
-  iconResolver,
+  iconResolver: resolvedIconResolver,
   size,
   color,
   variant,

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

@@ -1,5 +1,6 @@
 export * from './create-strict-injection.js';
 export * from './use-active-link.js';
+export * from './use-config.js';
 export * from './use-date-config.js';
 export * from './use-floating-indicator.js';
 export * from './use-selectable-group.js';

package/dist/runtime/composables/index.js

@@ -1,5 +1,6 @@
 export * from "./create-strict-injection.js";
 export * from "./use-active-link.js";
+export * from "./use-config.js";
 export * from "./use-date-config.js";
 export * from "./use-floating-indicator.js";
 export * from "./use-selectable-group.js";

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

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

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

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

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-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-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}
+:root{--color-white:#fff;--color-black:#000;--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-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-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-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-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/types/icons.d.ts

@@ -0,0 +1,51 @@
+/** Registry of icon names used by components. Override to swap the icon pack. */
+export interface NuanceIcons {
+    /** Close / clear / dismiss */
+    close: string;
+    /** Confirmation checkmark */
+    check: string;
+    /** Indeterminate / remove */
+    minus: string;
+    /** Add */
+    plus: string;
+    /** Chevron pointing right */
+    chevronRight: string;
+    /** Chevron pointing left */
+    chevronLeft: string;
+    /** Chevron pointing down */
+    chevronDown: string;
+    /** Chevron pointing up */
+    chevronUp: string;
+    /** Vertical expand chevrons */
+    selectExpand: string;
+    /** Email field */
+    email: string;
+    /** Reveal password */
+    passwordShow: string;
+    /** Hide password */
+    passwordHide: string;
+    /** Calendar / date field */
+    calendar: string;
+    /** Clock / time field */
+    clock: string;
+    /** User avatar placeholder */
+    person: string;
+    /** Light theme */
+    sun: string;
+    /** Dark theme */
+    moon: string;
+    /** Upload */
+    upload: string;
+    /** File node */
+    file: string;
+    /** Collapsed folder node */
+    folder: string;
+    /** Expanded folder node */
+    folderOpen: string;
+    /** Ascending sort */
+    sortAsc: string;
+    /** Descending sort */
+    sortDesc: string;
+    /** Unsorted */
+    sortOff: string;
+}

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

@@ -1,5 +1,22 @@
+import type { VNode } from 'vue';
+export type * from './icons';
 export type * from './styling';
 export type * from './theme';
 /** Value that may be synchronous or wrapped in a promise. */
 export type MaybePromise<T = unknown> = T | Promise<T>;
 export type AnyString = string & {};
+export type DynamicSlotsKeys<Name extends string | undefined, Suffix extends string | undefined = undefined> = (Name extends string ? Suffix extends string ? Name | `${Name}-${Suffix}` : Name : never);
+export type SlotProps<T extends {
+    slot?: string;
+}> = (props: {
+    item: T;
+}) => VNode[];
+export type DynamicSlots<T extends {
+    slot?: string;
+}, Suffix extends string | undefined = undefined, ExtraProps extends object = object> = {
+    [K in DynamicSlotsKeys<T['slot'], Suffix>]?: (props: {
+        item: Extract<T, {
+            slot: K extends `${infer Base}-${Suffix}` ? Base : K;
+        }>;
+    } & ExtraProps) => VNode[];
+};

package/dist/runtime/utils/icons/default-icons.d.ts

@@ -0,0 +1,3 @@
+import type { NuanceIcons } from '@nui/types';
+/** Default icon registry. Maps every component icon to its `gravity-ui` id. */
+export declare const DEFAULT_ICONS: NuanceIcons;

package/dist/runtime/utils/icons/default-icons.js

@@ -0,0 +1,33 @@
+export const DEFAULT_ICONS = {
+  // ─── Actions ───
+  close: "gravity-ui:xmark",
+  check: "gravity-ui:check",
+  minus: "gravity-ui:minus",
+  plus: "gravity-ui:plus",
+  // ─── Chevrons ───
+  chevronRight: "gravity-ui:chevron-right",
+  chevronLeft: "gravity-ui:chevron-left",
+  chevronDown: "gravity-ui:chevron-down",
+  chevronUp: "gravity-ui:chevron-up",
+  selectExpand: "gravity-ui:chevrons-expand-vertical",
+  // ─── Inputs ───
+  email: "gravity-ui:at",
+  passwordShow: "gravity-ui:eye",
+  passwordHide: "gravity-ui:eye-slash",
+  calendar: "gravity-ui:calendar",
+  clock: "gravity-ui:clock",
+  // ─── User ───
+  person: "gravity-ui:person",
+  // ─── Theme ───
+  sun: "gravity-ui:sun",
+  moon: "gravity-ui:moon",
+  // ─── Files & tree ───
+  upload: "gravity-ui:arrow-shape-up-from-line",
+  file: "gravity-ui:file",
+  folder: "gravity-ui:folder",
+  folderOpen: "gravity-ui:folder-open",
+  // ─── Table sort ───
+  sortAsc: "gravity-ui:bars-descending-align-left-arrow-up",
+  sortDesc: "gravity-ui:bars-descending-align-left-arrow-down",
+  sortOff: "gravity-ui:bars-descending-align-left"
+};

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

@@ -0,0 +1 @@
+export * from './default-icons.js';

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

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

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

@@ -2,5 +2,6 @@ export * from './boolean/index.js';
 export * from './color/index.js';
 export * from './css/index.js';
 export * from './date/index.js';
+export * from './icons/index.js';
 export * from './style/index.js';
 export * from './tree.js';

package/dist/runtime/utils/index.js

@@ -2,5 +2,6 @@ export * from "./boolean/index.js";
 export * from "./color/index.js";
 export * from "./css/index.js";
 export * from "./date/index.js";
+export * from "./icons/index.js";
 export * from "./style/index.js";
 export * from "./tree.js";

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

@@ -1,5 +1,11 @@
 import type { AnyString, NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
-interface VariantColorResolverResult {
+export interface VariantColorResolverOptions {
+    color: NuanceColor | AnyString | undefined;
+    variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    gradient?: NuanceGradient;
+    theme: NuanceTheme;
+}
+export interface VariantColorResolverResult {
     /** Base background CSS value. */
     background: string;
     /** Background CSS value applied on hover. */
@@ -17,10 +23,4 @@ interface VariantColorResolverResult {
  * `default`, `gradient`, `gradient-outline`, `dot` — and falls back to the
  * default `--color-*` tokens when no explicit shade is provided.
  */
-export declare function createVariantColorResolver({ color, variant, gradient, theme, }: {
-    color: NuanceColor | AnyString | undefined;
-    variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline' | 'dot';
-    gradient?: NuanceGradient;
-    theme: NuanceTheme;
-}): VariantColorResolverResult;
-export {};
+export declare function createVariantColorResolver({ color, variant, gradient, theme, }: VariantColorResolverOptions): VariantColorResolverResult;

package/dist/runtime/utils/style/create-variant-color-resolver.js

@@ -8,7 +8,7 @@ export function createVariantColorResolver({
   theme
 }) {
   const parsed = parseThemeColor({ color, theme });
-  if (variant === "filled" || variant === "dot") {
+  if (variant === "filled") {
     const text = "var(--color-white)";
     if (parsed.shade === void 0) {
       return {
@@ -82,7 +82,7 @@ export function createVariantColorResolver({
         deg: gradient?.deg
       }, theme),
       text: "var(--color-white)",
-      border: "1px solid transparent"
+      border: "none"
     };
   }
   if (variant === "gradient-outline") {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.28",
+	"version": "0.2.30",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",