@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/types/components/index.d.ts

@@ -0,0 +1,139 @@
+export * from './accordion';
+export * from './address';
+export * from './alert-badge';
+export * from './alert-dialog';
+export * from './alert-modal';
+export * from './apy';
+export * from './arc-loader';
+export * from './asset-line';
+export * from './assets-list-cell';
+export * from './assets-ratio';
+export * from './auth';
+export * from './avatar';
+export * from './badge';
+export * from './base-link';
+export * from './block-sync';
+export * from './breadcrumbs';
+export * from './button-checkbox';
+export * from './buttons';
+export * from './card-grid';
+export * from './cards';
+export * from './carousel';
+export * from './checkbox';
+export * from './checkbox-item';
+export * from './client-adapters';
+export * from './colored-text';
+export * from './complex-input';
+export type { ExternalAPYData, ExtraRewardApy, PoolBaseAPY, } from './compound-apy';
+export * from './compound-apy';
+export * from './confirm-menu';
+export * from './credit-session-status';
+export * from './currency-button';
+export * from './description';
+export * from './detailed-apy';
+export * from './detailed-page-title';
+export * from './dialog';
+export * from './dropdown-label';
+export * from './dropdown-menu';
+export * from './edit-input';
+export * from './error-message';
+export * from './error-view';
+export * from './explorer-links-dropdown';
+export * from './fadeout-loading';
+export * from './filter';
+export * from './form';
+export * from './formatted-number';
+export * from './graph';
+export * from './grid-td-cell';
+export * from './guard';
+export * from './head-cell';
+export * from './health-factor';
+export * from './help-center-container';
+export * from './help-sections';
+export * from './help-tip';
+export * from './hide-on';
+export * from './horizontal-indicator';
+export * from './icon-button';
+export * from './icons';
+export * from './image';
+export * from './input';
+export * from './label';
+export * from './layout';
+export * from './legal-agreement';
+export * from './link';
+export * from './liquidation';
+export * from './liquidation-price';
+export * from './loader';
+export * from './loader-guard';
+export * from './loading';
+export * from './loading-bar';
+export * from './markdown-viewer';
+export * from './modal';
+export * from './navbar';
+export * from './navbar-logo';
+export * from './navigation-context';
+export * from './navitem';
+export * from './not-found';
+export * from './options-list';
+export * from './overflow';
+export * from './overflow-container';
+export * from './page-title';
+export * from './percent-indicator';
+export * from './points-icon';
+export * from './pool-apy-tooltip';
+export * from './pool-indicator-icon';
+export * from './pool-points-indicator';
+export * from './progress';
+export * from './progress-bar';
+export * from './progress-circle';
+export * from './radio-group';
+export * from './rounded-image';
+export * from './row';
+export * from './search-bar';
+export * from './search-line';
+export * from './segmented-control';
+export * from './select';
+export * from './separate-line';
+export * from './separator';
+export * from './short-string';
+export * from './signatures';
+export * from './simple-accordion';
+export * from './simple-dropdown';
+export * from './skeleton';
+export * from './slider';
+export * from './slider-token';
+export * from './smart-number-input';
+export * from './spinner';
+export * from './spinner-loader';
+export * from './split-list';
+export * from './stat-badge';
+export * from './status-dot';
+export * from './status-elements';
+export * from './status-triangle';
+export * from './stepper';
+export * from './styled-dropdown';
+export * from './switch';
+export * from './tab-control';
+export * from './table';
+export * from './tabs';
+export * from './text-button';
+export * from './textarea';
+export * from './theme-provider';
+export * from './theme-toggle';
+export * from './time-to-liquidation';
+export * from './tip-card';
+export * from './toggle';
+export * from './token-icon';
+export * from './token-symbol';
+export * from './token-template';
+export * from './tokens-list-cell';
+export * from './tooltip';
+export * from './trading-view';
+export * from './typed-intl';
+export * from './typography';
+export * from './vertical-indicator';
+export * from './vertical-list';
+export * from './vspace';
+export * from './with-copy';
+export * from './with-filter-button';
+export * from './with-title';

package/dist/types/components/input/index.d.ts

@@ -0,0 +1 @@
+export * from './input';

package/dist/types/components/input/input.d.ts

@@ -0,0 +1,49 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const inputVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    colorTheme?: "filledDark" | "filledLight" | "outlined" | null | undefined;
+    variant?: "default" | "success" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * InputProps — props for Input component.
+ */
+export interface InputProps extends Omit<React.ComponentProps<"input">, "size">, VariantProps<typeof inputVariants> {
+    startingIcon?: React.ReactNode;
+    onStartingIconClick?: () => void;
+    endingIcon?: React.ReactNode;
+    onEndingIconClick?: () => void;
+    hasError?: boolean;
+    errorMessage?: string;
+}
+/**
+ * Input — text input component with size variants and error handling.
+ *
+ * @usage
+ * Use Input for text input fields in forms:
+ * text inputs, number inputs, email inputs, password inputs, search inputs.
+ *
+ * Props:
+ * - `size` — input size: "sm", "default", "lg" (defaults to "default").
+ * - `variant` — visual variant: "default", "error", "success" (defaults to "default").
+ * - `hasError` — if true, displays error styling (red border).
+ * - `errorMessage` — error message displayed below input when hasError is true and value is not empty.
+ * - All standard HTML input props are supported (type, placeholder, value, onChange, etc.).
+ *
+ * Note: For number inputs, prevents wheel scroll from changing value.
+ * Error message is only shown when hasError is true and value is not empty.
+ * Prefer using this component instead of native HTML input element.
+ *
+ * Do NOT use Input:
+ * - for multi-line text input (use Textarea component).
+ * - for file uploads (use appropriate file input components).
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter text" />
+ * <Input size="lg" variant="error" hasError errorMessage="Invalid input" />
+ * <Input size="sm" type="email" />
+ * ```
+ */
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { inputVariants };

package/dist/types/components/input/use-icon-slot-widths.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * Returns callback refs and measured widths for two icon slot elements.
+ * Use the widths (with fallback) to set input padding so it matches the icon button width.
+ */
+export declare function useIconSlotWidths(): {
+    startSlotWidth: number | null;
+    endSlotWidth: number | null;
+    setStartRef: (el: HTMLButtonElement | null) => void;
+    setEndRef: (el: HTMLButtonElement | null) => void;
+    inputPaddingStyle: (hasStart: boolean, hasEnd: boolean) => React.CSSProperties;
+};

package/dist/types/components/label/index.d.ts

@@ -0,0 +1 @@
+export * from './label';

package/dist/types/components/label/label.d.ts

@@ -0,0 +1,43 @@
+import { VariantProps } from 'class-variance-authority';
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
+declare const labelVariants: (props?: ({
+    disabledStyle?: "none" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "muted" | "success" | "error" | null | undefined;
+    required?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Label — component for form field labels with size and variant options.
+ *
+ * @usage
+ * Use Label to label form inputs and controls:
+ * input labels, checkbox labels, select labels, form field labels.
+ *
+ * Props:
+ * - `size` — label size: "sm", "default", "lg" (defaults to "default").
+ * - `variant` — visual variant: "default", "muted", "error", "success" (defaults to "default").
+ * - `required` — if true, displays asterisk (*) after label text.
+ * - All standard Radix UI Label props are supported (htmlFor, etc.).
+ *
+ * Note: Uses white text color and large text size by default. Automatically handles disabled state styling.
+ * Prefer using this component instead of @radix-ui/react-label directly.
+ *
+ * Do NOT use Label:
+ * - for non-form text labels (use appropriate text components).
+ * - when you need different styling that doesn't match form label semantics.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email</Label>
+ * <Label size="sm" variant="muted">Optional field</Label>
+ * <Label required>Required field</Label>
+ * ```
+ */
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
+    disabledStyle?: "none" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "muted" | "success" | "error" | null | undefined;
+    required?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label, labelVariants };

package/dist/types/components/layout/app-logo/app-logo.d.ts

@@ -0,0 +1,26 @@
+/**
+ * AppLogo — application logo component with Gearbox Protocol logo and app name.
+ *
+ * @usage
+ * Use AppLogo to display application branding:
+ * header logo, footer logo, page branding.
+ *
+ * Props:
+ * - `appName` — application name displayed next to logo (required).
+ * - `size` — logo size: "default" or "small" (defaults to "default").
+ *
+ * Note: Uses Gearbox Protocol logo from static CDN. Logo size and text size adjust based on size prop.
+ * Works with any React framework (not tied to Next.js).
+ *
+ * Do NOT use AppLogo:
+ * - for custom logos or branding (use Image component with custom logo).
+ * - when you need different logo styling (use Image component with appropriate styling).
+ */
+export declare function AppLogo({ appName, size, }: {
+    appName?: string;
+    size?: "default" | "small";
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AppLogoLink({ appName, className, }: {
+    appName?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/app-logo/index.d.ts

@@ -0,0 +1 @@
+export * from './app-logo';

package/dist/types/components/layout/block/block.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+export type BlockMargins = "none" | "sm" | "md" | "lg";
+export type JustifyContent = "flex-start" | "center" | "flex-end" | "between";
+export type AlignItems = "flex-start" | "center" | "flex-end" | "stretch";
+export interface BlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Bottom margin */
+    margin?: BlockMargins;
+    /** Horizontal alignment (justify-content) */
+    justify?: JustifyContent;
+    /** Vertical alignment (align-items) */
+    align?: AlignItems;
+}
+/**
+ * Block — a flexbox container with configurable margin, justify, and align
+ *
+ * @example
+ * ```tsx
+ * <Block margin="md" justify="center" align="center">
+ *   <div>Content</div>
+ * </Block>
+ * ```
+ */
+export declare function Block({ children, margin, justify, align, className, ...props }: BlockProps): React.ReactElement;

package/dist/types/components/layout/block/index.d.ts

@@ -0,0 +1 @@
+export * from './block';

package/dist/types/components/layout/col/col.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+/**
+ * ColProps — props for Col component.
+ */
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    start?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | "auto";
+    order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "first" | "last" | "none";
+}
+/**
+ * Col — grid column component for responsive column layouts.
+ *
+ * @usage
+ * Use Col within Grid component to define responsive column spans:
+ * responsive columns, grid items, flexible column widths.
+ *
+ * Props:
+ * - `span` — number of columns to span (1-12, "full", or "auto", defaults to 1).
+ * - `sm` — column span for small screens (≥640px).
+ * - `md` — column span for medium screens (≥768px).
+ * - `lg` — column span for large screens (≥1024px).
+ * - `xl` — column span for extra large screens (≥1280px).
+ * - `start` — starting column position (1-13 or "auto").
+ * - `order` — flex order for column reordering (1-12, "first", "last", "none").
+ *
+ * Note: Works with Tailwind grid system (grid-cols-12).
+ * Use within a Grid container with appropriate column configuration.
+ * "full" spans all columns, "auto" uses automatic sizing based on content.
+ *
+ * Important: When using `span="auto"`, you must use `cols="auto"` in the Grid component
+ * for it to work properly. With fixed column counts (e.g., `cols={12}`), `span="auto"`
+ * will not work as expected.
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={12}>
+ *   <Col span={6}>Half width</Col>
+ *   <Col span={6}>Half width</Col>
+ *   <Col span={12} md={6}>Full on mobile, half on desktop</Col>
+ * </Grid>
+ *
+ * // For auto-sizing columns:
+ * <Grid cols="auto">
+ *   <Col span="auto">Content-based width</Col>
+ *   <Col span="auto">Content-based width</Col>
+ * </Grid>
+ * ```
+ */
+export declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/layout/col/index.d.ts

@@ -0,0 +1 @@
+export * from './col';

package/dist/types/components/layout/container/container.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+/**
+ * ContainerProps — props for Container component.
+ */
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    padding?: boolean;
+    center?: boolean;
+}
+/**
+ * Container — responsive content width container component.
+ *
+ * @usage
+ * Use Container to constrain content width for better readability:
+ * page containers, section wrappers, centered content, responsive layouts.
+ *
+ * Props:
+ * - `maxWidth` — maximum width constraint: "sm", "md", "lg", "xl", "2xl", "full" (defaults to "xl").
+ * - `padding` — whether to apply horizontal padding (defaults to true).
+ * - `center` — whether to center container horizontally (defaults to true).
+ *
+ * Note: Follows best practices for content readability and layout.
+ * Applies responsive padding (px-4 sm:px-6 lg:px-8) when padding is true.
+ * Automatically centers content when center is true using mx-auto.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <h1>Page Content</h1>
+ * </Container>
+ *
+ * <Container maxWidth="lg" padding={false}>
+ *   <CustomContent />
+ * </Container>
+ * ```
+ */
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/layout/container/index.d.ts

@@ -0,0 +1 @@
+export * from './container';

package/dist/types/components/layout/footer/footer.d.ts

@@ -0,0 +1,53 @@
+import { BlockSyncProps } from '../../../types/footer';
+import { LegalReferences } from '../legal-disclaimer';
+import * as React from "react";
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+    copyright?: React.ReactNode;
+    social?: React.ReactNode;
+    version?: string;
+    secondaryInfo?: React.ReactNode;
+    legalLinks?: React.ReactNode;
+    containerClassName?: string;
+    mobileExtraContent?: React.ReactNode;
+}
+/**
+ * Footer component
+ * Two-column layout with logo/copyright on left, social/info on right
+ * Responsive design with mobile adaptations
+ */
+export declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * FooterLink — link component for footer navigation.
+ */
+interface FooterLinkProps {
+    href: string;
+    text: string;
+    external?: boolean;
+}
+export declare function FooterLink({ href, text, external }: FooterLinkProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * FooterLinkSection — section component for grouping footer links.
+ */
+export declare function FooterLinkSection({ title, links, }: {
+    title: string;
+    links: FooterLinkProps[];
+}): import("react/jsx-runtime").JSX.Element;
+export interface GearboxFooterProps {
+    appName?: string;
+    legalAppName?: string;
+    legalReferences?: LegalReferences;
+    legalContent?: React.ReactNode;
+    className?: string;
+    version?: string;
+    discordAddr?: string;
+    landingAddr?: string;
+    twitterAddr?: string;
+    telegramAddr?: string;
+    blockSyncProps?: BlockSyncProps;
+    onPress?: () => void;
+    showLegalLinks?: boolean;
+    showDeveloperLinks?: boolean;
+}
+export declare function GearboxFooter({ appName, legalAppName, legalReferences, legalContent, className, version, discordAddr, landingAddr, twitterAddr, telegramAddr, blockSyncProps, onPress, showLegalLinks, showDeveloperLinks, }: GearboxFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/layout/footer/index.d.ts

@@ -0,0 +1 @@
+export * from './footer';

package/dist/types/components/layout/grid/grid.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+/**
+ * GridProps — props for Grid component.
+ */
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
+    sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20 | 24;
+    gapX?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20 | 24;
+    gapY?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20 | 24;
+}
+/**
+ * Grid — responsive grid layout component using CSS Grid.
+ *
+ * @usage
+ * Use Grid to create responsive grid-based layouts:
+ * page layouts, card grids, responsive columns, flexible grid structures.
+ *
+ * Props:
+ * - `cols` — number of columns (1-12), custom CSS grid template string, or "auto" for auto-sized columns (defaults to 12).
+ * - `sm` — number of columns for small screens (≥640px).
+ * - `md` — number of columns for medium screens (≥768px).
+ * - `lg` — number of columns for large screens (≥1024px).
+ * - `xl` — number of columns for extra large screens (≥1280px).
+ * - `gap` — gap between grid items in Tailwind spacing units (defaults to 4).
+ * - `gapX` — horizontal gap override (overrides gap).
+ * - `gapY` — vertical gap override.
+ *
+ * Note: Works with Col component for flexible column-based layouts.
+ * Supports both numeric columns (uses Tailwind grid classes) and custom CSS grid templates.
+ * When cols is a string, uses inline style for grid-template-columns.
+ * Use `cols="auto"` when using Col with `span="auto"` to enable content-based column sizing.
+ *
+ * @example
+ * ```tsx
+ * // Numeric columns (uses Tailwind classes)
+ * <Grid cols={12}>...</Grid>
+ *
+ * // Custom CSS grid columns
+ * <Grid cols="130px 120px 1.5fr repeat(3, 1fr)">...</Grid>
+ *
+ * // Responsive columns
+ * <Grid cols={1} sm={2} md={3} lg={4}>...</Grid>
+ * ```
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/layout/grid/index.d.ts

@@ -0,0 +1 @@
+export * from './grid';

package/dist/types/components/layout/header/header.d.ts

@@ -0,0 +1,123 @@
+import * as React from "react";
+interface MobileMenuContextValue {
+    closeMobileMenu: () => void;
+}
+/**
+ * Hook to access mobile menu control functions
+ * Use this hook inside mobileMenuContent to close the menu on navigation
+ *
+ * @example
+ * ```tsx
+ * function MobileNav() {
+ *   const { closeMobileMenu } = useMobileMenu();
+ *
+ *   return (
+ *     <nav>
+ *       <a href="/" onClick={closeMobileMenu}>Home</a>
+ *     </nav>
+ *   );
+ * }
+ * ```
+ */
+export declare function useMobileMenu(): MobileMenuContextValue;
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Navigation content (shown on desktop, hidden on mobile unless specified)
+     */
+    navigation?: React.ReactNode;
+    /**
+     * Logo or brand content
+     */
+    logo?: React.ReactNode;
+    /**
+     * Action buttons or elements (e.g., Sign In, Sign Up)
+     */
+    actions?: React.ReactNode;
+    /**
+     * Whether the header should be fixed to the top of the viewport
+     */
+    fixed?: boolean;
+    /**
+     * Whether the header should stick to the top when scrolling
+     */
+    sticky?: boolean;
+    /**
+     * Additional className for the inner container
+     */
+    containerClassName?: string;
+    /**
+     * Custom content for mobile menu (optional)
+     * If not provided, the desktop navigation will be used
+     */
+    mobileMenuContent?: React.ReactNode;
+    /**
+     * Controlled open state of the mobile menu.
+     * When provided together with onMobileMenuOpenChange, the menu is controlled from outside.
+     */
+    mobileMenuOpen?: boolean;
+    /**
+     * Called when the mobile menu open state should change.
+     * Use with mobileMenuOpen for controlled mode (e.g. to close from a parent or sync with route).
+     */
+    onMobileMenuOpenChange?: (open: boolean) => void;
+}
+/**
+ * Header component with support for navigation, logo, and actions
+ * Follows responsive design practices with automatic mobile menu support
+ *
+ * @usage
+ * Use Header as the main application header:
+ * top navigation bar, app logo, navigation menu, wallet connection button.
+ *
+ * Note: Header is sticky at the top with z-50. Navigation is hidden on mobile (md:flex).
+ * Uses NavigationButton components for navigation items.
+ *
+ * Do NOT use Header:
+ * - for page-specific headers.
+ * - for section headers within content (use CardHeader or h2/h3 elements).
+ *
+ * @example
+ * ```tsx
+ * <Header
+ *   logo={<div>MyApp</div>}
+ *   navigation={
+ *     <nav className="flex gap-4">
+ *       <NavItem href="/" active>Home</NavItem>
+ *       <NavItem href="/about">About</NavItem>
+ *     </nav>
+ *   }
+ *   actions={
+ *     <>
+ *       <Button variant="ghost">Sign In</Button>
+ *       <Button>Sign Up</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example With custom mobile menu
+ * ```tsx
+ * <Header
+ *   logo={<div>MyApp</div>}
+ *   navigation={<DesktopNav />}
+ *   mobileMenuContent={
+ *     <nav className="flex flex-col gap-2">
+ *       <a href="/" className="px-4 py-3">Home</a>
+ *       <a href="/about" className="px-4 py-3">About</a>
+ *     </nav>
+ *   }
+ * />
+ * ```
+ *
+ * @example Controlled mobile menu (open/close from outside)
+ * ```tsx
+ * const [mobileOpen, setMobileOpen] = useState(false);
+ * <Header
+ *   mobileMenuContent={<MobileNav />}
+ *   mobileMenuOpen={mobileOpen}
+ *   onMobileMenuOpenChange={setMobileOpen}
+ * />
+ * ```
+ */
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/types/components/layout/header/index.d.ts

@@ -0,0 +1 @@
+export * from './header';

package/dist/types/components/layout/index.d.ts

@@ -0,0 +1,11 @@
+export * from './app-logo';
+export * from './block';
+export * from './col';
+export * from './container';
+export * from './footer';
+export * from './grid';
+export * from './header';
+export * from './layout';
+export * from './legal-disclaimer';
+export * from './page-layout';
+export * from './social-icons';

package/dist/types/components/layout/layout/index.d.ts

@@ -0,0 +1 @@
+export * from './layout';