splatoon-ui 0.1.0

package/dist/server.d.ts

@@ -0,0 +1,813 @@
+import * as React from 'react';
+
+type SlotPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface CardSlotProps extends React.ComponentProps<"div"> {
+    /** Preset position. Omit for fully custom positioning via style. */
+    position?: SlotPosition;
+}
+declare function CardSlot({ position, className, style, ...props }: CardSlotProps): React.JSX.Element;
+
+type TornCardVariant = 'a' | 'b' | 'c';
+
+interface TornCardProps extends React.ComponentProps<'div'> {
+    variant?: TornCardVariant;
+    rotation?: string;
+    background?: string;
+    /** Show decorative tape at the top edge (default: true) */
+    showTape?: boolean;
+    /** Show decorative sticker (default: false) */
+    showSticker?: boolean;
+    /** Tape position at card edge */
+    tapePosition?: 'top-right' | 'bottom-center';
+}
+declare function TornCard({ ref, className, variant, rotation, background, showTape, showSticker, tapePosition, children, ...props }: TornCardProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function TornCardTitle({ className, textColor, style, ...props }: React.ComponentProps<'h2'> & {
+    textColor?: string;
+}): React.JSX.Element;
+declare function TornCardDescription({ className, textColor, style, ...props }: React.ComponentProps<'p'> & {
+    textColor?: string;
+}): React.JSX.Element;
+
+type AlertVariant = 'default' | 'destructive';
+interface AlertProps extends Omit<React.ComponentProps<typeof TornCard>, 'variant'> {
+    variant?: AlertVariant;
+}
+declare function Alert({ variant, showTape, background, className, children, ...props }: AlertProps): React.JSX.Element;
+declare function AlertTitle({ className, textColor, style, ...props }: React.ComponentProps<'h2'> & {
+    textColor?: string;
+}): React.JSX.Element;
+declare function AlertDescription({ className, textColor, style, ...props }: React.ComponentProps<'p'> & {
+    textColor?: string;
+}): React.JSX.Element;
+
+interface ImageAsset {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+}
+interface AssetImageProps extends Omit<React.ComponentProps<'img'>, 'alt' | 'height' | 'src' | 'width'> {
+    asset: ImageAsset;
+    alt?: string;
+    decorative?: boolean;
+    fit?: React.CSSProperties['objectFit'];
+    aspectRatio?: React.CSSProperties['aspectRatio'];
+    fill?: boolean;
+}
+declare function AssetImage({ asset, alt, className, decorative, draggable, fit, aspectRatio, fill, style, ...props }: AssetImageProps): React.JSX.Element;
+
+interface BlackTapeContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: React.ReactNode;
+    tapeVariant?: "yellow";
+    noVerticalPadding?: boolean;
+}
+declare function BlackTapeContainer({ className, children, tapeVariant, noVerticalPadding, ...props }: BlackTapeContainerProps): React.JSX.Element;
+
+type AnchorButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ButtonHTMLAttributes<HTMLButtonElement>;
+interface ButtonArrowProps extends Omit<AnchorButtonProps, "type"> {
+    icon?: React.ReactNode;
+    href?: string;
+}
+declare function ButtonArrow({ icon, href, className, children, ...props }: ButtonArrowProps): React.JSX.Element;
+
+interface ButtonDripProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    hoverText?: React.ReactNode;
+    accentColors?: boolean;
+}
+declare function ButtonDrip({ icon, hoverText, accentColors, className, children, type, ...props }: ButtonDripProps): React.JSX.Element;
+
+interface CharacterImageAsset {
+    id: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+}
+declare const characterImageAssets: {
+    inkling: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    octoling: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    salmonid: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    gamePack: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char2: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char3: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char4: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char5: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char7: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char11: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char12: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char13: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char14: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char15: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char17: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    char18: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+};
+declare const pageTransitionCharacterAssets: {
+    readonly home: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    readonly about: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    readonly weapons: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+};
+
+interface EventImageAsset {
+    id: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+}
+declare const eventImageAssets: {
+    bigRunCallout: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    goldenEgg: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    splatnetBlade: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    splatnetNextPage: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+};
+
+interface EventCalloutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    eyebrow?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    media?: EventImageAsset;
+    background?: EventImageAsset;
+    icon?: EventImageAsset;
+    action?: React.ReactNode;
+    mediaPriority?: boolean;
+}
+declare function EventCallout({ className, eyebrow, title, description, media, background, icon, action, mediaPriority, ...props }: EventCalloutProps): React.JSX.Element;
+
+interface DemoContentProps extends React.ComponentProps<'div'> {
+    width?: 'default' | 'narrow';
+}
+declare function DemoContent({ width, className, style, ...props }: DemoContentProps): React.JSX.Element;
+declare function DemoExampleGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+declare function GitHubMark(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+
+type HeadingTapeColor = 'yellow' | 'blue' | 'green' | 'purple' | 'orange' | 'red';
+type HeadingTapeDecorationPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type HeadingTapeDecorationSet = 'stickers' | 'none';
+type HeadingTapeSafeAreaEdge = 'inlineStart' | 'inlineEnd' | 'blockStart' | 'blockEnd';
+type HeadingTapeSize = 'default' | 'compact';
+type HeadingTapeDecorationSafeArea = Partial<Record<HeadingTapeSafeAreaEdge, string>>;
+interface HeadingTapeDecorationImage {
+    src: string;
+    srcSet?: string;
+    width: number;
+    height: number;
+    alt?: string;
+}
+interface HeadingTapeDecoration {
+    id: React.Key;
+    position: HeadingTapeDecorationPosition;
+    mobile: HeadingTapeDecorationImage;
+    desktop?: HeadingTapeDecorationImage;
+    rotate?: string;
+    inlineOffset?: string;
+    blockOffset?: string;
+    inlineSize?: string;
+    maxInlineSize?: string;
+    safeArea?: HeadingTapeDecorationSafeArea;
+    className?: string;
+    imageClassName?: string;
+    style?: React.CSSProperties;
+}
+interface HeadingTapeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    /** @deprecated Tape is always white — section backgrounds provide contrast */
+    color?: HeadingTapeColor;
+    decorationSet?: HeadingTapeDecorationSet;
+    decorations?: HeadingTapeDecoration[] | false;
+    overlapTop?: boolean;
+    marginOffset?: number;
+    size?: HeadingTapeSize;
+}
+declare function HeadingTape({ children, className, color, decorationSet, decorations, overlapTop, marginOffset, size, style, ...props }: HeadingTapeProps): React.JSX.Element;
+
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+
+interface TapeAssetSource {
+    src: string;
+    pngSrcSet?: string;
+    webpSrcSet?: string;
+    width: number;
+    height: number;
+}
+interface TapeAsset extends TapeAssetSource {
+    desktop?: TapeAssetSource;
+}
+declare const tapeImageAssetDefinitions: {
+    'sticker-1': TapeAsset;
+    'sticker-2-red': TapeAsset;
+    'sticker-3': TapeAsset;
+    'sticker-4': TapeAsset;
+    'sticker-5': TapeAsset;
+    'sticker-6': TapeAsset;
+    'sticker-7': TapeAsset;
+    'sticker-8': TapeAsset;
+    'sticker-9': TapeAsset;
+    'sticker-10': TapeAsset;
+    'sticker-11': TapeAsset;
+    'sticker-12': TapeAsset;
+    'tape-1': {
+        src: string;
+        width: number;
+        height: number;
+    };
+    'tape-2': TapeAsset;
+    'tape-3': TapeAsset;
+    'tape-4': TapeAssetSource;
+    'tape-5': TapeAsset;
+    'tape-6': TapeAsset;
+    'tape-7': TapeAssetSource;
+};
+type TapeImageVariant = keyof typeof tapeImageAssetDefinitions;
+declare const tapeImageAssets: Record<TapeImageVariant, TapeAsset>;
+declare function isTapeImageVariant(value: string): value is TapeImageVariant;
+
+type TapeVariant = TapeImageVariant;
+interface TapeProps extends React.ComponentProps<'div'> {
+    variant?: TapeVariant;
+    position?: 'top-left' | 'top-right' | 'center' | 'bottom-left' | 'bottom-right' | 'news' | 'event';
+}
+declare function Tape({ className, variant, position, children, ...props }: TapeProps): React.JSX.Element;
+interface StapleProps extends React.ComponentProps<'div'> {
+    position?: 'left' | 'right' | 'top' | 'bottom';
+}
+declare function Staple({ className, position, ...props }: StapleProps): React.JSX.Element;
+
+interface MarqueeProps extends React.ComponentProps<'div'> {
+    speed?: number;
+    direction?: 'left' | 'right';
+    pauseOnHover?: boolean;
+    variant?: 'default' | 'tape' | 'warning';
+    showEdgeTape?: boolean;
+    tapeVariant?: TapeVariant;
+}
+declare function Marquee({ className, speed, direction, pauseOnHover, variant, showEdgeTape, tapeVariant, children, ...props }: MarqueeProps): React.JSX.Element;
+declare function MarqueeItem({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+
+interface MediaDecorationProps extends Omit<CardSlotProps, 'children'> {
+    asset: TapeImageVariant;
+    responsive?: boolean;
+    media?: string;
+    imageClassName?: string;
+    mobilePictureClassName?: string;
+    desktopPictureClassName?: string;
+}
+declare function MediaDecoration({ asset, responsive, media, imageClassName, mobilePictureClassName, desktopPictureClassName, className, ...props }: MediaDecorationProps): React.JSX.Element;
+
+interface NavChevronProps {
+    isHighlighted?: boolean;
+    className?: string;
+}
+declare function NavChevron({ isHighlighted, className }: NavChevronProps): React.JSX.Element;
+
+interface NavLink {
+    label: string;
+    href: string;
+    selectedKey?: string;
+    textClassName?: string;
+}
+type LinkRenderProps = {
+    isHighlighted: boolean;
+    isActive: boolean;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    onClick: () => void;
+};
+
+interface NewsImageAsset {
+    src: string;
+    width: number;
+    height: number;
+}
+declare const newsStapleAssets: {
+    left: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    right: {
+        src: string;
+        width: number;
+        height: number;
+    };
+};
+
+declare const PAPER_TEAR_EDGE_ASSETS: {
+    readonly top: {
+        readonly src: "/_images/svg/paper-tear-up.svg";
+        readonly width: 448;
+        readonly height: 60;
+    };
+    readonly bottom: {
+        readonly src: "/_images/svg/paper-tear-down.svg";
+        readonly width: 448;
+        readonly height: 24;
+    };
+};
+interface PaperTearEdgeProps extends React.ComponentProps<'div'> {
+    edge?: keyof typeof PAPER_TEAR_EDGE_ASSETS;
+    color?: string;
+}
+declare function PaperTearEdge({ edge, color, className, style, ...props }: PaperTearEdgeProps): React.JSX.Element;
+
+type PaperSurfaceTone = 'white' | 'black' | 'red';
+interface PaperSurfaceProps extends React.ComponentProps<'div'> {
+    tone?: PaperSurfaceTone;
+    topEdgeClassName?: string;
+    bottomEdgeClassName?: string;
+    contentClassName?: string;
+    showTopEdge?: boolean;
+    showBottomEdge?: boolean;
+}
+declare function PaperSurface({ tone, className, topEdgeClassName, bottomEdgeClassName, contentClassName, showTopEdge, showBottomEdge, children, ...props }: PaperSurfaceProps): React.JSX.Element;
+
+type PhotoFrameVariant = 'a' | 'b' | 'c' | 'd' | 'e';
+interface PhotoFrameProps extends React.ComponentProps<'div'> {
+    /** Image source */
+    src?: string;
+    /** Image alt text */
+    alt?: string;
+    /** Border style variant */
+    border?: 'default' | 'thin' | 'medium';
+    /** Component variant preset */
+    variant?: PhotoFrameVariant;
+    /** Show decorative tape (default: from variant config) */
+    showTape?: boolean;
+    /** Show decorative sticker (default: from variant config) */
+    showSticker?: boolean;
+    /** Tape position at photo edge */
+    tapePosition?: 'center' | 'left' | 'right';
+    /** CSS custom property for rotation */
+    rotation?: string;
+    /** CSS custom property for margin offset */
+    marginOffset?: number;
+    /** Nested mode (smaller, scaled tape) */
+    nested?: boolean;
+    /** Fill width (block display) */
+    fillWidth?: boolean;
+}
+declare function PhotoFrame({ ref, src, alt, border, variant, showTape, showSticker, tapePosition, rotation, marginOffset, nested, fillWidth, className, children, style, ...props }: PhotoFrameProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PhotoTapeProps extends React.ComponentProps<'div'> {
+    /** Tape position */
+    position?: 'center' | 'left' | 'right' | 'bottomCenter' | 'bottomLeft' | 'bottomRight';
+    /** Tape type */
+    type?: string;
+}
+declare function PhotoTape({ position, type, className, ...props }: PhotoTapeProps): React.JSX.Element | null;
+interface PhotoDecorationProps extends React.ComponentProps<'div'> {
+    /** Decoration position */
+    position?: 'bottomLeft' | 'topRight' | 'bottomRight' | 'center';
+    /** Decoration type */
+    type?: string;
+}
+declare function PhotoDecoration({ position, type, className, ...props }: PhotoDecorationProps): React.JSX.Element | null;
+
+type RuggedTheme = "yellow" | "blue" | "purple" | "orange" | "green";
+interface RuggedCardProps extends React.ComponentProps<"div"> {
+    ruggedTheme?: RuggedTheme;
+    ruggedRotation?: string;
+    ruggedBackground?: React.ReactNode;
+}
+declare function RuggedCard({ ref, className, ruggedTheme, ruggedRotation, ruggedBackground, children, ...props }: RuggedCardProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+
+type Pattern = 'base-bg-pattern' | 'camo-black' | 'camo-green' | 'camo-purple' | 'camo-purple-revised' | 'camo-orange' | 'camo-red' | 'camo-white' | 'camo-white-outline' | 'hardware-background' | 'octo-black' | 'octo-red' | 'octoarrow-green' | 'octoarrow-orange' | 'squid-black' | 'circles-green' | 'chip-white' | 'monsters-black' | 'graffiti' | 'tapes-black' | 'tapes-green' | 'tapes-pattern' | 'tapes-purple';
+interface SectionBackgroundProps extends React.HTMLAttributes<HTMLElement> {
+    /** Solid background color (e.g. "bg-white", "bg-black") */
+    bgColor?: string;
+    /** Dark mode background color */
+    darkBgColor?: string;
+    /** Optional pattern texture overlay */
+    pattern?: Pattern;
+    as?: 'div' | 'section';
+}
+declare function SectionBackground({ bgColor, darkBgColor, pattern, as: Tag, className, children, ...props }: SectionBackgroundProps): React.JSX.Element;
+
+interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Base size — controls vertical padding. `md` = 64px, `lg` = 80px */
+    size?: 'md' | 'lg';
+    /** Pass a HeadingTape element to auto-increase padding for sticker overflow */
+    headingTape?: React.ReactNode;
+    /** Optional pattern texture overlay */
+    pattern?: Pattern;
+    /** Tailwind background class (e.g. "bg-white") */
+    bgColor?: string;
+    /** Tailwind text color class (e.g. "text-chaos-black") */
+    text?: string;
+    /** Render as "section" or "div" */
+    as?: 'section' | 'div';
+    /** Reserve content-safe space for decorative overlays painted across the section edge. */
+    bottomOverlayClearance?: 'none' | 'banner-divider';
+    style?: React.CSSProperties;
+}
+declare function Section({ size, headingTape, pattern, bgColor, text, as, bottomOverlayClearance, className, children, style, ...props }: SectionProps): React.JSX.Element;
+
+interface ShowcaseImageAsset {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+}
+declare const showcaseMediaAssets: {
+    trailerThumbnail: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    fullscreenPreview: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    ruggedLookbook: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    ruggedMode: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    ruggedScene: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    homeHeader: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    homeCharacter: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    turfWarLeft: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    turfWarRight: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    splatfestSecondary: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+};
+
+interface SquidImageAsset {
+    id: string;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+}
+interface SquidSpriteAsset extends SquidImageAsset {
+    frameWidth: number;
+    frameHeight: number;
+    frames: number;
+    durationMs: number;
+    sourceUrl: string;
+}
+declare const squidImageAssets: {
+    loader: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    mask: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+};
+declare const squidSpriteAssets: {
+    loaderMorph: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+        frameWidth: number;
+        frameHeight: number;
+        frames: number;
+        durationMs: number;
+        sourceUrl: string;
+    };
+    loaderSwim: {
+        id: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+        frameWidth: number;
+        frameHeight: number;
+        frames: number;
+        durationMs: number;
+        sourceUrl: string;
+    };
+};
+
+type StapleCardVariant = 'a' | 'b' | 'c' | 'd';
+interface StapleCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Variant preset (controls tape visibility and position) */
+    variant?: StapleCardVariant;
+    /** 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 (e.g. a Button) at the bottom of info */
+    action?: React.ReactNode;
+    /** Visual surface: "white" (default) or "dark" (dark bg, white text) */
+    surface?: 'white' | 'dark';
+    /** Whether to show the decorative tape element (default: from variant config) */
+    showTape?: boolean;
+    /** Enable hover tilt animation (default: false) */
+    hoverTilt?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare function StapleCard({ variant, image, title, subtitle, action, surface, showTape, hoverTilt, className, children, ...props }: StapleCardProps): React.JSX.Element;
+declare function StapleCardTitle({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+declare function StapleCardDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+
+type Sticker2RedProps = Omit<React.ComponentProps<'img'>, 'height' | 'src' | 'srcSet' | 'width'>;
+declare function Sticker2Red({ className, ...props }: Sticker2RedProps): React.JSX.Element;
+declare namespace Sticker2Red {
+    var displayName: string;
+}
+
+type Sticker10Props = Omit<React.ComponentProps<'img'>, 'height' | 'src' | 'srcSet' | 'width'>;
+declare function Sticker10({ className, ...props }: Sticker10Props): React.JSX.Element;
+declare namespace Sticker10 {
+    var displayName: string;
+}
+
+type Sticker5Props = Omit<React.ComponentProps<'img'>, 'height' | 'src' | 'srcSet' | 'width'>;
+declare function Sticker5({ className, ...props }: Sticker5Props): React.JSX.Element;
+declare namespace Sticker5 {
+    var displayName: string;
+}
+
+declare function TagHanger(): React.JSX.Element;
+
+interface TapeDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Single tape strip or double (tape-2 + tape-3 stacked) */
+    variant?: "primary" | "double";
+    /** Rotation direction */
+    rotate?: "none" | "left" | "right" | "strong";
+    /** Apply negative margin so next section overlaps the tape */
+    overlap?: boolean;
+}
+declare function TapeDivider({ variant, rotate, overlap, className, ...props }: TapeDividerProps): React.JSX.Element;
+
+type ImageProps = Omit<React.ComponentProps<'img'>, 'height' | 'src' | 'srcSet' | 'width'>;
+interface TapePictureProps extends ImageProps {
+    asset: TapeAsset | TapeImageVariant;
+    pictureClassName?: string;
+    media?: string;
+    fill?: boolean;
+}
+interface TapeResponsivePicturesProps extends ImageProps {
+    asset: TapeImageVariant;
+    mobilePictureClassName?: string;
+    desktopPictureClassName?: string;
+    imageClassName?: string;
+}
+declare function TapePicture({ asset, alt, className, draggable, media, pictureClassName, fill, ...props }: TapePictureProps): React.JSX.Element;
+declare function TapeResponsivePictures({ asset, alt, className, draggable, mobilePictureClassName, desktopPictureClassName, imageClassName, ...props }: TapeResponsivePicturesProps): React.JSX.Element;
+
+interface TapeTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+    color?: 'black' | 'red' | 'yellow';
+    children: React.ReactNode;
+}
+declare function TapeTitle({ color, className, children, ...props }: TapeTitleProps): React.JSX.Element;
+
+type WaveButtonVariant = 'yellow' | 'white' | 'ghost';
+type WaveButtonSize = 'md' | 'lg';
+type WaveButtonAnimation = 'morph' | 'none';
+interface WaveButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Visual variant — controls background color */
+    variant?: WaveButtonVariant;
+    /** Button size */
+    size?: WaveButtonSize;
+    /** Custom icon node. Defaults to the hamburger→X line animation. Pass null for no icon. */
+    icon?: React.ReactNode;
+    /** Blob border-radius animation */
+    animation?: WaveButtonAnimation;
+}
+declare const WaveButton: React.ForwardRefExoticComponent<WaveButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface WeaponGalleryAsset {
+    id: string;
+    image: string;
+    alt: string;
+    title: string;
+    description?: string;
+}
+interface WeaponShopGalleryAsset extends WeaponGalleryAsset {
+    icon: string;
+    iconRotate?: number;
+}
+interface WeaponMarqueeAsset {
+    id: string;
+    image: string;
+    alt: string;
+}
+declare const weaponShowcaseItems: {
+    id: string;
+    title: string;
+    description: string;
+    image: string;
+    alt: string;
+}[];
+declare const weaponShopGalleryItems: {
+    id: string;
+    image: string;
+    icon: string;
+    iconRotate: number;
+    alt: string;
+    title: string;
+    description: string;
+}[];
+declare const weaponMarqueeItems: {
+    id: string;
+    image: string;
+    alt: string;
+}[];
+
+declare function WideTornPaper({ bgColor }: {
+    bgColor?: string;
+}): React.JSX.Element;
+
+export { Alert, AlertDescription, type AlertProps, AlertTitle, AssetImage, type AssetImageProps, BlackTapeContainer, type BlackTapeContainerProps, ButtonArrow, type ButtonArrowProps, ButtonDrip, type ButtonDripProps, type CharacterImageAsset, DemoContent, type DemoContentProps, DemoExampleGroup, EventCallout, type EventCalloutProps, type EventImageAsset, GitHubMark, HeadingTape, type HeadingTapeDecoration, type HeadingTapeDecorationImage, type HeadingTapeProps, type ImageAsset, Input, type LinkRenderProps, Marquee, MarqueeItem, MediaDecoration, type MediaDecorationProps, NavChevron, type NavLink, type NewsImageAsset, PaperSurface, type PaperSurfaceProps, type PaperSurfaceTone, PaperTearEdge, type PaperTearEdgeProps, type Pattern, PhotoDecoration, type PhotoDecorationProps, PhotoFrame, type PhotoFrameProps, PhotoTape, type PhotoTapeProps, RuggedCard, type RuggedCardProps, type RuggedTheme, Section, SectionBackground, type SectionBackgroundProps, type SectionProps, type ShowcaseImageAsset, type SquidImageAsset, type SquidSpriteAsset, Staple, StapleCard, StapleCardDescription, type StapleCardProps, StapleCardTitle, type StapleProps, Sticker10, Sticker2Red, Sticker5, TagHanger, Tape, type TapeAsset, type TapeAssetSource, TapeDivider, type TapeDividerProps, type TapeImageVariant, TapePicture, type TapeProps, TapeResponsivePictures, TapeTitle, type TapeVariant, TornCard, TornCardDescription, type TornCardProps, CardSlot as TornCardSlot, type CardSlotProps as TornCardSlotProps, TornCardTitle, WaveButton, type WaveButtonAnimation, type WaveButtonProps, type WaveButtonSize, type WaveButtonVariant, type WeaponGalleryAsset, type WeaponMarqueeAsset, type WeaponShopGalleryAsset, WideTornPaper, characterImageAssets, eventImageAssets, isTapeImageVariant, newsStapleAssets, pageTransitionCharacterAssets, showcaseMediaAssets, squidImageAssets, squidSpriteAssets, tapeImageAssets, weaponMarqueeItems, weaponShopGalleryItems, weaponShowcaseItems };