bigblocks/dist-registry/components/lib-layout-constants.json

Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React

{
  "name": "lib-layout-constants",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "lib/layout-constants.ts",
      "type": "registry:component",
      "target": "<%- config.aliases.lib %>/layout-constants.ts",
      "content": "/**\n * Layout Constants for Bitcoin Auth UI\n *\n * Centralized sizing and spacing constants to ensure consistent layouts\n * across all components. These values are designed to work well together\n * and create a cohesive visual hierarchy.\n */\n\n/**\n * Container widths for different layout contexts\n */\nexport const CONTAINER_WIDTHS = {\n\t// Page-level containers\n\tPAGE_NARROW: \"768px\", // Narrow content pages (auth flows, articles)\n\tPAGE_DEFAULT: \"1024px\", // Standard content pages\n\tPAGE_WIDE: \"1280px\", // Wide content pages\n\tPAGE_FULL: \"1440px\", // Full-width layouts\n\n\t// Component-level containers\n\tCARD_SMALL: \"320px\", // Small cards (profile cards in grids)\n\tCARD_MEDIUM: \"400px\", // Medium cards (standalone cards)\n\tCARD_LARGE: \"560px\", // Large cards (detailed views)\n\n\t// Modal/Dialog widths\n\tMODAL_SMALL: \"400px\", // Confirmation dialogs\n\tMODAL_MEDIUM: \"560px\", // Forms and standard modals\n\tMODAL_LARGE: \"720px\", // Complex forms or detail views\n\tMODAL_XLARGE: \"960px\", // Full feature modals\n\n\t// Popover widths\n\tPOPOVER_SMALL: \"240px\", // Tooltips and small menus\n\tPOPOVER_MEDIUM: \"320px\", // Standard popovers\n\tPOPOVER_LARGE: \"400px\", // Detailed popovers (like ProfilePopover)\n\n\t// Form widths\n\tFORM_NARROW: \"360px\", // Login/signup forms\n\tFORM_DEFAULT: \"480px\", // Standard forms\n\tFORM_WIDE: \"640px\", // Complex forms\n\n\t// Content widths\n\tCONTENT_DEFAULT: \"800px\", // Default content width\n\tMODAL_DEFAULT: \"560px\", // Default modal width (alias for MODAL_MEDIUM)\n} as const;\n\n/**\n * Sidebar and panel widths\n */\nexport const LAYOUT_WIDTHS = {\n\t// Sidebars\n\tSIDEBAR_COLLAPSED: \"64px\", // Icon-only sidebar\n\tSIDEBAR_NARROW: \"200px\", // Narrow sidebar\n\tSIDEBAR_DEFAULT: \"260px\", // Standard sidebar\n\tSIDEBAR_WIDE: \"320px\", // Wide sidebar with details\n\n\t// Panels\n\tPANEL_NARROW: \"320px\", // Side panels\n\tPANEL_DEFAULT: \"400px\", // Standard panels\n\tPANEL_WIDE: \"480px\", // Wide panels\n} as const;\n\n/**\n * Grid layouts and breakpoints\n */\nexport const GRID_LAYOUTS = {\n\t// Grid gaps\n\tGAP_SMALL: \"16px\", // Tight grids\n\tGAP_MEDIUM: \"24px\", // Standard grids\n\tGAP_LARGE: \"32px\", // Spacious grids\n\n\t// Column counts at different breakpoints\n\tCOLUMNS: {\n\t\tMOBILE: 1, // < 640px\n\t\tTABLET: 2, // 640px - 1024px\n\t\tDESKTOP: 3, // 1024px - 1280px\n\t\tWIDE: 4, // > 1280px\n\t},\n\n\t// Minimum column widths for auto-fit grids\n\tMIN_COLUMN_WIDTH: {\n\t\tSMALL: \"240px\", // Small cards/items\n\t\tMEDIUM: \"300px\", // Medium cards\n\t\tLARGE: \"360px\", // Large cards\n\t},\n\n\t// Responsive card layouts\n\tRESPONSIVE_CARDS: {\n\t\tGAP: \"24px\",\n\t\tMIN_WIDTH: \"320px\",\n\t},\n} as const;\n\n/**\n * Height constraints\n */\nexport const HEIGHTS = {\n\t// Header/Navigation\n\tHEADER_MOBILE: \"56px\",\n\tHEADER_DESKTOP: \"64px\",\n\n\t// Fixed height components\n\tBUTTON_SMALL: \"32px\",\n\tBUTTON_MEDIUM: \"40px\",\n\tBUTTON_LARGE: \"48px\",\n\n\t// Max heights for scrollable areas\n\tDROPDOWN_MAX: \"320px\",\n\tLIST_MAX: \"400px\",\n\tMODAL_CONTENT_MAX: \"80vh\",\n\n\t// Min heights\n\tCARD_MIN: \"120px\",\n\tSECTION_MIN: \"200px\",\n} as const;\n\n/**\n * Spacing scale based on 8px grid\n */\nexport const SPACING = {\n\tXS: \"4px\", // 0.5 unit\n\tSM: \"8px\", // 1 unit\n\tMD: \"16px\", // 2 units\n\tLG: \"24px\", // 3 units\n\tXL: \"32px\", // 4 units\n\tXXL: \"48px\", // 6 units\n\tXXXL: \"64px\", // 8 units\n} as const;\n\n/**\n * Z-index scale for layering\n */\nexport const Z_INDEX = {\n\tBEHIND: -1,\n\tBASE: 0,\n\tDROPDOWN: 100,\n\tSTICKY: 200,\n\tFIXED: 300,\n\tMODAL_BACKDROP: 400,\n\tMODAL: 500,\n\tPOPOVER: 600,\n\tTOOLTIP: 700,\n\tNOTIFICATION: 800,\n\tCRITICAL: 999,\n} as const;\n\n/**\n * Animation durations\n */\nexport const ANIMATION = {\n\tINSTANT: \"0ms\",\n\tFAST: \"150ms\",\n\tNORMAL: \"250ms\",\n\tSLOW: \"350ms\",\n\tVERY_SLOW: \"500ms\",\n} as const;\n\n/**\n * Border radius scale (matching Radix UI theme)\n */\nexport const RADIUS = {\n\tNONE: \"0\",\n\tSMALL: \"var(--radius-1)\", // ~3px\n\tMEDIUM: \"var(--radius-2)\", // ~6px\n\tLARGE: \"var(--radius-3)\", // ~9px\n\tXLARGE: \"var(--radius-4)\", // ~12px\n\tFULL: \"var(--radius-full)\", // 9999px\n} as const;\n\n/**\n * Media query breakpoints\n */\nexport const BREAKPOINTS = {\n\tMOBILE: \"640px\",\n\tTABLET: \"768px\",\n\tDESKTOP: \"1024px\",\n\tWIDE: \"1280px\",\n\tULTRAWIDE: \"1536px\",\n} as const;\n\n/**\n * Numerical sizes for component props that require numbers (e.g., width, height, size)\n */\nexport const NUMERIC_SIZES = {\n\tICON_SMALL: 16,\n\tICON_MEDIUM: 24,\n\tICON_LARGE: 32,\n\tAVATAR_SMALL: 32,\n\tAVATAR_MEDIUM: 48,\n\tAVATAR_LARGE: 64,\n\tQR_CODE_DEFAULT: 128,\n\tQR_CODE_LARGE: 256,\n} as const;\n\n/**\n * Utility functions for responsive values\n */\nexport const responsive = {\n\t/**\n\t * Get container width based on viewport\n\t */\n\tcontainer: (\n\t\tviewport: \"mobile\" | \"tablet\" | \"desktop\" | \"wide\" = \"desktop\",\n\t) => {\n\t\tconst widths = {\n\t\t\tmobile: CONTAINER_WIDTHS.PAGE_NARROW,\n\t\t\ttablet: CONTAINER_WIDTHS.PAGE_DEFAULT,\n\t\t\tdesktop: CONTAINER_WIDTHS.PAGE_WIDE,\n\t\t\twide: CONTAINER_WIDTHS.PAGE_FULL,\n\t\t};\n\t\treturn widths[viewport];\n\t},\n\n\t/**\n\t * Get grid columns based on viewport\n\t */\n\tgridColumnsCount: (\n\t\tviewport: \"mobile\" | \"tablet\" | \"desktop\" | \"wide\" = \"desktop\",\n\t) => {\n\t\tconst columns = {\n\t\t\tmobile: GRID_LAYOUTS.COLUMNS.MOBILE,\n\t\t\ttablet: GRID_LAYOUTS.COLUMNS.TABLET,\n\t\t\tdesktop: GRID_LAYOUTS.COLUMNS.DESKTOP,\n\t\t\twide: GRID_LAYOUTS.COLUMNS.WIDE,\n\t\t};\n\t\treturn columns[viewport];\n\t},\n\n\t/**\n\t * Responsive maxWidth values using our container constants\n\t */\n\tmaxWidth: {\n\t\tcardSmall: { initial: \"100%\", sm: CONTAINER_WIDTHS.CARD_SMALL },\n\t\tcardMedium: { initial: \"100%\", sm: CONTAINER_WIDTHS.CARD_MEDIUM },\n\t\tcardLarge: { initial: \"100%\", sm: CONTAINER_WIDTHS.CARD_LARGE },\n\t\tmodalSmall: { initial: \"100%\", sm: CONTAINER_WIDTHS.MODAL_SMALL },\n\t\tmodalMedium: { initial: \"100%\", sm: CONTAINER_WIDTHS.MODAL_MEDIUM },\n\t\tmodalLarge: { initial: \"100%\", sm: CONTAINER_WIDTHS.MODAL_LARGE },\n\t\tpopoverSmall: { initial: \"100%\", sm: CONTAINER_WIDTHS.POPOVER_SMALL },\n\t\tpopoverMedium: { initial: \"100%\", sm: CONTAINER_WIDTHS.POPOVER_MEDIUM },\n\t\tpopoverLarge: { initial: \"100%\", sm: CONTAINER_WIDTHS.POPOVER_LARGE },\n\t\tformNarrow: { initial: \"100%\", sm: CONTAINER_WIDTHS.FORM_NARROW },\n\t\tformDefault: { initial: \"100%\", sm: CONTAINER_WIDTHS.FORM_DEFAULT },\n\t\tformWide: { initial: \"100%\", sm: CONTAINER_WIDTHS.FORM_WIDE },\n\t},\n\n\t/**\n\t * Responsive grid columns using our grid constants\n\t */\n\tgridColumns: {\n\t\tresponsive: {\n\t\t\tinitial: \"1\" as const,\n\t\t\tsm: \"2\" as const,\n\t\t\tmd: \"3\" as const,\n\t\t\tlg: \"4\" as const,\n\t\t},\n\t\ttwoColumn: { initial: \"1\" as const, sm: \"2\" as const },\n\t\tthreeColumn: { initial: \"1\" as const, sm: \"2\" as const, md: \"3\" as const },\n\t\tfourColumn: {\n\t\t\tinitial: \"1\" as const,\n\t\t\tsm: \"2\" as const,\n\t\t\tmd: \"3\" as const,\n\t\t\tlg: \"4\" as const,\n\t\t},\n\t},\n\n\t/**\n\t * Responsive padding/margin using Radix space scale\n\t */\n\tspacing: {\n\t\tcardPadding: { initial: \"3\" as const, sm: \"4\" as const },\n\t\tmodalPadding: { initial: \"4\" as const, sm: \"6\" as const },\n\t\tsectionPadding: {\n\t\t\tinitial: \"4\" as const,\n\t\t\tsm: \"6\" as const,\n\t\t\tmd: \"8\" as const,\n\t\t},\n\t\tformPadding: { initial: \"3\" as const, sm: \"4\" as const, md: \"5\" as const },\n\t},\n\n\t/**\n\t * Responsive sizes using Radix size scale\n\t */\n\tsize: {\n\t\tsmall: { initial: \"1\" as const, sm: \"2\" as const },\n\t\tmedium: { initial: \"2\" as const, sm: \"3\" as const },\n\t\tlarge: { initial: \"3\" as const, sm: \"4\" as const },\n\t\txlarge: { initial: \"4\" as const, sm: \"5\" as const },\n\t},\n\n\t/**\n\t * Responsive gap values\n\t */\n\tgap: {\n\t\ttight: { initial: \"1\" as const, sm: \"2\" as const },\n\t\tnormal: { initial: \"2\" as const, sm: \"3\" as const },\n\t\tloose: { initial: \"3\" as const, sm: \"4\" as const },\n\t\tspacious: { initial: \"4\" as const, sm: \"6\" as const },\n\t},\n};\n\n/**\n * CSS helper for container queries\n */\nexport const containerQuery = (minWidth: string) =>\n\t`@container (min-width: ${minWidth})`;\n\n/**\n * CSS helper for media queries\n */\nexport const mediaQuery = (minWidth: string) =>\n\t`@media (min-width: ${minWidth})`;\n\n// Type exports for TypeScript\nexport type ContainerWidth =\n\t(typeof CONTAINER_WIDTHS)[keyof typeof CONTAINER_WIDTHS];\nexport type LayoutWidth = (typeof LAYOUT_WIDTHS)[keyof typeof LAYOUT_WIDTHS];\nexport type Spacing = (typeof SPACING)[keyof typeof SPACING];\nexport type ZIndex = (typeof Z_INDEX)[keyof typeof Z_INDEX];\nexport type AnimationDuration = (typeof ANIMATION)[keyof typeof ANIMATION];\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"
    }
  ]
}