@fastnd/components 1.0.20 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +17 -0
- package/README.md +98 -0
- package/package.json +2 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
Copyright (c) 2026 FastND GmbH. All rights reserved.
|
|
2
|
+
|
|
3
|
+
PROPRIETARY SOFTWARE LICENSE
|
|
4
|
+
|
|
5
|
+
This software and associated documentation files (the "Software") are the
|
|
6
|
+
exclusive property of FastND GmbH. The Software is confidential and proprietary.
|
|
7
|
+
|
|
8
|
+
Permission is NOT granted to any person or entity outside of FastND GmbH to use,
|
|
9
|
+
copy, modify, merge, publish, distribute, sublicense, or sell copies of the
|
|
10
|
+
Software.
|
|
11
|
+
|
|
12
|
+
Authorized use is limited to employees, contractors, and systems of FastND GmbH
|
|
13
|
+
operating under a valid agreement.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED. IN NO EVENT SHALL FASTND GMBH BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
17
|
+
LIABILITY ARISING FROM THE USE OF THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# @fastnd/components
|
|
2
|
+
|
|
3
|
+
FastND's React component library — built on [shadcn/ui](https://ui.shadcn.com) (New York style) with FastND brand theming.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @fastnd/components
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Peer dependencies:** `react >= 18` and `react-dom >= 18`
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Button, Card, CardHeader, CardTitle, CardContent } from '@fastnd/components';
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<Card>
|
|
21
|
+
<CardHeader>
|
|
22
|
+
<CardTitle>Dashboard</CardTitle>
|
|
23
|
+
</CardHeader>
|
|
24
|
+
<CardContent>
|
|
25
|
+
<Button>Get started</Button>
|
|
26
|
+
</CardContent>
|
|
27
|
+
</Card>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
CSS is injected automatically — no separate stylesheet import needed.
|
|
33
|
+
|
|
34
|
+
## Components (56)
|
|
35
|
+
|
|
36
|
+
| Category | Components |
|
|
37
|
+
|----------|-----------|
|
|
38
|
+
| **Inputs** | Button, ButtonGroup, Checkbox, Combobox, Input, InputGroup, InputOTP, NativeSelect, RadioGroup, Select, Slider, Switch, Textarea |
|
|
39
|
+
| **Layout** | Accordion, AspectRatio, Card, Collapsible, Direction, Resizable, ScrollArea, Separator, Tabs |
|
|
40
|
+
| **Overlay** | AlertDialog, Command, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, Menubar, NavigationMenu, Popover, Sheet, Tooltip |
|
|
41
|
+
| **Display** | Alert, Avatar, Badge, Breadcrumb, Calendar, Carousel, Chart, Empty, Item, Kbd, Label, Pagination, Progress, Skeleton, Spinner, Table, Toggle, ToggleGroup |
|
|
42
|
+
| **Form** | Field, Form |
|
|
43
|
+
| **Feedback** | Sonner (Toaster + toast) |
|
|
44
|
+
| **Composition** | Sidebar |
|
|
45
|
+
|
|
46
|
+
All components use the native [shadcn/ui API](https://ui.shadcn.com/docs/components).
|
|
47
|
+
|
|
48
|
+
## Theming
|
|
49
|
+
|
|
50
|
+
The library ships with FastND brand colors mapped to shadcn CSS variables. Colors are applied automatically via CSS-in-JS.
|
|
51
|
+
|
|
52
|
+
### Semantic colors
|
|
53
|
+
|
|
54
|
+
| Variable | Usage |
|
|
55
|
+
|----------|-------|
|
|
56
|
+
| `--primary` / `#0073e6` | Primary actions, links, active states |
|
|
57
|
+
| `--destructive` / `#bd0c38` | Destructive actions, errors |
|
|
58
|
+
| `--color-success` / `#1ec489` | Positive status, completed |
|
|
59
|
+
| `--color-warning` / `#efaf55` | Warning, pending |
|
|
60
|
+
| `--color-alert` / `#f34e2a` | Critical, high-priority |
|
|
61
|
+
|
|
62
|
+
### Chart colors
|
|
63
|
+
|
|
64
|
+
`--chart-1` through `--chart-5` are defined for light and dark mode, consumed by the `ChartContainer` component.
|
|
65
|
+
|
|
66
|
+
### Dark mode
|
|
67
|
+
|
|
68
|
+
Add the `dark` class to a parent element to activate dark mode:
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<html class="dark">
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Development
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
cd artifacts-handoff
|
|
78
|
+
|
|
79
|
+
npm install # Install dependencies
|
|
80
|
+
npm run storybook # Storybook at http://localhost:6006
|
|
81
|
+
npm run build # Build library (Vite + tsc)
|
|
82
|
+
npm run test # Vitest watch mode
|
|
83
|
+
npm run test:run # Vitest single run
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Tech stack
|
|
87
|
+
|
|
88
|
+
- **Components:** [shadcn/ui](https://ui.shadcn.com) New York style + [Radix UI](https://radix-ui.com) primitives
|
|
89
|
+
- **Styling:** [Tailwind CSS v4](https://tailwindcss.com) + CSS variables
|
|
90
|
+
- **Charts:** [Recharts](https://recharts.org) via shadcn Chart wrapper
|
|
91
|
+
- **Build:** [Vite](https://vite.dev) (ESM library mode) + TypeScript declarations
|
|
92
|
+
- **Storybook:** v10 with 55 component stories
|
|
93
|
+
|
|
94
|
+
## License
|
|
95
|
+
|
|
96
|
+
**PROPRIETARY** — Copyright (c) 2026 FastND GmbH. All rights reserved.
|
|
97
|
+
|
|
98
|
+
This package is private and intended for internal use only. Unauthorized use, distribution, or modification is strictly prohibited.
|