Compare commits

..

66 Commits

Author SHA1 Message Date
unkn0wn 94acacbd6c fix: update current version to 1.2.1 in project status section of README.md
Deploy Documentation / check-and-deploy (push) Successful in 11s
2026-06-24 09:23:50 +02:00
unkn0wn 6811dda340 fix: update version to 1.2.1 in package.json and related components
Deploy Documentation / check-and-deploy (push) Successful in 11s
Publish to npm / check-and-publish (push) Successful in 19s
2026-06-24 09:21:40 +02:00
unkn0wn bd0e5b0191 fix: refactor modal close button to use icon directly and remove unnecessary button element 2026-06-24 09:20:43 +02:00
unkn0wn 23a4175bc6 fix: remove paths filter from deployment trigger and update layout title and badge version
Deploy Documentation / check-and-deploy (push) Successful in 10s
2026-06-24 09:15:47 +02:00
unkn0wn 30a3b32d13 fix: remove version check condition from deployment step 2026-06-24 09:01:01 +02:00
unkn0wn 0405565fd1 fix: update deployment step to delete existing files before copying new documentation 2026-06-24 09:00:23 +02:00
unkn0wn 352ec260fa fix: remove conditional checks for version changes in deploy workflow 2026-06-24 08:58:45 +02:00
unkn0wn 53b3ee4301 fix: update deploy workflow to install Node.js requirements before checkout 2026-06-24 08:57:03 +02:00
unkn0wn 88d56bbd38 fix: remove version check step from deploy workflow 2026-06-24 08:55:19 +02:00
unkn0wn a40c1d1a7e fix: update git clone URL in deploy workflow 2026-06-24 08:54:42 +02:00
unkn0wn 237abcbd63 fix: replace actions/checkout with custom checkout logic in deploy workflow 2026-06-24 08:53:17 +02:00
unkn0wn 4777b1c68e fix: update deploy workflow to remove unnecessary comments and adjust container settings 2026-06-24 08:51:49 +02:00
unkn0wn 4adc9b9eb6 fix: update deploy workflow to use container volumes and clean up comments 2026-06-24 08:46:21 +02:00
unkn0wn acc9bcb98b fix: clean up old documentation files before deployment 2026-06-24 08:38:40 +02:00
unkn0wn 33131a8275 feat: add workflow_dispatch trigger to deploy documentation workflow 2026-06-24 08:32:01 +02:00
unkn0wn 131d8376d4 feat: add GitHub Actions workflow for documentation deployment 2026-06-24 08:24:04 +02:00
unkn0wn 71effe979a chore: update version to 1.2.0 and fix license field in package.json
Publish to npm / check-and-publish (push) Successful in 19s
2026-06-24 07:59:21 +02:00
unkn0wn 06a1695be4 fix: add missing newline at end of package.json
Publish to npm / check-and-publish (push) Successful in 20s
2026-06-24 07:56:06 +02:00
unkn0wn 734a593834 chore: update package.json with repository, bugs, homepage, and keywords information 2026-06-24 07:54:03 +02:00
unkn0wn a2ae6ce8a2 chore: bump version to 1.1.1 and update files list in package.json 2026-06-24 07:51:44 +02:00
unkn0wn 078b1d6e85 refactor: update attribution and README to reflect removal of custom icon components and source from Lucide 2026-06-24 07:45:35 +02:00
unkn0wn 5bcf5b20a0 chore: bump version to 1.01.0 in package.json
Publish to npm / check-and-publish (push) Successful in 20s
2026-06-24 07:14:02 +02:00
unkn0wn e0ed0f557b fix: align export statements formatting in index.ts 2026-06-24 07:13:37 +02:00
unkn0wn 276bb36586 Remove source comment from _spacing.scss 2026-06-24 07:06:20 +02:00
unkn0wn b697bb8491 Remove unused SVG icons and related components for sorting and uploading; clean up index.astro by eliminating icon imports and references. 2026-06-24 06:57:58 +02:00
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
unkn0wn f56077dba4 fix: add legacy-peer-deps flag to npm ci command in publish workflow 2026-06-24 06:19:17 +02:00
unkn0wn 6595e8f4e0 chore: rename LICENSE TO LICENSE.md 2026-06-24 06:16:02 +02:00
unkn0wn ca983468f0 Refactor code structure for improved readability and maintainability
Publish to npm / check-and-publish (push) Failing after 13s
2026-06-23 12:59:53 +02:00
unkn0wn cd75e773f6 chore: removing galerie page 2026-06-23 12:58:46 +02:00
unkn0wn 75aa782653 feat: updating package to version 1.00.1
Publish to npm / check-and-publish (push) Successful in 22s
2026-06-23 12:39:43 +02:00
unkn0wn f6594822c6 style: remove unnecessary width override from textarea in textField component 2026-06-23 12:39:31 +02:00
unkn0wn 027cec577d feat: updating package to version 1.00.0
Publish to npm / check-and-publish (push) Successful in 22s
2026-06-23 12:36:10 +02:00
unkn0wn 6e077aaeed style: update Navbar and Select component styles for improved consistency and usability 2026-06-23 12:35:23 +02:00
unkn0wn 1d9001705f feat: adding Sidebar and SidebarItem 2026-06-23 12:35:12 +02:00
unkn0wn 1878ec3a0e feat: add Card and Navbar components with styles
- Implemented Card component with cover, title, subtitle, content, and footer slots.
- Added styles for Card component in _card.scss.
- Created Navbar component with brand and links, including styles in _navbar.scss.
- Updated index.astro to include new Card and Navbar components.
2026-06-23 11:40:04 +02:00
unkn0wn b48581b089 feat: implement Modal component with overlay and dialog structure 2026-06-23 11:25:39 +02:00
unkn0wn 3593305512 feat: add Tooltip component and update styles in Button and index page 2026-06-23 11:08:24 +02:00
unkn0wn 6967f3c7cd refactor: reorganize component imports and enhance index page layout
- Grouped component imports into categories for better organization.
- Updated the layout of the index page to include a gallery structure.
- Added new sections for Button, Badge, Selection Controls, TextField, Select, Numeric Stepper, Avatar, Loading Bar, List Item, Link, Tabs, Breadcrumb, Pagination, Notification, Tooltip, Card, Navbar, Sidebar, Modal, and Icons.
- Improved styling for better visual hierarchy and spacing.
- Implemented a theme toggle feature with persistent state using localStorage.
2026-06-23 10:51:40 +02:00
unkn0wn dea517fbe5 feat: adding Badge, Breadcrumb, Checkbox et Radio components 2026-06-23 10:12:04 +02:00
unkn0wn cc54ae46ff style: refactor Button and numericStepper components for improved accessibility and styling 2026-06-23 10:07:39 +02:00
unkn0wn b2f4cfe393 fix: update version to 0.06.1 in package.json
Publish to npm / check-and-publish (push) Successful in 20s
2026-06-23 08:02:52 +02:00
unkn0wn 3e4d609d6c style: refactor avatar component styles 2026-06-23 08:02:31 +02:00
unkn0wn 455acd9552 style: refine typo tokens 2026-06-23 08:00:54 +02:00
unkn0wn 50e7618232 style: refine color tokens for light and dark themes 2026-06-23 07:58:42 +02:00
unkn0wn c4eb4cc507 style: update textField styles 2026-06-23 07:55:38 +02:00
unkn0wn 08a6e82760 fix: remove redundant closing div in index.astro 2026-06-23 07:26:25 +02:00
unkn0wn 2e36ac3b3e chore: update astro dependency to version 7.0.0 2026-06-23 07:26:15 +02:00
unkn0wn 46020db913 feat: add Attribution file listing third-party icons used in NDS 2026-06-23 07:10:40 +02:00
unkn0wn bacbde56ad chore: rename LICENSE.md to LICENSE 2026-06-23 07:04:48 +02:00
unkn0wn f8f2e23573 feat: update LICENSE.md to clarify usage rights and restrictions 2026-06-23 07:04:14 +02:00
unkn0wn b2a61008ba feat: updating package to version 0.06.0
Publish to npm / check-and-publish (push) Successful in 23s
2026-06-18 13:52:07 +02:00
unkn0wn 5d65cecf52 feat: add Pagination and PaginationNumber components with styles and integration into index page 2026-06-18 13:51:31 +02:00
unkn0wn c80d9b5259 feat: add TextField component with styles and integration into index page 2026-06-18 08:52:51 +02:00
unkn0wn 3e6d89830b feat: update README for version 0.05.0 and move Select components imports 2026-06-16 14:18:17 +02:00
unkn0wn f88dd862bf feat: updating package to version 0.05.0
Publish to npm / check-and-publish (push) Successful in 22s
2026-06-16 14:11:10 +02:00
unkn0wn 8c1e36aaa7 feat: add Select and SelectOption components with styles and integration into index page 2026-06-16 14:10:49 +02:00
unkn0wn 03a92db05e feat: updating package to version 0.04.0
Publish to npm / check-and-publish (push) Successful in 23s
2026-06-16 08:32:33 +02:00
unkn0wn 7c65e70c8f feat: add Avatar component and integrate into index page 2026-06-16 08:30:29 +02:00
unkn0wn b61720fd24 feat: update README with current version and component list enhancements 2026-06-09 14:47:58 +02:00
unkn0wn 4d7c882324 feat: updating package to version 0.03.0
Publish to npm / check-and-publish (push) Successful in 21s
2026-06-09 14:32:48 +02:00
unkn0wn c508d6ae31 feat: add NumericStepper component and integrate into index page 2026-06-09 14:30:40 +02:00
unkn0wn 02ae2b143e feat: add icon support to Button component 2026-06-09 14:08:53 +02:00
unkn0wn 40505bd05e Merge branch 'main' of https://git.novaprojects.dev/unkn0wn/nova-design-system 2026-06-09 13:15:04 +02:00
unkn0wn ef22eb5615 feat: add LoadingBar component with known and unknown states 2026-06-09 13:15:01 +02:00
177 changed files with 4386 additions and 3347 deletions
+37
View File
@@ -0,0 +1,37 @@
name: Deploy Documentation
on:
push:
branches:
- main
workflow_dispatch:
jobs:
check-and-deploy:
runs-on: host
steps:
- name: Install Node.js requirements for Actions
run: |
if ! command -v node &> /dev/null; then
apk add --no-cache nodejs npm
fi
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 2
- name: Install dependencies
run: npm ci --legacy-peer-deps
- name: Build documentation
run: npm run build
- name: Deploy to Apache volume
run: |
find /var/www/design-system -mindepth 1 -delete
cp -r dist/. /var/www/design-system/
chmod -R 755 /var/www/design-system/
+1 -1
View File
@@ -43,7 +43,7 @@ jobs:
- name: Install dependencies
if: steps.version_check.outputs.changed == 'true'
run: npm ci
run: npm ci --legacy-peer-deps
- name: Publish
if: steps.version_check.outputs.changed == 'true'
+18
View File
@@ -0,0 +1,18 @@
# Attribution
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).
## Icons
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).
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.
## 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 set or asset is added to NDS.
+28 -12
View File
@@ -8,27 +8,43 @@ 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.1 General Use
NDS may be used freely and without limitation in personal, internal, and commercial projects — including projects developed for paying clients, such as the design or development of a website, application, or service.
### 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.
You may study the project and draw inspiration from it, but direct copying of the core logic, styles, or components outside of using the library as intended is prohibited unless explicitly authorized.
Selling a website, application, service, or product that uses NDS is prohibited unless a specific commercial agreement has been granted by the creator.
### 2.2 Billing and Resale Restriction
You may not charge or invoice anyone specifically **for the use of NDS itself**. This includes, but is not limited to:
- selling NDS as a standalone product or component library,
- sublicensing or redistributing NDS to third parties,
- adding a distinct line item, fee, or surcharge tied to "using NDS" on a client invoice,
- building a product or service (e.g. a SaaS) whose core purpose or monetized value is to give paying users access to NDS's components or their usage.
This restriction does **not** prevent you from billing normally for a broader deliverable (e.g. a website, application, or platform) simply because NDS was used as part of the underlying toolkit. In that case, NDS is a tool used to produce the deliverable, not the product being sold.
**Example — SaaS:** if you build a SaaS and NDS is merely used internally to build its interface (the same way any UI library would be), this is authorized. If, however, the SaaS's purpose or value proposition is to give users access to NDS's components or their usage (e.g. a website-builder that resells NDS components to its own customers), this is prohibited.
**Exception:** if a client explicitly requests that NDS specifically be used in their project, you may bill for that work as part of the agreed engagement, since the choice to use NDS was made knowingly by the client.
Only the original creator may authorize the sale, sublicensing, or commercial redistribution of NDS as a standalone product. Contributors do not have the authority to grant such rights to third parties.
## 3. Modifications and Contributions
All modifications to the library must go through the official GitHub workflow, including Issues and Pull Requests.
All modifications to the library must go through the official Gitea workflow on the project's self-hosted instance, 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.
### 4.1 Third-Party Icons
Some icons used within NDS are not proprietary to NDS and originate from public or third-party sources (e.g. Iconify). These icons remain governed by their own original license and attribution requirements, independently of this license.
A full list of these third-party icons, including their name, source (e.g. Iconify), and a link to their origin, is maintained in the `ATTRIBUTION.md` file at the root of the repository. Any icon not listed in `ATTRIBUTION.md` is presumed to fall under section 4.2.
### 4.2 Icons Created for NDS
Icons specifically created for NDS may be used outside of the NDS project, subject to the following conditions:
- they may not be sold or resold, whether individually, in a set, or as part of another icon library or product,
- their origin must be explicitly credited wherever they are used (e.g. "Icon from Nova Design System (NDS)" with a link to the project), in a clear and visible manner.
## 5. Disclaimer of Warranty and Liability
This library is provided on an **"as is"** basis, without warranty of any kind.
+88 -39
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. Component APIs, token naming, and internal architecture may change before a stable release.
> **ALPHA** — The library is under active development. Current version: `1.2.1`. Component APIs, token naming, and internal architecture may change before a stable release.
## Core Principles
@@ -36,37 +35,54 @@ 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 |
| `Tabs` / `Tab` / `TabItem` / `TabContent` | Navigation |
| `Link` | Layout |
| `ListItem` | Data Display |
| `Notifications` | Feedback |
| `Icons` | 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 |
> Many components listed in earlier versions of this README (Navbar, Sidebar, Card, Modal, etc.) 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.
## Installation
Requires **Node.js >= 22.12.0**.
```bash
npm install @unkn0wndo3s/nova-design-system
```
@@ -87,12 +103,33 @@ import { Button } from '@unkn0wndo3s/nova-design-system';
```astro
---
import { Notifications } from '@unkn0wndo3s/nova-design-system';
import { Notification } from '@unkn0wndo3s/nova-design-system';
---
<Notifications type="warning">
<Notification type="warning">
This is a warning message.
</Notifications>
</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
@@ -119,26 +156,38 @@ npm run dev
```bash
npm run build # Build the project
npm run check # Type checking
npm run lint # Lint the codebase
npm run format # Format code
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/
│ ├── numericStepper/
│ ├── pagination/
│ ├── Radio/
│ ├── Select/
│ ├── Sidebar/
│ ├── Tabs/
│ ├── textField/
│ ├── Toggle/
│ ├── Tooltip/
│ └── index.ts
├── layouts/ # Astro layouts
├── pages/ # Documentation pages
├── layouts/ # Astro layouts
├── pages/ # Documentation pages
├── styles/
│ ├── tokens/
│ │ ├── _colors.scss
@@ -152,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
+1131 -1655
View File
File diff suppressed because it is too large Load Diff
+27 -4
View File
@@ -1,9 +1,26 @@
{
"name": "@unkn0wndo3s/nova-design-system",
"type": "module",
"version": "0.02.0",
"main": "./src/index.ts",
"version": "1.2.1",
"description": "Nova Design System — Astro component library",
"license": "LICENSE.md",
"author": "Unkn0wn",
"main": "./src/index.ts",
"repository": {
"type": "git",
"url": "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,9 +40,13 @@
"astro": "astro"
},
"dependencies": {
"astro": "^6.3.8"
"@lucide/astro": "^1.21.0"
},
"peerDependencies": {
"astro": "^7.0.0"
},
"devDependencies": {
"astro": "^7.0.0",
"sass": "^1.99.0"
}
}
+32
View File
@@ -0,0 +1,32 @@
@use "../../styles/tokens/typography" as *;
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--nds-radius-full);
overflow: hidden;
width: 40px;
height: 40px;
flex-shrink: 0;
background-color: var(--nds-primary-soft);
box-shadow: inset 0 0 0 1px var(--nds-border);
&__content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
@include text-label;
color: var(--nds-primary);
object-fit: cover;
}
&__fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--nds-primary);
}
}
+31
View File
@@ -0,0 +1,31 @@
---
import { User } from '@lucide/astro';
export interface Props {
type: 'photo' | 'initials';
name: string;
image?: string;
}
const { type, name, image } = Astro.props;
---
<div class={`avatar`}>
{type === 'photo' && image ? (
<div class="avatar__content avatar__content--photo">
<img
src={image}
alt={name}
class="avatar__content"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="avatar__fallback" style="display:none;">
<User size={24}/>
</span>
</div>
) : (
<span class="avatar__content">{name.split(' ').map(word => word[0]).join('').toUpperCase()}</span>
)}
</div>
<style lang="scss">
@use './_avatar.scss';
</style>
+58
View File
@@ -0,0 +1,58 @@
@use "../../styles/tokens/typography" as *;
.badge {
display: inline-flex;
align-items: center;
gap: var(--nds-spacing-2xs);
padding: 3px var(--nds-spacing-xs);
border-radius: var(--nds-radius-full);
@include text-sm;
font-weight: 600;
line-height: 1.2;
width: fit-content;
white-space: nowrap;
&__primary {
--c: var(--nds-primary);
--on: var(--nds-on-primary);
--soft: var(--nds-primary-soft);
}
&__neutral {
--c: var(--nds-neutral);
--on: var(--nds-surface);
--soft: color-mix(in srgb, var(--nds-neutral) 16%, transparent);
}
&__success {
--c: var(--nds-success-medium);
--on: #fff;
--soft: var(--nds-success-low);
}
&__warning {
--c: var(--nds-warning-medium);
--on: #fff;
--soft: var(--nds-warning-low);
}
&__error {
--c: var(--nds-error-medium);
--on: #fff;
--soft: var(--nds-error-low);
}
&__info {
--c: var(--nds-info-medium);
--on: #fff;
--soft: var(--nds-info-low);
}
&--soft {
background-color: var(--soft);
color: var(--c);
}
&--solid {
background-color: var(--c);
color: var(--on);
}
&__dot {
width: 6px;
height: 6px;
border-radius: var(--nds-radius-full);
background-color: currentColor;
}
}
+15
View File
@@ -0,0 +1,15 @@
---
export interface Props {
type?: "primary" | "neutral" | "success" | "warning" | "error" | "info";
variant?: "soft" | "solid";
}
const { type = "primary", variant = "soft" } = Astro.props;
---
<span class={`badge badge__${type} badge--${variant}`}>
<slot />
</span>
<style lang="scss">
@use "./_badge.scss";
</style>
@@ -0,0 +1,27 @@
@use "../../styles/tokens/typography" as *;
.breadcrumb {
display: flex;
align-items: center;
gap: var(--nds-spacing-xs);
@include text-base;
&__item {
text-decoration: none;
color: var(--nds-neutral);
transition: color 120ms ease;
&:hover {
color: var(--nds-text);
}
&:not(:first-child)::before {
content: "/";
color: var(--nds-disabled);
margin-right: var(--nds-spacing-xs);
}
&--current {
color: var(--nds-text);
font-weight: 600;
pointer-events: none;
}
}
}
@@ -0,0 +1,11 @@
---
export interface Props {}
---
<nav class="breadcrumb" aria-label="Breadcrumb">
<slot />
</nav>
<style lang="scss">
@use "./_breadcrumb.scss";
</style>
@@ -0,0 +1,19 @@
---
export interface Props {
href?: string;
current?: boolean;
}
const { href = "#", current = false } = Astro.props;
---
<a
href={href}
class={`breadcrumb__item ${current ? "breadcrumb__item--current" : ""}`}
aria-current={current ? "page" : undefined}
>
<slot />
</a>
<style lang="scss">
@use "./_breadcrumb.scss";
</style>
+76 -16
View File
@@ -1,37 +1,97 @@
@use '../../styles/tokens/typography' as *;
@use "../../styles/tokens/typography" as *;
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--nds-spacing-xs);
width: fit-content;
padding: var(--nds-spacing-sm) var(--nds-spacing-md);
border-radius: var(--nds-radius-sm);
@include text-base;
border: var(--nds-border-width-thin) solid transparent;
border-radius: var(--nds-radius-md);
@include text-label;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition:
background-color 140ms ease,
border-color 140ms ease,
color 140ms ease,
box-shadow 140ms ease,
transform 80ms ease;
&:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--nds-ring);
}
&:active:not(.button--disabled) {
transform: translateY(0.5px);
}
&--sm {
height: 30px;
padding: 0 var(--nds-spacing-sm);
}
&--md {
height: 38px;
padding: 0 var(--nds-spacing-md);
}
&--lg {
height: 46px;
padding: 0 var(--nds-spacing-lg);
font-size: 0.9375rem;
}
&--icon {
padding: 0;
aspect-ratio: 1;
}
&--icon.button--sm {
width: 30px;
}
&--icon.button--md {
width: 38px;
}
&--icon.button--lg {
width: 46px;
}
&__primary {
background-color: var(--nds-primary);
color: var(--nds-text);
color: var(--nds-on-primary);
border-color: var(--nds-primary);
&:hover:not(.button--disabled) {
background-color: var(--nds-secondary);
}
&:active:not(.button--disabled) {
background-color: var(--nds-accent);
color: var(--nds-background);
background-color: color-mix(in srgb, var(--nds-primary) 88%, #000);
border-color: color-mix(in srgb, var(--nds-primary) 88%, #000);
}
}
&__secondary {
border: var(--nds-border-width-medium) solid;
border-color: var(--nds-primary);
background-color: transparent;
color: var(--nds-primary);
border-color: var(--nds-border-strong);
&:hover:not(.button--disabled) {
border-color: var(--nds-secondary);
border-color: var(--nds-primary);
background-color: var(--nds-primary-soft);
}
&:active:not(.button--disabled) {
border-color: var(--nds-accent);
color: var(--nds-accent);
}
&__ghost {
background-color: transparent;
color: var(--nds-text);
border-color: transparent;
&:hover:not(.button--disabled) {
background-color: var(--nds-surface-hover);
}
}
&__danger {
background-color: var(--nds-error-medium);
color: #fff;
border-color: var(--nds-error-medium);
&:hover:not(.button--disabled) {
background-color: color-mix(in srgb, var(--nds-error-medium) 88%, #000);
border-color: color-mix(in srgb, var(--nds-error-medium) 88%, #000);
}
}
&--disabled {
cursor: not-allowed;
background-color: var(--nds-disabled);
color: var(--nds-neutral);
border-color: transparent;
box-shadow: none;
}
}
+39 -7
View File
@@ -1,15 +1,47 @@
---
export interface Props {
type: 'primary' | 'secondary';
disabled?: boolean;
type?: "primary" | "secondary" | "ghost" | "danger";
size?: "sm" | "md" | "lg";
disabled?: boolean;
icon?: boolean;
href?: string;
htmlType?: "button" | "submit" | "reset";
}
const { type, disabled = false } = Astro.props;
const {
type = "primary",
size = "md",
disabled = false,
icon = false,
href,
htmlType = "button",
...rest
} = Astro.props;
const classes = [
"button",
`button__${type}`,
`button--${size}`,
icon ? "button--icon" : "",
disabled ? "button--disabled" : "",
]
.filter(Boolean)
.join(" ");
const Tag = href ? "a" : "button";
---
<div class={`button button__${type} ${disabled ? 'button--disabled' : ''}`}>
<slot/>
</div>
<Tag
class={classes}
href={href}
type={href ? undefined : htmlType}
aria-disabled={disabled ? "true" : undefined}
{...rest}
>
<slot name="icon-left" />
<slot />
<slot name="icon-right" />
</Tag>
<style lang="scss">
@use './_button.scss';
@use "./_button.scss";
</style>
+53
View File
@@ -0,0 +1,53 @@
@use "../../styles/tokens/typography" as *;
.card {
display: flex;
flex-direction: column;
background-color: var(--nds-surface);
border: var(--nds-border-width-thin) solid var(--nds-border);
border-radius: var(--nds-radius-lg);
overflow: hidden;
box-shadow: var(--nds-shadow-sm);
width: fit-content;
transition:
box-shadow 160ms ease,
border-color 160ms ease;
&:hover {
box-shadow: var(--nds-shadow-md);
}
&__cover {
height: 150px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
&__body {
display: flex;
flex-direction: column;
gap: var(--nds-spacing-xs);
padding: var(--nds-spacing-md);
}
&__title {
@include text-xl;
color: var(--nds-text);
margin: 0;
}
&__subtitle {
@include text-base;
color: var(--nds-neutral);
margin: 0;
}
&__content {
@include text-base;
color: var(--nds-text);
&:empty {
display: none;
}
}
&__footer {
margin-top: var(--nds-spacing-2xs);
display: flex;
gap: var(--nds-spacing-xs);
}
}
+33
View File
@@ -0,0 +1,33 @@
---
export interface Props {
title?: string;
subtitle?: string;
cover?: string;
}
const { title, subtitle, cover } = Astro.props;
const hasFooter = Astro.slots.has("footer");
---
<div class="card">
{
cover && (
<div class="card__cover" style={`background-image: url(${cover})`} />
)
}
<div class="card__body">
{title && <p class="card__title">{title}</p>}
{subtitle && <p class="card__subtitle">{subtitle}</p>}
<div class="card__content"><slot /></div>
{
hasFooter && (
<div class="card__footer">
<slot name="footer" />
</div>
)
}
</div>
</div>
<style lang="scss">
@use "./_card.scss";
</style>
+51
View File
@@ -0,0 +1,51 @@
@use "../../styles/tokens/typography" as *;
.checkbox {
display: inline-flex;
align-items: center;
gap: var(--nds-spacing-xs);
cursor: pointer;
@include text-base;
color: var(--nds-text);
&__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
&__box {
width: 18px;
height: 18px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--nds-border-width-medium) solid var(--nds-border-strong);
border-radius: var(--nds-radius-sm);
background-color: var(--nds-surface);
color: var(--nds-on-primary);
transition: all 130ms ease;
svg {
width: 12px;
height: 12px;
opacity: 0;
transform: scale(0.6);
transition: all 130ms ease;
}
}
&__input:checked + &__box {
background-color: var(--nds-primary);
border-color: var(--nds-primary);
svg {
opacity: 1;
transform: scale(1);
}
}
&__input:focus-visible + &__box {
box-shadow: 0 0 0 3px var(--nds-ring);
}
&--disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
+37
View File
@@ -0,0 +1,37 @@
---
export interface Props {
id: string;
name?: string;
checked?: boolean;
disabled?: boolean;
}
const { id, name, checked = false, disabled = false } = Astro.props;
---
<label class={`checkbox ${disabled ? "checkbox--disabled" : ""}`} for={id}>
<input
type="checkbox"
id={id}
name={name}
checked={checked}
disabled={disabled}
class="checkbox__input"
/>
<span class="checkbox__box" aria-hidden="true">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span class="checkbox__label"><slot /></span>
</label>
<style lang="scss">
@use "./_checkbox.scss";
</style>
-45
View File
@@ -1,45 +0,0 @@
---
import arrow16down from './svgs/arrow2-16-down.svg?raw';
import arrow16left from './svgs/arrow2-16-left.svg?raw';
import arrow16right from './svgs/arrow2-16-right.svg?raw';
import arrow16up from './svgs/arrow2-16-up.svg?raw';
import arrow24down from './svgs/arrow2-24-down.svg?raw';
import arrow24left from './svgs/arrow2-24-left.svg?raw';
import arrow24right from './svgs/arrow2-24-right.svg?raw';
import arrow24up from './svgs/arrow2-24-up.svg?raw';
import arrow32down from './svgs/arrow2-32-down.svg?raw';
import arrow32left from './svgs/arrow2-32-left.svg?raw';
import arrow32right from './svgs/arrow2-32-right.svg?raw';
import arrow32up from './svgs/arrow2-32-up.svg?raw';
export interface Props {
size: 16 | 24 | 32;
orientation: 'up' | 'down' | 'left' | 'right';
label?: string;
class?: string;
}
const { size = 24, orientation = 'down', label, class: className } = Astro.props;
let raw: string;
if (size === 16 && orientation === 'down') raw = arrow16down;
else if (size === 16 && orientation === 'left') raw = arrow16left;
else if (size === 16 && orientation === 'right') raw = arrow16right;
else if (size === 16 && orientation === 'up') raw = arrow16up;
else if (size === 24 && orientation === 'down') raw = arrow24down;
else if (size === 24 && orientation === 'left') raw = arrow24left;
else if (size === 24 && orientation === 'right') raw = arrow24right;
else if (size === 24 && orientation === 'up') raw = arrow24up;
else if (size === 32 && orientation === 'down') raw = arrow32down;
else if (size === 32 && orientation === 'left') raw = arrow32left;
else if (size === 32 && orientation === 'right') raw = arrow32right;
else if (size === 32 && orientation === 'up') raw = arrow32up;
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size and orientation.
const classes = ['nds-icon-arrow2', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.44167 9.69166C8.32448 9.8087 8.16563 9.87444 8 9.87444C7.83438 9.87444 7.67553 9.8087 7.55834 9.69166L5.20084 7.33499C5.08365 7.21775 5.01783 7.05875 5.01787 6.89297C5.01791 6.7272 5.0838 6.56823 5.20105 6.45104C5.31829 6.33384 5.47729 6.26803 5.64307 6.26807C5.80884 6.26811 5.96781 6.334 6.085 6.45124L8 8.36624L9.915 6.45124C10.0328 6.33734 10.1907 6.27427 10.3545 6.27561C10.5184 6.27696 10.6752 6.34262 10.7911 6.45844C10.9071 6.57427 10.9729 6.731 10.9744 6.89487C10.9759 7.05874 10.913 7.21665 10.7992 7.33458L8.44209 9.69208L8.44167 9.69166Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 731 B

@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30833 7.55834C6.19129 7.67553 6.12555 7.83439 6.12555 8.00001C6.12555 8.16564 6.19129 8.32449 6.30833 8.44168L8.665 10.7992C8.72305 10.8572 8.79197 10.9032 8.86781 10.9346C8.94366 10.966 9.02494 10.9822 9.10702 10.9821C9.1891 10.9821 9.27038 10.9659 9.34621 10.9345C9.42204 10.9031 9.49093 10.857 9.54896 10.799C9.60699 10.7409 9.65301 10.672 9.6844 10.5962C9.7158 10.5203 9.73195 10.439 9.73193 10.3569C9.73191 10.2749 9.71572 10.1936 9.68429 10.1178C9.65286 10.0419 9.6068 9.97304 9.54875 9.91501L7.63417 8.00001L9.54917 6.08501C9.60889 6.02738 9.65653 5.95844 9.68932 5.8822C9.72211 5.80597 9.73939 5.72396 9.74015 5.64098C9.74091 5.55799 9.72514 5.47568 9.69375 5.39886C9.66236 5.32204 9.61599 5.25223 9.55733 5.19352C9.49868 5.13481 9.42892 5.08837 9.35212 5.05691C9.27532 5.02545 9.19303 5.00959 9.11005 5.01027C9.02706 5.01096 8.94504 5.02816 8.86877 5.06088C8.7925 5.0936 8.72352 5.14118 8.66583 5.20084L6.30833 7.55834Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69167 7.55834C9.80871 7.67553 9.87445 7.83439 9.87445 8.00001C9.87445 8.16564 9.80871 8.32449 9.69167 8.44168L7.335 10.7992C7.27695 10.8572 7.20803 10.9032 7.13219 10.9346C7.05634 10.966 6.97506 10.9822 6.89298 10.9821C6.8109 10.9821 6.72962 10.9659 6.65379 10.9345C6.57796 10.9031 6.50907 10.857 6.45104 10.799C6.39301 10.7409 6.34699 10.672 6.3156 10.5962C6.2842 10.5203 6.26805 10.439 6.26807 10.3569C6.26809 10.2749 6.28428 10.1936 6.31571 10.1178C6.34714 10.0419 6.3932 9.97304 6.45125 9.91501L8.36583 8.00001L6.45083 6.08501C6.39111 6.02738 6.34347 5.95844 6.31068 5.8822C6.27789 5.80597 6.26061 5.72396 6.25985 5.64098C6.25909 5.55799 6.27486 5.47568 6.30625 5.39886C6.33764 5.32204 6.38401 5.25223 6.44267 5.19352C6.50132 5.13481 6.57108 5.08837 6.64788 5.05691C6.72468 5.02545 6.80697 5.00959 6.88995 5.01027C6.97294 5.01096 7.05496 5.02816 7.13123 5.06088C7.2075 5.0936 7.27648 5.14118 7.33417 5.20084L9.69167 7.55834Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.55833 6.30833C7.67552 6.19129 7.83437 6.12555 8 6.12555C8.16562 6.12555 8.32447 6.19129 8.44166 6.30833L10.7992 8.665C10.8572 8.72305 10.9032 8.79197 10.9346 8.86781C10.966 8.94366 10.9822 9.02494 10.9821 9.10702C10.9821 9.1891 10.9659 9.27038 10.9345 9.34621C10.9031 9.42204 10.857 9.49093 10.799 9.54896C10.7409 9.60699 10.672 9.65301 10.5961 9.6844C10.5203 9.7158 10.439 9.73195 10.3569 9.73193C10.2748 9.73191 10.1936 9.71572 10.1177 9.68429C10.0419 9.65286 9.97302 9.6068 9.915 9.54875L8 7.63417L6.085 9.54917C6.02737 9.60889 5.95843 9.65653 5.88219 9.68932C5.80595 9.72211 5.72395 9.73939 5.64096 9.74015C5.55798 9.74091 5.47567 9.72514 5.39884 9.69375C5.32202 9.66236 5.25222 9.61599 5.19351 9.55733C5.1348 9.49868 5.08835 9.42892 5.05689 9.35212C5.02543 9.27532 5.00958 9.19303 5.01026 9.11005C5.01094 9.02706 5.02814 8.94504 5.06086 8.86877C5.09358 8.7925 5.14116 8.72352 5.20083 8.66583L7.55833 6.30833Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.795 15.045C12.5841 15.2557 12.2981 15.374 12 15.374C11.7019 15.374 11.4159 15.2557 11.205 15.045L6.9615 10.803C6.75056 10.592 6.63209 10.3058 6.63216 10.0074C6.63223 9.70897 6.75083 9.42283 6.96188 9.21188C7.17292 9.00094 7.45912 8.88247 7.75752 8.88254C8.05591 8.88261 8.34205 9.00121 8.553 9.21226L12 12.6593L15.447 9.21226C15.6591 9.00723 15.9432 8.8937 16.2382 8.89612C16.5332 8.89855 16.8154 9.01673 17.0241 9.22521C17.2327 9.4337 17.3512 9.71581 17.3539 10.0108C17.3566 10.3058 17.2433 10.59 17.0385 10.8023L12.7958 15.0458L12.795 15.045Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 727 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.95499 11.205C8.74431 11.4159 8.62598 11.7019 8.62598 12C8.62598 12.2981 8.74431 12.5841 8.95499 12.795L13.197 17.0385C13.3015 17.143 13.4255 17.2258 13.5621 17.2823C13.6986 17.3388 13.8449 17.3679 13.9926 17.3678C14.1404 17.3678 14.2867 17.3387 14.4232 17.2821C14.5597 17.2255 14.6837 17.1426 14.7881 17.0381C14.8926 16.9336 14.9754 16.8096 15.0319 16.6731C15.0884 16.5365 15.1175 16.3902 15.1175 16.2425C15.1174 16.0947 15.0883 15.9484 15.0317 15.812C14.9751 15.6755 14.8922 15.5515 14.7877 15.447L11.3415 12L14.7885 8.553C14.896 8.44927 14.9817 8.32518 15.0408 8.18795C15.0998 8.05072 15.1309 7.90312 15.1323 7.75374C15.1336 7.60437 15.1052 7.45621 15.0487 7.31793C14.9922 7.17964 14.9088 7.054 14.8032 6.94832C14.6976 6.84264 14.572 6.75905 14.4338 6.70242C14.2956 6.64578 14.1474 6.61725 13.9981 6.61848C13.8487 6.6197 13.7011 6.65067 13.5638 6.70956C13.4265 6.76846 13.3023 6.8541 13.1985 6.9615L8.95499 11.205Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.045 11.205C15.2557 11.4159 15.374 11.7019 15.374 12C15.374 12.2981 15.2557 12.5841 15.045 12.795L10.803 17.0385C10.6985 17.143 10.5745 17.2258 10.4379 17.2823C10.3014 17.3388 10.1551 17.3679 10.0074 17.3678C9.85962 17.3678 9.71333 17.3387 9.57684 17.2821C9.44035 17.2255 9.31634 17.1426 9.21189 17.0381C9.10744 16.9336 9.02459 16.8096 8.96808 16.6731C8.91158 16.5365 8.88251 16.3902 8.88254 16.2425C8.88258 16.0947 8.91171 15.9484 8.96829 15.812C9.02486 15.6755 9.10776 15.5515 9.21226 15.447L12.6585 12L9.21151 8.553C9.10402 8.44927 9.01825 8.32518 8.95923 8.18795C8.90021 8.05072 8.8691 7.90312 8.86774 7.75374C8.86637 7.60437 8.89476 7.45621 8.95126 7.31793C9.00776 7.17964 9.09124 7.054 9.19682 6.94832C9.3024 6.84264 9.42797 6.75905 9.5662 6.70242C9.70443 6.64578 9.85255 6.61725 10.0019 6.61848C10.1513 6.6197 10.2989 6.65067 10.4362 6.70956C10.5735 6.76846 10.6977 6.8541 10.8015 6.9615L15.045 11.205Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.205 8.95499C11.4159 8.74431 11.7019 8.62598 12 8.62598C12.2981 8.62598 12.5841 8.74431 12.795 8.95499L17.0385 13.197C17.143 13.3015 17.2258 13.4255 17.2823 13.5621C17.3388 13.6986 17.3679 13.8449 17.3678 13.9926C17.3678 14.1404 17.3387 14.2867 17.2821 14.4232C17.2255 14.5597 17.1426 14.6837 17.0381 14.7881C16.9336 14.8926 16.8096 14.9754 16.6731 15.0319C16.5365 15.0884 16.3902 15.1175 16.2425 15.1175C16.0947 15.1174 15.9484 15.0883 15.812 15.0317C15.6755 14.9751 15.5515 14.8922 15.447 14.7877L12 11.3415L8.553 14.7885C8.44927 14.896 8.32518 14.9817 8.18795 15.0408C8.05072 15.0998 7.90312 15.1309 7.75374 15.1323C7.60437 15.1336 7.45621 15.1052 7.31793 15.0487C7.17964 14.9922 7.054 14.9088 6.94832 14.8032C6.84264 14.6976 6.75905 14.572 6.70242 14.4338C6.64578 14.2956 6.61725 14.1474 6.61848 13.9981C6.6197 13.8487 6.65067 13.7011 6.70956 13.5638C6.76846 13.4265 6.8541 13.3023 6.9615 13.1985L11.205 8.95499Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1483 20.3984C16.8436 20.7027 16.4306 20.8736 16 20.8736C15.5694 20.8736 15.1564 20.7027 14.8517 20.3984L8.72217 14.271C8.41747 13.9662 8.24634 13.5528 8.24644 13.1218C8.24655 12.6908 8.41786 12.2774 8.72271 11.9727C9.02755 11.668 9.44095 11.4969 9.87197 11.497C10.303 11.4971 10.7163 11.6684 11.021 11.9733L16 16.9523L20.979 11.9733C21.2853 11.6771 21.6957 11.5131 22.1218 11.5166C22.5479 11.5201 22.9555 11.6908 23.257 11.992C23.5584 12.2931 23.7295 12.7006 23.7334 13.1267C23.7373 13.5528 23.5737 13.9633 23.2778 14.2699L17.1494 20.3994L17.1483 20.3984Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 738 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6016 14.8517C11.2973 15.1563 11.1264 15.5694 11.1264 16C11.1264 16.4306 11.2973 16.8436 11.6016 17.1483L17.729 23.2778C17.8799 23.4287 18.0591 23.5484 18.2563 23.63C18.4535 23.7116 18.6648 23.7536 18.8782 23.7535C19.0917 23.7535 19.303 23.7114 19.5001 23.6297C19.6973 23.548 19.8764 23.4282 20.0273 23.2773C20.1781 23.1263 20.2978 22.9472 20.3794 22.75C20.4611 22.5528 20.503 22.3414 20.503 22.128C20.5029 21.9146 20.4609 21.7033 20.3791 21.5061C20.2974 21.309 20.1777 21.1299 20.0267 20.979L15.0488 16L20.0278 11.021C20.1831 10.8712 20.307 10.6919 20.3922 10.4937C20.4775 10.2955 20.5224 10.0823 20.5244 9.86651C20.5264 9.65074 20.4853 9.43674 20.4037 9.237C20.3221 9.03725 20.2015 8.85576 20.049 8.70312C19.8965 8.55047 19.7152 8.42972 19.5155 8.34792C19.3158 8.26612 19.1019 8.22491 18.8861 8.22668C18.6703 8.22845 18.4571 8.27318 18.2588 8.35825C18.0605 8.44332 17.8811 8.56703 17.7311 8.72216L11.6016 14.8517Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3984 14.8517C20.7027 15.1563 20.8736 15.5694 20.8736 16C20.8736 16.4306 20.7027 16.8436 20.3984 17.1483L14.271 23.2778C14.1201 23.4287 13.9409 23.5484 13.7437 23.63C13.5465 23.7116 13.3352 23.7536 13.1218 23.7535C12.9084 23.7535 12.697 23.7114 12.4999 23.6297C12.3027 23.548 12.1236 23.4282 11.9727 23.2773C11.8219 23.1263 11.7022 22.9472 11.6206 22.75C11.5389 22.5528 11.497 22.3414 11.497 22.128C11.4971 21.9146 11.5391 21.7033 11.6209 21.5061C11.7026 21.309 11.8223 21.1299 11.9733 20.979L16.9512 16L11.9722 11.021C11.8169 10.8712 11.693 10.6919 11.6078 10.4937C11.5225 10.2955 11.4776 10.0823 11.4756 9.86651C11.4736 9.65074 11.5147 9.43674 11.5963 9.237C11.6779 9.03725 11.7985 8.85576 11.951 8.70312C12.1035 8.55047 12.2848 8.42972 12.4845 8.34792C12.6842 8.26612 12.8981 8.22491 13.1139 8.22668C13.3297 8.22845 13.5429 8.27318 13.7412 8.35825C13.9395 8.44332 14.1189 8.56703 14.2689 8.72216L20.3984 14.8517Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8517 11.6017C15.1563 11.2974 15.5694 11.1264 16 11.1264C16.4306 11.1264 16.8436 11.2974 17.1483 11.6017L23.2778 17.729C23.4287 17.8799 23.5484 18.0591 23.63 18.2563C23.7116 18.4535 23.7536 18.6648 23.7535 18.8783C23.7535 19.0917 23.7114 19.303 23.6297 19.5001C23.548 19.6973 23.4282 19.8764 23.2773 20.0273C23.1263 20.1782 22.9472 20.2978 22.75 20.3795C22.5528 20.4611 22.3414 20.5031 22.128 20.503C21.9146 20.503 21.7033 20.4609 21.5061 20.3792C21.309 20.2974 21.1299 20.1777 20.979 20.0268L16 15.0488L11.021 20.0278C10.8712 20.1831 10.6919 20.307 10.4937 20.3922C10.2955 20.4775 10.0823 20.5224 9.86651 20.5244C9.65074 20.5264 9.43674 20.4854 9.237 20.4038C9.03725 20.3221 8.85576 20.2016 8.70312 20.0491C8.55047 19.8966 8.42972 19.7152 8.34792 19.5155C8.26612 19.3159 8.22491 19.1019 8.22668 18.8861C8.22845 18.6704 8.27318 18.4571 8.35825 18.2588C8.44332 18.0605 8.56703 17.8811 8.72216 17.7312L14.8517 11.6017Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

-26
View File
@@ -1,26 +0,0 @@
---
import bin16 from './svgs/bin-16.svg?raw';
import bin24 from './svgs/bin-24.svg?raw';
import bin32 from './svgs/bin-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = bin16;
else if (size === 24) raw = bin24;
else if (size === 32) raw = bin32;
else raw = '';
const classes = ['nds-icon-bin', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
-3
View File
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22223 13C4.91667 13 4.65519 12.8913 4.43778 12.6739C4.22037 12.4565 4.11149 12.1948 4.11111 11.8889V4.66667C3.95371 4.66667 3.82186 4.61333 3.71556 4.50667C3.60926 4.4 3.55593 4.26815 3.55556 4.11111C3.55519 3.95407 3.60852 3.82222 3.71556 3.71556C3.8226 3.60889 3.95445 3.55556 4.11111 3.55556H6.33334C6.33334 3.39815 6.38667 3.2663 6.49334 3.16C6.6 3.0537 6.73186 3.00037 6.88889 3H9.11111C9.26852 3 9.40056 3.05333 9.50723 3.16C9.61389 3.26667 9.66704 3.39852 9.66667 3.55556H11.8889C12.0463 3.55556 12.1783 3.60889 12.285 3.71556C12.3917 3.82222 12.4448 3.95407 12.4444 4.11111C12.4441 4.26815 12.3907 4.40018 12.2844 4.50722C12.1782 4.61426 12.0463 4.66741 11.8889 4.66667V11.8889C11.8889 12.1944 11.7802 12.4561 11.5628 12.6739C11.3454 12.8917 11.0837 13.0004 10.7778 13H5.22223ZM7.285 10.6178C7.3913 10.5119 7.44445 10.38 7.44445 10.2222V6.33333C7.44445 6.17593 7.39111 6.04407 7.28445 5.93778C7.17778 5.83148 7.04593 5.77815 6.88889 5.77778C6.73186 5.77741 6.6 5.83074 6.49334 5.93778C6.38667 6.04481 6.33334 6.17667 6.33334 6.33333V10.2222C6.33334 10.3796 6.38667 10.5117 6.49334 10.6183C6.6 10.725 6.73186 10.7781 6.88889 10.7778C7.04593 10.7774 7.17797 10.7241 7.285 10.6178ZM9.50723 10.6178C9.61352 10.5119 9.66667 10.38 9.66667 10.2222V6.33333C9.66667 6.17593 9.61334 6.04407 9.50667 5.93778C9.4 5.83148 9.26815 5.77815 9.11111 5.77778C8.95408 5.77741 8.82223 5.83074 8.71556 5.93778C8.60889 6.04481 8.55556 6.17667 8.55556 6.33333V10.2222C8.55556 10.3796 8.60889 10.5117 8.71556 10.6183C8.82223 10.725 8.95408 10.7781 9.11111 10.7778C9.26815 10.7774 9.40019 10.7241 9.50723 10.6178Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M7 21C6.45 21 5.97934 20.8043 5.588 20.413C5.19667 20.0217 5.00067 19.5507 5 19V6C4.71667 6 4.47934 5.904 4.288 5.712C4.09667 5.52 4.00067 5.28267 4 5C3.99934 4.71733 4.09534 4.48 4.288 4.288C4.48067 4.096 4.718 4 5 4H9C9 3.71667 9.096 3.47933 9.288 3.288C9.48 3.09667 9.71734 3.00067 10 3H14C14.2833 3 14.521 3.096 14.713 3.288C14.905 3.48 15.0007 3.71733 15 4H19C19.2833 4 19.521 4.096 19.713 4.288C19.905 4.48 20.0007 4.71733 20 5C19.9993 5.28267 19.9033 5.52033 19.712 5.713C19.5207 5.90567 19.2833 6.00133 19 6V19C19 19.55 18.8043 20.021 18.413 20.413C18.0217 20.805 17.5507 21.0007 17 21H7ZM10.713 16.712C10.9043 16.5213 11 16.284 11 16V9C11 8.71667 10.904 8.47933 10.712 8.288C10.52 8.09667 10.2827 8.00067 10 8C9.71734 7.99933 9.48 8.09533 9.288 8.288C9.096 8.48067 9 8.718 9 9V16C9 16.2833 9.096 16.521 9.288 16.713C9.48 16.905 9.71734 17.0007 10 17C10.2827 16.9993 10.5203 16.9033 10.713 16.712ZM14.713 16.712C14.9043 16.5213 15 16.284 15 16V9C15 8.71667 14.904 8.47933 14.712 8.288C14.52 8.09667 14.2827 8.00067 14 8C13.7173 7.99933 13.48 8.09533 13.288 8.288C13.096 8.48067 13 8.718 13 9V16C13 16.2833 13.096 16.521 13.288 16.713C13.48 16.905 13.7173 17.0007 14 17C14.2827 16.9993 14.5203 16.9033 14.713 16.712Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8.77778 29C7.98334 29 7.30348 28.7174 6.73822 28.1521C6.17297 27.5868 5.88985 26.9065 5.88889 26.1111V7.33333C5.47963 7.33333 5.13682 7.19467 4.86045 6.91733C4.58408 6.64 4.44541 6.29718 4.44445 5.88889C4.44348 5.48059 4.58215 5.13778 4.86045 4.86044C5.13874 4.58311 5.48156 4.44444 5.88889 4.44444H11.6667C11.6667 4.03519 11.8053 3.69237 12.0827 3.416C12.36 3.13963 12.7028 3.00096 13.1111 3H18.8889C19.2981 3 19.6414 3.13867 19.9188 3.416C20.1961 3.69333 20.3343 4.03615 20.3333 4.44444H26.1111C26.5204 4.44444 26.8637 4.58311 27.141 4.86044C27.4183 5.13778 27.5565 5.48059 27.5556 5.88889C27.5546 6.29718 27.4159 6.64048 27.1396 6.91878C26.8632 7.19707 26.5204 7.33526 26.1111 7.33333V26.1111C26.1111 26.9056 25.8285 27.5859 25.2632 28.1521C24.698 28.7183 24.0176 29.001 23.2222 29H8.77778ZM14.141 22.8062C14.4174 22.5308 14.5556 22.188 14.5556 21.7778V11.6667C14.5556 11.2574 14.4169 10.9146 14.1396 10.6382C13.8622 10.3619 13.5194 10.2232 13.1111 10.2222C12.7028 10.2213 12.36 10.3599 12.0827 10.6382C11.8053 10.9165 11.6667 11.2593 11.6667 11.6667V21.7778C11.6667 22.187 11.8053 22.5303 12.0827 22.8077C12.36 23.085 12.7028 23.2232 13.1111 23.2222C13.5194 23.2213 13.8627 23.0826 14.141 22.8062ZM19.9188 22.8062C20.1951 22.5308 20.3333 22.188 20.3333 21.7778V11.6667C20.3333 11.2574 20.1947 10.9146 19.9173 10.6382C19.64 10.3619 19.2972 10.2232 18.8889 10.2222C18.4806 10.2213 18.1378 10.3599 17.8604 10.6382C17.5831 10.9165 17.4444 11.2593 17.4444 11.6667V21.7778C17.4444 22.187 17.5831 22.5303 17.8604 22.8077C18.1378 23.085 18.4806 23.2232 18.8889 23.2222C19.2972 23.2213 19.6405 23.0826 19.9188 22.8062Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

-26
View File
@@ -1,26 +0,0 @@
---
import burger16 from './svgs/burger-16.svg?raw';
import burger24 from './svgs/burger-24.svg?raw';
import burger32 from './svgs/burger-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = burger16;
else if (size === 24) raw = burger24;
else if (size === 32) raw = burger32;
else raw = '';
const classes = ['nds-icon-burger', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4H14M2 8H14M2 12H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 215 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6H21M3 12H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 233 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8H28M4 16H28M4 24H28" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 233 B

@@ -1,26 +0,0 @@
---
import calendar16 from './svgs/calendar-16.svg?raw';
import calendar24 from './svgs/calendar-24.svg?raw';
import calendar32 from './svgs/calendar-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = calendar16;
else if (size === 24) raw = calendar24;
else if (size === 32) raw = calendar32;
else raw = '';
const classes = ['nds-icon-calendar', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 5.7 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 5.7 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 5.7 KiB

-26
View File
@@ -1,26 +0,0 @@
---
import check16 from './svgs/check-16.svg?raw';
import check24 from './svgs/check-24.svg?raw';
import check32 from './svgs/check-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = check16;
else if (size === 24) raw = check24;
else if (size === 32) raw = check32;
else raw = '';
const classes = ['nds-icon-check', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M6.41997 10.0451L11.9006 4.56449C12.03 4.43515 12.1809 4.37048 12.3533 4.37048C12.5258 4.37048 12.6767 4.43515 12.806 4.56449C12.9353 4.69383 13 4.84752 13 5.02558C13 5.20363 12.9353 5.35711 12.806 5.48602L6.87265 11.4355C6.74332 11.5649 6.59242 11.6295 6.41997 11.6295C6.24752 11.6295 6.09663 11.5649 5.96729 11.4355L3.18654 8.65478C3.05721 8.52544 2.99512 8.37196 3.0003 8.19434C3.00547 8.01671 3.07294 7.86302 3.20271 7.73325C3.33248 7.60348 3.48618 7.53881 3.6638 7.53924C3.84142 7.53967 3.9949 7.60434 4.12424 7.73325L6.41997 10.0451Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 678 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M9.15595 15.6813L19.0211 5.81607C19.2539 5.58326 19.5256 5.46686 19.836 5.46686C20.1464 5.46686 20.418 5.58326 20.6508 5.81607C20.8836 6.04888 21 6.32553 21 6.64602C21 6.96652 20.8836 7.24279 20.6508 7.47482L9.97077 18.1839C9.73797 18.4167 9.46636 18.5331 9.15595 18.5331C8.84554 18.5331 8.57393 18.4167 8.34113 18.1839L3.33578 13.1786C3.10297 12.9458 2.99122 12.6695 3.00054 12.3498C3.00985 12.0301 3.1313 11.7534 3.36488 11.5198C3.59846 11.2863 3.87512 11.1698 4.19484 11.1706C4.51456 11.1714 4.79082 11.2878 5.02363 11.5198L9.15595 15.6813Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 682 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8919 21.3174L26.1416 7.06765C26.4779 6.73137 26.8702 6.56323 27.3186 6.56323C27.767 6.56323 28.1593 6.73137 28.4956 7.06765C28.8319 7.40392 29 7.80353 29 8.26647C29 8.72941 28.8319 9.12846 28.4956 9.46362L13.0689 24.9323C12.7326 25.2686 12.3403 25.4368 11.8919 25.4368C11.4436 25.4368 11.0512 25.2686 10.715 24.9323L3.48501 17.7024C3.14874 17.3661 2.98732 16.9671 3.00078 16.5052C3.01423 16.0434 3.18965 15.6438 3.52705 15.3064C3.86445 14.969 4.26406 14.8009 4.72588 14.802C5.18769 14.8031 5.58674 14.9713 5.92302 15.3064L11.8919 21.3174Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 681 B

-27
View File
@@ -1,27 +0,0 @@
---
import close16 from './svgs/close-16.svg?raw';
import close24 from './svgs/close-24.svg?raw';
import close32 from './svgs/close-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16 ) raw = close16;
else if (size === 24 ) raw = close24;
else if (size === 32 ) raw = close32;
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
const classes = ['nds-icon-close', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M13 3L3 13M13 13L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 232 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M21 3L3 21M21 21L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 232 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M29 3L3 29M29 29L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 232 B

-26
View File
@@ -1,26 +0,0 @@
---
import code16 from './svgs/code-16.svg?raw';
import code24 from './svgs/code-24.svg?raw';
import code32 from './svgs/code-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = code16;
else if (size === 24) raw = code24;
else if (size === 32) raw = code32;
else raw = '';
const classes = ['nds-icon-code', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22222 5.77778L3 8L5.22222 10.2222M10.7778 5.77778L13 8L10.7778 10.2222M9.11111 3.55556L6.88889 12.4444" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 290 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 8L3 12L7 16M17 8L21 12L17 16M14 4L10 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 244 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.77778 10.2222L3 16L8.77778 21.7778M23.2222 10.2222L29 16L23.2222 21.7778M18.8889 4.44444L13.1111 27.5556" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 309 B

-26
View File
@@ -1,26 +0,0 @@
---
import cube16 from './svgs/cube-16.svg?raw';
import cube24 from './svgs/cube-24.svg?raw';
import cube32 from './svgs/cube-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = cube16;
else if (size === 24) raw = cube24;
else if (size === 32) raw = cube32;
else raw = '';
const classes = ['nds-icon-cube', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8.9024 0.210691L14.7691 2.93523C15.1362 3.10556 15.4469 3.37628 15.6649 3.71571C15.8829 4.05515 15.9991 4.44926 16 4.85194V11.1597C15.9991 11.5624 15.8829 11.9565 15.6649 12.2959C15.4469 12.6354 15.1362 12.9061 14.7691 13.0764L8.9024 15.801C8.61985 15.9321 8.31182 16 8 16C7.68818 16 7.38015 15.9321 7.0976 15.801L1.23093 13.0764C0.8638 12.9061 0.553063 12.6354 0.335075 12.2959C0.117087 11.9565 0.000863304 11.5624 0 11.1597V4.85194C0 4.44803 0.1152 4.0526 0.333867 3.707C0.552533 3.3614 0.862933 3.09425 1.23093 2.92356L7.0976 0.19903C7.38015 0.0679377 7.68818 0 8 0C8.31182 0 8.61985 0.0679377 8.9024 0.19903V0.210691ZM1.0624 4.85406V11.1618C1.06243 11.3635 1.12035 11.561 1.22937 11.7312C1.33838 11.9013 1.49397 12.037 1.67787 12.1223L7.4592 14.8044V7.55315L1.08053 4.62719C1.06453 4.70176 1.05666 4.77782 1.05707 4.85406H1.0624ZM14.9291 4.62825L8.5504 7.55421V14.8055L14.3317 12.1234C14.5158 12.038 14.6715 11.9021 14.7805 11.7318C14.8896 11.5615 14.9474 11.3637 14.9472 11.1618V4.85406C14.9472 4.77814 14.939 4.70243 14.9227 4.62825H14.9291ZM7.56907 1.17223L1.87307 3.81195L8.01707 6.6319L14.1611 3.81195L8.46507 1.17223C8.32379 1.10668 8.16978 1.07271 8.01387 1.07271C7.85796 1.07271 7.70394 1.10668 7.56267 1.17223H7.56907Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3536 0.316037L22.1536 4.40284C22.7043 4.65834 23.1704 5.06442 23.4974 5.57357C23.8244 6.08272 23.9987 6.67389 24 7.27791V16.7396C23.9987 17.3436 23.8244 17.9348 23.4974 18.4439C23.1704 18.9531 22.7043 19.3592 22.1536 19.6147L13.3536 23.7015C12.9298 23.8981 12.4677 24 12 24C11.5323 24 11.0702 23.8981 10.6464 23.7015L1.8464 19.6147C1.2957 19.3592 0.829595 18.9531 0.502613 18.4439C0.175631 17.9348 0.00129496 17.3436 0 16.7396V7.27791C0 6.67205 0.1728 6.07891 0.5008 5.5605C0.8288 5.0421 1.2944 4.64137 1.8464 4.38535L10.6464 0.298544C11.0702 0.101907 11.5323 0 12 0C12.4677 0 12.9298 0.101907 13.3536 0.298544V0.316037ZM1.5936 7.28109V16.7428C1.59364 17.0453 1.68052 17.3416 1.84405 17.5968C2.00757 17.852 2.24096 18.0555 2.5168 18.1835L11.1888 22.2067V11.3297L1.6208 6.94079C1.59679 7.05264 1.58499 7.16673 1.5856 7.28109H1.5936ZM22.3936 6.94238L12.8256 11.3313V22.2083L21.4976 18.1851C21.7737 18.057 22.0072 17.8532 22.1708 17.5977C22.3343 17.3422 22.4211 17.0456 22.4208 16.7428V7.28109C22.4208 7.16721 22.4084 7.05365 22.384 6.94238H22.3936ZM11.3536 1.75834L2.8096 5.71793L12.0256 9.94785L21.2416 5.71793L12.6976 1.75834C12.4857 1.66003 12.2547 1.60907 12.0208 1.60907C11.7869 1.60907 11.5559 1.66003 11.344 1.75834H11.3536Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M17.8048 0.421382L29.5381 5.87045C30.2724 6.21112 30.8939 6.75256 31.3299 7.43143C31.7658 8.1103 31.9983 8.89852 32 9.70388V22.3194C31.9983 23.1248 31.7658 23.913 31.3299 24.5919C30.8939 25.2708 30.2724 25.8122 29.5381 26.1529L17.8048 31.6019C17.2397 31.8641 16.6236 32 16 32C15.3764 32 14.7603 31.8641 14.1952 31.6019L2.46187 26.1529C1.7276 25.8122 1.10613 25.2708 0.670151 24.5919C0.234175 23.913 0.00172661 23.1248 0 22.3194V9.70388C0 8.89606 0.2304 8.10521 0.667733 7.414C1.10507 6.7228 1.72587 6.18849 2.46187 5.84713L14.1952 0.398059C14.7603 0.135875 15.3764 0 16 0C16.6236 0 17.2397 0.135875 17.8048 0.398059V0.421382ZM2.1248 9.70813V22.3237C2.12485 22.7271 2.2407 23.1221 2.45873 23.4624C2.67677 23.8026 2.98794 24.074 3.35573 24.2446L14.9184 29.6089V15.1063L2.16107 9.25439C2.12905 9.40352 2.11332 9.55564 2.11413 9.70813H2.1248ZM29.8581 9.25651L17.1008 15.1084V29.611L28.6635 24.2468C29.0316 24.076 29.343 23.8043 29.561 23.4636C29.7791 23.1229 29.8948 22.7274 29.8944 22.3237V9.70813C29.8944 9.55627 29.8779 9.40487 29.8453 9.25651H29.8581ZM15.1381 2.34446L3.74613 7.62391L16.0341 13.2638L28.3221 7.62391L16.9301 2.34446C16.6476 2.21337 16.3396 2.14543 16.0277 2.14543C15.7159 2.14543 15.4079 2.21337 15.1253 2.34446H15.1381Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

@@ -1,26 +0,0 @@
---
import download16 from './svgs/download-16.svg?raw';
import download24 from './svgs/download-24.svg?raw';
import download32 from './svgs/download-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = download16;
else if (size === 24) raw = download24;
else if (size === 32) raw = download32;
else raw = '';
const classes = ['nds-icon-download', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,5 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00001 3H9.67067V8.01199H11.759L8.00001 11.771M8.00001 3H6.32934V8.01199H4.24101L8.00001 11.771" fill="#F4F2EF"/>
<path d="M8.00001 3H9.67067V8.01199H11.759L8.00001 11.771L4.24101 8.01199H6.32934V3H8.00001Z" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.72905 13.5H11.271" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 522 B

@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4.5H13.7778V10.7857H16L12 15.5M12 4.5H10.2222V10.7857H8L12 15.5" fill="#F4F2EF" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 19.5H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 401 B

@@ -1,4 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M16 4.5H19.1111V14.2143H23L16 21.5M16 4.5H12.8889V14.2143H9L16 21.5" fill="#F4F2EF" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.5 27.5H22.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 413 B

-26
View File
@@ -1,26 +0,0 @@
---
import filter16 from './svgs/filter-16.svg?raw';
import filter24 from './svgs/filter-24.svg?raw';
import filter32 from './svgs/filter-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = filter16;
else if (size === 24) raw = filter24;
else if (size === 32) raw = filter32;
else raw = '';
const classes = ['nds-icon-filter', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3 4.66667H13M4.66667 8H11.3333M6.66667 11.3333H9.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 267 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6H21M6 12H18M9.6 18H14.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 239 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3 7.33333H29M7.33333 16H24.6667M12.5333 24.6667H19.4667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 268 B

-26
View File
@@ -1,26 +0,0 @@
---
import help16 from './svgs/help-16.svg?raw';
import help24 from './svgs/help-24.svg?raw';
import help32 from './svgs/help-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = help16;
else if (size === 24) raw = help24;
else if (size === 32) raw = help32;
else raw = '';
const classes = ['nds-icon-help', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,5 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13Z" stroke="currentColor"/>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M9.5 6.5L11.5 4.5M4.5 11.5L6.5 9.5M6.5 6.5L4.5 4.5M11.5 11.5L9.5 9.5" stroke="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 511 B

@@ -1,5 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M12 15.6C13.9882 15.6 15.6 13.9882 15.6 12C15.6 10.0118 13.9882 8.4 12 8.4C10.0118 8.4 8.39999 10.0118 8.39999 12C8.39999 13.9882 10.0118 15.6 12 15.6Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M14.7 9.3L18.3 5.7M5.7 18.3L9.3 14.7M9.3 9.3L5.7 5.7M18.3 18.3L14.7 14.7" stroke="currentColor" stroke-width="1.5"/>
</svg>

Before

Width:  |  Height:  |  Size: 601 B

@@ -1,4 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M16 21.2C18.8719 21.2 21.2 18.8719 21.2 16C21.2 13.1281 18.8719 10.8 16 10.8C13.1281 10.8 10.8 13.1281 10.8 16C10.8 18.8719 13.1281 21.2 16 21.2Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M19.9 12.1L25.1 6.89999M6.89999 25.1L12.1 19.9M12.1 12.1L6.89999 6.89999M25.1 25.1L19.9 19.9" stroke="currentColor" stroke-width="1.5"/>

Before

Width:  |  Height:  |  Size: 603 B

-26
View File
@@ -1,26 +0,0 @@
---
import home16 from './svgs/home-16.svg?raw';
import home24 from './svgs/home-24.svg?raw';
import home32 from './svgs/home-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = home16;
else if (size === 24) raw = home24;
else if (size === 32) raw = home32;
else raw = '';
const classes = ['nds-icon-home', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4.57143 11.8571H6.28572V9C6.28572 8.83809 6.34057 8.70247 6.45029 8.59314C6.56 8.48381 6.69562 8.42895 6.85714 8.42857H9.14286C9.30476 8.42857 9.44057 8.48343 9.55029 8.59314C9.66 8.70286 9.71467 8.83847 9.71429 9V11.8571H11.4286V6.71428L8 4.14286L4.57143 6.71428V11.8571ZM3.42857 11.8571V6.71428C3.42857 6.53333 3.46914 6.3619 3.55029 6.2C3.63143 6.03809 3.74324 5.90476 3.88572 5.8L7.31429 3.22857C7.51429 3.07619 7.74286 3 8 3C8.25714 3 8.48572 3.07619 8.68572 3.22857L12.1143 5.8C12.2571 5.90476 12.3691 6.03809 12.4503 6.2C12.5314 6.3619 12.5718 6.53333 12.5714 6.71428V11.8571C12.5714 12.1714 12.4594 12.4406 12.2354 12.6646C12.0114 12.8886 11.7425 13.0004 11.4286 13H9.14286C8.98095 13 8.84533 12.9451 8.736 12.8354C8.62667 12.7257 8.57181 12.5901 8.57143 12.4286V9.57143H7.42857V12.4286C7.42857 12.5905 7.37372 12.7263 7.264 12.836C7.15429 12.9457 7.01867 13.0004 6.85714 13H4.57143C4.25714 13 3.98819 12.8882 3.76457 12.6646C3.54095 12.4409 3.42895 12.1718 3.42857 11.8571Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.82857 18.9429H8.91428V13.8C8.91428 13.5086 9.01302 13.2645 9.21051 13.0677C9.40799 12.8709 9.65211 12.7721 9.94285 12.7714H14.0571C14.3486 12.7714 14.593 12.8702 14.7905 13.0677C14.988 13.2651 15.0864 13.5093 15.0857 13.8V18.9429H18.1714V9.68571L12 5.05714L5.82857 9.68571V18.9429ZM3.77142 18.9429V9.68571C3.77142 9.36 3.84445 9.05143 3.99051 8.76C4.13657 8.46857 4.33782 8.22857 4.59428 8.04L10.7657 3.41143C11.1257 3.13714 11.5371 3 12 3C12.4629 3 12.8743 3.13714 13.2343 3.41143L19.4057 8.04C19.6629 8.22857 19.8644 8.46857 20.0105 8.76C20.1566 9.05143 20.2292 9.36 20.2286 9.68571V18.9429C20.2286 19.5086 20.027 19.993 19.6238 20.3962C19.2206 20.7994 18.7364 21.0007 18.1714 21H14.0571C13.7657 21 13.5216 20.9013 13.3248 20.7038C13.128 20.5063 13.0293 20.2622 13.0286 19.9714V14.8286H10.9714V19.9714C10.9714 20.2629 10.8727 20.5073 10.6752 20.7048C10.4777 20.9023 10.2336 21.0007 9.94285 21H5.82857C5.26285 21 4.77874 20.7987 4.37622 20.3962C3.97371 19.9937 3.77211 19.5093 3.77142 18.9429Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M7.08572 26.0286H11.5429V18.6C11.5429 18.179 11.6855 17.8264 11.9707 17.5422C12.256 17.2579 12.6086 17.1153 13.0286 17.1143H18.9714C19.3924 17.1143 19.7455 17.2569 20.0307 17.5422C20.316 17.8274 20.4581 18.18 20.4571 18.6V26.0286H24.9143V12.6571L16 5.97143L7.08572 12.6571V26.0286ZM4.11429 26.0286V12.6571C4.11429 12.1867 4.21977 11.741 4.43075 11.32C4.64172 10.899 4.93242 10.5524 5.30286 10.28L14.2171 3.59429C14.7371 3.1981 15.3314 3 16 3C16.6686 3 17.2629 3.1981 17.7829 3.59429L26.6971 10.28C27.0686 10.5524 27.3598 10.899 27.5707 11.32C27.7817 11.741 27.8867 12.1867 27.8857 12.6571V26.0286C27.8857 26.8457 27.5945 27.5455 27.0121 28.1279C26.4297 28.7103 25.7304 29.001 24.9143 29H18.9714C18.5505 29 18.1979 28.8574 17.9136 28.5721C17.6293 28.2869 17.4867 27.9342 17.4857 27.5143V20.0857H14.5143V27.5143C14.5143 27.9352 14.3717 28.2883 14.0864 28.5736C13.8011 28.8589 13.4485 29.001 13.0286 29H7.08572C6.26857 29 5.5693 28.7093 4.98789 28.1279C4.40648 27.5465 4.11528 26.8467 4.11429 26.0286Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

-25
View File
@@ -1,25 +0,0 @@
export { default as Arrow2Icon } from './Arrow2/Arrow2.astro';
export { default as BinIcon } from './bin/bin.astro';
export { default as BurgerIcon } from './burger/burger.astro';
export { default as CalendarIcon } from './calendar/calendar.astro';
export { default as CheckIcon } from './check/check.astro';
export { default as CloseIcon } from './close/close.astro';
export { default as CodeIcon } from './code/code.astro';
export { default as CubeIcon } from './cube/cube.astro';
export { default as DownloadIcon } from './download/download.astro';
export { default as FilterIcon } from './filter/filter.astro';
export { default as HelpIcon } from './help/help.astro';
export { default as HomeIcon } from './home/home.astro';
export { default as LinkIcon } from './link/link.astro';
export { default as MinusIcon } from './minus/minus.astro';
export { default as MoreIcon } from './more/more.astro';
export { default as OverviewIcon } from './overview/overview.astro';
export { default as PlusIcon } from './plus/plus.astro';
export { default as ProfileIcon } from './profile/profile.astro';
export { default as SearchIcon } from './search/search.astro';
export { default as SettingsIcon } from './settings/settings.astro';
export { default as ShareIcon } from './share/share.astro';
export { default as ShieldIcon } from './shield/shield.astro';
export { default as SortIcon } from './sort/sort.astro';
export { default as StatsIcon } from './stats/stats.astro';
export { default as UploadIcon } from './upload/upload.astro';
-26
View File
@@ -1,26 +0,0 @@
---
import link16 from './svgs/link-16.svg?raw';
import link24 from './svgs/link-24.svg?raw';
import link32 from './svgs/link-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = link16;
else if (size === 24) raw = link24;
else if (size === 32) raw = link32;
else raw = '';
const classes = ['nds-icon-link', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.57143 4.57143L9.71429 3.42857C10.2857 2.85714 11.4286 2.85714 12 3.42857L12.5714 4C13.1429 4.57143 13.1429 5.71429 12.5714 6.28571L9.71429 9.14286C9.14286 9.71429 8 9.71429 7.42857 9.14286M7.42857 11.4286L6.28571 12.5714C5.71429 13.1429 4.57143 13.1429 4 12.5714L3.42857 12C2.85714 11.4286 2.85714 10.2857 3.42857 9.71429L6.28571 6.85714C6.85714 6.28571 8 6.28571 8.57143 6.85714" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 586 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0286 5.82857L15.0857 3.77143C16.1143 2.74286 18.1714 2.74286 19.2 3.77143L20.2286 4.8C21.2571 5.82857 21.2571 7.88571 20.2286 8.91429L15.0857 14.0571C14.0571 15.0857 12 15.0857 10.9714 14.0571M10.9714 18.1714L8.91429 20.2286C7.88571 21.2571 5.82857 21.2571 4.8 20.2286L3.77143 19.2C2.74286 18.1714 2.74286 16.1143 3.77143 15.0857L8.91429 9.94286C9.94286 8.91429 12 8.91429 13.0286 9.94286" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 594 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.4857 7.08571L20.4571 4.11429C21.9429 2.62857 24.9143 2.62857 26.4 4.11429L27.8857 5.6C29.3714 7.08571 29.3714 10.0571 27.8857 11.5429L20.4571 18.9714C18.9714 20.4571 16 20.4571 14.5143 18.9714M14.5143 24.9143L11.5429 27.8857C10.0571 29.3714 7.08571 29.3714 5.6 27.8857L4.11429 26.4C2.62857 24.9143 2.62857 21.9429 4.11429 20.4571L11.5429 13.0286C13.0286 11.5429 16 11.5429 17.4857 13.0286" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 596 B

-26
View File
@@ -1,26 +0,0 @@
---
import minus16 from './svgs/minus-16.svg?raw';
import minus24 from './svgs/minus-24.svg?raw';
import minus32 from './svgs/minus-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = minus16;
else if (size === 24) raw = minus24;
else if (size === 32) raw = minus32;
else raw = '';
const classes = ['nds-icon-minus', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 217 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 226 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 218 B

-26
View File
@@ -1,26 +0,0 @@
---
import more16 from './svgs/more-16.svg?raw';
import more24 from './svgs/more-24.svg?raw';
import more32 from './svgs/more-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = more16;
else if (size === 24) raw = more24;
else if (size === 32) raw = more32;
else raw = '';
const classes = ['nds-icon-more', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="3" viewBox="0 0 16 3" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M1.33333 0C0.6 0 0 0.675 0 1.5C0 2.325 0.6 3 1.33333 3C2.06667 3 2.66667 2.325 2.66667 1.5C2.66667 0.675 2.06667 0 1.33333 0ZM14.6667 0C13.9333 0 13.3333 0.675 13.3333 1.5C13.3333 2.325 13.9333 3 14.6667 3C15.4 3 16 2.325 16 1.5C16 0.675 15.4 0 14.6667 0ZM8 0C7.26667 0 6.66667 0.675 6.66667 1.5C6.66667 2.325 7.26667 3 8 3C8.73333 3 9.33333 2.325 9.33333 1.5C9.33333 0.675 8.73333 0 8 0Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 525 B

@@ -1,3 +0,0 @@
<svg width="24" height="4" viewBox="0 0 24 4" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM22 0C20.9 0 20 0.9 20 2C20 3.1 20.9 4 22 4C23.1 4 24 3.1 24 2C24 0.9 23.1 0 22 0ZM12 0C10.9 0 10 0.9 10 2C10 3.1 10.9 4 12 4C13.1 4 14 3.1 14 2C14 0.9 13.1 0 12 0Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 378 B

@@ -1,3 +0,0 @@
<svg width="32" height="5" viewBox="0 0 32 5" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M2.66667 0C1.2 0 0 1.125 0 2.5C0 3.875 1.2 5 2.66667 5C4.13333 5 5.33333 3.875 5.33333 2.5C5.33333 1.125 4.13333 0 2.66667 0ZM29.3333 0C27.8667 0 26.6667 1.125 26.6667 2.5C26.6667 3.875 27.8667 5 29.3333 5C30.8 5 32 3.875 32 2.5C32 1.125 30.8 0 29.3333 0ZM16 0C14.5333 0 13.3333 1.125 13.3333 2.5C13.3333 3.875 14.5333 5 16 5C17.4667 5 18.6667 3.875 18.6667 2.5C18.6667 1.125 17.4667 0 16 0Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 528 B

@@ -1,26 +0,0 @@
---
import overview16 from './svgs/overview-16.svg?raw';
import overview24 from './svgs/overview-24.svg?raw';
import overview32 from './svgs/overview-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = overview16;
else if (size === 24) raw = overview24;
else if (size === 32) raw = overview32;
else raw = '';
const classes = ['nds-icon-overview', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8.55556 6.33333V3H13V6.33333H8.55556ZM3 8.55556V3H7.44444V8.55556H3ZM8.55556 13V7.44444H13V13H8.55556ZM3 13V9.66667H7.44444V13H3Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 277 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M13 9V3H21V9H13ZM3 13V3H11V13H3ZM13 21V11H21V21H13ZM3 21V15H11V21H3Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 207 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M17.4444 11.8333V3.5H29V11.8333H17.4444ZM3 17.3889V3.5H14.5556V17.3889H3ZM17.4444 28.5V14.6111H29V28.5H17.4444ZM3 28.5V20.1667H14.5556V28.5H3Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 289 B

-26
View File
@@ -1,26 +0,0 @@
---
import plus16 from './svgs/plus-16.svg?raw';
import plus24 from './svgs/plus-24.svg?raw';
import plus32 from './svgs/plus-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16) raw = plus16;
else if (size === 24) raw = plus24;
else if (size === 32) raw = plus32;
else raw = '';
const classes = ['nds-icon-plus', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12.375 7.375H8.625V3.625C8.625 3.45924 8.55915 3.30027 8.44194 3.18306C8.32473 3.06585 8.16576 3 8 3C7.83424 3 7.67527 3.06585 7.55806 3.18306C7.44085 3.30027 7.375 3.45924 7.375 3.625V7.375H3.625C3.45924 7.375 3.30027 7.44085 3.18306 7.55806C3.06585 7.67527 3 7.83424 3 8C3 8.16576 3.06585 8.32473 3.18306 8.44194C3.30027 8.55915 3.45924 8.625 3.625 8.625H7.375V12.375C7.375 12.5408 7.44085 12.6997 7.55806 12.8169C7.67527 12.9342 7.83424 13 8 13C8.16576 13 8.32473 12.9342 8.44194 12.8169C8.55915 12.6997 8.625 12.5408 8.625 12.375V8.625H12.375C12.5408 8.625 12.6997 8.55915 12.8169 8.44194C12.9342 8.32473 13 8.16576 13 8C13 7.83424 12.9342 7.67527 12.8169 7.55806C12.6997 7.44085 12.5408 7.375 12.375 7.375Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 851 B

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M19.875 10.875H13.125V4.125C13.125 3.82663 13.0065 3.54048 12.7955 3.32951C12.5845 3.11853 12.2984 3 12 3C11.7016 3 11.4155 3.11853 11.2045 3.32951C10.9935 3.54048 10.875 3.82663 10.875 4.125V10.875H4.125C3.82663 10.875 3.54048 10.9935 3.32951 11.2045C3.11853 11.4155 3 11.7016 3 12C3 12.2984 3.11853 12.5845 3.32951 12.7955C3.54048 13.0065 3.82663 13.125 4.125 13.125H10.875V19.875C10.875 20.1734 10.9935 20.4595 11.2045 20.6705C11.4155 20.8815 11.7016 21 12 21C12.2984 21 12.5845 20.8815 12.7955 20.6705C13.0065 20.4595 13.125 20.1734 13.125 19.875V13.125H19.875C20.1734 13.125 20.4595 13.0065 20.6705 12.7955C20.8815 12.5845 21 12.2984 21 12C21 11.7016 20.8815 11.4155 20.6705 11.2045C20.4595 10.9935 20.1734 10.875 19.875 10.875Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 880 B

@@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
<path d="M27.375 14.375H17.625V4.625C17.625 4.19402 17.4538 3.7807 17.149 3.47595C16.8443 3.17121 16.431 3 16 3C15.569 3 15.1557 3.17121 14.851 3.47595C14.5462 3.7807 14.375 4.19402 14.375 4.625V14.375H4.625C4.19402 14.375 3.7807 14.5462 3.47595 14.851C3.17121 15.1557 3 15.569 3 16C3 16.431 3.17121 16.8443 3.47595 17.149C3.7807 17.4538 4.19402 17.625 4.625 17.625H14.375V27.375C14.375 27.806 14.5462 28.2193 14.851 28.524C15.1557 28.8288 15.569 29 16 29C16.431 29 16.8443 28.8288 17.149 28.524C17.4538 28.2193 17.625 27.806 17.625 27.375V17.625H27.375C27.806 17.625 28.2193 17.4538 28.524 17.149C28.8288 16.8443 29 16.431 29 16C29 15.569 28.8288 15.1557 28.524 14.851C28.2193 14.5462 27.806 14.375 27.375 14.375Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 852 B

@@ -1,27 +0,0 @@
---
import profile16 from './svgs/profile-16.svg?raw';
import profile24 from './svgs/profile-24.svg?raw';
import profile32 from './svgs/profile-32.svg?raw';
export interface Props {
size: 16 | 24 | 32;
label?: string;
class?: string;
}
const { size = 24, label, class: className } = Astro.props;
let raw: string;
if (size === 16 ) raw = profile16;
else if (size === 24 ) raw = profile24;
else if (size === 32 ) raw = profile32;
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
const classes = ['nds-icon-profile', className].filter(Boolean).join(' ');
const svg = raw
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
---
<Fragment set:html={svg} />
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.77778 5.22222C5.77778 4.63285 6.0119 4.06762 6.42865 3.65087C6.8454 3.23413 7.41063 3 8 3C8.58937 3 9.1546 3.23413 9.57135 3.65087C9.9881 4.06762 10.2222 4.63285 10.2222 5.22222C10.2222 5.81159 9.9881 6.37682 9.57135 6.79357C9.1546 7.21032 8.58937 7.44444 8 7.44444C7.41063 7.44444 6.8454 7.21032 6.42865 6.79357C6.0119 6.37682 5.77778 5.81159 5.77778 5.22222ZM5.77778 8.55556C5.04107 8.55556 4.33453 8.84821 3.81359 9.36915C3.29266 9.89008 3 10.5966 3 11.3333C3 11.7754 3.17559 12.1993 3.48816 12.5118C3.80072 12.8244 4.22464 13 4.66667 13H11.3333C11.7754 13 12.1993 12.8244 12.5118 12.5118C12.8244 12.1993 13 11.7754 13 11.3333C13 10.5966 12.7073 9.89008 12.1864 9.36915C11.6655 8.84821 10.9589 8.55556 10.2222 8.55556H5.77778Z" fill="#F4F2EF"/>
</svg>

Before

Width:  |  Height:  |  Size: 911 B

Some files were not shown because too many files have changed in this diff Show More