Compare commits
2 Commits
f56077dba4
...
5edab8d12d
| Author | SHA1 | Date | |
|---|---|---|---|
| 5edab8d12d | |||
| c15a6ceff1 |
+1
-1
@@ -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": {
|
||||||
|
|||||||
@@ -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>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user