Compare commits

..

4 Commits

3 changed files with 117 additions and 78 deletions
+8 -32
View File
@@ -1,42 +1,18 @@
# Attribution
This file lists all third-party icons used within Nova Design System (NDS) that are not proprietary to the project, as referenced in `LICENSE.md` (section 4.1).
This file lists all third-party assets used within Nova Design System (NDS) that are not proprietary to the project, as referenced in `LICENSE.md` (section 4.1).
All third-party icons used in NDS currently originate from **[Iconify](https://iconify.design/)**, specifically from the **[Lucide](https://lucide.dev/)** icon set (Iconify prefix: `lucide`, license: ISC — no attribution required, commercial use allowed).
## Icons
Any icon **not listed in this file** is an icon created specifically for NDS and falls under section 4.2 of `LICENSE.md` instead.
As of version `1.00.3`, NDS no longer ships a custom set of per-icon SVG wrapper components. All icons rendered inside NDS components (e.g. `Select`, `Avatar`, `Notification`, `numericStepper`, `Modal`) are sourced directly from the **[Lucide](https://lucide.dev/)** icon set via the **[`@lucide/astro`](https://www.npmjs.com/package/@lucide/astro)** package (license: **ISC** — no attribution required, commercial use allowed).
## Icon List
This means there is no longer a per-component mapping to maintain here: any icon visible in NDS is a Lucide icon, used directly through `@lucide/astro`. The previous standalone `Icons` component family (`Arrow2Icon`, `BinIcon`, `BurgerIcon`, `SortIcon`, `UploadIcon`, etc.) has been removed from the package.
| Icon (used in NDS) | Source | Icon Set / Link |
|---|---|---|
| `Arrow2Icon` (Chevron) | Iconify | Lucide — [chevron-down](https://icon-sets.iconify.design/lucide/chevron-down/) |
| `BinIcon` | Iconify | Lucide — [trash-2](https://icon-sets.iconify.design/lucide/trash-2/) |
| `BurgerIcon` | Iconify | Lucide — [menu](https://icon-sets.iconify.design/lucide/menu/) |
| `CalendarIcon` | Iconify | Lucide — [calendar](https://icon-sets.iconify.design/lucide/calendar/) |
| `CheckIcon` | Iconify | Lucide — [check](https://icon-sets.iconify.design/lucide/check/) |
| `CloseIcon` | Iconify | Lucide — [x](https://icon-sets.iconify.design/lucide/x/) |
| `CodeIcon` | Iconify | Lucide — [code](https://icon-sets.iconify.design/lucide/code/) |
| `CubeIcon` | Iconify | Lucide — [box](https://icon-sets.iconify.design/lucide/box/) |
| `DownloadIcon` | Iconify | Lucide — [download](https://icon-sets.iconify.design/lucide/download/) |
| `FilterIcon` | Iconify | Lucide — [filter](https://icon-sets.iconify.design/lucide/filter/) |
| `HelpIcon` | Iconify | Lucide — [circle-help](https://icon-sets.iconify.design/lucide/circle-help/) |
| `HomeIcon` | Iconify | Lucide — [house](https://icon-sets.iconify.design/lucide/house/) |
| `LinkIcon` | Iconify | Lucide — [link](https://icon-sets.iconify.design/lucide/link/) |
| `MinusIcon` | Iconify | Lucide — [minus](https://icon-sets.iconify.design/lucide/minus/) |
| `MoreIcon` | Iconify | Lucide — [ellipsis](https://icon-sets.iconify.design/lucide/ellipsis/) |
| `OverviewIcon` | Iconify | Lucide — [layout-dashboard](https://icon-sets.iconify.design/lucide/layout-dashboard/) |
| `PlusIcon` | Iconify | Lucide — [plus](https://icon-sets.iconify.design/lucide/plus/) |
| `ProfileIcon` | Iconify | Lucide — [user](https://icon-sets.iconify.design/lucide/user/) |
| `SearchIcon` | Iconify | Lucide — [search](https://icon-sets.iconify.design/lucide/search/) |
| `SettingsIcon` | Iconify | Lucide — [settings](https://icon-sets.iconify.design/lucide/settings/) |
| `ShareIcon` | Iconify | Lucide — [share-2](https://icon-sets.iconify.design/lucide/share-2/) |
| `ShieldIcon` | Iconify | Lucide — [shield](https://icon-sets.iconify.design/lucide/shield/) |
| `SortIcon` | Iconify | Lucide — [arrow-up-down](https://icon-sets.iconify.design/lucide/arrow-up-down/) |
| `StatsIcon` | Iconify | Lucide — [bar-chart-3](https://icon-sets.iconify.design/lucide/bar-chart-3/) |
| `UploadIcon` | Iconify | Lucide — [upload](https://icon-sets.iconify.design/lucide/upload/) |
## Custom Assets
Any icon or asset **not covered above** is created specifically for NDS and falls under section 4.2 of `LICENSE.md` instead. At the time of writing, there are no remaining custom (non-Lucide) icons in the project.
## Notes
- The Lucide icon set is released under the ISC license, which permits commercial use without requiring attribution. This file is maintained anyway for transparency and traceability.
- This file must be kept up to date whenever a new third-party icon is added to NDS.
- This file must be kept up to date whenever a new third-party icon set or asset is added to NDS.
+65 -24
View File
@@ -6,15 +6,15 @@ Nova Design System (NDS) is a lightweight, responsive UI component library built
## Table of Contents
1. [Overview](#overview)
2. [Project Status](#project-status)
3. [Core Principles](#core-principles)
4. [Available Components](#available-components)
5. [Design Tokens](#design-tokens)
6. [Installation](#installation)
7. [Usage](#usage)
8. [Development](#development)
9. [License](#license)
1. [Overview](#user-content-overview)
2. [Project Status](#user-content-project-status)
3. [Core Principles](#user-content-core-principles)
4. [Available Components](#user-content-available-components)
5. [Design Tokens](#user-content-design-tokens)
6. [Installation](#user-content-installation)
7. [Usage](#user-content-usage)
8. [Development](#user-content-development)
9. [License](#user-content-license)
---
@@ -23,8 +23,7 @@ Nova Design System (NDS) is a lightweight, responsive UI component library built
NDS provides a focused set of reusable Astro components with centralized design tokens, light/dark theming, and a strong focus on consistency and maintainability. The component documentation and showcase are also built with Astro.
## Project Status
> **ALPHA** — The library is under active development. Current version: `0.05.0`. Component APIs, token naming, and internal architecture may change before a stable release.
> **ALPHA** — The library is under active development. Current version: `1.01.0`. Component APIs, token naming, and internal architecture may change before a stable release.
## Core Principles
@@ -36,35 +35,46 @@ NDS provides a focused set of reusable Astro components with centralized design
## Available Components
These are the components currently implemented in `src/components/`:
These are the components currently exported from the package (`src/components/index.ts`):
| Component | Category |
|---|---|
| -------------------------------------------------- | ------------ |
| `Button` | Actions |
| `Toggle` | Actions |
| `NumericStepper` | Actions |
| `Select` / `SelectOption` | Actions |
| `Avatar` | Data Display |
| `TextField` | Forms |
| `Checkbox` | Forms |
| `Radio` | Forms |
| `Tab` / `TabItem` / `TabContent` | Navigation |
| `Link` | Navigation |
| `Breadcrumb` / `BreadcrumbItem` | Navigation |
| `Pagination` / `PaginationNumber` | Navigation |
| `Navbar` | Navigation |
| `Sidebar` / `SidebarItem` | Navigation |
| `Avatar` | Data Display |
| `Badge` | Data Display |
| `Card` | Data Display |
| `ListItem` / `ListItemTitle` / `ListItemSubtitle` | Data Display |
| `Notification` | Feedback |
| `LoadingBar` | Feedback |
| `Icons``Arrow2Icon`, `BinIcon`, `BurgerIcon`, `CalendarIcon`, `CheckIcon`, `CloseIcon`, `CodeIcon`, `CubeIcon`, `DownloadIcon`, `FilterIcon`, `HelpIcon`, `HomeIcon`, `LinkIcon`, `MinusIcon`, `MoreIcon`, `OverviewIcon`, `PlusIcon`, `ProfileIcon`, `SearchIcon`, `SettingsIcon`, `ShareIcon`, `ShieldIcon`, `SortIcon`, `StatsIcon`, `UploadIcon` | Utility |
| `Tooltip` | Feedback |
| `Modal` | Overlay |
> Components such as Navbar, Sidebar, Card, and Modal are planned but not yet implemented.
> Icons are no longer shipped as standalone NDS components. As of `1.00.3`, all icons used internally (e.g. in `Select`, `Avatar`, `Notification`, `numericStepper`) come directly from the **[`@lucide/astro`](https://www.npmjs.com/package/@lucide/astro)** package. See `ATTRIBUTION.md` for details.
## Design Tokens
All styling is controlled via CSS custom properties prefixed with `--nds-`, defined in `src/styles/tokens/`:
| File | Contents |
|---|---|
| ------------------ | ------------------------------------------------------------------------- |
| `_colors.scss` | Color palette and semantic colors (`success`, `warning`, `error`, `info`) |
| `_spacing.scss` | Base spacing scale, border radius, and border width |
| `_typography.scss` | Font families, sizes, and weights |
**Rules:**
- Never hardcode colors, spacing, or radii in component styles when a token exists.
- Never override tokens locally in component scope unless explicitly supported.
- All global token changes must go through the core styling system.
@@ -101,6 +111,27 @@ import { Notification } from '@unkn0wndo3s/nova-design-system';
</Notification>
```
```astro
---
import { Modal } from '@unkn0wndo3s/nova-design-system';
---
<Modal>
This is a modal dialog.
</Modal>
```
```astro
---
import { Breadcrumb, BreadcrumbItem } from '@unkn0wndo3s/nova-design-system';
---
<Breadcrumb>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
</Breadcrumb>
```
## Development
### Clone the repository
@@ -130,21 +161,31 @@ npm run preview # Preview the production build
### Project Structure
```
```text
src/
├── components/ # Astro components
│ ├── Avatar/
│ ├── Badge/
│ ├── Breadcrumb/
│ ├── Button/
│ ├── Icons/
│ ├── Card/
│ ├── Checkbox/
│ ├── Link/
│ ├── ListItem/
│ ├── LoadingBar/
│ ├── Modal/
│ ├── Navbar/
│ ├── Notifications/
│ ├── Select/
│ ├── Tabs/
│ ├── Toggle/
│ ├── numericStepper/
── index.ts # Auto-generated barrel — do not edit manually
── pagination/
│ ├── Radio/
│ ├── Select/
│ ├── Sidebar/
│ ├── Tabs/
│ ├── textField/
│ ├── Toggle/
│ ├── Tooltip/
│ └── index.ts
├── layouts/ # Astro layouts
├── pages/ # Documentation pages
├── styles/
@@ -160,7 +201,7 @@ src/
Contributions are welcome. To report a bug, suggest a feature, or open a Pull Request, follow the repository contribution rules and templates.
**Icon Contribution Policy:** By contributing a custom icon to NDS, you agree that it may be used within the design system under the repository license and contribution policy.
NDS no longer maintains a custom set of icon components — icons are sourced from the **[Lucide](https://lucide.dev/)** icon set via `@lucide/astro`. If a needed icon isn't in Lucide, open an issue to discuss it before adding any new icon dependency.
## License
+26 -4
View File
@@ -1,9 +1,26 @@
{
"name": "@unkn0wndo3s/nova-design-system",
"type": "module",
"version": "1.01.0",
"main": "./src/index.ts",
"version": "1.1.1",
"description": "Nova Design System — Astro component library",
"license": "SEE LICENSE IN LICENSE.md",
"author": "Unkn0wn",
"main": "./src/index.ts",
"repository": {
"type": "git",
"url": "git+https://git.novaprojects.dev/unkn0wn/nova-design-system.git"
},
"bugs": {
"url": "https://git.novaprojects.dev/unkn0wn/nova-design-system/issues"
},
"homepage": "https://git.novaprojects.dev/unkn0wn/nova-design-system#readme",
"keywords": [
"astro",
"astro-components",
"design-system",
"ui-library",
"nova"
],
"engines": {
"node": ">=22.12.0"
},
@@ -12,7 +29,9 @@
"./styles": "./src/styles/index.scss"
},
"files": [
"src"
"src",
"LICENSE.md",
"README.md"
],
"scripts": {
"dev": "astro dev",
@@ -21,10 +40,13 @@
"astro": "astro"
},
"dependencies": {
"@lucide/astro": "^1.21.0",
"@lucide/astro": "^1.21.0"
},
"peerDependencies": {
"astro": "^7.0.0"
},
"devDependencies": {
"astro": "^7.0.0",
"sass": "^1.99.0"
}
}