diff --git a/ATTRIBUTION.md b/ATTRIBUTION.md index f5e8b4a..9e098b0 100644 --- a/ATTRIBUTION.md +++ b/ATTRIBUTION.md @@ -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. \ No newline at end of file +- This file must be kept up to date whenever a new third-party icon set or asset is added to NDS. \ No newline at end of file diff --git a/README.md b/README.md index 86f0fc0..efebd82 100644 --- a/README.md +++ b/README.md @@ -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 | -| `Tab` / `TabItem` / `TabContent` | Navigation | -| `Link` | Navigation | -| `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 | +| Component | Category | +| -------------------------------------------------- | ------------ | +| `Button` | Actions | +| `Toggle` | Actions | +| `NumericStepper` | Actions | +| `Select` / `SelectOption` | Actions | +| `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 | +| `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 | +| 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'; ``` +```astro +--- +import { Modal } from '@unkn0wndo3s/nova-design-system'; +--- + + + This is a modal dialog. + +``` + +```astro +--- +import { Breadcrumb, BreadcrumbItem } from '@unkn0wndo3s/nova-design-system'; +--- + + + Home + Docs + +``` + ## Development ### Clone the repository @@ -130,23 +161,33 @@ npm run preview # Preview the production build ### Project Structure -``` +```text src/ -├── components/ # Astro components +├── 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 -├── layouts/ # Astro layouts -├── pages/ # Documentation pages +│ ├── pagination/ +│ ├── Radio/ +│ ├── Select/ +│ ├── Sidebar/ +│ ├── Tabs/ +│ ├── textField/ +│ ├── Toggle/ +│ ├── Tooltip/ +│ └── index.ts +├── layouts/ # Astro layouts +├── pages/ # Documentation pages ├── styles/ │ ├── tokens/ │ │ ├── _colors.scss @@ -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