pixelplay 1.0.13 → 1.1.1

package/CHANGELOG.md

@@ -1,61 +1,146 @@
-# Changelog
-
-All notable changes to **PixelPlay UI** are documented here.
-
-This project adheres to [Semantic Versioning](https://semver.org/).
-
----
-
-## [1.0.3] — 2026-04-01
-
-### Added
-
-- **Auth examples**: `auth-03` (split-screen sign-in with testimonial carousel) and `auth-04` (split-screen sign-in with image only)
-- **Sign-up examples**: `signup-01` (centered email + social), `signup-02` (header + tabs), `signup-03` (split-screen + testimonial carousel), `signup-04` (split-screen + image only)
-- **`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
-- **`SplitImagePanel` docs page**: Component documentation with three demo sections — image only, with overlay content, and with navigation carousel
-
-### Changed
-
-- **Sidebar nav**: Renamed "Auth testimonial panel" entry to "Split image panel" with updated href
-
----
-
-## [1.0.2] — 2026-04-01
-
-### Changed
-
-- **Feature section grid**: Updated to 4-column layout on large screens
-- **Feature section images**: Full-width responsive images replacing aspect-ratio crop — no content is clipped
-- **Feature section images**: Added primary-colored overlay with `mix-blend-color` tint for grayscale thumbnails
-- **Dark mode image previews**: Boosted brightness and reduced overlay opacity for better visibility in dark mode
-- **Example preview containers**: Replaced raw Tailwind color scales with theme tokens for dark mode consistency
-- **Dark mode scrim token**: Changed from opaque black to subtle white tint across all themes (default, Rosewood, Botanica, Inkwell)
-
----
-
-## [1.0.1] — 2026-04-01
-
-### Added
-
-- **Dashboard examples**: New dashboard variants (`dashboards-05`, `dashboards-06`) — analytics/map dashboard and personal finance dashboard
-- **Country icon set**: Added `CountryFlag` component for displaying country flag icons
-
-### Fixed
-
-- **Button `isIconOnly`**: Icon-only buttons now correctly render `children` — previously only `startContent`/`endContent` were visible, leaving icon-only buttons empty
-- **Button hover visibility**: Improved hover background tokens for `ghost`, `bordered`, and `light` variants (default color) — hover state is now clearly visible against surface backgrounds
-- Removed stale `import { start } from "repl"` in Button component
-
----
-
-## [1.0.0] — 2026-03-30
-
-### Added
-
-- Initial public release of PixelPlay UI
-- Base components: `Button`, `ButtonGroup`, `Input`, `Textarea`, `Badge`, `BadgeGroup`, `Tag`, `Card`, `Spinner`, `Avatar`, `SocialButton`, `StoreButton`, `DropdownMenu`, `Select`, `Toggle`, `Checkbox`, `CheckboxGroup`, `Progress`, `CircularProgress`, `Slider`, `Tooltip`
-- Application components: `Modal`, `Chart`, `Pagination`, `Messaging`, `DataTable`, `Tabs`, `Breadcrumb`, `Alert`, `Toast`, `DatePicker`, `Calendar`, `FileTypeIcon`, `FileUpload`
-- Full TypeScript type definitions
-- Tailwind CSS 4 theme token system with light/dark mode support
-- Three built-in themes: Rosewood, Botanica, Inkwell
+# Changelog
+
+All notable changes to **PixelPlay UI** are documented here.
+
+This project adheres to [Semantic Versioning](https://semver.org/).
+
+---
+
+## [1.1.1] — 2026-04-04
+
+### Added
+
+- **Calendar example pages**: Three new full-page calendar layouts — `calendar-01` (monthly view with collapsible sidebar and colour-coded event chips), `calendar-02` (weekly time-grid with rich event detail slideout), and `calendar-03` (daily time-grid for focused day planning)
+- **Calendar examples docs page**: `/ui-kit/examples/calendar/` — docs page listing and previewing all three calendar examples with descriptions
+- **Calendar nav entry**: "Calendar" link added to the Examples section in the docs sidebar (`DocsLayoutShell`)
+- **Calendar examples index**: Calendar added to the examples overview page alongside Dashboards, Settings, and Auth
+- **Rich event detail slideout** (calendar-02): Clicking any event opens a `SlideoutMenu` with colour-gradient header, tags, organiser avatar, time/location/reminder/description rows, guest list with RSVP counts and `Badge` status per guest, file attachments with type-coloured icons, and Edit/Join footer actions
+- **Dynamic event dates** (calendar-02): Events always appear in the current week (Mon–Fri) using `getMondayOfWeek()` and `weekDay(offset)` helpers — no stale hardcoded dates
+- **Compact event cards**: Week/day view renders short events (≤30 min) in a single-line compact layout (`py-0.5`, title · time) to prevent content overflow at small card heights
+
+### Changed
+
+- **Calendar event colors — dark mode**: Replaced all hardcoded `--utility-*` color tokens in `colorMap` and `cardColorMap` with theme-adaptive graphic tokens (`--graphic-N-container`, `--on-graphic-N-container`, `--graphic-N`). Event colors now correctly adapt to dark mode and custom brand themes
+- **ViewDropdown positioning**: Changed from `absolute` to `position: fixed` with `getBoundingClientRect()` on open — escapes `overflow: hidden` on the calendar root so the dropdown is never clipped by sticky headers
+
+### Fixed
+
+- **Breadcrumb whitespace**: Removed extra space in `<div >` opening tag on docs page
+
+---
+
+## [1.1.0] — 2026-04-03
+
+### Added
+
+- **Theme generator**: Full-featured live theme generator page with accent picker, harmony selector, font selector, roundness presets, and surface tint controls — changes apply site-wide in real time
+- **Color harmony engine** (`color-harmony.ts`): Six standard color harmonies — monochromatic, complementary, split-complementary, analogous, triadic, and tetradic — with gap-bisection algorithm for 10-slot graphic palette distribution
+- **Custom theme builder** (`build-custom-theme.ts`): Generates full token sets (primary, secondary, tertiary, surfaces, graphics) from accent + harmony + options; shade-level differentiation for triadic vs other harmonies
+- **Toolbar component**: Reusable `Toolbar` with `floating`/`fixed` variants, `showLabels` prop (`"above"` | `"side"`), `ToolbarDivider`, and `useToolbarLabels()` context hook
+- **Toolbar docs page**: Component documentation with interactive demos for variant, size, and label placement
+- **Export panel**: TypeScript and CSS export formats for generated themes with one-click copy
+- **Split-complementary harmony**: ±30° from complement (150° and 210° from primary hue)
+- **Getting started page**: Expanded documentation with setup instructions
+
+### Changed
+
+- **Harmony naming**: Renamed to standard color theory terms — single-tone → monochromatic, contrast → complementary, neighbors → analogous, balanced → triadic, vibrant → tetradic
+- **Default theme**: Changed from Inkwell to Rosewood
+- **Graphic palette algorithm**: Replaced fixed 30° hue stepping with gap-bisection algorithm so chart colors adapt to each harmony's unique hue distribution
+- **Triadic shade differentiation**: Triadic harmony uses softer shades (500 vs 600 light, 300 vs 400 dark) to visually distinguish from tetradic
+- **Toolbar positioning**: Removed built-in `fixed` positioning from Toolbar component — positioning is now consumer-controlled via `className`, making the component composable in any layout context
+- **Select dropdown positioning**: Replaced `useEffect` + `setState` with `useCallback`-based toggle to fix React `setState` in effect warning
+- **DocsLayoutShell padding**: Reduced mobile padding (`px-3 py-6 sm:px-6 sm:py-10`) to prevent compounding with page-level padding
+- **npm package**: Restructured with `tsup` bundler, added license validation, server utilities, and CSS generation script
+
+### Fixed
+
+- **Build error**: Added missing `"use client"` directive to Toolbar component
+- **Select dropdown clipping**: Added `pb-72` to dropdown preview containers for overflow room
+- **Toolbar swatch clipping**: Added `overflow-visible` to prevent border-radius from clipping ring/scale effects on accent swatches
+
+---
+
+## [1.0.5–1.0.15] — 2026-04-01 to 2026-04-03
+
+> These versions were published directly to npm and are not individually documented in the changelog. No git tags exist for this range.
+
+---
+
+## [1.0.4] — 2026-04-01
+
+### Added
+
+- **Settings examples**: Added `settings-02` (Password & Sessions), `settings-03` (Appearance), and `settings-04` (Billing) to the examples index
+- **Settings — Billing (`settings-04`)**: Plan selector radio cards (Basic/Business/Enterprise) and invoice history DataTable with selectable rows, status badges, and per-row download actions
+- **Auth examples**: Added `auth-05` (Verification — check your email), `auth-06` (Verification — enter OTP code), `auth-07` (Verification — email verified), `auth-08` (Forgot password — email entry), `auth-09` (Forgot password — set new password), and `auth-10` (Forgot password — password reset)
+- **Avatar**: New `3xl` size (96 px) added to `AvatarSize` type and `SIZE_MAP`
+- **OptionCard widget**: New widget and docs page added to component library navigation
+
+### Changed
+
+- **Avatar**: `AvatarSize` type expanded with `3xl`; docs updated from 7 to 8 sizes
+- **PageHeader** (cover + left avatar variant): Removed bottom border, upgraded avatar from `2xl` to `3xl`, tightened overlap offset, and added responsive horizontal padding to the info row
+- **SidebarNavFeatureCard**: Removed `flex-col` from container so children control their own layout independently of the close button; action buttons updated from `ghost` to `bordered` variant
+
+### Fixed
+
+- **SidebarNavFeatureCard**: Close button is now absolutely positioned so it never overlaps child content
+- **SidebarNavFeatureCard**: Replaced hand-drawn SVG close icon with `X` from `react-feather`
+- **SidebarNavFooter**: Removed stale `padding-right` workaround that was shifting all content rightward
+
+---
+
+## [1.0.3] — 2026-04-01
+
+### Added
+
+- **Auth examples**: `auth-03` (split-screen sign-in with testimonial carousel) and `auth-04` (split-screen sign-in with image only)
+- **Sign-up examples**: `signup-01` (centered email + social), `signup-02` (header + tabs), `signup-03` (split-screen + testimonial carousel), `signup-04` (split-screen + image only)
+- **`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
+- **`SplitImagePanel` docs page**: Component documentation with three demo sections — image only, with overlay content, and with navigation carousel
+
+### Changed
+
+- **Sidebar nav**: Renamed "Auth testimonial panel" entry to "Split image panel" with updated href
+
+---
+
+## [1.0.2] — 2026-04-01
+
+### Changed
+
+- **Feature section grid**: Updated to 4-column layout on large screens
+- **Feature section images**: Full-width responsive images replacing aspect-ratio crop — no content is clipped
+- **Feature section images**: Added primary-colored overlay with `mix-blend-color` tint for grayscale thumbnails
+- **Dark mode image previews**: Boosted brightness and reduced overlay opacity for better visibility in dark mode
+- **Example preview containers**: Replaced raw Tailwind color scales with theme tokens for dark mode consistency
+- **Dark mode scrim token**: Changed from opaque black to subtle white tint across all themes (default, Rosewood, Botanica, Inkwell)
+
+---
+
+## [1.0.1] — 2026-04-01
+
+### Added
+
+- **Dashboard examples**: New dashboard variants (`dashboards-05`, `dashboards-06`) — analytics/map dashboard and personal finance dashboard
+- **Country icon set**: Added `CountryFlag` component for displaying country flag icons
+
+### Fixed
+
+- **Button `isIconOnly`**: Icon-only buttons now correctly render `children` — previously only `startContent`/`endContent` were visible, leaving icon-only buttons empty
+- **Button hover visibility**: Improved hover background tokens for `ghost`, `bordered`, and `light` variants (default color) — hover state is now clearly visible against surface backgrounds
+- Removed stale `import { start } from "repl"` in Button component
+
+---
+
+## [1.0.0] — 2026-03-30
+
+### Added
+
+- Initial public release of PixelPlay UI
+- Base components: `Button`, `ButtonGroup`, `Input`, `Textarea`, `Badge`, `BadgeGroup`, `Tag`, `Card`, `Spinner`, `Avatar`, `SocialButton`, `StoreButton`, `DropdownMenu`, `Select`, `Toggle`, `Checkbox`, `CheckboxGroup`, `Progress`, `CircularProgress`, `Slider`, `Tooltip`
+- Application components: `Modal`, `Chart`, `Pagination`, `Messaging`, `DataTable`, `Tabs`, `Breadcrumb`, `Alert`, `Toast`, `DatePicker`, `Calendar`, `FileTypeIcon`, `FileUpload`
+- Full TypeScript type definitions
+- Tailwind CSS 4 theme token system with light/dark mode support
+- Three built-in themes: Rosewood, Botanica, Inkwell

package/README.md

@@ -1,91 +1,91 @@
-# PixelPlay UI
-
-> A scalable React component library with production-ready components, layouts, and themes for SaaS products.
-
-Built by [Dennis Isaac](https://dennisisaac.com) · [Live Docs](https://dennisisaac.com/ui-kit)
-
----
-
-## Installation
-
-```bash
-npm install pixelplay
-```
-
-```bash
-yarn add pixelplay
-```
-
-```bash
-pnpm add pixelplay
-```
-
-## Requirements
-
-- React 18+
-- Tailwind CSS 4+
-- TypeScript 5+ (recommended)
-
-## Quick Start
-
-```tsx
-import { Button, Badge, Avatar, Input } from "pixelplay";
-
-export function MyComponent() {
-  return (
-    <div>
-      <Avatar name="Dennis Isaac" size="md" />
-      <Badge color="purple">New</Badge>
-      <Button color="primary" variant="solid">Get Started</Button>
-    </div>
-  );
-}
-```
-
-## Theme Setup
-
-Add the PixelPlay theme tokens to your global CSS:
-
-```css
-@import "pixelplay/styles";
-
-:root {
-  /* Override theme tokens as needed */
-  --primary: oklch(55% 0.22 264);
-}
-```
-
-## Components
-
-| Component | Description |
-|-----------|-------------|
-| `Button` | Versatile button with variants, sizes, and states |
-| `Input` | Text input with labels, validation, and add-ons |
-| `Badge` | Status and label badges with colors |
-| `Avatar` | User avatars with initials, images, and status |
-| `Card` | Content container with header, body, and footer |
-| `Toggle` | Boolean toggle switch |
-| `Checkbox` | Checkbox with variants and groups |
-| `Select` | Dropdown select with search |
-| `Slider` | Range slider with dual handles |
-| `Tooltip` | Contextual tooltips |
-| `Modal` | Dialog modals |
-| `Spinner` | Loading indicators |
-| `Tag` | Dismissable tags |
-| `Progress` | Progress bars and circular indicators |
-
-[View all components →](https://dennisisaac.com/ui-kit)
-
-## Versioning
-
-PixelPlay UI follows [Semantic Versioning](https://semver.org/):
-
-- **Patch** (`x.x.1`) — bug fixes and minor adjustments
-- **Minor** (`x.1.0`) — new components, non-breaking additions
-- **Major** (`1.0.0`) — breaking API changes
-
-See [CHANGELOG.md](./CHANGELOG.md) for the full release history.
-
-## License
-
-MIT © [Dennis Isaac](https://dennisisaac.com)
+# PixelPlay UI
+
+> A scalable React component library with production-ready components, layouts, and themes for SaaS products.
+
+Built by [Dennis Isaac](https://dennisisaac.com) · [Live Docs](https://dennisisaac.com/ui-kit)
+
+---
+
+## Installation
+
+```bash
+npm install pixelplay
+```
+
+```bash
+yarn add pixelplay
+```
+
+```bash
+pnpm add pixelplay
+```
+
+## Requirements
+
+- React 18+
+- Tailwind CSS 4+
+- TypeScript 5+ (recommended)
+
+## Quick Start
+
+```tsx
+import { Button, Badge, Avatar, Input } from "pixelplay";
+
+export function MyComponent() {
+  return (
+    <div>
+      <Avatar name="Dennis Isaac" size="md" />
+      <Badge color="purple">New</Badge>
+      <Button color="primary" variant="solid">Get Started</Button>
+    </div>
+  );
+}
+```
+
+## Theme Setup
+
+Add the PixelPlay theme tokens to your global CSS:
+
+```css
+@import "pixelplay/styles";
+
+:root {
+  /* Override theme tokens as needed */
+  --primary: oklch(55% 0.22 264);
+}
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Versatile button with variants, sizes, and states |
+| `Input` | Text input with labels, validation, and add-ons |
+| `Badge` | Status and label badges with colors |
+| `Avatar` | User avatars with initials, images, and status |
+| `Card` | Content container with header, body, and footer |
+| `Toggle` | Boolean toggle switch |
+| `Checkbox` | Checkbox with variants and groups |
+| `Select` | Dropdown select with search |
+| `Slider` | Range slider with dual handles |
+| `Tooltip` | Contextual tooltips |
+| `Modal` | Dialog modals |
+| `Spinner` | Loading indicators |
+| `Tag` | Dismissable tags |
+| `Progress` | Progress bars and circular indicators |
+
+[View all components →](https://dennisisaac.com/ui-kit)
+
+## Versioning
+
+PixelPlay UI follows [Semantic Versioning](https://semver.org/):
+
+- **Patch** (`x.x.1`) — bug fixes and minor adjustments
+- **Minor** (`x.1.0`) — new components, non-breaking additions
+- **Major** (`1.0.0`) — breaking API changes
+
+See [CHANGELOG.md](./CHANGELOG.md) for the full release history.
+
+## License
+
+MIT © [Dennis Isaac](https://dennisisaac.com)