@breadcoop/ui/dist/index.d.mts

A component library for implementing Bread Coop branding in JS/TS projects

import * as react_jsx_runtime from 'react/jsx-runtime';
import React from 'react';

type LiftedButtonColors = {
    bg: string;
    text: string;
    hoverBg: string;
    hoverText: string;
    shadowBg: string;
};
type LiftedButtonPreset = keyof typeof LIFTED_BUTTON_PRESETS;
declare const LIFTED_BUTTON_PRESETS: {
    primary: {
        bg: string;
        text: string;
        hoverBg: string;
        hoverText: string;
        shadowBg: string;
    };
    secondary: {
        bg: string;
        text: string;
        hoverBg: string;
        hoverText: string;
        shadowBg: string;
    };
    destructive: {
        bg: string;
        text: string;
        hoverBg: string;
        hoverText: string;
        shadowBg: string;
    };
    positive: {
        bg: string;
        text: string;
        hoverBg: string;
        hoverText: string;
        shadowBg: string;
    };
    stroke: {
        bg: string;
        text: string;
        hoverBg: string;
        hoverText: string;
        shadowBg: string;
    };
};

type LiftedButtonProps = {
    children: React.ReactNode;
    leftIcon?: React.ReactNode;
    rightIcon?: React.ReactNode;
    disabled?: boolean;
    preset?: LiftedButtonPreset;
    colorOverrides?: Partial<LiftedButtonColors>;
    offsetPx?: number;
    durationMs?: number;
    className?: string;
    width?: "full" | "auto" | "mobile-full";
    scrollTo?: string;
} & React.ComponentPropsWithoutRef<"button">;
/**
 * LiftedButton — a square-edged button that floats up-left of a dark base layer.
 * - Preset: Choose "primary" (default), "secondary", "destructive", or "positive"
 * - ColorOverrides: Pass in a dict specifying manual colours
 * - Hover: fades to alternate colors.
 * - Active: depresses button and colors return to normal.
 * - Transition duration defaults to 500ms.
 * - Icons can be rendered on the right or left.
 */
declare function LiftedButton({ children, leftIcon, rightIcon, disabled, preset, colorOverrides, offsetPx, durationMs, className, type, width, scrollTo, ...rest }: LiftedButtonProps): react_jsx_runtime.JSX.Element;

declare const fontVariables: {
    readonly breadDisplay: "--font-breadDisplay";
    readonly breadBody: "--font-breadBody";
};
declare const Typography: React.FC<{
    variant: "h1" | "h2" | "h3" | "h4" | "h5" | "body" | "caption";
    children: React.ReactNode;
    className?: string;
}>;
declare const Heading1: React.FC<{
    children: React.ReactNode;
    className?: string;
}>;
declare const Heading2: React.FC<{
    children: React.ReactNode;
    className?: string;
}>;
declare const Heading3: React.FC<{
    children: React.ReactNode;
    className?: string;
}>;
declare const Heading4: React.FC<{
    children: React.ReactNode;
    className?: string;
}>;
declare const Heading5: React.FC<{
    children: React.ReactNode;
    className?: string;
}>;
declare const Body: React.FC<{
    children: React.ReactNode;
    className?: string;
    bold?: boolean;
}>;
declare const Caption: React.FC<{
    children: React.ReactNode;
    className?: string;
}>;

type LogoColor = "orange" | "blue" | "jade" | "white";
type LogoVariant = "square" | "line";
type LogoProps = {
    /** Size of the logo in pixels. Defaults to 32px */
    size?: number;
    /** Additional CSS classes to apply to the logo */
    className?: string;
    /** Color variant of the logo: "orange" (default), "blue", "jade", or "white" */
    color?: LogoColor;
    /** Variant of the logo: "square" or "line" */
    variant?: LogoVariant;
    /** Optional text to display next to the logo */
    text?: string;
} & React.ComponentPropsWithoutRef<"svg">;
/**
 * Logo component that renders the Bread UI Kit logo SVG.
 *
 * @param size - Size of the logo in pixels (default: 32)
 * @param className - Additional CSS classes
 * @param color - Color variant: "orange" (default), "blue", "jade", or "white"
 * @param variant - Variant of the logo: "square" or "line"
 * @param text - Optional text to display next to the logo
 */
declare function Logo({ size, className, color, variant, text, ...rest }: LogoProps): react_jsx_runtime.JSX.Element | undefined;

export { Body, Caption, Heading1, Heading2, Heading3, Heading4, Heading5, LiftedButton, type LiftedButtonProps, Logo, type LogoColor, type LogoProps, type LogoVariant, Typography, fontVariables };