splatoon-ui 0.1.0

package/dist/client.d.ts

@@ -0,0 +1,1012 @@
+import { RuggedTheme, StapleCardProps, NavLink, LinkRenderProps } from './server.js';
+export { Alert, AlertDescription, AlertProps, AlertTitle, AssetImage, AssetImageProps, BlackTapeContainer, BlackTapeContainerProps, ButtonArrow, ButtonArrowProps, ButtonDrip, ButtonDripProps, CharacterImageAsset, DemoContent, DemoContentProps, DemoExampleGroup, EventCallout, EventCalloutProps, EventImageAsset, GitHubMark, HeadingTape, HeadingTapeDecoration, HeadingTapeDecorationImage, HeadingTapeProps, ImageAsset, Input, Marquee, MarqueeItem, MediaDecoration, MediaDecorationProps, NavChevron, NewsImageAsset, PaperSurface, PaperSurfaceProps, PaperSurfaceTone, PaperTearEdge, PaperTearEdgeProps, Pattern, PhotoDecoration, PhotoDecorationProps, PhotoFrame, PhotoFrameProps, PhotoTape, PhotoTapeProps, RuggedCard, RuggedCardProps, Section, SectionBackground, SectionBackgroundProps, SectionProps, ShowcaseImageAsset, SquidImageAsset, SquidSpriteAsset, Staple, StapleCard, StapleCardDescription, StapleCardTitle, StapleProps, Sticker10, Sticker2Red, Sticker5, TagHanger, Tape, TapeAsset, TapeAssetSource, TapeDivider, TapeDividerProps, TapeImageVariant, TapePicture, TapeProps, TapeResponsivePictures, TapeTitle, TapeVariant, TornCard, TornCardDescription, TornCardProps, TornCardSlot, TornCardSlotProps, TornCardTitle, WaveButton, WaveButtonAnimation, WaveButtonProps, WaveButtonSize, WaveButtonVariant, WeaponGalleryAsset, WeaponMarqueeAsset, WeaponShopGalleryAsset, WideTornPaper, characterImageAssets, eventImageAssets, isTapeImageVariant, newsStapleAssets, pageTransitionCharacterAssets, showcaseMediaAssets, squidImageAssets, squidSpriteAssets, tapeImageAssets, weaponMarqueeItems, weaponShopGalleryItems, weaponShowcaseItems } from './server.js';
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { HTMLMotionProps } from 'framer-motion';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import * as _base_ui_react from '@base-ui/react';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+
+declare const badgeVariants: (props?: ({
+    variant?: "blue" | "green" | "purple" | "red" | "yellow" | "monochrome" | "sticker" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+
+type BannerDividerVariant = 'design1' | 'design2' | 'design3' | 'yellow' | 'blue' | 'green' | 'purple' | 'orange' | 'red';
+type BannerDividerRotation = 'up' | 'down';
+interface BannerDividerTape {
+    variant: BannerDividerVariant;
+    rotate: BannerDividerRotation;
+    /** [base, medium-up] responsive top offset in px. Default varies by position. */
+    offsetY?: [number, number];
+    className?: string;
+    /** InView animation delay level (0-20). Default: auto (index-based) */
+    animDelay?: number;
+}
+interface BannerDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Pattern tape variant (design1/2/3). Combined with `color` for the common 2-tape divider. */
+    pattern?: BannerDividerVariant;
+    /** Color tape variant. Combined with `pattern` for the common 2-tape divider. */
+    color?: BannerDividerVariant;
+    /**
+     * Explicit tape layers. Overrides `pattern`/`color` when provided.
+     * Use for custom stacking or 3+ layer dividers.
+     */
+    tapes?: BannerDividerTape[];
+    /** Enable InView fly-in animation on each tape. */
+    animate?: boolean;
+    /** Root margin for InView IntersectionObserver. */
+    rootMargin?: string;
+    /**
+     * Overlay matches the reference behavior: the divider paints across the section edge
+     * without reserving document flow height. Use spacer only when a layout intentionally
+     * needs the divider to occupy vertical space.
+     */
+    layout?: 'overlay' | 'spacer';
+}
+declare function BannerDivider({ pattern, color, tapes: tapesProp, animate, rootMargin, layout, className, style: styleProp, ...props }: BannerDividerProps): React.JSX.Element;
+/** Convenience: 3-tape variant (design1 + design2 + blue) */
+declare const BANNER_DIVIDER_THREE_TAPES: [BannerDividerTape, BannerDividerTape, BannerDividerTape];
+
+interface BlobPlayButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    idleWobbleAmount?: number;
+    /** Blob color */
+    hexColor?: string;
+    /** Container width in px */
+    blobSize?: number;
+}
+declare function BlobPlayButton({ ref, className, idleWobbleAmount, hexColor, blobSize, ...props }: BlobPlayButtonProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+
+type ButtonThemePreset = 'dark' | 'light' | 'yellow' | 'dark-yellow' | 'dark-red' | 'dark-purple' | 'dark-purpleOrange' | 'dark-green' | 'dark-blue' | 'light-blue' | 'light-green' | 'light-purple' | 'light-red' | 'black';
+type ButtonColorToken = 'yellow' | 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'white' | 'black';
+
+declare const buttonVariants: (props?: ({
+    variant?: "blue" | "green" | "orange" | "purple" | "yellow" | "destructive" | "ghost" | "outline" | "arrow" | null | undefined;
+    size?: "default" | "icon" | "lg" | "sm" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps$1 extends React.ComponentPropsWithoutRef<typeof Button$1>, VariantProps<typeof buttonVariants> {
+    hasChevron?: boolean;
+    leftIcon?: React.ReactNode;
+    color?: ButtonColorToken;
+    hoverColor?: ButtonColorToken;
+    textColor?: ButtonColorToken;
+    textHoverColor?: ButtonColorToken;
+    theme?: ButtonThemePreset;
+}
+declare function Button({ ref, className, variant, size, children, hasChevron, leftIcon, onClick, onMouseEnter, onMouseLeave, color, hoverColor, textColor, textHoverColor, theme, render, nativeButton, ...props }: ButtonProps$1 & {
+    ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+
+interface CardImageProps extends React.ComponentProps<"div"> {
+    src?: string;
+    alt?: string;
+}
+declare function CardImage({ ref, className, src, alt, children, ...props }: CardImageProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+
+type CardVariant = 'paper' | 'staple' | 'rugged' | 'torn';
+declare const CardContext: React.Context<{
+    variant?: CardVariant;
+    surface?: "white" | "dark";
+}>;
+interface CardProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    variant?: CardVariant;
+    surface?: 'white' | 'dark';
+    /** Card rotation angle (rugged/torn) */
+    rotation?: string;
+    /** Theme preset (rugged only) */
+    ruggedTheme?: RuggedTheme;
+    /** Custom background ReactNode (rugged/torn) */
+    ruggedBackground?: React.ReactNode;
+    /** Image/media shown in the tilted image area */
+    image?: React.ReactNode;
+    /** Convenience: renders a title paragraph in the info area */
+    title?: React.ReactNode;
+    /** Convenience: renders a subtitle paragraph below the title */
+    subtitle?: React.ReactNode;
+    /** Convenience: renders an action element at the bottom of info */
+    action?: React.ReactNode;
+    /** Whether to show the decorative tape element at the top (staple/torn, default: true) */
+    showTape?: boolean;
+    /** Enable hover tilt animation (staple/paper variant) */
+    hoverTilt?: boolean;
+}
+declare function Card({ className, variant, surface, ruggedTheme, rotation, ruggedBackground, image, title, subtitle, action, showTape, hoverTilt, children, ...props }: CardProps): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+interface CarouselContextType {
+    currentIndex: number;
+    prevIndex: number;
+    navigationDirection: number;
+    itemCount: number;
+    canGoPrev: boolean;
+    canGoNext: boolean;
+    goToNext: () => void;
+    goToPrev: () => void;
+    goToIndex: (index: number) => void;
+}
+declare function useCarousel(): CarouselContextType;
+interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    index?: number;
+    defaultIndex?: number;
+    /** @deprecated Use defaultIndex for uncontrolled carousels. */
+    initialIndex?: number;
+    itemCount?: number;
+    onIndexChange?: (index: number) => void;
+}
+declare function Carousel({ ref, children, className, index, defaultIndex, initialIndex, itemCount: itemCountProp, onIndexChange, onKeyDown, role, tabIndex, ...props }: CarouselProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CarouselViewport({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CarouselBleedBoundary({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CarouselContent({ ref, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function useCarouselItemState(index: number | undefined): {
+    isActive: boolean;
+    wasActive: boolean;
+    isLeft: boolean;
+    isRight: boolean;
+    offset: number;
+    currentIndex: number;
+    index: number | undefined;
+};
+interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    'data-index'?: number;
+}
+declare function CarouselItem({ ref, className, children, 'data-index': index, ...props }: CarouselItemProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface FadeCarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    'data-index'?: number;
+    rotateAmount?: number;
+}
+declare function FadeCarouselItem({ ref, className, children, 'data-index': index, rotateAmount, ...props }: FadeCarouselItemProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SwipeableGallery({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+interface CarouselPaginationProps extends React.HTMLAttributes<HTMLUListElement> {
+    labels?: string[];
+}
+declare function CarouselPagination({ ref, className, labels, ...props }: CarouselPaginationProps & {
+    ref?: React.Ref<HTMLUListElement>;
+}): React.JSX.Element;
+interface CarouselImagePaginationItem {
+    src: string;
+    alt?: string;
+    rotate?: number;
+}
+interface CarouselImagePaginationProps extends React.HTMLAttributes<HTMLUListElement> {
+    images: CarouselImagePaginationItem[];
+}
+declare function CarouselImagePagination({ ref, className, images, ...props }: CarouselImagePaginationProps & {
+    ref?: React.Ref<HTMLUListElement>;
+}): React.JSX.Element;
+
+type CardStackCarouselItemLayout = "default" | "feed";
+declare function CardStackCarouselScene({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function CardStackCarouselContent({ ref, className, style, ...props }: React.ComponentPropsWithoutRef<typeof CarouselContent> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CardStackCarouselItemProps extends Omit<HTMLMotionProps<"div">, "children"> {
+    children?: React.ReactNode;
+    itemLayout?: CardStackCarouselItemLayout;
+    itemWidth?: React.CSSProperties["width"];
+    /** @deprecated Use itemLayout or itemWidth instead. */
+    shellClassName?: string;
+    /** @deprecated Use itemLayout or itemWidth instead. */
+    shellStyle?: React.CSSProperties;
+    "data-index"?: number;
+}
+declare function CardStackCarouselItem({ ref, className, children, itemLayout, itemWidth, shellClassName, shellStyle, style, "data-index": index, ...props }: CardStackCarouselItemProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CardStackCarouselPrevious({ ref, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function CardStackCarouselNext({ ref, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+
+declare function Checkbox({ className, ...props }: Checkbox$1.Root.Props): React.JSX.Element;
+
+type DialogSurface = 'paper' | 'cream' | 'danger';
+interface DialogProps extends Omit<Dialog$1.Root.Props, 'open' | 'onOpenChange' | 'children'> {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare function Dialog({ children, open: controlledOpen, onOpenChange, ...props }: DialogProps): React.JSX.Element;
+declare function DialogTrigger({ ref, ...props }: Dialog$1.Trigger.Props & {
+    ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare const DialogTriggerButton: ({ ref, children, variant, size, theme, hasChevron, color, hoverColor, textColor, textHoverColor, ...props }: Omit<Record<string, unknown>, "children" | "render"> & {
+    color?: ButtonColorToken | undefined;
+    children?: React.ReactNode;
+    size?: "default" | "icon" | "lg" | "sm" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "blue" | "green" | "orange" | "purple" | "yellow" | "destructive" | "ghost" | "outline" | "arrow" | null | undefined;
+    textColor?: ButtonColorToken | undefined;
+    hoverColor?: ButtonColorToken | undefined;
+    textHoverColor?: ButtonColorToken | undefined;
+    theme?: ButtonThemePreset | undefined;
+    hasChevron?: boolean | undefined;
+} & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
+declare function DialogPortal({ ...props }: Dialog$1.Portal.Props): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React.JSX.Element;
+interface DialogContentProps extends Dialog$1.Popup.Props {
+    showCloseButton?: boolean;
+    hasTape?: boolean;
+    tapePosition?: 'news' | 'event';
+    surface?: DialogSurface;
+    fullScreen?: boolean;
+}
+declare function DialogContent({ className, children, showCloseButton, hasTape, tapePosition, surface, fullScreen, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<'div'> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, style, ...props }: Dialog$1.Title.Props): React.JSX.Element;
+declare function DialogDescription({ className, style, ...props }: Dialog$1.Description.Props): React.JSX.Element;
+
+interface FeedCarouselItem extends Pick<StapleCardProps, 'image' | 'title' | 'subtitle' | 'action' | 'surface' | 'showTape' | 'hoverTilt'> {
+    id: React.Key;
+    cardClassName?: string;
+}
+interface FeedCarouselProps extends Omit<React.ComponentPropsWithoutRef<typeof Carousel>, 'children'> {
+    items: FeedCarouselItem[];
+    mediaAspectRatio?: React.CSSProperties['aspectRatio'] | false;
+}
+declare function FeedCarousel({ items, className, mediaAspectRatio, ...props }: FeedCarouselProps): React.JSX.Element;
+
+interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+    /** Wave fill color (default: var(--color-black)) */
+    waveColor?: string;
+    /** Wave height in px (default 120) */
+    waveHeight?: number;
+}
+declare function Footer({ waveColor, waveHeight, className, ...props }: FooterProps): React.JSX.Element;
+
+interface GalleryControlsProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    wrapButton?: (direction: "left" | "right", button: React.ReactNode) => React.ReactNode;
+}
+declare function GalleryControls({ ref, className, wrapButton, ...props }: GalleryControlsProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function GalleryBounce({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+
+/**
+ * IconButton — circular icon button for Splatoon UI controls.
+ *
+ * Variants control color; size is explicit override (default varies by variant).
+ * Pass `size` to force a specific dimension regardless of variant defaults.
+ */
+
+type IconButtonVariant = 'carousel' | 'primary' | 'ghost' | 'yellow' | 'outline' | 'accent';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+type IconButtonAnimation = 'squish' | 'pulse' | 'none';
+type IconButtonDirection = 'left' | 'right' | 'up' | 'down';
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    variant?: IconButtonVariant;
+    /** Explicit size override. When omitted, variant determines default size. */
+    size?: IconButtonSize;
+    animation?: IconButtonAnimation;
+    direction?: IconButtonDirection;
+    icon?: React.ReactNode;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface GalleryItem {
+    id: React.Key;
+    image: string;
+    className?: string;
+}
+interface MarqueeCarouselItem extends GalleryItem {
+    alt?: string;
+}
+interface MarqueeCarouselProps extends Omit<React.ComponentPropsWithoutRef<typeof Carousel>, "children"> {
+    items: MarqueeCarouselItem[];
+    pagination?: React.ReactNode;
+    renderItem?: (item: MarqueeCarouselItem, index: number) => React.ReactNode;
+}
+declare function MarqueeCarousel({ items, className, pagination, renderItem, ...props }: MarqueeCarouselProps): React.JSX.Element;
+interface MarqueeGalleryItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    item: MarqueeCarouselItem;
+    "data-index"?: number;
+}
+declare function MarqueeGalleryItem({ ref, className, item, "data-index": index, ...props }: MarqueeGalleryItemProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+
+interface IconPaginatedCarouselItem extends GalleryItem {
+    title: string;
+    description?: string;
+    icon: string;
+    iconRotate?: number;
+}
+interface IconPaginatedCarouselProps extends React.ComponentPropsWithoutRef<typeof MarqueeCarousel> {
+    items: IconPaginatedCarouselItem[];
+}
+declare function IconPaginatedCarousel({ items, className, ...props }: IconPaginatedCarouselProps): React.JSX.Element;
+
+/**
+ * Arrow-down icon for the back-to-top button.
+ * ViewBox: 0 0 16 9.45
+ */
+declare function NavArrowDown({ className, ...props }: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+
+/**
+ * InView — scroll-triggered animation helper.
+ *
+ * Uses IntersectionObserver to add `.in-view` class to the wrapper,
+ * triggering CSS transitions on child `.anim` elements.
+ *
+ * CSS modules provide `.anim`, `.stagger`, and directional transition classes.
+ */
+
+type InViewDirection = 'left' | 'right' | 'up' | 'up-min' | 'down' | 'pop';
+type InViewDelay = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
+interface InViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Animation direction */
+    direction?: InViewDirection;
+    /** Delay level (1-20, each = 0.1s) */
+    delay?: InViewDelay;
+    /** Root margin for IntersectionObserver (e.g. "-100px", "0%") */
+    rootMargin?: string;
+    /** Only trigger once */
+    once?: boolean;
+    /** Use drop animation (start-scale: 1.1) instead of direction */
+    drop?: boolean | 'slow';
+    /** Content to animate */
+    children?: React.ReactNode;
+}
+declare function InView({ direction, delay, rootMargin, once, drop, className, children, ...props }: InViewProps): React.JSX.Element;
+interface InViewStaggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Stagger direction variant */
+    variant?: 'up-min' | 'pop';
+    /** Root margin for IntersectionObserver */
+    rootMargin?: string;
+    /** Only trigger once */
+    once?: boolean;
+    /** Override IntersectionObserver — when provided, controls active state directly */
+    active?: boolean;
+    children?: React.ReactNode;
+}
+declare function InViewStagger({ variant, rootMargin, once, active, className, children, ...props }: InViewStaggerProps): React.JSX.Element;
+
+/**
+ * WebGL-based ink splash transition effect.
+ * Uses fragment shaders with simplex noise (Ashima Arts) for organic ink edges.
+ *
+ * Uses raw WebGL with WebGL2-first fallback — no external dependencies
+ * Implemented with raw WebGL.
+ */
+
+interface InkSplashCanvasProps {
+    /** Animation state */
+    state: 'in' | 'out' | 'idle';
+    /** Duration for opening animation (ms) */
+    durationIn?: number;
+    /** Duration for closing animation (ms) */
+    durationOut?: number;
+    /** Ink color (hex) */
+    color?: string;
+    /** Seed for noise variation (increment each open) */
+    count?: number;
+    /** Start position in NDC coordinates [-0.5..0.5]. If not provided, defaults to [0,0] (center). */
+    startPosition?: [number, number];
+    /** Optional texture for the splat-transition shader. */
+    background?: string;
+    /**
+     * Pre-loaded image element for the background texture.
+     * When provided, skips async Image() loading — texture uploads synchronously on mount.
+     * Use this to avoid the first-play flash where the shader falls back to solid color.
+     */
+    preloadedBackground?: HTMLImageElement | null;
+    /** Called when animation completes */
+    onComplete?: () => void;
+    /** Additional CSS class */
+    className?: string;
+}
+declare function InkSplashCanvas({ state, durationIn, durationOut, color, count, startPosition, background, preloadedBackground, onComplete, className, }: InkSplashCanvasProps): React.JSX.Element;
+
+/**
+ * Canvas-based ink trail effect following mouse/touch movement.
+ * Ink cursor trail:
+ * organic ink blobs spawn at the cursor position and fade/shrink
+ * naturally over time.
+ *
+ * Uses 2D Canvas with requestAnimationFrame — no external dependencies.
+ * Respects prefers-reduced-motion (reduces density, never fully disables).
+ */
+
+interface InkTrailCanvasProps extends React.ComponentProps<'div'> {
+    /** Enable the trail effect */
+    enabled?: boolean;
+    /** Ink colors to cycle through */
+    colors?: string[];
+    /** Base size of each ink blob in px */
+    blobSize?: number;
+    /** Random size variance (0-1) */
+    sizeVariance?: number;
+    /** How often to spawn particles (ms). Lower = denser trail */
+    spawnInterval?: number;
+    /** Maximum particle lifetime in ms */
+    particleLifetime?: number;
+    /** Maximum distance from cursor to spawn particle (px) */
+    spawnRadius?: number;
+    /** Opacity of newly spawned particles (0-1) */
+    initialOpacity?: number;
+    /** Particle z-index layer */
+    zIndex?: number;
+}
+declare function InkTrailCanvas({ ref, enabled, colors, blobSize, sizeVariance, spawnInterval, particleLifetime, spawnRadius, initialOpacity, className, style, children, ...props }: InkTrailCanvasProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+
+declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
+
+type LoaderAnimation = 'glyph' | 'morph' | 'swim';
+interface LoaderProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Loader color variant. */
+    variant?: 'default' | 'blue' | 'red';
+    /** Animation source used by the loader. */
+    animation?: LoaderAnimation;
+    /** Size in CSS units (e.g. '1em', '2rem', '32px'). */
+    size?: string;
+    /** Accessible status label. */
+    label?: string;
+}
+/**
+ * Loader — image-backed animated squid loading glyph.
+ */
+declare function Loader({ variant, animation, size, label, className, style, 'aria-label': ariaLabel, ...props }: LoaderProps): React.JSX.Element;
+
+type NavMenuButtonProps = React.ComponentProps<'button'> & {
+    pressed?: boolean;
+};
+declare function NavMenuButton({ ref, className, pressed, ...props }: NavMenuButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+
+interface NavigationProps {
+    /** Decorative element at the bottom-left of the header — receives isCollapsed for responsive positioning */
+    headerDecoration?: (isCollapsed: boolean) => React.ReactNode;
+    /** Navigation menu content (e.g. NavigationDialog) */
+    children: React.ReactNode;
+    /** Header className — defaults to 'bg-black text-white' */
+    headerClassName?: string;
+    /** Whether to show the skip-to-content link — defaults to true */
+    showSkipLink?: boolean;
+    /** Skip-to-content href — defaults to '#main-content' */
+    skipToContentHref?: string;
+    /** Whether to show the reduced motion toggle — defaults to true */
+    showReducedMotionToggle?: boolean;
+}
+declare function Navigation({ headerDecoration, children, headerClassName, showSkipLink, skipToContentHref, showReducedMotionToggle, }: NavigationProps): React.JSX.Element;
+
+type ContentPhase = 'hidden' | 'entering' | 'visible' | 'exiting';
+type CanvasState = 'in' | 'out' | 'idle';
+
+type BackgroundTransitionProps = {
+    canvasState: CanvasState;
+    openCount: number;
+    onComplete: () => void;
+};
+type NavigationDialogProps = {
+    isReducedMotion?: boolean;
+    navLinks: NavLink[];
+    highlightColor: string;
+    cta?: React.ReactNode;
+    logo?: (contentPhase: ContentPhase) => React.ReactNode;
+    menuDecorations?: React.ReactNode;
+    overlayDecorations?: (contentPhase: ContentPhase) => React.ReactNode;
+    renderLink?: (link: NavLink, props: LinkRenderProps) => React.ReactNode;
+    backgroundTransition: (props: BackgroundTransitionProps) => React.ReactNode;
+    onNavigate?: (href: string) => void;
+};
+declare function NavigationDialog({ isReducedMotion, navLinks, highlightColor, cta, logo, menuDecorations, overlayDecorations, renderLink, backgroundTransition, onNavigate, }: NavigationDialogProps): React.JSX.Element;
+
+/**
+ * PageTransition — Splatoon-style ink splash page transition.
+ *
+ * Wraps page content and provides ink-cover/reveal transitions
+ * using the existing InkSplashCanvas WebGL shader.
+ *
+ * Usage:
+ *   const ref = useRef<PageTransitionHandle>(null)
+ *   await ref.current?.transitionOut()
+ *   // ... swap content ...
+ *   ref.current?.transitionIn()
+ */
+
+interface PageTransitionHandle {
+    transitionOut: (options?: {
+        color?: string;
+        duration?: number;
+    }) => Promise<void>;
+    transitionIn: (options?: {
+        color?: string;
+        duration?: number;
+    }) => void;
+    readonly state: Phase$1;
+}
+interface PageTransitionProps extends Omit<React.ComponentProps<'div'>, 'ref'> {
+    color?: string;
+    durationIn?: number;
+    durationOut?: number;
+    autoReveal?: boolean;
+    onCovered?: () => void;
+    onRevealed?: () => void;
+}
+type Phase$1 = 'idle' | 'covering' | 'covered' | 'revealing';
+declare function PageTransition({ ref, color: inkColor, durationIn, durationOut, autoReveal, onCovered, onRevealed, className, children, ...props }: PageTransitionProps & {
+    ref?: React.Ref<PageTransitionHandle>;
+}): React.JSX.Element;
+
+declare function Popover({ ...props }: Popover$1.Root.Props): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): React.JSX.Element;
+declare const PopoverTriggerButton: ({ ref, children, variant, size, theme, hasChevron, color, hoverColor, textColor, textHoverColor, ...props }: Omit<Record<string, unknown>, "children" | "render"> & {
+    color?: ButtonColorToken | undefined;
+    children?: React.ReactNode;
+    size?: "default" | "icon" | "lg" | "sm" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "blue" | "green" | "orange" | "purple" | "yellow" | "destructive" | "ghost" | "outline" | "arrow" | null | undefined;
+    textColor?: ButtonColorToken | undefined;
+    hoverColor?: ButtonColorToken | undefined;
+    textHoverColor?: ButtonColorToken | undefined;
+    theme?: ButtonThemePreset | undefined;
+    hasChevron?: boolean | undefined;
+} & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
+declare function PopoverPortal({ ...props }: Popover$1.Portal.Props): React.JSX.Element;
+declare function PopoverPositioner({ className, align, alignOffset, side, sideOffset, ...props }: Popover$1.Positioner.Props): React.JSX.Element;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverPopupProps & {
+    align?: Popover$1.Positioner.Props["align"];
+    alignOffset?: Popover$1.Positioner.Props["alignOffset"];
+    side?: Popover$1.Positioner.Props["side"];
+    sideOffset?: Popover$1.Positioner.Props["sideOffset"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: Popover$1.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: Popover$1.Description.Props): React.JSX.Element;
+
+type ProgressVariant = "yellow" | "blue" | "green" | "purple" | "orange" | "red" | "black" | "white";
+type ProgressTrackVariant = "dark" | "light" | "transparent";
+type ProgressSize = "sm" | "default" | "lg";
+interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, "children" | "max" | "value"> {
+    value?: number;
+    max?: number;
+    variant?: ProgressVariant;
+    trackVariant?: ProgressTrackVariant;
+    size?: ProgressSize;
+    skewed?: boolean;
+    splattered?: boolean;
+}
+declare function Progress({ ref, className, value, max, variant, trackVariant, size, skewed, splattered, ...props }: ProgressProps & {
+    ref?: React.Ref<React.ElementRef<typeof ProgressPrimitive.Root>>;
+}): React.JSX.Element;
+
+declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): React.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: Radio.Root.Props): React.JSX.Element;
+
+interface SectionNavItem {
+    /** Unique section identifier — must match the `id` of the target anchor element */
+    id: string;
+    /** Display number (e.g. "01", "02") */
+    number: string;
+}
+interface SectionSideNavProps extends React.ComponentProps<'nav'> {
+    /** Sections to display in the navigation */
+    sections: SectionNavItem[];
+    /** Ref to the content container wrapping all sections. Sidebar visibility
+     *  is tied to this element's viewport intersection — exactly matching the
+     *  Splatoon UI section navigation implementation. */
+    contentRef: React.RefObject<HTMLElement | null>;
+    /** Height, in CSS pixels, reserved for fixed chrome above the nav. */
+    topInset?: number;
+    /** Minimum distance, in CSS pixels, between the nav and usable viewport edges. */
+    viewportMargin?: number;
+}
+declare function SectionSideNav({ ref, sections, contentRef, className, style, topInset, viewportMargin, ...props }: SectionSideNavProps & {
+    ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+
+declare const Select: typeof Select$1.Root;
+declare function SelectGroup({ className, ...props }: Select$1.Group.Props): React.JSX.Element;
+declare function SelectValue({ className, ...props }: Select$1.Value.Props): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: Select$1.Trigger.Props & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: Select$1.GroupLabel.Props): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: Select$1.Item.Props): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: Select$1.Separator.Props): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollUpArrow>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollDownArrow>): React.JSX.Element;
+
+declare function Sheet({ ...props }: Dialog$1.Root.Props): React.JSX.Element;
+declare function SheetTrigger({ ...props }: Dialog$1.Trigger.Props): React.JSX.Element;
+declare const SheetTriggerButton: ({ ref, children, variant, size, theme, hasChevron, color, hoverColor, textColor, textHoverColor, ...props }: Omit<Record<string, unknown>, "children" | "render"> & {
+    color?: ButtonColorToken | undefined;
+    children?: React.ReactNode;
+    size?: "default" | "icon" | "lg" | "sm" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "blue" | "green" | "orange" | "purple" | "yellow" | "destructive" | "ghost" | "outline" | "arrow" | null | undefined;
+    textColor?: ButtonColorToken | undefined;
+    hoverColor?: ButtonColorToken | undefined;
+    textHoverColor?: ButtonColorToken | undefined;
+    theme?: ButtonThemePreset | undefined;
+    hasChevron?: boolean | undefined;
+} & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
+declare function SheetPortal({ ...props }: Dialog$1.Portal.Props): React.JSX.Element;
+declare function SheetOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React.JSX.Element;
+type SheetSide = "top" | "right" | "bottom" | "left";
+declare const SheetPopup: React.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogPopupProps & {
+    side?: SheetSide;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetContent: React.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogPopupProps & {
+    side?: SheetSide;
+    showCloseButton?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: Dialog$1.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: Dialog$1.Description.Props): React.JSX.Element;
+
+/**
+ * SplatoonTitle — image-capable heading for the Splatoon UI demo.
+ * Pass custom image assets when a bitmap title is needed; otherwise the
+ * component renders an accessible text fallback.
+ */
+
+type SplatoonTitleVariant = 'logo' | 'section';
+type SplatoonTitleSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface SplatoonTitleProps extends React.ComponentProps<'div'> {
+    /** Title variant */
+    variant?: SplatoonTitleVariant;
+    /** Optional section key used for text fallback labels */
+    section?: string;
+    /** Title size */
+    size?: SplatoonTitleSize;
+    /** Animation on mount */
+    animate?: boolean;
+    /** Custom image URL (overrides section) */
+    image?: string;
+    /** Custom image URL for hover state */
+    imageHover?: string;
+    /** Text content (used as fallback or alt text) */
+    children?: React.ReactNode;
+}
+declare function SplatoonTitle({ ref, variant, section, size, animate, image, imageHover, children, className, ...props }: SplatoonTitleProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+
+interface SplatProps extends Omit<React.SVGProps<SVGSVGElement>, 'id'> {
+    /** Bundled splat ID (1 to 12) */
+    id: number;
+    /** CSS color value or CSS variable */
+    color?: string;
+}
+/**
+ * Dynamic Splat Router Component.
+ * Routes dynamically to Splat1 through Splat12.
+ * Ideal for loops or dynamic particle rendering.
+ */
+declare function Splat({ id, ...props }: SplatProps): React.JSX.Element | null;
+
+interface InteractiveSplatterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum number of splats on screen before older ones fade out (default: 15) */
+    maxSplats?: number;
+    /** Minimum diameter of spawned splat in pixels (default: 90) */
+    minSize?: number;
+    /** Maximum diameter of spawned splat in pixels (default: 180) */
+    maxSize?: number;
+    /** List of custom ink colors to cycle/pick randomly (default: Splatoon brand colors) */
+    colors?: string[];
+    /** Allow clicking parent container to spawn splats (default: true) */
+    interactive?: boolean;
+    /** Specific splat IDs to pick from. Defaults to all bundled splat shapes. */
+    splatIds?: number[];
+}
+/**
+ * InteractiveSplatter Component.
+ * Attach this inside a positioned container. Clicking anywhere in the parent
+ * container will spawn dynamic ink splats in the background.
+ */
+declare function InteractiveSplatter({ ref, className, maxSplats, minSize, maxSize, colors, interactive, splatIds, ...props }: InteractiveSplatterProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+
+interface Splat1Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #1.
+ * ViewBox: 0 0 478 624
+ */
+declare function Splat1({ color, className, style, ...props }: Splat1Props): React.JSX.Element;
+
+interface Splat2Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #2.
+ * ViewBox: 0 0 628 539
+ */
+declare function Splat2({ color, className, style, ...props }: Splat2Props): React.JSX.Element;
+
+interface Splat3Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #3.
+ * ViewBox: 0 0 510 497
+ */
+declare function Splat3({ color, className, style, ...props }: Splat3Props): React.JSX.Element;
+
+interface Splat4Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #4.
+ * ViewBox: 0 0 271 286
+ */
+declare function Splat4({ color, className, style, ...props }: Splat4Props): React.JSX.Element;
+
+interface Splat5Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #5.
+ * ViewBox: 0 0 318 267
+ */
+declare function Splat5({ color, className, style, ...props }: Splat5Props): React.JSX.Element;
+
+interface Splat6Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #6.
+ * ViewBox: 0 0 244 265
+ */
+declare function Splat6({ color, className, style, ...props }: Splat6Props): React.JSX.Element;
+
+interface Splat7Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #7.
+ * ViewBox: 0 0 630 630
+ */
+declare function Splat7({ color, className, style, ...props }: Splat7Props): React.JSX.Element;
+
+interface Splat8Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #8.
+ * ViewBox: 0 0 630 630
+ */
+declare function Splat8({ color, className, style, ...props }: Splat8Props): React.JSX.Element;
+
+interface Splat9Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #9.
+ * ViewBox: 0 0 630 630
+ */
+declare function Splat9({ color, className, style, ...props }: Splat9Props): React.JSX.Element;
+
+interface Splat10Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #10.
+ * ViewBox: 0 0 320 320
+ */
+declare function Splat10({ color, className, style, ...props }: Splat10Props): React.JSX.Element;
+
+interface Splat11Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #11.
+ * ViewBox: 0 0 320 320
+ */
+declare function Splat11({ color, className, style, ...props }: Splat11Props): React.JSX.Element;
+
+interface Splat12Props extends React.SVGProps<SVGSVGElement> {
+    /** CSS color value or CSS variable e.g. "var(--color-yellow)" */
+    color?: string;
+}
+/**
+ * Ink splat decorative shape #12.
+ * ViewBox: 0 0 320 320
+ */
+declare function Splat12({ color, className, style, ...props }: Splat12Props): React.JSX.Element;
+
+/**
+ * Ink splat decoration behind the active section nav item.
+ * Ported from official splatoon.nintendo.com `icon-gallery-nav-splat` symbol.
+ * ViewBox: 0 0 156 136
+ */
+declare function NavSplat({ className, ...props }: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+
+/**
+ * SquidMaskTransition — Canvas 2D rotating squid mask transition.
+ *
+ * Canvas 2D rotating squid mask transition:
+ * a squid image rotates and scales on a canvas, then a black fill
+ * with source-out compositing covers/reveals the page.
+ *
+ * The local mask asset is read from the shared squid asset registry.
+ */
+
+interface SquidMaskTransitionHandle {
+    transitionOut: (options?: {
+        duration?: number;
+    }) => Promise<void>;
+    transitionIn: (options?: {
+        duration?: number;
+    }) => void;
+    readonly state: Phase;
+}
+interface SquidMaskTransitionProps extends Omit<React.ComponentProps<'div'>, 'ref'> {
+    durationIn?: number;
+    durationOut?: number;
+    autoReveal?: boolean;
+    onCovered?: () => void;
+    onRevealed?: () => void;
+}
+type Phase = 'idle' | 'covering' | 'covered' | 'revealing';
+declare function SquidMaskTransition({ ref, durationIn, durationOut, autoReveal, onCovered, onRevealed, className, children, ...props }: SquidMaskTransitionProps & {
+    ref?: React.Ref<SquidMaskTransitionHandle>;
+}): React.JSX.Element;
+
+declare function Tabs({ className, orientation, ...props }: Tabs$1.Root.Props): React.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+    color?: "blue" | "green" | "orange" | "red" | "yellow" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, color, ...props }: Tabs$1.List.Props & VariantProps<typeof tabsListVariants>): React.JSX.Element;
+declare function TabsTrigger({ className, children, ...props }: Tabs$1.Tab.Props): React.JSX.Element;
+declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): React.JSX.Element;
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+type TriggerButtonOwnProps = Pick<ButtonProps, "children" | "variant" | "size" | "theme" | "hasChevron" | "color" | "hoverColor" | "textColor" | "textHoverColor">;
+declare function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null): void;
+declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): (value: T | null) => void;
+/**
+ * Factory: creates a TriggerButton component that renders a Base UI trigger
+ * with a Button as its `render` output.
+ *
+ * Usage:
+ *   const DialogTriggerButton = createTriggerButton(DialogPrimitive.Trigger, "dialog-trigger")
+ */
+declare function createTriggerButton<TTrigger extends React.ComponentType<Record<string, unknown>>>(Trigger: TTrigger, dataSlot: string, options?: {
+    useRegisterRef?: () => React.Ref<HTMLButtonElement> | undefined;
+}): ({ ref, children, variant, size, theme, hasChevron, color, hoverColor, textColor, textHoverColor, ...props }: (Omit<React.ComponentProps<TTrigger>, "children" | "render"> & TriggerButtonOwnProps) & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
+
+interface VideoDialogProps extends Omit<React.ComponentProps<typeof Dialog>, 'children'> {
+    children?: React.ReactNode;
+}
+declare function VideoDialog({ children, ...props }: VideoDialogProps): React.JSX.Element;
+interface VideoDialogThumbnailProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    srcSet?: string;
+    sizes?: string;
+    blobColor?: string;
+    blobSize?: number;
+    imageClassName?: string;
+    loading?: React.ComponentProps<'img'>['loading'];
+}
+declare function VideoDialogThumbnail({ ref, src, alt, width, height, srcSet, sizes, className, blobColor, blobSize, imageClassName, loading, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: VideoDialogThumbnailProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+type VideoDialogContentMode = 'iframe' | 'video';
+interface VideoDialogVideoSource {
+    src: string;
+    type?: string;
+}
+interface VideoDialogTrack {
+    src: string;
+    kind?: React.ComponentProps<'track'>['kind'];
+    srcLang?: string;
+    label?: string;
+    default?: boolean;
+}
+interface VideoDialogContentProps {
+    src: string;
+    title?: string;
+    className?: string;
+    mode?: VideoDialogContentMode;
+    sources?: VideoDialogVideoSource[];
+    tracks?: VideoDialogTrack[];
+    poster?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    preload?: React.ComponentProps<'video'>['preload'];
+}
+declare function VideoDialogContent({ src, title, className, mode, sources, tracks, poster, autoPlay, controls, loop, muted, playsInline, preload, }: VideoDialogContentProps): React.JSX.Element;
+
+interface WaveCanvasProps extends React.ComponentProps<'canvas'> {
+    /** Fill color of the wave */
+    color?: string;
+    /** Height of the canvas in px (default 200) */
+    height?: number;
+    /** Enable mouse interaction (respects prefers-reduced-motion) */
+    interactive?: boolean;
+    /** Number of wave points (default 20) */
+    numPoints?: number;
+    /** Physics elasticity (default 0.0001) */
+    elasticity?: number;
+    /** Physics friction (default 0.0025) */
+    friction?: number;
+}
+declare function WaveCanvas({ ref, color, height, interactive, numPoints, elasticity, friction, className, style, ...props }: WaveCanvasProps & {
+    ref?: React.Ref<HTMLCanvasElement>;
+}): React.JSX.Element | null;
+
+interface WeaponsGalleryCarouselItem extends GalleryItem {
+    title: string;
+    description?: string;
+}
+interface WeaponsGalleryCarouselProps extends Omit<React.ComponentPropsWithoutRef<typeof Carousel>, "children"> {
+    items: WeaponsGalleryCarouselItem[];
+}
+declare function WeaponsGalleryCarousel({ items, className, ...props }: WeaponsGalleryCarouselProps): React.JSX.Element;
+
+export { BANNER_DIVIDER_THREE_TAPES, Badge, BannerDivider, type BannerDividerProps, type BannerDividerRotation, type BannerDividerTape, type BannerDividerVariant, BlobPlayButton, Button, type ButtonProps$1 as ButtonProps, Card, CardAction, CardContent, CardContext, CardDescription, CardFooter, CardHeader, CardImage, type CardImageProps, type CardProps, CardStackCarouselContent, CardStackCarouselItem, type CardStackCarouselItemProps, CardStackCarouselNext, CardStackCarouselPrevious, CardStackCarouselScene, CardTitle, Carousel, CarouselBleedBoundary, CarouselContent, CarouselImagePagination, type CarouselImagePaginationItem, type CarouselImagePaginationProps, CarouselItem, type CarouselItemProps, CarouselPagination, type CarouselPaginationProps, type CarouselProps, CarouselViewport, Checkbox, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogTriggerButton, FadeCarouselItem, type FadeCarouselItemProps, FeedCarousel, type FeedCarouselItem, type FeedCarouselProps, Footer, type FooterProps, GalleryBounce, GalleryControls, type GalleryControlsProps, type GalleryItem, IconButton, type IconButtonAnimation, type IconButtonDirection, type IconButtonProps, type IconButtonSize, type IconButtonVariant, IconPaginatedCarousel, type IconPaginatedCarouselItem, type IconPaginatedCarouselProps, InView, type InViewDelay, type InViewDirection, type InViewProps, InViewStagger, type InViewStaggerProps, InkSplashCanvas, type InkSplashCanvasProps, InkTrailCanvas, type InkTrailCanvasProps, InteractiveSplatter, type InteractiveSplatterProps, Label, LinkRenderProps, Loader, type LoaderAnimation, type LoaderProps, MarqueeCarousel, type MarqueeCarouselItem, type MarqueeCarouselProps, MarqueeGalleryItem, NavArrowDown, NavLink, NavMenuButton, NavSplat, Navigation, NavigationDialog, PageTransition, type PageTransitionHandle, type PageTransitionProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, PopoverTriggerButton, Progress, type ProgressProps, RadioGroup, RadioGroupItem, RuggedTheme, type SectionNavItem, SectionSideNav, type SectionSideNavProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPopup, SheetPortal, SheetTitle, SheetTrigger, SheetTriggerButton, Splat, Splat1, Splat10, type Splat10Props, Splat11, type Splat11Props, Splat12, type Splat12Props, type Splat1Props, Splat2, type Splat2Props, Splat3, type Splat3Props, Splat4, type Splat4Props, Splat5, type Splat5Props, Splat6, type Splat6Props, Splat7, type Splat7Props, Splat8, type Splat8Props, Splat9, type Splat9Props, type SplatProps, SplatoonTitle, type SplatoonTitleProps, type SplatoonTitleSize, type SplatoonTitleVariant, SquidMaskTransition, type SquidMaskTransitionHandle, type SquidMaskTransitionProps, StapleCardProps, SwipeableGallery, Tabs, TabsContent, TabsList, TabsTrigger, VideoDialog, VideoDialogContent, VideoDialogThumbnail, type VideoDialogTrack, type VideoDialogVideoSource, WaveCanvas, type WaveCanvasProps, WeaponsGalleryCarousel, type WeaponsGalleryCarouselItem, type WeaponsGalleryCarouselProps, assignRef, badgeVariants, buttonVariants, createTriggerButton, mergeRefs, tabsListVariants, useCarousel, useCarouselItemState };