pixelplay 1.1.4 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +48 -20
  2. package/dist/index.d.mts +12 -8
  3. package/dist/index.d.ts +12 -8
  4. package/dist/index.js +7857 -4645
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +7866 -4648
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/server.d.mts +9 -12
  9. package/dist/server.d.ts +9 -12
  10. package/dist/server.js +56 -36
  11. package/dist/server.js.map +1 -1
  12. package/dist/server.mjs +56 -36
  13. package/dist/server.mjs.map +1 -1
  14. package/dist/styles.css +96 -0
  15. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -6,38 +6,66 @@ This project adheres to [Semantic Versioning](https://semver.org/).
6
6
 
7
7
  ---
8
8
 
9
- ## [1.1.4] - 2026-04-07
9
+ ## [1.2.1] — 2026-04-21
10
10
 
11
11
  ### Added
12
12
 
13
- - **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
14
- - **21 new demo pages**: Dedicated docs pages under `/ui-kit/components/` for each new component with interactive previews and code snippets
15
- - **Sidebar nav entries**: All 21 new components added to the docs sidebar navigation (`DocsLayoutShell`)
16
- - **`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
13
+ - **Animation wired to `Alert`**: Enter/exit driven by the active preset's `alert` slice.
14
+ - **Animation wired to `Badge`**: Wrapped in `m.span` with `initial`/`animate`/`exit` from the `badge` preset slice. Supports `AnimatePresence` exit.
15
+ - **Animation wired to `ButtonGroupItem`**: Hover and tap states driven by the `button` preset slice.
16
+ - **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.
17
+ - **Animation wired to `DataTable` rows**: Row `whileHover`/`transition` driven by the `dataTable.row` preset slice.
18
+ - **Animation wired to `DropdownMenu` and `DropdownMenuItem`**: Menu open/close (`initial`/`animate`/`exit`) and item hover driven by `dropdown.menu` and `dropdown.item` preset slices.
19
+ - **Animation wired to `EmptyState`**: Container enter animated via the `emptyState.container` preset slice.
20
+ - **Animation wired to `FileUpload` dropzone**: Dropzone `whileHover` driven by the `fileUpload.dropzone` preset slice.
21
+ - **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.
22
+ - **Animation wired to `Menubar`**: `MenubarContent` and `MenubarSubContent` wrapped with `AnimatePresence`; enter/exit driven by `menubar.menu` preset slice.
23
+ - **Animation wired to `MessageReaction`**: Hover/tap driven by the `button` preset slice.
24
+ - **Animation wired to `ChatMessage`**: Message bubble container enter animated via the `messaging.bubble` preset slice.
25
+ - **Animation wired to `NavigationMenu`**: `NavigationMenuContent` wrapped with `AnimatePresence`; enter/exit driven by `navigationMenu.submenu` preset slice.
26
+ - **Animation wired to `RadioGroup` dot**: Selected dot wrapped with `AnimatePresence`; enter/exit driven by `radio.dot` preset slice.
27
+ - **Animation wired to `Slider` thumb**: Thumb `whileHover`/`whileTap` driven by the `slider.thumb` preset slice.
28
+ - **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.
29
+ - **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.
17
30
 
18
31
  ### Changed
19
32
 
20
- - **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
21
- - **Input docs page**: Removed `MegaInput` section (replaced by standalone `InputOTP` docs page), cleaned up import paths to use `pixelplay` shorthand
22
- - **Menubar demos**: Replaced non-existent `MenubarShortcut` import with `shortcut` prop on `MenubarItem`; `MenubarSubTrigger` auto-renders chevron icon
23
- - **NavigationMenu demos**: Simplified dropdown content from wide `w-[400px]` description cards to compact `w-52`/`w-80` link lists
24
- - **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
33
+ - **`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`).
34
+ - **`SidebarNavDivider`** (`widgets/sidebar-nav`): Replaced raw `<hr>` with the `Separator` shared component.
35
+ - **`SidebarNavSection` title colour**: Changed from `--on-surface-variant` to `--on-surface`.
36
+ - **`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.
37
+ - **`build-custom-theme.ts`**: Generated custom theme object now includes a `personality` field derived from `input.personality`.
25
38
 
26
39
  ### Fixed
27
40
 
28
- - **Sheet/Popover/Drawer/AlertDialog demos**: Added `asChild` to trigger components to prevent nested `<button>` hydration errors
29
- - **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
30
- - **HoverCard**: Fixed `useRef()` calls missing required initial value for React 19 compatibility (`useRef<T>()` -> `useRef<T | undefined>(undefined)`)
31
- - **ScrollArea**: Same `useRef()` React 19 fix
32
- - **Collapsible**: Fixed `scrollHeight` ref timing issue
33
- - **Carousel**: Fixed vertical sizing
34
- - **ContextMenu**: Fixed missing exports and incorrect API usage in demos
35
- - **Drawer**: Fixed nested button hydration error and improved demo content
36
- - **AspectRatio**: Fixed broken demo images
41
+ - **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).
42
+ - **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.
43
+ - **Playful preset — tooltip**: Tooltip stays tilted while visible (`animate: { rotate: -3 }`) instead of snapping back to 0, reinforcing the playful character.
44
+ - **Playful preset — tag**: Added `initial`/`animate` enter states (`scale: 0.8, rotate: -3` → `scale: 1, rotate: 0`) so tags animate in, not just out.
45
+ - **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`.
46
+ - **Playful preset — select / dropdown items**: Added `rotate: 0.5` to `whileHover` for a micro-tilt on item highlight.
47
+ - **Playful preset — fileUpload dropzone**: Increased `whileHover` rotation from `0.5` to `1.5` for a more pronounced tilt.
48
+ - **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.)
49
+ - **`Card.CardBody`**: Removed `overflow-y-auto` which was causing unintended internal scroll on card body content.
37
50
 
38
51
  ---
39
52
 
40
- ## [1.1.3] - 2026-04-06
53
+ ## [1.2.0] — 2026-04-21
54
+
55
+ ### Added
56
+
57
+ - **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.
58
+ - **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.
59
+ - **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.
60
+
61
+ ### Fixed
62
+
63
+ - **Accordion/Collapsible animation**: Content enter/exit animations now correctly read from the `content` slice of the animation preset rather than the flat preset root.
64
+ - **Drawer/Sheet animation**: Overlay and panel transitions now correctly use `overlay.transition` and `content.transition` slices from the preset.
65
+
66
+ ---
67
+
68
+ ## [1.1.3] — 2026-04-06
41
69
 
42
70
  ### Added
43
71
 
package/dist/index.d.mts CHANGED
@@ -1,7 +1,10 @@
1
- import React$1, { CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
1
+ import React$1, { CSSProperties, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
2
+ import { HTMLMotionProps } from 'framer-motion';
2
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
4
  import { ClassValue } from 'clsx';
4
5
 
6
+ /** Personality presets — combined radius + animation behavior */
7
+ type PersonalityPreset = "sharp" | "subtle" | "balanced" | "soft" | "playful";
5
8
  /** Common size scale used across all components */
6
9
  type SizeScale = "sm" | "md" | "lg";
7
10
  /** Color intent variants */
@@ -19,7 +22,7 @@ interface BaseComponentProps {
19
22
  style?: CSSProperties;
20
23
  }
21
24
 
22
- interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
25
+ interface ButtonProps extends HTMLMotionProps<"button"> {
23
26
  /** Visual color intent */
24
27
  color?: ColorVariant;
25
28
  /** Visual style variant */
@@ -42,7 +45,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
42
45
  isIconOnly?: boolean;
43
46
  }
44
47
 
45
- declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
48
+ declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
46
49
 
47
50
  interface ButtonGroupProps {
48
51
  children: ReactNode;
@@ -62,7 +65,7 @@ interface ButtonGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
62
65
  }
63
66
 
64
67
  declare function ButtonGroup({ children, className }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
65
- declare function ButtonGroupItem({ children, startContent, isIconOnly, isSelected, isDisabled, className, onClick, ...props }: ButtonGroupItemProps): react_jsx_runtime.JSX.Element;
68
+ 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;
66
69
 
67
70
  type InputVariant = "bordered" | "flat" | "faded" | "underlined";
68
71
  type TextareaResize = "none" | "vertical" | "horizontal" | "both";
@@ -204,7 +207,7 @@ declare namespace Tag {
204
207
  var displayName: string;
205
208
  }
206
209
 
207
- interface CardProps extends HTMLAttributes<HTMLDivElement> {
210
+ interface CardProps extends HTMLMotionProps<"div"> {
208
211
  /** Makes the entire card a pressable/clickable surface */
209
212
  isPressable?: boolean;
210
213
  /** Removes default shadow */
@@ -223,7 +226,7 @@ interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
223
226
  interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
224
227
  }
225
228
 
226
- declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
229
+ declare const Card: React$1.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
227
230
  declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
228
231
  declare const CardBody: React$1.ForwardRefExoticComponent<CardBodyProps & React$1.RefAttributes<HTMLDivElement>>;
229
232
  declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -762,7 +765,7 @@ interface SparklineChartProps {
762
765
  className?: string;
763
766
  }
764
767
 
765
- declare function LineChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, showArea, curved, stacked, yAxisLabel, xAxisLabel, className, }: LineChartProps): react_jsx_runtime.JSX.Element;
768
+ declare function LineChart({ data, series: seriesRaw, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, showArea, curved, stacked, yAxisLabel, xAxisLabel, className, }: LineChartProps): react_jsx_runtime.JSX.Element;
766
769
 
767
770
  declare function BarChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, stacked, orientation, yAxisLabel, xAxisLabel, className, }: BarChartProps): react_jsx_runtime.JSX.Element;
768
771
 
@@ -1505,6 +1508,7 @@ type ThemeTokens = {
1505
1508
  };
1506
1509
  declare const lightTheme: ThemeTokens;
1507
1510
  declare const darkTheme: ThemeTokens;
1511
+
1508
1512
  /**
1509
1513
  * Generates a `<style>` block with CSS custom properties for every design
1510
1514
  * theme × light/dark mode. The first theme (inkwell) is output as `:root` / `.dark`.
@@ -1515,4 +1519,4 @@ declare function generateThemeCSS(): string;
1515
1519
 
1516
1520
  declare const PIXELPLAY_VERSION = "1.0.3";
1517
1521
 
1518
- 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 };
1522
+ 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 CHANGED
@@ -1,7 +1,10 @@
1
- import React$1, { CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
1
+ import React$1, { CSSProperties, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
2
+ import { HTMLMotionProps } from 'framer-motion';
2
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
4
  import { ClassValue } from 'clsx';
4
5
 
6
+ /** Personality presets — combined radius + animation behavior */
7
+ type PersonalityPreset = "sharp" | "subtle" | "balanced" | "soft" | "playful";
5
8
  /** Common size scale used across all components */
6
9
  type SizeScale = "sm" | "md" | "lg";
7
10
  /** Color intent variants */
@@ -19,7 +22,7 @@ interface BaseComponentProps {
19
22
  style?: CSSProperties;
20
23
  }
21
24
 
22
- interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
25
+ interface ButtonProps extends HTMLMotionProps<"button"> {
23
26
  /** Visual color intent */
24
27
  color?: ColorVariant;
25
28
  /** Visual style variant */
@@ -42,7 +45,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
42
45
  isIconOnly?: boolean;
43
46
  }
44
47
 
45
- declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
48
+ declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
46
49
 
47
50
  interface ButtonGroupProps {
48
51
  children: ReactNode;
@@ -62,7 +65,7 @@ interface ButtonGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
62
65
  }
63
66
 
64
67
  declare function ButtonGroup({ children, className }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
65
- declare function ButtonGroupItem({ children, startContent, isIconOnly, isSelected, isDisabled, className, onClick, ...props }: ButtonGroupItemProps): react_jsx_runtime.JSX.Element;
68
+ 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;
66
69
 
67
70
  type InputVariant = "bordered" | "flat" | "faded" | "underlined";
68
71
  type TextareaResize = "none" | "vertical" | "horizontal" | "both";
@@ -204,7 +207,7 @@ declare namespace Tag {
204
207
  var displayName: string;
205
208
  }
206
209
 
207
- interface CardProps extends HTMLAttributes<HTMLDivElement> {
210
+ interface CardProps extends HTMLMotionProps<"div"> {
208
211
  /** Makes the entire card a pressable/clickable surface */
209
212
  isPressable?: boolean;
210
213
  /** Removes default shadow */
@@ -223,7 +226,7 @@ interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
223
226
  interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
224
227
  }
225
228
 
226
- declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
229
+ declare const Card: React$1.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
227
230
  declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
228
231
  declare const CardBody: React$1.ForwardRefExoticComponent<CardBodyProps & React$1.RefAttributes<HTMLDivElement>>;
229
232
  declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -762,7 +765,7 @@ interface SparklineChartProps {
762
765
  className?: string;
763
766
  }
764
767
 
765
- declare function LineChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, showArea, curved, stacked, yAxisLabel, xAxisLabel, className, }: LineChartProps): react_jsx_runtime.JSX.Element;
768
+ declare function LineChart({ data, series: seriesRaw, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, showArea, curved, stacked, yAxisLabel, xAxisLabel, className, }: LineChartProps): react_jsx_runtime.JSX.Element;
766
769
 
767
770
  declare function BarChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, stacked, orientation, yAxisLabel, xAxisLabel, className, }: BarChartProps): react_jsx_runtime.JSX.Element;
768
771
 
@@ -1505,6 +1508,7 @@ type ThemeTokens = {
1505
1508
  };
1506
1509
  declare const lightTheme: ThemeTokens;
1507
1510
  declare const darkTheme: ThemeTokens;
1511
+
1508
1512
  /**
1509
1513
  * Generates a `<style>` block with CSS custom properties for every design
1510
1514
  * theme × light/dark mode. The first theme (inkwell) is output as `:root` / `.dark`.
@@ -1515,4 +1519,4 @@ declare function generateThemeCSS(): string;
1515
1519
 
1516
1520
  declare const PIXELPLAY_VERSION = "1.0.3";
1517
1521
 
1518
- 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 };
1522
+ 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 };