pixelplay 1.0.3 → 1.0.4

package/dist/index.d.mts

@@ -1,3 +1,1324 @@
-declare const PIXELPLAY_VERSION = "1.0.0";
+import React$1, { CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
 
-export { PIXELPLAY_VERSION };
+/** Common size scale used across all components */
+type SizeScale = "sm" | "md" | "lg";
+/** Color intent variants */
+type ColorVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
+/** Visual style variants */
+type StyleVariant = "solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "ghost";
+/** Radius variants */
+type RadiusVariant = "none" | "sm" | "md" | "lg" | "full";
+/**
+ * Base props that every component should extend.
+ * Provides a consistent API for className and style overrides.
+ */
+interface BaseComponentProps {
+    className?: string;
+    style?: CSSProperties;
+}
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual color intent */
+    color?: ColorVariant;
+    /** Visual style variant */
+    variant?: StyleVariant;
+    /** Size of the button */
+    size?: SizeScale;
+    /** Border radius */
+    radius?: RadiusVariant;
+    /** Show loading spinner and disable interactions */
+    isLoading?: boolean;
+    /** Disable the button */
+    isDisabled?: boolean;
+    /** Render as full-width block */
+    fullWidth?: boolean;
+    /** Icon placed before the children */
+    startContent?: React.ReactNode;
+    /** Icon placed after the children */
+    endContent?: React.ReactNode;
+    /** Render as equal-padding icon-only button (hides children) */
+    isIconOnly?: boolean;
+}
+
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps {
+    children: ReactNode;
+    className?: string;
+}
+interface ButtonGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Content rendered before the label */
+    startContent?: ReactNode;
+    /** Render icon-only (tighter padding, no label) */
+    isIconOnly?: boolean;
+    /** Highlighted / active state */
+    isSelected?: boolean;
+    /** Disabled state */
+    isDisabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+
+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;
+
+type InputVariant = "bordered" | "flat" | "faded" | "underlined";
+type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Visible label above the input */
+    label?: string;
+    /** Hint text rendered below in gray */
+    description?: string;
+    /** Error message — also triggers error visual state */
+    errorMessage?: string;
+    /** Element rendered inside the input, before the text (e.g. an icon or "$") */
+    startContent?: React.ReactNode;
+    /** Element rendered inside the input, after the text (e.g. a help icon) */
+    endContent?: React.ReactNode;
+    /** Addon rendered at the left edge with a divider (e.g. country selector, "http://") */
+    leadingAddOn?: React.ReactNode;
+    /** Addon rendered at the right edge with a divider (e.g. "USD" currency picker) */
+    trailingAddOn?: React.ReactNode;
+    /** Visual style variant */
+    variant?: InputVariant;
+    /** Size — matches button height scale */
+    size?: SizeScale;
+    /** Border radius */
+    radius?: RadiusVariant;
+    /** Stretch to container width */
+    fullWidth?: boolean;
+    /** Disable the input */
+    isDisabled?: boolean;
+    /** Mark as required */
+    isRequired?: boolean;
+    /** Mark as read-only */
+    isReadOnly?: boolean;
+}
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    /** Visible label above the textarea */
+    label?: string;
+    /** Hint text rendered below in gray */
+    description?: string;
+    /** Error message — also triggers error visual state */
+    errorMessage?: string;
+    /** Border radius */
+    radius?: RadiusVariant;
+    /** Stretch to container width */
+    fullWidth?: boolean;
+    /** Disable the textarea */
+    isDisabled?: boolean;
+    /** Mark as required */
+    isRequired?: boolean;
+    /** Mark as read-only */
+    isReadOnly?: boolean;
+    /** CSS resize behaviour */
+    resize?: TextareaResize;
+    /** Minimum visible rows (sets min-height) */
+    minRows?: number;
+}
+interface MegaInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Size of the input cell */
+    size?: SizeScale;
+    /** Disable the input */
+    isDisabled?: boolean;
+}
+
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+declare const MegaInput: React$1.ForwardRefExoticComponent<MegaInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+type BadgeColor = "gray" | "purple" | "red" | "amber" | "emerald" | "slate" | "sky" | "blue" | "indigo" | "violet" | "pink" | "rose" | "orange";
+type BadgeSize = "sm" | "md";
+interface BadgeProps {
+    color?: BadgeColor;
+    size?: BadgeSize;
+    /** Render a leading status dot in the badge's accent colour */
+    dot?: boolean;
+    /** Leading slot — icon, avatar, flag, etc. */
+    startContent?: ReactNode;
+    /** Trailing slot — close icon, arrow, etc. */
+    endContent?: ReactNode;
+    /** Removes horizontal padding and shows only the endContent icon */
+    isIconOnly?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+
+declare function Badge({ color, size, dot, startContent, endContent, isIconOnly, children, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare namespace Badge {
+    var displayName: string;
+}
+
+type BadgeGroupColor = "primary" | "gray" | "error" | "warning" | "success";
+type BadgeGroupSize = "sm" | "md";
+interface BadgeGroupProps {
+    color?: BadgeGroupColor;
+    size?: BadgeGroupSize;
+    /** Text shown inside the inner white chip */
+    badgeLabel: string;
+    /** Position of the inner chip relative to the message */
+    badgePosition?: "left" | "right";
+    /** Trailing slot inside the inner chip (e.g. an arrow icon) */
+    badgeEndContent?: ReactNode;
+    /** Trailing slot on the message text (e.g. an arrow icon) */
+    endContent?: ReactNode;
+    /** The message text */
+    children: ReactNode;
+    className?: string;
+}
+
+declare function BadgeGroup({ color, size, badgeLabel, badgePosition, badgeEndContent, endContent, children, className, }: BadgeGroupProps): react_jsx_runtime.JSX.Element;
+declare namespace BadgeGroup {
+    var displayName: string;
+}
+
+type TagSize = "sm" | "md" | "lg";
+interface TagProps {
+    /** Visual size */
+    size?: TagSize;
+    /** Leading slot — avatar, flag emoji, icon, etc. */
+    startContent?: ReactNode;
+    /** Show a leading status dot (uses emerald-500 by default) */
+    dot?: boolean;
+    /** Renders a dismiss (×) trailing button. Called when clicked. */
+    onDismiss?: () => void;
+    /** Trailing count number displayed after the label */
+    count?: number;
+    /**
+     * Controlled checkbox state. When defined (even `false`), a checkbox is
+     * rendered at the leading edge before all other content.
+     */
+    checked?: boolean;
+    /** Checkbox change handler */
+    onCheckedChange?: (checked: boolean) => void;
+    children: ReactNode;
+    className?: string;
+}
+
+declare function Tag({ size, startContent, dot, onDismiss, count, checked, onCheckedChange, children, className, }: TagProps): react_jsx_runtime.JSX.Element;
+declare namespace Tag {
+    var displayName: string;
+}
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Makes the entire card a pressable/clickable surface */
+    isPressable?: boolean;
+    /** Removes default shadow */
+    isBlurred?: boolean;
+    /** Shadow depth */
+    shadow?: "none" | "sm" | "md" | "lg";
+    /** Border radius */
+    radius?: RadiusVariant;
+    /** Full-width card */
+    fullWidth?: boolean;
+}
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+}
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+}
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+}
+
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & 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>>;
+
+interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
+    /** Loading label for assistive technology */
+    label?: string;
+    /** Color of the spinner */
+    color?: ColorVariant | "current";
+    /** Size of the spinner */
+    size?: SizeScale;
+}
+
+declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<SVGSVGElement>>;
+
+type AvatarColor = "default" | "primary" | "secondary" | "tertiary" | "graphic-1" | "graphic-2" | "graphic-3" | "graphic-4" | "graphic-5" | "graphic-6" | "graphic-7" | "graphic-8" | "graphic-9" | "graphic-10";
+type AvatarSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+interface AvatarProps {
+    /** Photo URL */
+    src?: string;
+    /** Full name → auto-generates 2-letter initials fallback */
+    name?: string;
+    /** Explicit initials override (max 2 chars shown) */
+    initials?: string;
+    /** Alt text for the photo */
+    alt?: string;
+    /** Avatar size — xxs 16px · xs 24px · sm 32px · md 40px · lg 48px · xl 56px · 2xl 64px · 3xl 96px */
+    size?: AvatarSize;
+    /** Initials/icon background colour — uses theme categorical & semantic tokens */
+    color?: AvatarColor;
+    /** Adds a coloured outline ring */
+    isBordered?: boolean;
+    /** Status badge in bottom-right corner */
+    status?: "online" | "offline" | "busy" | "away";
+    /** Corner logo / company badge — URL rendered as a small bottom-right image */
+    badge?: string;
+    className?: string;
+}
+
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type SocialPlatform = "google" | "apple" | "facebook" | "twitter" | "figma" | "dribbble" | "github";
+/**
+ * "subtle" — white button with coloured brand icon (light style from Figma)
+ * "solid"  — fully brand-coloured button with white icon
+ * "ghost"  — outlined button, brand icon colour, dark label
+ */
+type SocialButtonStyle = "subtle" | "solid" | "ghost";
+interface SocialButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    platform: SocialPlatform;
+    /** Visual style — brand (outlined light), solid (filled), ghost (no bg) */
+    buttonStyle?: SocialButtonStyle;
+    /** Show icon only — no label */
+    isIconOnly?: boolean;
+    /** Disable the button */
+    isDisabled?: boolean;
+}
+
+declare const SocialButton: React$1.ForwardRefExoticComponent<SocialButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type StorePlatform = "app-store" | "google-play";
+/** "dark" — black bg (default), "light" — white bg with black border */
+type StoreButtonTheme = "dark" | "light";
+type StoreButtonSize = "sm" | "md";
+interface StoreButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    platform: StorePlatform;
+    /** dark = black bg white text, light = white bg black text */
+    theme?: StoreButtonTheme;
+    size?: StoreButtonSize;
+    /** Disable the button */
+    isDisabled?: boolean;
+}
+
+declare const StoreButton: React$1.ForwardRefExoticComponent<StoreButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface DropdownMenuProps {
+    children: ReactNode;
+    className?: string;
+}
+interface DropdownMenuHeaderProps {
+    title: string;
+    className?: string;
+}
+interface DropdownMenuAvatarHeaderProps {
+    name: string;
+    email?: string;
+    avatarSrc?: string;
+    isOnline?: boolean;
+    className?: string;
+}
+interface DropdownMenuSeparatorProps {
+    /** muted=true renders a lighter divider (used inside headers) */
+    muted?: boolean;
+    className?: string;
+}
+interface DropdownMenuItemProps {
+    label: string;
+    /** Leading icon node */
+    icon?: ReactNode;
+    /** When defined, a checkbox is shown. Pass true/false to control checked state. */
+    checked?: boolean;
+    /** Trailing keyboard shortcut string, e.g. "⌘S" */
+    shortcut?: string;
+    isDisabled?: boolean;
+    /** Renders the item in the error/destructive colour */
+    isDestructive?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+
+declare function DropdownMenu({ children, className }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuHeader({ title, className, }: DropdownMenuHeaderProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuAvatarHeader({ name, email, avatarSrc, isOnline, className, }: DropdownMenuAvatarHeaderProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ muted, className, }: DropdownMenuSeparatorProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ label, icon, checked, shortcut, isDisabled, isDestructive, onClick, className, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    label: string;
+    value: string;
+    /** Leading icon node (e.g. a react-feather icon) */
+    icon?: ReactNode;
+    /** Photo URL for avatar leading slot */
+    avatarSrc?: string;
+    /** Fallback initials when avatarSrc is absent and avatar slot is used */
+    avatarInitials?: string;
+    /** Show a coloured online/offline dot next to the item */
+    isOnline?: boolean;
+    /** Short handle rendered after the label, e.g. "@olivia" */
+    username?: string;
+}
+interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    /** Renders a search input inside the open panel (ComboBox mode) */
+    isSearchable?: boolean;
+    isDisabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+
+declare function Select({ options, value, onChange, placeholder, isSearchable, isDisabled, size, className, }: SelectProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Uncontrolled default checked state */
+    defaultChecked?: boolean;
+    /** Called with the new checked value whenever it changes */
+    onChange?: (checked: boolean) => void;
+    /** Size of the toggle */
+    size?: "sm" | "md";
+    /** Disable the toggle */
+    isDisabled?: boolean;
+    /** Label displayed next to the toggle */
+    label?: string;
+    /** Supporting description rendered below the label */
+    description?: string;
+    className?: string;
+    id?: string;
+}
+
+declare function Toggle({ checked, defaultChecked, onChange, size, isDisabled, label, description, className, id: idProp, }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare namespace Toggle {
+    var displayName: string;
+}
+
+interface CheckboxProps {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Indeterminate / partial state — overrides checked visually */
+    indeterminate?: boolean;
+    /** Uncontrolled default checked state */
+    defaultChecked?: boolean;
+    /** Called with the new checked value whenever it changes */
+    onChange?: (checked: boolean) => void;
+    /** Visual shape variant */
+    variant?: "square" | "rounded" | "circle";
+    /** Size of the checkbox */
+    size?: "sm" | "md";
+    /** Disable the checkbox */
+    isDisabled?: boolean;
+    /** Label displayed next to the checkbox */
+    label?: string;
+    /** Supporting description rendered below the label */
+    description?: string;
+    className?: string;
+    id?: string;
+}
+
+declare function Checkbox({ checked, indeterminate, defaultChecked, onChange, variant, size, isDisabled, label, description, className, id: idProp, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare namespace Checkbox {
+    var displayName: string;
+}
+
+interface CheckboxCardOption {
+    value: string;
+    title: string;
+    /** Short secondary text shown inline with the title (e.g. "$10/month") */
+    subtitle?: string;
+    /** Supporting description below the title */
+    description?: string;
+    /** Optional icon rendered in a circular badge on the left */
+    icon?: ReactNode;
+    isDisabled?: boolean;
+    /** Icon-card body: large price value (e.g. "$10") */
+    price?: string;
+    /** Icon-card body: price period label (e.g. "per month") */
+    priceUnit?: string;
+    /** Icon-card body: optional badge pill text (e.g. "Limited time only") */
+    badge?: string;
+    /** Icon-card body: badge color — defaults to "emerald" */
+    badgeColor?: BadgeColor;
+    /** Avatar variant: URL of the circular avatar image */
+    avatarSrc?: string;
+}
+interface CheckboxCardProps extends CheckboxCardOption {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    size?: "sm" | "md";
+    /** Visual layout variant */
+    variant?: "icon-simple" | "icon-card" | "avatar" | "radio" | "checkbox";
+    className?: string;
+    id?: string;
+}
+interface CheckboxGroupProps {
+    options: CheckboxCardOption[];
+    /** Controlled selected values */
+    value?: string[];
+    /** Uncontrolled default selected values */
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+    /** Group label */
+    label?: string;
+    /** Disable the entire group */
+    isDisabled?: boolean;
+    /** Stack direction */
+    orientation?: "vertical" | "horizontal";
+    /** Card size — sm uses text-sm, md uses text-base with icon ring treatment */
+    size?: "sm" | "md";
+    /** Visual layout variant — applied to all cards in the group */
+    variant?: "icon-simple" | "icon-card" | "avatar" | "radio" | "checkbox";
+    className?: string;
+}
+
+declare function CheckboxCard({ value: _value, title, subtitle, description, icon, price, priceUnit, badge, badgeColor, avatarSrc, checked, defaultChecked, onChange, isDisabled, size, variant, className, id: idProp, }: CheckboxCardProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxGroup({ options, value, defaultValue, onChange, label, isDisabled, orientation, size, variant, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
+type ProgressLabelPlacement = "none" | "right" | "below" | "tooltip-above" | "tooltip-below";
+type ProgressSize = "sm" | "md";
+interface ProgressBarProps {
+    /** Progress value, 0–100 */
+    value: number;
+    /** Custom label text; defaults to `${value}%` */
+    label?: string;
+    /** Where to show the percentage label (default: "none") */
+    labelPlacement?: ProgressLabelPlacement;
+    /** Track height: sm = 8 px, md = 12 px */
+    size?: ProgressSize;
+    className?: string;
+    "aria-label"?: string;
+}
+type CircularProgressSize = "xs" | "sm" | "md" | "lg" | "xl";
+type CircularProgressVariant = "full" | "half";
+interface CircularProgressProps {
+    /** Progress value, 0–100 */
+    value: number;
+    /** Visual size of the ring */
+    size?: CircularProgressSize;
+    /** Full 360° ring or 180° top-half arc */
+    variant?: CircularProgressVariant;
+    /** Optional supplementary label inside the circle (e.g. "Active users") */
+    label?: string;
+    /** Show the numeric percentage in the centre (default: true) */
+    showValue?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+
+declare function ProgressBar({ value, label, labelPlacement, size, className, "aria-label": ariaLabel, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+declare function CircularProgress({ value, size, variant, label, showValue, className, "aria-label": ariaLabel, }: CircularProgressProps): react_jsx_runtime.JSX.Element;
+
+type SliderLabelPlacement = "none" | "label" | "tooltip-above" | "tooltip-below";
+interface RangeSliderProps {
+    /** Current value [lo, hi]. Omit for uncontrolled mode. */
+    value?: [number, number];
+    /** Initial value when uncontrolled. Defaults to [0, 50]. */
+    defaultValue?: [number, number];
+    /** Minimum bound. Default 0. */
+    min?: number;
+    /** Maximum bound. Default 100. */
+    max?: number;
+    /** Step size. Default 1. */
+    step?: number;
+    /** Fired when the value changes. */
+    onChange?: (value: [number, number]) => void;
+    /** Where to display the current value near each thumb. */
+    labelPlacement?: SliderLabelPlacement;
+    /** Custom label formatter. Defaults to `v => \`${v}%\``. */
+    formatLabel?: (value: number) => string;
+    className?: string;
+    "aria-label"?: string;
+}
+
+declare function RangeSlider({ value: valueProp, defaultValue, min, max, step, onChange, labelPlacement, formatLabel, className, "aria-label": ariaLabel, }: RangeSliderProps): react_jsx_runtime.JSX.Element;
+
+/** Which side of the trigger the tooltip appears on. */
+type TooltipPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right";
+type TooltipColor = "surface" | "inverse";
+/** Props for the static Tooltip bubble. */
+interface TooltipProps {
+    /** Headline / label text shown in the bubble. */
+    title: string;
+    /** Optional supporting body text below the title. */
+    description?: string;
+    /**
+     * Where the arrow caret appears, indicating which side faces the trigger.
+     * Omit (or pass undefined) to render without an arrow.
+     */
+    placement?: TooltipPlacement;
+    /** "inverse" (default) uses inverse-surface bg + inverse-on-surface text; "surface" uses surface bg + on-surface text. */
+    color?: TooltipColor;
+    className?: string;
+}
+/** Props for the TooltipTrigger wrapper. */
+interface TooltipTriggerProps {
+    /** The element that activates the tooltip on hover/focus. */
+    children: ReactNode;
+    /** Tooltip content and placement configuration. */
+    tooltip: TooltipProps;
+    /** Extra classes applied to the outer positioning wrapper. */
+    className?: string;
+}
+
+declare function Tooltip({ title, description, placement, color, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ children, tooltip, className, }: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
+
+type FeatureIconColor = "primary" | "success" | "warning" | "error";
+/** "default" — icon stacked above content. "horizontal" — icon beside content. */
+type ModalLayout = "default" | "horizontal";
+/** Text and icon alignment within the content area. */
+type ModalAlign = "start" | "center";
+/** "center" — dialog centered on screen. "bottom" — sheet anchored to bottom (mobile). */
+type ModalPosition = "center" | "bottom";
+/** sm = 384px · md = 480px · lg = 544px */
+type ModalSize = "sm" | "md" | "lg";
+/**
+ * "horizontal"               — Cancel | Confirm side-by-side, both full-width.
+ * "vertical"                 — Confirm on top, Cancel below, both full-width.
+ * "horizontal-with-checkbox" — Checkbox left, [Cancel | Confirm] right (not full-width).
+ */
+type ModalActionsLayout = "horizontal" | "vertical" | "horizontal-with-checkbox";
+interface ModalAction {
+    label: string;
+    onClick?: () => void;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+}
+interface ModalCheckboxConfig {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+interface ModalAvatarGroupItem {
+    src: string;
+    alt?: string;
+}
+interface ModalUserAvatar {
+    src?: string;
+    name?: string;
+    subtitle?: string;
+}
+interface ModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    /** 24×24 icon node rendered inside the colour-tinted feature badge. */
+    icon?: React$1.ReactNode;
+    iconColor?: FeatureIconColor;
+    /** Renders a full-width image at the top of the modal instead of the icon. */
+    image?: string;
+    imageAlt?: string;
+    /** Stacked avatar fan rendered instead of the icon (team invite variant). */
+    avatarGroup?: ModalAvatarGroupItem[];
+    /** A single user avatar row rendered below the description text. */
+    userAvatar?: ModalUserAvatar;
+    title?: string;
+    description?: React$1.ReactNode;
+    /**
+     * Arbitrary content rendered between the description and the actions row.
+     * Use for forms, checkboxes lists, OTP inputs, payment fields, etc.
+     */
+    children?: React$1.ReactNode;
+    layout?: ModalLayout;
+    align?: ModalAlign;
+    position?: ModalPosition;
+    size?: ModalSize;
+    primaryAction?: ModalAction;
+    secondaryAction?: ModalAction;
+    /** Renders the primary action button in danger/error colour. */
+    isDestructive?: boolean;
+    actionsLayout?: ModalActionsLayout;
+    /**
+     * Checkbox rendered left of the actions (used with "horizontal-with-checkbox").
+     * Pass the controlled state from the parent.
+     */
+    checkbox?: ModalCheckboxConfig;
+    className?: string;
+    /**
+     * When true, renders inline inside a `relative` container instead of using
+     * a portal attached to `document.body`. Use this in docs/preview contexts
+     * where the modal must be constrained to a parent element.
+     */
+    disablePortal?: boolean;
+}
+
+declare function Modal({ isOpen, onClose, icon, iconColor, image, imageAlt, avatarGroup, userAvatar, title, description, children, layout, align, position, size, primaryAction, secondaryAction, isDestructive, actionsLayout, checkbox, className, disablePortal, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+type ChartSize = "xxs" | "xs" | "sm" | "md" | "lg";
+type LegendPosition = "top" | "bottom" | "left" | "right";
+/** A single data series definition */
+interface ChartSeries {
+    /** Must match a key in ChartDataPoint */
+    key: string;
+    /** Human-readable label shown in legend and tooltip */
+    label: string;
+    /** Explicit color override; defaults to the --graphic-N token for that series index */
+    color?: string;
+}
+/** One data row. `label` is the X-axis tick. All other keys map to series values. */
+interface ChartDataPoint {
+    label: string;
+    [key: string]: string | number;
+}
+interface BaseChartProps {
+    data: ChartDataPoint[];
+    series: ChartSeries[];
+    /** Chart canvas height: sm = 200 px, md = 280 px, lg = 360 px */
+    size?: ChartSize;
+    showLegend?: boolean;
+    legendPosition?: LegendPosition;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    /** Rotated label drawn along the Y-axis */
+    yAxisLabel?: string;
+    /** Label drawn below the X-axis */
+    xAxisLabel?: string;
+    className?: string;
+}
+interface LineChartProps extends BaseChartProps {
+    /** Render a gradient area fill beneath each series line */
+    showArea?: boolean;
+    /** Use monotone (smooth) curve; set false for linear straight segments */
+    curved?: boolean;
+    /** Stack all series on top of each other (stacked area chart) */
+    stacked?: boolean;
+}
+interface BarChartProps extends BaseChartProps {
+    /** Stack bars on top of each other instead of grouping side by side */
+    stacked?: boolean;
+    /** Render horizontal bars (categories on Y-axis, values on X-axis) */
+    orientation?: "horizontal" | "vertical";
+}
+interface DonutChartProps {
+    data: Array<{
+        label: string;
+        value: number;
+        color?: string;
+    }>;
+    size?: ChartSize;
+    showLegend?: boolean;
+    legendPosition?: LegendPosition;
+    /** Text label in the donut hole, e.g. "Active users" */
+    centerLabel?: string;
+    /** Numeric or string value in the donut hole */
+    centerValue?: string | number;
+    /** Inner radius as % of the outer radius. 0 = solid pie, default 60 = donut */
+    innerRadiusPct?: number;
+    className?: string;
+}
+interface RadarChartProps extends BaseChartProps {
+    /** Fill the radar polygon with a semi-transparent color */
+    filled?: boolean;
+}
+interface ScatterDataPoint {
+    x: number;
+    y: number;
+    /** Optional bubble size for bubble charts */
+    z?: number;
+}
+interface ScatterSeries {
+    key: string;
+    label: string;
+    color?: string;
+    data: ScatterDataPoint[];
+}
+interface ScatterChartProps {
+    series: ScatterSeries[];
+    size?: ChartSize;
+    showLegend?: boolean;
+    legendPosition?: LegendPosition;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    className?: string;
+}
+interface RadialChartProps {
+    data: Array<{
+        label: string;
+        /** Current value */
+        value: number;
+        /** Maximum value; defaults to 100 (value treated as %) */
+        max?: number;
+        color?: string;
+    }>;
+    size?: ChartSize;
+    showLegend?: boolean;
+    legendPosition?: LegendPosition;
+    centerLabel?: string;
+    centerValue?: string | number;
+    className?: string;
+}
+interface SparklineChartProps {
+    /** Array of data objects; each must include the key specified by `dataKey`. */
+    data: Array<Record<string, string | number>>;
+    /** Key in each data object to use as the plotted value */
+    dataKey: string;
+    /** Line and area fill color; defaults to var(--status-positive) */
+    color?: string;
+    /** Chart height in pixels; defaults to 56 */
+    height?: number;
+    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 BarChart({ data, series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, stacked, orientation, yAxisLabel, xAxisLabel, className, }: BarChartProps): react_jsx_runtime.JSX.Element;
+
+declare function DonutChart({ data, size, showLegend, legendPosition, centerLabel, centerValue, innerRadiusPct, className, }: DonutChartProps): react_jsx_runtime.JSX.Element;
+
+declare function RadialChart({ data, size, showLegend, legendPosition, centerLabel, centerValue, className, }: RadialChartProps): react_jsx_runtime.JSX.Element;
+
+declare function RadarChart({ data, series, size, showLegend, legendPosition, showGrid, filled, className, }: RadarChartProps): react_jsx_runtime.JSX.Element;
+
+declare function ScatterChart({ series, size, showLegend, legendPosition, showXAxis, showYAxis, showGrid, xAxisLabel, yAxisLabel, className, }: ScatterChartProps): react_jsx_runtime.JSX.Element;
+
+declare function SparklineChart({ data, dataKey, color, height, className, }: SparklineChartProps): react_jsx_runtime.JSX.Element;
+
+/** `link` — ghost text prev/next | `button` — outlined prev/next | `minimal` — prev/next + label only | `base` — inline connected button-group */
+type PaginationVariant = "link" | "button" | "minimal" | "base";
+/** Shape applied to individual numbered page buttons */
+type PaginationPageShape = "square" | "circle";
+interface PaginationProps {
+    /** Current active page (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Fires when the user selects a different page */
+    onPageChange: (page: number) => void;
+    /**
+     * Visual style for the prev/next controls and page-number container:
+     * - `link`    — ghost text buttons, no border/shadow
+     * - `button`  — outlined shadow buttons (default)
+     * - `minimal` — prev/next only + "Page X of Y" label, no numbered pages
+     * - `base`    — inline joined button-group with page numbers
+     */
+    variant?: PaginationVariant;
+    /** Shape of numbered page items — `square` (rounded-lg) or `circle` (rounded-full) */
+    pageShape?: PaginationPageShape;
+    /**
+     * Show a "Page X of Y" label alongside the navigation.
+     * Automatically shown for `minimal` variant.
+     */
+    showPageLabel?: boolean;
+    /**
+     * For `minimal` variant: placement of the page label relative to the buttons.
+     * - `"center"` (default) — [Prev] label [Next]
+     * - `"start"` — label [Prev] [Next]
+     * - `"end"` — [Prev] [Next] label
+     */
+    pageLabelPlacement?: "start" | "center" | "end";
+    /** Horizontal alignment of the whole control */
+    alignment?: "start" | "center" | "end";
+    className?: string;
+}
+type CarouselArrowColor = "primary" | "primary-light" | "dark" | "light";
+type CarouselArrowSize = "sm" | "md";
+interface CarouselArrowProps {
+    direction: "prev" | "next";
+    color?: CarouselArrowColor;
+    size?: CarouselArrowSize;
+    onClick?: () => void;
+    isDisabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+type IndicatorShape = "dot" | "pill";
+type IndicatorSize = "sm" | "md";
+type IndicatorColor = "primary" | "neutral" | "inverse";
+interface PaginationIndicatorProps {
+    /** Total number of indicators */
+    count: number;
+    /** Zero-based index of the active indicator */
+    activeIndex: number;
+    shape?: IndicatorShape;
+    size?: IndicatorSize;
+    color?: IndicatorColor;
+    className?: string;
+}
+
+declare function Pagination({ currentPage, totalPages, onPageChange, variant, pageShape, showPageLabel, pageLabelPlacement, alignment, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+declare function CarouselArrow({ direction, color, size, onClick, isDisabled, className, "aria-label": ariaLabel, }: CarouselArrowProps): react_jsx_runtime.JSX.Element;
+
+declare function PaginationIndicator({ count, activeIndex, shape, size, color, className, }: PaginationIndicatorProps): react_jsx_runtime.JSX.Element;
+
+interface MessageReactionProps {
+    /** Emoji character or short code string to display */
+    emoji: string;
+    /** When provided shows count badge next to the emoji */
+    count?: number;
+    /** Called when the reaction pill is clicked */
+    onClick?: () => void;
+    className?: string;
+}
+type AttachmentFileType = "image" | "document";
+interface MessageAttachment {
+    name: string;
+    size: string;
+    fileType?: AttachmentFileType;
+}
+/** Which side of the conversation this message belongs to */
+type MessageSide = "incoming" | "outgoing";
+/** Content type of the message bubble */
+type MessageType = "text" | "file" | "typing";
+interface ChatMessageProps {
+    /** Left (incoming) or right (outgoing) alignment */
+    side: MessageSide;
+    /** Display name shown above the bubble */
+    senderName: string;
+    /** Timestamp string shown next to the sender name */
+    timestamp?: string;
+    /** Content type — text, file attachment, or typing indicator */
+    type?: MessageType;
+    /** Message text (for `type="text"`) */
+    text?: string;
+    /** File attachment metadata (for `type="file"`) */
+    attachment?: MessageAttachment;
+    /** Emoji reactions shown below the bubble */
+    reactions?: MessageReactionProps[];
+    /** Avatar image URL (incoming side only) */
+    avatarSrc?: string;
+    /** Avatar initials fallback (incoming side only) */
+    avatarInitials?: string;
+    /** Show the online status dot on the avatar */
+    isOnline?: boolean;
+    className?: string;
+}
+
+declare function ChatMessage({ side, senderName, timestamp, type, text, attachment, reactions, avatarSrc, avatarInitials, isOnline, className, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
+
+declare function MessageReaction({ emoji, count, onClick, className, }: MessageReactionProps): react_jsx_runtime.JSX.Element;
+
+/** Single column definition for DataTable */
+interface DataTableColumn<T = Record<string, unknown>> {
+    key: string;
+    /** Column header text */
+    header: string;
+    /** Show sort arrow icon in header */
+    sortable?: boolean;
+    /** Show help/info icon in header */
+    helpIcon?: boolean;
+    /** Fixed column width (e.g. "160px", "auto") */
+    width?: string;
+    /** Render cell content for a given row */
+    cell: (row: T, rowIndex: number) => ReactNode;
+}
+interface DataTableProps<T = Record<string, unknown>> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    /** Alternate row background colours (first row is tinted) */
+    striped?: boolean;
+    /** Enable row-level checkbox selection */
+    selectable?: boolean;
+    /** Controlled set of selected row indices */
+    selectedKeys?: Set<number>;
+    /** Called when the internal/controlled selection changes */
+    onSelectionChange?: (keys: Set<number>) => void;
+    /** Card header title */
+    title?: string;
+    /** Card header description below the title */
+    description?: string;
+    /** Badge shown next to the title */
+    badge?: ReactNode;
+    /** Right-side action slot in the card header */
+    headerActions?: ReactNode;
+    /** Footer slot — typically Pagination */
+    footer?: ReactNode;
+    className?: string;
+}
+
+declare function DataTable<T = Record<string, unknown>>({ columns, rows, striped, selectable, selectedKeys: controlledSelected, onSelectionChange, title, description, badge, headerActions, footer, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TextCellProps {
+    text: string;
+    subtitle?: string;
+    /** Extra classes for the primary text span */
+    textClassName?: string;
+    /** Allow the primary text to wrap (default: false — text stays on one line) */
+    wrap?: boolean;
+    /** Truncate overflowing text with ellipsis */
+    truncate?: boolean;
+}
+declare function TextCell({ text, subtitle, textClassName, wrap, truncate, }: TextCellProps): react_jsx_runtime.JSX.Element;
+interface AvatarCellProps {
+    src?: string;
+    name: string;
+    subtitle?: string;
+    initials?: string;
+    size?: "sm" | "md";
+}
+declare function AvatarCell({ src, name, subtitle, initials, size, }: AvatarCellProps): react_jsx_runtime.JSX.Element;
+interface BadgeCellProps {
+    label: string;
+    color?: BadgeColor;
+    dot?: boolean;
+}
+declare function BadgeCell({ label, color, dot, }: BadgeCellProps): react_jsx_runtime.JSX.Element;
+interface BadgeItem {
+    label: string;
+    color?: BadgeColor;
+}
+declare function BadgesCell({ badges }: {
+    badges: BadgeItem[];
+}): react_jsx_runtime.JSX.Element;
+interface AvatarGroupItem {
+    src?: string;
+    name?: string;
+    initials?: string;
+    /** Explicit colour variant — auto-cycles graphic tokens when omitted */
+    color?: AvatarColor;
+}
+interface AvatarGroupCellProps {
+    avatars: AvatarGroupItem[];
+    /** Max visible avatars before "+N" overflow (default 5) */
+    maxVisible?: number;
+}
+declare function AvatarGroupCell({ avatars, maxVisible, }: AvatarGroupCellProps): react_jsx_runtime.JSX.Element;
+declare function ProgressCell({ value }: {
+    value: number;
+}): react_jsx_runtime.JSX.Element;
+type FileType = "pdf" | "doc" | "docx" | "jpg" | "jpeg" | "png" | "mp4" | "fig" | "framer" | string;
+interface FileTypeCellProps {
+    filename: string;
+    size?: string;
+    type: FileType;
+}
+declare function FileTypeCell({ filename, size, type }: FileTypeCellProps): react_jsx_runtime.JSX.Element;
+interface ActionIconsCellProps {
+    onDelete?: () => void;
+    onEdit?: () => void;
+}
+declare function ActionIconsCell({ onDelete, onEdit }: ActionIconsCellProps): react_jsx_runtime.JSX.Element;
+interface ActionDropdownCellProps {
+    onClick?: () => void;
+}
+declare function ActionDropdownCell({ onClick }: ActionDropdownCellProps): react_jsx_runtime.JSX.Element;
+interface TextAction {
+    label: string;
+    onClick?: () => void;
+    /** Use primary colour for this action */
+    isPrimary?: boolean;
+}
+declare function TextActionCell({ actions }: {
+    actions: TextAction[];
+}): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    /** Unique key for this tab */
+    key: string;
+    /** Tab label text */
+    label: React.ReactNode;
+    /** Optional badge count shown inside the tab */
+    badge?: string | number;
+}
+interface TabsProps {
+    /** Tab items to render */
+    items: TabItem[];
+    /** Controlled active key */
+    activeKey?: string;
+    /** Uncontrolled default active key (defaults to first item) */
+    defaultActiveKey?: string;
+    /** Called when the active tab changes */
+    onChange?: (key: string) => void;
+    /**
+     * Visual style variant:
+     * - `pill`         — brand-tinted pill on selected item
+     * - `pill-neutral` — neutral-tinted pill on selected item
+     * - `segment`      — segmented control with inset container
+     * - `underline`    — bottom (or left in vertical) border indicator
+     */
+    variant?: "pill" | "pill-neutral" | "segment" | "underline";
+    /** Layout orientation */
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+
+declare function Tabs({ items, activeKey: controlledKey, defaultActiveKey, onChange, variant, orientation, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface AccountDropdownItem {
+    key: string;
+    label: string;
+    email?: string;
+    avatarSrc?: string;
+    isSelected?: boolean;
+}
+interface BreadcrumbItemData {
+    /** Unique key (defaults to index) */
+    key?: string;
+    /** Label text or node — ignored when isHome is true */
+    label?: React.ReactNode;
+    /** Navigable href. If omitted and not current, renders as a non-link span */
+    href?: string;
+    /** Render a home icon instead of label text */
+    isHome?: boolean;
+    /** Render an ellipsis ("...") collapse item */
+    isEllipsis?: boolean;
+    /** Mark as the current / active page — auto-applied to the last item */
+    isCurrent?: boolean;
+    /** Image URL — renders this item as an account-style avatar + label button */
+    avatarSrc?: string;
+    /** Display name shown next to the avatar */
+    avatarLabel?: string;
+    /** Avatar shape — "square" for logos/brands, "circle" for people */
+    avatarShape?: "square" | "circle";
+    /** Renders the item as a dropdown account-switcher trigger */
+    isDropdown?: boolean;
+    /** Accounts shown in the dropdown popover (requires isDropdown) */
+    dropdownItems?: AccountDropdownItem[];
+}
+interface BreadcrumbProps {
+    /** Ordered list of breadcrumb items */
+    items: BreadcrumbItemData[];
+    /**
+     * Separator glyph between items.
+     * - `chevron` — right-pointing chevron `›`
+     * - `slash`   — diagonal slash `/`
+     */
+    separator?: "chevron" | "slash";
+    /**
+     * Visual style variant:
+     * - `default`  — clean inline, no container chrome
+     * - `bordered` — full-width row with top/bottom border rules
+     * - `ghost`    — rounded hover-background pill on each item
+     */
+    variant?: "default" | "bordered" | "ghost";
+    /** Extra className applied to the outer `<nav>` */
+    className?: string;
+}
+
+declare function Breadcrumb({ items, separator, variant, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+type AlertColor = "default" | "info" | "error" | "warning" | "success";
+type AlertIconStyle = "box" | "ring";
+type AlertLayout = "card" | "banner";
+interface AlertProps {
+    /**
+     * Semantic color / intent of the alert.
+     * - `default` uses neutral/surface tones
+     * - `info`, `error`, `warning`, `success` use feedback tokens
+     */
+    color?: AlertColor;
+    /**
+     * Icon presentation style.
+     * - `box`  — icon lives inside a rounded square container with shadow
+     * - `ring` — icon sits alone with two radiating ring pseudo-elements
+     */
+    iconStyle?: AlertIconStyle;
+    /**
+     * Layout mode.
+     * - `card`   — inline rounded card, typical for in-page alerts
+     * - `banner` — full-width bar with dismiss button; wrap in a fixed container if needed
+     */
+    layout?: AlertLayout;
+    /** Bold headline text */
+    title: string;
+    /** Supporting body text (can be a ReactNode to embed links) */
+    description?: React.ReactNode;
+    /** Custom icon node — defaults to a contextual SVG per color */
+    icon?: React.ReactNode;
+    /** Action buttons rendered in the trailing slot */
+    actions?: React.ReactNode;
+    /** Called when the dismiss/close button is clicked (shows the X button) */
+    onDismiss?: () => void;
+    className?: string;
+}
+
+declare function Alert({ color, iconStyle, layout, title, description, icon, actions, onDismiss, className, }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type ToastColor = "default" | "info" | "error" | "warning" | "success";
+interface ToastItem {
+    id: string;
+    color?: ToastColor;
+    title: string;
+    description?: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+    actions?: React$1.ReactNode;
+    /**
+     * Auto-dismiss delay in ms.
+     * Set to `0` to keep the toast visible until manually dismissed.
+     * @default 5000
+     */
+    duration?: number;
+}
+interface ToastContextValue {
+    addToast: (toast: Omit<ToastItem, "id">) => string;
+    removeToast: (id: string) => void;
+}
+
+declare function useToast(): ToastContextValue;
+declare function ToastProvider({ children }: {
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+type DatePickerValue = Date | null;
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DatePickerProps {
+    value?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+    onChange?: (date: DatePickerValue) => void;
+    /** Display the calendar inline without a trigger button */
+    inline?: boolean;
+    placeholder?: string;
+    isDisabled?: boolean;
+    className?: string;
+}
+interface DateTimePickerProps {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date | null) => void;
+    inline?: boolean;
+    placeholder?: string;
+    isDisabled?: boolean;
+    /**
+     * Custom time slot labels, e.g. ["9:00 AM", "9:30 AM", …].
+     * Defaults to 30-min slots from 9:00 AM to 8:30 PM.
+     */
+    timeSlots?: string[];
+    className?: string;
+}
+interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    inline?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+}
+
+declare function DatePicker({ value, defaultValue, onChange, inline, placeholder, isDisabled, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateTimePicker({ value, defaultValue, onChange, inline, placeholder, isDisabled, timeSlots, className, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ value, defaultValue, onChange, inline, isDisabled, className, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+
+type CalendarView = "month" | "week" | "day";
+type EventColor = "neutral" | "blue" | "green" | "purple" | "orange" | "pink" | "red" | "yellow";
+interface CalendarEventGuest {
+    name: string;
+    avatarUrl?: string;
+    initials?: string;
+}
+interface CalendarEvent {
+    id: string;
+    title: string;
+    date: Date;
+    /** Start time as "HH:MM" (24h) */
+    startTime: string;
+    /** End time as "HH:MM" (24h) */
+    endTime?: string;
+    color?: EventColor;
+    description?: string;
+    reminder?: string;
+    guests?: CalendarEventGuest[];
+    guestsYes?: number;
+    guestsAwaiting?: number;
+}
+interface CalendarProps {
+    /** Initial view to display */
+    defaultView?: CalendarView;
+    /** Controlled view */
+    view?: CalendarView;
+    /** Fired when the user switches view */
+    onViewChange?: (view: CalendarView) => void;
+    /** Initial date to focus (defaults to today) */
+    defaultDate?: Date;
+    /** Controlled focused date */
+    date?: Date;
+    /** Fired when the user navigates to a different period */
+    onDateChange?: (date: Date) => void;
+    /** Events to render on the calendar */
+    events?: CalendarEvent[];
+    /** Called when the user clicks "Add event" on a day cell */
+    onAddEvent?: (date: Date) => void;
+    /** Called when the user clicks an event chip */
+    onEventClick?: (event: CalendarEvent) => void;
+    className?: string;
+}
+
+declare function Calendar({ defaultView, view: controlledView, onViewChange, defaultDate, date: controlledDate, onDateChange, events, onAddEvent, onEventClick, className, }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+declare function getFileExtColor(name: string): string;
+declare function getFileExtLabel(name: string): string;
+interface FileTypeIconProps {
+    /**
+     * File name including extension (e.g. `"report.pdf"`).
+     * Used to derive the badge color and extension label.
+     */
+    name: string;
+    /**
+     * Visual style:
+     * - `"outline"` (default) — page outline with a colored extension badge
+     * - `"filled"` — fully colored page with a folded corner
+     */
+    variant?: "outline" | "filled";
+}
+declare function FileTypeIcon({ name, variant }: FileTypeIconProps): react_jsx_runtime.JSX.Element;
+
+type FileUploadStatus = "uploading" | "complete" | "error";
+type FileUploadVariant = "default" | "compact";
+interface UploadFile {
+    /** Unique identifier for this file entry */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Formatted size string, e.g. "720 KB" */
+    size: string;
+    /** Upload progress 0–100 */
+    progress?: number;
+    /** Current upload state */
+    status: FileUploadStatus;
+}
+interface FileUploadProps {
+    /** Visual layout — `default` shows a progress bar below filename; `compact` uses a background fill */
+    variant?: FileUploadVariant;
+    /** Currently tracked files */
+    files?: UploadFile[];
+    /** Called when user picks/drops new files */
+    onFilesAdded?: (files: File[]) => void;
+    /** Called when user clicks the delete button on a file row */
+    onFileRemove?: (id: string) => void;
+    /** Called when user clicks "Try again" on a failed file */
+    onRetry?: (id: string) => void;
+    /** Accepted MIME types / extensions, forwarded to <input accept> */
+    accept?: string;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Hint text shown beneath the upload icon (e.g. file type constraints) */
+    hint?: string;
+    /** Disable the dropzone and all interactions */
+    isDisabled?: boolean;
+    className?: string;
+}
+
+declare function FileUpload({ files, onFilesAdded, onFileRemove, onRetry, accept, multiple, variant, hint, isDisabled, className, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+/** ISO 3166-1 alpha-2 country code, e.g. "US", "GB", "DE" */
+type CountryCode = string;
+type CountryFlagSize = "xs" | "sm" | "md" | "lg" | "xl";
+type CountryFlagShape = "rectangular" | "rounded" | "circular";
+interface CountryFlagProps {
+    /** ISO 3166-1 alpha-2 country code (e.g. "US", "GB", "DE") */
+    code: CountryCode;
+    /** Flag size. xs 16px · sm 20px · md 24px · lg 32px · xl 48px */
+    size?: CountryFlagSize;
+    /** Shape variant: rectangular (3:2), rounded rectangle, or circular */
+    shape?: CountryFlagShape;
+    /** Additional class name on the outer wrapper */
+    className?: string;
+}
+
+declare function CountryFlag({ code, size, shape, className, }: CountryFlagProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Merges class names with Tailwind conflict resolution.
+ * Uses clsx for conditional logic and tailwind-merge to avoid
+ * duplicate/conflicting Tailwind utility classes.
+ */
+declare function cn(...inputs: ClassValue[]): 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 ToastColor, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipColor, type TooltipPlacement, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, type UploadFile, cn, getFileExtColor, getFileExtLabel, useToast };