pixelplay 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -6,6 +6,60 @@ 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

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)(