@bigtablet/design-system 3.1.1 → 3.2.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.
- package/README.md +10 -10
- package/dist/index.css +3904 -1104
- package/dist/index.d.ts +275 -65
- package/dist/index.js +505 -137
- package/dist/styles/a11y/_index.scss +3 -3
- package/dist/styles/colors/_index.scss +168 -61
- package/dist/styles/elevation/_index.scss +4 -4
- package/dist/styles/motion/_index.scss +2 -2
- package/dist/styles/skeleton/_index.scss +2 -2
- package/dist/styles/typography/_index.scss +3 -3
- package/dist/vanilla/bigtablet.min.css +1 -1
- package/package.json +9 -11
package/README.md
CHANGED
|
@@ -38,17 +38,17 @@ export default function App() {
|
|
|
38
38
|
}
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
A complete React + TypeScript design system maintained by Bigtablet for internal product work. Open-sourced for reference
|
|
41
|
+
A complete React + TypeScript design system maintained by Bigtablet for internal product work. Open-sourced for reference - external use welcome, but minor versions may include breaking changes.
|
|
42
42
|
|
|
43
43
|
<br />
|
|
44
44
|
|
|
45
45
|
## What's inside
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
47
|
+
- **40+ components** across forms, display, feedback, navigation, overlay, and layout<br />
|
|
48
|
+
- **11 token domains** - colors, typography, spacing, motion, radius, elevation, and more - exposed as SCSS variables and CSS custom properties<br />
|
|
49
|
+
- **Light + dark mode** out of the box. `[data-theme="dark"]` or `prefers-color-scheme`, no theme provider required (but available via `ThemeProvider` for runtime toggling)<br />
|
|
50
|
+
- **Vanilla JS bundle** for non-React backends - Thymeleaf, JSP, PHP, Django<br />
|
|
51
|
+
- **Accessibility tested** with axe-core in CI · keyboard nav · ARIA throughout
|
|
52
52
|
|
|
53
53
|
<br />
|
|
54
54
|
|
|
@@ -61,7 +61,7 @@ pnpm add @bigtablet/design-system react@^19 react-dom@^19 lucide-react
|
|
|
61
61
|
Requires React 19 + lucide-react ≥ 0.552. Compatible with Next.js 13+.
|
|
62
62
|
|
|
63
63
|
<details>
|
|
64
|
-
<summary><b>One-line setup</b>
|
|
64
|
+
<summary><b>One-line setup</b> - auto-detect package manager + framework</summary>
|
|
65
65
|
|
|
66
66
|
<br />
|
|
67
67
|
|
|
@@ -102,10 +102,10 @@ showAlert({ title: "Delete?", showCancel: true, onConfirm: ... });
|
|
|
102
102
|
## Components
|
|
103
103
|
|
|
104
104
|
<table>
|
|
105
|
-
<tr><td><b>Forms</b></td><td>Button · IconButton · TextField · Checkbox · Radio · Toggle · Dropdown · DatePicker · FileInput · OTPInput</td></tr>
|
|
105
|
+
<tr><td><b>Forms</b></td><td>Button · IconButton · TextField · Textarea · Checkbox · Radio · Toggle · Dropdown · DatePicker · FileInput · OTPInput</td></tr>
|
|
106
106
|
<tr><td><b>Display</b></td><td>Card · MediaCard · Hero · Avatar · Badge · Chip · ListItem · Table · Divider · Icon · Accordion</td></tr>
|
|
107
|
-
<tr><td><b>Feedback</b></td><td>Alert · Toast · Spinner · TopLoading · LinearProgress · Skeleton · EmptyState</td></tr>
|
|
108
|
-
<tr><td><b>Navigation</b></td><td>Tabs · Sidebar · NavBar · Breadcrumb · Menu · Pagination</td></tr>
|
|
107
|
+
<tr><td><b>Feedback</b></td><td>Alert · Toast · Spinner · TopLoading · LinearProgress · Skeleton · EmptyState · ErrorState</td></tr>
|
|
108
|
+
<tr><td><b>Navigation</b></td><td>Tabs · Sidebar · BottomNav · NavBar · Breadcrumb · Menu · Pagination</td></tr>
|
|
109
109
|
<tr><td><b>Overlay</b></td><td>Modal · Tooltip</td></tr>
|
|
110
110
|
<tr><td><b>Layout</b></td><td>Container · Section · Stack · Grid</td></tr>
|
|
111
111
|
</table>
|