bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
274 lines (273 loc) • 8 kB
JavaScript
/**
* 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 const CONTAINER_WIDTHS = {
// Page-level containers
PAGE_NARROW: "768px", // Narrow content pages (auth flows, articles)
PAGE_DEFAULT: "1024px", // Standard content pages
PAGE_WIDE: "1280px", // Wide content pages
PAGE_FULL: "1440px", // Full-width layouts
// Component-level containers
CARD_SMALL: "320px", // Small cards (profile cards in grids)
CARD_MEDIUM: "400px", // Medium cards (standalone cards)
CARD_LARGE: "560px", // Large cards (detailed views)
// Modal/Dialog widths
MODAL_SMALL: "400px", // Confirmation dialogs
MODAL_MEDIUM: "560px", // Forms and standard modals
MODAL_LARGE: "720px", // Complex forms or detail views
MODAL_XLARGE: "960px", // Full feature modals
// Popover widths
POPOVER_SMALL: "240px", // Tooltips and small menus
POPOVER_MEDIUM: "320px", // Standard popovers
POPOVER_LARGE: "400px", // Detailed popovers (like ProfilePopover)
// Form widths
FORM_NARROW: "360px", // Login/signup forms
FORM_DEFAULT: "480px", // Standard forms
FORM_WIDE: "640px", // Complex forms
// Content widths
CONTENT_DEFAULT: "800px", // Default content width
MODAL_DEFAULT: "560px", // Default modal width (alias for MODAL_MEDIUM)
};
/**
* Sidebar and panel widths
*/
export const LAYOUT_WIDTHS = {
// Sidebars
SIDEBAR_COLLAPSED: "64px", // Icon-only sidebar
SIDEBAR_NARROW: "200px", // Narrow sidebar
SIDEBAR_DEFAULT: "260px", // Standard sidebar
SIDEBAR_WIDE: "320px", // Wide sidebar with details
// Panels
PANEL_NARROW: "320px", // Side panels
PANEL_DEFAULT: "400px", // Standard panels
PANEL_WIDE: "480px", // Wide panels
};
/**
* Grid layouts and breakpoints
*/
export const GRID_LAYOUTS = {
// Grid gaps
GAP_SMALL: "16px", // Tight grids
GAP_MEDIUM: "24px", // Standard grids
GAP_LARGE: "32px", // Spacious grids
// Column counts at different breakpoints
COLUMNS: {
MOBILE: 1, // < 640px
TABLET: 2, // 640px - 1024px
DESKTOP: 3, // 1024px - 1280px
WIDE: 4, // > 1280px
},
// Minimum column widths for auto-fit grids
MIN_COLUMN_WIDTH: {
SMALL: "240px", // Small cards/items
MEDIUM: "300px", // Medium cards
LARGE: "360px", // Large cards
},
// Responsive card layouts
RESPONSIVE_CARDS: {
GAP: "24px",
MIN_WIDTH: "320px",
},
};
/**
* Height constraints
*/
export const HEIGHTS = {
// Header/Navigation
HEADER_MOBILE: "56px",
HEADER_DESKTOP: "64px",
// Fixed height components
BUTTON_SMALL: "32px",
BUTTON_MEDIUM: "40px",
BUTTON_LARGE: "48px",
// Max heights for scrollable areas
DROPDOWN_MAX: "320px",
LIST_MAX: "400px",
MODAL_CONTENT_MAX: "80vh",
// Min heights
CARD_MIN: "120px",
SECTION_MIN: "200px",
};
/**
* Spacing scale based on 8px grid
*/
export const SPACING = {
XS: "4px", // 0.5 unit
SM: "8px", // 1 unit
MD: "16px", // 2 units
LG: "24px", // 3 units
XL: "32px", // 4 units
XXL: "48px", // 6 units
XXXL: "64px", // 8 units
};
/**
* Z-index scale for layering
*/
export const Z_INDEX = {
BEHIND: -1,
BASE: 0,
DROPDOWN: 100,
STICKY: 200,
FIXED: 300,
MODAL_BACKDROP: 400,
MODAL: 500,
POPOVER: 600,
TOOLTIP: 700,
NOTIFICATION: 800,
CRITICAL: 999,
};
/**
* Animation durations
*/
export const ANIMATION = {
INSTANT: "0ms",
FAST: "150ms",
NORMAL: "250ms",
SLOW: "350ms",
VERY_SLOW: "500ms",
};
/**
* Border radius scale (matching Radix UI theme)
*/
export const RADIUS = {
NONE: "0",
SMALL: "var(--radius-1)", // ~3px
MEDIUM: "var(--radius-2)", // ~6px
LARGE: "var(--radius-3)", // ~9px
XLARGE: "var(--radius-4)", // ~12px
FULL: "var(--radius-full)", // 9999px
};
/**
* Media query breakpoints
*/
export const BREAKPOINTS = {
MOBILE: "640px",
TABLET: "768px",
DESKTOP: "1024px",
WIDE: "1280px",
ULTRAWIDE: "1536px",
};
/**
* Numerical sizes for component props that require numbers (e.g., width, height, size)
*/
export const NUMERIC_SIZES = {
ICON_SMALL: 16,
ICON_MEDIUM: 24,
ICON_LARGE: 32,
AVATAR_SMALL: 32,
AVATAR_MEDIUM: 48,
AVATAR_LARGE: 64,
QR_CODE_DEFAULT: 128,
QR_CODE_LARGE: 256,
};
/**
* Utility functions for responsive values
*/
export const responsive = {
/**
* Get container width based on viewport
*/
container: (viewport = "desktop") => {
const widths = {
mobile: CONTAINER_WIDTHS.PAGE_NARROW,
tablet: CONTAINER_WIDTHS.PAGE_DEFAULT,
desktop: CONTAINER_WIDTHS.PAGE_WIDE,
wide: CONTAINER_WIDTHS.PAGE_FULL,
};
return widths[viewport];
},
/**
* Get grid columns based on viewport
*/
gridColumnsCount: (viewport = "desktop") => {
const columns = {
mobile: GRID_LAYOUTS.COLUMNS.MOBILE,
tablet: GRID_LAYOUTS.COLUMNS.TABLET,
desktop: GRID_LAYOUTS.COLUMNS.DESKTOP,
wide: GRID_LAYOUTS.COLUMNS.WIDE,
};
return columns[viewport];
},
/**
* Responsive maxWidth values using our container constants
*/
maxWidth: {
cardSmall: { initial: "100%", sm: CONTAINER_WIDTHS.CARD_SMALL },
cardMedium: { initial: "100%", sm: CONTAINER_WIDTHS.CARD_MEDIUM },
cardLarge: { initial: "100%", sm: CONTAINER_WIDTHS.CARD_LARGE },
modalSmall: { initial: "100%", sm: CONTAINER_WIDTHS.MODAL_SMALL },
modalMedium: { initial: "100%", sm: CONTAINER_WIDTHS.MODAL_MEDIUM },
modalLarge: { initial: "100%", sm: CONTAINER_WIDTHS.MODAL_LARGE },
popoverSmall: { initial: "100%", sm: CONTAINER_WIDTHS.POPOVER_SMALL },
popoverMedium: { initial: "100%", sm: CONTAINER_WIDTHS.POPOVER_MEDIUM },
popoverLarge: { initial: "100%", sm: CONTAINER_WIDTHS.POPOVER_LARGE },
formNarrow: { initial: "100%", sm: CONTAINER_WIDTHS.FORM_NARROW },
formDefault: { initial: "100%", sm: CONTAINER_WIDTHS.FORM_DEFAULT },
formWide: { initial: "100%", sm: CONTAINER_WIDTHS.FORM_WIDE },
},
/**
* 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 const containerQuery = (minWidth) => `@container (min-width: ${minWidth})`;
/**
* CSS helper for media queries
*/
export const mediaQuery = (minWidth) => `@media (min-width: ${minWidth})`;