pixelplay 1.1.3 → 1.1.4

package/CHANGELOG.md

@@ -6,7 +6,38 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ---
 
-## [1.1.3] — 2026-04-06
+## [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
 

package/dist/index.js

@@ -22508,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",
@@ -22523,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",
@@ -22538,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",
@@ -22553,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: {
@@ -22630,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",
@@ -22645,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",
@@ -22660,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",
@@ -22675,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: {
@@ -22691,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",
@@ -22706,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",
@@ -22721,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",
@@ -22736,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: {
@@ -22752,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",
@@ -22767,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",
@@ -22782,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",
@@ -22813,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",
@@ -22828,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",
@@ -22843,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",
@@ -22858,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",
@@ -22873,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",
@@ -22888,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 = {