pixelplay 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -6,7 +6,143 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ---
 
-## [1.2.0] — 2026-04-03
+## [1.2.1] — 2026-04-21
+
+### Added
+
+- **Animation wired to `Alert`**: Enter/exit driven by the active preset's `alert` slice.
+- **Animation wired to `Badge`**: Wrapped in `m.span` with `initial`/`animate`/`exit` from the `badge` preset slice. Supports `AnimatePresence` exit.
+- **Animation wired to `ButtonGroupItem`**: Hover and tap states driven by the `button` preset slice.
+- **Animation wired to `Carousel`**: Slide transitions migrated from CSS `transition-transform` to a Framer Motion `animate` (x/y) driven by the `carousel.slide.transition` preset slice.
+- **Animation wired to `DataTable` rows**: Row `whileHover`/`transition` driven by the `dataTable.row` preset slice.
+- **Animation wired to `DropdownMenu` and `DropdownMenuItem`**: Menu open/close (`initial`/`animate`/`exit`) and item hover driven by `dropdown.menu` and `dropdown.item` preset slices.
+- **Animation wired to `EmptyState`**: Container enter animated via the `emptyState.container` preset slice.
+- **Animation wired to `FileUpload` dropzone**: Dropzone `whileHover` driven by the `fileUpload.dropzone` preset slice.
+- **Animation wired to `Input` and `Textarea`**: Outer border wrappers converted to `m.div`. Hover slant and focus scale driven by the `input.focus` preset slice.
+- **Animation wired to `Menubar`**: `MenubarContent` and `MenubarSubContent` wrapped with `AnimatePresence`; enter/exit driven by `menubar.menu` preset slice.
+- **Animation wired to `MessageReaction`**: Hover/tap driven by the `button` preset slice.
+- **Animation wired to `ChatMessage`**: Message bubble container enter animated via the `messaging.bubble` preset slice.
+- **Animation wired to `NavigationMenu`**: `NavigationMenuContent` wrapped with `AnimatePresence`; enter/exit driven by `navigationMenu.submenu` preset slice.
+- **Animation wired to `RadioGroup` dot**: Selected dot wrapped with `AnimatePresence`; enter/exit driven by `radio.dot` preset slice.
+- **Animation wired to `Slider` thumb**: Thumb `whileHover`/`whileTap` driven by the `slider.thumb` preset slice.
+- **Animation wired to `Tag`**: Tag and dismiss button wrapped with `m.span`/`m.button`; tag enter/exit driven by `tag` preset, dismiss driven by `button` preset.
+- **Animation wired to `Tooltip`**: Enter/exit driven by the `tooltip` preset slice. Playful preset `rotate` values are mirrored by placement (right-side placements get a positive sign, left/center get negative) via a `rotationSign` helper.
+
+### Changed
+
+- **`ButtonGroup` / `ButtonGroupItem` token colours**: Replaced all raw `zinc-*`/`gray-*`/`neutral-*` Tailwind scales with `var(--*)` CSS custom property tokens (`--surface`, `--surface-container-*`, `--on-surface`, `--on-surface-variant`, `--outline-variant`).
+- **`SidebarNavDivider`** (`widgets/sidebar-nav`): Replaced raw `<hr>` with the `Separator` shared component.
+- **`SidebarNavSection` title colour**: Changed from `--on-surface-variant` to `--on-surface`.
+- **`DesignThemeContext` personality persistence**: Personality override now written to `localStorage` and restored on mount. Clearing a built-in theme also removes the personality `data-` attribute and the stored personality key. Personality state is read via `useSyncExternalStore` so iframe contexts stay in sync.
+- **`build-custom-theme.ts`**: Generated custom theme object now includes a `personality` field derived from `input.personality`.
+
+### Fixed
+
+- **Slider thumb scale standardised across presets**: All five personalities now use `scale: 1.1` on hover and `scale: 1.3` on tap. Previous values were inconsistent (sharp: 1.05/0.95, balanced: 1.2/0.9, soft: 1.3/0.85, subtle: whileTap 0.92).
+- **Playful preset — button**: Reduced hover scale (1.06 → 1.02) and tap scale (0.92 → 0.97) to prevent overly large movement on small buttons.
+- **Playful preset — tooltip**: Tooltip stays tilted while visible (`animate: { rotate: -3 }`) instead of snapping back to 0, reinforcing the playful character.
+- **Playful preset — tag**: Added `initial`/`animate` enter states (`scale: 0.8, rotate: -3` → `scale: 1, rotate: 0`) so tags animate in, not just out.
+- **Playful preset — select / dropdown / menubar menus**: Added a `rotate` component to menu open/close (`-2` initial, `0` animate, `+1` exit) for a subtle 2D slant alongside the existing 3D `rotateX`.
+- **Playful preset — select / dropdown items**: Added `rotate: 0.5` to `whileHover` for a micro-tilt on item highlight.
+- **Playful preset — fileUpload dropzone**: Increased `whileHover` rotation from `0.5` to `1.5` for a more pronounced tilt.
+- **DataTable horizontal scrollbar**: Row hover animation previously applied `x: 3` which extended the painted bounds beyond the table width. Removed the `x` transform; only `backgroundColor` is now applied on hover. (`overflow: clip` on `<tbody>`/`<tr>` is ignored by browsers.)
+- **`Card.CardBody`**: Removed `overflow-y-auto` which was causing unintended internal scroll on card body content.
+
+---
+
+## [1.2.0] — 2026-04-21
+
+### Added
+
+- **Animation personality presets**: Five distinct motion personalities — `sharp` (mechanical, fast tweens, no overshoot), `subtle` (restrained, corporate polish), `balanced` (dependable spring, moderate bounce), `soft` (slow, floaty, luxurious with blur), and `playful` (bouncy springs, 3D tilts, rotations). Each personality applies cohesive motion defaults across all animated components. A `reducedMotionPreset` is also included as an automatic fallback when `prefers-reduced-motion` is active.
+- **Card 3D perspective animations**: Pressable `Card` components now animate with `whileHover` and `whileTap` motion states driven by the active personality preset. A `perspective: 1000` style context is applied to pressable cards so playful-preset `rotateX`/`rotateY` tilts render correctly.
+- **Progress animated fill**: The `ProgressBar` fill element now uses a Framer Motion `animate={{ width }}` transition, driven by the active personality preset's indicator transition config.
+
+### Fixed
+
+- **Accordion/Collapsible animation**: Content enter/exit animations now correctly read from the `content` slice of the animation preset rather than the flat preset root.
+- **Drawer/Sheet animation**: Overlay and panel transitions now correctly use `overlay.transition` and `content.transition` slices from the preset.
+
+---
+
+## [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
 
@@ -38,6 +174,36 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ---
 
+## [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

package/dist/index.d.mts

@@ -1,7 +1,10 @@
-import React$1, { CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+import React$1, { CSSProperties, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassValue } from 'clsx';
 
+/** Personality presets — combined radius + animation behavior */
+type PersonalityPreset = "sharp" | "subtle" | "balanced" | "soft" | "playful";
 /** Common size scale used across all components */
 type SizeScale = "sm" | "md" | "lg";
 /** Color intent variants */
@@ -19,7 +22,7 @@ interface BaseComponentProps {
     style?: CSSProperties;
 }
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends HTMLMotionProps<"button"> {
     /** Visual color intent */
     color?: ColorVariant;
     /** Visual style variant */
@@ -42,7 +45,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     isIconOnly?: boolean;
 }
 
-declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface ButtonGroupProps {
     children: ReactNode;
@@ -62,7 +65,7 @@ interface ButtonGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 declare function ButtonGroup({ children, className }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
-declare function ButtonGroupItem({ children, startContent, isIconOnly, isSelected, isDisabled, className, onClick, ...props }: ButtonGroupItemProps): react_jsx_runtime.JSX.Element;
+declare function ButtonGroupItem({ children, startContent, isIconOnly, isSelected, isDisabled, className, onClick, onFocus, onBlur, type, form, name, value, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-expanded": ariaExpanded, id, tabIndex, }: ButtonGroupItemProps): react_jsx_runtime.JSX.Element;
 
 type InputVariant = "bordered" | "flat" | "faded" | "underlined";
 type TextareaResize = "none" | "vertical" | "horizontal" | "both";
@@ -204,7 +207,7 @@ declare namespace Tag {
     var displayName: string;
 }
 
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
+interface CardProps extends HTMLMotionProps<"div"> {
     /** Makes the entire card a pressable/clickable surface */
     isPressable?: boolean;
     /** Removes default shadow */
@@ -223,7 +226,7 @@ interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
 interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
 
-declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Card: React$1.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardBody: React$1.ForwardRefExoticComponent<CardBodyProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -762,7 +765,7 @@ interface SparklineChartProps {
     className?: string;
 }
 
-declare function LineChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, showArea, curved, stacked, yAxisLabel, xAxisLabel, className, }: LineChartProps): react_jsx_runtime.JSX.Element;
+declare function LineChart({ data, series: seriesRaw, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, showArea, curved, stacked, yAxisLabel, xAxisLabel, className, }: LineChartProps): react_jsx_runtime.JSX.Element;
 
 declare function BarChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, stacked, orientation, yAxisLabel, xAxisLabel, className, }: BarChartProps): react_jsx_runtime.JSX.Element;
 
@@ -1505,6 +1508,7 @@ type ThemeTokens = {
 };
 declare const lightTheme: ThemeTokens;
 declare const darkTheme: ThemeTokens;
+
 /**
  * Generates a `<style>` block with CSS custom properties for every design
  * theme × light/dark mode. The first theme (inkwell) is output as `:root` / `.dark`.
@@ -1515,4 +1519,4 @@ declare function generateThemeCSS(): string;
 
 declare const PIXELPLAY_VERSION = "1.0.3";
 
-export { type AccountDropdownItem, ActionDropdownCell, type ActionDropdownCellProps, ActionIconsCell, type ActionIconsCellProps, Alert, type AlertColor, type AlertIconStyle, type AlertLayout, type AlertProps, type AttachmentFileType, Avatar, AvatarCell, type AvatarCellProps, type AvatarColor, AvatarGroupCell, type AvatarGroupCellProps, type AvatarGroupItem, type AvatarProps, Badge, BadgeCell, type BadgeCellProps, type BadgeColor, BadgeGroup, type BadgeGroupColor, type BadgeGroupProps, type BadgeGroupSize, type BadgeItem, type BadgeProps, type BadgeSize, BadgesCell, BarChart, type BarChartProps, type BaseChartProps, type BaseComponentProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CarouselArrow, type CarouselArrowColor, type CarouselArrowProps, type CarouselArrowSize, type ChartDataPoint, type ChartSeries, type ChartSize, ChatMessage, type ChatMessageProps, Checkbox, CheckboxCard, type CheckboxCardOption, type CheckboxCardProps, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type ColorVariant, type CountryCode, CountryFlag, type CountryFlagProps, type CountryFlagShape, type CountryFlagSize, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, type DatePickerValue, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, DonutChart, type DonutChartProps, DropdownMenu, DropdownMenuAvatarHeader, type DropdownMenuAvatarHeaderProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, type EventColor, type FeatureIconColor, type FileType, FileTypeCell, type FileTypeCellProps, FileTypeIcon, type FileTypeIconProps, FileUpload, type FileUploadProps, type FileUploadStatus, type FileUploadVariant, type IndicatorColor, type IndicatorShape, type IndicatorSize, Input, type InputProps, type InputVariant, type LegendPosition, LineChart, type LineChartProps, MegaInput, type MegaInputProps, type MessageAttachment, MessageReaction, type MessageReactionProps, type MessageSide, type MessageType, Modal, type ModalAction, type ModalActionsLayout, type ModalAlign, type ModalAvatarGroupItem, type ModalCheckboxConfig, type ModalLayout, type ModalPosition, type ModalProps, type ModalSize, type ModalUserAvatar, PIXELPLAY_VERSION, Pagination, PaginationIndicator, type PaginationIndicatorProps, type PaginationPageShape, type PaginationProps, type PaginationVariant, ProgressBar, type ProgressBarProps, ProgressCell, type ProgressLabelPlacement, type ProgressSize, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, type RadiusVariant, RangeSlider, type RangeSliderProps, ScatterChart, type ScatterChartProps, type ScatterDataPoint, type ScatterSeries, Select, type SelectOption, type SelectProps, type SizeScale, type SliderLabelPlacement, SocialButton, type SocialButtonProps, type SocialButtonStyle, type SocialPlatform, SparklineChart, type SparklineChartProps, Spinner, type SpinnerProps, StoreButton, type StoreButtonProps, type StoreButtonSize, type StoreButtonTheme, type StorePlatform, type StyleVariant, type TabItem, Tabs, type TabsProps, Tag, type TagProps, type TagSize, type TextAction, TextActionCell, TextCell, type TextCellProps, Textarea, type TextareaProps, type TextareaResize, type ThemeTokens, type ToastColor, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipColor, type TooltipPlacement, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, type UploadFile, cn, darkTheme, generateThemeCSS, getFileExtColor, getFileExtLabel, lightTheme, useToast };
+export { type AccountDropdownItem, ActionDropdownCell, type ActionDropdownCellProps, ActionIconsCell, type ActionIconsCellProps, Alert, type AlertColor, type AlertIconStyle, type AlertLayout, type AlertProps, type AttachmentFileType, Avatar, AvatarCell, type AvatarCellProps, type AvatarColor, AvatarGroupCell, type AvatarGroupCellProps, type AvatarGroupItem, type AvatarProps, Badge, BadgeCell, type BadgeCellProps, type BadgeColor, BadgeGroup, type BadgeGroupColor, type BadgeGroupProps, type BadgeGroupSize, type BadgeItem, type BadgeProps, type BadgeSize, BadgesCell, BarChart, type BarChartProps, type BaseChartProps, type BaseComponentProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CarouselArrow, type CarouselArrowColor, type CarouselArrowProps, type CarouselArrowSize, type ChartDataPoint, type ChartSeries, type ChartSize, ChatMessage, type ChatMessageProps, Checkbox, CheckboxCard, type CheckboxCardOption, type CheckboxCardProps, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type ColorVariant, type CountryCode, CountryFlag, type CountryFlagProps, type CountryFlagShape, type CountryFlagSize, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, type DatePickerValue, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, DonutChart, type DonutChartProps, DropdownMenu, DropdownMenuAvatarHeader, type DropdownMenuAvatarHeaderProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, type EventColor, type FeatureIconColor, type FileType, FileTypeCell, type FileTypeCellProps, FileTypeIcon, type FileTypeIconProps, FileUpload, type FileUploadProps, type FileUploadStatus, type FileUploadVariant, type IndicatorColor, type IndicatorShape, type IndicatorSize, Input, type InputProps, type InputVariant, type LegendPosition, LineChart, type LineChartProps, MegaInput, type MegaInputProps, type MessageAttachment, MessageReaction, type MessageReactionProps, type MessageSide, type MessageType, Modal, type ModalAction, type ModalActionsLayout, type ModalAlign, type ModalAvatarGroupItem, type ModalCheckboxConfig, type ModalLayout, type ModalPosition, type ModalProps, type ModalSize, type ModalUserAvatar, PIXELPLAY_VERSION, Pagination, PaginationIndicator, type PaginationIndicatorProps, type PaginationPageShape, type PaginationProps, type PaginationVariant, type PersonalityPreset, ProgressBar, type ProgressBarProps, ProgressCell, type ProgressLabelPlacement, type ProgressSize, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, type RadiusVariant, RangeSlider, type RangeSliderProps, ScatterChart, type ScatterChartProps, type ScatterDataPoint, type ScatterSeries, Select, type SelectOption, type SelectProps, type SizeScale, type SliderLabelPlacement, SocialButton, type SocialButtonProps, type SocialButtonStyle, type SocialPlatform, SparklineChart, type SparklineChartProps, Spinner, type SpinnerProps, StoreButton, type StoreButtonProps, type StoreButtonSize, type StoreButtonTheme, type StorePlatform, type StyleVariant, type TabItem, Tabs, type TabsProps, Tag, type TagProps, type TagSize, type TextAction, TextActionCell, TextCell, type TextCellProps, Textarea, type TextareaProps, type TextareaResize, type ThemeTokens, type ToastColor, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipColor, type TooltipPlacement, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, type UploadFile, cn, darkTheme, generateThemeCSS, getFileExtColor, getFileExtLabel, lightTheme, useToast };

package/dist/index.d.ts

@@ -1,7 +1,10 @@
-import React$1, { CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+import React$1, { CSSProperties, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassValue } from 'clsx';
 
+/** Personality presets — combined radius + animation behavior */
+type PersonalityPreset = "sharp" | "subtle" | "balanced" | "soft" | "playful";
 /** Common size scale used across all components */
 type SizeScale = "sm" | "md" | "lg";
 /** Color intent variants */
@@ -19,7 +22,7 @@ interface BaseComponentProps {
     style?: CSSProperties;
 }
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends HTMLMotionProps<"button"> {
     /** Visual color intent */
     color?: ColorVariant;
     /** Visual style variant */
@@ -42,7 +45,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     isIconOnly?: boolean;
 }
 
-declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface ButtonGroupProps {
     children: ReactNode;
@@ -62,7 +65,7 @@ interface ButtonGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 declare function ButtonGroup({ children, className }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
-declare function ButtonGroupItem({ children, startContent, isIconOnly, isSelected, isDisabled, className, onClick, ...props }: ButtonGroupItemProps): react_jsx_runtime.JSX.Element;
+declare function ButtonGroupItem({ children, startContent, isIconOnly, isSelected, isDisabled, className, onClick, onFocus, onBlur, type, form, name, value, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-expanded": ariaExpanded, id, tabIndex, }: ButtonGroupItemProps): react_jsx_runtime.JSX.Element;
 
 type InputVariant = "bordered" | "flat" | "faded" | "underlined";
 type TextareaResize = "none" | "vertical" | "horizontal" | "both";
@@ -204,7 +207,7 @@ declare namespace Tag {
     var displayName: string;
 }
 
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
+interface CardProps extends HTMLMotionProps<"div"> {
     /** Makes the entire card a pressable/clickable surface */
     isPressable?: boolean;
     /** Removes default shadow */
@@ -223,7 +226,7 @@ interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
 interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
 
-declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Card: React$1.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardBody: React$1.ForwardRefExoticComponent<CardBodyProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -762,7 +765,7 @@ interface SparklineChartProps {
     className?: string;
 }
 
-declare function LineChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, showArea, curved, stacked, yAxisLabel, xAxisLabel, className, }: LineChartProps): react_jsx_runtime.JSX.Element;
+declare function LineChart({ data, series: seriesRaw, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, showArea, curved, stacked, yAxisLabel, xAxisLabel, className, }: LineChartProps): react_jsx_runtime.JSX.Element;
 
 declare function BarChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, stacked, orientation, yAxisLabel, xAxisLabel, className, }: BarChartProps): react_jsx_runtime.JSX.Element;
 
@@ -1505,6 +1508,7 @@ type ThemeTokens = {
 };
 declare const lightTheme: ThemeTokens;
 declare const darkTheme: ThemeTokens;
+
 /**
  * Generates a `<style>` block with CSS custom properties for every design
  * theme × light/dark mode. The first theme (inkwell) is output as `:root` / `.dark`.
@@ -1515,4 +1519,4 @@ declare function generateThemeCSS(): string;
 
 declare const PIXELPLAY_VERSION = "1.0.3";
 
-export { type AccountDropdownItem, ActionDropdownCell, type ActionDropdownCellProps, ActionIconsCell, type ActionIconsCellProps, Alert, type AlertColor, type AlertIconStyle, type AlertLayout, type AlertProps, type AttachmentFileType, Avatar, AvatarCell, type AvatarCellProps, type AvatarColor, AvatarGroupCell, type AvatarGroupCellProps, type AvatarGroupItem, type AvatarProps, Badge, BadgeCell, type BadgeCellProps, type BadgeColor, BadgeGroup, type BadgeGroupColor, type BadgeGroupProps, type BadgeGroupSize, type BadgeItem, type BadgeProps, type BadgeSize, BadgesCell, BarChart, type BarChartProps, type BaseChartProps, type BaseComponentProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CarouselArrow, type CarouselArrowColor, type CarouselArrowProps, type CarouselArrowSize, type ChartDataPoint, type ChartSeries, type ChartSize, ChatMessage, type ChatMessageProps, Checkbox, CheckboxCard, type CheckboxCardOption, type CheckboxCardProps, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type ColorVariant, type CountryCode, CountryFlag, type CountryFlagProps, type CountryFlagShape, type CountryFlagSize, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, type DatePickerValue, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, DonutChart, type DonutChartProps, DropdownMenu, DropdownMenuAvatarHeader, type DropdownMenuAvatarHeaderProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, type EventColor, type FeatureIconColor, type FileType, FileTypeCell, type FileTypeCellProps, FileTypeIcon, type FileTypeIconProps, FileUpload, type FileUploadProps, type FileUploadStatus, type FileUploadVariant, type IndicatorColor, type IndicatorShape, type IndicatorSize, Input, type InputProps, type InputVariant, type LegendPosition, LineChart, type LineChartProps, MegaInput, type MegaInputProps, type MessageAttachment, MessageReaction, type MessageReactionProps, type MessageSide, type MessageType, Modal, type ModalAction, type ModalActionsLayout, type ModalAlign, type ModalAvatarGroupItem, type ModalCheckboxConfig, type ModalLayout, type ModalPosition, type ModalProps, type ModalSize, type ModalUserAvatar, PIXELPLAY_VERSION, Pagination, PaginationIndicator, type PaginationIndicatorProps, type PaginationPageShape, type PaginationProps, type PaginationVariant, ProgressBar, type ProgressBarProps, ProgressCell, type ProgressLabelPlacement, type ProgressSize, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, type RadiusVariant, RangeSlider, type RangeSliderProps, ScatterChart, type ScatterChartProps, type ScatterDataPoint, type ScatterSeries, Select, type SelectOption, type SelectProps, type SizeScale, type SliderLabelPlacement, SocialButton, type SocialButtonProps, type SocialButtonStyle, type SocialPlatform, SparklineChart, type SparklineChartProps, Spinner, type SpinnerProps, StoreButton, type StoreButtonProps, type StoreButtonSize, type StoreButtonTheme, type StorePlatform, type StyleVariant, type TabItem, Tabs, type TabsProps, Tag, type TagProps, type TagSize, type TextAction, TextActionCell, TextCell, type TextCellProps, Textarea, type TextareaProps, type TextareaResize, type ThemeTokens, type ToastColor, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipColor, type TooltipPlacement, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, type UploadFile, cn, darkTheme, generateThemeCSS, getFileExtColor, getFileExtLabel, lightTheme, useToast };
+export { type AccountDropdownItem, ActionDropdownCell, type ActionDropdownCellProps, ActionIconsCell, type ActionIconsCellProps, Alert, type AlertColor, type AlertIconStyle, type AlertLayout, type AlertProps, type AttachmentFileType, Avatar, AvatarCell, type AvatarCellProps, type AvatarColor, AvatarGroupCell, type AvatarGroupCellProps, type AvatarGroupItem, type AvatarProps, Badge, BadgeCell, type BadgeCellProps, type BadgeColor, BadgeGroup, type BadgeGroupColor, type BadgeGroupProps, type BadgeGroupSize, type BadgeItem, type BadgeProps, type BadgeSize, BadgesCell, BarChart, type BarChartProps, type BaseChartProps, type BaseComponentProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CarouselArrow, type CarouselArrowColor, type CarouselArrowProps, type CarouselArrowSize, type ChartDataPoint, type ChartSeries, type ChartSize, ChatMessage, type ChatMessageProps, Checkbox, CheckboxCard, type CheckboxCardOption, type CheckboxCardProps, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type ColorVariant, type CountryCode, CountryFlag, type CountryFlagProps, type CountryFlagShape, type CountryFlagSize, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, type DatePickerValue, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, DonutChart, type DonutChartProps, DropdownMenu, DropdownMenuAvatarHeader, type DropdownMenuAvatarHeaderProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, type EventColor, type FeatureIconColor, type FileType, FileTypeCell, type FileTypeCellProps, FileTypeIcon, type FileTypeIconProps, FileUpload, type FileUploadProps, type FileUploadStatus, type FileUploadVariant, type IndicatorColor, type IndicatorShape, type IndicatorSize, Input, type InputProps, type InputVariant, type LegendPosition, LineChart, type LineChartProps, MegaInput, type MegaInputProps, type MessageAttachment, MessageReaction, type MessageReactionProps, type MessageSide, type MessageType, Modal, type ModalAction, type ModalActionsLayout, type ModalAlign, type ModalAvatarGroupItem, type ModalCheckboxConfig, type ModalLayout, type ModalPosition, type ModalProps, type ModalSize, type ModalUserAvatar, PIXELPLAY_VERSION, Pagination, PaginationIndicator, type PaginationIndicatorProps, type PaginationPageShape, type PaginationProps, type PaginationVariant, type PersonalityPreset, ProgressBar, type ProgressBarProps, ProgressCell, type ProgressLabelPlacement, type ProgressSize, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, type RadiusVariant, RangeSlider, type RangeSliderProps, ScatterChart, type ScatterChartProps, type ScatterDataPoint, type ScatterSeries, Select, type SelectOption, type SelectProps, type SizeScale, type SliderLabelPlacement, SocialButton, type SocialButtonProps, type SocialButtonStyle, type SocialPlatform, SparklineChart, type SparklineChartProps, Spinner, type SpinnerProps, StoreButton, type StoreButtonProps, type StoreButtonSize, type StoreButtonTheme, type StorePlatform, type StyleVariant, type TabItem, Tabs, type TabsProps, Tag, type TagProps, type TagSize, type TextAction, TextActionCell, TextCell, type TextCellProps, Textarea, type TextareaProps, type TextareaResize, type ThemeTokens, type ToastColor, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipColor, type TooltipPlacement, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, type UploadFile, cn, darkTheme, generateThemeCSS, getFileExtColor, getFileExtLabel, lightTheme, useToast };