8e:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0yv65k-y95kni.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0yv65k-y95kni.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD"],"SWRDataProvider"] 90:T4ad95,[V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap"); :root { /* =========================================== FIGMA DESIGN TOKENS - Primitives (oklch) =========================================== */ /* Blue Palette */ --blue-50: oklch(0.99 0.01 264); --blue-100: oklch(0.98 0.01 264); --blue-150: oklch(0.95 0.03 254); --blue-200: oklch(0.91 0.05 254); --blue-250: oklch(0.85 0.07 254); --blue-300: oklch(0.79 0.10 254); --blue-350: oklch(0.71 0.14 254); --blue-400: oklch(0.62 0.17 254); --blue-450: oklch(0.53 0.20 264); --blue-500: oklch(0.45 0.21 264); --blue-550: oklch(0.40 0.16 264); --blue-600: oklch(0.35 0.14 264); --blue-650: oklch(0.30 0.12 264); --blue-700: oklch(0.28 0.11 264); --blue-750: oklch(0.24 0.09 264); --blue-800: oklch(0.20 0.08 264); --blue-850: oklch(0.15 0.06 264); /* Grey Palette */ --grey-50: oklch(1.00 0 0); --grey-100: oklch(0.98 0.00 264); --grey-150: oklch(0.97 0.00 264); --grey-200: oklch(0.96 0.00 264); --grey-250: oklch(0.94 0.01 250); --grey-300: oklch(0.91 0.01 250); --grey-350: oklch(0.88 0.01 250); --grey-400: oklch(0.85 0.01 250); --grey-450: oklch(0.81 0.01 250); --grey-500: oklch(0.77 0.01 250); --grey-550: oklch(0.72 0.01 250); --grey-600: oklch(0.65 0.01 250); --grey-650: oklch(0.61 0.01 250); --grey-700: oklch(0.57 0.01 250); --grey-750: oklch(0.52 0.01 250); --grey-800: oklch(0.48 0.01 250); --grey-850: oklch(0.43 0.01 250); --grey-900: oklch(0.38 0.01 250); --grey-950: oklch(0.32 0.01 250); --grey-1000: oklch(0.27 0.01 250); --grey-1050: oklch(0.23 0.01 250); --grey-1100: oklch(0.18 0.01 250); /* Green Palette */ --green-50: oklch(0.98 0.01 145); --green-100: oklch(0.96 0.02 145); --green-200: oklch(0.89 0.05 150); --green-300: oklch(0.77 0.10 150); --green-400: oklch(0.67 0.13 150); --green-500: oklch(0.54 0.13 150); --green-600: oklch(0.47 0.11 150); --green-700: oklch(0.40 0.09 150); --green-800: oklch(0.33 0.07 150); --green-900: oklch(0.27 0.05 150); /* Red Palette */ --red-50: oklch(0.98 0.01 25); --red-100: oklch(0.95 0.03 25); --red-200: oklch(0.86 0.08 20); --red-300: oklch(0.70 0.15 20); --red-400: oklch(0.60 0.19 22); --red-500: oklch(0.50 0.19 25); --red-600: oklch(0.43 0.16 25); --red-700: oklch(0.36 0.13 25); --red-800: oklch(0.29 0.10 25); --red-900: oklch(0.22 0.07 25); /* Orange Palette */ --orange-50: oklch(0.99 0.01 60); --orange-100: oklch(0.95 0.04 60); --orange-200: oklch(0.87 0.10 60); --orange-300: oklch(0.77 0.15 55); --orange-400: oklch(0.70 0.17 50); --orange-500: oklch(0.65 0.18 50); --orange-600: oklch(0.55 0.15 50); --orange-700: oklch(0.45 0.12 50); --orange-800: oklch(0.36 0.09 50); --orange-900: oklch(0.27 0.06 50); /* Denim Palette */ --denim-100: oklch(0.92 0.05 254); --denim-200: oklch(0.81 0.08 254); --denim-300: oklch(0.70 0.11 254); --denim-400: oklch(0.59 0.14 254); --denim-500: oklch(0.46 0.15 254); --denim-600: oklch(0.38 0.12 254); --denim-700: oklch(0.31 0.09 254); --denim-800: oklch(0.21 0.06 254); --denim-900: oklch(0.16 0.04 254); /* Azure Palette */ --azure-100: oklch(0.94 0.04 230); --azure-200: oklch(0.87 0.08 230); --azure-300: oklch(0.80 0.11 230); --azure-400: oklch(0.74 0.13 230); --azure-500: oklch(0.67 0.15 230); --azure-600: oklch(0.54 0.12 230); --azure-700: oklch(0.43 0.09 230); --azure-800: oklch(0.28 0.06 230); --azure-900: oklch(0.21 0.04 230); /* Green Haze Palette */ --green-haze-100: oklch(0.95 0.05 165); --green-haze-200: oklch(0.90 0.09 165); --green-haze-300: oklch(0.84 0.12 165); --green-haze-400: oklch(0.79 0.14 165); --green-haze-500: oklch(0.73 0.16 165); --green-haze-600: oklch(0.59 0.12 165); --green-haze-700: oklch(0.47 0.09 165); --green-haze-800: oklch(0.31 0.06 165); --green-haze-900: oklch(0.23 0.04 165); /* Orange Haze Palette */ --orange-haze-100: oklch(0.94 0.05 45); --orange-haze-200: oklch(0.87 0.10 45); --orange-haze-300: oklch(0.79 0.14 45); --orange-haze-400: oklch(0.71 0.17 40); --orange-haze-500: oklch(0.63 0.20 35); --orange-haze-600: oklch(0.52 0.15 35); --orange-haze-700: oklch(0.42 0.11 35); --orange-haze-800: oklch(0.29 0.07 35); --orange-haze-900: oklch(0.22 0.05 35); /* Chetwode Palette (Purple/Violet) */ --chetwode-100: oklch(0.93 0.04 290); --chetwode-200: oklch(0.85 0.07 290); --chetwode-300: oklch(0.76 0.10 290); --chetwode-400: oklch(0.67 0.12 290); --chetwode-500: oklch(0.55 0.14 290); --chetwode-600: oklch(0.44 0.11 290); --chetwode-700: oklch(0.35 0.08 290); --chetwode-800: oklch(0.23 0.05 290); --chetwode-900: oklch(0.17 0.04 290); /* =========================================== FIGMA COMPONENT TOKENS (flattened oklch) =========================================== */ /* Text - Button Primary (hex for v0 compatibility) */ --color-text-button-primary-default: #ffffff; --color-text-button-primary-hover: #ffffff; --color-text-button-primary-pressed: #ffffff; --color-text-button-primary-focused: #ffffff; --color-text-button-primary-disabled: #b8bdc2; /* Text - Button Secondary (hex for v0 compatibility) */ --color-text-button-secondary-default: #6d757c; --color-text-button-secondary-hover: #7c848b; --color-text-button-secondary-pressed: #2a3036; --color-text-button-secondary-focused: #4d555c; --color-text-button-secondary-disabled: #909aa1; /* Text - Button Tertiary (hex for v0 compatibility) */ --color-text-button-tertiary-default: #0b49ea; --color-text-button-tertiary-hover: #0b49ea; --color-text-button-tertiary-pressed: #0b49ea; --color-text-button-tertiary-focused: #0b49ea; --color-text-button-tertiary-disabled: #4d555c; /* Text - Button Error (hex for v0 compatibility) */ --color-text-button-error-default: #ffffff; --color-text-button-error-hover: #ffffff; --color-text-button-error-pressed: #ffffff; --color-text-button-error-focused: #ffffff; --color-text-button-error-disabled: #e57a7a; /* Surface - Button Primary */ --color-surface-button-primary-default: oklch(0.45 0.21 264); --color-surface-button-primary-hover: oklch(0.40 0.16 264); --color-surface-button-primary-pressed: oklch(0.24 0.09 264); --color-surface-button-primary-focused: oklch(0.45 0.21 264); --color-surface-button-primary-disabled: oklch(0.57 0.01 250); /* Surface - Button Secondary */ --color-surface-button-secondary-default: oklch(1.00 0 0); --color-surface-button-secondary-hover: oklch(0.91 0.01 250); --color-surface-button-secondary-pressed: oklch(0.88 0.01 250); --color-surface-button-secondary-focused: oklch(1.00 0 0); --color-surface-button-secondary-disabled: oklch(0.88 0.01 250); /* Surface - Button Tertiary */ --color-surface-button-tertiary-default: oklch(0.96 0.00 264); --color-surface-button-tertiary-hover: oklch(0.91 0.01 250); --color-surface-button-tertiary-pressed: oklch(0.92 0.05 254); --color-surface-button-tertiary-focused: oklch(0.96 0.00 264); --color-surface-button-tertiary-disabled: oklch(0.85 0.01 250); /* Surface - Dashboard */ --color-surface-dashboard: var(--grey-150); /* Surface - Button Error */ --color-surface-button-error-default: oklch(0.50 0.19 25); --color-surface-button-error-hover: oklch(0.36 0.13 25); --color-surface-button-error-pressed: oklch(0.29 0.10 25); --color-surface-button-error-focused: oklch(0.50 0.19 25); --color-surface-button-error-disabled: oklch(0.95 0.03 25); /* Stroke - Button Secondary */ --color-stroke-button-secondary-default: oklch(0.52 0.01 250); --color-stroke-button-secondary-hover: oklch(0.57 0.01 250); --color-stroke-button-secondary-pressed: oklch(0.23 0.01 250); --color-stroke-button-secondary-focused: oklch(0.45 0.21 264); --color-stroke-button-secondary-disabled: oklch(0.65 0.01 250); /* Badge - Filled Colors */ --color-badge-filled-default-bg: oklch(0.93 0.04 290); --color-badge-filled-default-text: oklch(0.44 0.11 290); --color-badge-filled-sky-bg: oklch(0.94 0.04 230); --color-badge-filled-sky-text: oklch(0.43 0.09 230); --color-badge-filled-grass-bg: oklch(0.95 0.05 165); --color-badge-filled-grass-text: oklch(0.47 0.09 165); --color-badge-filled-bored-bg: oklch(0.94 0.05 45); --color-badge-filled-bored-text: oklch(0.42 0.11 35); --color-badge-filled-negative-bg: oklch(0.98 0.01 25); --color-badge-filled-negative-text: oklch(0.50 0.19 25); --color-badge-filled-neutral-bg: oklch(0.91 0.01 250); --color-badge-filled-neutral-text: oklch(0.23 0.01 250); --color-badge-filled-neutral-border: oklch(0.81 0.01 250); --color-badge-filled-dark-bg: oklch(0.27 0.01 250); --color-badge-filled-dark-text: oklch(1.00 0 0); /* Badge - Outline Colors */ --color-badge-outline-default-border: oklch(0.85 0.07 290); --color-badge-outline-default-text: oklch(0.55 0.14 290); --color-badge-outline-sky-border: oklch(0.87 0.08 230); --color-badge-outline-sky-text: oklch(0.54 0.12 230); --color-badge-outline-grass-border: oklch(0.90 0.09 165); --color-badge-outline-grass-text: oklch(0.54 0.13 150); --color-badge-outline-bored-border: oklch(0.87 0.10 45); --color-badge-outline-bored-text: oklch(0.52 0.15 35); --color-badge-outline-negative-border: oklch(0.95 0.04 60); --color-badge-outline-negative-text: oklch(0.50 0.19 25); --color-badge-outline-neutral-border: oklch(0.81 0.01 250); --color-badge-outline-neutral-text: oklch(0.23 0.01 250); --color-badge-outline-dark-border: oklch(0.27 0.01 250); --color-badge-outline-dark-text: oklch(0.27 0.01 250); /* =========================================== Alert/Callout Component Tokens =========================================== */ /* Info variant - brand blue */ --color-alert-info-bg: oklch(0.95 0.03 250); --color-alert-info-border: oklch(0.85 0.06 250); --color-alert-info-icon: oklch(0.45 0.21 264); /* Success variant - green */ --color-alert-success-bg: oklch(0.98 0.02 145); --color-alert-success-border: oklch(0.85 0.06 145); --color-alert-success-icon: oklch(0.55 0.15 145); /* Warning variant - orange */ --color-alert-warning-bg: oklch(0.99 0.02 70); --color-alert-warning-border: oklch(0.85 0.12 50); --color-alert-warning-icon: oklch(0.65 0.18 50); /* Critical/Destructive variant - red */ --color-alert-critical-bg: oklch(0.97 0.02 25); --color-alert-critical-border: oklch(0.85 0.06 25); --color-alert-critical-icon: oklch(0.55 0.20 25); /* =========================================== Link Component Tokens (hex for v0 compatibility) =========================================== */ --color-text-link-default: #0b49ea; --color-text-link-hover: #1a3db8; --color-text-link-pressed: #0f2163; --color-text-link-visited: #1a3399; --color-text-link-disabled: #909aa1; --color-icon-brand: oklch(0.45 0.21 264); /* =========================================== FIGMA DESIGN TOKENS - Numeric (Spacing, Radius, Border) =========================================== */ /* Primitive Pixels */ --px-1: 1px; --px-2: 2px; --px-3: 3px; --px-4: 4px; --px-6: 6px; --px-8: 8px; --px-12: 12px; --px-16: 16px; --px-24: 24px; --px-32: 32px; --px-36: 36px; --px-40: 40px; --px-48: 48px; --px-64: 64px; --px-80: 80px; --px-96: 96px; /* Spacing */ --spacing-sp-2: var(--px-2); --spacing-sp-4: var(--px-4); --spacing-sp-6: var(--px-6); --spacing-sp-8: var(--px-8); --spacing-sp-12: var(--px-12); --spacing-sp-16: var(--px-16); --spacing-sp-24: var(--px-24); --spacing-sp-32: var(--px-32); --spacing-sp-36: var(--px-36); --spacing-sp-40: var(--px-40); --spacing-sp-48: var(--px-48); --spacing-sp-64: var(--px-64); --spacing-sp-80: var(--px-80); --spacing-sp-96: var(--px-96); /* Radius */ --radius-xxs: var(--px-2); --radius-xs: var(--px-4); --radius-s: var(--px-8); --radius-m: var(--px-12); --radius-l: var(--px-16); --radius-xl: var(--px-24); --radius-xxl: var(--px-32); /* Border Width */ --border-width-100: var(--px-1); --border-width-200: var(--px-2); --border-width-300: var(--px-3); --border-width-400: var(--px-4); /* =========================================== FIGMA DESIGN TOKENS - Typography =========================================== */ /* Font Family */ --font-family-brand: "Inter", sans-serif; /* Font Sizes */ --font-size-12: 0.75rem; --font-size-14: 0.875rem; --font-size-16: 1rem; --font-size-20: 1.25rem; --font-size-24: 1.5rem; --font-size-28: 1.75rem; --font-size-32: 2rem; /* Line Heights */ --line-height-16: 16px; --line-height-20: 20px; --line-height-22: 22px; --line-height-24: 24px; --line-height-28: 28px; --line-height-32: 32px; --line-height-36: 36px; /* Font Weights */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Body Typography */ --font-body-small-size: var(--font-size-12); --font-body-small-line-height: var(--line-height-16); --font-body-small-regular-weight: var(--font-weight-regular); --font-body-small-semibold-weight: var(--font-weight-semibold); --font-body-small-bold-weight: var(--font-weight-bold); --font-body-medium-size: var(--font-size-14); --font-body-medium-line-height: var(--line-height-20); --font-body-medium-regular-weight: var(--font-weight-regular); --font-body-medium-semibold-weight: var(--font-weight-semibold); --font-body-medium-bold-weight: var(--font-weight-bold); --font-body-large-size: var(--font-size-16); --font-body-large-line-height: var(--line-height-24); --font-body-large-regular-weight: var(--font-weight-regular); --font-body-large-semibold-weight: var(--font-weight-semibold); --font-body-large-bold-weight: var(--font-weight-bold); /* Headline Typography */ --font-headline-h1-size: var(--font-size-32); --font-headline-h1-line-height: var(--line-height-36); --font-headline-h1-weight: var(--font-weight-extrabold); --font-headline-h2-size: var(--font-size-28); --font-headline-h2-line-height: var(--line-height-32); --font-headline-h2-weight: var(--font-weight-extrabold); --font-headline-h3-size: var(--font-size-24); --font-headline-h3-line-height: var(--line-height-28); --font-headline-h3-weight: var(--font-weight-bold); --font-headline-h4-size: var(--font-size-20); --font-headline-h4-line-height: var(--line-height-24); --font-headline-h4-weight: var(--font-weight-bold); --font-headline-h5-size: var(--font-size-16); --font-headline-h5-line-height: var(--line-height-20); --font-headline-h5-weight: var(--font-weight-semibold); /* Utility Typography */ --font-utility-link-size: var(--font-size-14); --font-utility-link-line-height: var(--line-height-20); --font-utility-link-weight: var(--font-weight-semibold); /* =========================================== CHECKBOX / CONTROLS TOKENS =========================================== */ --color-stroke-controls-default: oklch(0.74 0.01 250); /* neutral-450 */ --color-stroke-controls-hover: oklch(0.23 0.01 250); /* neutral-1050 */ --color-stroke-controls-disabled: oklch(0.63 0.01 250); /* neutral-900 */ --color-surface-controls-selected: oklch(0.45 0.21 264); /* brand-500 */ --color-surface-controls-hover: oklch(0.40 0.16 264); /* brand-600 */ --color-surface-controls-disabled: oklch(0.74 0.01 250); /* neutral-450 */ --color-surface-controls-locked: oklch(0.74 0.01 250); /* neutral-450 */ --color-text-controls-disabled: #8a939a; /* neutral-900 - hex for v0 */ --color-surface-focused: oklch(0.85 0.07 254); /* ring color */ /* Tooltip tokens */ --color-surface-tooltip: oklch(0.23 0.01 250); /* neutral-1000 / foreground-dark */ --color-text-tooltip: #ffffff; /* white / text-inverse - hex for v0 */ /* ButtonGroup / ToggleGroup tokens */ --color-surface-button-group-background: oklch(0.93 0.01 250); /* neutral-250 / #e9ecee */ --color-surface-button-group-hover: oklch(0.96 0.00 250); /* neutral-200 / #f2f4f5 */ --color-surface-button-group-active: oklch(1.00 0 0); /* neutral-50 / white */ /* Tabs / Tabset tokens */ --color-stroke-default: oklch(0.79 0.01 250); /* neutral-450 / #bfc4c8 */ --color-stroke-brand: oklch(0.45 0.21 264); /* brand-500 / #0b49ea */ --color-stroke-dark: oklch(0.20 0.01 250); /* neutral-1050 / #1c1f22 */ /* Switch / Toggle tokens */ --color-surface-toggle-ellipse: oklch(1.00 0 0); /* neutral-50 / white - thumb color */ --color-surface-toggle-default: oklch(0.79 0.01 250); /* neutral-450 / #bfc4c8 - unchecked bg */ --color-surface-toggle-active: oklch(0.45 0.21 264); /* brand-500 / #0b49ea - checked bg */ --color-surface-toggle-focused: oklch(0.80 0.08 254); /* brand-250 / #bad1f5 - focus ring */ --color-surface-toggle-disabled: oklch(0.48 0.01 250); /* neutral-750 / #656c70 - disabled bg */ /* Popover tokens */ --color-surface-foreground: oklch(1.00 0 0); /* neutral-50 / white - popover bg */ /* IconButton tokens */ --color-icon-dark: oklch(0.20 0.01 250); /* neutral-1050 / #242e35 - black icon */ --color-icon-disabled: oklch(0.65 0.01 250); /* neutral-900 / #3b464f - disabled icon */ --color-surface-hover: oklch(0.91 0.01 250); /* neutral-200 / #e5e7e9 - hover bg */ --color-surface-selected: oklch(0.92 0.04 254); /* brand-150 / #dde9fa - active/selected bg */ /* Input tokens (hex for v0 compatibility) */ --color-text-primary: #1c1f22; /* neutral-1050 - input value text */ --color-text-secondary: #656c73; /* neutral-750 - label, placeholder */ --color-surface-input-default: oklch(1.00 0 0); /* neutral-50 / #ffffff - input background */ --color-surface-input-disabled: oklch(0.91 0.01 250); /* neutral-300 / #e0e3e6 - disabled background */ --color-surface-input-locked: oklch(0.88 0.01 250); /* neutral-350 / #d6dade - read-only background */ /* State tokens (feedback colors) */ --color-state-error: oklch(0.50 0.19 25); /* red-500 / #cc2330 - error accent */ --color-state-success: oklch(0.52 0.12 145); /* green-500 / #348347 - success accent */ --color-state-warning: oklch(0.65 0.18 50); /* orange-500 / #ee7624 - warning accent */ /* =========================================== Legacy token aliases (compatibility) =========================================== */ --app-shell-header-height: 64px; --app-shell-nav-width-minimised: 104px; --app-shell-nav-width-full: 317px; --app-shell-toolbar-width: 48px; --shell-header-height: 56px; --shell-topnav-height: 40px; --shell-left-rail-width: 104px; --sidebar-width: 16rem; --sidebar-width-icon: 3rem; --widget-grid-row-height: 315px; --widget-grid-gutter: 24px; --columns: 12; --gutter: var(--spacing-sp-24); --margin: var(--spacing-sp-24); --row-height: var(--widget-grid-row-height); --spacing-sp-1: var(--px-1); --radius-full: 9999px; --radius-r-full: 9999px; --opacity-60: 0.6; --opacity-disabled: 0.4; --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-tooltip: 0 6px 18px rgba(0, 0, 0, 0.16); --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.24); --border-neutral-default: var(--color-stroke-default); --border-radius-medium: var(--radius-m); --focus-ring-color: var(--ring); --thumb-size: 16px; --thumb-translate-x-unchecked: 4px; --thumb-translate-x-checked: 20px; --radix-select-trigger-height: 36px; --radix-select-trigger-width: 160px; --radix-toast-swipe-end-x: 0px; --radix-toast-swipe-move-x: 0px; --font-body-small: var(--font-body-small-regular-weight) var(--font-body-small-size)/var(--font-body-small-line-height) var(--font-family-brand); --font-body-medium: var(--font-body-medium-regular-weight) var(--font-body-medium-size)/var(--font-body-medium-line-height) var(--font-family-brand); --font-body-medium-semibold: var(--font-body-medium-semibold-weight) var(--font-body-medium-size)/var(--font-body-medium-line-height) var(--font-family-brand); --font-headline-h4: var(--font-headline-h4-weight) var(--font-headline-h4-size)/var(--font-headline-h4-line-height) var(--font-family-brand); --typography-body-medium-regular: var(--font-body-medium); --brand-150: var(--blue-150); --brand-200: var(--blue-150); --brand-250: var(--blue-250); --brand-300: var(--blue-250); --brand-400: var(--blue-350); --brand-500: var(--blue-500); --brand-550: var(--blue-550); --brand-600: var(--blue-550); --brand-650: var(--blue-650); --brand-750: var(--blue-750); --neutral-50: var(--grey-50); --neutral-150: var(--grey-150); --neutral-200: var(--grey-200); --neutral-250: var(--grey-250); --neutral-300: var(--grey-300); --neutral-350: var(--grey-350); --neutral-400: var(--grey-400); --neutral-450: var(--grey-450); --neutral-600: var(--grey-600); --neutral-650: var(--grey-650); --neutral-700: var(--grey-700); --neutral-750: var(--grey-750); --neutral-800: var(--grey-800); --neutral-900: var(--grey-900); --neutral-1000: var(--grey-1000); --neutral-1050: var(--grey-1050); --utilities-500: var(--blue-500); --utilities-550: var(--blue-550); --utilities-650: var(--blue-650); --utilities-750: var(--blue-750); --status-error-light: var(--red-50); --status-error-stroke: var(--red-200); --status-error-accent: var(--red-500); --status-info-light: var(--blue-50); --status-info-stroke: var(--blue-200); --status-info-accent: var(--blue-500); --status-success-light: var(--green-50); --status-success-stroke: var(--green-200); --status-success-accent: var(--green-500); --status-warning-light: var(--orange-50); --status-warning-stroke: var(--orange-200); --status-warning-accent: var(--orange-500); --error-accent: var(--red-500); --success-accent: var(--green-500); --warning-accent: var(--orange-500); --warning-light: var(--orange-100); --color-state-error-accent: var(--status-error-accent); --color-state-error-light: var(--status-error-light); --color-state-error-medium: var(--red-300); --color-state-success-accent: var(--status-success-accent); --color-state-warning-accent: var(--status-warning-accent); --color-state-info-accent: var(--status-info-accent); --color-text-brand: var(--blue-500); --color-text-link: var(--color-text-link-default); --color-text-selected: var(--brand-550); --color-text-dark-accent: var(--brand-750); --color-text-disabled: var(--neutral-900); --color-text-inverse: var(--neutral-50); --color-text-input-value: var(--neutral-1050); --color-text-controls-default: var(--neutral-1050); --color-text-controls-focused: var(--neutral-1050); --color-text-controls-hover: var(--neutral-1050); --color-text-controls-selected: var(--neutral-1050); --color-text-controls-locked: var(--neutral-900); --color-icon-default: var(--color-icon-dark); --color-icon-selected: var(--color-icon-brand); --color-border-neutral: var(--color-stroke-default); --color-border-neutral-subtle: var(--grey-300); --color-border-focus: var(--ring); --color-border-focus-shadow: var(--ring); --color-border-focused: var(--ring); --color-stroke-disabled: var(--grey-650); --color-stroke-divider: var(--grey-250); --color-stroke-focus: var(--ring); --color-stroke-light: var(--neutral-350); --color-stroke-strong: var(--grey-1050); --color-stroke-table: var(--neutral-250); --color-surface-accent: var(--brand-500); --color-surface-background: var(--neutral-150); --color-surface-disabled: var(--grey-300); --color-surface-foreground-dark: var(--neutral-1000); --color-surface-popover: var(--neutral-50); --color-surface-primary-default: var(--color-surface-button-primary-default); --color-surface-progress-active: var(--brand-500); --color-surface-progress-foreground: var(--brand-250); --color-surface-table-data-cell-border-focus: var(--denim-500); --color-surface-table-data-header: var(--neutral-50); --color-surface-table-row-hover: var(--brand-150); --color-surface-widget: var(--neutral-50); --color-surface-chip-default: var(--neutral-150); --color-surface-chip-default-white: var(--neutral-50); --color-surface-chip-hover: var(--neutral-200); --color-surface-chip-selected: var(--brand-150); --color-surface-controls-locked-icon: var(--neutral-900); --color-surface-button-button-group-background: var(--color-surface-button-group-background); --color-surface-button-button-group-hover: var(--color-surface-button-group-hover); --color-surface-button-button-group-active: var(--color-surface-button-group-active); --color-surface-toggle-Default: var(--color-surface-toggle-default); --color-surface-toggle-Active: var(--color-surface-toggle-active); --color-surface-toggle-Disabled: var(--color-surface-toggle-disabled); --color-surface-toggle-Ellipse: var(--color-surface-toggle-ellipse); --color-navigation-active: var(--brand-500); --color-navigation-hover: var(--neutral-200); --color-navigation-selected: var(--brand-150); --color-azure: var(--azure-500); --color-chetwode: var(--chetwode-500); --color-denim: var(--denim-500); --color-greenHaze: var(--green-haze-500); --color-orange: var(--orange-500); --color-desktop: var(--chart-1); --color-mobile: var(--chart-4); --color-product: var(--chart-1); --color-services: var(--chart-4); --color-support: var(--chart-7); --color-revenue: var(--chart-1); --color-expenses: var(--chart-14); --color-profit: var(--chart-4); --color-sessions: var(--chart-7); --color-users: var(--chart-9); --color-other: var(--chart-12); /* =========================================== SHADCN/UI SEMANTIC TOKENS (direct oklch - REQUIRED) =========================================== */ --background: oklch(1.00 0 0); --foreground: oklch(0.23 0.01 250); --card: oklch(1.00 0 0); --card-foreground: oklch(0.23 0.01 250); --popover: oklch(1.00 0 0); --popover-foreground: oklch(0.23 0.01 250); --primary: oklch(0.45 0.21 264); --primary-foreground: oklch(1.00 0 0); --secondary: oklch(0.96 0.00 264); --secondary-foreground: oklch(0.52 0.01 250); --muted: oklch(0.97 0.00 264); --muted-foreground: oklch(0.52 0.01 250); --accent: oklch(0.96 0.00 264); --accent-foreground: oklch(0.23 0.01 250); --destructive: oklch(0.50 0.19 25); --destructive-foreground: oklch(1.00 0 0); --border: oklch(0.91 0.01 250); --input: oklch(0.81 0.01 250); --ring: oklch(0.85 0.07 254); /* Chart Swatches (1-26) - mapped from old Figma tokens */ --chart-1: oklch(0.67 0.15 230); /* azure-500 */ --chart-2: oklch(0.87 0.08 230); /* azure-200 */ --chart-3: oklch(0.43 0.09 230); /* azure-700 */ --chart-4: oklch(0.73 0.16 165); /* green-haze-500 */ --chart-5: oklch(0.47 0.09 165); /* green-haze-700 */ --chart-6: oklch(0.90 0.09 165); /* green-haze-200 */ --chart-7: oklch(0.55 0.14 290); /* chetwode-500 */ --chart-8: oklch(0.85 0.07 290); /* chetwode-200 */ --chart-9: oklch(0.46 0.15 254); /* denim-500 */ --chart-10: oklch(0.81 0.08 254); /* denim-200 */ --chart-11: oklch(0.31 0.09 254); /* denim-700 */ --chart-12: oklch(0.87 0.10 45); /* orange-haze-200 */ --chart-13: oklch(0.42 0.11 35); /* orange-haze-700 */ --chart-14: oklch(0.63 0.20 35); /* orange-haze-500 */ --chart-15: oklch(0.80 0.11 230); /* azure-300 */ --chart-16: oklch(0.28 0.06 230); /* azure-800 */ --chart-17: oklch(0.84 0.12 165); /* green-haze-300 */ --chart-18: oklch(0.31 0.06 165); /* green-haze-800 */ --chart-19: oklch(0.59 0.12 165); /* green-haze-600 */ --chart-20: oklch(0.76 0.10 290); /* chetwode-300 */ --chart-21: oklch(0.44 0.11 290); /* chetwode-600 */ --chart-22: oklch(0.70 0.11 254); /* denim-300 */ --chart-23: oklch(0.38 0.12 254); /* denim-600 */ --chart-24: oklch(0.79 0.14 45); /* orange-haze-300 */ --chart-25: oklch(0.29 0.07 35); /* orange-haze-800 */ --chart-26: oklch(0.52 0.15 35); /* orange-haze-600 */ --radius: 0.25rem; --sidebar: oklch(0.97 0.00 264); --sidebar-foreground: oklch(0.23 0.01 250); --sidebar-primary: oklch(0.45 0.21 264); --sidebar-primary-foreground: oklch(1.00 0 0); --sidebar-accent: oklch(0.95 0.03 254); --sidebar-accent-foreground: oklch(0.40 0.16 264); --sidebar-border: oklch(0.91 0.01 250); --sidebar-ring: oklch(0.85 0.07 254); } /* Dark theme */ .dark { --background: oklch(0.23 0.01 250); --foreground: oklch(1.00 0 0); --card: oklch(0.27 0.01 250); --card-foreground: oklch(1.00 0 0); --popover: oklch(0.27 0.01 250); --popover-foreground: oklch(1.00 0 0); --primary: oklch(0.45 0.21 264); --primary-foreground: oklch(1.00 0 0); --secondary: oklch(0.38 0.01 250); --secondary-foreground: oklch(1.00 0 0); --muted: oklch(0.38 0.01 250); --muted-foreground: oklch(0.77 0.01 250); --accent: oklch(0.38 0.01 250); --accent-foreground: oklch(1.00 0 0); --destructive: oklch(0.43 0.16 25); --destructive-foreground: oklch(1.00 0 0); --border: oklch(0.43 0.01 250); --input: oklch(0.43 0.01 250); --ring: oklch(0.71 0.14 254); --sidebar: oklch(0.27 0.01 250); --sidebar-foreground: oklch(1.00 0 0); --sidebar-primary: oklch(0.71 0.14 254); --sidebar-primary-foreground: oklch(1.00 0 0); --sidebar-accent: oklch(0.38 0.01 250); --sidebar-accent-foreground: oklch(1.00 0 0); --sidebar-border: oklch(0.43 0.01 250); --sidebar-ring: oklch(0.71 0.14 254); } @theme inline { /* =========================================== TAILWIND THEME - Standard shadcn/ui tokens only =========================================== */ /* Core Colors */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); /* Chart Colors (1-26) */ --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-chart-6: var(--chart-6); --color-chart-7: var(--chart-7); --color-chart-8: var(--chart-8); --color-chart-9: var(--chart-9); --color-chart-10: var(--chart-10); --color-chart-11: var(--chart-11); --color-chart-12: var(--chart-12); --color-chart-13: var(--chart-13); --color-chart-14: var(--chart-14); --color-chart-15: var(--chart-15); --color-chart-16: var(--chart-16); --color-chart-17: var(--chart-17); --color-chart-18: var(--chart-18); --color-chart-19: var(--chart-19); --color-chart-20: var(--chart-20); --color-chart-21: var(--chart-21); --color-chart-22: var(--chart-22); --color-chart-23: var(--chart-23); --color-chart-24: var(--chart-24); --color-chart-25: var(--chart-25); --color-chart-26: var(--chart-26); /* Radius */ --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); /* Sidebar */ --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Font */ --font-sans: var(--font-family-brand); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; font-family: var(--font-family-brand); } } /* Button Loading Animation */ @keyframes flicker { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }) export const metadata: Metadata = { title: "BRD Component Registry", description: "A minimal showcase of all available UI components", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import * as React from "react" import { Search, ChevronDown, ChevronRight, Copy, Check, ExternalLink, } from "lucide-react" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" // Component registry data const components = [ { name: "Accordion", path: "components/ui/accordion.tsx", category: "Data Display" }, { name: "Alert", path: "components/ui/alert.tsx", category: "Feedback" }, { name: "AlertDialog", path: "components/ui/alert-dialog.tsx", category: "Overlay" }, { name: "AspectRatio", path: "components/ui/aspect-ratio.tsx", category: "Layout" }, { name: "Avatar", path: "components/ui/avatar.tsx", category: "Data Display" }, { name: "Badge", path: "components/ui/badge.tsx", category: "Data Display" }, { name: "Breadcrumb", path: "components/ui/breadcrumb.tsx", category: "Navigation" }, { name: "Button", path: "components/ui/button.tsx", category: "Actions" }, { name: "Calendar", path: "components/ui/calendar.tsx", category: "Data Entry" }, { name: "Card", path: "components/ui/card.tsx", category: "Data Display" }, { name: "Carousel", path: "components/ui/carousel.tsx", category: "Data Display" }, { name: "Chart", path: "components/ui/chart.tsx", category: "Data Display" }, { name: "Checkbox", path: "components/ui/checkbox.tsx", category: "Data Entry" }, { name: "Collapsible", path: "components/ui/collapsible.tsx", category: "Data Display" }, { name: "Command", path: "components/ui/command.tsx", category: "Data Entry" }, { name: "ContextMenu", path: "components/ui/context-menu.tsx", category: "Overlay" }, { name: "CurrencySelector", path: "components/ui/currency-selector.tsx", category: "Data Entry" }, { name: "Dialog", path: "components/ui/dialog.tsx", category: "Overlay" }, { name: "Drawer", path: "components/ui/drawer.tsx", category: "Overlay" }, { name: "DropdownMenu", path: "components/ui/dropdown-menu.tsx", category: "Overlay" }, { name: "Footer", path: "components/ui/footer.tsx", category: "Layout" }, { name: "Header", path: "components/ui/header.tsx", category: "Layout" }, { name: "HoverCard", path: "components/ui/hover-card.tsx", category: "Overlay" }, { name: "IconButton", path: "components/ui/icon-button.tsx", category: "Actions" }, { name: "Input", path: "components/ui/input.tsx", category: "Data Entry" }, { name: "InputOTP", path: "components/ui/input-otp.tsx", category: "Data Entry" }, { name: "Label", path: "components/ui/label.tsx", category: "Data Entry" }, { name: "LanguageSelector", path: "components/ui/language-selector.tsx", category: "Data Entry" }, { name: "LeftNavigation", path: "components/ui/left-navigation.tsx", category: "Navigation" }, { name: "Link", path: "components/ui/link.tsx", category: "Navigation" }, { name: "Menubar", path: "components/ui/menubar.tsx", category: "Navigation" }, { name: "PageContainer", path: "components/ui/page-container.tsx", category: "Layout" }, { name: "Pagination", path: "components/ui/pagination.tsx", category: "Navigation" }, { name: "Popover", path: "components/ui/popover.tsx", category: "Overlay" }, { name: "Progress", path: "components/ui/progress.tsx", category: "Feedback" }, { name: "RadioGroup", path: "components/ui/radio-group.tsx", category: "Data Entry" }, { name: "Resizable", path: "components/ui/resizable.tsx", category: "Layout" }, { name: "ScrollArea", path: "components/ui/scroll-area.tsx", category: "Layout" }, { name: "Select", path: "components/ui/select.tsx", category: "Data Entry" }, { name: "Separator", path: "components/ui/separator.tsx", category: "Layout" }, { name: "Sheet", path: "components/ui/sheet.tsx", category: "Overlay" }, { name: "Shell", path: "components/ui/shell.tsx", category: "Layout" }, { name: "SideToolbar", path: "components/ui/side-toolbar.tsx", category: "Navigation" }, { name: "Skeleton", path: "components/ui/skeleton.tsx", category: "Feedback" }, { name: "Slider", path: "components/ui/slider.tsx", category: "Data Entry" }, { name: "Sonner", path: "components/ui/sonner.tsx", category: "Feedback" }, { name: "Switch", path: "components/ui/switch.tsx", category: "Data Entry" }, { name: "Table", path: "components/ui/table.tsx", category: "Data Display" }, { name: "Tabs", path: "components/ui/tabs.tsx", category: "Navigation" }, { name: "Textarea", path: "components/ui/textarea.tsx", category: "Data Entry" }, { name: "Toast", path: "components/ui/toast.tsx", category: "Feedback" }, { name: "Toaster", path: "components/ui/toaster.tsx", category: "Feedback" }, { name: "Toggle", path: "components/ui/toggle.tsx", category: "Data Entry" }, { name: "ToggleGroup", path: "components/ui/toggle-group.tsx", category: "Data Entry" }, { name: "Tooltip", path: "components/ui/tooltip.tsx", category: "Overlay" }, { name: "TopNavigation", path: "components/ui/top-navigation.tsx", category: "Navigation" }, { name: "UserMenu", path: "components/ui/user-menu.tsx", category: "Navigation" }, { name: "Widget", path: "components/ui/widget.tsx", category: "Data Display" }, ] const categories = [ "All", "Actions", "Data Display", "Data Entry", "Feedback", "Layout", "Navigation", "Overlay", ] const categoryColors: Record = { Actions: { variant: "filled", color: "default" }, "Data Display": { variant: "filled", color: "sky" }, "Data Entry": { variant: "filled", color: "grass" }, Feedback: { variant: "filled", color: "bored" }, Layout: { variant: "filled", color: "neutral" }, Navigation: { variant: "filled", color: "dark" }, Overlay: { variant: "outline", color: "default" }, } function ComponentRow({ component, index }: { component: typeof components[0]; index: number }) { const [copied, setCopied] = React.useState(false) const copyImport = () => { const importStatement = `import { ${component.name} } from "@/${component.path.replace(".tsx", "")}"` navigator.clipboard.writeText(importStatement) setCopied(true) setTimeout(() => setCopied(false), 2000) } const colorConfig = categoryColors[component.category] || { variant: "filled" as const, color: "neutral" as const } return ( {String(index + 1).padStart(2, "0")} {component.name} {component.category}


          @/{component.path.replace(".tsx", "")}

) } export default function ComponentRegistry() { const [search, setSearch] = React.useState("") const [selectedCategory, setSelectedCategory] = React.useState("All") const [expandedCategories, setExpandedCategories] = React.useState>(new Set(categories)) const filteredComponents = components.filter((component) => { const matchesSearch = component.name.toLowerCase().includes(search.toLowerCase()) || component.category.toLowerCase().includes(search.toLowerCase()) const matchesCategory = selectedCategory === "All" || component.category === selectedCategory return matchesSearch && matchesCategory }) const groupedComponents = React.useMemo(() => { const groups: Record = {} for (const component of filteredComponents) { if (!groups[component.category]) { groups[component.category] = [] } groups[component.category].push(component) } return groups }, [filteredComponents]) const toggleCategory = (category: string) => { setExpandedCategories((prev) => { const next = new Set(prev) if (next.has(category)) { next.delete(category) } else { next.add(category) } return next }) } const totalCount = components.length const filteredCount = filteredComponents.length return (

{/* Header */}

BRD Component Registry

{filteredCount} of {totalCount} components

setSearch(e.target.value)} className="pl-9 h-9" />

{/* Category Filter */}

{categories.map((category) => { const count = category === "All" ? components.length : components.filter((c) => c.category === category).length const isActive = selectedCategory === category return ( ) })}

{/* Main Content */}

{selectedCategory === "All" ? ( // Grouped view

{Object.entries(groupedComponents) .sort(([a], [b]) => a.localeCompare(b)) .map(([category, categoryComponents]) => { const isExpanded = expandedCategories.has(category) const colorConfig = categoryColors[category] || { variant: "filled" as const, color: "neutral" as const } return (

{isExpanded && (

{categoryComponents.map((component, idx) => ( c.name === component.name)} /> ))}

)}

) })}

) : ( // Flat table view for specific category

{filteredComponents.map((component, idx) => ( c.name === component.name)} /> ))}

#	Component	Category	Import Path	Action

)} {filteredComponents.length === 0 && (

No components found matching your search.

)}

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDownIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Accordion({ ...props }: React.ComponentProps) { return } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180', className, )} {...props} > {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" 'use client' import * as React from 'react' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' // Size type matching Dialog/Modal component export type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' const alertDialogContentVariants = cva( [ // Base styling matching Dialog (old Modal) 'bg-[var(--color-surface-foreground)]', 'rounded-[var(--radius-s)]', // No border 'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'z-[201]', 'outline-none', 'flex flex-col', 'gap-6 p-6', // spacing-sp-24 // Animations 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-[0.96] data-[state=open]:zoom-in-[0.96]', 'data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]', 'duration-150', ], { variants: { size: { xs: 'w-[500px] min-w-[392px] max-w-[500px] min-h-[260px] max-h-[500px]', sm: 'w-[594px] min-w-[594px] max-w-[800px] min-h-[260px] max-h-[800px]', md: 'w-[882px] min-w-[882px] max-w-[1050px] min-h-[260px] max-h-[800px]', lg: 'w-[1172px] min-w-[1172px] min-h-[400px] max-h-[800px]', }, }, defaultVariants: { size: 'xs', }, } ) function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef, VariantProps { /** Size variant of the alert dialog */ size?: AlertDialogSize } const AlertDialogContent = React.forwardRef< React.ElementRef, AlertDialogContentProps >(({ className, size = 'xs', ...props }, ref) => { const localRef = React.useRef | null>(null) const composedRef = React.useCallback( (node: React.ElementRef | null) => { localRef.current = node if (typeof ref === 'function') { ref(node) } else if (ref) { ;(ref as React.MutableRefObject | null>).current = node } }, [ref] ) return ( ) }) AlertDialogContent.displayName = 'AlertDialogContent' function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogBody({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( ) } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, alertDialogContentVariants, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" "use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { X, Info, CheckCircle2, AlertTriangle, AlertCircle } from "lucide-react" import { cn } from "@/lib/utils" import { Link, type LinkProps } from "@/components/ui/link" const alertVariants = cva( "relative w-full rounded-[var(--radius-s)] border p-3 flex items-start gap-3", { variants: { variant: { info: "bg-[var(--color-alert-info-bg)] border-[var(--color-alert-info-border)] text-[var(--color-text-primary)] [&>svg]:text-[var(--color-alert-info-icon)]", success: "bg-[var(--color-alert-success-bg)] border-[var(--color-alert-success-border)] text-[var(--color-text-primary)] [&>svg]:text-[var(--color-alert-success-icon)]", warning: "bg-[var(--color-alert-warning-bg)] border-[var(--color-alert-warning-border)] text-[var(--color-text-primary)] [&>svg]:text-[var(--color-alert-warning-icon)]", critical: "bg-[var(--color-alert-critical-bg)] border-[var(--color-alert-critical-border)] text-[var(--color-text-primary)] [&>svg]:text-[var(--color-alert-critical-icon)]", // Keep default and destructive for backward compatibility default: "bg-card text-card-foreground", destructive: "bg-[var(--color-alert-critical-bg)] border-[var(--color-alert-critical-border)] text-[var(--color-text-primary)] [&>svg]:text-[var(--color-alert-critical-icon)]", }, }, defaultVariants: { variant: "info", }, } ) const variantIcons = { info: Info, success: CheckCircle2, warning: AlertTriangle, critical: AlertCircle, default: Info, destructive: AlertCircle, } as const export interface AlertProps extends React.ComponentProps<"div">, VariantProps { /** * If true, shows a close button */ dismissible?: boolean /** * Callback when close button is clicked */ onDismiss?: () => void /** * Custom icon to display. If not provided, uses variant-specific icon */ icon?: React.ReactNode /** * If false, hides the icon */ showIcon?: boolean } function Alert({ className, variant = "info", dismissible = false, onDismiss, icon, showIcon = true, children, ...props }: AlertProps) { const [isVisible, setIsVisible] = React.useState(true) const handleDismiss = () => { onDismiss?.() setIsVisible(false) } if (!isVisible && dismissible) { return null } const IconComponent = variant ? variantIcons[variant] : Info const role = variant === "warning" || variant === "critical" || variant === "destructive" ? "alert" : "status" return (

{showIcon && ( {icon ?? )}

{children}

{dismissible && ( )}

) } function AlertTitle({ className, ...props }: React.ComponentProps<"h3">) { return (

) } function AlertDescription({ className, ...props }: React.ComponentProps<"div">) { return (
) } function AlertActions({ className, ...props }: React.ComponentProps<"div">) { return (
) } function AlertLink({ className, size = "sm", ...props }: LinkProps) { return ( ) } export { Alert, AlertTitle, AlertDescription, AlertActions, AlertLink } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" 'use client' import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' function AspectRatio({ ...props }: React.ComponentProps) { return } export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" 'use client' import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cn } from '@/lib/utils' function Avatar({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarImage({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarFallback({ className, ...props }: React.ComponentProps) { return ( ) } export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" "use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center justify-center rounded-[4px] font-semibold whitespace-nowrap shrink-0 [&>svg]:pointer-events-none gap-1 transition-colors", { variants: { variant: { filled: "", outline: "border bg-white", }, color: { default: "", sky: "", grass: "", bored: "", negative: "", neutral: "", dark: "", }, size: { sm: "px-1 py-0.5 text-xs leading-4 h-5", default: "px-1.5 py-0.5 text-sm leading-5 h-6", lg: "px-2 py-0.5 text-base leading-6 h-7", }, }, compoundVariants: [ // Filled variants { variant: "filled", color: "default", className: "bg-[var(--color-badge-filled-default-bg)] text-[var(--color-badge-filled-default-text)]", }, { variant: "filled", color: "sky", className: "bg-[var(--color-badge-filled-sky-bg)] text-[var(--color-badge-filled-sky-text)]", }, { variant: "filled", color: "grass", className: "bg-[var(--color-badge-filled-grass-bg)] text-[var(--color-badge-filled-grass-text)]", }, { variant: "filled", color: "bored", className: "bg-[var(--color-badge-filled-bored-bg)] text-[var(--color-badge-filled-bored-text)]", }, { variant: "filled", color: "negative", className: "bg-[var(--color-badge-filled-negative-bg)] text-[var(--color-badge-filled-negative-text)]", }, { variant: "filled", color: "neutral", className: "bg-[var(--color-badge-filled-neutral-bg)] text-[var(--color-badge-filled-neutral-text)] border border-[var(--color-badge-filled-neutral-border)]", }, { variant: "filled", color: "dark", className: "bg-[var(--color-badge-filled-dark-bg)] text-[var(--color-badge-filled-dark-text)]", }, // Outline variants { variant: "outline", color: "default", className: "border-[var(--color-badge-outline-default-border)] text-[var(--color-badge-outline-default-text)]", }, { variant: "outline", color: "sky", className: "border-[var(--color-badge-outline-sky-border)] text-[var(--color-badge-outline-sky-text)]", }, { variant: "outline", color: "grass", className: "border-[var(--color-badge-outline-grass-border)] text-[var(--color-badge-outline-grass-text)]", }, { variant: "outline", color: "bored", className: "border-[var(--color-badge-outline-bored-border)] text-[var(--color-badge-outline-bored-text)]", }, { variant: "outline", color: "negative", className: "border-[var(--color-badge-outline-negative-border)] text-[var(--color-badge-outline-negative-text)]", }, { variant: "outline", color: "neutral", className: "border-[var(--color-badge-outline-neutral-border)] text-[var(--color-badge-outline-neutral-text)]", }, { variant: "outline", color: "dark", className: "border-[var(--color-badge-outline-dark-border)] text-[var(--color-badge-outline-dark-text)]", }, ], defaultVariants: { variant: "filled", color: "default", size: "default", }, } ) export interface BadgeProps extends React.ComponentProps<"span">, VariantProps { asChild?: boolean } function Badge({ className, variant, color, size, asChild = false, ...props }: BadgeProps) { const Comp = asChild ? Slot : "span" return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" import { Link } from "@/components/ui/link" /* =========================================== Individual Breadcrumb Components (shadcn API) =========================================== / function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { return (
) } function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { return (
) } function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) { return (
) } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & { asChild?: boolean }) { const Comp = asChild ? Slot : Link return ( ) } function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { return ( ) } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) { return (
) } function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) { return ( ) } / =========================================== Composite Breadcrumbs Component (Old API) =========================================== */ export interface BreadcrumbItemData { text: string href?: string } export interface BreadcrumbsProps extends React.ComponentProps<"nav"> { /** * An array of breadcrumb items. * Each item is an object with `text` and optional `href`. * The last item is considered the current page. / items: BreadcrumbItemData[] } const Breadcrumbs = React.forwardRef( ({ items, className, ...rest }, ref) => { if (!items || items.length <= 1) { return null } return ( {items.map((item, index) => { const isCurrentPage = index === items.length - 1 return ( {isCurrentPage ? ( {item.text} ) : ( {item.text} )} {!isCurrentPage && } ) })} ) } ) Breadcrumbs.displayName = "Breadcrumbs" export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, Breadcrumbs, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" "use client" import as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-[var(--radius-xs)] font-semibold transition-all disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--denim-300)]", { variants: { variant: { // Primary (default) - solid blue button default: "bg-[var(--color-surface-button-primary-default)] text-[var(--color-text-button-primary-default)] hover:bg-[var(--color-surface-button-primary-hover)] active:bg-[var(--color-surface-button-primary-pressed)] focus-visible:bg-[var(--color-surface-button-primary-focused)] disabled:bg-[var(--color-surface-button-primary-disabled)] disabled:text-[var(--color-text-button-primary-disabled)]", // Destructive/Error - solid red button destructive: "bg-[var(--color-surface-button-error-default)] text-[var(--color-text-button-error-default)] hover:bg-[var(--color-surface-button-error-hover)] active:bg-[var(--color-surface-button-error-pressed)] focus-visible:bg-[var(--color-surface-button-error-focused)] disabled:bg-[var(--color-surface-button-error-disabled)] disabled:text-[var(--color-text-button-error-disabled)]", // Outline/Secondary - bordered button outline: "bg-[var(--color-surface-button-secondary-default)] text-[var(--color-text-button-secondary-default)] border border-[var(--color-stroke-button-secondary-default)] hover:bg-[var(--color-surface-button-secondary-hover)] hover:text-[var(--color-text-button-secondary-hover)] hover:border-[var(--color-stroke-button-secondary-hover)] active:bg-[var(--color-surface-button-secondary-pressed)] active:text-[var(--color-text-button-secondary-pressed)] active:border-[var(--color-stroke-button-secondary-pressed)] focus-visible:bg-[var(--color-surface-button-secondary-focused)] disabled:bg-[var(--color-surface-button-secondary-disabled)] disabled:text-[var(--color-text-button-secondary-disabled)] disabled:border-[var(--color-stroke-default)]", // Secondary/Tertiary - light blue background secondary: "bg-[var(--color-surface-button-tertiary-default)] text-[var(--color-text-button-tertiary-default)] hover:bg-[var(--color-surface-button-tertiary-hover)] active:bg-[var(--color-surface-button-tertiary-pressed)] focus-visible:bg-[var(--color-surface-button-tertiary-focused)] disabled:bg-[var(--color-surface-button-tertiary-disabled)] disabled:text-[var(--color-text-button-tertiary-disabled)]", // Ghost - deprecated, kept for backward compatibility ghost: "hover:bg-accent hover:text-accent-foreground", // Link - deprecated, use Link component instead link: "text-primary underline-offset-4 hover:underline", }, size: { default: "min-w-[72px] h-9 px-2 py-1.5 text-sm [&_svg]:size-5", sm: "min-w-[56px] h-6 px-1 py-1 text-xs [&_svg]:size-3", lg: "min-w-[88px] h-10 px-3 py-2 text-base [&_svg]:size-6", icon: "size-9 p-2", "icon-sm": "size-6 p-1", "icon-lg": "size-10 p-2", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ComponentProps<"button">, VariantProps { asChild?: boolean isLoading?: boolean icon?: React.ReactNode } const Button = React.forwardRef( ( { className, variant, size, asChild = false, isLoading = false, icon, children, disabled, ...props }, ref ) => { const localRef = React.useRef(null) const composedRef = React.useCallback( (node: HTMLButtonElement | null) => { localRef.current = node if (typeof ref === "function") { ref(node) } else if (ref) { ;(ref as React.MutableRefObject).current = node } }, [ref] ) const Comp = asChild ? Slot : "button" // Loading dots component const LoadingDots = () => ( ) if (asChild) { return ( {children} ) } return ( {isLoading ? ( ) : ( <> {icon && {icon}} {children && {children}} )} ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months, ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next, ), month_caption: cn( 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption, ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns, ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root, ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown, ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label, ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday, ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-(--cell-size)', defaultClassNames.week_number_header, ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number, ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day, ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start, ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today, ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside, ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled, ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (
) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (
{children}
) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) } function CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" 'use client' import * as React from 'react' import * as RechartsPrimitive from 'recharts' import { cn } from '@/lib/utils' // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: '', dark: '.dark' } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error('useChart must be used within a ') } return context } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >['children'] }) { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, '')}` return (
{children}
) } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme || config.color, ) if (!colorConfig.length) { return null } return (

About

Tags

Share

About

Tags

Share

More from sahaj-jj

More Templates Like This