pixelplay 1.1.1 → 1.1.4

package/CHANGELOG.md

@@ -6,6 +6,91 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ---
 
+## [1.1.4] - 2026-04-07
+
+### Added
+
+- **21 new shared/ui components**: `Accordion`, `AlertDialog`, `AspectRatio`, `Carousel`, `Collapsible`, `ContextMenu`, `Drawer`, `HoverCard`, `InputOTP`, `Kbd`, `Label`, `Menubar`, `NavigationMenu`, `Popover`, `RadioGroup`, `Resizable`, `ScrollArea`, `Separator`, `Sheet`, `Skeleton`, `ToggleGroup` - all in `shared/ui/<folder>` with full types and barrel exports
+- **21 new demo pages**: Dedicated docs pages under `/ui-kit/components/` for each new component with interactive previews and code snippets
+- **Sidebar nav entries**: All 21 new components added to the docs sidebar navigation (`DocsLayoutShell`)
+- **`InputOTP` component** (`shared/ui/input-otp`): Dedicated OTP/PIN input with grouped cells, separator support, configurable length, and auto-focus advance - replaces the previous `MegaInput` section on the Input docs page
+
+### Changed
+
+- **Color token scales**: Shifted `800`-`975` stops one step darker across all color scales (primary, error, warning, success, red, orange, amber, yellow, lime, green, emerald, teal, cyan, blueLight, blue, indigo, violet, purple, fuchsia, pink, rose) for improved dark-mode contrast
+- **Input docs page**: Removed `MegaInput` section (replaced by standalone `InputOTP` docs page), cleaned up import paths to use `pixelplay` shorthand
+- **Menubar demos**: Replaced non-existent `MenubarShortcut` import with `shortcut` prop on `MenubarItem`; `MenubarSubTrigger` auto-renders chevron icon
+- **NavigationMenu demos**: Simplified dropdown content from wide `w-[400px]` description cards to compact `w-52`/`w-80` link lists
+- **Resizable component**: Fixed multi-instance bug where module-level panel/handle counters were shared across all `ResizablePanelGroup` instances - counters now scoped per group via context
+
+### Fixed
+
+- **Sheet/Popover/Drawer/AlertDialog demos**: Added `asChild` to trigger components to prevent nested `<button>` hydration errors
+- **Demo type errors**: Replaced `variant="outline"` with `"bordered"` and `color="error"` with `"danger"` in AlertDialog, Sheet, Drawer, and Popover demo pages to match `StyleVariant`/`ColorVariant` types
+- **HoverCard**: Fixed `useRef()` calls missing required initial value for React 19 compatibility (`useRef<T>()` -> `useRef<T | undefined>(undefined)`)
+- **ScrollArea**: Same `useRef()` React 19 fix
+- **Collapsible**: Fixed `scrollHeight` ref timing issue
+- **Carousel**: Fixed vertical sizing
+- **ContextMenu**: Fixed missing exports and incorrect API usage in demos
+- **Drawer**: Fixed nested button hydration error and improved demo content
+- **AspectRatio**: Fixed broken demo images
+
+---
+
+## [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

package/dist/index.js

@@ -956,10 +956,10 @@ var SIZE_MAP = {
     checkbox: "h-3.5 w-3.5"
   },
   lg: {
-    outer: "gap-2 rounded-md px-3 py-1.5",
-    text: "text-sm font-medium leading-5",
+    outer: "gap-2 rounded-lg px-3.5 py-1.5",
+    text: "text-base font-medium leading-6",
     iconWrapper: "h-5 w-5",
-    dot: "h-2 w-2",
+    dot: "h-2.5 w-2.5",
     dismissSize: 14,
     checkbox: "h-4 w-4"
   }
@@ -1051,7 +1051,7 @@ var Card = import_react5.default.forwardRef(
       className,
       isPressable = false,
       isBlurred = false,
-      shadow = "md",
+      shadow = "xs",
       radius = "lg",
       fullWidth = false,
       onClick
@@ -2188,6 +2188,7 @@ function Toggle({
         !isChecked && !isDisabled && "hover:bg-[var(--surface-container-high)]",
         "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--primary-container)]",
         isDisabled ? "cursor-not-allowed" : "cursor-pointer",
+        size === "sm" ? "before:content-[''] before:absolute before:-inset-[10px]" : "before:content-[''] before:absolute before:-inset-3",
         !label && !description && className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2363,7 +2364,10 @@ function Checkbox({
         onChange: handleChange,
         disabled: isDisabled,
         "aria-checked": indeterminate ? "mixed" : isChecked,
-        className: "peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+        className: cn(
+          "peer absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+          size === "sm" ? "min-h-10 min-w-10" : "min-h-12 min-w-12"
+        )
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -22504,10 +22508,10 @@ var colors = {
     500: "#9E77ED",
     600: "#7F56D9",
     700: "#6941C6",
-    800: "#53389E",
-    900: "#42307D",
-    950: "#26145A",
-    975: "#160C34"
+    800: "#42307D",
+    900: "#26145A",
+    950: "#160C34",
+    975: "#0B061A"
   },
   error: {
     25: "#FFFBFA",
@@ -22519,10 +22523,10 @@ var colors = {
     500: "#F04438",
     600: "#D92D20",
     700: "#B42318",
-    800: "#912018",
-    900: "#7A271A",
-    950: "#4C1108",
-    975: "#2B0904"
+    800: "#7A271A",
+    900: "#4C1108",
+    950: "#2B0904",
+    975: "#160502"
   },
   warning: {
     25: "#FFFCF5",
@@ -22534,10 +22538,10 @@ var colors = {
     500: "#F79009",
     600: "#DC6803",
     700: "#B54708",
-    800: "#93370D",
-    900: "#7A2E0E",
-    950: "#491A06",
-    975: "#291003"
+    800: "#7A2E0E",
+    900: "#491A06",
+    950: "#291003",
+    975: "#150802"
   },
   success: {
     25: "#F6FEF9",
@@ -22549,10 +22553,10 @@ var colors = {
     500: "#12B76A",
     600: "#039855",
     700: "#027A48",
-    800: "#05603A",
-    900: "#054F31",
-    950: "#03301E",
-    975: "#021C11"
+    800: "#054F31",
+    900: "#03301E",
+    950: "#021C11",
+    975: "#010E09"
   },
   // ── Neutrals ──────────────────────────────────────────────────────────────
   gray: {
@@ -22626,10 +22630,10 @@ var colors = {
     500: "#EF4444",
     600: "#DC2626",
     700: "#B91C1C",
-    800: "#991B1B",
-    900: "#7F1D1D",
-    950: "#4C1111",
-    975: "#2B0909"
+    800: "#7F1D1D",
+    900: "#4C1111",
+    950: "#2B0909",
+    975: "#160505"
   },
   orange: {
     25: "#FFFAF5",
@@ -22641,10 +22645,10 @@ var colors = {
     500: "#FB6514",
     600: "#EC4A0A",
     700: "#C4320A",
-    800: "#9C2A10",
-    900: "#7E2410",
-    950: "#4C1509",
-    975: "#2B0C05"
+    800: "#7E2410",
+    900: "#4C1509",
+    950: "#2B0C05",
+    975: "#160603"
   },
   amber: {
     25: "#FFFDF5",
@@ -22656,10 +22660,10 @@ var colors = {
     500: "#F59E0B",
     600: "#D97706",
     700: "#B45309",
-    800: "#92400E",
-    900: "#78350F",
-    950: "#471E07",
-    975: "#280F03"
+    800: "#78350F",
+    900: "#471E07",
+    950: "#280F03",
+    975: "#140802"
   },
   yellow: {
     25: "#FEFEF2",
@@ -22671,10 +22675,10 @@ var colors = {
     500: "#EAB308",
     600: "#CA8A04",
     700: "#A16207",
-    800: "#854D0E",
-    900: "#713F12",
-    950: "#44250A",
-    975: "#261505"
+    800: "#713F12",
+    900: "#44250A",
+    950: "#261505",
+    975: "#130B03"
   },
   // ── Greens ────────────────────────────────────────────────────────────────
   lime: {
@@ -22687,10 +22691,10 @@ var colors = {
     500: "#84CC16",
     600: "#65A30D",
     700: "#4D7C0F",
-    800: "#3F6212",
-    900: "#365314",
-    950: "#20320C",
-    975: "#121C06"
+    800: "#365314",
+    900: "#20320C",
+    950: "#121C06",
+    975: "#090E03"
   },
   green: {
     25: "#F2FDF5",
@@ -22702,10 +22706,10 @@ var colors = {
     500: "#22C55E",
     600: "#16A34A",
     700: "#15803D",
-    800: "#166534",
-    900: "#14532D",
-    950: "#0C321B",
-    975: "#061C0F"
+    800: "#14532D",
+    900: "#0C321B",
+    950: "#061C0F",
+    975: "#030E08"
   },
   emerald: {
     25: "#F3FDF8",
@@ -22717,10 +22721,10 @@ var colors = {
     500: "#10B981",
     600: "#059669",
     700: "#047857",
-    800: "#065F46",
-    900: "#064E3B",
-    950: "#032F23",
-    975: "#021A13"
+    800: "#064E3B",
+    900: "#032F23",
+    950: "#021A13",
+    975: "#010D0A"
   },
   teal: {
     25: "#F0FCFB",
@@ -22732,10 +22736,10 @@ var colors = {
     500: "#14B8A6",
     600: "#0D9488",
     700: "#0F766E",
-    800: "#115E59",
-    900: "#134E4A",
-    950: "#0A302E",
-    975: "#061C1A"
+    800: "#134E4A",
+    900: "#0A302E",
+    950: "#061C1A",
+    975: "#030E0D"
   },
   // ── Blues ─────────────────────────────────────────────────────────────────
   cyan: {
@@ -22748,10 +22752,10 @@ var colors = {
     500: "#06B6D4",
     600: "#0891B2",
     700: "#0E7490",
-    800: "#155E75",
-    900: "#164E63",
-    950: "#0C2F3C",
-    975: "#071A22"
+    800: "#164E63",
+    900: "#0C2F3C",
+    950: "#071A22",
+    975: "#040D11"
   },
   blueLight: {
     25: "#F5FBFF",
@@ -22763,10 +22767,10 @@ var colors = {
     500: "#0BA5EC",
     600: "#0086C9",
     700: "#026AA2",
-    800: "#065986",
-    900: "#0B4A6F",
-    950: "#062C43",
-    975: "#031826"
+    800: "#0B4A6F",
+    900: "#062C43",
+    950: "#031826",
+    975: "#020C13"
   },
   blue: {
     25: "#F5FAFF",
@@ -22778,10 +22782,10 @@ var colors = {
     500: "#2E90FA",
     600: "#1570EF",
     700: "#175CD3",
-    800: "#1849A9",
-    900: "#194185",
-    950: "#0E2669",
-    975: "#08153B"
+    800: "#194185",
+    900: "#0E2669",
+    950: "#08153B",
+    975: "#040B1E"
   },
   blueGray: {
     25: "#FCFCFD",
@@ -22809,10 +22813,10 @@ var colors = {
     500: "#6172F3",
     600: "#444CE7",
     700: "#3538CD",
-    800: "#2D31A6",
-    900: "#2D3282",
-    950: "#1B1F52",
-    975: "#10122F"
+    800: "#2D3282",
+    900: "#1B1F52",
+    950: "#10122F",
+    975: "#080918"
   },
   violet: {
     25: "#FAFAFF",
@@ -22824,10 +22828,10 @@ var colors = {
     500: "#8B5CF6",
     600: "#7C3AED",
     700: "#6D28D9",
-    800: "#5B21B6",
-    900: "#4C1D95",
-    950: "#2D1159",
-    975: "#190932"
+    800: "#4C1D95",
+    900: "#2D1159",
+    950: "#190932",
+    975: "#0D0519"
   },
   purple: {
     25: "#FAFAFF",
@@ -22839,10 +22843,10 @@ var colors = {
     500: "#7A5AF8",
     600: "#6938EF",
     700: "#5925DC",
-    800: "#4A1FB8",
-    900: "#3E1C96",
-    950: "#25105A",
-    975: "#140932"
+    800: "#3E1C96",
+    900: "#25105A",
+    950: "#140932",
+    975: "#0A0519"
   },
   fuchsia: {
     25: "#FEF8FF",
@@ -22854,10 +22858,10 @@ var colors = {
     500: "#D946EF",
     600: "#C026D3",
     700: "#A21CAF",
-    800: "#86198F",
-    900: "#701A75",
-    950: "#430F46",
-    975: "#250827"
+    800: "#701A75",
+    900: "#430F46",
+    950: "#250827",
+    975: "#130414"
   },
   pink: {
     25: "#FEF6FB",
@@ -22869,10 +22873,10 @@ var colors = {
     500: "#EE46BC",
     600: "#DD2590",
     700: "#C11574",
-    800: "#9E165F",
-    900: "#851651",
-    950: "#4F0C30",
-    975: "#2C071A"
+    800: "#851651",
+    900: "#4F0C30",
+    950: "#2C071A",
+    975: "#16040D"
   },
   rose: {
     25: "#FFF5F6",
@@ -22884,10 +22888,10 @@ var colors = {
     500: "#F63D68",
     600: "#E31B54",
     700: "#C01048",
-    800: "#A11043",
-    900: "#89123E",
-    950: "#520A25",
-    975: "#2E0514"
+    800: "#89123E",
+    900: "#520A25",
+    950: "#2E0514",
+    975: "#17030A"
   }
 };
 var textScale = {