pixelplay 1.0.15 → 1.1.3

package/CHANGELOG.md

@@ -1,61 +1,200 @@
-# 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.3] — 2026-04-06
+
+### Added
+
+- **`SectionHeader` chat variant** (`widgets/section-header`): New `variant="chat"` - sticky header for chat detail panels with large avatar, name, status badge, action buttons, and trailing menu
+- **`InfoCard` chat-list variant** (`widgets/info-card`): New `variant="chat-list"` - scrollable conversation list panel with search input, unread indicators, avatar with online status, message preview, and timestamp
+- **`InfoCard` showcase variant** (`widgets/info-card`): New `variant="showcase"` - case-study card with image, stats grid, and link overlay (replaces `WebsiteCaseStudyCard`)
+- **`HeroSection` showcase variant** (`widgets/hero-section`): New `variant="showcase"` - case-study hero with large title, subtitle, description, stat chips, and full-bleed background image (replaces `WebsiteCaseStudyHero`)
+- **New generic widgets**: `content-section`, `text-block`, `media-section` (exports `MediaFullImage`, `MediaDualImage`, `MediaVideo`), `diagram-section`, `showcase-grid` - generic reusable widgets extracted from case-study-specific components
+- **Messaging example page** (`messaging-01`): Full chat application layout with sidebar nav, chat list (`InfoCard variant="chat-list"`), chat detail panel (`SectionHeader variant="chat"`), `ChatMessage` bubbles, typing indicator, file attachments, reactions, and day dividers
+- **Listing example pages** (`listing-03`, `listing-04`, `listing-05`): Three new listing layouts - listing-03 (team member directory table with avatar, role, and status columns), listing-04 (blog/article grid with category filters and featured post), listing-05 (team directory with search, role filters, and detailed member cards)
+- **Messaging examples docs page** (`/ui-kit/examples/messaging`): Docs page listing and previewing the messaging example
+- **Messaging nav entry**: "Email & Messaging" link added to the Examples section in the docs sidebar (`DocsLayoutShell`)
+
+### Changed
+
+- **Deprecated widget consolidation**: Removed 9 standalone widget folders (`website-case-study-hero`, `website-case-study-card`, `website-case-study-content`, `website-case-study-text-block`, `website-case-study-images`, `website-case-study-diagram`, `website-case-studies-grid`, `chat-header`, `chat-list`) - functionality merged into generic widgets and variant-based components
+- **Case study pages**: All 3 case-study pages (`digital-diagramming`, `no-code-app-builder`, `personal-finance-webapp`) updated to use new generic widgets (`HeroSection`, `ContentSection`, `TextBlock`, `MediaFullImage`, `MediaDualImage`, `MediaVideo`, `DiagramSection`)
+- **Work pages**: All 4 work pages (`core-fitness-app`, `brainstorming-app`, `gelato-glam-delivery-app`, `kish-coach`) updated to use new generic widget names
+- **Homepage**: `WebsiteCaseStudiesGrid` replaced with `ShowcaseGrid`
+- **Docs demo pages**: All case-study component docs updated to import from new widget paths
+
+---
+
+## [1.1.2] — 2026-04-06
+
+### Added
+
+- **`CompanyLogo` component** (`shared/ui/company-logo`): New shared component for company/brand marks — renders a logo image with a coloured initials fallback. Supports 5 sizes (`xs`–`xl`), two shapes (`square`/`rectangle`), 4 radius options, and 12 colour variants (including `--graphic-1` through `--graphic-8` categorical tokens). Exported from `shared/ui/index.ts`
+- **`InfoCard` widget** (`widgets/info-card`): New multi-variant card widget. Variants: `default` (section card with header/body/footer slots and optional menu button), `horizontal` (property listing card with image, star rating, amenities, and price — vertical on mobile, row at xl), `post` (blog/article card with gradient/image banner, author, tags, and social action buttons), `action` (compact pressable card with icon button and description), `stat` (icon + label + value stat card with optional footer slot)
+- **`MapEmbed` widget** (`widgets/map`): New `MapEmbed` component that wraps an `<iframe>` map embed with dark-mode support — auto-applies a CSS invert filter when no `darkSrc` is provided
+- **Listing example pages**: Two new full-page listing layouts — `listing-01` (property search results with sticky sidebar nav, filter bar, horizontal `InfoCard` listing cards, sticky map panel, and pagination) and `listing-02` (remote job board with slim icon sidebar, search/filter controls, scrollable job card list with `CompanyLogo` and `Badge`, and a sticky job detail panel)
+- **Listing examples docs page** (`/ui-kit/examples/listing`): Docs page listing and previewing both listing examples with descriptions
+- **Listing nav entry**: "Listing" link added to the Examples section in the docs sidebar (`DocsLayoutShell`)
+- **`CompanyLogo` docs page** (`/ui-kit/components/company-logo`): Full component documentation — real logos, initials fallback, sizes, shapes, and radius options; also added "Company logo" nav entry in docs sidebar
+- **`Card` docs page expanded**: New sections for Horizontal layout (`InfoCard variant="horizontal"`), Action card, Post card, Gradient header, Card grid, and Compact card patterns; also added "Card" nav entry in docs sidebar
+
+### Changed
+
+- **`Tag` lg size**: Updated typography — `text-base font-medium leading-6` (was `text-sm`), `rounded-lg` (was `rounded-md`), `px-3.5` (was `px-3`), dot `h-2.5 w-2.5` (was `h-2 w-2`)
+- **`Card` default shadow**: Changed default `shadow` prop from `"md"` to `"xs"` for a subtler card elevation
+- **`Checkbox` hit area**: Input element repositioned from `inset-0` to `top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2` with `min-h-10 min-w-10` (sm) / `min-h-12 min-w-12` for reliable 44px+ touch targets
+- **`Toggle` hit area**: Added `before:` pseudo-element inset (`-inset-[10px]` for sm, `-inset-3` for default) to expand the tap/click area to minimum touch target size
+- **`dashboards-01`**: Replaced inline `<Card>` + raw action/post markup with `InfoCard variant="action"` and `InfoCard variant="post"` widget
+- **`dashboards-04`**: Replaced manual chart card header markup with `InfoCard variant="default"` widget for all four chart sections
+- **`dashboards-05`**: Replaced manual card markup for "Active users", "How do you acquire users?", and "Channel breakdown" sections with `InfoCard variant="default"`
+- **`dashboards-06`**: Replaced local `SavingsGoalCard` sub-component and inline chart card markup with `InfoCard variant="stat"` and `InfoCard variant="default"`; `SavingsGoalCard` function removed
+- **Surface container tokens** (`build-custom-theme.ts`): Adjusted container level step sizes for both light and dark modes — `low/mid/high/highest` now each step one shade further from the base surface, giving better visual layering across container elevation levels
+- **`calendar-01` / `calendar-03` sticky header**: Removed `border-b border-[var(--outline-variant)]` from the sticky `<header>` element
+- **`calendar-02` profile page header**: Wrapped `PageHeader` in `px-2 pt-2` container; updated tab row to add `lg:pb-4` bottom padding
+- **`next.config.ts`**: Added `i.pravatar.cc` to allowed Next.js image hostnames
+
+---
+
+## [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)