import React, { useEffect, Dispatch, SetStateAction, RefObject, ReactNode } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { FieldValues, UseFormReturn, FieldPath, RegisterOptions, UseControllerProps, ControllerRenderProps, ControllerFieldState } from 'react-hook-form';
export { FieldValues, FieldPath as Path, UseFormReturn } from 'react-hook-form';
import { ColumnDef, Table } from '@tanstack/react-table';
export { ColumnDef, ColumnFiltersState, ColumnHelper, PaginationState, Row, RowSelectionState, SortingState, VisibilityState, createColumnHelper } from '@tanstack/react-table';
import { EmblaOptionsType, EmblaPluginType, EmblaCarouselType } from 'embla-carousel';

declare const containerWidth: {
    readonly sm: "max-w-2xl";
    readonly md: "max-w-3xl";
    readonly lg: "max-w-4xl";
    readonly xl: "max-w-5xl";
    readonly '2xl': "max-w-6xl";
    readonly '3xl': "max-w-7xl";
    readonly '4xl': "max-w-[1400px]";
    readonly '5xl': "max-w-[1600px]";
    readonly '6xl': "max-w-[1800px]";
    readonly '7xl': "max-w-[2000px]";
    readonly prose: "max-w-prose";
    readonly full: "max-w-none";
};
declare const pageGutter: {
    readonly 0: "px-0";
    readonly sm: "px-3";
    readonly md: "px-4 sm:px-6";
    readonly lg: "px-4 sm:px-6 lg:px-8";
    readonly xl: "px-6 sm:px-8 lg:px-12";
};
declare const sectionRhythm: {
    readonly none: "py-0";
    readonly sm: "py-8 sm:py-12";
    readonly md: "py-12 sm:py-16";
    readonly lg: "py-16 sm:py-20 lg:py-24";
    readonly xl: "py-20 sm:py-28 lg:py-32";
};
declare const stackGap: {
    readonly 0: "gap-0";
    readonly 1: "gap-1";
    readonly 2: "gap-2";
    readonly 3: "gap-3";
    readonly 4: "gap-4";
    readonly 5: "gap-5";
    readonly 6: "gap-6";
    readonly 8: "gap-8";
    readonly 10: "gap-10";
    readonly 12: "gap-12";
    readonly 16: "gap-16";
};
declare const rhythm: {
    readonly eyebrowToHeadline: "mt-5";
    readonly headlineToSubline: "mt-3";
    readonly sublineToCtas: "mt-7";
    readonly ctasToMeta: "mt-10";
    readonly metaToInstall: "mt-5";
};
/**
 * Layout/surface-scale tone tokens — consumed by the card/layout/hero family
 * (PixelCard, PixelBox, PixelBentoCell, PixelHeroSection, PixelSidebar, …).
 *
 * DECISION (do not "sync" with `toneMap` in common.tsx): this map and
 * `toneMap` are two deliberately distinct tiers, and BOTH are rendered
 * truth for their own consumers:
 *  - `toneMap` (common.tsx) targets control-scale chrome (buttons, badges,
 *    inputs, chips) and uses `border-*\/40` — borders must stay visible at
 *    body-text sizes.
 *  - this `tone` map targets large surfaces (cards, sections) and uses
 *    `border-*\/30` plus a `glow` shadow — large areas need softer borders
 *    to avoid visual heaviness (and it has no `hover` tier; surfaces are
 *    not interactive by default).
 * Aligning the values either way would change rendered pixels for one of
 * the two component families, so the divergence is intentional and kept.
 */
declare const tone: {
    readonly neutral: {
        readonly border: "border-retro-border";
        readonly bg: "bg-retro-surface/40";
        readonly soft: "bg-retro-surface/20";
        readonly glow: "shadow-[0_0_24px_-12px_rgba(0,0,0,0.4)]";
        readonly ring: "focus-visible:ring-retro-border";
        readonly text: "text-retro-text";
        readonly fill: "bg-retro-muted";
    };
    readonly green: {
        readonly border: "border-retro-green/30";
        readonly bg: "bg-retro-green/18";
        readonly soft: "bg-retro-green/8";
        readonly glow: "shadow-[0_0_24px_-8px_rgba(0,255,128,0.45)]";
        readonly ring: "focus-visible:ring-retro-green/40";
        readonly text: "text-retro-green";
        readonly fill: "bg-retro-green";
    };
    readonly cyan: {
        readonly border: "border-retro-cyan/30";
        readonly bg: "bg-retro-cyan/18";
        readonly soft: "bg-retro-cyan/8";
        readonly glow: "shadow-[0_0_24px_-8px_rgba(14,165,233,0.45)]";
        readonly ring: "focus-visible:ring-retro-cyan/40";
        readonly text: "text-retro-cyan";
        readonly fill: "bg-retro-cyan";
    };
    readonly gold: {
        readonly border: "border-retro-gold/30";
        readonly bg: "bg-retro-gold/18";
        readonly soft: "bg-retro-gold/8";
        readonly glow: "shadow-[0_0_24px_-8px_rgba(234,179,8,0.45)]";
        readonly ring: "focus-visible:ring-retro-gold/40";
        readonly text: "text-retro-gold";
        readonly fill: "bg-retro-gold";
    };
    readonly red: {
        readonly border: "border-retro-red/30";
        readonly bg: "bg-retro-red/18";
        readonly soft: "bg-retro-red/8";
        readonly glow: "shadow-[0_0_24px_-8px_rgba(239,68,68,0.45)]";
        readonly ring: "focus-visible:ring-retro-red/40";
        readonly text: "text-retro-red";
        readonly fill: "bg-retro-red";
    };
    readonly purple: {
        readonly border: "border-retro-purple/30";
        readonly bg: "bg-retro-purple/18";
        readonly soft: "bg-retro-purple/8";
        readonly glow: "shadow-[0_0_24px_-8px_rgba(168,85,247,0.45)]";
        readonly ring: "focus-visible:ring-retro-purple/40";
        readonly text: "text-retro-purple";
        readonly fill: "bg-retro-purple";
    };
    readonly pink: {
        readonly border: "border-retro-pink/30";
        readonly bg: "bg-retro-pink/18";
        readonly soft: "bg-retro-pink/8";
        readonly glow: "shadow-[0_0_24px_-8px_rgba(236,72,153,0.45)]";
        readonly ring: "focus-visible:ring-retro-pink/40";
        readonly text: "text-retro-pink";
        readonly fill: "bg-retro-pink";
    };
};
declare const durations: {
    readonly fast: "duration-150";
    readonly normal: "duration-200";
    readonly slow: "duration-300";
    readonly slower: "duration-500";
};
declare const easings: {
    readonly standard: "ease-out";
    readonly bounce: "ease-[cubic-bezier(.34,1.56,.64,1)]";
    readonly linear: "ease-linear";
};
type ContainerWidth = keyof typeof containerWidth;
type PageGutter = keyof typeof pageGutter;
type SectionRhythmKey = keyof typeof sectionRhythm;
type StackGapKey = keyof typeof stackGap;
type RhythmKey = keyof typeof rhythm;
type ToneKey = keyof typeof tone;

/**
 * Wrap a subtree to change the default `surface` of every nested Pxlkit
 * component without setting the prop on each one individually.
 *
 * @example
 * <PxlKitSurfaceProvider surface="linear">
 *   <PixelButton>Looks modern</PixelButton>
 * </PxlKitSurfaceProvider>
 */
declare function PxlKitSurfaceProvider({ surface, children, }: {
    surface?: Surface;
    children: React.ReactNode;
}): react_jsx_runtime.JSX.Element;

type Tone = 'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink' | 'neutral';
type Size$1 = 'sm' | 'md' | 'lg';
/**
 * Shared visual weight axis used across the kit. Every component that has
 * a visible body picks one of these.
 *
 * - `solid` — opaque tone background + contrasting text (highest weight).
 * - `soft` — tinted tone background + tone text (default for cards / badges / chips).
 * - `ghost` — transparent body until hover, tone text + border.
 * - `outline` — transparent body, tone border, tone text.
 *
 * Components that historically only accepted `solid | ghost` continue to do
 * so; this union is the canonical superset and is what new components should
 * accept.
 */
type Variant$1 = 'solid' | 'soft' | 'ghost' | 'outline';
type Option = {
    value: string;
    label: string;
    icon?: React.ReactNode;
};
type TabItem = {
    id: string;
    label: string;
    icon?: React.ReactNode;
    content: React.ReactNode;
};
type AccordionItem = {
    id: string;
    title: string;
    content: React.ReactNode;
};
/**
 * Surface — visual aesthetic of a Pxlkit component.
 *
 * - `"pixel"` (default) — chunky 2px borders, sharp pixel-art corners, offset
 *   block shadow with no blur, mono typography. Matches the brand identity.
 * - `"linear"` — soft 1px borders, gentle rounded corners, blurred drop
 *   shadows, sans typography. For projects that want the same components
 *   without the retro aesthetic.
 *
 * Every component reads its surface from the nearest `PxlKitSurfaceProvider`
 * (default: `"pixel"`); the `surface` prop on a component overrides the
 * provider for that single instance.
 */
type Surface = 'pixel' | 'linear';
/**
 * Class bundles returned by `surfaceClasses(surface)`.
 * Every component composes these to match the active aesthetic.
 */
interface SurfaceClasses {
    /** Border width — `border-2` (pixel) vs `border` (linear). */
    border: string;
    /** Standard interactive radius. */
    radius: string;
    /** Larger radius for cards / modals / panels. */
    radiusLg: string;
    /** Radius for chips and badges (pill in linear, chamfered in pixel). */
    radiusFull: string;
    /** Resting drop shadow. */
    shadow: string;
    /** Hover shadow (subtle elevation change). */
    shadowHover: string;
    /** Active / pressed shadow. */
    shadowActive: string;
    /** Body / control typography. */
    font: string;
    /** Display / heading typography. */
    fontDisplay: string;
    /** Transition timing. */
    transition: string;
    /** Press feedback — pixel translates, linear scales. */
    press: string;
}
/**
 * Resolve surface-specific class strings.
 * @example
 * const s = surfaceClasses(surface);
 * <div className={cn(s.border, s.radius, s.shadow)}>...</div>
 */
declare function surfaceClasses(surface?: Surface): SurfaceClasses;
declare function usePxlKitSurface(): Surface;
declare function cn(...classes: Array<string | false | null | undefined>): string;
/**
 * Per-tone class bundle. Conventions:
 *  - `bg`   ≈ 18 % tint — soft surface for chip / badge / alert / stat bodies.
 *    18 % (vs the 10 % we used pre-v1.4.3) brings light-theme contrast above
 *    the 3:1 floor for badge text on light backgrounds.
 *  - `soft` ≈ 8 % tint — even gentler surface for hover states or nested fills.
 *  - `hover` adds another ~7 % on interaction.
 *  - `border` 40 % opacity — visible at body sizes; for thin dividers prefer
 *    `border-retro-border` or `/30`.
 *  - `ring`  40 % — keyboard focus ring.
 *  - `fill`  opaque — solid tone backgrounds (`solid` variant of any
 *    component).
 *
 * NOTE: `tokens.ts` exports a *separate* `tone` map for layout/surface-scale
 * components (cards, hero, bento, …) that intentionally uses `border-*\/30`
 * + a `glow` tier. The two maps are different design tiers, not a drifted
 * copy — see the decision comment on `tone` in tokens.ts before changing
 * either one to "match" the other.
 */
declare const toneMap: Record<Tone, {
    ring: string;
    text: string;
    border: string;
    bg: string;
    soft: string;
    hover: string;
    fill: string;
}>;
/**
 * Default control geometry — height + horizontal padding + text size + gap.
 * Used by interactive elements that own their own padding (`PixelButton`,
 * `PixelInput`, `PixelSelect`, ...).
 */
declare const sizeClass: Record<Size$1, string>;
/**
 * Standalone control height + body text size (no horizontal padding) — for
 * elements that provide their own internal layout: input shells, sliders,
 * switches, container divs. Matches `sizeClass` height / text-size for
 * baseline-level consistency with other controls on the same form row.
 */
declare const sizeHeight: Record<Size$1, string>;
/**
 * Square control geometry — for icon buttons, avatars, swatches and any
 * other control where width = height. Single source of truth replacing the
 * inline ternaries in actions / data-display / inputs.
 */
declare const sizeSquare: Record<Size$1, string>;
/**
 * Pixel "dot" — small interactive squares (checkbox, switch handle, radio
 * marker, slider thumb). Sized for crisp pixel rendering, not tied to the
 * text scale.
 */
declare const pixelDot: Record<Size$1, string>;
/**
 * Two flavours of pixel corner. `dot` is the 2 px rounded square used on
 * inline indicators; `square` is the 3 px corner used on avatars and small
 * card chips. Use these instead of inlining `rounded-[2px]` everywhere.
 */
declare const pixelRadius: {
    readonly dot: "rounded-[2px]";
    readonly square: "rounded-[3px]";
};
/**
 * Pixel typography scale. Drops any text below 10 px (below WCAG sidebar
 * thresholds) and pins the available steps for the kit. Use these instead
 * of arbitrary `text-[9px]` etc. on body text — the `micro` step is
 * intentionally the floor.
 */
declare const pixelType: {
    /** 10 px — chips, kbd, tooltips. */
    readonly micro: "text-[10px]";
    /** 12 px — captions, helper text. */
    readonly xs: "text-xs";
    /** 14 px — body. */
    readonly sm: "text-sm";
    /** 16 px — section bodies. */
    readonly base: "text-base";
};
declare const focusRing = "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-retro-bg";
/**
 * Base styles shared by every input shell. Notably does NOT pin a radius
 * — the active `SurfaceClasses.radius` owns radius — and uses
 * `bg-retro-surface/40` (with `/70` on focus) so inputs stay visually
 * "depressed" against both `retro-bg` (page) and `retro-card` (cards) in
 * either theme.
 */
declare const inputBase = "w-full border bg-retro-surface/40 focus:bg-retro-surface/70 text-retro-text font-mono transition-all outline-none disabled:opacity-50 disabled:cursor-not-allowed";

type BentoSpan = '2x2' | '2x1' | '1x2' | '1x1' | '3x1' | '1x3';
type BentoKind = 'feature' | 'stat' | 'compact' | 'media';
interface PixelBentoCellProps extends React.HTMLAttributes<HTMLDivElement> {
    span?: BentoSpan;
    /** Canonical structural variant. */
    variant?: BentoKind;
    /**
     * @deprecated Use `variant` instead. Retained as alias for one minor.
     */
    kind?: BentoKind;
    tone?: ToneKey;
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to false (no chrome). */
    bordered?: boolean;
}
declare const PixelBentoCell: React.ForwardRefExoticComponent<PixelBentoCellProps & React.RefAttributes<HTMLDivElement>>;

type BentoColumns = 3 | 4 | 6;
interface PixelBentoProps extends React.HTMLAttributes<HTMLDivElement> {
    columns?: BentoColumns;
    gap?: StackGapKey;
}
declare const PixelBento: React.ForwardRefExoticComponent<PixelBentoProps & React.RefAttributes<HTMLDivElement>>;

type BoxPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type BoxRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
type BoxAs = 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'nav';
interface PixelBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
    tone?: Tone;
    surface?: Surface;
    variant?: Variant$1;
    padding?: BoxPadding;
    radius?: BoxRadius;
    /**
     * Whether to render a border. Defaults to `true` when `variant === 'outline'`
     * (outlines without a border are meaningless), `false` otherwise. Pass `true`
     * to force a border on `solid`/`soft`/`ghost`; pass `false` to force-off on
     * outline. Note: when polymorphic `as` is a landmark element (`section`,
     * `nav`, `aside`, `main`), supply `aria-label` or `aria-labelledby` for a11y.
     */
    border?: boolean;
    shadow?: boolean;
    as?: BoxAs;
}
/**
 * Surface-aware container box.
 *
 * Polymorphic ref note: the ref is typed `HTMLDivElement` because that's the
 * default render target. When you set `as="nav"` / `"section"` etc, the
 * underlying element is still focusable/queryable via the ref — TypeScript
 * just won't know the narrower subtype. If you need a narrower type, cast at
 * the call site or use `React.useRef<HTMLElement>()`.
 */
declare const PixelBox: React.ForwardRefExoticComponent<PixelBoxProps & React.RefAttributes<HTMLDivElement>>;

interface PixelCenterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'align'> {
    maxWidth?: ContainerWidth;
    gutter?: PageGutter;
    /** Text alignment of the centered content (canonical). */
    align?: 'left' | 'center' | 'right';
    /**
     * @deprecated Use `align` instead. Retained as alias for one minor.
     */
    text?: 'left' | 'center' | 'right';
    inline?: boolean;
    as?: keyof React.JSX.IntrinsicElements;
    surface?: Surface;
    bordered?: boolean;
}
declare const PixelCenter: React.ForwardRefExoticComponent<PixelCenterProps & React.RefAttributes<HTMLDivElement>>;

interface PixelClusterProps extends React.HTMLAttributes<HTMLDivElement> {
    gap?: StackGapKey;
    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
    as?: keyof React.JSX.IntrinsicElements;
    surface?: Surface;
}
declare const PixelCluster: React.ForwardRefExoticComponent<PixelClusterProps & React.RefAttributes<HTMLDivElement>>;

interface PixelContainerProps extends React.HTMLAttributes<HTMLElement> {
    maxWidth?: ContainerWidth;
    padding?: SectionRhythmKey | {
        x?: PageGutter;
        y?: SectionRhythmKey;
    };
    surface?: Surface;
    as?: 'section' | 'main' | 'header' | 'footer' | 'article' | 'aside' | 'div';
}
declare const PixelContainer: React.ForwardRefExoticComponent<PixelContainerProps & React.RefAttributes<HTMLElement>>;

interface PixelDividerProps {
    /** Optional centered label between two rules. */
    label?: string;
    /** Color tone of the label text. */
    tone?: Tone;
    /** Symmetric vertical padding. */
    spacing?: 'none' | 'sm' | 'md' | 'lg';
    className?: string;
    /** Surface variant. Falls back to nearest <PxlKitSurface>. */
    surface?: Surface;
}
declare function PixelDivider({ label, tone, spacing, className, surface: surfaceProp, }: PixelDividerProps): react_jsx_runtime.JSX.Element;

type ColCount = 1 | 2 | 3 | 4 | 5 | 6 | 12;
type RowCount = 1 | 2 | 3 | 4 | 5 | 6;
type ResponsiveCols = {
    base?: ColCount;
    sm?: ColCount;
    md?: ColCount;
    lg?: ColCount;
    xl?: ColCount;
};
interface PixelGridProps extends React.HTMLAttributes<HTMLDivElement> {
    cols?: ColCount | ResponsiveCols;
    rows?: RowCount;
    gap?: StackGapKey;
    colGap?: StackGapKey;
    rowGap?: StackGapKey;
    autoFit?: boolean;
    autoFill?: boolean;
    minColWidth?: string;
    align?: 'start' | 'center' | 'end' | 'stretch';
    justify?: 'start' | 'center' | 'end' | 'stretch';
    as?: keyof React.JSX.IntrinsicElements;
    surface?: Surface;
}
declare const PixelGrid: React.ForwardRefExoticComponent<PixelGridProps & React.RefAttributes<HTMLDivElement>>;

interface PixelEqualHeightGridProps extends Omit<PixelGridProps, 'align'> {
    rowAlign?: 'top' | 'stretch';
}
declare const PixelEqualHeightGrid: React.ForwardRefExoticComponent<PixelEqualHeightGridProps & React.RefAttributes<HTMLDivElement>>;

type ScrollType = 'auto' | 'always' | 'scroll' | 'hover';
interface PixelScrollAreaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'type'> {
    maxHeight?: string | number;
    /** Canonical structural variant (scrollbar visibility mode). */
    variant?: ScrollType;
    /**
     * @deprecated Use `variant` instead. Retained as alias for one minor.
     */
    type?: ScrollType;
    offsetScrollbars?: boolean;
    scrollbarSize?: number;
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to false (no chrome). */
    bordered?: boolean;
    /**
     * Accessible name for the scrollable region. Required for keyboard users to
     * understand what they've landed on. Provide either `aria-label` or
     * `aria-labelledby`. In dev, a missing label logs a warning.
     */
    'aria-label'?: string;
    'aria-labelledby'?: string;
    children: React.ReactNode;
}
/**
 * Surface-aware scroll container with styled scrollbar (CSS `scrollbar-width`
 * + `::-webkit-scrollbar`). Use `type` to control scrollbar visibility,
 * `maxHeight` to cap height before content scrolls.
 *
 * The styled scrollbar palette is owned by `styles.css` `.pxl-scroll-*`
 * classes; this component only wires the variant + dimensions.
 */
declare const PixelScrollArea: React.ForwardRefExoticComponent<PixelScrollAreaProps & React.RefAttributes<HTMLDivElement>>;

interface PixelSectionProps {
    /** Title rendered as an uppercase heading row at the top of the section. */
    title?: string;
    /** Optional subtitle below the title. */
    subtitle?: string;
    children: React.ReactNode;
    /** Surface variant. Falls back to nearest <PxlKitSurface>. */
    surface?: Surface;
    /** Inner container max-width. Pass `false` to skip the centered container wrapper. */
    container?: ContainerWidth | false;
    /** Vertical padding token (margin between consecutive sections). */
    verticalPadding?: SectionRhythmKey;
    /** Horizontal gutter token (used only when `container` is `false`). */
    horizontalGutter?: PageGutter;
    /** Render with surface-aware border + radius chrome. Defaults to false (no chrome). */
    bordered?: boolean;
}
declare const PixelSection: React.ForwardRefExoticComponent<PixelSectionProps & React.RefAttributes<HTMLElement>>;

interface PixelSectionHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
    eyebrow?: string;
    title: string;
    titleTone?: ToneKey;
    description?: string;
    align?: 'start' | 'center';
    size?: 'sm' | 'md' | 'lg';
    spacing?: 'tight' | 'normal' | 'loose';
    actions?: React.ReactNode;
    as?: 'h1' | 'h2' | 'h3' | 'h4';
    surface?: Surface;
}
declare const PixelSectionHeader: React.ForwardRefExoticComponent<PixelSectionHeaderProps & React.RefAttributes<HTMLElement>>;

interface PixelStackProps extends React.HTMLAttributes<HTMLDivElement> {
    direction?: 'col' | 'row';
    gap?: StackGapKey;
    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
    wrap?: boolean;
    inline?: boolean;
    as?: keyof React.JSX.IntrinsicElements;
    surface?: Surface;
}
declare const PixelStack: React.ForwardRefExoticComponent<PixelStackProps & React.RefAttributes<HTMLDivElement>>;

type Ratio$1 = '50/50' | '60/40' | '40/60' | '70/30' | '30/70';
type StackBp = 'sm' | 'md' | 'lg';
type Align$1 = 'start' | 'center' | 'end' | 'stretch';
interface PixelTwoColumnProps extends React.HTMLAttributes<HTMLDivElement> {
    ratio?: Ratio$1;
    gap?: StackGapKey;
    reverse?: boolean;
    stackBelow?: StackBp;
    align?: Align$1;
    left: React.ReactNode;
    right: React.ReactNode;
    surface?: Surface;
    as?: keyof React.JSX.IntrinsicElements;
    bordered?: boolean;
}
declare const PixelTwoColumn: React.ForwardRefExoticComponent<PixelTwoColumnProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Attach a typed event listener to `target` (default: `window`) for the
 * component lifetime. The listener is held in a ref so updating the
 * `listener` prop across re-renders does NOT detach/reattach — only `type`
 * or `target` (or a meaningfully-different `options` object) cause a
 * re-subscription. SSR-safe: a `null` target (or `window` when not in a
 * browser) is a no-op.
 */
declare function useEventListener<K extends keyof WindowEventMap>(type: K, listener: (e: WindowEventMap[K]) => void, target?: Window | null, options?: AddEventListenerOptions): void;
declare function useEventListener<K extends keyof DocumentEventMap>(type: K, listener: (e: DocumentEventMap[K]) => void, target: Document | null, options?: AddEventListenerOptions): void;
declare function useEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (e: HTMLElementEventMap[K]) => void, target: HTMLElement | null, options?: AddEventListenerOptions): void;

declare const useIsomorphicLayoutEffect: typeof useEffect;

/**
 * Subscribe to a CSS media query.
 *
 * SSR-safe: returns `defaultValue` (default `false`) when `window` is
 * undefined or `matchMedia` is unavailable. On mount, syncs to the current
 * match state and subscribes to `change` events. Re-subscribes when the
 * `query` string changes and cleans up its listener on unmount.
 *
 * @example
 * const isDesktop = useMediaQuery('(min-width: 768px)');
 */
declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;

/**
 * Subscribe to the user's `prefers-reduced-motion: reduce` setting.
 *
 * Returns `true` when the OS-level reduced-motion preference is active.
 * Thin wrapper over `useMediaQuery` — SSR-safe (defaults to `false` on the
 * server) and automatically reacts to OS-level toggles at runtime.
 *
 * @example
 * const reduced = useReducedMotion();
 * <div className={reduced ? '' : 'animate-pulse'}>...</div>
 */
declare function useReducedMotion(): boolean;

interface UseLocalStorageOptions<T> {
    /** Custom serializer (default: `JSON.stringify`). */
    serialize?: (value: T) => string;
    /** Custom deserializer (default: `JSON.parse`). */
    deserialize?: (raw: string) => T;
    /** Subscribe to cross-tab `storage` events. Default `true`. */
    syncTabs?: boolean;
}
/**
 * Persistent state synced to `window.localStorage`.
 *
 * SSR-safe: returns `initialValue` on first paint when `window` is undefined,
 * then hydrates from localStorage in an effect. Returns a tuple of
 * `[value, setValue, remove]`. `setValue` accepts a value or an updater
 * function (same signature as `useState`). `remove` deletes the key and resets
 * state back to `initialValue`.
 *
 * When `syncTabs` is `true` (default) the hook listens for `storage` events on
 * `window` and updates state when another tab mutates the same key.
 */
declare function useLocalStorage<T>(key: string, initialValue: T, opts?: UseLocalStorageOptions<T>): readonly [T, (next: T | ((prev: T) => T)) => void, () => void];

type DarkMode = 'light' | 'dark' | 'system';
type ResolvedMode = 'light' | 'dark';
declare function useDarkMode(): {
    mode: DarkMode;
    resolved: ResolvedMode;
    setMode: (m: DarkMode) => void;
};

interface UseControllableStateOptions<T> {
    value?: T;
    defaultValue?: T;
    onChange?: (next: T) => void;
}
/**
 * Hook for a value that may be either controlled (`value` prop set) or
 * uncontrolled (use `defaultValue`). The returned setter is
 * `Dispatch<SetStateAction<T>>` so it plugs into any React API that expects
 * a state setter.
 *
 * Overloads:
 * - If `value` is `T | undefined` (i.e. potentially uncontrolled), the
 *   `defaultValue` is required — otherwise the hook would return
 *   `undefined` pretending to be `T`.
 * - If `value` is explicitly `T`, `defaultValue` is optional.
 */
declare function useControllableState<T>(opts: {
    value: T;
    defaultValue?: T;
    onChange?: (next: T) => void;
}): readonly [T, Dispatch<SetStateAction<T>>];
declare function useControllableState<T>(opts: {
    value?: T;
    defaultValue: T;
    onChange?: (next: T) => void;
}): readonly [T, Dispatch<SetStateAction<T>>];

/**
 * Fires `handler` when the user presses Escape anywhere in the window.
 *
 * @param handler - Invoked with the originating `KeyboardEvent` when Escape is pressed.
 * @param enabled - Toggle the listener without unmounting (default `true`). When
 *   `false`, no listener is attached and Escape presses are ignored.
 */
declare function useEscape(handler: (e: KeyboardEvent) => void, enabled?: boolean): void;

/**
 * Lock page scroll while `active` is true. Multiple consumers stack — body
 * scroll is restored only after every lock has released.
 *
 * iOS Safari note: simply setting `body { overflow: hidden }` does NOT stop
 * touch scroll. This hook ALSO pins the body via `position: fixed` (saving the
 * current scrollY in `body.top`) and restores `window.scrollTo(savedScrollY)`
 * on release. This works on iOS, desktop, and Android.
 *
 * a11y note: this hook only locks scroll. Background content remains
 * readable by assistive tech. Modal callers should additionally apply
 * `inert` (or `aria-hidden="true"`) to siblings of the modal root and use
 * `useFocusTrap` to keep keyboard focus inside the modal.
 */
declare function useScrollLock(active: boolean): void;

/**
 * Trap Tab focus inside `containerRef.current` while `active` is true.
 *
 * - On activate: snapshot `document.activeElement`, then focus the first
 *   focusable element inside the container.
 * - On Tab / Shift+Tab: cycle focus within the container's focusable
 *   children (ignores elements hidden via `aria-hidden`, `hidden`,
 *   `display:none`, or `visibility:hidden`).
 * - On deactivate: restore focus to the element that had it before — only
 *   if it's still in the DOM and focusable; otherwise falls back to body.
 */
declare function useFocusTrap(active: boolean, containerRef: RefObject<HTMLElement | null>): void;

type RibbonPosition = 'top-center' | 'top-left' | 'top-right' | 'corner-tl' | 'corner-tr';
type RibbonOffset = 'sm' | 'md' | 'lg';
interface PixelRibbonProps extends React.HTMLAttributes<HTMLDivElement> {
    position?: RibbonPosition;
    tone?: ToneKey;
    offset?: RibbonOffset;
    tilt?: number;
    surface?: Surface;
    children: React.ReactNode;
}
declare const PixelRibbon: React.ForwardRefExoticComponent<PixelRibbonProps & React.RefAttributes<HTMLDivElement>>;

type IconSize = 48 | 56 | 64 | 80;
type DescLines = 2 | 3 | 4;
type Orientation$1 = 'vertical' | 'horizontal';
interface PixelFeatureCardProps extends React.HTMLAttributes<HTMLElement> {
    icon?: React.ReactNode;
    iconSize?: IconSize;
    badge?: {
        label: string;
        tone?: ToneKey;
    };
    title: string;
    /** Muted paragraph rendered under the title. */
    description?: string;
    /** Apply `line-clamp-N` + `min-h-[N lh]` to the description. */
    descriptionLines?: DescLines;
    /** @deprecated Use `description` for consistency with PixelCard / PixelPricingCard. */
    desc?: string;
    /** @deprecated Use `descriptionLines` for consistency with PixelCard / PixelPricingCard. */
    descLines?: DescLines;
    footer?: React.ReactNode;
    tone?: ToneKey;
    interactive?: boolean;
    /**
     * When provided, the card renders as `<a href>` and accepts anchor-specific
     * attributes via the spread. Nesting interactive children inside the card
     * (e.g. PixelButton, PixelTextLink) is invalid HTML in this mode.
     */
    href?: string;
    /** Anchor target — only meaningful when `href` is set. */
    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
    /** Anchor rel — only meaningful when `href` is set. */
    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
    /** Anchor download — only meaningful when `href` is set. */
    download?: React.AnchorHTMLAttributes<HTMLAnchorElement>['download'];
    /** When `interactive=true` without `href`, an onClick is REQUIRED for accessibility. */
    onClick?: React.MouseEventHandler<HTMLElement>;
    orientation?: Orientation$1;
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to true — a feature card needs visible chrome. */
    bordered?: boolean;
}
declare const PixelFeatureCard: React.ForwardRefExoticComponent<PixelFeatureCardProps & React.RefAttributes<HTMLElement>>;

interface PixelPricingCardProps extends React.HTMLAttributes<HTMLElement> {
    tone?: ToneKey;
    icon?: React.ReactNode;
    name: string;
    description?: string;
    /** Clamp the description to N lines. Defaults to 2; use 'none' to let long copy flow. */
    descriptionLines?: 2 | 3 | 'none';
    price: {
        amount: string | number;
        period?: string;
        strikethrough?: string | number;
    };
    /** Promo badge rendered beside the price (e.g. a discount PixelBadge). */
    priceBadge?: React.ReactNode;
    popular?: {
        label?: string;
        tone?: ToneKey;
    };
    features?: {
        label: string;
        tooltip?: string;
        included?: boolean;
        highlight?: boolean;
    }[];
    cta?: React.ReactNode;
    highlight?: boolean;
    footer?: React.ReactNode;
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to true — a pricing card needs visible chrome. */
    bordered?: boolean;
}
declare const PixelPricingCard: React.ForwardRefExoticComponent<PixelPricingCardProps & React.RefAttributes<HTMLElement>>;

type QuoteSize = 'compact' | 'normal' | 'long';
type Variant = 'card' | 'quote' | 'slider';
interface PixelTestimonialCardProps extends React.HTMLAttributes<HTMLElement> {
    quote: string;
    name: string;
    role?: string;
    company?: string;
    avatar?: {
        src?: string;
        name: string;
        tone?: ToneKey;
    };
    stars?: number;
    verified?: boolean;
    tone?: ToneKey;
    variant?: Variant;
    quoteSize?: QuoteSize;
    actions?: React.ReactNode;
    surface?: Surface;
}
declare const PixelTestimonialCard: React.ForwardRefExoticComponent<PixelTestimonialCardProps & React.RefAttributes<HTMLElement>>;

type StarSize = 'sm' | 'md' | 'lg';
type StarTone = 'gold' | 'green';
interface PixelStarRatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
    /** Controlled rating value (0..max). */
    value?: number;
    /** Uncontrolled initial rating value (0..max). */
    defaultValue?: number;
    /** Total number of stars rendered. Default 5. */
    max?: number;
    /** Visual size of each star — maps to 16 / 20 / 24 px for sm / md / lg. */
    size?: StarSize;
    /** Color tone applied to filled stars. */
    tone?: StarTone;
    /** When true, renders "N/M" beside the stars. */
    showCount?: boolean;
    /** When true, exposes each star as a button that updates the rating on click. */
    interactive?: boolean;
    /** Called with the new rating when the user clicks a star (interactive only). */
    onChange?: (next: number) => void;
    /** Override the ambient surface (pixel | linear). */
    surface?: Surface;
    /**
     * Polymorphic escape hatch. Replace the default gamification Star glyph
     * with any custom node, or a render function called per-star with
     * `{ filled, size, tone }` so the caller can choose a different sibling
     * pack icon (Heart, Coin, Crown…) without forking the component.
     *
     * - `undefined` (default) → render the gamification {@link Star} for
     *   filled positions and the inline outlined rect-SVG for empty ones.
     * - `ReactNode` → render for filled positions only; empty positions
     *   continue to use the outlined fallback for the empty-state silhouette.
     * - `(args) => ReactNode` → render for both filled and empty positions,
     *   giving full control over the glyph in every state.
     */
    starIcon?: ReactNode | ((args: {
        filled: boolean;
        size: number;
        tone: StarTone;
    }) => ReactNode);
}
declare const PixelStarRating: React.ForwardRefExoticComponent<PixelStarRatingProps & React.RefAttributes<HTMLDivElement>>;

type FrameSize = 48 | 56 | 64 | 80 | 112;
type FrameShape = 'square' | 'rounded' | 'circle';
type AccentPosition = 'top-right' | 'bottom-right';
interface PixelIconFrameProps extends React.HTMLAttributes<HTMLDivElement> {
    icon: React.ReactNode;
    size?: FrameSize;
    tone?: ToneKey;
    shape?: FrameShape;
    accent?: {
        icon: React.ReactNode;
        position?: AccentPosition;
    };
    animated?: boolean;
    surface?: Surface;
}
declare const PixelIconFrame: React.ForwardRefExoticComponent<PixelIconFrameProps & React.RefAttributes<HTMLDivElement>>;

type HeadlineEffect = 'typewriter' | 'glitch' | 'none';
type HeroVariant = 'centered' | 'split' | 'parallax';
type HeroDensity = 'compact' | 'comfortable';
type HeroMinHeight = 'sm' | 'md' | 'lg' | 'fullscreen';
interface PixelHeroSectionProps extends React.HTMLAttributes<HTMLElement> {
    variant?: HeroVariant;
    eyebrow?: string;
    headline: string;
    headlineEffect?: HeadlineEffect;
    subline?: string;
    primaryCta?: React.ReactNode;
    secondaryCta?: React.ReactNode;
    install?: React.ReactNode;
    meta?: React.ReactNode;
    media?: React.ReactNode;
    tone?: ToneKey;
    density?: HeroDensity;
    minHeight?: HeroMinHeight;
    surface?: Surface;
}
declare const PixelHeroSection: React.ForwardRefExoticComponent<PixelHeroSectionProps & React.RefAttributes<HTMLElement>>;

type Ratio = '1/1' | '4/5' | '16/10' | '16/9';
type Anchor = 'center' | 'baseline-headline';
interface PixelHeroMediaProps extends React.HTMLAttributes<HTMLElement> {
    ratio?: Ratio;
    anchor?: Anchor;
    framed?: boolean;
    tone?: ToneKey;
    caption?: string;
    /** Optional className applied to the inner caption (figcaption). */
    captionClassName?: string;
    surface?: Surface;
    children: React.ReactNode;
}
declare const PixelHeroMedia: React.ForwardRefExoticComponent<PixelHeroMediaProps & React.RefAttributes<HTMLElement>>;

interface PixelPortalProps {
    children: React.ReactNode;
    container?: HTMLElement | null;
    disabled?: boolean;
}
/**
 * Portals children to `container` (default: `document.body`). On the server
 * AND on the first client render, renders children inline so SSR + first-paint
 * hydration are non-empty; switches to a real `createPortal` after mount.
 */
declare const PixelPortal: React.ForwardRefExoticComponent<PixelPortalProps & React.RefAttributes<HTMLDivElement>>;

type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
type PopoverAlign = 'start' | 'center' | 'end';
type PopoverHasPopup = 'dialog' | 'listbox' | 'menu' | 'tree' | 'grid';
type PopoverRole = 'dialog' | 'none' | 'listbox' | 'menu';
interface PixelPopoverProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    children: React.ReactNode;
    side?: PopoverSide;
    align?: PopoverAlign;
    sideOffset?: number;
    closeOnEscape?: boolean;
    closeOnOutsideClick?: boolean;
    surface?: Surface;
    /**
     * ARIA `aria-haspopup` value advertised on the trigger. Default `'dialog'`.
     * Set to `'listbox'` for combobox patterns, `'menu'` for menu patterns, etc.
     */
    haspopup?: PopoverHasPopup;
    /**
     * Role applied to the content element. Default `'dialog'`. Set to `'none'`
     * (or any non-dialog value) when the popover wraps an inner widget that
     * owns the semantics (e.g. a listbox inside a combobox).
     */
    role?: PopoverRole;
}
type PopoverRootComponent = React.FC<PixelPopoverProps> & {
    Trigger: typeof PixelPopoverTrigger;
    Content: typeof PixelPopoverContent;
    Arrow: typeof PixelPopoverArrow;
};
interface PixelPopoverTriggerProps {
    children: React.ReactElement;
}
declare const PixelPopoverTrigger: React.ForwardRefExoticComponent<PixelPopoverTriggerProps & React.RefAttributes<HTMLElement>>;
interface PixelPopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
    surface?: Surface;
}
declare const PixelPopoverContent: React.ForwardRefExoticComponent<PixelPopoverContentProps & React.RefAttributes<HTMLDivElement>>;
interface PixelPopoverArrowProps extends React.HTMLAttributes<HTMLSpanElement> {
}
declare const PixelPopoverArrow: React.ForwardRefExoticComponent<PixelPopoverArrowProps & React.RefAttributes<HTMLSpanElement>>;
declare const PixelPopover: PopoverRootComponent;

type DrawerSide = 'right' | 'left' | 'top' | 'bottom';
type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
interface PixelDrawerProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    side?: DrawerSide;
    size?: DrawerSize;
    overlay?: boolean;
    dismissOnOverlay?: boolean;
    trapFocus?: boolean;
    title?: string;
    description?: string;
    /**
     * Accessible name fallback when `title` is omitted. WCAG 4.1.2 requires
     * every `role="dialog"` to expose a name; supply `title` OR `aria-label`.
     */
    'aria-label'?: string;
    surface?: Surface;
    container?: HTMLElement | null;
    children: React.ReactNode;
}
type DrawerComponent = React.ForwardRefExoticComponent<PixelDrawerProps & React.RefAttributes<HTMLDivElement>> & {
    Header: typeof PixelDrawerHeader;
    Body: typeof PixelDrawerBody;
    Footer: typeof PixelDrawerFooter;
};
interface PixelDrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    surface?: Surface;
}
declare const PixelDrawerHeader: React.ForwardRefExoticComponent<PixelDrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
interface PixelDrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
}
declare const PixelDrawerBody: React.ForwardRefExoticComponent<PixelDrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
interface PixelDrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    surface?: Surface;
}
declare const PixelDrawerFooter: React.ForwardRefExoticComponent<PixelDrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
declare const PixelDrawer: DrawerComponent;

interface PixelCommandItem {
    id: string;
    label: string;
    icon?: ReactNode;
    shortcut?: string;
    keywords?: string[];
    onSelect: () => void;
}
interface PixelCommandGroup {
    heading: string;
    items: PixelCommandItem[];
}
interface PixelCommandProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    shortcut?: string;
    placeholder?: string;
    emptyMessage?: string;
    groups: PixelCommandGroup[];
    surface?: Surface;
}
declare const PixelCommand: React.ForwardRefExoticComponent<PixelCommandProps & React.RefAttributes<HTMLDivElement>>;

interface PixelAlertDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    description?: string;
    cancelLabel?: string;
    actionLabel?: string;
    onAction: () => void | Promise<void>;
    /**
     * Called when `onAction` throws / rejects. Receives the thrown value.
     * When set, the dialog stays OPEN on failure so the consumer can show
     * an inline error. When unset, errors are silently swallowed (back-compat).
     */
    onError?: (error: unknown) => void;
    destructive?: boolean;
    surface?: Surface;
}
declare const PixelAlertDialog: React.ForwardRefExoticComponent<PixelAlertDialogProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelSheet}. */
interface PixelSheetProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    side?: 'bottom' | 'top';
    size?: 'sm' | 'md' | 'lg' | 'full';
    dragHandle?: boolean;
    surface?: Surface;
    title?: string;
    description?: string;
    /**
     * Accessible name fallback when `title` is omitted. WCAG 4.1.2 requires
     * every `role="dialog"` to expose a name; supply `title` OR `aria-label`.
     */
    'aria-label'?: string;
    children: React.ReactNode;
}
declare const PixelSheet: React.ForwardRefExoticComponent<PixelSheetProps & React.RefAttributes<HTMLDivElement>>;

interface PixelComboboxOption {
    value: string;
    label: string;
    group?: string;
    disabled?: boolean;
}
interface PixelComboboxProps {
    value?: string;
    defaultValue?: string;
    onChange?: (next: string) => void;
    options: PixelComboboxOption[];
    searchable?: boolean;
    placeholder?: string;
    emptyMessage?: string;
    disabled?: boolean;
    size?: 'sm' | 'md' | 'lg';
    surface?: Surface;
    label?: string;
    hint?: string;
    error?: string;
    name?: string;
    id?: string;
}
declare const PixelCombobox: React.ForwardRefExoticComponent<PixelComboboxProps & React.RefAttributes<HTMLButtonElement>>;

interface PixelMultiSelectOption {
    value: string;
    label: string;
    icon?: React.ReactNode;
    disabled?: boolean;
}
interface PixelMultiSelectProps {
    value?: string[];
    defaultValue?: string[];
    onChange?: (next: string[]) => void;
    options: PixelMultiSelectOption[];
    searchable?: boolean;
    max?: number;
    placeholder?: string;
    clearable?: boolean;
    surface?: Surface;
    size?: 'sm' | 'md' | 'lg';
    label?: string;
    hint?: string;
    error?: string;
    /**
     * Hidden-input `name`. Multiple values are serialized as repeated
     * `<input type="hidden" name={name}>` entries; read with
     * `FormData.getAll(name)`.
     */
    name?: string;
    id?: string;
}
declare const PixelMultiSelect: React.ForwardRefExoticComponent<PixelMultiSelectProps & React.RefAttributes<HTMLButtonElement>>;

interface PixelDatePickerProps {
    value?: Date | null;
    defaultValue?: Date;
    onChange?: (date: Date | null) => void;
    min?: Date;
    max?: Date;
    disabledDates?: Date[] | ((d: Date) => boolean);
    format?: (d: Date) => string;
    placeholder?: string;
    clearable?: boolean;
    presets?: {
        label: string;
        value: Date;
    }[];
    surface?: Surface;
    size?: Size$1;
    label?: string;
    hint?: string;
    error?: string;
    name?: string;
    id?: string;
    /** Hook for tests + custom triggers. */
    ['data-testid']?: string;
}
declare const PixelDatePicker: React.ForwardRefExoticComponent<PixelDatePickerProps & React.RefAttributes<HTMLButtonElement>>;

type NumSize = 'sm' | 'md' | 'lg';
interface PixelNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size'> {
    value?: number;
    defaultValue?: number;
    onChange?: (next: number) => void;
    min?: number;
    max?: number;
    step?: number;
    precision?: number;
    clampBehavior?: 'strict' | 'blur' | 'none';
    prefix?: string;
    suffix?: string;
    thousandsSeparator?: string;
    allowNegative?: boolean;
    hideControls?: boolean;
    size?: NumSize;
    surface?: Surface;
    tone?: Tone;
    label?: string;
    hint?: string;
    error?: string;
}
declare const PixelNumberInput: React.ForwardRefExoticComponent<PixelNumberInputProps & React.RefAttributes<HTMLInputElement>>;

/** Public prop bag for {@link PixelOTPInput}. */
interface PixelOTPInputProps {
    length?: number;
    value?: string;
    defaultValue?: string;
    onChange?: (next: string) => void;
    onComplete?: (full: string) => void;
    mask?: boolean;
    /** Canonical structural variant. */
    variant?: 'numeric' | 'alphanumeric';
    /**
     * @deprecated Use `variant` instead. Retained as alias for one minor.
     */
    type?: 'numeric' | 'alphanumeric';
    autoFocus?: boolean;
    separator?: React.ReactNode;
    size?: 'sm' | 'md' | 'lg';
    surface?: Surface;
    name?: string;
    disabled?: boolean;
}
declare const PixelOTPInput: React.ForwardRefExoticComponent<PixelOTPInputProps & React.RefAttributes<HTMLInputElement>>;

type PixelFileRejection = {
    file: File;
    reasons: string[];
};
/** Public prop bag for {@link PixelFileUpload}. */
interface PixelFileUploadProps {
    value?: File[];
    defaultValue?: File[];
    onChange?: (files: File[]) => void;
    accept?: string;
    multiple?: boolean;
    /** Bytes per file. */
    maxSize?: number;
    maxFiles?: number;
    dropzone?: boolean;
    renderItem?: (file: File, remove: () => void) => React.ReactNode;
    onReject?: (rejections: PixelFileRejection[]) => void;
    surface?: Surface;
    size?: Size$1;
    label?: string;
    hint?: string;
    error?: string;
    disabled?: boolean;
    /**
     * Deprecated form-serialization hint. Files are not serializable through
     * a hidden mirror once `e.target.value` is reset, so this prop no longer
     * wires to a native input. Read selected files from `onChange` and POST
     * them manually (e.g. `FormData.append(name, file)` per file).
     *
     * Kept in the prop bag so consumers using it don't break — the `id` of
     * the file input still uses it via the `id` prop fallback path.
     */
    name?: string;
    id?: string;
    className?: string;
}
declare const PixelFileUpload: React.ForwardRefExoticComponent<PixelFileUploadProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelFormRoot}. */
interface PixelFormRootProps<T extends FieldValues> {
    form: UseFormReturn<T>;
    onSubmit: (data: T) => void | Promise<void>;
    children: React.ReactNode;
    className?: string;
    surface?: Surface;
}
type PixelFormRootGeneric = (<T extends FieldValues>(props: PixelFormRootProps<T> & {
    ref?: React.Ref<HTMLFormElement>;
}) => React.ReactElement) & {
    displayName?: string;
};
declare const PixelFormRoot: PixelFormRootGeneric;
/** Public prop bag for {@link PixelFormField}. */
interface PixelFormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
    name: TName;
    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
    defaultValue?: UseControllerProps<TFieldValues, TName>['defaultValue'];
    shouldUnregister?: boolean;
    render: (args: {
        field: ControllerRenderProps<TFieldValues, TName>;
        fieldState: ControllerFieldState;
    }) => React.ReactElement;
}
declare function PixelFormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, rules, defaultValue, shouldUnregister, render }: PixelFormFieldProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
/** Public prop bag for {@link PixelFormItem}. */
interface PixelFormItemProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
declare const PixelFormItem: React.ForwardRefExoticComponent<PixelFormItemProps & React.RefAttributes<HTMLDivElement>>;
/** Public prop bag for {@link PixelFormLabel}. */
interface PixelFormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
    surface?: Surface;
}
declare const PixelFormLabel: React.ForwardRefExoticComponent<PixelFormLabelProps & React.RefAttributes<HTMLLabelElement>>;
/** Public prop bag for {@link PixelFormControl}. Wraps a single child and clones aria-*/
interface PixelFormControlProps {
    children: React.ReactElement;
}
declare const PixelFormControl: React.ForwardRefExoticComponent<PixelFormControlProps & React.RefAttributes<HTMLElement>>;
/** Public prop bag for {@link PixelFormDescription}. */
interface PixelFormDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
    surface?: Surface;
}
declare const PixelFormDescription: React.ForwardRefExoticComponent<PixelFormDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
/** Public prop bag for {@link PixelFormMessage}. */
interface PixelFormMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
    surface?: Surface;
}
declare const PixelFormMessage: React.ForwardRefExoticComponent<PixelFormMessageProps & React.RefAttributes<HTMLParagraphElement>>;
type PixelFormNamespace = PixelFormRootGeneric & {
    Root: typeof PixelFormRoot;
    Field: typeof PixelFormField;
    Item: typeof PixelFormItem;
    Label: typeof PixelFormLabel;
    Control: typeof PixelFormControl;
    Description: typeof PixelFormDescription;
    Message: typeof PixelFormMessage;
};
declare const PixelForm: PixelFormNamespace;

type PixelDataTableInstance<TData> = Table<TData>;

type PixelDataTableDensity = 'compact' | 'normal' | 'comfortable';
interface PixelDataTableProps<TData, TValue = unknown> {
    data: TData[];
    columns: ColumnDef<TData, TValue>[];
    sorting?: {
        id: string;
        desc: boolean;
    }[];
    onSortingChange?: (next: {
        id: string;
        desc: boolean;
    }[]) => void;
    filtering?: Record<string, string>;
    onFilteringChange?: (next: Record<string, string>) => void;
    pagination?: {
        pageIndex: number;
        pageSize: number;
    };
    onPaginationChange?: (next: {
        pageIndex: number;
        pageSize: number;
    }) => void;
    rowSelection?: Record<string, boolean>;
    onRowSelectionChange?: (next: Record<string, boolean>) => void;
    columnVisibility?: Record<string, boolean>;
    onColumnVisibilityChange?: (next: Record<string, boolean>) => void;
    getRowId?: (row: TData, idx: number) => string;
    density?: PixelDataTableDensity;
    stickyHeader?: boolean;
    loading?: boolean;
    emptyState?: React.ReactNode;
    onRowClick?: (row: TData) => void;
    surface?: Surface;
    className?: string;
    /** Render with surface-aware border + radius chrome. Defaults to true — data table needs visible chrome. */
    bordered?: boolean;
}
declare function PixelDataTableInner<TData, TValue = unknown>({ data, columns, sorting, onSortingChange, filtering, onFilteringChange, pagination, onPaginationChange, rowSelection, onRowSelectionChange, columnVisibility, onColumnVisibilityChange, getRowId, density, stickyHeader, loading, emptyState, onRowClick, surface: surfaceProp, className, bordered, }: PixelDataTableProps<TData, TValue>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
/**
 * `PixelDataTable` — TanStack-powered surface-aware data table with sorting,
 * filtering, pagination, row selection, column visibility, density, sticky
 * header, loading skeletons, and empty state. All state is controllable.
 *
 * Polymorphic-ref note: rendered root is a `<div>` wrapping `<table>`; ref
 * targets the wrapper div for measurement / scroll control.
 */
declare const PixelDataTable: <TData, TValue = unknown>(props: PixelDataTableProps<TData, TValue> & {
    ref?: React.Ref<HTMLDivElement>;
}) => ReturnType<typeof PixelDataTableInner>;

type Orientation = 'horizontal' | 'vertical';
interface PixelCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Full embla options surface (see embla-carousel docs). Common subset:
     * `loop`, `align`, `slidesToScroll`, `startIndex`, `dragFree`,
     * `containScroll`, `inViewThreshold`. `axis` is set internally from
     * `orientation`.
     */
    opts?: Omit<EmblaOptionsType, 'axis'>;
    /** Optional embla plugins (autoplay, autoScroll, etc.). */
    plugins?: EmblaPluginType[];
    /** Receives the embla API once ready; called again with `undefined` on unmount. */
    setApi?: (api: EmblaCarouselType | undefined) => void;
    orientation?: Orientation;
    showArrows?: boolean;
    showDots?: boolean;
    surface?: Surface;
    /** Accessible name for the carousel region (required for landmark navigation). */
    'aria-label'?: string;
    children: React.ReactNode;
}
interface PixelCarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
declare const PixelCarouselItem: React.ForwardRefExoticComponent<PixelCarouselItemProps & React.RefAttributes<HTMLDivElement>>;
declare const PixelCarouselRoot: React.ForwardRefExoticComponent<PixelCarouselProps & React.RefAttributes<HTMLDivElement>>;
type PixelCarouselNamespace = typeof PixelCarouselRoot & {
    Item: typeof PixelCarouselItem;
};
declare const PixelCarousel: PixelCarouselNamespace;

type BulletSize = 'sm' | 'md' | 'lg';
type Align = 'left' | 'right';
type LineVariant = 'solid' | 'dashed' | 'dotted';
interface PixelTimelineItemProps extends React.HTMLAttributes<HTMLLIElement> {
    /** Canonical label for the item. */
    label?: string;
    /**
     * @deprecated Use `label` instead. Retained as alias for one minor.
     */
    title?: string;
    bullet?: React.ReactNode;
    time?: string;
    lineVariant?: LineVariant;
    children?: React.ReactNode;
}
declare const PixelTimelineItem: React.ForwardRefExoticComponent<PixelTimelineItemProps & React.RefAttributes<HTMLLIElement>>;
interface PixelTimelineProps extends React.HTMLAttributes<HTMLOListElement> {
    active?: number;
    bulletSize?: BulletSize;
    align?: Align;
    surface?: Surface;
    children: React.ReactNode;
}
declare const PixelTimeline: React.ForwardRefExoticComponent<PixelTimelineProps & React.RefAttributes<HTMLOListElement>>;

type Layout = 'row' | 'grid';
interface PixelStatGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    layout?: Layout;
    columns?: number;
    /** Gap between grid cells (stackGap scale). Only applies to layout="grid"; omit for flush cells. */
    gap?: StackGapKey;
    tone?: ToneKey;
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to true — group needs visible chrome. */
    bordered?: boolean;
    /** Accessible name for the group landmark. Without it, role=group is dropped. */
    'aria-label'?: string;
    'aria-labelledby'?: string;
    children: React.ReactNode;
}
declare const PixelStatGroup: React.ForwardRefExoticComponent<PixelStatGroupProps & React.RefAttributes<HTMLDivElement>>;

type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
interface PixelAvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    max?: number;
    size?: AvatarSize;
    tone?: ToneKey;
    surface?: Surface;
    /** Accessible name for the avatar landmark. Without one, role=group is dropped. */
    'aria-label'?: string;
    'aria-labelledby'?: string;
    children: React.ReactNode;
}
declare const PixelAvatarGroup: React.ForwardRefExoticComponent<PixelAvatarGroupProps & React.RefAttributes<HTMLDivElement>>;

interface PixelChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
    /** Controlled selection. */
    value?: string[];
    /** Uncontrolled initial selection. */
    defaultValue?: string[];
    onChange?: (next: string[]) => void;
    multiple?: boolean;
    surface?: Surface;
    /** Accessible name (required when single-select so SR users hear the group). */
    'aria-label'?: string;
    'aria-labelledby'?: string;
    children: React.ReactNode;
}
declare const PixelChipGroup: React.ForwardRefExoticComponent<PixelChipGroupProps & React.RefAttributes<HTMLDivElement>>;

interface PixelBadgeGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    max?: number;
    surface?: Surface;
    /**
     * Optional accessible name for the group. When provided, the wrapper renders
     * `role="group"` so SR users can navigate the landmark; otherwise it stays a
     * plain div to avoid an unlabeled group announcement.
     */
    'aria-label'?: string;
    'aria-labelledby'?: string;
    children: React.ReactNode;
}
declare const PixelBadgeGroup: React.ForwardRefExoticComponent<PixelBadgeGroupProps & React.RefAttributes<HTMLDivElement>>;

interface PixelSparklineProps extends React.SVGAttributes<SVGSVGElement> {
    data: PixelChartDataPoint[];
    tone?: ToneKey;
    size?: ChartSize;
    showArea?: boolean;
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to false (no chrome). */
    bordered?: boolean;
}
declare const PixelSparkline: React.ForwardRefExoticComponent<PixelSparklineProps & React.RefAttributes<SVGSVGElement>>;

interface PixelBarChartProps extends React.SVGAttributes<SVGSVGElement> {
    data: PixelChartDataPoint[];
    tone?: ToneKey;
    size?: ChartSize;
    orientation?: 'vertical' | 'horizontal';
    showValues?: boolean;
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to false (no chrome). */
    bordered?: boolean;
}
declare const PixelBarChart: React.ForwardRefExoticComponent<PixelBarChartProps & React.RefAttributes<SVGSVGElement>>;

interface PixelAreaChartProps extends React.SVGAttributes<SVGSVGElement> {
    data: PixelChartDataPoint[];
    tone?: ToneKey;
    size?: ChartSize;
    smooth?: boolean;
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to false (no chrome). */
    bordered?: boolean;
}
declare const PixelAreaChart: React.ForwardRefExoticComponent<PixelAreaChartProps & React.RefAttributes<SVGSVGElement>>;

interface PixelChartDataPoint {
    x: number | string;
    y: number;
    label?: string;
}
type ChartSize = 'sm' | 'md' | 'lg';

type Size = 'sm' | 'md' | 'lg';
interface PixelStepperStepProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
    label: string;
    description?: string;
    icon?: React.ReactNode;
    loading?: boolean;
    completed?: boolean;
    error?: boolean;
    children?: React.ReactNode;
}
declare const PixelStepperStep: React.ForwardRefExoticComponent<PixelStepperStepProps & React.RefAttributes<HTMLDivElement>>;
interface PixelStepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
    active: number;
    onStepClick?: (idx: number) => void;
    orientation?: 'horizontal' | 'vertical';
    allowNextStepsSelect?: boolean;
    size?: Size;
    surface?: Surface;
    /** Accessible name for the steps landmark. Defaults to "Progress steps". */
    ariaLabel?: string;
    children: React.ReactNode;
}
declare const PixelStepperRoot: React.ForwardRefExoticComponent<PixelStepperProps & React.RefAttributes<HTMLDivElement>>;
type PixelStepperNamespace = typeof PixelStepperRoot & {
    Step: typeof PixelStepperStep;
};
declare const PixelStepper: PixelStepperNamespace;

interface PixelMenubarItem {
    value: string;
    label: string;
    icon?: React.ReactNode;
    shortcut?: string;
    onSelect?: () => void;
    submenu?: PixelMenubarItem[];
    separator?: boolean;
    disabled?: boolean;
}
interface PixelMenubarMenu {
    label: string;
    items: PixelMenubarItem[];
}
interface PixelMenubarProps extends React.HTMLAttributes<HTMLDivElement> {
    menus: PixelMenubarMenu[];
    surface?: Surface;
}
declare const PixelMenubar: React.ForwardRefExoticComponent<PixelMenubarProps & React.RefAttributes<HTMLDivElement>>;

interface PixelNavigationMenuItem {
    label: string;
    href?: string;
    onSelect?: () => void;
    content?: ReactNode;
    icon?: ReactNode;
    description?: string;
}
interface PixelNavigationMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    items: PixelNavigationMenuItem[];
    orientation?: 'horizontal' | 'vertical';
    viewport?: boolean;
    surface?: Surface;
    /**
     * Accessible name for the nav landmark. Required when more than one nav
     * lands on the same page (WCAG 2.4.6). Defaults to "Main navigation".
     */
    ariaLabel?: string;
}
declare const PixelNavigationMenu: React.ForwardRefExoticComponent<PixelNavigationMenuProps & React.RefAttributes<HTMLElement>>;

interface PixelSidebarItemProps {
    id: string;
    label: string;
    icon?: React.ReactNode;
    badge?: {
        label: string;
        tone?: ToneKey;
    };
    href?: string;
    onSelect?: () => void;
    active?: boolean;
    nested?: PixelSidebarItemProps[];
}
interface PixelSidebarSectionProps {
    /** Canonical section label. */
    label?: string;
    /**
     * @deprecated Use `label` instead. Retained as alias for one minor.
     */
    title?: string;
    items: PixelSidebarItemProps[];
}
interface PixelSidebarProps extends React.HTMLAttributes<HTMLElement> {
    collapsible?: boolean;
    defaultCollapsed?: boolean;
    collapsed?: boolean;
    onCollapsedChange?: (next: boolean) => void;
    sections: PixelSidebarSectionProps[];
    header?: React.ReactNode;
    footer?: React.ReactNode;
    surface?: Surface;
}
declare const PixelSidebar: React.ForwardRefExoticComponent<PixelSidebarProps & React.RefAttributes<HTMLElement>>;

type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
interface PixelSpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
    size?: SpinnerSize;
    label?: string;
    surface?: Surface;
    tone?: ToneKey;
    /**
     * When `true`, renders as pure decoration (aria-hidden, no role, no label).
     * Use inside an already-announcing parent (e.g. a `<button loading>` that
     * declares `aria-busy="true"`) to avoid double announcements.
     *
     * NOTE: when using PixelSpinner as a standalone loading indicator (not
     * decorative), the consumer MUST set `aria-busy="true"` on the loading
     * container per WAI-ARIA — the spinner alone isn't enough context.
     */
    decorative?: boolean;
}
declare const PixelSpinner: React.ForwardRefExoticComponent<PixelSpinnerProps & React.RefAttributes<HTMLSpanElement>>;

interface PixelInputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    size?: 'sm' | 'md' | 'lg';
    surface?: Surface;
    /**
     * Accessible name for the group. Strongly recommended since this primitive
     * visually joins multiple form controls (e.g. country code + phone) — without
     * an accessible name a screen reader user has no idea what the group represents.
     * In dev, a missing name on a group of >1 child logs a warning.
     */
    'aria-label'?: string;
    'aria-labelledby'?: string;
    children: React.ReactNode;
}
declare const PixelInputGroup: React.ForwardRefExoticComponent<PixelInputGroupProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelToggle}. */
interface PixelToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    value: string;
    /** Standalone (uncontrolled) toggle: pressed state. */
    pressed?: boolean;
    /** Standalone (uncontrolled) toggle: notified on press change. */
    onPressedChange?: (next: boolean) => void;
    surface?: Surface;
}
declare const PixelToggle: React.ForwardRefExoticComponent<PixelToggleProps & React.RefAttributes<HTMLButtonElement>>;

type GroupSize = 'sm' | 'md' | 'lg';
type GroupVariant = Extract<Variant$1, 'solid' | 'soft' | 'outline' | 'ghost'>;
/** Shared props (no value/onChange — those vary by discriminator). */
interface PixelToggleGroupSharedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    rovingFocus?: boolean;
    loop?: boolean;
    size?: GroupSize;
    variant?: GroupVariant;
    surface?: Surface;
    /** Accessible label for the toolbar / radiogroup. */
    'aria-label'?: string;
    children: React.ReactNode;
}
interface PixelToggleGroupSingleProps extends PixelToggleGroupSharedProps {
    type?: 'single';
    value?: string;
    defaultValue?: string;
    onChange?: (next: string) => void;
}
interface PixelToggleGroupMultipleProps extends PixelToggleGroupSharedProps {
    type: 'multiple';
    value?: string[];
    defaultValue?: string[];
    onChange?: (next: string[]) => void;
}
/**
 * Public prop bag for {@link PixelToggleGroup}. Discriminated by `type`:
 *
 * - `type` omitted or `'single'` → value/onChange are `string`.
 * - `type='multiple'` → value/onChange are `string[]`.
 */
type PixelToggleGroupProps = PixelToggleGroupSingleProps | PixelToggleGroupMultipleProps;
declare const PixelToggleGroup: React.ForwardRefExoticComponent<PixelToggleGroupProps & React.RefAttributes<HTMLDivElement>>;

interface DateRangeValue {
    from?: Date;
    to?: Date;
}
interface PixelDateRangePickerProps {
    value?: DateRangeValue;
    defaultValue?: DateRangeValue;
    onChange?: (next: DateRangeValue) => void;
    min?: Date;
    max?: Date;
    presets?: {
        label: string;
        value: {
            from: Date;
            to: Date;
        };
    }[];
    numberOfMonths?: 1 | 2;
    surface?: Surface;
    size?: 'sm' | 'md' | 'lg';
    label?: string;
    hint?: string;
    error?: string;
    placeholder?: string;
    clearable?: boolean;
    name?: string;
    id?: string;
    ['data-testid']?: string;
}
declare const PixelDateRangePicker: React.ForwardRefExoticComponent<PixelDateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

interface PixelCalendarGridProps {
    value?: Date | null;
    defaultValue?: Date | null;
    onChange?: (date: Date) => void;
    minDate?: Date;
    maxDate?: Date;
    disabledDates?: Date[] | ((d: Date) => boolean);
    renderDay?: (d: Date) => React.ReactNode;
    month?: Date;
    onMonthChange?: (m: Date) => void;
    surface?: Surface;
    rangePreview?: {
        from?: Date;
        to?: Date;
        hover?: Date;
    };
    /** Optional hook for tests. */
    ['data-testid']?: string;
}
declare const PixelCalendarGrid: React.ForwardRefExoticComponent<PixelCalendarGridProps & React.RefAttributes<HTMLDivElement>>;

type ColorFormat = 'hex' | 'rgb' | 'hsl';
type ColorSize = 'sm' | 'md' | 'lg';
interface PixelColorInputProps {
    value?: string;
    defaultValue?: string;
    onChange?: (next: string) => void;
    format?: ColorFormat;
    presets?: string[];
    surface?: Surface;
    size?: ColorSize;
    label?: string;
    hint?: string;
    error?: string;
    name?: string;
    id?: string;
}
declare const PixelColorInput: React.ForwardRefExoticComponent<PixelColorInputProps & React.RefAttributes<HTMLButtonElement>>;

/**
 * Public prop bag for {@link PixelButton}. Extends every native
 * `<button>` attribute, so consumers can pass `name`, `form`,
 * `formAction`, `type`, `aria-*` etc. without ceremony.
 */
interface PixelButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /** Color tone (maps to `toneMap`). */
    tone?: Tone;
    /** Visual size (`xs`–`xl`). */
    size?: Size$1;
    /** Full Variant union — `solid` | `soft` | `outline` | `ghost`. */
    variant?: Variant$1;
    /** Surface aesthetic override; defaults to nearest provider. */
    surface?: Surface;
    /** Leading icon node; replaced by a spinner while `loading` is true. */
    iconLeft?: React.ReactNode;
    /** Trailing icon node. */
    iconRight?: React.ReactNode;
    /** When true, swaps the left icon for a spinner and force-disables the button. */
    loading?: boolean;
    /** Stretch to fill the parent's inline axis (`w-full`). */
    fullWidth?: boolean;
    /**
     * Render the children as the root element (Radix Slot pattern). Expects a
     * SINGLE React element child; receives merged className, ref, and onClick.
     * Useful for `<Link>` / `<a>` wrappers without sacrificing the styling.
     */
    asChild?: boolean;
}
declare const PixelButton: React.ForwardRefExoticComponent<PixelButtonProps & React.RefAttributes<HTMLButtonElement>>;

/** Public prop bag for {@link PixelIconButton}. */
interface PixelIconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
    /** Accessible label — set as `aria-label` and `title`. Required. */
    label: string;
    /** Color tone (maps to `toneMap`). */
    tone?: Tone;
    /** Visual size (`xs`–`xl`); produces a square via `sizeSquare`. */
    size?: Size$1;
    /** Surface aesthetic override; defaults to nearest provider. */
    surface?: Surface;
    /** The icon to render inside the square. */
    icon: React.ReactNode;
}
declare const PixelIconButton: React.ForwardRefExoticComponent<PixelIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * @deprecated Renamed to {@link PixelIconButton}. The `PxlKit*` prefix is
 * reserved for system primitives (`PxlKitSurfaceProvider`,
 * `PxlKitLocaleProvider`); leaf components use `Pixel*`. Removal target:
 * 3.0.0 (carried forward from 2.0.0 — see ADR-0004).
 */
declare const PxlKitButton: React.ForwardRefExoticComponent<PixelIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
/** @deprecated Renamed to {@link PixelIconButtonProps}. Removal target: 3.0.0 (see ADR-0004). */
type PxlKitButtonProps = PixelIconButtonProps;

/** Public prop bag for {@link PixelSplitButton}. */
interface PixelSplitButtonProps {
    /** Text shown on the primary (left) button. */
    label: string;
    /** Options shown in the dropdown menu. */
    options: Option[];
    /** Color tone (maps to `toneMap`). */
    tone?: Tone;
    /** Surface aesthetic override; defaults to nearest provider. */
    surface?: Surface;
    /** When true, both primary button and chevron trigger are disabled. */
    disabled?: boolean;
    /** Fires when the primary (label) button is clicked. */
    onPrimary?: () => void;
    /** Fires with the selected option's `value` when a menu item is chosen. */
    onSelect?: (value: string) => void;
}
declare const PixelSplitButton: React.ForwardRefExoticComponent<PixelSplitButtonProps & React.RefAttributes<HTMLDivElement>>;

interface PixelCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
    /** Heading rendered inside the auto-generated header. Omit for a headerless container/well card. */
    title?: string;
    /** Optional leading icon for the auto-generated header. */
    icon?: React.ReactNode;
    /** Card body content. */
    children?: React.ReactNode;
    /** Optional footer slot rendered after the body with a divider. */
    footer?: React.ReactNode;
    /** Visual surface override. Inherits from provider when omitted. */
    surface?: Surface;
    /** Optional tone tint applied to border + soft background. */
    tone?: ToneKey;
    /**
     * When true, adds a hover lift + focus ring. If no `href` is set, an
     * `onClick` is REQUIRED — the card renders with `role="button"` +
     * `tabIndex={0}` + Enter/Space activation for keyboard parity.
     */
    interactive?: boolean;
    /** Top media slot rendered above the header. Clipped by overflow:hidden. */
    media?: React.ReactNode;
    /** Corner ribbon badge — renders {@link PixelRibbon}. */
    badge?: {
        label: string;
        tone?: ToneKey;
    };
    /** Muted paragraph rendered under the title. */
    description?: string;
    /** Apply `line-clamp-N` + `min-h-[N em]` to the description. */
    descriptionLines?: 2 | 3 | 4;
    /**
     * When provided, the root renders as `<a href>` instead of `<article>`.
     *
     * ⚠️ Nesting interactive children (PixelButton, PixelTextLink, etc.) inside
     * `footer` / `media` / `children` is invalid HTML in href mode — screen
     * readers cannot navigate nested interactives inside an anchor. Render
     * those outside the card when you need an actionable area.
     */
    href?: string;
    /** Anchor target — only meaningful when `href` is set. */
    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
    /** Anchor rel — only meaningful when `href` is set. */
    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
    /** Padding scale; default keeps the legacy `p-4` rhythm. */
    padding?: 'none' | 'sm' | 'md' | 'lg';
    /** Render with surface-aware border + radius chrome. Defaults to true — a card should look like a card. */
    bordered?: boolean;
}
type CardRoot = HTMLAnchorElement | HTMLElement;
declare function CardHeader({ children, className, ...rest }: React.HTMLAttributes<HTMLElement>): react_jsx_runtime.JSX.Element;
declare namespace CardHeader {
    var displayName: string;
}
declare function CardBody({ children, className, ...rest }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
declare namespace CardBody {
    var displayName: string;
}
declare function CardFooter({ children, className, ...rest }: React.HTMLAttributes<HTMLElement>): react_jsx_runtime.JSX.Element;
declare namespace CardFooter {
    var displayName: string;
}
declare const PixelCardImpl: React.ForwardRefExoticComponent<PixelCardProps & React.RefAttributes<CardRoot>>;
declare const PixelCard: typeof PixelCardImpl & {
    Header: typeof CardHeader;
    Body: typeof CardBody;
    Footer: typeof CardFooter;
};

type PixelStatCardSize = 'sm' | 'md' | 'lg';
type PixelStatCardIconPosition = 'left' | 'right' | 'top' | 'bottom-left';
interface PixelStatCardProps {
    /** Caption rendered above the value. */
    label: string;
    /** Primary metric value. */
    value: string;
    /** Optional leading icon. */
    icon?: React.ReactNode;
    /** Tone tint for border, soft background, and icon color. */
    tone?: Tone;
    /** Optional trend/delta line rendered under the value. */
    trend?: string;
    /** Visual surface override. */
    surface?: Surface;
    /** Padding + typography scale. Defaults to `'md'`. */
    size?: PixelStatCardSize;
    /** Icon placement relative to label/value. Defaults to `'top'`. */
    iconPosition?: PixelStatCardIconPosition;
    /** Color the value with the tone color instead of the default text color. */
    valueTone?: boolean;
    /** Horizontal alignment of label/value/trend. Defaults to `'start'`. */
    align?: 'start' | 'center';
    /** Render with surface-aware border + radius chrome. Defaults to true — a stat card needs visible chrome. */
    bordered?: boolean;
}
declare function PixelStatCard({ label, value, icon, tone, trend, surface: surfaceProp, size, iconPosition, valueTone, align, bordered, }: PixelStatCardProps): react_jsx_runtime.JSX.Element;

type PixelTableDensity = 'compact' | 'normal' | 'comfortable';
type PixelTableSortDir = 'asc' | 'desc';
type PixelTableAlign = 'left' | 'center' | 'right';
type PixelTableSelection = 'single' | 'multi';
interface PixelTableColumn<Row = Record<string, React.ReactNode>> {
    /** Stable column id; also the lookup key into a row when `render` is absent. */
    key: string;
    /** Header cell content. */
    header: React.ReactNode;
    /** Extra class names applied to header + body cells in this column. */
    className?: string;
    /** When true, header renders a sort button with aria-sort. Requires `onSortChange`. */
    sortable?: boolean;
    /** Text alignment for header + body cells. */
    align?: PixelTableAlign;
    /** Pixel width or CSS length. */
    width?: number | string;
    /** Custom cell renderer. Overrides the `row[key]` lookup. */
    render?: (row: Row, idx: number) => React.ReactNode;
}
interface PixelTableSortState {
    key: string;
    dir: PixelTableSortDir;
}
interface PixelTableProps<Row = Record<string, React.ReactNode>> {
    /** Column definitions. */
    columns: Array<PixelTableColumn<Row>>;
    /** Row data. */
    data: Row[];
    /** Alternate-row tint. Defaults to `true`. */
    striped?: boolean;
    /** Visual surface override. */
    surface?: Surface;
    /** Controlled sort state. */
    sort?: PixelTableSortState;
    /** Called when a sortable header is clicked. */
    onSortChange?: (next: PixelTableSortState) => void;
    /** Enables a leading checkbox column with single- or multi-row selection. */
    selection?: PixelTableSelection;
    /** Controlled list of selected row ids. */
    selectedIds?: string[];
    /** Called when selection changes. */
    onSelectionChange?: (next: string[]) => void;
    /** Resolves a stable id per row. Falls back to `row.id` then to the index. */
    getRowId?: (row: Row, idx: number) => string;
    /** Sticks the header row to the top of the scroll container. */
    stickyHeader?: boolean;
    /** Sticks the first column to the left of the scroll container. */
    stickyFirstColumn?: boolean;
    /** Renders skeleton rows instead of data. */
    loading?: boolean;
    /** Rendered inside a full-width cell when `data` is empty. */
    emptyState?: React.ReactNode;
    /** Called when a body row is clicked. Renders the row with `cursor-pointer`. */
    onRowClick?: (row: Row, idx: number) => void;
    /** Cell padding scale. Defaults to `'normal'`. */
    density?: PixelTableDensity;
    /** Render with surface-aware border + radius chrome. Defaults to true — tables need visible chrome. */
    bordered?: boolean;
}
declare function PixelTable<Row = Record<string, React.ReactNode>>({ columns, data, striped, surface: surfaceProp, sort, onSortChange, selection, selectedIds, onSelectionChange, getRowId, stickyHeader, stickyFirstColumn, loading, emptyState, onRowClick, density, bordered, }: PixelTableProps<Row>): react_jsx_runtime.JSX.Element;

type PixelAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type PixelAvatarStatus = 'online' | 'away' | 'busy' | 'offline';
type PixelAvatarShape = 'square' | 'circle' | 'rounded';
interface PixelAvatarProps {
    /** Display name. Used to derive initials and the accessible label. */
    name: string;
    /** Optional image source. Falls back to initials on load failure. */
    src?: string;
    /** Size token. Defaults to `'md'`. */
    size?: PixelAvatarSize;
    /** Tone tint for the initials fallback. Overrides `colorSeed`. */
    tone?: Tone;
    /** Visual surface override. */
    surface?: Surface;
    /** Status dot rendered in the bottom-right corner. */
    status?: PixelAvatarStatus;
    /** Shape of the avatar frame. Defaults to `'circle'`. */
    shape?: PixelAvatarShape;
    /**
     * Deterministic tone fallback derived from the seed via hash modulo a fixed
     * tone palette. Overridden by an explicit `tone` prop.
     */
    colorSeed?: string;
}
declare const PixelAvatar: React.ForwardRefExoticComponent<PixelAvatarProps & React.RefAttributes<HTMLDivElement>>;

/** Variant axis shared by PixelBadge + PixelChip. */
type PixelBadgeVariant = 'soft' | 'solid' | 'outline' | 'ghost';

interface PixelBadgeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
    /** Badge content. */
    children: React.ReactNode;
    /** Tone tint. Defaults to `'green'`. */
    tone?: Tone;
    /** Visual surface override. */
    surface?: Surface;
    /** Variant axis: soft (default), solid, outline, ghost. */
    variant?: PixelBadgeVariant;
    /** Size scale. Defaults to `'md'`. */
    size?: Size$1;
    /** Optional leading icon. */
    iconLeft?: React.ReactNode;
    /** When provided the root renders as a `<button>` for keyboard / SR parity. */
    onClick?: React.MouseEventHandler<HTMLElement>;
}
declare const PixelBadge: React.ForwardRefExoticComponent<PixelBadgeProps & React.RefAttributes<HTMLElement>>;

interface PixelChipProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
    /** Chip label. */
    label: string;
    /** Selection value consumed by a wrapping PixelChipGroup. Never rendered to the DOM. */
    value?: string;
    /** Tone tint. Defaults to `'cyan'`. */
    tone?: Tone;
    /** Visual surface override. */
    surface?: Surface;
    /** Variant axis shared with PixelBadge. */
    variant?: PixelBadgeVariant;
    /** Size scale. Defaults to `'md'`. */
    size?: Size$1;
    /** Optional leading icon. */
    iconLeft?: React.ReactNode;
    /** Legacy alias for `onDelete`. */
    onRemove?: () => void;
    /** When true (or when onDelete is provided), renders an X button on the right. */
    deletable?: boolean;
    /** Called when the X button is activated. */
    onDelete?: () => void;
    /** When provided the root renders as a `<button>`. The delete X stays a nested button. */
    onClick?: React.MouseEventHandler<HTMLElement>;
}
declare const PixelChip: React.ForwardRefExoticComponent<PixelChipProps & React.RefAttributes<HTMLElement>>;

type PixelTextLinkCommon = {
    /** Link content. */
    children: React.ReactNode;
    /** Tone tint. Defaults to `'cyan'`. */
    tone?: Tone;
    /** Extra class names. */
    className?: string;
    /** Visual surface override. */
    surface?: Surface;
};
type PixelTextLinkAnchorProps = PixelTextLinkCommon & {
    href: string;
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'children'>;
type PixelTextLinkButtonProps = PixelTextLinkCommon & {
    href?: undefined;
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'>;
type PixelTextLinkProps = PixelTextLinkAnchorProps | PixelTextLinkButtonProps;
declare function PixelTextLink({ children, tone, className, href, surface: surfaceProp, ...props }: PixelTextLinkProps): react_jsx_runtime.JSX.Element;

interface PixelCollapsibleProps {
    /** Trigger label. */
    label: string;
    /** Body content rendered when open. */
    children: React.ReactNode;
    /** Initial open state. Defaults to `false`. */
    defaultOpen?: boolean;
    /** Tone tint for the trigger button. Defaults to `'neutral'`. */
    tone?: Tone;
    /** Visual surface override. */
    surface?: Surface;
    /** Render with surface-aware border + radius chrome. Defaults to false (no chrome). */
    bordered?: boolean;
}
declare function PixelCollapsible({ label, children, defaultOpen, tone, surface: surfaceProp, bordered, }: PixelCollapsibleProps): react_jsx_runtime.JSX.Element;

interface PixelCodeInlineProps {
    /** Code content. */
    children: React.ReactNode;
    /** Tone tint. Defaults to `'cyan'`. */
    tone?: Tone;
    /** Visual surface override. */
    surface?: Surface;
}
declare function PixelCodeInline({ children, tone, surface: surfaceProp, }: PixelCodeInlineProps): react_jsx_runtime.JSX.Element;

interface PixelKbdProps {
    /** Key label (e.g. "⌘", "K", "Esc"). */
    children: React.ReactNode;
    /** Visual surface override. */
    surface?: Surface;
}
declare function PixelKbd({ children, surface: surfaceProp, }: PixelKbdProps): react_jsx_runtime.JSX.Element;

interface PixelColorSwatchProps {
    /** Display name for the token (e.g. "Cyan 500"). */
    name: string;
    /** CSS variable to preview (e.g. "--retro-cyan"). */
    cssVar: string;
    /** Visual surface override. */
    surface?: Surface;
}
declare function PixelColorSwatch({ name, cssVar, surface: surfaceProp, }: PixelColorSwatchProps): react_jsx_runtime.JSX.Element;

type PixelBareButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
declare const PixelBareButton: React.ForwardRefExoticComponent<PixelBareButtonProps & React.RefAttributes<HTMLButtonElement>>;

type PixelBareInputProps = React.InputHTMLAttributes<HTMLInputElement>;
declare const PixelBareInput: React.ForwardRefExoticComponent<PixelBareInputProps & React.RefAttributes<HTMLInputElement>>;

type PixelBareTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
declare const PixelBareTextarea: React.ForwardRefExoticComponent<PixelBareTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

/** Public prop bag for {@link PixelInput}. */
interface PixelInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
    /** Floating label rendered above the input shell. */
    label?: string;
    /** Helper text shown below the field. Hidden when `error` is set. */
    hint?: string;
    /** Error message shown below the field; flips visual state to invalid. */
    error?: string;
    /** Visual tone for focus ring + border emphasis. Default: `'neutral'`. */
    tone?: Tone;
    /** Field height token. Default: `'md'`. */
    size?: Size$1;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Legacy left-icon slot, rendered inside the input shell. Equivalent to `prefix`. */
    icon?: React.ReactNode;
    /** Content rendered INSIDE the input shell on the left (icon or short text). */
    prefix?: React.ReactNode;
    /** Content rendered INSIDE the input shell on the right (icon or short text). */
    suffix?: React.ReactNode;
    /** Element rendered OUTSIDE the input shell and joined to its left edge (e.g. button/select). */
    addonLeft?: React.ReactNode;
    /** Element rendered OUTSIDE the input shell and joined to its right edge. */
    addonRight?: React.ReactNode;
    /** When true, shows a clear (×) button while the value is non-empty. */
    clearable?: boolean;
    /** Callback fired when the clear button is clicked. */
    onClear?: () => void;
    /** Render a character counter under the input. `true` shows `N`; `{ max }` shows `N/max`. */
    showCount?: boolean | {
        max?: number;
    };
    /** When true, replaces the suffix with a spinner and disables the input. */
    loading?: boolean;
}
declare const PixelInput: React.ForwardRefExoticComponent<PixelInputProps & React.RefAttributes<HTMLInputElement>>;

/** Public prop bag for {@link PixelPasswordInput}. */
interface PixelPasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
    /** Floating label rendered above the input shell. */
    label?: string;
    /** Helper text shown below the field. Hidden when `error` is set. */
    hint?: string;
    /** Error message shown below the field; flips visual state to invalid. */
    error?: string;
    /** Visual tone for focus ring + border emphasis. Default: `'neutral'`. */
    tone?: Tone;
    /** Field height token. Default: `'md'`. */
    size?: Size$1;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Text for the visibility toggle, in `[showLabel, hideLabel]` form. */
    toggleLabels?: [string, string];
}
declare const PixelPasswordInput: React.ForwardRefExoticComponent<PixelPasswordInputProps & React.RefAttributes<HTMLInputElement>>;

/** Public prop bag for {@link PixelTextarea}. */
interface PixelTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
    /** Floating label rendered above the textarea. */
    label?: string;
    /** Helper text shown below the field. Hidden when `error` is set. */
    hint?: string;
    /** Error message shown below the field; flips visual state to invalid. */
    error?: string;
    /** Visual tone for focus ring + border emphasis. Default: `'neutral'`. */
    tone?: Tone;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Auto-grow the textarea with content (between `minRows` and `maxRows`). */
    autosize?: boolean;
    /** Minimum visible rows when `autosize` is on. Defaults to `3`. */
    minRows?: number;
    /** Max rows before scrolling. Optional cap. */
    maxRows?: number;
    /** Render a character counter under the textarea. `true` shows `N`; `{ max }` shows `N/max`. */
    showCount?: boolean | {
        max?: number;
    };
}
declare const PixelTextarea: React.ForwardRefExoticComponent<PixelTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

/** Public prop bag for {@link PixelSelect}. */
interface PixelSelectProps {
    /** Floating label rendered above the trigger. */
    label?: string;
    /** Items rendered in the listbox. */
    options: Option[];
    /** Controlled value. Make sure to update via `onChange`. */
    value?: string;
    /** Uncontrolled initial value. */
    defaultValue?: string;
    /** Fires when the user picks an option. */
    onChange?: (value: string) => void;
    /** Placeholder shown when no value is selected. */
    placeholder?: string;
    /** Helper text shown below the field. Hidden when `error` is set. */
    hint?: string;
    /** Error message shown below the field; flips visual state to invalid. */
    error?: string;
    /** Disables interaction + grays out the trigger. */
    disabled?: boolean;
    /** Visual tone for focus ring + selected option. Default: `'neutral'`. */
    tone?: Tone;
    /** Trigger height token. Default: `'md'`. */
    size?: Size$1;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Sets `name` on the hidden serialization input so the value participates in native `<form>` submissions. */
    name?: string;
    /** Marks the field as required for native form validation. */
    required?: boolean;
    /** DOM `id` forwarded to the trigger. */
    id?: string;
    /** `aria-describedby` forwarded to the trigger. */
    'aria-describedby'?: string;
}
declare const PixelSelect: React.ForwardRefExoticComponent<PixelSelectProps & React.RefAttributes<HTMLButtonElement>>;

/** Public prop bag for {@link PixelCheckbox}. */
interface PixelCheckboxProps {
    /** Label rendered next to the box. */
    label: string;
    /** Controlled checked state. */
    checked?: boolean;
    /** Uncontrolled initial checked state. */
    defaultChecked?: boolean;
    /** Fires with the next checked value when clicked. */
    onChange?: (next: boolean) => void;
    /** Disables interaction + grays out the control. */
    disabled?: boolean;
    /** Visual tone for the checked state. Default: `'green'`. */
    tone?: Tone;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Form-serialization name. Hidden mirror input sends `'on'` / `''`. */
    name?: string;
    /** HTML form value when checked. Defaults to `'on'`. */
    value?: string;
    /** Marks the field as required for native form validation. */
    required?: boolean;
    /** DOM `id` forwarded to the trigger. */
    id?: string;
}
declare const PixelCheckbox: React.ForwardRefExoticComponent<PixelCheckboxProps & React.RefAttributes<HTMLButtonElement>>;

/** Public prop bag for {@link PixelRadioGroup}. */
interface PixelRadioGroupProps {
    /** Legend rendered above the group. */
    label: string;
    /** Currently-selected option value. */
    value: string;
    /** Radio items. */
    options: Option[];
    /** Fires with the new value when the user picks a radio. */
    onChange: (next: string) => void;
    /** Disables every radio in the group. */
    disabled?: boolean;
    /** Visual tone for the selected radio. Default: `'cyan'`. */
    tone?: Tone;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Form-serialization name. */
    name?: string;
    /** Marks the field as required for native form validation. */
    required?: boolean;
}
declare const PixelRadioGroup: React.ForwardRefExoticComponent<PixelRadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

/** Public prop bag for {@link PixelSwitch}. */
interface PixelSwitchProps {
    /** Label rendered next to the switch. */
    label: string;
    /** Controlled checked state. */
    checked?: boolean;
    /** Uncontrolled initial checked state. */
    defaultChecked?: boolean;
    /** Fires with the next checked value when clicked. */
    onChange?: (next: boolean) => void;
    /** Disables interaction + grays out the control. */
    disabled?: boolean;
    /** Visual tone for the "on" state. Default: `'green'`. */
    tone?: Tone;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Form-serialization name. Hidden mirror sends `'on'` / `''`. */
    name?: string;
    /** HTML form value when checked. Defaults to `'on'`. */
    value?: string;
    /** Marks the field as required for native form validation. */
    required?: boolean;
    /** DOM `id` forwarded to the trigger. */
    id?: string;
}
declare const PixelSwitch: React.ForwardRefExoticComponent<PixelSwitchProps & React.RefAttributes<HTMLButtonElement>>;

type PixelSliderTooltip = 'always' | 'drag' | 'never';
/** A labeled mark on the track. */
interface PixelSliderMark {
    /** Value at which to position the mark on the track. */
    value: number;
    /** Rendered label content. */
    label: React.ReactNode;
}
/** Shared base props for {@link PixelSlider}. */
interface PixelSliderBaseProps {
    /** Visible label rendered above the track. */
    label: string;
    /** Minimum value. Default: `0`. */
    min?: number;
    /** Maximum value. Default: `100`. */
    max?: number;
    /** Step granularity. Default: `1`. */
    step?: number;
    /** Disables interaction + grays out the track. */
    disabled?: boolean;
    /** Visual tone for the active fill + thumb. Default: `'cyan'`. */
    tone?: Tone;
    /** Render `min` / `max` numbers under the track. */
    showMinMax?: boolean;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Form-serialization name (range mode emits `name[0]` / `name[1]`). */
    name?: string;
    /** Marks the field as required for native form validation. */
    required?: boolean;
    /** DOM `id` forwarded to the single / lower thumb. */
    id?: string;
    /** Labeled marks plotted on the track. */
    marks?: PixelSliderMark[];
    /**
     * When/how to show a value tooltip on each thumb.
     * - `'always'`: visible all the time
     * - `'drag'`: visible while dragging or focused
     * - `'never'`: hidden (default)
     */
    showTooltip?: PixelSliderTooltip;
    /** Render tick marks under the track for every discrete `step`. */
    ticks?: boolean;
}
/** Single-thumb variant. */
interface PixelSliderSingleProps extends PixelSliderBaseProps {
    /** Controlled scalar value. */
    value: number;
    /** Fires with the next scalar value. */
    onChange: (next: number) => void;
}
/** Range (two-thumb) variant. */
interface PixelSliderRangeProps extends PixelSliderBaseProps {
    /** Controlled `[lo, hi]` tuple. */
    value: [number, number];
    /** Fires with the next `[lo, hi]` tuple. */
    onChange: (next: [number, number]) => void;
}
/** Public prop bag for {@link PixelSlider}. */
type PixelSliderProps = PixelSliderSingleProps | PixelSliderRangeProps;
declare const PixelSlider: React.ForwardRefExoticComponent<PixelSliderProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelSegmented}. */
interface PixelSegmentedProps {
    /** Caption rendered above the segmented control. Omitted when empty. */
    label?: string;
    /** Active option value. */
    value: string;
    /** Segment items. */
    options: Option[];
    /** Fires with the new value when a segment is clicked. */
    onChange: (next: string) => void;
    /** Disables every segment. */
    disabled?: boolean;
    /** Visual tone for the active segment. Default: `'green'`. */
    tone?: Tone;
    /** Surface variant. Inherits from `PxlKitSurfaceProvider` when omitted. */
    surface?: Surface;
    /** Form-serialization name. */
    name?: string;
    /** Marks the field as required for native form validation. */
    required?: boolean;
    /** Accessible name for the group; use it when no visible `label` is rendered. */
    'aria-label'?: string;
}
declare const PixelSegmented: React.ForwardRefExoticComponent<PixelSegmentedProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelAlert}. */
interface PixelAlertProps {
    /** Short label shown in tone color (canonical name for the title). */
    label?: string;
    /**
     * @deprecated Use `label` instead. Retained as alias for one minor.
     */
    title?: string;
    /** Body message under the label. */
    message: string;
    /** Tone determines border, fill, text colors. Defaults to `'red'`. */
    tone?: Tone;
    /** Optional leading icon (rendered in tone color). */
    icon?: React.ReactNode;
    /** Optional action node rendered under the message. */
    action?: React.ReactNode;
    /** Surface override; falls back to nearest provider. */
    surface?: Surface;
    /** Optional `aria-live` override. Status banners ("info") should usually use `"polite"`. */
    live?: 'polite' | 'assertive' | 'off';
}
declare const PixelAlert: React.ForwardRefExoticComponent<PixelAlertProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelProgress}. */
interface PixelProgressProps {
    /** Current value 0-100 (clamped). */
    value: number;
    /** Tone determines fill color. Defaults to `'green'`. */
    tone?: Tone;
    /**
     * Optional label rendered above the bar. Also used as the progressbar's
     * accessible name; falls back to "Progress" when omitted.
     */
    label?: string;
    /** Whether to show the numeric percentage on the right. Defaults to `true`. */
    showValue?: boolean;
    /** Surface override; falls back to nearest provider. */
    surface?: Surface;
    /** When `true`, switches to indeterminate animation (visual only — ARIA still reports value). */
    indeterminate?: boolean;
}
declare const PixelProgress: React.ForwardRefExoticComponent<PixelProgressProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelSkeleton}. */
interface PixelSkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'> {
    /** CSS width (e.g. `"100%"`, `"12rem"`). */
    width?: string;
    /** CSS height (default `"1rem"`). */
    height?: string;
    /** When `true`, applies a pill/circle radius instead of the surface default. */
    rounded?: boolean;
    /** Surface override; falls back to nearest provider. */
    surface?: Surface;
    /** Accessible label override; falls back to `"Loading"`. */
    ariaLabel?: string;
}
declare const PixelSkeleton: React.ForwardRefExoticComponent<PixelSkeletonProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelEmptyState}. */
interface PixelEmptyStateProps {
    /** Short title (e.g. `"No results"`). */
    title: string;
    /** Supporting description below the title. */
    description: string;
    /** Optional CTA node (button, link). */
    action?: React.ReactNode;
    /** Optional decorative icon. */
    icon?: React.ReactNode;
    /** Surface override; falls back to nearest provider. */
    surface?: Surface;
}
declare const PixelEmptyState: React.ForwardRefExoticComponent<PixelEmptyStateProps & React.RefAttributes<HTMLDivElement>>;

type TabsOrientation = 'horizontal' | 'vertical';
type TabsActivationMode = 'automatic' | 'manual';

/** Public prop bag for {@link PixelTabsList}. */
interface PixelTabsListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
    /** Accessible label announced for the tablist. */
    ariaLabel?: string;
    /** When true, the tablist scrolls horizontally with a fade-mask. Ignored for vertical orientation. */
    scrollable?: boolean;
}
declare const PixelTabsList: React.ForwardRefExoticComponent<PixelTabsListProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelTabsTrigger}. */
interface PixelTabsTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'role' | 'value'> {
    /** Tab id this trigger controls — must match a {@link PixelTabsPanel} value. */
    value: string;
    /** Optional leading icon node. */
    icon?: React.ReactNode;
}
declare const PixelTabsTrigger: React.ForwardRefExoticComponent<PixelTabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;

/** Public prop bag for {@link PixelTabsPanel}. */
interface PixelTabsPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
    /** Tab id this panel belongs to — must match a {@link PixelTabsTrigger} value. */
    value: string;
    /** Override the root's keepMounted setting for this panel. */
    keepMounted?: boolean;
    /** Render with surface-aware border + radius chrome. Defaults to false (no chrome). */
    bordered?: boolean;
}
declare const PixelTabsPanel: React.ForwardRefExoticComponent<PixelTabsPanelProps & React.RefAttributes<HTMLDivElement>>;

/** Public prop bag for {@link PixelTabs}. */
interface PixelTabsProps {
    /** Sugar API. When omitted, use <PixelTabs.List>/<PixelTabs.Trigger>/<PixelTabs.Panel>. */
    items?: TabItem[];
    /** Uncontrolled initial active tab id. Canonical name; aliases `defaultTab`. */
    defaultValue?: string;
    /**
     * @deprecated Use `defaultValue` instead. Retained as alias for one minor.
     */
    defaultTab?: string;
    /** Controlled active tab id. When set, `defaultValue` is ignored. */
    value?: string;
    /** Fires whenever the active tab changes (controlled or uncontrolled). */
    onChange?: (id: string) => void;
    /** Visual surface treatment override. */
    surface?: Surface;
    /** Accessible label for the tablist. */
    ariaLabel?: string;
    /** Layout direction for the tab list + keyboard nav. */
    orientation?: TabsOrientation;
    /** When true, all panels render in the DOM (hidden via CSS). */
    keepMounted?: boolean;
    /** When true, the tablist scrolls horizontally with a fade-mask. Ignored for vertical orientation. */
    scrollable?: boolean;
    /** 'automatic' (default) selects on focus. 'manual' requires Enter/Space. */
    activationMode?: TabsActivationMode;
    /** Compositional children. Ignored when `items` is provided. */
    children?: React.ReactNode;
}
declare const PixelTabsRootFwd: React.ForwardRefExoticComponent<PixelTabsProps & React.RefAttributes<HTMLDivElement>>;
type PixelTabsComponent = typeof PixelTabsRootFwd & {
    List: typeof PixelTabsList;
    Trigger: typeof PixelTabsTrigger;
    Panel: typeof PixelTabsPanel;
};
declare const PixelTabs: PixelTabsComponent;

/** Public prop bag for {@link PixelAccordion}. */
interface PixelAccordionProps {
    /** Accordion items rendered in order. First item is expanded by default. */
    items: AccordionItem[];
    /** When true, multiple items can be expanded simultaneously. */
    allowMultiple?: boolean;
    /** When set, no item is initially expanded. Defaults to expanding the first. */
    collapsedByDefault?: boolean;
    /** Visual surface treatment override. */
    surface?: Surface;
}
declare const PixelAccordion: React.ForwardRefExoticComponent<PixelAccordionProps & React.RefAttributes<HTMLDivElement>>;

/** Single crumb item for {@link PixelBreadcrumb}. */
type PixelBreadcrumbItem = {
    /** Visible label for the crumb. */
    label: string;
    /** Optional anchor href — rendered as `<a>` when set without `onClick`. */
    href?: string;
    /** Optional click handler — rendered as `<button>` when set. Takes precedence over `href`. */
    onClick?: () => void;
    /** Marks the current page crumb (rendered as plain text with aria-current). */
    active?: boolean;
};
/** Public prop bag for {@link PixelBreadcrumb}. */
interface PixelBreadcrumbProps {
    /** Crumbs in order, from root to current page. */
    items: PixelBreadcrumbItem[];
    /** Visual surface treatment override. */
    surface?: Surface;
    /** Accessible label for the nav region. */
    ariaLabel?: string;
}
declare const PixelBreadcrumb: React.ForwardRefExoticComponent<PixelBreadcrumbProps & React.RefAttributes<HTMLElement>>;

/** Public prop bag for {@link PixelPagination}. */
interface PixelPaginationProps {
    /** Current page (1-indexed). */
    page: number;
    /** Total number of pages. */
    total: number;
    /** Fires when the user picks a new page. */
    onChange: (next: number) => void;
    /** Sibling pages to show around the current. Defaults to 1. */
    siblings?: number;
    /** Visual surface treatment override. */
    surface?: Surface;
    /** Accessible label for the nav region. */
    ariaLabel?: string;
    /** Localised label for the Prev button. */
    prevLabel?: string;
    /** Localised label for the Next button. */
    nextLabel?: string;
}
declare const PixelPagination: React.ForwardRefExoticComponent<PixelPaginationProps & React.RefAttributes<HTMLElement>>;

/** Public prop bag for {@link PixelModal}. */
interface PixelModalProps {
    /** Whether the modal is currently visible. */
    open: boolean;
    /** Modal title shown in the header. */
    title: string;
    /** Modal body content. */
    children: React.ReactNode;
    /** Called when the user requests to close the modal. */
    onClose: () => void;
    /** Width preset. Default `'md'`. */
    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /** Visual surface override. Falls back to nearest `<PxlKitProvider>` surface. */
    surface?: Surface;
    /** Optional override for the close button's accessible label. */
    closeLabel?: string;
    /** Optional footer node, rendered at the bottom separated by a surface-aware divider. */
    footer?: React.ReactNode;
    /** Optional description, wired via `aria-describedby` for AT users. */
    description?: React.ReactNode;
    /**
     * When provided, the close button awaits this promise (and shows a loading
     * state) before the consumer-controlled `onClose` is invoked. Lets callers
     * persist or animate-out before unmounting.
     */
    asyncClose?: () => Promise<void>;
    /** Optional portal container override. Defaults to `document.body`. */
    container?: HTMLElement | null;
}
declare const PixelModal: React.ForwardRefExoticComponent<PixelModalProps & React.RefAttributes<HTMLDivElement>>;

type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
type TooltipTrigger = 'hover' | 'click' | 'focus';
/** Public prop bag for {@link PixelTooltip}. */
interface PixelTooltipProps {
    /** Tooltip body. Accepts any ReactNode; falls back to {@link PixelTooltipProps.label} when omitted. */
    content?: React.ReactNode;
    /** Backwards-compat string alias for {@link PixelTooltipProps.content}. */
    label?: string;
    /** The element the tooltip is anchored to. */
    children: React.ReactNode;
    /** Preferred placement. floating-ui will flip/shift away from viewport edges. */
    position?: TooltipPosition;
    /** Visual surface override. Falls back to nearest `<PxlKitProvider>` surface. */
    surface?: Surface;
    /**
     * Open/close delays in ms. A bare `number` is treated as `{ open }` for
     * backwards-compat with the previous API. Defaults to `{ open: 200, close: 100 }`.
     */
    delay?: number | {
        open?: number;
        close?: number;
    };
    /** Controlled open state. When provided, the tooltip ignores its internal state. */
    open?: boolean;
    /** Initial open state when uncontrolled. */
    defaultOpen?: boolean;
    /** Called whenever the tooltip wants to change open state (controlled or uncontrolled). */
    onOpenChange?: (open: boolean) => void;
    /** How the tooltip opens. Default `'hover'`. */
    trigger?: TooltipTrigger;
    /** Distance in px from the trigger. Default `8`. */
    sideOffset?: number;
}
declare const PixelTooltip: React.ForwardRefExoticComponent<PixelTooltipProps & React.RefAttributes<HTMLSpanElement>>;

type DropdownItemKind = 'item' | 'separator' | 'header' | 'submenu' | 'checkbox' | 'radio';
/**
 * Extended option shape accepted by {@link PixelDropdown} via `items[]`.
 * Backward-compat: plain `{value,label,icon}` still works (defaults to `kind:'item'`).
 */
type DropdownOption = Option & {
    disabled?: boolean;
    tone?: Tone;
    kind?: DropdownItemKind;
    shortcut?: string;
    /** For 'checkbox'/'radio' kinds: current checked state (display-only). */
    checked?: boolean;
};
/** Public prop bag for {@link PixelDropdown}. */
interface PixelDropdownProps {
    /** Trigger button label (legacy items[] API). */
    label?: string;
    /** Items to render (legacy items[] API). */
    items?: DropdownOption[];
    /** Called with the selected item's `value` (legacy items[] API). */
    onSelect?: (value: string) => void;
    /** Trigger tone. */
    tone?: Tone;
    /** Optional icon at the right side of the trigger button. Defaults to a chevron. */
    icon?: React.ReactNode;
    /** Disables the trigger button. */
    disabled?: boolean;
    /** Visual surface override. Falls back to nearest `<PxlKitProvider>` surface. */
    surface?: Surface;
    /** ARIA label override when the trigger label is purely decorative. */
    ariaLabel?: string;
    /** When using compositional API, children replace items[] rendering. */
    children?: React.ReactNode;
}
interface DropdownRootProps {
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    surface?: Surface;
    children: React.ReactNode;
}
declare function DropdownRoot({ open: openProp, defaultOpen, onOpenChange, surface: surfaceProp, children }: DropdownRootProps): react_jsx_runtime.JSX.Element;
interface DropdownTriggerProps {
    children?: React.ReactNode;
    tone?: Tone;
    icon?: React.ReactNode;
    disabled?: boolean;
    ariaLabel?: string;
}
declare const DropdownTrigger: React.ForwardRefExoticComponent<DropdownTriggerProps & React.RefAttributes<HTMLButtonElement>>;
interface DropdownContentProps {
    children?: React.ReactNode;
    className?: string;
}
declare const DropdownContent: React.ForwardRefExoticComponent<DropdownContentProps & React.RefAttributes<HTMLDivElement>>;
interface DropdownItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onSelect'> {
    /** Item identity for highlight/typeahead registration (NOT the HTML form `value`). */
    value?: string;
    children: React.ReactNode;
    /** Selection callback (NOT the DOM `select` event). */
    onSelect?: () => void;
    disabled?: boolean;
    /** Visually marks the row red; equivalent to `tone="red"`. */
    destructive?: boolean;
    tone?: Tone;
    icon?: React.ReactNode;
    shortcut?: string;
}
declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLButtonElement>>;
declare function DropdownSeparator(): react_jsx_runtime.JSX.Element;
declare function DropdownHeader({ children }: {
    children: React.ReactNode;
}): react_jsx_runtime.JSX.Element;
interface DropdownCheckboxItemProps extends Omit<DropdownItemProps, 'icon'> {
    checked?: boolean;
}
declare const DropdownCheckboxItem: React.ForwardRefExoticComponent<DropdownCheckboxItemProps & React.RefAttributes<HTMLButtonElement>>;
interface DropdownRadioItemProps extends Omit<DropdownItemProps, 'icon'> {
    checked?: boolean;
}
declare const DropdownRadioItem: React.ForwardRefExoticComponent<DropdownRadioItemProps & React.RefAttributes<HTMLButtonElement>>;
interface PixelDropdownComponent extends React.ForwardRefExoticComponent<PixelDropdownProps & React.RefAttributes<HTMLDivElement>> {
    Root: typeof DropdownRoot;
    Trigger: typeof DropdownTrigger;
    Content: typeof DropdownContent;
    Item: typeof DropdownItem;
    Separator: typeof DropdownSeparator;
    Header: typeof DropdownHeader;
    CheckboxItem: typeof DropdownCheckboxItem;
    RadioItem: typeof DropdownRadioItem;
}
declare const PixelDropdown: PixelDropdownComponent;

type ToastTone = Tone;
type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
/** Shape of an individual toast notification. */
interface ToastItem {
    id: string;
    title: string;
    message?: string;
    tone?: ToastTone;
    /** Auto-dismiss in ms. Set to `0` to disable. Defaults to 4500. */
    duration?: number;
    /** Optional icon node rendered to the left of the title. */
    icon?: React.ReactNode;
    /**
     * Optional animated pxlkit icon node. When provided, takes precedence over `icon`
     * and is rendered with the same slot semantics. Typically `<AnimatedPxlKitIcon …/>`.
     */
    animatedIcon?: React.ReactNode;
    /** Optional inline action (typically a {@link PixelButton} or link). */
    action?: React.ReactNode;
    /** When `true`, render with `role="alert"` (assertive). Defaults based on tone. */
    assertive?: boolean;
    /**
     * Show a leading spinner (used by `toast.loading()` and `toast.promise()`'s
     * loading state). Has no auto-dismiss unless `duration` is also set.
     */
    loading?: boolean;
}
/** Input shape accepted by {@link useToast}. `id` is generated if omitted. */
type ToastInput = Omit<ToastItem, 'id'> & {
    id?: string;
};
/** Patch shape for {@link UseToastReturn.update}. */
type ToastPatch = Partial<Omit<ToastItem, 'id'>>;
/** Options for {@link UseToastReturn.promise}. */
interface ToastPromiseOptions<T> {
    loading: Omit<ToastInput, 'tone' | 'loading'>;
    success: Omit<ToastInput, 'id'> | ((value: T) => Omit<ToastInput, 'id'>);
    error: Omit<ToastInput, 'id'> | ((err: unknown) => Omit<ToastInput, 'id'>);
}
/** Shorthand fn for tone-locked convenience helpers (success/error/info/warning/loading). */
type ToastShortcut = (titleOrInput: string | Omit<ToastInput, 'tone'>, message?: string) => string;
interface UseToastReturn {
    /** Push a toast. Returns the toast id (useful for `dismiss()`). */
    toast: ((input: ToastInput) => string) & {
        success: ToastShortcut;
        error: ToastShortcut;
        info: ToastShortcut;
        warning: ToastShortcut;
        loading: ToastShortcut;
        update: (id: string, patch: ToastPatch) => void;
        dismiss: (id: string) => void;
        promise: <T>(p: Promise<T> | (() => Promise<T>), opts: ToastPromiseOptions<T>) => Promise<T>;
    };
    /** Dismiss a specific toast by id. */
    dismiss: (id: string) => void;
    /** Update an existing toast in place (merge patch). */
    update: (id: string, patch: ToastPatch) => void;
    /** Clear every active toast immediately. */
    clear: () => void;
    /** Current active toasts (read-only). */
    toasts: ToastItem[];
}
declare function useToast(): UseToastReturn;
interface PxlKitToastProviderProps {
    children: React.ReactNode;
    position?: ToastPosition;
    /** Maximum simultaneous toasts. Oldest is dropped if exceeded. Defaults to 5. */
    max?: number;
    surface?: Surface;
    /**
     * Sonner-style stacked-offset visual: toasts collapse into a small stack
     * showing only the front card; hover expands them into a vertical list.
     * Defaults to `true`.
     */
    stacked?: boolean;
    /** How many additional cards peek behind the front when stacked. Defaults to 2. */
    stackVisible?: number;
}
declare function PxlKitToastProvider({ children, position, max, surface, stacked, stackVisible, }: PxlKitToastProviderProps): react_jsx_runtime.JSX.Element;

/** Public prop bag for the individual {@link PixelToast} card. Usually used
 *  through {@link useToast}, but exported for advanced custom rendering. */
interface PixelToastProps {
    toast: ToastItem;
    onDismiss: () => void;
    surface?: Surface;
}
declare const PixelToast: React.ForwardRefExoticComponent<PixelToastProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Possible trigger modes that decide *when* a `Pixel*` animation runs.
 *
 * - `'mount'`   — run as soon as the component mounts (default).
 * - `'hover'`   — run while the user hovers the wrapper.
 * - `'click'`   — run once per click, restarts on subsequent clicks.
 * - `'focus'`   — run while the wrapper has keyboard focus.
 * - `'inView'`  — run while the wrapper intersects the viewport.
 * - `boolean`   — fully controlled: `true` plays, `false` pauses/resets.
 */
type AnimationTrigger = 'mount' | 'hover' | 'click' | 'focus' | 'inView' | boolean;
/**
 * CSS `animation-iteration-count` shape: a finite number of repeats, or the
 * string literal `'infinite'`.
 */
type AnimationRepeat = number | 'infinite';

interface PixelFadeInProps {
    /** Content to fade in. */
    children: React.ReactNode;
    /** Animation duration in milliseconds. Default `400`. */
    duration?: number;
    /** Animation delay in milliseconds. Default `0`. */
    delay?: number;
    /** Iteration count: a number or `'infinite'`. Default `1`. */
    repeat?: AnimationRepeat;
    /** CSS `animation-timing-function`. Default `'ease'`. */
    easing?: string;
    /** CSS `animation-fill-mode`. Default `'both'`. */
    fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelFadeIn: React.ForwardRefExoticComponent<PixelFadeInProps & React.RefAttributes<HTMLDivElement>>;

interface PixelSlideInProps {
    /** Content to slide in. */
    children: React.ReactNode;
    /** Edge to slide from. Default `'down'`. */
    from?: 'up' | 'down' | 'left' | 'right';
    /** Animation duration in milliseconds. Default `350`. */
    duration?: number;
    /** Animation delay in milliseconds. Default `0`. */
    delay?: number;
    /** Translate distance in pixels. Default `10`. */
    distance?: number;
    /** Iteration count: a number or `'infinite'`. Default `1`. */
    repeat?: AnimationRepeat;
    /** CSS `animation-timing-function`. Default `'ease'`. */
    easing?: string;
    /** CSS `animation-fill-mode`. Default `'both'`. */
    fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelSlideIn: React.ForwardRefExoticComponent<PixelSlideInProps & React.RefAttributes<HTMLDivElement>>;

interface PixelPulseProps {
    /** Content to pulse. */
    children: React.ReactNode;
    /** Animation duration in milliseconds. Default `2000`. */
    duration?: number;
    /** Iteration count: a number or `'infinite'`. Default `'infinite'`. */
    repeat?: AnimationRepeat;
    /** CSS `animation-timing-function`. Default `'ease-in-out'`. */
    easing?: string;
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelPulse: React.ForwardRefExoticComponent<PixelPulseProps & React.RefAttributes<HTMLDivElement>>;

interface PixelBounceProps {
    /** Content to bounce. */
    children: React.ReactNode;
    /** Animation duration in milliseconds. Default `800`. */
    duration?: number;
    /** Iteration count: a number or `'infinite'`. Default `'infinite'`. */
    repeat?: AnimationRepeat;
    /** Peak bounce height in pixels. Default `8`. */
    height?: number;
    /** CSS `animation-timing-function`. Default `'ease'`. */
    easing?: string;
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelBounce: React.ForwardRefExoticComponent<PixelBounceProps & React.RefAttributes<HTMLDivElement>>;

interface PixelTypewriterProps {
    /** Label (text) to type out. Canonical prop. */
    label?: string;
    /**
     * @deprecated Use `label` instead. Retained as alias for one minor.
     */
    text?: string;
    /** Milliseconds between each character. Default `60`. */
    speed?: number;
    /** Delay before typing starts, in milliseconds. Default `0`. */
    delay?: number;
    /** Show a blinking caret while writing. Default `true`. */
    cursor?: boolean;
    /** Tone token applied to the text color. Default `'green'`. */
    tone?: Tone;
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires once the full string is rendered. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<span>`. */
    className?: string;
}
declare const PixelTypewriter: React.ForwardRefExoticComponent<PixelTypewriterProps & React.RefAttributes<HTMLSpanElement>>;

interface PixelGlitchProps {
    /** Content to glitch. */
    children: React.ReactNode;
    /** Length of one full glitch loop in milliseconds. Default `3000`. */
    duration?: number;
    /** Maximum horizontal displacement (pixels) of the ghost layers. Default `4`. */
    intensity?: number;
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelGlitch: React.ForwardRefExoticComponent<PixelGlitchProps & React.RefAttributes<HTMLDivElement>>;

interface PixelFloatProps {
    /** Content to float. */
    children: React.ReactNode;
    /** Animation duration in milliseconds. Default `2200`. */
    duration?: number;
    /** Vertical travel distance in pixels. Default `6`. */
    distance?: number;
    /** Iteration count: a number or `'infinite'`. Default `'infinite'`. */
    repeat?: AnimationRepeat;
    /** CSS `animation-timing-function`. Default `'ease-in-out'`. */
    easing?: string;
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelFloat: React.ForwardRefExoticComponent<PixelFloatProps & React.RefAttributes<HTMLDivElement>>;

interface PixelShakeProps {
    /** Content to shake. */
    children: React.ReactNode;
    /** Animation duration in milliseconds. Default `450`. */
    duration?: number;
    /** Horizontal travel distance in pixels. Default `2`. */
    distance?: number;
    /** Iteration count: a number or `'infinite'`. Default `1`. */
    repeat?: AnimationRepeat;
    /** CSS `animation-timing-function`. Default `'linear'`. */
    easing?: string;
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelShake: React.ForwardRefExoticComponent<PixelShakeProps & React.RefAttributes<HTMLDivElement>>;

interface PixelRotateProps {
    /** Content to rotate. */
    children: React.ReactNode;
    /** Animation duration in milliseconds. Default `1800`. */
    duration?: number;
    /** Iteration count: a number or `'infinite'`. Default `'infinite'`. */
    repeat?: AnimationRepeat;
    /** CSS `animation-direction`. Default `'normal'`. */
    direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
    /** CSS `animation-timing-function`. Default `'linear'`. */
    easing?: string;
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelRotate: React.ForwardRefExoticComponent<PixelRotateProps & React.RefAttributes<HTMLDivElement>>;

interface PixelZoomInProps {
    /** Content to zoom in. */
    children: React.ReactNode;
    /** Animation duration in milliseconds. Default `320`. */
    duration?: number;
    /** Animation delay in milliseconds. Default `0`. */
    delay?: number;
    /** Starting `scale()` factor. Default `0.92`. */
    startScale?: number;
    /** Iteration count: a number or `'infinite'`. Default `1`. */
    repeat?: AnimationRepeat;
    /** CSS `animation-timing-function`. Default `'cubic-bezier(.2,.9,.2,1)'`. */
    easing?: string;
    /** CSS `animation-fill-mode`. Default `'both'`. */
    fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelZoomIn: React.ForwardRefExoticComponent<PixelZoomInProps & React.RefAttributes<HTMLDivElement>>;

interface PixelFlickerProps {
    /** Content to flicker. */
    children: React.ReactNode;
    /** Animation duration in milliseconds. Default `2200`. */
    duration?: number;
    /** Iteration count: a number or `'infinite'`. Default `'infinite'`. */
    repeat?: AnimationRepeat;
    /** When the animation should play. Default `'mount'`. */
    trigger?: AnimationTrigger;
    /** Fires after the final iteration. */
    onComplete?: () => void;
    /** Extra class names applied to the wrapping `<div>`. */
    className?: string;
}
declare const PixelFlicker: React.ForwardRefExoticComponent<PixelFlickerProps & React.RefAttributes<HTMLDivElement>>;

declare const UI_KIT_COMPONENTS: readonly ["PixelButton", "PxlKitButton", "PixelSplitButton", "PixelCard", "PixelStatCard", "PixelTable", "PixelAvatar", "PixelBadge", "PixelChip", "PixelTextLink", "PixelCollapsible", "PixelBareButton", "PixelBareInput", "PixelBareTextarea", "PixelCodeInline", "PixelKbd", "PixelColorSwatch", "PixelInput", "PixelPasswordInput", "PixelTextarea", "PixelSelect", "PixelCheckbox", "PixelRadioGroup", "PixelSwitch", "PixelSlider", "PixelSegmented", "PixelAlert", "PixelProgress", "PixelSkeleton", "PixelEmptyState", "PixelTabs", "PixelAccordion", "PixelBreadcrumb", "PixelPagination", "PixelModal", "PixelTooltip", "PixelDropdown", "PixelToast", "PxlKitToastProvider", "PixelDivider", "PixelSection", "PixelFadeIn", "PixelSlideIn", "PixelPulse", "PixelBounce", "PixelTypewriter", "PixelGlitch", "PixelFloat", "PixelShake", "PixelRotate", "PixelZoomIn", "PixelFlicker", "PixelParallaxLayer", "PixelParallaxGroup", "PixelMouseParallax", "PxlKitLocaleProvider", "PxlKitSurfaceProvider", "PixelBox", "PixelStack", "PixelCluster", "PixelGrid", "PixelEqualHeightGrid", "PixelCenter", "PixelContainer", "PixelTwoColumn", "PixelSectionHeader", "PixelRibbon", "PixelFeatureCard", "PixelPricingCard", "PixelTestimonialCard", "PixelStarRating", "PixelIconFrame", "PixelHeroSection", "PixelHeroMedia", "PixelBento", "PixelBentoCell", "PixelPortal", "PixelPopover", "PixelDrawer", "PixelCommand", "PixelAlertDialog", "PixelSheet", "PixelCombobox", "PixelMultiSelect", "PixelDatePicker", "PixelNumberInput", "PixelOTPInput", "PixelFileUpload", "PixelForm", "PixelDataTable", "PixelStepper", "PixelSpinner", "PixelScrollArea", "PixelMenubar", "PixelNavigationMenu", "PixelSidebar", "PixelCarousel", "PixelTimeline", "PixelStatGroup", "PixelAvatarGroup", "PixelBadgeGroup", "PixelChipGroup", "PixelInputGroup", "PixelToggleGroup", "PixelToggle", "PixelDateRangePicker", "PixelCalendarGrid", "PixelColorInput", "PixelSparkline", "PixelBarChart", "PixelAreaChart"];

interface PixelParallaxLayerProps {
    children: React.ReactNode;
    /** Parallax multiplier. 0 = no movement, 1 = full scroll speed, negative = reverse. */
    speed?: number;
    /** Axis to translate on. Default `"y"`. */
    axis?: 'x' | 'y' | 'both';
    className?: string;
    style?: React.CSSProperties;
}
/**
 * PixelParallaxLayer — Scroll-based parallax.
 *
 * Wraps children in a layer that translates along Y (or X) proportionally to
 * scroll position. `speed` controls the multiplier:
 *   - 0   = static (moves with page)
 *   - 0.5 = moves at half scroll speed (far background feel)
 *   - 1   = moves at scroll speed (baseline)
 *   - −0.3 = moves opposite direction (foreground float-up feel)
 *
 * The translation is computed with `transform: translate3d()` for GPU compositing.
 */
declare const PixelParallaxLayer: React.ForwardRefExoticComponent<PixelParallaxLayerProps & React.RefAttributes<HTMLDivElement>>;

type GroupTag = 'div' | 'section' | 'header' | 'main';
interface PixelParallaxGroupProps {
    children: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
    /** HTML tag to render. Default `"div"`. */
    as?: GroupTag;
}
/**
 * PixelParallaxGroup — Container that establishes a perspective context.
 *
 * Wrap multiple `PixelParallaxLayer` or `PixelMouseParallax` elements inside
 * this to clip them within a shared viewport area. Applies `overflow: hidden`
 * and `position: relative` automatically.
 */
declare const PixelParallaxGroup: React.ForwardRefExoticComponent<PixelParallaxGroupProps & React.RefAttributes<HTMLElement>>;

interface PixelMouseParallaxProps {
    children: React.ReactNode;
    /** Max travel distance in px. */
    strength?: number;
    /** If true, moves away from cursor instead of towards. */
    invert?: boolean;
    className?: string;
    style?: React.CSSProperties;
}
/**
 * PixelMouseParallax — Cursor-tracking parallax.
 *
 * Translates children based on the mouse position relative to the nearest
 * `PixelParallaxGroup` (or the viewport). Use `strength` to control the range
 * (in px) an element can travel. Invert with `invert`.
 *
 * Great for floating elements that follow or repel from the cursor.
 */
declare const PixelMouseParallax: React.ForwardRefExoticComponent<PixelMouseParallaxProps & React.RefAttributes<HTMLDivElement>>;

/**
 * BCP 47 language tags for locales that require special font or text handling.
 *
 * - `"en"` — English (default). No special handling required.
 * - `"tr"` — Turkish. Requires `latin-ext` Google Fonts subset and locale-aware
 *   uppercasing (`i → İ`, `ı → I`).
 */
type PxlKitLocale = 'en' | 'tr';
/**
 * Configuration for each font used in the design system.
 */
interface PxlKitFontConfig {
    /** CSS `font-family` string (including fallbacks). */
    family: string;
    /** Google Fonts family name for loading. */
    googleFamily: string;
    /** Weights to load. */
    weights: number[];
    /** The CSS variable that references this font. */
    cssVar: string;
}
/** Default fonts used across the UI kit. */
declare const PXLKIT_FONTS: Record<'pixel' | 'sans' | 'mono', PxlKitFontConfig>;
/**
 * Turkish-specific characters for testing font rendering.
 * Includes all six special letter pairs unique to Turkish.
 */
declare const TURKISH_CHARACTERS: {
    readonly lowercase: "ç ğ ı ö ş ü";
    readonly uppercase: "Ç Ğ İ Ö Ş Ü";
    readonly sample: "İstanbul güneşli bir şehirdir";
    readonly pangram: "Pijamalı hasta yağız şoföre çabucak güvendi";
};
/**
 * Build a Google Fonts CSS2 import URL that loads the correct subsets for the
 * given locale.
 *
 * @example
 * ```ts
 * buildGoogleFontsUrl('tr')
 * // → "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&subset=latin,latin-ext&display=swap"
 * ```
 */
declare function buildGoogleFontsUrl(locale?: PxlKitLocale): string;
/**
 * Locale-aware uppercase that correctly handles Turkish dotted/dotless i.
 *
 * | Input | English          | Turkish          |
 * |-------|------------------|------------------|
 * | `i`   | `I`              | `İ` (U+0130)     |
 * | `ı`   | `I` (fallback)   | `I`              |
 *
 * @example
 * ```ts
 * toLocaleUpper('istanbul', 'tr') // → "İSTANBUL"
 * toLocaleUpper('istanbul', 'en') // → "ISTANBUL"
 * ```
 */
declare function toLocaleUpper(text: string, locale?: PxlKitLocale): string;
/**
 * Locale-aware lowercase that correctly handles Turkish `İ` → `i` and `I` → `ı`.
 *
 * @example
 * ```ts
 * toLocaleLower('İSTANBUL', 'tr') // → "istanbul"
 * toLocaleLower('ISTANBUL', 'tr') // → "ıstanbul"
 * ```
 */
declare function toLocaleLower(text: string, locale?: PxlKitLocale): string;
interface PxlKitLocaleContextValue {
    locale: PxlKitLocale;
    /** Locale-aware uppercase. */
    upper: (text: string) => string;
    /** Locale-aware lowercase. */
    lower: (text: string) => string;
    /** Google Fonts URL with the correct subsets for this locale. */
    fontsUrl: string;
}
/**
 * Hook to access the current PxlKit locale context.
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { locale, upper } = usePxlKitLocale();
 *   return <h1>{upper('istanbul')}</h1>; // → "İSTANBUL" when locale is "tr"
 * }
 * ```
 */
declare function usePxlKitLocale(): PxlKitLocaleContextValue;
interface PxlKitLocaleProviderProps {
    /**
     * BCP 47 locale tag.
     * @default "en"
     */
    locale?: PxlKitLocale;
    children: React.ReactNode;
}
/**
 * Provides locale-aware font loading and text utilities to all PxlKit components.
 *
 * ### What it does
 * 1. Sets `lang` on the nearest parent (via a wrapper `<div lang={locale}>`) so
 *    that CSS `text-transform: uppercase` handles Turkish `i → İ` correctly.
 * 2. Injects a `<link>` tag to load Google Fonts with the appropriate subsets
 *    (`latin-ext` for Turkish).
 * 3. Exposes `upper()` / `lower()` helpers via context so components can do
 *    locale-aware string transforms in JavaScript.
 *
 * ### Usage
 * ```tsx
 * import { PxlKitLocaleProvider } from '@pxlkit/ui-kit';
 *
 * // In your app root:
 * <PxlKitLocaleProvider locale="tr">
 *   <App />
 * </PxlKitLocaleProvider>
 * ```
 *
 * For server-rendered apps (Next.js), also set `lang` on the `<html>` tag:
 * ```tsx
 * // app/layout.tsx
 * <html lang="tr">
 * ```
 */
declare function PxlKitLocaleProvider({ locale, children, }: PxlKitLocaleProviderProps): react_jsx_runtime.JSX.Element;

export { type AccordionItem, type AnimationRepeat, type AnimationTrigger, type ContainerWidth, type DarkMode, type DateRangeValue, type DropdownItemKind, type DropdownOption, type Option, PXLKIT_FONTS, type PageGutter, PixelAccordion, type PixelAccordionProps, PixelAlert, PixelAlertDialog, type PixelAlertDialogProps, type PixelAlertProps, PixelAreaChart, type PixelAreaChartProps, PixelAvatar, PixelAvatarGroup, type PixelAvatarGroupProps, type PixelAvatarProps, type PixelAvatarShape, type PixelAvatarSize, type PixelAvatarStatus, PixelBadge, PixelBadgeGroup, type PixelBadgeGroupProps, type PixelBadgeProps, type PixelBadgeVariant, PixelBarChart, type PixelBarChartProps, PixelBareButton, type PixelBareButtonProps, PixelBareInput, type PixelBareInputProps, PixelBareTextarea, type PixelBareTextareaProps, PixelBento, PixelBentoCell, type PixelBentoCellProps, type PixelBentoProps, PixelBounce, type PixelBounceProps, PixelBox, type PixelBoxProps, PixelBreadcrumb, type PixelBreadcrumbItem, type PixelBreadcrumbProps, PixelButton, type PixelButtonProps, PixelCalendarGrid, type PixelCalendarGridProps, PixelCard, type PixelCardProps, PixelCarousel, PixelCarouselItem, type PixelCarouselProps, PixelCenter, type PixelCenterProps, type PixelChartDataPoint, PixelCheckbox, type PixelCheckboxProps, PixelChip, PixelChipGroup, type PixelChipGroupProps, type PixelChipProps, PixelCluster, type PixelClusterProps, PixelCodeInline, type PixelCodeInlineProps, PixelCollapsible, type PixelCollapsibleProps, PixelColorInput, type PixelColorInputProps, PixelColorSwatch, type PixelColorSwatchProps, PixelCombobox, type PixelComboboxOption, type PixelComboboxProps, PixelCommand, type PixelCommandGroup, type PixelCommandItem, type PixelCommandProps, PixelContainer, type PixelContainerProps, PixelDataTable, type PixelDataTableDensity, type PixelDataTableInstance, type PixelDataTableProps, PixelDatePicker, type PixelDatePickerProps, PixelDateRangePicker, type PixelDateRangePickerProps, PixelDivider, type PixelDividerProps, PixelDrawer, type PixelDrawerBodyProps, type PixelDrawerFooterProps, type PixelDrawerHeaderProps, type PixelDrawerProps, PixelDropdown, type PixelDropdownProps, PixelEmptyState, type PixelEmptyStateProps, PixelEqualHeightGrid, type PixelEqualHeightGridProps, PixelFadeIn, type PixelFadeInProps, PixelFeatureCard, type PixelFeatureCardProps, type PixelFileRejection, PixelFileUpload, type PixelFileUploadProps, PixelFlicker, type PixelFlickerProps, PixelFloat, type PixelFloatProps, PixelForm, PixelFormControl, type PixelFormControlProps, PixelFormDescription, type PixelFormDescriptionProps, PixelFormField, type PixelFormFieldProps, PixelFormItem, type PixelFormItemProps, PixelFormLabel, type PixelFormLabelProps, PixelFormMessage, type PixelFormMessageProps, PixelFormRoot, type PixelFormRootProps, PixelGlitch, type PixelGlitchProps, PixelGrid, type PixelGridProps, PixelHeroMedia, type PixelHeroMediaProps, PixelHeroSection, type PixelHeroSectionProps, PixelIconButton, type PixelIconButtonProps, PixelIconFrame, type PixelIconFrameProps, PixelInput, PixelInputGroup, type PixelInputGroupProps, type PixelInputProps, PixelKbd, type PixelKbdProps, PixelMenubar, type PixelMenubarItem, type PixelMenubarMenu, type PixelMenubarProps, PixelModal, type PixelModalProps, PixelMouseParallax, type PixelMouseParallaxProps, PixelMultiSelect, type PixelMultiSelectProps, PixelNavigationMenu, type PixelNavigationMenuItem, type PixelNavigationMenuProps, PixelNumberInput, type PixelNumberInputProps, PixelOTPInput, type PixelOTPInputProps, PixelPagination, type PixelPaginationProps, PixelParallaxGroup, type PixelParallaxGroupProps, PixelParallaxLayer, type PixelParallaxLayerProps, PixelPasswordInput, type PixelPasswordInputProps, PixelPopover, type PixelPopoverArrowProps, type PixelPopoverContentProps, type PixelPopoverProps, type PixelPopoverTriggerProps, PixelPortal, type PixelPortalProps, PixelPricingCard, type PixelPricingCardProps, PixelProgress, type PixelProgressProps, PixelPulse, type PixelPulseProps, PixelRadioGroup, type PixelRadioGroupProps, PixelRibbon, type PixelRibbonProps, PixelRotate, type PixelRotateProps, PixelScrollArea, type PixelScrollAreaProps, PixelSection, PixelSectionHeader, type PixelSectionHeaderProps, type PixelSectionProps, PixelSegmented, type PixelSegmentedProps, PixelSelect, type PixelSelectProps, PixelShake, type PixelShakeProps, PixelSheet, type PixelSheetProps, PixelSidebar, type PixelSidebarItemProps, type PixelSidebarProps, type PixelSidebarSectionProps, PixelSkeleton, type PixelSkeletonProps, PixelSlideIn, type PixelSlideInProps, PixelSlider, type PixelSliderMark, type PixelSliderProps, type PixelSliderRangeProps, type PixelSliderSingleProps, type PixelSliderTooltip, PixelSparkline, type PixelSparklineProps, PixelSpinner, type PixelSpinnerProps, PixelSplitButton, type PixelSplitButtonProps, PixelStack, type PixelStackProps, PixelStarRating, type PixelStarRatingProps, PixelStatCard, type PixelStatCardIconPosition, type PixelStatCardProps, type PixelStatCardSize, PixelStatGroup, type PixelStatGroupProps, PixelStepper, type PixelStepperProps, PixelStepperStep, type PixelStepperStepProps, PixelSwitch, type PixelSwitchProps, PixelTable, type PixelTableAlign, type PixelTableColumn, type PixelTableDensity, type PixelTableProps, type PixelTableSelection, type PixelTableSortDir, type PixelTableSortState, PixelTabs, PixelTabsList, type PixelTabsListProps, PixelTabsPanel, type PixelTabsPanelProps, type PixelTabsProps, PixelTabsTrigger, type PixelTabsTriggerProps, PixelTestimonialCard, type PixelTestimonialCardProps, PixelTextLink, type PixelTextLinkProps, PixelTextarea, type PixelTextareaProps, PixelTimeline, PixelTimelineItem, type PixelTimelineItemProps, type PixelTimelineProps, PixelToast, type PixelToastProps, PixelToggle, PixelToggleGroup, type PixelToggleGroupProps, type PixelToggleProps, PixelTooltip, type PixelTooltipProps, PixelTwoColumn, type PixelTwoColumnProps, PixelTypewriter, type PixelTypewriterProps, PixelZoomIn, type PixelZoomInProps, PxlKitButton, type PxlKitButtonProps, type PxlKitFontConfig, type PxlKitLocale, PxlKitLocaleProvider, type PxlKitLocaleProviderProps, PxlKitSurfaceProvider, PxlKitToastProvider, type PxlKitToastProviderProps, type ResolvedMode, type RhythmKey, type SectionRhythmKey, type Size$1 as Size, type StackGapKey, type Surface, type SurfaceClasses, TURKISH_CHARACTERS, type TabItem, type ToastInput, type ToastItem, type ToastPatch, type ToastPosition, type ToastPromiseOptions, type ToastShortcut, type ToastTone, type Tone, type ToneKey, UI_KIT_COMPONENTS, type UseControllableStateOptions, type UseLocalStorageOptions, type UseToastReturn, type Variant$1 as Variant, buildGoogleFontsUrl, cn, containerWidth, durations, easings, focusRing, inputBase, pageGutter, pixelDot, pixelRadius, pixelType, rhythm, sectionRhythm, sizeClass, sizeHeight, sizeSquare, stackGap, surfaceClasses, toLocaleLower, toLocaleUpper, tone, toneMap, useControllableState, useDarkMode, useEscape, useEventListener, useFocusTrap, useIsomorphicLayoutEffect, useLocalStorage, useMediaQuery, usePxlKitLocale, usePxlKitSurface, useReducedMotion, useScrollLock, useToast };