pixelplay 1.0.13 → 1.2.0

package/CHANGELOG.md

@@ -1,61 +1,93 @@
-# 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.2.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.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)

package/dist/index.js

@@ -1989,6 +1989,7 @@ function Select({
 }) {
   const [open, setOpen] = (0, import_react12.useState)(false);
   const [search, setSearch] = (0, import_react12.useState)("");
+  const [openAbove, setOpenAbove] = (0, import_react12.useState)(false);
   const containerRef = (0, import_react12.useRef)(null);
   (0, import_react12.useEffect)(() => {
     function onOutsideClick(e) {
@@ -2000,6 +2001,21 @@ function Select({
     document.addEventListener("mousedown", onOutsideClick);
     return () => document.removeEventListener("mousedown", onOutsideClick);
   }, []);
+  const computeOpenAbove = (0, import_react12.useCallback)(() => {
+    if (!containerRef.current) return false;
+    const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const panelHeight = 280;
+    return spaceBelow < panelHeight && rect.top > spaceBelow;
+  }, []);
+  const toggleOpen = (0, import_react12.useCallback)(() => {
+    setOpen((prev) => {
+      if (!prev) {
+        setOpenAbove(computeOpenAbove());
+      }
+      return !prev;
+    });
+  }, [computeOpenAbove]);
   const selectedOption = options.find((o) => o.value === value);
   const filtered = isSearchable ? options.filter(
     (o) => o.label.toLowerCase().includes(search.toLowerCase())
@@ -2019,7 +2035,7 @@ function Select({
           {
             type: "button",
             disabled: isDisabled,
-            onClick: () => !isDisabled && setOpen((v) => !v),
+            onClick: () => !isDisabled && toggleOpen(),
             className: cn(
               "flex w-full items-center rounded-lg border transition-all",
               "bg-[var(--surface-container-lowest)] border-[var(--outline)]",
@@ -2055,7 +2071,8 @@ function Select({
           "div",
           {
             className: cn(
-              "absolute left-0 top-full z-50 mt-1 w-full overflow-hidden rounded-lg",
+              "absolute left-0 z-50 w-full overflow-hidden rounded-lg",
+              openAbove ? "bottom-full mb-1" : "top-full mt-1",
               "bg-[var(--surface-container-lowest)]",
               "shadow-[0px_4px_6px_-2px_rgba(10,13,18,0.05),0px_12px_16px_-4px_rgba(10,13,18,0.10)]",
               "outline outline-1 outline-offset-[-1px] outline-[var(--outline)]"