nuance-ui 0.2.34 → 0.2.35

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 NuxtLabs
+Copyright (c) 2026 Igor Iugin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.34",
+  "version": "0.2.35",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,7 +1,6 @@
 import { defineNuxtModule, createResolver, addTypeTemplate, addComponentsDir, addImportsDir, addTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
-import { DEFAULT_GRADIENT } from '../dist/runtime/utils/color/const.js';
-import { DEFAULT_ICONS } from '../dist/runtime/utils/icons/default-icons.js';
+import { DEFAULT_ICONS, DEFAULT_GRADIENT } from '../dist/runtime/utils/index.js';
 
 const SHADES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 function fromName(name) {

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

@@ -27,7 +27,7 @@ export interface TimelineItem {
     [key: string]: any;
 }
 export interface TimelineVars {
-    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius';
+    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius' | '--tl-gap';
 }
 export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
     bullet?: SlotProps<T>;
@@ -57,6 +57,8 @@ export interface TimelineProps<T extends TimelineItem> extends BoxProps {
     align?: 'right' | 'left';
     /** Control width of the line */
     lineWidth?: number | string;
+    /** Gap between items (padding-bottom on each non-last item) */
+    gap?: number | string;
     /** If set, the active items direction is reversed without reversing items order @default false */
     reverse?: boolean;
     /** @default 'vertical' */

package/dist/runtime/components/timeline.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useVarsResolver } from "@nui/composables";
-import { getRadius, getSize, getThemeColor, rem } from "@nui/utils";
+import { getRadius, getSize, getSpacing, getThemeColor, rem } from "@nui/utils";
 import { computed } from "vue";
 import Box from "./box.vue";
 const {
@@ -9,6 +9,7 @@ const {
   align = "left",
   size,
   lineWidth = 4,
+  gap,
   color,
   classes,
   mod,
@@ -22,6 +23,7 @@ const {
   size: { type: [String, Object], required: false },
   align: { type: String, required: false },
   lineWidth: { type: [Number, String], required: false },
+  gap: { type: [Number, String], required: false },
   reverse: { type: Boolean, required: false },
   orientation: { type: String, required: false },
   valueKey: { type: String, required: false },
@@ -37,7 +39,8 @@ const style = useVarsResolver((theme) => ({
     "--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
+    "--tl-color": color ? getThemeColor(color, theme) : void 0,
+    "--tl-gap": getSpacing(gap)
   }
 }));
 const currentStepIx = computed(() => {
@@ -108,5 +111,5 @@ function getActive(ix) {
 </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)}
+.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);--tl-gap:var(--spacing-xl)}.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(--tl-gap)}.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

@@ -27,7 +27,7 @@ export interface TimelineItem {
     [key: string]: any;
 }
 export interface TimelineVars {
-    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius';
+    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius' | '--tl-gap';
 }
 export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
     bullet?: SlotProps<T>;
@@ -57,6 +57,8 @@ export interface TimelineProps<T extends TimelineItem> extends BoxProps {
     align?: 'right' | 'left';
     /** Control width of the line */
     lineWidth?: number | string;
+    /** Gap between items (padding-bottom on each non-last item) */
+    gap?: number | string;
     /** If set, the active items direction is reversed without reversing items order @default false */
     reverse?: boolean;
     /** @default 'vertical' */

package/dist/runtime/utils/color/get-gradient.js

@@ -1,4 +1,4 @@
-import { DEFAULT_GRADIENT } from "./const.js";
+import { DEFAULT_GRADIENT } from "../const/index.js";
 import { parseThemeColor } from "./parse-theme-color.js";
 export function getGradient(gradient, theme) {
   const merged = {

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

@@ -1,4 +1,3 @@
-export * from './const.js';
 export * from './get-color-var.js';
 export * from './get-gradient.js';
 export * from './parse-theme-color.js';

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

@@ -1,4 +1,3 @@
-export * from "./const.js";
 export * from "./get-color-var.js";
 export * from "./get-gradient.js";
 export * from "./parse-theme-color.js";

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

@@ -0,0 +1,33 @@
+export const DEFAULT_ICONS = {
+  // ─── Actions ───
+  close: "lucide:x",
+  check: "lucide:check",
+  minus: "lucide:minus",
+  plus: "lucide:plus",
+  // ─── Chevrons ───
+  chevronRight: "lucide:chevron-right",
+  chevronLeft: "lucide:chevron-left",
+  chevronDown: "lucide:chevron-down",
+  chevronUp: "lucide:chevron-up",
+  selectExpand: "lucide:chevrons-up-down",
+  // ─── Inputs ───
+  email: "lucide:at-sign",
+  passwordShow: "lucide:eye",
+  passwordHide: "lucide:eye-off",
+  calendar: "lucide:calendar",
+  clock: "lucide:clock",
+  // ─── User ───
+  person: "lucide:user",
+  // ─── Theme ───
+  sun: "lucide:sun",
+  moon: "lucide:moon",
+  // ─── Files & tree ───
+  upload: "lucide:upload",
+  file: "lucide:file",
+  folder: "lucide:folder",
+  folderOpen: "lucide:folder-open",
+  // ─── Table sort ───
+  sortAsc: "lucide:arrow-up-narrow-wide",
+  sortDesc: "lucide:arrow-down-wide-narrow",
+  sortOff: "lucide:arrow-up-down"
+};

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

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

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

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

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

@@ -1,7 +1,7 @@
 export * from './boolean/index.js';
 export * from './color/index.js';
+export * from './const/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

@@ -1,7 +1,7 @@
 export * from "./boolean/index.js";
 export * from "./color/index.js";
+export * from "./const/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.js

@@ -1,6 +1,6 @@
-import { DEFAULT_GRADIENT } from "../color/const.js";
 import { getGradient, getGradientOutline } from "../color/get-gradient.js";
 import { getThemeColor, parseThemeColor } from "../color/parse-theme-color.js";
+import { DEFAULT_GRADIENT } from "../const/index.js";
 export function createVariantColorResolver({
   color = "primary",
   variant,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.34",
-	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
+	"version": "0.2.35",
+	"description": "A modern Nuxt UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Igor-Iugin/nuance-ui.git"
@@ -78,6 +78,7 @@
 	},
 	"devDependencies": {
 		"@antfu/eslint-config": "^8.2.0",
+		"@nuxt/icon": "^2.2.1",
 		"@nuxt/devtools": "^3.1.1",
 		"@nuxt/eslint": "1.10.0",
 		"@nuxt/eslint-config": "^1.13.0",

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

@@ -1,33 +0,0 @@
-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

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

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

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