@unkn0wndo3s/nova-design-system 0.1.0 → 0.2.0

package/LICENSE.md

@@ -1,47 +1,47 @@
-# LICENSE - Nova Design System (NDS)
-
-Copyright (c) 2026 Unkn0wn
-
-## 1. Ownership and Scope
-Nova Design System (NDS), including its source code, components, documentation, and visual assets such as icons and layout logic, is the property of its creator.
-This license applies to both the public and private versions of the repository.
-
-## 2. Usage Rights and Restrictions
-
-### 2.1 Personal and Internal Use
-Use of NDS for personal projects and internal projects is permitted.
-You may study the project and draw inspiration from it, but direct copying of the core logic, styles, or components is prohibited unless explicitly authorized.
-
-### 2.2 Commercial Products and Services
-Any use of NDS in a commercial product or service requires explicit written authorization from the original creator.
-Only the original creator may grant that authorization.
-Contributors do not have the authority to grant usage rights to third parties.
-
-Selling a website, application, service, or product that uses NDS is prohibited unless a specific commercial agreement has been granted by the creator.
-
-## 3. Modifications and Contributions
-All modifications to the library must go through the official GitHub workflow, including Issues and Pull Requests.
-
-Any authorized modification or derivative work of NDS must remain under this same license.
-Re-licensing modified versions under a different license is prohibited.
-
-## 4. Assets and Iconography
-Icons and visual assets introduced into NDS remain part of the project.
-Unless explicitly authorized, these assets may only be used through the NDS library itself.
-External reuse, extraction, redistribution, or standalone use of these assets is prohibited.
-
-## 5. Disclaimer of Warranty and Liability
-This library is provided on an **"as is"** basis, without warranty of any kind.
-
-If a bug or issue is found, it should be reported through the official repository.
-The creator may choose to fix reported issues but is under no obligation to do so within any specific timeframe.
-
-Under no circumstances shall the creator be held liable for any loss of data, damages, service interruption, legal issue, or other consequence resulting from the use or inability to use the library.
-
-## 6. Termination
-Failure to comply with this license results in immediate termination of any right to use the library.
-The creator reserves the right to take action in case of intellectual property infringement or unauthorized use.
-
----
-
+# LICENSE - Nova Design System (NDS)
+
+Copyright (c) 2026 Unkn0wn
+
+## 1. Ownership and Scope
+Nova Design System (NDS), including its source code, components, documentation, and visual assets such as icons and layout logic, is the property of its creator.
+This license applies to both the public and private versions of the repository.
+
+## 2. Usage Rights and Restrictions
+
+### 2.1 Personal and Internal Use
+Use of NDS for personal projects and internal projects is permitted.
+You may study the project and draw inspiration from it, but direct copying of the core logic, styles, or components is prohibited unless explicitly authorized.
+
+### 2.2 Commercial Products and Services
+Any use of NDS in a commercial product or service requires explicit written authorization from the original creator.
+Only the original creator may grant that authorization.
+Contributors do not have the authority to grant usage rights to third parties.
+
+Selling a website, application, service, or product that uses NDS is prohibited unless a specific commercial agreement has been granted by the creator.
+
+## 3. Modifications and Contributions
+All modifications to the library must go through the official GitHub workflow, including Issues and Pull Requests.
+
+Any authorized modification or derivative work of NDS must remain under this same license.
+Re-licensing modified versions under a different license is prohibited.
+
+## 4. Assets and Iconography
+Icons and visual assets introduced into NDS remain part of the project.
+Unless explicitly authorized, these assets may only be used through the NDS library itself.
+External reuse, extraction, redistribution, or standalone use of these assets is prohibited.
+
+## 5. Disclaimer of Warranty and Liability
+This library is provided on an **"as is"** basis, without warranty of any kind.
+
+If a bug or issue is found, it should be reported through the official repository.
+The creator may choose to fix reported issues but is under no obligation to do so within any specific timeframe.
+
+Under no circumstances shall the creator be held liable for any loss of data, damages, service interruption, legal issue, or other consequence resulting from the use or inability to use the library.
+
+## 6. Termination
+Failure to comply with this license results in immediate termination of any right to use the library.
+The creator reserves the right to take action in case of intellectual property infringement or unauthorized use.
+
+---
+
 For authorization requests, please open an Issue on the official repository or contact the creator directly.

package/README.md

@@ -1,165 +1,159 @@
-# Nova Design System (NDS)
-
-Nova Design System (NDS) is a lightweight, responsive, and secure UI library built with **Svelte**.
-It is developed primarily for internal and personal projects and is available publicly for reference, testing, and contributions.
-
----
-
-## Table of Contents
-1. [Overview](#overview)
-2. [Project Status](#project-status)
-3. [Core Principles](#core-principles)
-4. [Available Components](#available-components)
-5. [Installation](#installation)
-6. [Usage](#usage)
-7. [Theming and Variables](#theming-and-variables)
-8. [Contributing](#contributing)
-9. [Development and Documentation](#development-and-documentation)
-10. [License](#license)
-
----
-
-## Overview
-NDS aims to provide a robust set of reusable UI components that are easy to integrate while maintaining consistency, responsiveness, and a strong focus on safety and maintainability.
-
-## Project Status
-**Current Phase: ALPHA**
-
-The library is still under active development. Component APIs, styling structure, and internal architecture may change before the Beta release.
-
-## Core Principles
-- **Responsive Architecture:** Components are built with a mobile-first mindset and are expected to behave correctly across modern screen sizes.
-- **Security-Centric:** Unsafe patterns are avoided, especially anything that could introduce injection or untrusted rendering issues.
-- **Native Theming:** Styling is based on centralized design tokens and supports Light and Dark themes.
-- **Type Safety:** The library is written in TypeScript for stronger reliability and a better developer experience.
-- **Consistency First:** Shared tokens, naming conventions, and reusable patterns take priority over one-off styling.
-
-## Available Components
-
-### Actions
-- `Button`
-- `Toggle`
-
-### Navigation
-- `Navbar`
-- `Sidebar`
-- `Tabs`
-- `Breadcrumb`
-- `Paginate`
-- `Stepper`
-
-### Form
-- `Checkbox`
-- `Radio`
-- `Select`
-- `SelectOption`
-- `Search`
-- `Input`
-- `File Upload`
-- `Date Picker`
-- `Slider`
-- `Numeric Stepper`
-
-### Data Display
-- `Badge`
-- `Avatar`
-- `Card`
-- `Table`
-- `Row`
-- `Cell`
-- `List Item`
-
-### Overlay
-- `Modal`
-- `Dropdown`
-- `Tooltip`
-
-### Feedback
-- `Notification` *(error / warning / info / success)*
-- `Loading Bar`
-
-### Layout
-- `Divider`
-- `Link`
-
-## Installation
-Install the package with npm:
-
-```bash
-npm install @unkn0wn-pkgs/nds
-```
-
-No extra Vite de-optimization configuration is required.
-
-## Usage
-### Basic Component Example
-```svelte
-<script lang="ts">
-  import { Notification } from '@unkn0wn-pkgs/nds';
-</script>
-
-<Notification type="warning">
-  This is a warning message.
-</Notification>
-```
-
-### Another Example
-```svelte
-<script lang="ts">
-  import { Button } from '@unkn0wn-pkgs/nds';
-</script>
-
-<Button>
-  Click me
-</Button>
-```
-
-## Theming and Variables
-NDS relies on a centralized Design Token system.
-All styling is controlled through CSS custom properties prefixed with `--nds-`.
-
-### Rules
-- Do not hardcode colors, spacing, or radii directly inside component styles when a design token exists.
-- Do not override tokens locally in isolated component scopes unless the system explicitly supports it.
-- Keep all global token changes inside the core styling system to preserve consistency.
-
-## Contributing
-Contributions are welcome.
-If you want to report a bug, suggest a feature, or submit a Pull Request, follow the repository contribution rules and templates.
-
-Please read the contribution guide before opening a PR.
-
-### Icon Contribution Policy
-By contributing a custom icon to NDS, you agree that the icon may be used inside the design system according to the repository license and contribution policy.
-
-## Development and Documentation
-Documentation is managed with **Storybook**.
-
-### Clone the repository
-```bash
-git clone https://github.com/unkn0wndo3s/Design-System.git
-```
-
-### Install dependencies
-```bash
-npm install
-```
-
-### Launch Storybook
-```bash
-npm run storybook
-```
-
-### Useful scripts
-```bash
-npm run check
-npm run lint
-npm run format
-npm run build
-npm run build-storybook
-```
-
-## License
-This project is **not distributed under a standard open-source license**.
-Usage, redistribution, commercial use, and derivative work rules are defined in `LICENSE.md`.
-Read that file carefully before using the library in a product or service.
+# Nova Design System (NDS)
+
+Nova Design System (NDS) is a lightweight, responsive UI component library built with **Astro**. It is developed primarily for internal and personal projects, and is publicly available for reference and contributions.
+
+---
+
+## 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)
+
+---
+
+## Overview
+
+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. Component APIs, token naming, and internal architecture may change before a stable release.
+
+## Core Principles
+
+- **Responsive Architecture:** Components are built mobile-first and work correctly across modern screen sizes.
+- **Security-Centric:** Unsafe patterns (injection, untrusted rendering) are avoided by design.
+- **Native Theming:** All styling relies on centralized design tokens and supports Light and Dark modes.
+- **Type Safety:** Written in TypeScript for stronger reliability and a better developer experience.
+- **Consistency First:** Shared tokens, naming conventions, and reusable patterns take priority over one-off styles.
+
+## Available Components
+
+These are the components currently implemented in `src/components/`:
+
+| Component | Category |
+|---|---|
+| `Button` | Actions |
+| `Toggle` | Actions |
+| `Tabs` / `Tab` / `TabItem` / `TabContent` | Navigation |
+| `Link` | Layout |
+| `ListItem` | Data Display |
+| `Notifications` | Feedback |
+| `Icons` | Utility |
+
+> Many components listed in earlier versions of this README (Navbar, Sidebar, Card, Modal, etc.) are planned but not yet implemented.
+
+## 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.
+
+## Installation
+
+```bash
+npm install @unkn0wndo3s/nova-design-system
+```
+
+No extra Vite de-optimization configuration is required.
+
+## Usage
+
+Import components directly from the package:
+
+```astro
+---
+import { Button } from '@unkn0wndo3s/nova-design-system';
+---
+
+<Button>Click me</Button>
+```
+
+```astro
+---
+import { Notifications } from '@unkn0wndo3s/nova-design-system';
+---
+
+<Notifications type="warning">
+  This is a warning message.
+</Notifications>
+```
+
+## Development
+
+### Clone the repository
+
+```bash
+git clone https://git.novaprojects.dev/unkn0wn/nova-design-system.git
+```
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Start the dev server
+
+```bash
+npm run dev
+```
+
+### Useful scripts
+
+```bash
+npm run build    # Build the project
+npm run check    # Type checking
+npm run lint     # Lint the codebase
+npm run format   # Format code
+```
+
+### Project Structure
+
+```
+src/
+├── components/       # Astro components
+│   ├── Button/
+│   ├── Icons/
+│   ├── Link/
+│   ├── ListItem/
+│   ├── Notifications/
+│   ├── Tabs/
+│   ├── Toggle/
+│   └── index.ts
+├── layouts/          # Astro layouts
+├── pages/            # Documentation pages
+├── styles/
+│   ├── tokens/
+│   │   ├── _colors.scss
+│   │   ├── _spacing.scss
+│   │   └── _typography.scss
+│   └── index.scss
+└── index.ts
+```
+
+## Contributing
+
+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.
+
+## License
+
+This project is **not distributed under a standard open-source license**. Usage, redistribution, commercial use, and derivative work rules are defined in `LICENSE.md`. Read that file carefully before using the library in a product or service.

package/package.json

@@ -1,29 +1,29 @@
-{
-  "name": "@unkn0wndo3s/nova-design-system",
-  "type": "module",
-  "version": "0.1.0",
-  "main": "./src/index.ts",
-  "description": "Nova Design System — Astro component library",
-  "engines": {
-    "node": ">=22.12.0"
-  },
-  "exports": {
-    ".": "./src/index.ts",
-    "./styles": "./src/styles/index.scss"
-  },
-  "files": [
-    "src"
-  ],
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "astro": "^6.3.8"
-  },
-  "devDependencies": {
-    "sass": "^1.99.0"
-  }
+{
+  "name": "@unkn0wndo3s/nova-design-system",
+  "type": "module",
+  "version": "0.02.0",
+  "main": "./src/index.ts",
+  "description": "Nova Design System — Astro component library",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/styles/index.scss"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^6.3.8"
+  },
+  "devDependencies": {
+    "sass": "^1.99.0"
+  }
 }

package/src/components/Button/_button.scss

@@ -1,37 +1,37 @@
-@use '../../styles/tokens/typography' as *;
-
-.button { 
-  width: fit-content;
-  padding: var(--nds-spacing-sm) var(--nds-spacing-md);
-  border-radius: var(--nds-radius-sm);
-  @include text-base;
-  cursor: pointer;
-  &__primary {
-    background-color: var(--nds-primary);
-    color: var(--nds-text);
-    &:hover:not(.button--disabled) {
-      background-color: var(--nds-secondary);
-    }
-    &:active:not(.button--disabled) {
-      background-color: var(--nds-accent);
-      color: var(--nds-background);
-    }
-  }
-  &__secondary {
-    border: var(--nds-border-width-medium) solid;
-    border-color: var(--nds-primary);
-    color: var(--nds-primary);
-    &:hover:not(.button--disabled) {
-      border-color: var(--nds-secondary);
-    }
-    &:active:not(.button--disabled) {
-      border-color: var(--nds-accent);
-      color: var(--nds-accent);
-    }
-  }
-  &--disabled {
-    cursor: not-allowed;
-    background-color: var(--nds-disabled);
-    color: var(--nds-neutral);
-  }
+@use '../../styles/tokens/typography' as *;
+
+.button { 
+  width: fit-content;
+  padding: var(--nds-spacing-sm) var(--nds-spacing-md);
+  border-radius: var(--nds-radius-sm);
+  @include text-base;
+  cursor: pointer;
+  &__primary {
+    background-color: var(--nds-primary);
+    color: var(--nds-text);
+    &:hover:not(.button--disabled) {
+      background-color: var(--nds-secondary);
+    }
+    &:active:not(.button--disabled) {
+      background-color: var(--nds-accent);
+      color: var(--nds-background);
+    }
+  }
+  &__secondary {
+    border: var(--nds-border-width-medium) solid;
+    border-color: var(--nds-primary);
+    color: var(--nds-primary);
+    &:hover:not(.button--disabled) {
+      border-color: var(--nds-secondary);
+    }
+    &:active:not(.button--disabled) {
+      border-color: var(--nds-accent);
+      color: var(--nds-accent);
+    }
+  }
+  &--disabled {
+    cursor: not-allowed;
+    background-color: var(--nds-disabled);
+    color: var(--nds-neutral);
+  }
 }

package/src/components/Button/button.astro

@@ -1,15 +1,15 @@
----
-export interface Props {
-  type:        'primary' | 'secondary';
-  disabled?:   boolean;
-}
-const { type, disabled = false } = Astro.props;
----
-
-<div class={`button button__${type} ${disabled ? 'button--disabled' : ''}`}>
-  <slot/>
-</div>
-
-<style lang="scss">
-@use './_button.scss';
+---
+export interface Props {
+  type:        'primary' | 'secondary';
+  disabled?:   boolean;
+}
+const { type, disabled = false } = Astro.props;
+---
+
+<div class={`button button__${type} ${disabled ? 'button--disabled' : ''}`}>
+  <slot/>
+</div>
+
+<style lang="scss">
+@use './_button.scss';
 </style>