Compare commits

...

2 Commits

Author SHA1 Message Date
unkn0wn 5edab8d12d chore: bump version to 1.00.3 in package.json
Publish to npm / check-and-publish (push) Successful in 22s
2026-06-24 06:47:25 +02:00
unkn0wn c15a6ceff1 refactor: replace icon imports with Lucide icons across components 2026-06-24 06:46:29 +02:00
7 changed files with 25 additions and 57 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "@unkn0wndo3s/nova-design-system", "name": "@unkn0wndo3s/nova-design-system",
"type": "module", "type": "module",
"version": "1.00.2", "version": "1.00.3",
"main": "./src/index.ts", "main": "./src/index.ts",
"description": "Nova Design System — Astro component library", "description": "Nova Design System — Astro component library",
"engines": { "engines": {
+2 -2
View File
@@ -1,5 +1,5 @@
--- ---
import { ProfileIcon } from '../Icons'; import { User } from '@lucide/astro';
export interface Props { export interface Props {
type: 'photo' | 'initials'; type: 'photo' | 'initials';
name: string; name: string;
@@ -18,7 +18,7 @@ const { type, name, image } = Astro.props;
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/> />
<span class="avatar__fallback" style="display:none;"> <span class="avatar__fallback" style="display:none;">
<ProfileIcon size={24}/> <User size={24}/>
</span> </span>
</div> </div>
) : ( ) : (
+2 -2
View File
@@ -1,5 +1,5 @@
--- ---
import { CloseIcon } from "../Icons"; import { XIcon } from '@lucide/astro'
export interface Props { export interface Props {
id: string; id: string;
@@ -21,7 +21,7 @@ const hasFooter = Astro.slots.has("footer");
<div class="modal__head"> <div class="modal__head">
<span class="modal__title">{title}</span> <span class="modal__title">{title}</span>
<button class="modal__close" data-modal-close aria-label="Close"> <button class="modal__close" data-modal-close aria-label="Close">
<CloseIcon size={18} label="Close" /> <XIcon size={18} />
</button> </button>
</div> </div>
<div class="modal__body"><slot /></div> <div class="modal__body"><slot /></div>
@@ -1,5 +1,5 @@
--- ---
import { CloseIcon } from "../Icons"; import { XIcon } from '@lucide/astro'
export interface Props { export interface Props {
type: "info" | "success" | "warning" | "error"; type: "info" | "success" | "warning" | "error";
@@ -21,7 +21,7 @@ const { type } = Astro.props;
aria-label="Close notification" aria-label="Close notification"
onclick={`document.getElementById('${notificationUUID}')?.remove()`} onclick={`document.getElementById('${notificationUUID}')?.remove()`}
> >
<CloseIcon size={16} label="Close notification" /> <XIcon size={16} />
</button> </button>
</div> </div>
+3 -3
View File
@@ -1,5 +1,5 @@
--- ---
import Arrow2 from '../Icons/Arrow2/Arrow2.astro'; import { ChevronLeft, ChevronDown } from '@lucide/astro'
export interface Props { export interface Props {
default?: string; default?: string;
@@ -23,10 +23,10 @@ const { default: defaultValue, disabled = false, value } = Astro.props;
disabled={disabled} disabled={disabled}
> >
<span class="select__label"></span><span class="select__arrow select__arrow--closed"> <span class="select__label"></span><span class="select__arrow select__arrow--closed">
<Arrow2 size={16} orientation="left" /> <ChevronLeft size={16} />
</span> </span>
<span class="select__arrow select__arrow--open select__arrow--hidden"> <span class="select__arrow select__arrow--open select__arrow--hidden">
<Arrow2 size={16} orientation="down" /> <ChevronDown size={16} />
</span> </span>
</button> </button>
@@ -1,6 +1,6 @@
--- ---
import Button from '../Button/button.astro'; import Button from '../Button/button.astro';
import { MinusIcon, PlusIcon } from '../Icons'; import { Minus, Plus } from '@lucide/astro'
export interface Props { export interface Props {
id: string; id: string;
@@ -24,7 +24,7 @@ const { id, min, max, value = 0, step = 1 } = Astro.props;
> >
<span class="numeric-stepper__control" data-action="increment"> <span class="numeric-stepper__control" data-action="increment">
<Button type="ghost" icon={true}> <Button type="ghost" icon={true}>
<MinusIcon size={24} /> <Minus size={24} />
</Button> </Button>
</span> </span>
@@ -32,7 +32,7 @@ const { id, min, max, value = 0, step = 1 } = Astro.props;
<span class="numeric-stepper__control" data-action="decrement"> <span class="numeric-stepper__control" data-action="decrement">
<Button type="ghost" icon={true}> <Button type="ghost" icon={true}>
<PlusIcon size={24} /> <Plus size={24} />
</Button> </Button>
</span> </span>
</div> </div>
+12 -44
View File
@@ -31,6 +31,8 @@ import LoadingBar from "../components/LoadingBar/loadingBar.astro";
import Tooltip from "../components/Tooltip/tooltip.astro"; import Tooltip from "../components/Tooltip/tooltip.astro";
import Modal from "../components/Modal/modal.astro"; import Modal from "../components/Modal/modal.astro";
import { Plus, Shield, ListFilter, Download, Ellipsis, LayoutGrid, ChartLine, Settings } from "@lucide/astro";
import { import {
Arrow2Icon, Arrow2Icon,
BinIcon, BinIcon,
@@ -327,16 +329,16 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
<span class="vg__lbl">With icon · icon-only</span> <span class="vg__lbl">With icon · icon-only</span>
<div class="vg__body"> <div class="vg__body">
<Button type="primary" size="md" <Button type="primary" size="md"
><PlusIcon slot="icon-left" size={16} />New service</Button ><Plus slot="icon-left" size={16} />New service</Button
> >
<Button type="secondary" size="md" <Button type="secondary" size="md"
>Filter<FilterIcon slot="icon-right" size={16} /></Button >Filter<ListFilter slot="icon-right" size={16} /></Button
> >
<Button type="ghost" size="md" icon={true} <Button type="ghost" size="md" icon={true}
><MoreIcon size={18} /></Button ><Ellipsis size={18} /></Button
> >
<Button type="primary" size="md" icon={true} <Button type="primary" size="md" icon={true}
><DownloadIcon size={18} /></Button ><Download size={18} /></Button
> >
</div> </div>
</div> </div>
@@ -505,6 +507,8 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
/> />
<Avatar type="initials" name="Ava Stone" /> <Avatar type="initials" name="Ava Stone" />
<Avatar type="initials" name="Jane Smith" /> <Avatar type="initials" name="Jane Smith" />
<Avatar type="photo" name="Bob Johnson"
image="https://i.pravatarc/80?img=12"/>
</div> </div>
</div> </div>
</section> </section>
@@ -730,16 +734,16 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
<div class="vg__body"> <div class="vg__body">
<Sidebar header="Nova"> <Sidebar header="Nova">
<SidebarItem href="#" active <SidebarItem href="#" active
><OverviewIcon slot="icon" size={18} />Overview</SidebarItem ><LayoutGrid slot="icon" size={18} />Overview</SidebarItem
> >
<SidebarItem href="#" <SidebarItem href="#"
><StatsIcon slot="icon" size={18} />Metrics</SidebarItem ><ChartLine slot="icon" size={18} />Metrics</SidebarItem
> >
<SidebarItem href="#" <SidebarItem href="#"
><ShieldIcon slot="icon" size={18} />Security</SidebarItem ><Shield slot="icon" size={18} />Security</SidebarItem
> >
<SidebarItem href="#" <SidebarItem href="#"
><SettingsIcon slot="icon" size={18} />Settings</SidebarItem ><Settings slot="icon" size={18} />Settings</SidebarItem
> >
</Sidebar> </Sidebar>
</div> </div>
@@ -774,23 +778,6 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
<!-- ── ICONS ── --> <!-- ── ICONS ── -->
<section id="icons" class="blk"> <section id="icons" class="blk">
<h2>Icons</h2> <h2>Icons</h2>
<p class="blk__desc">25 line icons at 16 / 24 / 32 px.</p>
<div class="vg">
<span class="vg__lbl">Arrow2 — orientations × 16 / 24 / 32</span>
<div class="vg__body">
{
([16, 24, 32] as const).map((s) => (
<span class="icon-line">
<Arrow2Icon size={s} orientation="up" />
<Arrow2Icon size={s} orientation="right" />
<Arrow2Icon size={s} orientation="down" />
<Arrow2Icon size={s} orientation="left" />
</span>
))
}
</div>
</div>
<div class="vg"> <div class="vg">
<span class="vg__lbl">Library — 25 icons at 24px</span> <span class="vg__lbl">Library — 25 icons at 24px</span>
@@ -807,25 +794,6 @@ const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
</div> </div>
</div> </div>
</div> </div>
<div class="vg">
<span class="vg__lbl">Sizes — 16 / 24 / 32</span>
<div class="vg__body">
{
[SearchIcon, SettingsIcon, ShareIcon, DownloadIcon].map(
(Icon) => (
<span class="icon-line">
<>
<Icon size={16} />
<Icon size={24} />
<Icon size={32} />
</>
</span>
),
)
}
</div>
</div>
</section> </section>
</main> </main>
</div> </div>