bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
325 lines • 8.12 kB
TypeScript
/**
* Layout Constants for Bitcoin Auth UI
*
* Centralized sizing and spacing constants to ensure consistent layouts
* across all components. These values are designed to work well together
* and create a cohesive visual hierarchy.
*/
/**
* Container widths for different layout contexts
*/
export declare const CONTAINER_WIDTHS: {
readonly PAGE_NARROW: "768px";
readonly PAGE_DEFAULT: "1024px";
readonly PAGE_WIDE: "1280px";
readonly PAGE_FULL: "1440px";
readonly CARD_SMALL: "320px";
readonly CARD_MEDIUM: "400px";
readonly CARD_LARGE: "560px";
readonly MODAL_SMALL: "400px";
readonly MODAL_MEDIUM: "560px";
readonly MODAL_LARGE: "720px";
readonly MODAL_XLARGE: "960px";
readonly POPOVER_SMALL: "240px";
readonly POPOVER_MEDIUM: "320px";
readonly POPOVER_LARGE: "400px";
readonly FORM_NARROW: "360px";
readonly FORM_DEFAULT: "480px";
readonly FORM_WIDE: "640px";
readonly CONTENT_DEFAULT: "800px";
readonly MODAL_DEFAULT: "560px";
};
/**
* Sidebar and panel widths
*/
export declare const LAYOUT_WIDTHS: {
readonly SIDEBAR_COLLAPSED: "64px";
readonly SIDEBAR_NARROW: "200px";
readonly SIDEBAR_DEFAULT: "260px";
readonly SIDEBAR_WIDE: "320px";
readonly PANEL_NARROW: "320px";
readonly PANEL_DEFAULT: "400px";
readonly PANEL_WIDE: "480px";
};
/**
* Grid layouts and breakpoints
*/
export declare const GRID_LAYOUTS: {
readonly GAP_SMALL: "16px";
readonly GAP_MEDIUM: "24px";
readonly GAP_LARGE: "32px";
readonly COLUMNS: {
readonly MOBILE: 1;
readonly TABLET: 2;
readonly DESKTOP: 3;
readonly WIDE: 4;
};
readonly MIN_COLUMN_WIDTH: {
readonly SMALL: "240px";
readonly MEDIUM: "300px";
readonly LARGE: "360px";
};
readonly RESPONSIVE_CARDS: {
readonly GAP: "24px";
readonly MIN_WIDTH: "320px";
};
};
/**
* Height constraints
*/
export declare const HEIGHTS: {
readonly HEADER_MOBILE: "56px";
readonly HEADER_DESKTOP: "64px";
readonly BUTTON_SMALL: "32px";
readonly BUTTON_MEDIUM: "40px";
readonly BUTTON_LARGE: "48px";
readonly DROPDOWN_MAX: "320px";
readonly LIST_MAX: "400px";
readonly MODAL_CONTENT_MAX: "80vh";
readonly CARD_MIN: "120px";
readonly SECTION_MIN: "200px";
};
/**
* Spacing scale based on 8px grid
*/
export declare const SPACING: {
readonly XS: "4px";
readonly SM: "8px";
readonly MD: "16px";
readonly LG: "24px";
readonly XL: "32px";
readonly XXL: "48px";
readonly XXXL: "64px";
};
/**
* Z-index scale for layering
*/
export declare const Z_INDEX: {
readonly BEHIND: -1;
readonly BASE: 0;
readonly DROPDOWN: 100;
readonly STICKY: 200;
readonly FIXED: 300;
readonly MODAL_BACKDROP: 400;
readonly MODAL: 500;
readonly POPOVER: 600;
readonly TOOLTIP: 700;
readonly NOTIFICATION: 800;
readonly CRITICAL: 999;
};
/**
* Animation durations
*/
export declare const ANIMATION: {
readonly INSTANT: "0ms";
readonly FAST: "150ms";
readonly NORMAL: "250ms";
readonly SLOW: "350ms";
readonly VERY_SLOW: "500ms";
};
/**
* Border radius scale (matching Radix UI theme)
*/
export declare const RADIUS: {
readonly NONE: "0";
readonly SMALL: "var(--radius-1)";
readonly MEDIUM: "var(--radius-2)";
readonly LARGE: "var(--radius-3)";
readonly XLARGE: "var(--radius-4)";
readonly FULL: "var(--radius-full)";
};
/**
* Media query breakpoints
*/
export declare const BREAKPOINTS: {
readonly MOBILE: "640px";
readonly TABLET: "768px";
readonly DESKTOP: "1024px";
readonly WIDE: "1280px";
readonly ULTRAWIDE: "1536px";
};
/**
* Numerical sizes for component props that require numbers (e.g., width, height, size)
*/
export declare const NUMERIC_SIZES: {
readonly ICON_SMALL: 16;
readonly ICON_MEDIUM: 24;
readonly ICON_LARGE: 32;
readonly AVATAR_SMALL: 32;
readonly AVATAR_MEDIUM: 48;
readonly AVATAR_LARGE: 64;
readonly QR_CODE_DEFAULT: 128;
readonly QR_CODE_LARGE: 256;
};
/**
* Utility functions for responsive values
*/
export declare const responsive: {
/**
* Get container width based on viewport
*/
container: (viewport?: "mobile" | "tablet" | "desktop" | "wide") => "768px" | "1024px" | "1280px" | "1440px";
/**
* Get grid columns based on viewport
*/
gridColumnsCount: (viewport?: "mobile" | "tablet" | "desktop" | "wide") => 1 | 2 | 4 | 3;
/**
* Responsive maxWidth values using our container constants
*/
maxWidth: {
cardSmall: {
initial: string;
sm: "320px";
};
cardMedium: {
initial: string;
sm: "400px";
};
cardLarge: {
initial: string;
sm: "560px";
};
modalSmall: {
initial: string;
sm: "400px";
};
modalMedium: {
initial: string;
sm: "560px";
};
modalLarge: {
initial: string;
sm: "720px";
};
popoverSmall: {
initial: string;
sm: "240px";
};
popoverMedium: {
initial: string;
sm: "320px";
};
popoverLarge: {
initial: string;
sm: "400px";
};
formNarrow: {
initial: string;
sm: "360px";
};
formDefault: {
initial: string;
sm: "480px";
};
formWide: {
initial: string;
sm: "640px";
};
};
/**
* Responsive grid columns using our grid constants
*/
gridColumns: {
responsive: {
initial: "1";
sm: "2";
md: "3";
lg: "4";
};
twoColumn: {
initial: "1";
sm: "2";
};
threeColumn: {
initial: "1";
sm: "2";
md: "3";
};
fourColumn: {
initial: "1";
sm: "2";
md: "3";
lg: "4";
};
};
/**
* Responsive padding/margin using Radix space scale
*/
spacing: {
cardPadding: {
initial: "3";
sm: "4";
};
modalPadding: {
initial: "4";
sm: "6";
};
sectionPadding: {
initial: "4";
sm: "6";
md: "8";
};
formPadding: {
initial: "3";
sm: "4";
md: "5";
};
};
/**
* Responsive sizes using Radix size scale
*/
size: {
small: {
initial: "1";
sm: "2";
};
medium: {
initial: "2";
sm: "3";
};
large: {
initial: "3";
sm: "4";
};
xlarge: {
initial: "4";
sm: "5";
};
};
/**
* Responsive gap values
*/
gap: {
tight: {
initial: "1";
sm: "2";
};
normal: {
initial: "2";
sm: "3";
};
loose: {
initial: "3";
sm: "4";
};
spacious: {
initial: "4";
sm: "6";
};
};
};
/**
* CSS helper for container queries
*/
export declare const containerQuery: (minWidth: string) => string;
/**
* CSS helper for media queries
*/
export declare const mediaQuery: (minWidth: string) => string;
export type ContainerWidth = (typeof CONTAINER_WIDTHS)[keyof typeof CONTAINER_WIDTHS];
export type LayoutWidth = (typeof LAYOUT_WIDTHS)[keyof typeof LAYOUT_WIDTHS];
export type Spacing = (typeof SPACING)[keyof typeof SPACING];
export type ZIndex = (typeof Z_INDEX)[keyof typeof Z_INDEX];
export type AnimationDuration = (typeof ANIMATION)[keyof typeof ANIMATION];
export type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
//# sourceMappingURL=layout-constants.d.ts.map