@bigtablet/design-system 1.24.2 → 1.25.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 (24) hide show
  1. package/README.md +10 -32
  2. package/dist/index.css +1466 -811
  3. package/dist/index.d.ts +330 -215
  4. package/dist/index.js +872 -584
  5. package/dist/styles/{scss/_a11y.scss → a11y/_index.scss} +1 -1
  6. package/dist/styles/border-width/_index.scss +11 -0
  7. package/dist/styles/{scss/_colors.scss → colors/_index.scss} +8 -0
  8. package/dist/styles/elevation/_index.scss +5 -0
  9. package/dist/styles/opacity/_index.scss +12 -0
  10. package/dist/styles/{scss/token.scss → token.scss} +3 -1
  11. package/dist/styles/{scss/_typography.scss → typography/_index.scss} +9 -2
  12. package/dist/vanilla/bigtablet.min.css +1 -1
  13. package/package.json +7 -13
  14. package/dist/next.css +0 -133
  15. package/dist/next.d.ts +0 -53
  16. package/dist/next.js +0 -148
  17. package/dist/styles/scss/_shadows.scss +0 -5
  18. /package/dist/styles/{scss/_breakpoints.scss → breakpoints/_index.scss} +0 -0
  19. /package/dist/styles/{scss/_layout.scss → layout/_index.scss} +0 -0
  20. /package/dist/styles/{scss/_motion.scss → motion/_index.scss} +0 -0
  21. /package/dist/styles/{scss/_radius.scss → radius/_index.scss} +0 -0
  22. /package/dist/styles/{scss/_skeleton.scss → skeleton/_index.scss} +0 -0
  23. /package/dist/styles/{scss/_spacing.scss → spacing/_index.scss} +0 -0
  24. /package/dist/styles/{scss/_z-index.scss → z-index/_index.scss} +0 -0
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  # Bigtablet Design System
6
6
 
7
7
  [![npm version](https://img.shields.io/npm/v/@bigtablet/design-system.svg)](https://www.npmjs.com/package/@bigtablet/design-system)
8
- [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
8
+ [![https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
9
9
  [![Test Coverage](https://img.shields.io/badge/coverage-86%25-brightgreen.svg)](https://github.com/Bigtablet/bigtablet-design-system/actions)
10
10
  [![CI](https://github.com/Bigtablet/bigtablet-design-system/actions/workflows/ci.yml/badge.svg)](https://github.com/Bigtablet/bigtablet-design-system/actions/workflows/ci.yml)
11
11
 
@@ -83,7 +83,7 @@ function App() {
83
83
  <TextField
84
84
  label="Email"
85
85
  placeholder="email@example.com"
86
- helperText="Please enter your work email."
86
+ supportingText="Please enter your work email."
87
87
  />
88
88
  <Button variant="primary" onClick={() => setOpen(true)}>Confirm</Button>
89
89
  <Modal open={open} onClose={() => setOpen(false)} title="Notice">
@@ -96,35 +96,12 @@ function App() {
96
96
 
97
97
  ### Next.js
98
98
 
99
- In a Next.js environment, import from the `/next` path. `Sidebar` uses `next/link`, so always use this path.
99
+ In a Next.js environment, the `/next` entry point is reserved for future Next.js-specific exports. Currently all components are framework-agnostic:
100
100
 
101
101
  ```tsx
102
102
  // app/layout.tsx
103
- import { Sidebar } from '@bigtablet/design-system/next';
103
+ import { Button, TextField, Modal } from '@bigtablet/design-system';
104
104
  import '@bigtablet/design-system/style.css';
105
-
106
- const navItems = [
107
- { label: 'Home', href: '/home', icon: HomeIcon },
108
- {
109
- type: 'group' as const,
110
- id: 'settings',
111
- label: 'Settings',
112
- icon: SettingsIcon,
113
- children: [
114
- { label: 'Profile', href: '/settings/profile' },
115
- { label: 'Security', href: '/settings/security' },
116
- ],
117
- },
118
- ];
119
-
120
- export default function Layout({ children }: { children: React.ReactNode }) {
121
- return (
122
- <div style={{ display: 'flex' }}>
123
- <Sidebar items={navItems} activePath="/home" />
124
- <main style={{ flex: 1 }}>{children}</main>
125
- </div>
126
- );
127
- }
128
105
  ```
129
106
 
130
107
  ### Provider Setup
@@ -233,12 +210,12 @@ For non-React environments (Thymeleaf, JSP, PHP, etc.), use directly via CDN.
233
210
 
234
211
  | Category | Components |
235
212
  |----------|------------|
236
- | **General** | `Button`, `Select` |
213
+ | **General** | `Button`, `Select`, `Chip`, `FAB`, `IconButton` |
237
214
  | **Form** | `TextField`, `Checkbox`, `Radio`, `Switch`, `DatePicker`, `FileInput` |
238
- | **Feedback** | `Alert`, `Toast`, `Spinner`, `TopLoading` |
239
- | **Navigation** | `Pagination`, `Sidebar` |
215
+ | **Feedback** | `Alert`, `Toast`, `Spinner`, `TopLoading`, `LinearProgress` |
216
+ | **Navigation** | `Pagination` |
240
217
  | **Overlay** | `Modal` |
241
- | **Display** | `Card` |
218
+ | **Display** | `Card`, `Divider`, `ListItem` |
242
219
 
243
220
  👉 **[Full Component Docs](./docs/COMPONENTS.md)**
244
221
 
@@ -250,7 +227,7 @@ SCSS tokens and CSS custom properties are provided for a consistent design.
250
227
 
251
228
  ```scss
252
229
  // SCSS
253
- @use "src/styles/scss/token" as token;
230
+ @use "src/styles/token" as token;
254
231
 
255
232
  .my-component {
256
233
  color: token.$color_text_primary;
@@ -292,6 +269,7 @@ pnpm storybook # Start Storybook (port 6006)
292
269
  pnpm build # Build library
293
270
  pnpm dev # Watch mode
294
271
  pnpm test # Run tests
272
+ pnpm test:storybook # Run a11y tests (Storybook + Playwright)
295
273
  pnpm test:coverage # Coverage report
296
274
  ```
297
275