pixelplay 1.0.3 → 1.0.4
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/CHANGELOG.md +61 -61
- package/README.md +91 -91
- package/dist/index.d.mts +1323 -2
- package/dist/index.d.ts +1323 -2
- package/dist/index.js +67119 -15
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +67068 -2
- package/dist/index.mjs.map +1 -0
- package/package.json +57 -57
package/CHANGELOG.md
CHANGED
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to **PixelPlay UI** are documented here.
|
|
4
|
-
|
|
5
|
-
This project adheres to [Semantic Versioning](https://semver.org/).
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## [1.0.3] — 2026-04-01
|
|
10
|
-
|
|
11
|
-
### Added
|
|
12
|
-
|
|
13
|
-
- **Auth examples**: `auth-03` (split-screen sign-in with testimonial carousel) and `auth-04` (split-screen sign-in with image only)
|
|
14
|
-
- **Sign-up examples**: `signup-01` (centered email + social), `signup-02` (header + tabs), `signup-03` (split-screen + testimonial carousel), `signup-04` (split-screen + image only)
|
|
15
|
-
- **`SplitImagePanel` widget**: New generic widget accepting any overlay content as `children`. Replaces the testimonial-specific panel. Supports image-only mode or any custom JSX overlay
|
|
16
|
-
- **`SplitImagePanel` docs page**: Component documentation with three demo sections — image only, with overlay content, and with navigation carousel
|
|
17
|
-
|
|
18
|
-
### Changed
|
|
19
|
-
|
|
20
|
-
- **Sidebar nav**: Renamed "Auth testimonial panel" entry to "Split image panel" with updated href
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
## [1.0.2] — 2026-04-01
|
|
25
|
-
|
|
26
|
-
### Changed
|
|
27
|
-
|
|
28
|
-
- **Feature section grid**: Updated to 4-column layout on large screens
|
|
29
|
-
- **Feature section images**: Full-width responsive images replacing aspect-ratio crop — no content is clipped
|
|
30
|
-
- **Feature section images**: Added primary-colored overlay with `mix-blend-color` tint for grayscale thumbnails
|
|
31
|
-
- **Dark mode image previews**: Boosted brightness and reduced overlay opacity for better visibility in dark mode
|
|
32
|
-
- **Example preview containers**: Replaced raw Tailwind color scales with theme tokens for dark mode consistency
|
|
33
|
-
- **Dark mode scrim token**: Changed from opaque black to subtle white tint across all themes (default, Rosewood, Botanica, Inkwell)
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
## [1.0.1] — 2026-04-01
|
|
38
|
-
|
|
39
|
-
### Added
|
|
40
|
-
|
|
41
|
-
- **Dashboard examples**: New dashboard variants (`dashboards-05`, `dashboards-06`) — analytics/map dashboard and personal finance dashboard
|
|
42
|
-
- **Country icon set**: Added `CountryFlag` component for displaying country flag icons
|
|
43
|
-
|
|
44
|
-
### Fixed
|
|
45
|
-
|
|
46
|
-
- **Button `isIconOnly`**: Icon-only buttons now correctly render `children` — previously only `startContent`/`endContent` were visible, leaving icon-only buttons empty
|
|
47
|
-
- **Button hover visibility**: Improved hover background tokens for `ghost`, `bordered`, and `light` variants (default color) — hover state is now clearly visible against surface backgrounds
|
|
48
|
-
- Removed stale `import { start } from "repl"` in Button component
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
## [1.0.0] — 2026-03-30
|
|
53
|
-
|
|
54
|
-
### Added
|
|
55
|
-
|
|
56
|
-
- Initial public release of PixelPlay UI
|
|
57
|
-
- Base components: `Button`, `ButtonGroup`, `Input`, `Textarea`, `Badge`, `BadgeGroup`, `Tag`, `Card`, `Spinner`, `Avatar`, `SocialButton`, `StoreButton`, `DropdownMenu`, `Select`, `Toggle`, `Checkbox`, `CheckboxGroup`, `Progress`, `CircularProgress`, `Slider`, `Tooltip`
|
|
58
|
-
- Application components: `Modal`, `Chart`, `Pagination`, `Messaging`, `DataTable`, `Tabs`, `Breadcrumb`, `Alert`, `Toast`, `DatePicker`, `Calendar`, `FileTypeIcon`, `FileUpload`
|
|
59
|
-
- Full TypeScript type definitions
|
|
60
|
-
- Tailwind CSS 4 theme token system with light/dark mode support
|
|
61
|
-
- Three built-in themes: Rosewood, Botanica, Inkwell
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to **PixelPlay UI** are documented here.
|
|
4
|
+
|
|
5
|
+
This project adheres to [Semantic Versioning](https://semver.org/).
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## [1.0.3] — 2026-04-01
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- **Auth examples**: `auth-03` (split-screen sign-in with testimonial carousel) and `auth-04` (split-screen sign-in with image only)
|
|
14
|
+
- **Sign-up examples**: `signup-01` (centered email + social), `signup-02` (header + tabs), `signup-03` (split-screen + testimonial carousel), `signup-04` (split-screen + image only)
|
|
15
|
+
- **`SplitImagePanel` widget**: New generic widget accepting any overlay content as `children`. Replaces the testimonial-specific panel. Supports image-only mode or any custom JSX overlay
|
|
16
|
+
- **`SplitImagePanel` docs page**: Component documentation with three demo sections — image only, with overlay content, and with navigation carousel
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- **Sidebar nav**: Renamed "Auth testimonial panel" entry to "Split image panel" with updated href
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## [1.0.2] — 2026-04-01
|
|
25
|
+
|
|
26
|
+
### Changed
|
|
27
|
+
|
|
28
|
+
- **Feature section grid**: Updated to 4-column layout on large screens
|
|
29
|
+
- **Feature section images**: Full-width responsive images replacing aspect-ratio crop — no content is clipped
|
|
30
|
+
- **Feature section images**: Added primary-colored overlay with `mix-blend-color` tint for grayscale thumbnails
|
|
31
|
+
- **Dark mode image previews**: Boosted brightness and reduced overlay opacity for better visibility in dark mode
|
|
32
|
+
- **Example preview containers**: Replaced raw Tailwind color scales with theme tokens for dark mode consistency
|
|
33
|
+
- **Dark mode scrim token**: Changed from opaque black to subtle white tint across all themes (default, Rosewood, Botanica, Inkwell)
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## [1.0.1] — 2026-04-01
|
|
38
|
+
|
|
39
|
+
### Added
|
|
40
|
+
|
|
41
|
+
- **Dashboard examples**: New dashboard variants (`dashboards-05`, `dashboards-06`) — analytics/map dashboard and personal finance dashboard
|
|
42
|
+
- **Country icon set**: Added `CountryFlag` component for displaying country flag icons
|
|
43
|
+
|
|
44
|
+
### Fixed
|
|
45
|
+
|
|
46
|
+
- **Button `isIconOnly`**: Icon-only buttons now correctly render `children` — previously only `startContent`/`endContent` were visible, leaving icon-only buttons empty
|
|
47
|
+
- **Button hover visibility**: Improved hover background tokens for `ghost`, `bordered`, and `light` variants (default color) — hover state is now clearly visible against surface backgrounds
|
|
48
|
+
- Removed stale `import { start } from "repl"` in Button component
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## [1.0.0] — 2026-03-30
|
|
53
|
+
|
|
54
|
+
### Added
|
|
55
|
+
|
|
56
|
+
- Initial public release of PixelPlay UI
|
|
57
|
+
- Base components: `Button`, `ButtonGroup`, `Input`, `Textarea`, `Badge`, `BadgeGroup`, `Tag`, `Card`, `Spinner`, `Avatar`, `SocialButton`, `StoreButton`, `DropdownMenu`, `Select`, `Toggle`, `Checkbox`, `CheckboxGroup`, `Progress`, `CircularProgress`, `Slider`, `Tooltip`
|
|
58
|
+
- Application components: `Modal`, `Chart`, `Pagination`, `Messaging`, `DataTable`, `Tabs`, `Breadcrumb`, `Alert`, `Toast`, `DatePicker`, `Calendar`, `FileTypeIcon`, `FileUpload`
|
|
59
|
+
- Full TypeScript type definitions
|
|
60
|
+
- Tailwind CSS 4 theme token system with light/dark mode support
|
|
61
|
+
- Three built-in themes: Rosewood, Botanica, Inkwell
|
package/README.md
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
# PixelPlay UI
|
|
2
|
-
|
|
3
|
-
> A scalable React component library with production-ready components, layouts, and themes for SaaS products.
|
|
4
|
-
|
|
5
|
-
Built by [Dennis Isaac](https://dennisisaac.com) · [Live Docs](https://dennisisaac.com/ui-kit)
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm install pixelplay
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
yarn add pixelplay
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
```bash
|
|
20
|
-
pnpm add pixelplay
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Requirements
|
|
24
|
-
|
|
25
|
-
- React 18+
|
|
26
|
-
- Tailwind CSS 4+
|
|
27
|
-
- TypeScript 5+ (recommended)
|
|
28
|
-
|
|
29
|
-
## Quick Start
|
|
30
|
-
|
|
31
|
-
```tsx
|
|
32
|
-
import { Button, Badge, Avatar, Input } from "pixelplay";
|
|
33
|
-
|
|
34
|
-
export function MyComponent() {
|
|
35
|
-
return (
|
|
36
|
-
<div>
|
|
37
|
-
<Avatar name="Dennis Isaac" size="md" />
|
|
38
|
-
<Badge color="purple">New</Badge>
|
|
39
|
-
<Button color="primary" variant="solid">Get Started</Button>
|
|
40
|
-
</div>
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
## Theme Setup
|
|
46
|
-
|
|
47
|
-
Add the PixelPlay theme tokens to your global CSS:
|
|
48
|
-
|
|
49
|
-
```css
|
|
50
|
-
@import "pixelplay/styles";
|
|
51
|
-
|
|
52
|
-
:root {
|
|
53
|
-
/* Override theme tokens as needed */
|
|
54
|
-
--primary: oklch(55% 0.22 264);
|
|
55
|
-
}
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## Components
|
|
59
|
-
|
|
60
|
-
| Component | Description |
|
|
61
|
-
|-----------|-------------|
|
|
62
|
-
| `Button` | Versatile button with variants, sizes, and states |
|
|
63
|
-
| `Input` | Text input with labels, validation, and add-ons |
|
|
64
|
-
| `Badge` | Status and label badges with colors |
|
|
65
|
-
| `Avatar` | User avatars with initials, images, and status |
|
|
66
|
-
| `Card` | Content container with header, body, and footer |
|
|
67
|
-
| `Toggle` | Boolean toggle switch |
|
|
68
|
-
| `Checkbox` | Checkbox with variants and groups |
|
|
69
|
-
| `Select` | Dropdown select with search |
|
|
70
|
-
| `Slider` | Range slider with dual handles |
|
|
71
|
-
| `Tooltip` | Contextual tooltips |
|
|
72
|
-
| `Modal` | Dialog modals |
|
|
73
|
-
| `Spinner` | Loading indicators |
|
|
74
|
-
| `Tag` | Dismissable tags |
|
|
75
|
-
| `Progress` | Progress bars and circular indicators |
|
|
76
|
-
|
|
77
|
-
[View all components →](https://dennisisaac.com/ui-kit)
|
|
78
|
-
|
|
79
|
-
## Versioning
|
|
80
|
-
|
|
81
|
-
PixelPlay UI follows [Semantic Versioning](https://semver.org/):
|
|
82
|
-
|
|
83
|
-
- **Patch** (`x.x.1`) — bug fixes and minor adjustments
|
|
84
|
-
- **Minor** (`x.1.0`) — new components, non-breaking additions
|
|
85
|
-
- **Major** (`1.0.0`) — breaking API changes
|
|
86
|
-
|
|
87
|
-
See [CHANGELOG.md](./CHANGELOG.md) for the full release history.
|
|
88
|
-
|
|
89
|
-
## License
|
|
90
|
-
|
|
91
|
-
MIT © [Dennis Isaac](https://dennisisaac.com)
|
|
1
|
+
# PixelPlay UI
|
|
2
|
+
|
|
3
|
+
> A scalable React component library with production-ready components, layouts, and themes for SaaS products.
|
|
4
|
+
|
|
5
|
+
Built by [Dennis Isaac](https://dennisisaac.com) · [Live Docs](https://dennisisaac.com/ui-kit)
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install pixelplay
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add pixelplay
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
pnpm add pixelplay
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Requirements
|
|
24
|
+
|
|
25
|
+
- React 18+
|
|
26
|
+
- Tailwind CSS 4+
|
|
27
|
+
- TypeScript 5+ (recommended)
|
|
28
|
+
|
|
29
|
+
## Quick Start
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { Button, Badge, Avatar, Input } from "pixelplay";
|
|
33
|
+
|
|
34
|
+
export function MyComponent() {
|
|
35
|
+
return (
|
|
36
|
+
<div>
|
|
37
|
+
<Avatar name="Dennis Isaac" size="md" />
|
|
38
|
+
<Badge color="purple">New</Badge>
|
|
39
|
+
<Button color="primary" variant="solid">Get Started</Button>
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Theme Setup
|
|
46
|
+
|
|
47
|
+
Add the PixelPlay theme tokens to your global CSS:
|
|
48
|
+
|
|
49
|
+
```css
|
|
50
|
+
@import "pixelplay/styles";
|
|
51
|
+
|
|
52
|
+
:root {
|
|
53
|
+
/* Override theme tokens as needed */
|
|
54
|
+
--primary: oklch(55% 0.22 264);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Components
|
|
59
|
+
|
|
60
|
+
| Component | Description |
|
|
61
|
+
|-----------|-------------|
|
|
62
|
+
| `Button` | Versatile button with variants, sizes, and states |
|
|
63
|
+
| `Input` | Text input with labels, validation, and add-ons |
|
|
64
|
+
| `Badge` | Status and label badges with colors |
|
|
65
|
+
| `Avatar` | User avatars with initials, images, and status |
|
|
66
|
+
| `Card` | Content container with header, body, and footer |
|
|
67
|
+
| `Toggle` | Boolean toggle switch |
|
|
68
|
+
| `Checkbox` | Checkbox with variants and groups |
|
|
69
|
+
| `Select` | Dropdown select with search |
|
|
70
|
+
| `Slider` | Range slider with dual handles |
|
|
71
|
+
| `Tooltip` | Contextual tooltips |
|
|
72
|
+
| `Modal` | Dialog modals |
|
|
73
|
+
| `Spinner` | Loading indicators |
|
|
74
|
+
| `Tag` | Dismissable tags |
|
|
75
|
+
| `Progress` | Progress bars and circular indicators |
|
|
76
|
+
|
|
77
|
+
[View all components →](https://dennisisaac.com/ui-kit)
|
|
78
|
+
|
|
79
|
+
## Versioning
|
|
80
|
+
|
|
81
|
+
PixelPlay UI follows [Semantic Versioning](https://semver.org/):
|
|
82
|
+
|
|
83
|
+
- **Patch** (`x.x.1`) — bug fixes and minor adjustments
|
|
84
|
+
- **Minor** (`x.1.0`) — new components, non-breaking additions
|
|
85
|
+
- **Major** (`1.0.0`) — breaking API changes
|
|
86
|
+
|
|
87
|
+
See [CHANGELOG.md](./CHANGELOG.md) for the full release history.
|
|
88
|
+
|
|
89
|
+
## License
|
|
90
|
+
|
|
91
|
+
MIT © [Dennis Isaac](https://dennisisaac.com)
|