@smworks-cz/ui-kit 0.1.0 → 1.0.0

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.
Files changed (3) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +141 -0
  3. package/package.json +2 -2
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 SMWORKS s.r.o.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,141 @@
1
+ # SMWORKS UI KIT
2
+
3
+ React component library for SMWORKS applications. Built with TypeScript, inline design tokens, and dark/light theme support.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ # yarn
9
+ yarn add @smworks-cz/ui-kit
10
+
11
+ # npm
12
+ npm install @smworks-cz/ui-kit
13
+
14
+ # pnpm
15
+ pnpm add @smworks-cz/ui-kit
16
+ ```
17
+
18
+ ### Peer dependencies
19
+
20
+ ```bash
21
+ yarn add react react-dom @phosphor-icons/react
22
+ ```
23
+
24
+ | Package | Version |
25
+ |---------|---------|
26
+ | `react` | >= 18 |
27
+ | `react-dom` | >= 18 |
28
+ | `@phosphor-icons/react` | >= 2.1.0 |
29
+
30
+ ## Usage
31
+
32
+ ```tsx
33
+ import { Button, Input, Modal } from '@smworks-cz/ui-kit';
34
+
35
+ function App() {
36
+ return (
37
+ <Button variant="primary" onClick={() => alert('Clicked!')}>
38
+ Click me
39
+ </Button>
40
+ );
41
+ }
42
+ ```
43
+
44
+ ### Theme setup
45
+
46
+ Set the `data-theme` attribute on `<body>` to switch between light and dark mode:
47
+
48
+ ```tsx
49
+ // Dark mode
50
+ document.body.setAttribute('data-theme', 'dark');
51
+
52
+ // Light mode
53
+ document.body.setAttribute('data-theme', 'light');
54
+ ```
55
+
56
+ Use the `useTheme()` hook to read the current theme in your components:
57
+
58
+ ```tsx
59
+ import { useTheme } from '@smworks-cz/ui-kit';
60
+
61
+ function MyComponent() {
62
+ const theme = useTheme(); // 'light' | 'dark'
63
+ return <div>{theme}</div>;
64
+ }
65
+ ```
66
+
67
+ ### Toast notifications
68
+
69
+ Wrap your app in `ToasterProvider` and use the `useToast()` hook:
70
+
71
+ ```tsx
72
+ import { ToasterProvider, useToast, Button } from '@smworks-cz/ui-kit';
73
+
74
+ function App() {
75
+ return (
76
+ <ToasterProvider position="bottom-right">
77
+ <MyApp />
78
+ </ToasterProvider>
79
+ );
80
+ }
81
+
82
+ function MyApp() {
83
+ const { toast } = useToast();
84
+
85
+ return (
86
+ <Button onClick={() => toast({ variant: 'success', title: 'Saved!' })}>
87
+ Save
88
+ </Button>
89
+ );
90
+ }
91
+ ```
92
+
93
+ ## Components
94
+
95
+ ### Forms
96
+ Button, Input, Select, DatePicker, Checkbox, Radio, Switch, Textarea, Slider, FileUpload, SegmentedControl
97
+
98
+ ### Data display
99
+ Table, Card, Accordion, Tabs, Tooltip, Popover, Skeleton, EmptyState, Stat, Avatar, Tag, Badge
100
+
101
+ ### Navigation & layout
102
+ Modal, Drawer, Breadcrumb, Pagination, Stepper, DropdownMenu, Link, Spotlight
103
+
104
+ ### Feedback
105
+ Toast, Alert, Progress, ProgressCircle, Spinner
106
+
107
+ ### Utility
108
+ Divider, Stack, Container, DragList
109
+
110
+ ### Hooks
111
+ `useTheme`, `useToast`
112
+
113
+ ## Fonts
114
+
115
+ The library uses **Zalando Sans** and **Zalando Sans Expanded** fonts. Import them in your app entry point:
116
+
117
+ ```tsx
118
+ import '@smworks-cz/ui-kit/dist/fonts/fonts.css';
119
+ ```
120
+
121
+ ## Design system
122
+
123
+ All components use inline design tokens with automatic dark/light mode support:
124
+
125
+ - **Primary color:** `#FC4F00`
126
+ - **Glass effect:** `backdrop-filter: blur(20-32px)` on overlays
127
+ - **Animation:** `180ms` with `cubic-bezier(0.16, 1, 0.3, 1)`
128
+ - **Icons:** [@phosphor-icons/react](https://phosphoricons.com/)
129
+ - **Fonts:** Zalando Sans (body), Zalando Sans Expanded (headings)
130
+
131
+ ## TypeScript
132
+
133
+ Full TypeScript support out of the box. Type definitions are included in the package.
134
+
135
+ ```tsx
136
+ import type { ButtonProps, InputProps, ModalProps } from '@smworks-cz/ui-kit';
137
+ ```
138
+
139
+ ## License
140
+
141
+ [MIT](LICENSE) - SMWORKS s.r.o.
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@smworks-cz/ui-kit",
3
- "version": "0.1.0",
3
+ "version": "1.0.0",
4
4
  "description": "SMWORKS UI KIT — component library for SMWORKS apps",
5
5
  "author": "Daniel Cvejn <cvejn@smworks.cz>",
6
- "license": "UNLICENSED",
6
+ "license": "MIT",
7
7
  "private": false,
8
8
  "publishConfig": {
9
9
  "access": "public"