@vverchonov/web-components 0.1.0 → 0.1.3

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 (2) hide show
  1. package/README.md +147 -0
  2. package/package.json +20 -2
package/README.md ADDED
@@ -0,0 +1,147 @@
1
+ # @vverchonov/web-components
2
+
3
+ A library of reusable UI components built with [Lit 3](https://lit.dev/), shipped as standard web components with first-class [React](https://react.dev/) wrappers.
4
+
5
+ ## Features
6
+
7
+ - **13 components** — Button, Input, Toggle, Table, Menu, Modal, Tabs, Selector, Dropdown Button, Layout, Form Layout, Card, Radio Group
8
+ - **React wrappers** via `@lit/react` — use every component as a native React element
9
+ - **Dark mode** — automatic (system preference) and manual (`data-theme`)
10
+ - **Fully typed** — written in TypeScript with exported types for every component
11
+ - **Tree-shakeable** — import the entire library or only the components you need
12
+ - **Themeable** — override any design token with CSS custom properties
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install @vverchonov/web-components lit
18
+ ```
19
+
20
+ ### Peer dependencies
21
+
22
+ | Package | Version | Required |
23
+ |---------|---------|----------|
24
+ | `lit` | `^3.0.0` | Yes |
25
+ | `react` | `^18.0.0 \|\| ^19.0.0` | Only for React wrappers |
26
+
27
+ ## Usage
28
+
29
+ ### Vanilla JS / HTML
30
+
31
+ Import the entire library or individual components:
32
+
33
+ ```js
34
+ // All components
35
+ import '@vverchonov/web-components'
36
+
37
+ // Single component (tree-shakeable)
38
+ import '@vverchonov/web-components/button'
39
+ ```
40
+
41
+ Then use the custom element in your markup:
42
+
43
+ ```html
44
+ <app-button>Click me</app-button>
45
+ ```
46
+
47
+ ### React
48
+
49
+ ```jsx
50
+ import { Button } from '@vverchonov/web-components/react/button'
51
+
52
+ function App() {
53
+ return <Button onClick={() => console.log('clicked')}>Click me</Button>
54
+ }
55
+ ```
56
+
57
+ You can also import all React wrappers at once:
58
+
59
+ ```js
60
+ import { Button, Input, Table } from '@vverchonov/web-components/react'
61
+ ```
62
+
63
+ ## Components
64
+
65
+ | Tag name | React export | Import path | Description |
66
+ |----------|-------------|-------------|-------------|
67
+ | `app-button` | `Button` | `./button` | Button with optional icon slot |
68
+ | `app-input` | `Input` | `./input` | Text input with validation states and icons |
69
+ | `app-toggle` | `Toggle` | `./toggle` | Boolean switch with optional label |
70
+ | `app-table` | `Table` | `./table` | Data table with sorting, pagination, column toggle |
71
+ | `app-menu` | `Menu` | `./menu` | Sidebar navigation with search and nested items |
72
+ | `app-modal` | `Modal` | `./modal` | Dialog (info, confirm, form variants) with focus trapping |
73
+ | `app-tabs` | `Tabs` | `./tabs` | Tabbed interface with keyboard navigation |
74
+ | `app-selector` | `Selector` | `./selector` | Dropdown selector (single/multi, searchable, grouped) |
75
+ | `app-dropdown-button` | `DropdownButton` | `./dropdown-button` | Dropdown menu button with nested submenus |
76
+ | `app-layout` | `Layout` | `./layouts` | Page layout with sidebar slot |
77
+ | `app-form-layout` | `FormLayout` | `./layouts` | Form shell with multi-step support and column grids |
78
+ | `app-card` | `Card` | `./card` | Collapsible content card (elevated, outlined, filled) |
79
+ | `app-radio-group` | `RadioGroup` | `./radio-group` | Radio button group with validation states |
80
+
81
+ ## Theming
82
+
83
+ Design tokens are defined as CSS custom properties in `src/styles/theme.css`. Because they live on `:root`, they inherit through Shadow DOM boundaries.
84
+
85
+ Override any token on `:root` or a parent element:
86
+
87
+ ```css
88
+ :root {
89
+ --color-primary: oklch(0.55 0.24 29);
90
+ --radius-button: 0.5rem;
91
+ }
92
+ ```
93
+
94
+ ### Dark mode
95
+
96
+ Dark mode activates automatically based on `prefers-color-scheme`. To force a theme manually, set a `data-theme` attribute on `<html>`:
97
+
98
+ ```html
99
+ <html data-theme="dark">
100
+ ```
101
+
102
+ Available values: `"dark"`, `"light"` (overrides system preference), or omit the attribute to follow system preference.
103
+
104
+ ### Token categories
105
+
106
+ | Category | Examples |
107
+ |----------|----------|
108
+ | Colors | `--color-primary`, `--color-surface`, `--color-text`, `--color-border` |
109
+ | State | `--color-valid`, `--color-invalid` |
110
+ | Radius | `--radius-button`, `--radius-card`, `--radius-input` |
111
+ | Button | `--button-font-size`, `--button-padding-block`, `--button-icon-gap` |
112
+ | Table | `--table-cell-padding-block`, `--table-header-bg` |
113
+ | Input | `--input-font-size`, `--input-padding-block` |
114
+ | Modal | `--modal-width`, `--modal-padding`, `--modal-backdrop` |
115
+ | Menu | `--menu-width`, `--menu-collapsed-width` |
116
+ | Toggle | `--toggle-track-width`, `--toggle-thumb-size` |
117
+ | Tabs | `--tab-padding-block`, `--tab-indicator-height` |
118
+ | Dropdown | `--dropdown-padding`, `--dropdown-item-padding-block`, `--dropdown-item-font-size` |
119
+ | Radio Group | `--radio-size`, `--radio-dot-size`, `--radio-gap` |
120
+ | Card | `--card-padding`, `--card-gap`, `--card-transition-duration` |
121
+ | Selector | `--selector-min-height`, `--selector-panel-max-height` |
122
+
123
+ See `src/styles/theme.css` for the full list of tokens and their default values.
124
+
125
+ ## Development
126
+
127
+ ```bash
128
+ # Start the dev server (opens a demo page showcasing every component)
129
+ npm run dev
130
+
131
+ # Production library build
132
+ npm run build
133
+
134
+ # Preview the production build
135
+ npm run preview
136
+ ```
137
+
138
+ ### Tech stack
139
+
140
+ - [Lit 3](https://lit.dev/) — Web components framework
141
+ - [TypeScript 5.9](https://www.typescriptlang.org/) — Type safety
142
+ - [Vite 8](https://vite.dev/) — Build tool and dev server
143
+ - [Tailwind CSS 4](https://tailwindcss.com/) — Design tokens and utility classes
144
+
145
+ ## License
146
+
147
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vverchonov/web-components",
3
- "version": "0.1.0",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -21,7 +21,9 @@
21
21
  "./dist/input.js",
22
22
  "./dist/modal.js",
23
23
  "./dist/tabs.js",
24
- "./dist/selector.js"
24
+ "./dist/selector.js",
25
+ "./dist/card.js",
26
+ "./dist/radio-group.js"
25
27
  ],
26
28
  "files": [
27
29
  "dist"
@@ -74,6 +76,14 @@
74
76
  "types": "./dist/components/selector/index.d.ts",
75
77
  "import": "./dist/selector.js"
76
78
  },
79
+ "./card": {
80
+ "types": "./dist/components/card/index.d.ts",
81
+ "import": "./dist/card.js"
82
+ },
83
+ "./radio-group": {
84
+ "types": "./dist/components/radio-group/index.d.ts",
85
+ "import": "./dist/radio-group.js"
86
+ },
77
87
  "./react": {
78
88
  "types": "./dist/react/index.d.ts",
79
89
  "import": "./dist/react.js"
@@ -118,9 +128,17 @@
118
128
  "types": "./dist/react/layout.d.ts",
119
129
  "import": "./dist/react/layout.js"
120
130
  },
131
+ "./react/card": {
132
+ "types": "./dist/react/card.d.ts",
133
+ "import": "./dist/react/card.js"
134
+ },
121
135
  "./react/form-layout": {
122
136
  "types": "./dist/react/form-layout.d.ts",
123
137
  "import": "./dist/react/form-layout.js"
138
+ },
139
+ "./react/radio-group": {
140
+ "types": "./dist/react/radio-group.d.ts",
141
+ "import": "./dist/react/radio-group.js"
124
142
  }
125
143
  },
126
144
  "peerDependencies": {