konnosdefaultTheme.ts699 lines · main
| 1 | /* |
| 2 | * Globlal Variables |
| 3 | * |
| 4 | */ |
| 5 | |
| 6 | const defaults = { |
| 7 | bg: { |
| 8 | brand: { |
| 9 | primary: 'bg-purple-600', |
| 10 | secondary: 'bg-purple-200', |
| 11 | }, |
| 12 | }, |
| 13 | text: { |
| 14 | brand: 'text-purple-600', |
| 15 | body: 'text-foreground-light', |
| 16 | title: 'text-foreground', |
| 17 | }, |
| 18 | border: { |
| 19 | brand: 'border-brand-600', |
| 20 | primary: 'border-default', |
| 21 | secondary: 'border-secondary', |
| 22 | alternative: 'border-alternative', |
| 23 | }, |
| 24 | placeholder: 'placeholder-foreground-muted', |
| 25 | focus: ` |
| 26 | outline-hidden |
| 27 | focus:ring-current focus:ring-2 |
| 28 | `, |
| 29 | 'focus-visible': ` |
| 30 | outline-hidden |
| 31 | transition-all |
| 32 | outline-0 |
| 33 | focus-visible:outline-4 |
| 34 | focus-visible:outline-offset-1 |
| 35 | `, |
| 36 | size: { |
| 37 | // buttons, inputs, input labels use these sizes |
| 38 | // text-base on mobile (below md) to avoid zoom on focus |
| 39 | text: { |
| 40 | tiny: 'text-xs', |
| 41 | small: 'text-base md:text-sm leading-4', |
| 42 | medium: 'text-base md:text-sm', |
| 43 | large: 'text-base', |
| 44 | xlarge: 'text-base', |
| 45 | }, |
| 46 | // buttons, inputs, input labels use these sizes |
| 47 | padding: { |
| 48 | tiny: 'px-2.5 py-1', |
| 49 | small: 'px-3 py-2', |
| 50 | medium: 'px-4 py-2', |
| 51 | large: 'px-4 py-2', |
| 52 | xlarge: 'px-6 py-3', |
| 53 | }, |
| 54 | }, |
| 55 | overlay: { |
| 56 | base: `absolute inset-0 bg-background opacity-50`, |
| 57 | container: `fixed inset-0 transition-opacity`, |
| 58 | }, |
| 59 | } |
| 60 | |
| 61 | const default__padding_and_text = { |
| 62 | tiny: `${defaults.size.text.tiny} ${defaults.size.padding.tiny}`, |
| 63 | small: `${defaults.size.text.small} ${defaults.size.padding.small}`, |
| 64 | medium: `${defaults.size.text.medium} ${defaults.size.padding.medium}`, |
| 65 | large: `${defaults.size.text.large} ${defaults.size.padding.large}`, |
| 66 | xlarge: `${defaults.size.text.xlarge} ${defaults.size.padding.xlarge}`, |
| 67 | } |
| 68 | |
| 69 | const with_icon_spacing_sizes = { |
| 70 | tiny: 'pl-7', |
| 71 | small: 'pl-8', |
| 72 | medium: 'pl-8', |
| 73 | large: 'pl-10', |
| 74 | xlarge: 'pl-11', |
| 75 | } |
| 76 | |
| 77 | /* |
| 78 | * Main tailwind utility classes output |
| 79 | * |
| 80 | */ |
| 81 | |
| 82 | export default { |
| 83 | /* |
| 84 | * Card |
| 85 | */ |
| 86 | |
| 87 | card: { |
| 88 | base: ` |
| 89 | bg-surface-100 |
| 90 | |
| 91 | border |
| 92 | ${defaults.border.primary} |
| 93 | |
| 94 | flex flex-col |
| 95 | rounded-md shadow-lg overflow-hidden relative |
| 96 | `, |
| 97 | hoverable: 'transition hover:-translate-y-1 hover:shadow-2xl', |
| 98 | head: `px-8 py-6 flex justify-between |
| 99 | border-b |
| 100 | ${defaults.border.primary} `, |
| 101 | content: 'p-8', |
| 102 | }, |
| 103 | |
| 104 | /* |
| 105 | * Tabs |
| 106 | */ |
| 107 | |
| 108 | tabs: { |
| 109 | base: `w-full justify-between space-y-4`, |
| 110 | underlined: { |
| 111 | list: ` |
| 112 | flex items-center border-b |
| 113 | ${defaults.border.secondary} |
| 114 | `, |
| 115 | base: ` |
| 116 | relative |
| 117 | cursor-pointer |
| 118 | text-foreground-lighter |
| 119 | flex |
| 120 | items-center |
| 121 | space-x-2 |
| 122 | text-center |
| 123 | transition |
| 124 | focus:outline-hidden |
| 125 | focus-visible:ring-3 |
| 126 | focus-visible:ring-foreground-muted |
| 127 | focus-visible:border-foreground-muted |
| 128 | `, |
| 129 | inactive: ` |
| 130 | hover:text-foreground |
| 131 | `, |
| 132 | active: ` |
| 133 | !text-foreground |
| 134 | border-b-2 border-foreground |
| 135 | `, |
| 136 | }, |
| 137 | pills: { |
| 138 | list: 'flex space-x-1', |
| 139 | base: ` |
| 140 | relative |
| 141 | cursor-pointer |
| 142 | flex |
| 143 | items-center |
| 144 | space-x-2 |
| 145 | text-center |
| 146 | transition |
| 147 | shadow-xs |
| 148 | rounded-sm |
| 149 | border |
| 150 | focus:outline-hidden |
| 151 | focus-visible:ring-3 |
| 152 | focus-visible:ring-foreground-muted |
| 153 | focus-visible:border-foreground-muted |
| 154 | `, |
| 155 | inactive: ` |
| 156 | bg-background |
| 157 | border-strong hover:border-foreground-muted |
| 158 | text-foreground-muted hover:text-foreground |
| 159 | `, |
| 160 | active: ` |
| 161 | bg-selection |
| 162 | text-foreground |
| 163 | border-stronger |
| 164 | `, |
| 165 | }, |
| 166 | 'rounded-pills': { |
| 167 | list: 'flex flex-wrap gap-2', |
| 168 | base: ` |
| 169 | relative |
| 170 | cursor-pointer |
| 171 | flex |
| 172 | items-center |
| 173 | space-x-2 |
| 174 | text-center |
| 175 | transition |
| 176 | shadow-xs |
| 177 | rounded-full |
| 178 | focus:outline-hidden |
| 179 | focus-visible:ring-3 |
| 180 | focus-visible:ring-foreground-muted |
| 181 | focus-visible:border-foreground-muted |
| 182 | `, |
| 183 | inactive: ` |
| 184 | bg-surface-200 hover:bg-surface-300 |
| 185 | hover:border-foreground-lighter |
| 186 | text-foreground-lighter hover:text-foreground |
| 187 | `, |
| 188 | active: ` |
| 189 | bg-foreground |
| 190 | text-background |
| 191 | border-foreground |
| 192 | `, |
| 193 | }, |
| 194 | block: 'w-full flex items-center justify-center', |
| 195 | size: { |
| 196 | ...default__padding_and_text, |
| 197 | }, |
| 198 | scrollable: `overflow-auto whitespace-nowrap no-scrollbar mask-fadeout-right`, |
| 199 | wrappable: `flex-wrap`, |
| 200 | content: `focus:outline-hidden transition-height`, |
| 201 | }, |
| 202 | |
| 203 | /* |
| 204 | * Input |
| 205 | */ |
| 206 | |
| 207 | input: { |
| 208 | base: ` |
| 209 | block |
| 210 | box-border |
| 211 | w-full |
| 212 | rounded-md |
| 213 | shadow-xs |
| 214 | transition-all |
| 215 | text-foreground |
| 216 | border |
| 217 | focus-visible:shadow-md |
| 218 | ${defaults.focus} |
| 219 | focus-visible:border-foreground-muted |
| 220 | focus-visible:ring-background-control |
| 221 | ${defaults.placeholder} |
| 222 | group |
| 223 | `, |
| 224 | variants: { |
| 225 | standard: ` |
| 226 | bg-foreground/[.026] |
| 227 | border border-control |
| 228 | `, |
| 229 | error: ` |
| 230 | bg-destructive-200 |
| 231 | border border-destructive-500 |
| 232 | focus:ring-destructive-400 |
| 233 | placeholder:text-destructive-400 |
| 234 | `, |
| 235 | }, |
| 236 | container: 'relative', |
| 237 | with_icon: with_icon_spacing_sizes, |
| 238 | size: { |
| 239 | ...default__padding_and_text, |
| 240 | }, |
| 241 | disabled: 'opacity-50', |
| 242 | actions_container: 'absolute inset-y-0 right-0 pl-3 pr-1 flex space-x-1 items-center', |
| 243 | textarea_actions_container: 'absolute inset-y-1.5 right-0 pl-3 pr-1 flex space-x-1 items-start', |
| 244 | textarea_actions_container_items: 'flex items-center', |
| 245 | }, |
| 246 | |
| 247 | sidepanel: { |
| 248 | base: ` |
| 249 | z-50 |
| 250 | bg-dash-sidebar |
| 251 | flex flex-col |
| 252 | fixed |
| 253 | inset-y-0 |
| 254 | h-full lg:h-screen |
| 255 | border-l |
| 256 | shadow-xl |
| 257 | `, |
| 258 | header: ` |
| 259 | flex items-center |
| 260 | space-y-1 py-4 px-4 bg-dash-sidebar sm:px-6 |
| 261 | border-b h-(--header-height) |
| 262 | `, |
| 263 | contents: ` |
| 264 | relative |
| 265 | flex-1 |
| 266 | overflow-y-auto |
| 267 | `, |
| 268 | content: ` |
| 269 | px-4 sm:px-6 |
| 270 | `, |
| 271 | footer: ` |
| 272 | flex justify-end gap-2 |
| 273 | p-4 bg-overlay |
| 274 | border-t |
| 275 | `, |
| 276 | size: { |
| 277 | medium: `w-screen max-w-md h-full`, |
| 278 | large: `w-screen max-w-2xl h-full`, |
| 279 | xlarge: `w-screen max-w-3xl h-full`, |
| 280 | xxlarge: `w-screen max-w-4xl h-full`, |
| 281 | xxxlarge: `w-screen max-w-5xl h-full`, |
| 282 | xxxxlarge: `w-screen max-w-6xl h-full`, |
| 283 | }, |
| 284 | align: { |
| 285 | left: ` |
| 286 | left-0 |
| 287 | data-open:animate-panel-slide-left-out |
| 288 | data-closed:animate-panel-slide-left-in |
| 289 | `, |
| 290 | right: ` |
| 291 | right-0 |
| 292 | data-open:animate-panel-slide-right-out |
| 293 | data-closed:animate-panel-slide-right-in |
| 294 | `, |
| 295 | }, |
| 296 | separator: ` |
| 297 | w-full |
| 298 | h-px |
| 299 | my-2 |
| 300 | bg-border |
| 301 | `, |
| 302 | overlay: ` |
| 303 | z-50 |
| 304 | fixed |
| 305 | bg-alternative |
| 306 | h-full w-full |
| 307 | left-0 |
| 308 | top-0 |
| 309 | opacity-75 |
| 310 | data-closed:animate-fade-out-overlay-bg |
| 311 | data-open:animate-fade-in-overlay-bg |
| 312 | `, |
| 313 | // this is to reset the button |
| 314 | // it is advised not to change this |
| 315 | trigger: ` |
| 316 | border-none bg-transparent p-0 focus:ring-0 |
| 317 | `, |
| 318 | }, |
| 319 | |
| 320 | /* |
| 321 | * Form Layout |
| 322 | */ |
| 323 | |
| 324 | form_layout: { |
| 325 | container: 'grid gap-2', |
| 326 | |
| 327 | flex: { |
| 328 | left: { |
| 329 | base: 'flex flex-row gap-6', |
| 330 | content: ``, |
| 331 | labels: 'order-2', |
| 332 | data_input: 'order-1', |
| 333 | }, |
| 334 | right: { |
| 335 | base: 'flex flex-row gap-6 justify-between', |
| 336 | content: `order-last`, |
| 337 | labels: '', |
| 338 | data_input: 'text-right', |
| 339 | }, |
| 340 | }, |
| 341 | |
| 342 | responsive: 'md:grid md:grid-cols-12', |
| 343 | non_responsive: 'grid grid-cols-12 gap-2', |
| 344 | |
| 345 | labels_horizontal_layout: 'flex flex-row space-x-2 justify-between col-span-12', |
| 346 | labels_vertical_layout: 'flex flex-col space-y-2 col-span-4', |
| 347 | |
| 348 | data_input_horizontal_layout: 'col-span-12', |
| 349 | |
| 350 | non_box_data_input_spacing_vertical: 'my-3', |
| 351 | non_box_data_input_spacing_horizontal: 'my-3 md:mt-0 mb-3', |
| 352 | |
| 353 | data_input_vertical_layout: 'col-span-8', |
| 354 | |
| 355 | data_input_vertical_layout__align_right: 'text-right', |
| 356 | |
| 357 | label: { |
| 358 | base: 'block text-foreground-light', |
| 359 | size: { |
| 360 | ...defaults.size.text, |
| 361 | }, |
| 362 | }, |
| 363 | label_optional: { |
| 364 | base: 'text-foreground-lighter', |
| 365 | size: { |
| 366 | ...defaults.size.text, |
| 367 | }, |
| 368 | }, |
| 369 | description: { |
| 370 | base: 'mt-2 text-foreground-lighter leading-normal', |
| 371 | size: { |
| 372 | ...defaults.size.text, |
| 373 | }, |
| 374 | }, |
| 375 | label_before: { |
| 376 | base: 'text-foreground-lighter ', |
| 377 | size: { |
| 378 | ...defaults.size.text, |
| 379 | }, |
| 380 | }, |
| 381 | label_after: { |
| 382 | base: 'text-foreground-lighter', |
| 383 | size: { |
| 384 | ...defaults.size.text, |
| 385 | }, |
| 386 | }, |
| 387 | error: { |
| 388 | base: ` |
| 389 | text-red-900 |
| 390 | transition-all |
| 391 | data-show:mt-2 |
| 392 | data-show:animate-slide-down-normal |
| 393 | data-hide:animate-slide-up-normal |
| 394 | `, |
| 395 | size: { |
| 396 | ...defaults.size.text, |
| 397 | }, |
| 398 | }, |
| 399 | size: { |
| 400 | tiny: 'text-xs', |
| 401 | small: 'text-base md:text-sm leading-4', |
| 402 | medium: 'text-base md:text-sm', |
| 403 | large: 'text-base', |
| 404 | xlarge: 'text-base', |
| 405 | }, |
| 406 | }, |
| 407 | |
| 408 | /* |
| 409 | * Menu |
| 410 | */ |
| 411 | |
| 412 | menu: { |
| 413 | item: { |
| 414 | base: ` |
| 415 | cursor-pointer |
| 416 | flex space-x-3 items-center |
| 417 | outline-hidden |
| 418 | focus-visible:ring-1 ring-foreground-muted focus-visible:z-10 |
| 419 | group |
| 420 | `, |
| 421 | content: { |
| 422 | base: `transition truncate text-sm w-full`, |
| 423 | normal: `text-foreground-light group-hover:text-foreground`, |
| 424 | active: `text-foreground font-semibold`, |
| 425 | }, |
| 426 | icon: { |
| 427 | base: `transition truncate text-sm`, |
| 428 | normal: `text-foreground-lighter group-hover:text-foreground-light`, |
| 429 | active: `text-foreground`, |
| 430 | }, |
| 431 | variants: { |
| 432 | text: { |
| 433 | base: ` |
| 434 | py-1 |
| 435 | `, |
| 436 | normal: ` |
| 437 | font-normal |
| 438 | border-default |
| 439 | group-hover:border-foreground-muted`, |
| 440 | active: ` |
| 441 | font-semibold |
| 442 | text-foreground-muted |
| 443 | z-10 |
| 444 | `, |
| 445 | }, |
| 446 | border: { |
| 447 | base: ` |
| 448 | px-4 py-1 |
| 449 | `, |
| 450 | normal: ` |
| 451 | border-l |
| 452 | font-normal |
| 453 | border-default |
| 454 | group-hover:border-foreground-muted`, |
| 455 | active: ` |
| 456 | font-semibold |
| 457 | |
| 458 | text-foreground-muted |
| 459 | z-10 |
| 460 | |
| 461 | border-l |
| 462 | border-brand |
| 463 | group-hover:border-brand |
| 464 | `, |
| 465 | rounded: `rounded-md`, |
| 466 | }, |
| 467 | pills: { |
| 468 | base: `my-px px-3 py-[3px] rounded-md transition-colors active:bg-sidebar-accent/50`, |
| 469 | normal: ` |
| 470 | font-normal |
| 471 | border-default |
| 472 | hover:bg-sidebar-accent/50 |
| 473 | group-hover:border-foreground-muted`, |
| 474 | active: ` |
| 475 | font-semibold |
| 476 | bg-sidebar-accent |
| 477 | text-foreground-lighter |
| 478 | z-10 rounded-md |
| 479 | `, |
| 480 | }, |
| 481 | }, |
| 482 | }, |
| 483 | group: { |
| 484 | base: ` |
| 485 | flex space-x-3 |
| 486 | mb-2 |
| 487 | font-normal |
| 488 | `, |
| 489 | icon: `text-foreground-lighter`, |
| 490 | content: `text-sm text-foreground-lighter w-full`, |
| 491 | variants: { |
| 492 | text: ``, |
| 493 | pills: `px-3`, |
| 494 | border: ``, |
| 495 | }, |
| 496 | }, |
| 497 | }, |
| 498 | |
| 499 | /* |
| 500 | * modal |
| 501 | */ |
| 502 | modal: { |
| 503 | base: ` |
| 504 | relative |
| 505 | bg-dash-sidebar |
| 506 | my-4 max-w-screen |
| 507 | border border-overlay |
| 508 | rounded-md |
| 509 | shadow-xl |
| 510 | data-open:animate-overlay-show |
| 511 | data-closed:animate-overlay-hide |
| 512 | |
| 513 | `, |
| 514 | header: ` |
| 515 | bg-surface-200 |
| 516 | space-y-1 py-3 px-4 sm:px-5 |
| 517 | border-b border-overlay |
| 518 | flex items-center justify-between |
| 519 | `, |
| 520 | footer: ` |
| 521 | flex justify-end gap-2 |
| 522 | py-3 px-5 |
| 523 | border-t border-overlay |
| 524 | `, |
| 525 | size: { |
| 526 | tiny: `sm:align-middle sm:w-full sm:max-w-xs`, |
| 527 | small: `sm:align-middle sm:w-full sm:max-w-sm`, |
| 528 | medium: `sm:align-middle sm:w-full sm:max-w-lg`, |
| 529 | large: `sm:align-middle sm:w-full md:max-w-xl`, |
| 530 | xlarge: `sm:align-middle sm:w-full md:max-w-3xl`, |
| 531 | xxlarge: `sm:align-middle sm:w-full max-w-screen md:max-w-6xl`, |
| 532 | xxxlarge: `sm:align-middle sm:w-full md:max-w-7xl`, |
| 533 | }, |
| 534 | overlay: ` |
| 535 | z-40 |
| 536 | fixed |
| 537 | bg-alternative |
| 538 | h-full w-full |
| 539 | left-0 |
| 540 | top-0 |
| 541 | opacity-75 |
| 542 | data-closed:animate-fade-out-overlay-bg |
| 543 | data-open:animate-fade-in-overlay-bg |
| 544 | `, |
| 545 | scroll_overlay: ` |
| 546 | z-40 |
| 547 | fixed |
| 548 | inset-0 |
| 549 | grid |
| 550 | place-items-center |
| 551 | overflow-y-auto |
| 552 | data-open:animate-overlay-show data-closed:animate-overlay-hide |
| 553 | `, |
| 554 | separator: ` |
| 555 | w-full |
| 556 | h-px |
| 557 | my-2 |
| 558 | bg-border-overlay |
| 559 | `, |
| 560 | content: `px-5`, |
| 561 | }, |
| 562 | |
| 563 | // listbox |
| 564 | |
| 565 | listbox: { |
| 566 | base: ` |
| 567 | block |
| 568 | box-border |
| 569 | w-full |
| 570 | rounded-md |
| 571 | shadow-xs |
| 572 | text-foreground |
| 573 | border |
| 574 | focus-visible:shadow-md |
| 575 | ${defaults.focus} |
| 576 | focus-visible:border-foreground-muted |
| 577 | focus-visible:ring-background-control |
| 578 | ${defaults.placeholder} |
| 579 | indent-px |
| 580 | transition-all |
| 581 | bg-none |
| 582 | `, |
| 583 | container: 'relative', |
| 584 | label: `truncate`, |
| 585 | variants: { |
| 586 | standard: ` |
| 587 | bg-control |
| 588 | border border-control |
| 589 | |
| 590 | aria-expanded:border-foreground-muted |
| 591 | aria-expanded:ring-border-muted |
| 592 | aria-expanded:ring-2 |
| 593 | `, |
| 594 | error: ` |
| 595 | bg-destructive-200 |
| 596 | border border-destructive-500 |
| 597 | focus:ring-destructive-400 |
| 598 | placeholder:text-destructive-400 |
| 599 | `, |
| 600 | }, |
| 601 | options_container_animate: ` |
| 602 | transition |
| 603 | data-open:animate-slide-down |
| 604 | data-open:opacity-1 |
| 605 | data-closed:animate-slide-up |
| 606 | data-closed:opacity-0 |
| 607 | `, |
| 608 | options_container: ` |
| 609 | bg-overlay |
| 610 | shadow-lg |
| 611 | border border-solid |
| 612 | border-overlay max-h-60 |
| 613 | rounded-md py-1 text-base |
| 614 | sm:text-sm z-10 overflow-hidden overflow-y-scroll |
| 615 | |
| 616 | origin-dropdown |
| 617 | data-open:animate-dropdown-content-show |
| 618 | data-closed:animate-dropdown-content-hide |
| 619 | `, |
| 620 | with_icon: 'pl-2', |
| 621 | addOnBefore: ` |
| 622 | w-full flex flex-row items-center space-x-3 |
| 623 | `, |
| 624 | size: { |
| 625 | ...default__padding_and_text, |
| 626 | }, |
| 627 | disabled: `opacity-50`, |
| 628 | actions_container: 'absolute inset-y-0 right-0 pl-3 pr-1 flex space-x-1 items-center', |
| 629 | chevron_container: 'absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none', |
| 630 | chevron: 'h-5 w-5 text-foreground-muted', |
| 631 | option: ` |
| 632 | w-listbox |
| 633 | transition cursor-pointer select-none relative py-2 pl-3 pr-9 |
| 634 | text-foreground-light |
| 635 | text-sm |
| 636 | hover:bg-border-overlay |
| 637 | focus:bg-border-overlay |
| 638 | focus:text-foreground |
| 639 | border-none |
| 640 | focus:outline-hidden |
| 641 | `, |
| 642 | option_active: `text-foreground bg-selection`, |
| 643 | option_disabled: `cursor-not-allowed opacity-60`, |
| 644 | option_inner: `flex items-center space-x-3`, |
| 645 | option_check: `absolute inset-y-0 right-0 flex items-center pr-3 text-brand`, |
| 646 | option_check_active: `text-brand`, |
| 647 | option_check_icon: `h-5 w-5`, |
| 648 | }, |
| 649 | |
| 650 | inputErrorIcon: { |
| 651 | base: ` |
| 652 | flex items-center |
| 653 | right-3 pr-2 pl-2 |
| 654 | inset-y-0 |
| 655 | pointer-events-none |
| 656 | text-red-900 |
| 657 | `, |
| 658 | }, |
| 659 | |
| 660 | inputIconContainer: { |
| 661 | base: ` |
| 662 | absolute inset-y-0 |
| 663 | left-0 pl-2 flex |
| 664 | items-center pointer-events-none |
| 665 | text-foreground-light |
| 666 | [&_svg]:stroke-[1.5] |
| 667 | `, |
| 668 | size: { |
| 669 | tiny: '[&_svg]:h-[14px] [&_svg]:w-[14px]', |
| 670 | small: '[&_svg]:h-[18px] [&_svg]:w-[18px]', |
| 671 | medium: '[&_svg]:h-[20px] [&_svg]:w-[20px]', |
| 672 | large: '[&_svg]:h-[20px] [&_svg]:w-[20px] pl-3', |
| 673 | xlarge: '[&_svg]:h-[24px] [&_svg]:w-[24px] pl-3', |
| 674 | xxlarge: '[&_svg]:h-[30px] [&_svg]:w-[30px] pl-3', |
| 675 | xxxlarge: '[&_svg]:h-[42px] [&_svg]:w-[42px] pl-3', |
| 676 | }, |
| 677 | }, |
| 678 | |
| 679 | // Icon |
| 680 | |
| 681 | icon: { |
| 682 | container: `shrink-0 flex items-center justify-center rounded-full p-3`, |
| 683 | }, |
| 684 | |
| 685 | loading: { |
| 686 | base: `relative`, |
| 687 | content: { |
| 688 | base: `transition-opacity duration-300`, |
| 689 | active: `opacity-40`, |
| 690 | }, |
| 691 | spinner: ` |
| 692 | absolute |
| 693 | text-foreground-lighter animate-spin |
| 694 | inset-0 |
| 695 | size-5 |
| 696 | m-auto |
| 697 | `, |
| 698 | }, |
| 699 | } as const |