@imj_media/ui 1.10.9 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -1
  3. package/catalog/design-index.json +1546 -8
  4. package/catalog/install-registry.json +6812 -0
  5. package/package.json +2 -2
package/catalog/design-index.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
3
  "package": "@imj_media/ui",
4
- "version": "1.10.9",
5
- "indexedAt": "2026-05-29T19:39:05.304Z",
4
+ "version": "1.11.0",
5
+ "indexedAt": "2026-06-02T22:55:22.246Z",
6
6
  "orbitTokensVersion": "1.3.1",
7
7
  "modules": [
8
8
  {
@@ -445,7 +445,398 @@
445
445
  "import { faShapes } from '@fortawesome/pro-regular-svg-icons';\n import { Dropdown } from '@/modules/Dropdown';\n\n <Dropdown\n field={{ label: 'Tipo de Indoor padre', placeholder: 'Selecciona uno...' }}\n slots={{ leftSlot: faShapes }}\n popover={{ fullWidth: true, popoverZIndex: 1300 }}\n menuSearch={{ searchable: true, searchPlaceholder: 'Buscar...' }}\n items={{ options: opciones }}\n multi={{\n multiple: true,\n selectionSummary: 'tags',\n tagsOverflow: 'single-line',\n tagsOverflowPopoverTitle: 'Tipos InDoor padre',\n tagsOverflowPopoverZIndex: 1300,\n }}\n checkbox={{\n withCheckbox: true,\n checkboxSelectionTone: 'subtle',\n checkboxPosition: 'end',\n checkboxListDensity: 'compact',\n }}\n values={{ value: tiposPadreSeleccionIds }}\n events={{ onValueChange: (v) => { /* ... */ } }}\n />",
446
446
  "import { useState } from 'react';\n import { Dropdown } from '@/modules/Dropdown';\n\n const options = [\n { label: 'Bonnie Green', value: '1', avatarUrl: 'https://i.pravatar.cc/32?img=5' },\n // …\n ];\n\n export default function Example() {\n const [selectedValues, setSelectedValues] = useState(['1', '2', '3', '4', '5', '6']);\n\n return (\n <Dropdown\n field={{ label: 'Usuarios', placeholder: 'Buscar...' }}\n items={{ options }}\n values={{ value: selectedValues }}\n events={{ onValueChange: (v) => Array.isArray(v) && setSelectedValues(v) }}\n multi={{\n multiple: true,\n selectionSummary: 'tags',\n tagsOverflow: 'single-line',\n tagsOverflowPopoverTitle: 'Tipos de medio',\n }}\n checkbox={{\n withCheckbox: true,\n checkboxSelectionTone: 'subtle',\n checkboxPosition: 'end',\n checkboxListDensity: 'compact',\n }}\n menuSearch={{ searchable: true, searchPlaceholder: 'Buscar...' }}\n />\n );\n }",
447
447
  "<Dropdown\n field={{ label: 'Plazas', placeholder: 'Seleccionar…' }}\n items={{ options }}\n values={{ value: selectedValues }}\n events={{ onValueChange: (v) => Array.isArray(v) && setSelectedValues(v) }}\n multi={{\n multiple: true,\n selectionSummary: 'tags',\n tagsOverflow: 'single-line',\n tagsOverflowPopoverTitle: 'Plazas seleccionadas',\n }}\n list={{\n listVariant: 'search-multi-checkbox',\n searchMultiCheckbox: {\n search: { placeholder: 'Buscar plaza…', show: true },\n header: { id: 'all-plazas', label: 'Todas las plazas' },\n showClearSelection: true,\n },\n }}\n menuSearch={{ searchable: false }}\n />\n {/* Sin buscador en lista: searchMultiCheckbox.search.show: false */}\n {/* Sin botón «Limpiar selección»: searchMultiCheckbox.showClearSelection: false */}"
448
- ]
448
+ ],
449
+ "props": {
450
+ "groups": {
451
+ "dropdownEvents": {
452
+ "props": {
453
+ "onValueChange": {
454
+ "name": "onValueChange",
455
+ "type": "(value: string | number | (string | number)[]) => void",
456
+ "required": false
457
+ },
458
+ "onOptionSelect": {
459
+ "name": "onOptionSelect",
460
+ "type": "(option: DropdownOption) => void",
461
+ "required": false
462
+ },
463
+ "onCheckboxChange": {
464
+ "name": "onCheckboxChange",
465
+ "type": "(option: DropdownOption, checked: boolean) => void",
466
+ "required": false
467
+ },
468
+ "onToggleChange": {
469
+ "name": "onToggleChange",
470
+ "type": "(option: DropdownOption, checked: boolean) => void",
471
+ "required": false
472
+ },
473
+ "onHandleAccept": {
474
+ "name": "onHandleAccept",
475
+ "type": "(selectedOptions: DropdownOption[]) => void",
476
+ "required": false
477
+ }
478
+ }
479
+ }
480
+ },
481
+ "deprecatedRoot": [
482
+ {
483
+ "name": "label",
484
+ "migrateTo": "`field",
485
+ "type": "string"
486
+ },
487
+ {
488
+ "name": "error",
489
+ "migrateTo": "`field",
490
+ "type": "string"
491
+ },
492
+ {
493
+ "name": "helperText",
494
+ "migrateTo": "`field",
495
+ "type": "string"
496
+ },
497
+ {
498
+ "name": "infoTooltip",
499
+ "migrateTo": "`tooltip",
500
+ "type": "string"
501
+ },
502
+ {
503
+ "name": "size",
504
+ "migrateTo": "`field",
505
+ "type": "InputSize"
506
+ },
507
+ {
508
+ "name": "color",
509
+ "migrateTo": "`field",
510
+ "type": "Colors"
511
+ },
512
+ {
513
+ "name": "leftSlot",
514
+ "migrateTo": "`slots",
515
+ "type": "VisualSlotType"
516
+ },
517
+ {
518
+ "name": "rightSlot",
519
+ "migrateTo": "`slots",
520
+ "type": "VisualSlotType"
521
+ },
522
+ {
523
+ "name": "searchPlaceholder",
524
+ "migrateTo": "`menuSearch",
525
+ "type": "string"
526
+ },
527
+ {
528
+ "name": "noResultsText",
529
+ "migrateTo": "`menuSearch",
530
+ "type": "string"
531
+ },
532
+ {
533
+ "name": "noResultsDescription",
534
+ "migrateTo": "`menuSearch",
535
+ "type": "string"
536
+ },
537
+ {
538
+ "name": "caret",
539
+ "migrateTo": "`field",
540
+ "type": "boolean"
541
+ },
542
+ {
543
+ "name": "defaultValue",
544
+ "migrateTo": "`values",
545
+ "type": "string | number | (string | number)[]"
546
+ },
547
+ {
548
+ "name": "placeholder",
549
+ "migrateTo": "`field",
550
+ "type": "string"
551
+ },
552
+ {
553
+ "name": "options",
554
+ "migrateTo": "`items",
555
+ "type": "DropdownOption[]"
556
+ },
557
+ {
558
+ "name": "value",
559
+ "migrateTo": "`values",
560
+ "type": "string | number | (string | number)[]"
561
+ },
562
+ {
563
+ "name": "valueName",
564
+ "migrateTo": "`items",
565
+ "type": "string"
566
+ },
567
+ {
568
+ "name": "idName",
569
+ "migrateTo": "`items",
570
+ "type": "string"
571
+ },
572
+ {
573
+ "name": "onValueChange",
574
+ "migrateTo": "`events",
575
+ "type": "(value: string | number | (string | number)[]) => void"
576
+ },
577
+ {
578
+ "name": "onOptionSelect",
579
+ "migrateTo": "`events",
580
+ "type": "(option: DropdownOption) => void"
581
+ },
582
+ {
583
+ "name": "onCheckboxChange",
584
+ "migrateTo": "`events",
585
+ "type": "(option: DropdownOption, checked: boolean) => void"
586
+ },
587
+ {
588
+ "name": "searchable",
589
+ "migrateTo": "`menuSearch",
590
+ "type": "boolean"
591
+ },
592
+ {
593
+ "name": "maxHeight",
594
+ "migrateTo": "`popover",
595
+ "type": "string"
596
+ },
597
+ {
598
+ "name": "closeOnClickOutside",
599
+ "migrateTo": "`popover",
600
+ "type": "boolean"
601
+ },
602
+ {
603
+ "name": "dropdownId",
604
+ "migrateTo": "`popover",
605
+ "type": "string"
606
+ },
607
+ {
608
+ "name": "fullWidth",
609
+ "migrateTo": "`popover",
610
+ "type": "boolean"
611
+ },
612
+ {
613
+ "name": "auto",
614
+ "migrateTo": "`popover",
615
+ "type": "boolean"
616
+ },
617
+ {
618
+ "name": "multiple",
619
+ "migrateTo": "`multi",
620
+ "type": "boolean"
621
+ },
622
+ {
623
+ "name": "maxSelectedItems",
624
+ "migrateTo": "`multi",
625
+ "type": "number"
626
+ },
627
+ {
628
+ "name": "selectionSummary",
629
+ "migrateTo": "`multi",
630
+ "type": "DropdownSelectionSummary"
631
+ },
632
+ {
633
+ "name": "selectedItemsDisplay",
634
+ "migrateTo": "`multi",
635
+ "type": "DropdownSelectionSummary"
636
+ },
637
+ {
638
+ "name": "tagsOverflow",
639
+ "migrateTo": "`multi",
640
+ "type": "DropdownTagsOverflow"
641
+ },
642
+ {
643
+ "name": "tagsOverflowPopoverPlacement",
644
+ "migrateTo": "`multi",
645
+ "type": "'top' | 'bottom'"
646
+ },
647
+ {
648
+ "name": "tagsOverflowPopoverZIndex",
649
+ "migrateTo": "`multi",
650
+ "type": "number"
651
+ },
652
+ {
653
+ "name": "tagsOverflowPopoverTitle",
654
+ "migrateTo": "`multi",
655
+ "type": "string"
656
+ },
657
+ {
658
+ "name": "preventDeselectFromOptionsList",
659
+ "migrateTo": "`multi",
660
+ "type": "boolean"
661
+ },
662
+ {
663
+ "name": "showTriggerClearButton",
664
+ "migrateTo": "`multi",
665
+ "type": "boolean"
666
+ },
667
+ {
668
+ "name": "absolute",
669
+ "migrateTo": "`popover",
670
+ "type": "boolean"
671
+ },
672
+ {
673
+ "name": "popoverZIndex",
674
+ "migrateTo": "`popover",
675
+ "type": "number"
676
+ },
677
+ {
678
+ "name": "footer",
679
+ "migrateTo": "`popover",
680
+ "type": "boolean"
681
+ },
682
+ {
683
+ "name": "defaultOptionSelected",
684
+ "migrateTo": "`items",
685
+ "type": "boolean"
686
+ },
687
+ {
688
+ "name": "withCheckbox",
689
+ "migrateTo": "`checkbox",
690
+ "type": "boolean"
691
+ },
692
+ {
693
+ "name": "checkboxSelectionTone",
694
+ "migrateTo": "`checkbox",
695
+ "type": "ListItemCheckboxSelectionTone"
696
+ },
697
+ {
698
+ "name": "checkboxPosition",
699
+ "migrateTo": "`checkbox",
700
+ "type": "'start' | 'end'"
701
+ },
702
+ {
703
+ "name": "checkboxListDensity",
704
+ "migrateTo": "`checkbox",
705
+ "type": "'default' | 'compact'"
706
+ },
707
+ {
708
+ "name": "hasCurrent",
709
+ "migrateTo": "`values",
710
+ "type": "boolean"
711
+ },
712
+ {
713
+ "name": "onHandleAccept",
714
+ "migrateTo": "`events",
715
+ "type": "(selectedOptions: DropdownOption[]) => void"
716
+ },
717
+ {
718
+ "name": "pill",
719
+ "migrateTo": "`slots",
720
+ "type": "PillSize"
721
+ },
722
+ {
723
+ "name": "listVariant",
724
+ "migrateTo": "`list",
725
+ "type": "DropdownListVariant"
726
+ },
727
+ {
728
+ "name": "searchMultiCheckbox",
729
+ "migrateTo": "`list",
730
+ "jsdoc": "```tsx\n <Dropdown\n list={{\n listVariant: 'search-multi-checkbox',\n searchMultiCheckbox: {\n search: { placeholder: 'Buscar plaza…' },\n header: { id: 'all-plazas', label: 'Todas las plazas' },\n showClearSelection: true,\n },\n }}\n multi={{ multiple: true }}\n items={{ options }}\n menuSearch={{ searchable: false }}\n />\n ```",
731
+ "type": "DropdownSearchMultiCheckboxConfig"
732
+ },
733
+ {
734
+ "name": "searchMultiCheckboxHeader",
735
+ "migrateTo": "`list",
736
+ "type": "{ id: string"
737
+ },
738
+ {
739
+ "name": "searchMultiCheckboxShowSearch",
740
+ "type": "boolean"
741
+ },
742
+ {
743
+ "name": "searchMultiCheckboxShowClearSelection",
744
+ "type": "boolean"
745
+ },
746
+ {
747
+ "name": "onToggleChange",
748
+ "migrateTo": "`events",
749
+ "type": "(option: DropdownOption, checked: boolean) => void"
750
+ },
751
+ {
752
+ "name": "filtersTitle",
753
+ "migrateTo": "`list",
754
+ "type": "string"
755
+ },
756
+ {
757
+ "name": "tooltipProps",
758
+ "migrateTo": "`tooltip",
759
+ "type": "ButtonTooltipConfig"
760
+ },
761
+ {
762
+ "name": "loading",
763
+ "migrateTo": "`status",
764
+ "type": "boolean"
765
+ }
766
+ ],
767
+ "flat": {
768
+ "field": {
769
+ "name": "field",
770
+ "type": "Partial<DropdownFieldProps>",
771
+ "required": false
772
+ },
773
+ "tooltip": {
774
+ "name": "tooltip",
775
+ "type": "Partial<DropdownHintProps>",
776
+ "required": false
777
+ },
778
+ "slots": {
779
+ "name": "slots",
780
+ "type": "Partial<DropdownSlotsProps>",
781
+ "required": false
782
+ },
783
+ "items": {
784
+ "name": "items",
785
+ "type": "Partial<DropdownItemsProps>",
786
+ "required": false
787
+ },
788
+ "values": {
789
+ "name": "values",
790
+ "type": "Partial<DropdownValuesProps>",
791
+ "required": false
792
+ },
793
+ "menuSearch": {
794
+ "name": "menuSearch",
795
+ "type": "Partial<DropdownMenuSearchProps>",
796
+ "required": false
797
+ },
798
+ "multi": {
799
+ "name": "multi",
800
+ "type": "Partial<DropdownMultiProps>",
801
+ "required": false
802
+ },
803
+ "popover": {
804
+ "name": "popover",
805
+ "type": "Partial<DropdownPopoverProps>",
806
+ "required": false
807
+ },
808
+ "checkbox": {
809
+ "name": "checkbox",
810
+ "type": "Partial<DropdownCheckboxProps>",
811
+ "required": false
812
+ },
813
+ "list": {
814
+ "name": "list",
815
+ "type": "Partial<DropdownListBlockProps>",
816
+ "required": false
817
+ },
818
+ "events": {
819
+ "name": "events",
820
+ "type": "Partial<DropdownEventsProps>",
821
+ "required": false
822
+ },
823
+ "status": {
824
+ "name": "status",
825
+ "type": "Partial<DropdownStatusProps>",
826
+ "required": false
827
+ },
828
+ "disabled": {
829
+ "name": "disabled",
830
+ "type": "boolean",
831
+ "required": false
832
+ },
833
+ "label": {
834
+ "name": "label",
835
+ "type": "string }",
836
+ "required": true
837
+ }
838
+ }
839
+ }
449
840
  }
450
841
  ]
451
842
  },
@@ -1064,7 +1455,170 @@
1064
1455
  "import { faEye } from '@fortawesome/pro-regular-svg-icons';\n\n<Icon name={faEye} size=\"xs\" color=\"blue\" />\n<Icon name={faEye} size=\"sm\" color=\"blue\" />\n<Icon name={faEye} size=\"md\" color=\"blue\" />\n<Icon name={faEye} size=\"lg\" color=\"blue\" />",
1065
1456
  "import { faEye } from '@fortawesome/pro-regular-svg-icons';\n\n<Icon name={faEye} size=\"lg\" color=\"blue\" />\n<Icon name={faEye} size=\"lg\" color=\"default\" />\n<Icon name={faEye} size=\"lg\" color=\"red\" />\n<Icon name={faEye} size=\"lg\" color=\"green\" />\n<Icon name={faEye} size=\"lg\" color=\"yellow\" />\n<Icon name={faEye} size=\"lg\" color=\"current\" />\n<Icon name={faEye} size=\"lg\" color=\"brand\" />",
1066
1457
  "import { faHome, faSearch, faBell, faUser, faCog, faStar } from '@fortawesome/pro-regular-svg-icons';\n\n<Icon name={faHome} size=\"md\" color=\"blue\" />\n<Icon name={faSearch} size=\"md\" color=\"default\" />\n<Icon name={faBell} size=\"md\" color=\"red\" />\n<Icon name={faUser} size=\"md\" color=\"green\" />\n<Icon name={faCog} size=\"md\" color=\"yellow\" />\n<Icon name={faStar} size=\"md\" color=\"blue\" />"
1067
- ]
1458
+ ],
1459
+ "props": {
1460
+ "groups": {
1461
+ "icon": {
1462
+ "props": {
1463
+ "name": {
1464
+ "name": "name",
1465
+ "type": "AnyIconDefinition",
1466
+ "required": true
1467
+ },
1468
+ "size": {
1469
+ "name": "size",
1470
+ "type": "IconFontSize",
1471
+ "required": false
1472
+ },
1473
+ "color": {
1474
+ "name": "color",
1475
+ "type": "IconFontColor",
1476
+ "required": false
1477
+ },
1478
+ "className": {
1479
+ "name": "className",
1480
+ "type": "string",
1481
+ "required": false
1482
+ },
1483
+ "onClick": {
1484
+ "name": "onClick",
1485
+ "type": "(e: React.MouseEvent<HTMLDivElement>) => void",
1486
+ "required": false
1487
+ },
1488
+ "background": {
1489
+ "name": "background",
1490
+ "type": "boolean",
1491
+ "required": false
1492
+ },
1493
+ "fondo": {
1494
+ "name": "fondo",
1495
+ "type": "semánticos (`success`, `danger`, `white`, `blue`, …) o clase `ui-bg-*`. */",
1496
+ "required": true
1497
+ },
1498
+ "backgroundColor": {
1499
+ "name": "backgroundColor",
1500
+ "type": "IconBackgroundColor",
1501
+ "required": false
1502
+ },
1503
+ "backgroundSize": {
1504
+ "name": "backgroundSize",
1505
+ "type": "VisualSize",
1506
+ "required": false
1507
+ },
1508
+ "padding": {
1509
+ "name": "padding",
1510
+ "type": "'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'",
1511
+ "required": false
1512
+ },
1513
+ "style": {
1514
+ "name": "style",
1515
+ "type": "React.CSSProperties & Record<string, unknown>",
1516
+ "required": false
1517
+ },
1518
+ "colorDuotonePrimary": {
1519
+ "name": "colorDuotonePrimary",
1520
+ "type": "IconFontColor",
1521
+ "required": false
1522
+ },
1523
+ "colorDuotoneSecondary": {
1524
+ "name": "colorDuotoneSecondary",
1525
+ "type": "IconFontColor",
1526
+ "required": false
1527
+ },
1528
+ "opacityDuotonePrimary": {
1529
+ "name": "opacityDuotonePrimary",
1530
+ "type": "number",
1531
+ "required": false
1532
+ },
1533
+ "opacityDuotoneSecondary": {
1534
+ "name": "opacityDuotoneSecondary",
1535
+ "type": "number",
1536
+ "required": false
1537
+ }
1538
+ }
1539
+ }
1540
+ },
1541
+ "deprecatedRoot": [],
1542
+ "flat": {
1543
+ "name": {
1544
+ "name": "name",
1545
+ "type": "AnyIconDefinition",
1546
+ "required": true,
1547
+ "description": "Nombre del icono a mostrar"
1548
+ },
1549
+ "size": {
1550
+ "name": "size",
1551
+ "type": "IconFontSize",
1552
+ "required": false,
1553
+ "description": "Tamaño del icono"
1554
+ },
1555
+ "color": {
1556
+ "name": "color",
1557
+ "type": "IconFontColor",
1558
+ "required": false,
1559
+ "description": "Color del icono"
1560
+ },
1561
+ "className": {
1562
+ "name": "className",
1563
+ "type": "string",
1564
+ "required": false,
1565
+ "description": "Clases CSS adicionales"
1566
+ },
1567
+ "onClick": {
1568
+ "name": "onClick",
1569
+ "type": "(e: React.MouseEvent<HTMLDivElement>) => void",
1570
+ "required": false
1571
+ },
1572
+ "background": {
1573
+ "name": "background",
1574
+ "type": "boolean",
1575
+ "required": false,
1576
+ "description": "Si el icono tiene un fondo"
1577
+ },
1578
+ "backgroundColor": {
1579
+ "name": "backgroundColor",
1580
+ "type": "IconBackgroundColor",
1581
+ "required": false,
1582
+ "description": "Color del fondo: semánticos (`success`, `danger`, `white`, `blue`, …) o clase `ui-bg-`."
1583
+ },
1584
+ "backgroundSize": {
1585
+ "name": "backgroundSize",
1586
+ "type": "VisualSize",
1587
+ "required": false,
1588
+ "description": "Tamaño del fondo del icono"
1589
+ },
1590
+ "padding": {
1591
+ "name": "padding",
1592
+ "type": "'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'",
1593
+ "required": false
1594
+ },
1595
+ "style": {
1596
+ "name": "style",
1597
+ "type": "React.CSSProperties & Record<string, unknown>",
1598
+ "required": false
1599
+ },
1600
+ "colorDuotonePrimary": {
1601
+ "name": "colorDuotonePrimary",
1602
+ "type": "IconFontColor",
1603
+ "required": false
1604
+ },
1605
+ "colorDuotoneSecondary": {
1606
+ "name": "colorDuotoneSecondary",
1607
+ "type": "IconFontColor",
1608
+ "required": false
1609
+ },
1610
+ "opacityDuotonePrimary": {
1611
+ "name": "opacityDuotonePrimary",
1612
+ "type": "number",
1613
+ "required": false
1614
+ },
1615
+ "opacityDuotoneSecondary": {
1616
+ "name": "opacityDuotoneSecondary",
1617
+ "type": "number",
1618
+ "required": false
1619
+ }
1620
+ }
1621
+ }
1068
1622
  }
1069
1623
  ]
1070
1624
  },
@@ -1105,7 +1659,403 @@
1105
1659
  "import { InnerButton } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n <InnerButton color=\"primary\" icon={faImage} />\n <InnerButton color=\"secondary\" icon={faImage} />\n <InnerButton color=\"tertiary\" icon={faImage} />\n <InnerButton color=\"destructive\" icon={faImage} />\n </div>\n <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n <InnerButton color=\"primary\" icon={faImage} pill=\"xs\" />\n <InnerButton color=\"secondary\" icon={faImage} pill=\"xs\" />\n <InnerButton color=\"tertiary\" icon={faImage} pill=\"xs\" />\n <InnerButton color=\"destructive\" icon={faImage} pill=\"xs\" />\n </div>\n <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n <InnerButton color=\"primary\" icon={faImage} pill=\"sm\" />\n <InnerButton color=\"secondary\" icon={faImage} pill=\"sm\" />\n <InnerButton color=\"tertiary\" icon={faImage} pill=\"sm\" />\n <InnerButton color=\"destructive\" icon={faImage} pill=\"sm\" />\n </div>\n <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n <InnerButton color=\"primary\" icon={faImage} pill=\"md\" />\n <InnerButton color=\"secondary\" icon={faImage} pill=\"md\" />\n <InnerButton color=\"tertiary\" icon={faImage} pill=\"md\" />\n <InnerButton color=\"destructive\" icon={faImage} pill=\"md\" />\n </div>\n <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n <InnerButton color=\"primary\" icon={faImage} pill=\"lg\" />\n <InnerButton color=\"secondary\" icon={faImage} pill=\"lg\" />\n <InnerButton color=\"tertiary\" icon={faImage} pill=\"lg\" />\n <InnerButton color=\"destructive\" icon={faImage} pill=\"lg\" />\n </div>\n <div className=\"ui-flex ui-flex-wrap ui-gap-8\">\n <InnerButton color=\"primary\" icon={faImage} pill=\"pill\" />\n <InnerButton color=\"secondary\" icon={faImage} pill=\"pill\" />\n <InnerButton color=\"tertiary\" icon={faImage} pill=\"pill\" />\n <InnerButton color=\"destructive\" icon={faImage} pill=\"pill\" />\n </div>\n </>\n )\n }",
1106
1660
  "import { InnerButton } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n <InnerButton color=\"primary\" tooltip=\"Tooltip\">Blue</InnerButton>\n <InnerButton color=\"secondary\" tooltip=\"Tooltip\">Red</InnerButton>\n <InnerButton color=\"tertiary\" tooltip=\"Tooltip\">Green</InnerButton>\n <InnerButton color=\"destructive\" tooltip=\"Tooltip\">Orange</InnerButton>\n <InnerButton color=\"primary\" tooltip=\"Tooltip\">White</InnerButton>\n </>\n )\n }",
1107
1661
  "<InnerButton color=\"primary\" theme='solid'>\n Primary\n </InnerButton>"
1108
- ]
1662
+ ],
1663
+ "props": {
1664
+ "groups": {},
1665
+ "deprecatedRoot": [
1666
+ {
1667
+ "name": "badgeColor",
1668
+ "migrateTo": "`badge",
1669
+ "type": "BadgeColor"
1670
+ },
1671
+ {
1672
+ "name": "badgeLabel",
1673
+ "migrateTo": "`badge",
1674
+ "type": "string"
1675
+ },
1676
+ {
1677
+ "name": "badgeIcon",
1678
+ "migrateTo": "`badge",
1679
+ "type": "IconType | AnyIconDefinition"
1680
+ },
1681
+ {
1682
+ "name": "badgeLoading",
1683
+ "migrateTo": "`badge",
1684
+ "jsdoc": "Si es true, muestra un spinner de carga en el badge.",
1685
+ "type": "boolean"
1686
+ },
1687
+ {
1688
+ "name": "colorIcon",
1689
+ "migrateTo": "`iconProps",
1690
+ "type": "IconFontColor"
1691
+ },
1692
+ {
1693
+ "name": "iconDuotonePrimary",
1694
+ "migrateTo": "iconProps",
1695
+ "type": "IconFontColor"
1696
+ },
1697
+ {
1698
+ "name": "iconDuotoneSecondary",
1699
+ "migrateTo": "iconProps",
1700
+ "type": "IconFontColor"
1701
+ },
1702
+ {
1703
+ "name": "iconDuotoneOpacityPrimary",
1704
+ "migrateTo": "iconProps",
1705
+ "type": "number"
1706
+ },
1707
+ {
1708
+ "name": "iconDuotoneOpacitySecondary",
1709
+ "migrateTo": "iconProps",
1710
+ "type": "number"
1711
+ },
1712
+ {
1713
+ "name": "leftSlotDuotonePrimary",
1714
+ "migrateTo": "leftSlotProps",
1715
+ "type": "IconFontColor"
1716
+ },
1717
+ {
1718
+ "name": "leftSlotDuotoneSecondary",
1719
+ "migrateTo": "leftSlotProps",
1720
+ "type": "IconFontColor"
1721
+ },
1722
+ {
1723
+ "name": "leftSlotDuotoneOpacityPrimary",
1724
+ "migrateTo": "leftSlotProps",
1725
+ "type": "number"
1726
+ },
1727
+ {
1728
+ "name": "leftSlotDuotoneOpacitySecondary",
1729
+ "migrateTo": "leftSlotProps",
1730
+ "type": "number"
1731
+ },
1732
+ {
1733
+ "name": "rightSlotDuotonePrimary",
1734
+ "migrateTo": "rightSlotProps",
1735
+ "type": "IconFontColor"
1736
+ },
1737
+ {
1738
+ "name": "rightSlotDuotoneSecondary",
1739
+ "migrateTo": "rightSlotProps",
1740
+ "type": "IconFontColor"
1741
+ },
1742
+ {
1743
+ "name": "rightSlotDuotoneOpacityPrimary",
1744
+ "migrateTo": "rightSlotProps",
1745
+ "type": "number"
1746
+ },
1747
+ {
1748
+ "name": "rightSlotDuotoneOpacitySecondary",
1749
+ "migrateTo": "rightSlotProps",
1750
+ "type": "number"
1751
+ },
1752
+ {
1753
+ "name": "onClickIcon",
1754
+ "migrateTo": "`iconProps",
1755
+ "type": "(e: React.MouseEvent<HTMLDivElement>) => void"
1756
+ },
1757
+ {
1758
+ "name": "onClickLeftSlot",
1759
+ "migrateTo": "`leftSlotProps",
1760
+ "type": "(e: React.MouseEvent<HTMLDivElement>) => void"
1761
+ },
1762
+ {
1763
+ "name": "onClickRightSlot",
1764
+ "migrateTo": "`rightSlotProps",
1765
+ "type": "(e: React.MouseEvent<HTMLDivElement>) => void"
1766
+ },
1767
+ {
1768
+ "name": "tooltipPosition",
1769
+ "migrateTo": "tooltip como objeto o tooltipProps",
1770
+ "type": "TooltipPosition"
1771
+ },
1772
+ {
1773
+ "name": "tooltipAlignment",
1774
+ "migrateTo": "tooltip como objeto o tooltipProps",
1775
+ "type": "TooltipAlignment"
1776
+ },
1777
+ {
1778
+ "name": "tooltipColor",
1779
+ "migrateTo": "tooltip como objeto o tooltipProps",
1780
+ "type": "TooltipColors"
1781
+ },
1782
+ {
1783
+ "name": "tooltipDelay",
1784
+ "migrateTo": "tooltip como objeto o tooltipProps",
1785
+ "type": "number"
1786
+ },
1787
+ {
1788
+ "name": "tooltipAbsolute",
1789
+ "migrateTo": "tooltip como objeto o tooltipProps",
1790
+ "type": "boolean"
1791
+ },
1792
+ {
1793
+ "name": "defaultTooltipColor",
1794
+ "migrateTo": "tooltip como objeto o tooltipProps",
1795
+ "type": "boolean"
1796
+ },
1797
+ {
1798
+ "name": "classNameTooltip",
1799
+ "migrateTo": "tooltip como objeto o tooltipProps",
1800
+ "type": "string"
1801
+ },
1802
+ {
1803
+ "name": "classNameIcon",
1804
+ "migrateTo": "`iconProps",
1805
+ "type": "string"
1806
+ }
1807
+ ],
1808
+ "flat": {
1809
+ "className": {
1810
+ "name": "className",
1811
+ "type": "string",
1812
+ "required": false
1813
+ },
1814
+ "disabled": {
1815
+ "name": "disabled",
1816
+ "type": "boolean",
1817
+ "required": false
1818
+ },
1819
+ "classNameLabel": {
1820
+ "name": "classNameLabel",
1821
+ "type": "string",
1822
+ "required": false
1823
+ },
1824
+ "theme": {
1825
+ "name": "theme",
1826
+ "type": "ButtonTheme",
1827
+ "required": false,
1828
+ "description": "Tema visual del botón (`solid` o variante `icon` deprecada).\n Preferir `solid` y botón solo icono vía `icon` + sin `children`."
1829
+ },
1830
+ "rounded": {
1831
+ "name": "rounded",
1832
+ "type": "boolean",
1833
+ "required": false
1834
+ },
1835
+ "clickable": {
1836
+ "name": "clickable",
1837
+ "type": "boolean",
1838
+ "required": false
1839
+ },
1840
+ "square": {
1841
+ "name": "square",
1842
+ "type": "boolean",
1843
+ "required": false
1844
+ },
1845
+ "badgeTheme": {
1846
+ "name": "badgeTheme",
1847
+ "type": "BadgeTheme",
1848
+ "required": false
1849
+ },
1850
+ "badgeSize": {
1851
+ "name": "badgeSize",
1852
+ "type": "BadgeSize",
1853
+ "required": false
1854
+ },
1855
+ "badgeStroke": {
1856
+ "name": "badgeStroke",
1857
+ "type": "boolean",
1858
+ "required": false
1859
+ },
1860
+ "badgeIconDuotonePrimary": {
1861
+ "name": "badgeIconDuotonePrimary",
1862
+ "type": "IconFontColor",
1863
+ "required": false
1864
+ },
1865
+ "badgeIconDuotoneSecondary": {
1866
+ "name": "badgeIconDuotoneSecondary",
1867
+ "type": "IconFontColor",
1868
+ "required": false
1869
+ },
1870
+ "badgeIconDuotoneOpacityPrimary": {
1871
+ "name": "badgeIconDuotoneOpacityPrimary",
1872
+ "type": "number",
1873
+ "required": false
1874
+ },
1875
+ "badgeIconDuotoneOpacitySecondary": {
1876
+ "name": "badgeIconDuotoneOpacitySecondary",
1877
+ "type": "number",
1878
+ "required": false
1879
+ },
1880
+ "color": {
1881
+ "name": "color",
1882
+ "type": "ButtonColors",
1883
+ "required": false
1884
+ },
1885
+ "icon": {
1886
+ "name": "icon",
1887
+ "type": "VisualSlotType | React.ReactElement | ButtonIconConfig",
1888
+ "required": false,
1889
+ "description": "Icono principal del botón.\n Puede ser un string simple (ej: \"ImageOutlined\"), un ReactElement, o un objeto de configuración completo.\n Si se usa como string simple (sin estilos personalizados), funciona sin deprecación.\n Si se usa como objeto de configuración, tiene la misma funcionalidad que iconProps.\n Para estilos personalizados con props separadas, usar iconProps."
1890
+ },
1891
+ "DEPRECADAS": {
1892
+ "name": "DEPRECADAS",
1893
+ "type": "usar tooltip como objeto o tooltipProps en su lugar",
1894
+ "required": true
1895
+ },
1896
+ "leftSlot": {
1897
+ "name": "leftSlot",
1898
+ "type": "VisualSlotType | ButtonSlotConfig",
1899
+ "required": false,
1900
+ "description": "Slot izquierdo del botón.\n Puede ser un string simple (ej: \"EditOutlined\"), un ReactElement, o un objeto de configuración completo.\n Si se usa como string simple (sin estilos personalizados), funciona sin deprecación.\n Si se usa como objeto de configuración, tiene la misma funcionalidad que leftSlotProps.\n Para estilos personalizados con props separadas, usar leftSlotProps."
1901
+ },
1902
+ "rightSlot": {
1903
+ "name": "rightSlot",
1904
+ "type": "VisualSlotType | ButtonSlotConfig",
1905
+ "required": false,
1906
+ "description": "Slot derecho del botón.\n Puede ser un string simple (ej: \"ArrowRightOutlined\"), un ReactElement, o un objeto de configuración completo.\n Si se usa como string simple (sin estilos personalizados), funciona sin deprecación.\n Si se usa como objeto de configuración, tiene la misma funcionalidad que rightSlotProps.\n Para estilos personalizados con props separadas, usar rightSlotProps."
1907
+ },
1908
+ "fullWidth": {
1909
+ "name": "fullWidth",
1910
+ "type": "boolean",
1911
+ "required": false
1912
+ },
1913
+ "size": {
1914
+ "name": "size",
1915
+ "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'",
1916
+ "required": false
1917
+ },
1918
+ "iconSizeExtended": {
1919
+ "name": "iconSizeExtended",
1920
+ "type": "'none' | VisualSize",
1921
+ "required": false
1922
+ },
1923
+ "link": {
1924
+ "name": "link",
1925
+ "type": "string",
1926
+ "required": false
1927
+ },
1928
+ "borderable": {
1929
+ "name": "borderable",
1930
+ "type": "boolean | undefined",
1931
+ "required": false
1932
+ },
1933
+ "target": {
1934
+ "name": "target",
1935
+ "type": "string",
1936
+ "required": false
1937
+ },
1938
+ "type": {
1939
+ "name": "type",
1940
+ "type": "React.ButtonHTMLAttributes<HTMLButtonElement>['type']",
1941
+ "required": false,
1942
+ "description": "Atributo nativo `type` del `<button>` (`button`, `submit`, `reset`).\n Solo aplica cuando el componente se renderiza como `<button>` (sin `link`, y `as` distinto de `div`)."
1943
+ },
1944
+ "defaultSizeIcon": {
1945
+ "name": "defaultSizeIcon",
1946
+ "type": "boolean",
1947
+ "required": false
1948
+ },
1949
+ "as": {
1950
+ "name": "as",
1951
+ "type": "'button' | 'div'",
1952
+ "required": false
1953
+ },
1954
+ "classNameId": {
1955
+ "name": "classNameId",
1956
+ "type": "string",
1957
+ "required": false
1958
+ },
1959
+ "showShadow": {
1960
+ "name": "showShadow",
1961
+ "type": "boolean",
1962
+ "required": false
1963
+ },
1964
+ "tooltip": {
1965
+ "name": "tooltip",
1966
+ "type": "string | ButtonTooltipConfig",
1967
+ "required": false,
1968
+ "description": "Tooltip del botón.\n Puede ser un string simple o un objeto de configuración completo.\n Si se usa como string simple (sin estilos personalizados), funciona sin deprecación.\n Si se usa como objeto de configuración, tiene la misma funcionalidad que tooltipProps.\n Para estilos personalizados con props separadas, usar tooltipProps."
1969
+ },
1970
+ "stopPropagation": {
1971
+ "name": "stopPropagation",
1972
+ "type": "boolean",
1973
+ "required": false
1974
+ },
1975
+ "pointer": {
1976
+ "name": "pointer",
1977
+ "type": "boolean",
1978
+ "required": false
1979
+ },
1980
+ "textColor": {
1981
+ "name": "textColor",
1982
+ "type": "ButtonColors",
1983
+ "required": false
1984
+ },
1985
+ "textAlign": {
1986
+ "name": "textAlign",
1987
+ "type": "'left' | 'center' | 'right'",
1988
+ "required": false
1989
+ },
1990
+ "slotLayout": {
1991
+ "name": "slotLayout",
1992
+ "type": "ButtonSlotLayout",
1993
+ "required": false,
1994
+ "description": "Distribución de `leftSlot` / `rightSlot` respecto al texto.\n - `inline` (por defecto): iconos y texto forman un grupo centrado (comportamiento histórico).\n - `{ var: 'spread', textAlign? }`: iconos en extremos; el bloque de texto usa `textAlign` (`left` | `center` | `right`).\n Si omites `textAlign` en el objeto, se usa heurística: ambos slots → `center`; solo izquierda → `right`; solo derecha → `left`.\n La prop raíz `textAlign` del botón, si se define, tiene prioridad sobre `slotLayout.textAlign`."
1995
+ },
1996
+ "whiteBackground": {
1997
+ "name": "whiteBackground",
1998
+ "type": "boolean",
1999
+ "required": false
2000
+ },
2001
+ "strokeWidth": {
2002
+ "name": "strokeWidth",
2003
+ "type": "number",
2004
+ "required": false
2005
+ },
2006
+ "transition": {
2007
+ "name": "transition",
2008
+ "type": "boolean",
2009
+ "required": false
2010
+ },
2011
+ "pill": {
2012
+ "name": "pill",
2013
+ "type": "PillSize",
2014
+ "required": false
2015
+ },
2016
+ "active": {
2017
+ "name": "active",
2018
+ "type": "boolean",
2019
+ "required": false
2020
+ },
2021
+ "hoverText": {
2022
+ "name": "hoverText",
2023
+ "type": "string",
2024
+ "required": false,
2025
+ "description": "Texto que se muestra al hacer hover sobre el botón. Solo funciona cuando el badge termina de cargar (badgeLoading cambia de true a false)"
2026
+ },
2027
+ "iconProps": {
2028
+ "name": "iconProps",
2029
+ "type": "ButtonIconConfig",
2030
+ "required": false,
2031
+ "description": "Sistema nuevo: Configuración del icono principal del botón (objeto)\n Permite configurar el icono principal de forma más flexible\n Si se proporciona, tiene prioridad sobre las props legacy (icon, iconDuotonePrimary, etc.)"
2032
+ },
2033
+ "badge": {
2034
+ "name": "badge",
2035
+ "type": "ButtonBadgeConfig",
2036
+ "required": false,
2037
+ "description": "Sistema nuevo: Configuración del badge del botón (objeto)\n Permite configurar el badge de forma más flexible\n Si se proporciona, tiene prioridad sobre las props legacy (badgeColor, badgeLabel, etc.)"
2038
+ },
2039
+ "leftSlotProps": {
2040
+ "name": "leftSlotProps",
2041
+ "type": "ButtonSlotConfig",
2042
+ "required": false,
2043
+ "description": "Sistema nuevo: Configuración del slot izquierdo (objeto)\n Permite configurar el slot izquierdo de forma más flexible\n Si se proporciona, tiene prioridad sobre las props legacy (leftSlot, leftSlotDuotonePrimary, etc.)"
2044
+ },
2045
+ "rightSlotProps": {
2046
+ "name": "rightSlotProps",
2047
+ "type": "ButtonSlotConfig",
2048
+ "required": false,
2049
+ "description": "Sistema nuevo: Configuración del slot derecho (objeto)\n Permite configurar el slot derecho de forma más flexible\n Si se proporciona, tiene prioridad sobre las props legacy (rightSlot, rightSlotDuotonePrimary, etc.)"
2050
+ },
2051
+ "tooltipProps": {
2052
+ "name": "tooltipProps",
2053
+ "type": "ButtonTooltipConfig",
2054
+ "required": false,
2055
+ "description": "Sistema nuevo: Configuración del tooltip del botón (objeto)\n Permite configurar el tooltip de forma más flexible\n Si se proporciona, tiene prioridad sobre las props legacy (tooltip, tooltipPosition, etc.)"
2056
+ }
2057
+ }
2058
+ }
1109
2059
  }
1110
2060
  ]
1111
2061
  },
@@ -1421,7 +2371,353 @@
1421
2371
  "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentModalSizes() {\n const [isOpen, setIsOpen] = useState(false);\n const [modalSize, setModalSize] = useState<'sm' | 'md' | 'lg' | 'xl'>('lg');\n\n return (\n <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title=\"Modal\" size={modalSize}>\n <Modal.Body>\n <Modal.Image\n src={imageSrc}\n alt={imageAlt}\n thumbnailMode={true}\n thumbnailSize=\"md\"\n />\n </Modal.Body>\n </Modal>\n );\n}",
1422
2372
  "import { useState, useMemo } from 'react';\nimport { Modal } from '@/modules/Modal';\nimport { Table } from '@/modules/Table';\n\n// Definir columnas y datos...\nconst columnasModal = [/* ... */];\nconst datosEjemplo = [/* ... */];\n\nexport function TablaEnModal() {\n const [isOpen, setIsOpen] = useState(false);\n const rows = useMemo(() => datosEjemplo, []);\n\n return (\n <>\n <button onClick={() => setIsOpen(true)}>Abrir modal con tabla</button>\n\n <Modal\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n title=\"Listado de usuarios\"\n size=\"xl\"\n >\n <Modal.Body>\n <div className=\"ui-h-[400px] ui-min-h-0\">\n <Table\n columns={columnasModal}\n rows={rows}\n empty={{ title: 'Sin datos', description: 'No hay registros para mostrar.' }}\n />\n </div>\n </Modal.Body>\n </Modal>\n </>\n );\n}",
1423
2373
  "import { useState, useMemo } from 'react';\nimport { Modal } from '@/modules/Modal';\nimport { Table } from '@/modules/Table';\n\n// Definir columnas y datos...\nconst columnasModal = [/* ... */];\nconst datosEjemplo = [/* ... */];\n\nexport function TablaEnModal() {\n const [isOpen, setIsOpen] = useState(false);\n const rows = useMemo(() => datosEjemplo, []);\n\n return (\n <>\n <button onClick={() => setIsOpen(true)}>Abrir modal con tabla</button>\n\n <Modal\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n title=\"Listado de usuarios\"\n size=\"xl\"\n >\n <Modal.Body>\n <div className=\"ui-h-[400px] ui-min-h-0\">\n <Table\n columns={columnasModal}\n rows={rows}\n empty={{ title: 'Sin datos', description: 'No hay registros para mostrar.' }}\n />\n </div>\n </Modal.Body>\n </Modal>\n </>\n );\n}"
1424
- ]
2374
+ ],
2375
+ "props": {
2376
+ "groups": {},
2377
+ "deprecatedRoot": [
2378
+ {
2379
+ "name": "icon",
2380
+ "migrateTo": "iconConfig en su lugar\n */",
2381
+ "type": "IconType | AnyIconDefinition"
2382
+ },
2383
+ {
2384
+ "name": "headerButtonIcon",
2385
+ "migrateTo": "headerButton en su lugar\n */",
2386
+ "type": "IconType | AnyIconDefinition"
2387
+ },
2388
+ {
2389
+ "name": "badgeIcon",
2390
+ "migrateTo": "badge en su lugar\n */",
2391
+ "type": "IconType | AnyIconDefinition"
2392
+ },
2393
+ {
2394
+ "name": "footerButtonIcon",
2395
+ "migrateTo": "footerAuxButton en su lugar\n */",
2396
+ "type": "IconType | AnyIconDefinition"
2397
+ },
2398
+ {
2399
+ "name": "cancelButtonText",
2400
+ "migrateTo": "footerPrimaryButton (success) y footerSecondaryButton (cancel) en su lugar\n */",
2401
+ "type": "string"
2402
+ },
2403
+ {
2404
+ "name": "tabs",
2405
+ "migrateTo": "`tabsConfig",
2406
+ "type": "SwitchOption[]"
2407
+ },
2408
+ {
2409
+ "name": "defaultValueTab",
2410
+ "migrateTo": "`tabsConfig",
2411
+ "type": "string"
2412
+ },
2413
+ {
2414
+ "name": "onChangeTab",
2415
+ "migrateTo": "`tabsConfig",
2416
+ "type": "(value: string) => void"
2417
+ }
2418
+ ],
2419
+ "flat": {
2420
+ "isOpen": {
2421
+ "name": "isOpen",
2422
+ "type": "boolean",
2423
+ "required": true
2424
+ },
2425
+ "onClose": {
2426
+ "name": "onClose",
2427
+ "type": "() => void",
2428
+ "required": true
2429
+ },
2430
+ "size": {
2431
+ "name": "size",
2432
+ "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'",
2433
+ "required": false
2434
+ },
2435
+ "children": {
2436
+ "name": "children",
2437
+ "type": "React.ReactNode",
2438
+ "required": true
2439
+ },
2440
+ "disableEscapeClose": {
2441
+ "name": "disableEscapeClose",
2442
+ "type": "boolean",
2443
+ "required": false
2444
+ },
2445
+ "disableOutsideTab": {
2446
+ "name": "disableOutsideTab",
2447
+ "type": "boolean",
2448
+ "required": false
2449
+ },
2450
+ "disableOutsideClick": {
2451
+ "name": "disableOutsideClick",
2452
+ "type": "boolean",
2453
+ "required": false
2454
+ },
2455
+ "closeAtCorner": {
2456
+ "name": "closeAtCorner",
2457
+ "type": "boolean",
2458
+ "required": false
2459
+ },
2460
+ "showCloseButton": {
2461
+ "name": "showCloseButton",
2462
+ "type": "boolean",
2463
+ "required": false
2464
+ },
2465
+ "title": {
2466
+ "name": "title",
2467
+ "type": "string",
2468
+ "required": false
2469
+ },
2470
+ "zIndex": {
2471
+ "name": "zIndex",
2472
+ "type": "number",
2473
+ "required": false,
2474
+ "description": "z-index del overlay raíz. Por defecto `52` (por encima de headers/celdas sticky de `Table`, hasta 51).\n `50` y `60` (p. ej. AlertDialog anidado) usan tokens; cualquier otro número se aplica vía `style`\n (p. ej. `1200` para quedar por encima de popovers en portal ~1000)."
2475
+ },
2476
+ "hideFooter": {
2477
+ "name": "hideFooter",
2478
+ "type": "boolean",
2479
+ "required": false
2480
+ },
2481
+ "scrollMode": {
2482
+ "name": "scrollMode",
2483
+ "type": "'scroll' | 'paper'",
2484
+ "required": false,
2485
+ "description": "Modo de scroll del modal.\n - `paper` (por defecto): el panel se fija a `100svh - 32px` (16 px top + 16 px bottom), centrado verticalmente; el scroll es interno en `Modal.Body`.\n - `scroll`: scroll externo en el overlay; el panel crece sin límite y la página scrollea para mostrarlo."
2486
+ },
2487
+ "sectionPadding": {
2488
+ "name": "sectionPadding",
2489
+ "type": "'md' | 'sm'",
2490
+ "required": false,
2491
+ "description": "Padding uniforme de cabecera, cuerpo y pie (`Modal.Header` / `Modal.Body` / `Modal.Footer`).\n - `md` (por defecto): 16px — diálogo modal.\n - `sm`: 8px — p. ej. `Popup` con `popoverStructured`."
2492
+ },
2493
+ "iconConfig": {
2494
+ "name": "iconConfig",
2495
+ "type": "ModalIcon",
2496
+ "required": false,
2497
+ "description": "Sistema nuevo: Icono principal del Modal\n Permite configurar el icono principal de forma más flexible\n Si se proporciona, tiene prioridad sobre las props legacy (icon, iconDuotonePrimary, etc.)"
2498
+ },
2499
+ "closeButton": {
2500
+ "name": "closeButton",
2501
+ "type": "ModalCloseButtonConfig",
2502
+ "required": false,
2503
+ "description": "Botón de cerrar (cabecera): tooltip opcional. Preferir este bloque frente a extender props sueltas en raíz."
2504
+ },
2505
+ "headerButton": {
2506
+ "name": "headerButton",
2507
+ "type": "ModalButton",
2508
+ "required": false,
2509
+ "description": "Sistema nuevo: Botón del header (modelo cerrado)\n Solo existe un botón en el header actualmente\n Si se proporciona, tiene prioridad sobre las props legacy (headerButtonIcon, headerButtonOnClick, etc.)\n Para casos especiales con múltiples botones, usar headerButtons (array)"
2510
+ },
2511
+ "headerButtons": {
2512
+ "name": "headerButtons",
2513
+ "type": "ModalButton[]",
2514
+ "required": false,
2515
+ "description": "Sistema nuevo: Array de botones del header (para casos especiales)\n Permite definir múltiples botones cuando se necesite más flexibilidad"
2516
+ },
2517
+ "badge": {
2518
+ "name": "badge",
2519
+ "type": "ModalBadge",
2520
+ "required": false,
2521
+ "description": "Sistema nuevo: Badge del header (modelo cerrado)\n Solo existe un badge en el header actualmente\n Si se proporciona, tiene prioridad sobre las props legacy (badgeIcon, badgeLabel, etc.)\n Para casos especiales con múltiples badges, usar badges (array)"
2522
+ },
2523
+ "badges": {
2524
+ "name": "badges",
2525
+ "type": "ModalBadge[]",
2526
+ "required": false,
2527
+ "description": "Sistema nuevo: Array de badges del header (para casos especiales)\n Permite definir múltiples badges cuando se necesite más flexibilidad"
2528
+ },
2529
+ "footerAuxButton": {
2530
+ "name": "footerAuxButton",
2531
+ "type": "ModalButton",
2532
+ "required": false,
2533
+ "description": "Sistema nuevo: Botón auxiliar del footer (a la izquierda)\n Solo existe un botón auxiliar en el footer actualmente\n Si se proporciona, tiene prioridad sobre las props legacy (footerButtonIcon, footerButtonOnClick, etc.)"
2534
+ },
2535
+ "footerPrimaryButton": {
2536
+ "name": "footerPrimaryButton",
2537
+ "type": "ModalButton",
2538
+ "required": false,
2539
+ "description": "Sistema nuevo: Botones del footer (modelo cerrado)\n Define específicamente los botones principales del footer (primary = success, secondary = cancel)\n Si se proporciona, tiene prioridad sobre las props legacy (cancelButtonText, successButtonText, etc.)\n Para casos especiales con más botones, usar footerButtons (array)"
2540
+ },
2541
+ "footerSecondaryButton": {
2542
+ "name": "footerSecondaryButton",
2543
+ "type": "ModalButton",
2544
+ "required": false
2545
+ },
2546
+ "footerButtons": {
2547
+ "name": "footerButtons",
2548
+ "type": "ModalButton[]",
2549
+ "required": false,
2550
+ "description": "Sistema nuevo: Array de botones del footer (para casos especiales)\n Permite definir múltiples botones cuando se necesite más flexibilidad"
2551
+ },
2552
+ "iconDuotonePrimary": {
2553
+ "name": "iconDuotonePrimary",
2554
+ "type": "IconFontColor",
2555
+ "required": false
2556
+ },
2557
+ "iconDuotoneSecondary": {
2558
+ "name": "iconDuotoneSecondary",
2559
+ "type": "IconFontColor",
2560
+ "required": false
2561
+ },
2562
+ "iconDuotoneOpacityPrimary": {
2563
+ "name": "iconDuotoneOpacityPrimary",
2564
+ "type": "number",
2565
+ "required": false
2566
+ },
2567
+ "iconDuotoneOpacitySecondary": {
2568
+ "name": "iconDuotoneOpacitySecondary",
2569
+ "type": "number",
2570
+ "required": false
2571
+ },
2572
+ "headerButtonIconDuotonePrimary": {
2573
+ "name": "headerButtonIconDuotonePrimary",
2574
+ "type": "IconFontColor",
2575
+ "required": false
2576
+ },
2577
+ "headerButtonIconDuotoneSecondary": {
2578
+ "name": "headerButtonIconDuotoneSecondary",
2579
+ "type": "IconFontColor",
2580
+ "required": false
2581
+ },
2582
+ "headerButtonIconDuotoneOpacityPrimary": {
2583
+ "name": "headerButtonIconDuotoneOpacityPrimary",
2584
+ "type": "number",
2585
+ "required": false
2586
+ },
2587
+ "headerButtonIconDuotoneOpacitySecondary": {
2588
+ "name": "headerButtonIconDuotoneOpacitySecondary",
2589
+ "type": "number",
2590
+ "required": false
2591
+ },
2592
+ "headerButtonOnClick": {
2593
+ "name": "headerButtonOnClick",
2594
+ "type": "() => void",
2595
+ "required": false
2596
+ },
2597
+ "badgeIconDuotonePrimary": {
2598
+ "name": "badgeIconDuotonePrimary",
2599
+ "type": "IconFontColor",
2600
+ "required": false
2601
+ },
2602
+ "badgeIconDuotoneSecondary": {
2603
+ "name": "badgeIconDuotoneSecondary",
2604
+ "type": "IconFontColor",
2605
+ "required": false
2606
+ },
2607
+ "badgeIconDuotoneOpacityPrimary": {
2608
+ "name": "badgeIconDuotoneOpacityPrimary",
2609
+ "type": "number",
2610
+ "required": false
2611
+ },
2612
+ "badgeIconDuotoneOpacitySecondary": {
2613
+ "name": "badgeIconDuotoneOpacitySecondary",
2614
+ "type": "number",
2615
+ "required": false
2616
+ },
2617
+ "badgeLabel": {
2618
+ "name": "badgeLabel",
2619
+ "type": "string",
2620
+ "required": false
2621
+ },
2622
+ "footerButtonIconDuotonePrimary": {
2623
+ "name": "footerButtonIconDuotonePrimary",
2624
+ "type": "IconFontColor",
2625
+ "required": false
2626
+ },
2627
+ "footerButtonIconDuotoneSecondary": {
2628
+ "name": "footerButtonIconDuotoneSecondary",
2629
+ "type": "IconFontColor",
2630
+ "required": false
2631
+ },
2632
+ "footerButtonIconDuotoneOpacityPrimary": {
2633
+ "name": "footerButtonIconDuotoneOpacityPrimary",
2634
+ "type": "number",
2635
+ "required": false
2636
+ },
2637
+ "footerButtonIconDuotoneOpacitySecondary": {
2638
+ "name": "footerButtonIconDuotoneOpacitySecondary",
2639
+ "type": "number",
2640
+ "required": false
2641
+ },
2642
+ "footerButtonOnClick": {
2643
+ "name": "footerButtonOnClick",
2644
+ "type": "() => void",
2645
+ "required": false
2646
+ },
2647
+ "successButtonText": {
2648
+ "name": "successButtonText",
2649
+ "type": "string",
2650
+ "required": false
2651
+ },
2652
+ "onCancel": {
2653
+ "name": "onCancel",
2654
+ "type": "(event?: React.MouseEvent<HTMLButtonElement>) => void",
2655
+ "required": false
2656
+ },
2657
+ "onSuccess": {
2658
+ "name": "onSuccess",
2659
+ "type": "(event?: React.MouseEvent<HTMLButtonElement>) => void",
2660
+ "required": false
2661
+ },
2662
+ "showCancelButton": {
2663
+ "name": "showCancelButton",
2664
+ "type": "boolean",
2665
+ "required": false
2666
+ },
2667
+ "showSuccessButton": {
2668
+ "name": "showSuccessButton",
2669
+ "type": "boolean",
2670
+ "required": false
2671
+ },
2672
+ "closeAtSuccess": {
2673
+ "name": "closeAtSuccess",
2674
+ "type": "boolean",
2675
+ "required": false
2676
+ },
2677
+ "closeAtCancel": {
2678
+ "name": "closeAtCancel",
2679
+ "type": "boolean",
2680
+ "required": false
2681
+ },
2682
+ "cancelButtonSlotLeft": {
2683
+ "name": "cancelButtonSlotLeft",
2684
+ "type": "VisualSlotType",
2685
+ "required": false
2686
+ },
2687
+ "successButtonSlotRight": {
2688
+ "name": "successButtonSlotRight",
2689
+ "type": "VisualSlotType",
2690
+ "required": false
2691
+ },
2692
+ "disableCancelButton": {
2693
+ "name": "disableCancelButton",
2694
+ "type": "boolean",
2695
+ "required": false
2696
+ },
2697
+ "disableSuccessButton": {
2698
+ "name": "disableSuccessButton",
2699
+ "type": "boolean",
2700
+ "required": false
2701
+ },
2702
+ "successButtonColor": {
2703
+ "name": "successButtonColor",
2704
+ "type": "ButtonColors",
2705
+ "required": false
2706
+ },
2707
+ "footerSlotLayout": {
2708
+ "name": "footerSlotLayout",
2709
+ "type": "'inline' | 'spread'",
2710
+ "required": false,
2711
+ "description": "Reparto de iconos en los botones legacy del footer (`cancelButtonSlotLeft` / `successButtonSlotRight`).\n `spread` aplica `slotLayout={{ var: 'spread', textAlign: 'center' }}` en ambos y reparte el ancho en la fila del footer."
2712
+ },
2713
+ "tabsConfig": {
2714
+ "name": "tabsConfig",
2715
+ "type": "ModalTabsConfig",
2716
+ "required": false,
2717
+ "description": "Pestañas del header: opciones, callbacks y props del Switch en un solo objeto (API recomendada)."
2718
+ }
2719
+ }
2720
+ }
1425
2721
  }
1426
2722
  ],
1427
2723
  "compositionRecipe": {
@@ -1735,7 +3031,178 @@
1735
3031
  "// Uso simple - la barra anima automáticamente de 75% a 0% en 5 segundos\n<ProgressBar \n progress={75}\n countdown={5}\n label=\"Descargando...\"\n onCountdownComplete={() => console.log('¡Completado!')}\n/>\n\n// Con diferentes colores y duraciones\n<ProgressBar \n progress={100}\n countdown={10}\n color=\"warning\"\n label=\"Tiempo restante\"\n onCountdownComplete={() => alert('¡Se acabó el tiempo!')}\n/>",
1736
3032
  "// Modo normal\n<ProgressBar \n progress={75} \n label=\"archivo.zip\"\n eta=\"1m restante\"\n helperText=\"200MB de 512MB\"\n/>\n\n// Modo compacto - barra en línea con el label\n<ProgressBar \n progress={75} \n label=\"archivo.zip\"\n eta=\"1m restante\"\n helperText=\"200MB de 512MB\"\n compact\n/>",
1737
3033
  "<ProgressBar\n progress={75}\n label=\"archivo.zip\"\n eta=\"1m restante\"\n size=\"sm\"\n color=\"brand\"\n helperText=\"200MB de 512MB\"\n helperTextType=\"size\"\n showCloseButton\n onClose={() => {}}\n withBackground\n/>"
1738
- ]
3034
+ ],
3035
+ "props": {
3036
+ "groups": {},
3037
+ "deprecatedRoot": [
3038
+ {
3039
+ "name": "description",
3040
+ "migrateTo": "helperText */",
3041
+ "type": "string"
3042
+ },
3043
+ {
3044
+ "name": "progressChar",
3045
+ "migrateTo": "progressSuffix */",
3046
+ "type": "string"
3047
+ },
3048
+ {
3049
+ "name": "status",
3050
+ "type": "'neutral' | 'blue' | 'red'"
3051
+ },
3052
+ {
3053
+ "name": "borderStyle",
3054
+ "type": "'dashed' | 'solid' | 'small-solid'"
3055
+ }
3056
+ ],
3057
+ "flat": {
3058
+ "color": {
3059
+ "name": "color",
3060
+ "type": "ProgressBarColor",
3061
+ "required": false,
3062
+ "description": "Color de la barra"
3063
+ },
3064
+ "progress": {
3065
+ "name": "progress",
3066
+ "type": "number",
3067
+ "required": false,
3068
+ "description": "Porcentaje de progreso (0-100)"
3069
+ },
3070
+ "label": {
3071
+ "name": "label",
3072
+ "type": "string",
3073
+ "required": false,
3074
+ "description": "Texto del label"
3075
+ },
3076
+ "showLabel": {
3077
+ "name": "showLabel",
3078
+ "type": "boolean",
3079
+ "required": false,
3080
+ "description": "Mostrar label"
3081
+ },
3082
+ "showProgress": {
3083
+ "name": "showProgress",
3084
+ "type": "boolean",
3085
+ "required": false,
3086
+ "description": "Mostrar porcentaje de progreso"
3087
+ },
3088
+ "progressSuffix": {
3089
+ "name": "progressSuffix",
3090
+ "type": "string",
3091
+ "required": false,
3092
+ "description": "Sufijo del progreso (por defecto \"%\")"
3093
+ },
3094
+ "eta": {
3095
+ "name": "eta",
3096
+ "type": "string",
3097
+ "required": false,
3098
+ "description": "Texto ETA (ej: \"1m restante\")"
3099
+ },
3100
+ "size": {
3101
+ "name": "size",
3102
+ "type": "ProgressBarSize",
3103
+ "required": false,
3104
+ "description": "Tamaño de la barra"
3105
+ },
3106
+ "icon": {
3107
+ "name": "icon",
3108
+ "type": "IconType | IconProp",
3109
+ "required": false,
3110
+ "description": "Ícono a mostrar (deprecado - usar showCloseButton)"
3111
+ },
3112
+ "iconDuotonePrimary": {
3113
+ "name": "iconDuotonePrimary",
3114
+ "type": "IconFontColor",
3115
+ "required": false
3116
+ },
3117
+ "iconDuotoneSecondary": {
3118
+ "name": "iconDuotoneSecondary",
3119
+ "type": "IconFontColor",
3120
+ "required": false
3121
+ },
3122
+ "iconDuotoneOpacityPrimary": {
3123
+ "name": "iconDuotoneOpacityPrimary",
3124
+ "type": "number",
3125
+ "required": false
3126
+ },
3127
+ "iconDuotoneOpacitySecondary": {
3128
+ "name": "iconDuotoneOpacitySecondary",
3129
+ "type": "number",
3130
+ "required": false
3131
+ },
3132
+ "showIcon": {
3133
+ "name": "showIcon",
3134
+ "type": "boolean",
3135
+ "required": false,
3136
+ "description": "Mostrar ícono (deprecado - usar showCloseButton)"
3137
+ },
3138
+ "className": {
3139
+ "name": "className",
3140
+ "type": "string",
3141
+ "required": false,
3142
+ "description": "Clases adicionales"
3143
+ },
3144
+ "duration": {
3145
+ "name": "duration",
3146
+ "type": "number",
3147
+ "required": false,
3148
+ "description": "Duración de la animación"
3149
+ },
3150
+ "withBackground": {
3151
+ "name": "withBackground",
3152
+ "type": "boolean",
3153
+ "required": false,
3154
+ "description": "Mostrar fondo de la barra"
3155
+ },
3156
+ "helperText": {
3157
+ "name": "helperText",
3158
+ "type": "string",
3159
+ "required": false,
3160
+ "description": "Texto de ayuda inferior"
3161
+ },
3162
+ "helperTextType": {
3163
+ "name": "helperTextType",
3164
+ "type": "HelperTextType",
3165
+ "required": false,
3166
+ "description": "Tipo de texto de ayuda"
3167
+ },
3168
+ "compact": {
3169
+ "name": "compact",
3170
+ "type": "boolean",
3171
+ "required": false,
3172
+ "description": "Modo compacto (sin texto de ayuda)"
3173
+ },
3174
+ "disabled": {
3175
+ "name": "disabled",
3176
+ "type": "boolean",
3177
+ "required": false,
3178
+ "description": "Estado deshabilitado"
3179
+ },
3180
+ "showCloseButton": {
3181
+ "name": "showCloseButton",
3182
+ "type": "boolean",
3183
+ "required": false,
3184
+ "description": "Mostrar botón de cerrar"
3185
+ },
3186
+ "onClose": {
3187
+ "name": "onClose",
3188
+ "type": "() => void",
3189
+ "required": false,
3190
+ "description": "Callback al cerrar"
3191
+ },
3192
+ "countdown": {
3193
+ "name": "countdown",
3194
+ "type": "number",
3195
+ "required": false,
3196
+ "description": "Duración de la cuenta regresiva en segundos.\n Si se proporciona, la barra animará automáticamente desde el valor de `progress` hasta 0."
3197
+ },
3198
+ "onCountdownComplete": {
3199
+ "name": "onCountdownComplete",
3200
+ "type": "() => void",
3201
+ "required": false,
3202
+ "description": "Callback que se ejecuta cuando la cuenta regresiva llega a 0.\n Solo se ejecuta si `countdown` está definido."
3203
+ }
3204
+ }
3205
+ }
1739
3206
  }
1740
3207
  ]
1741
3208
  },
@@ -2229,7 +3696,78 @@
2229
3696
  "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n <Text type=\"body\" size=\"xs\" weight=\"regular\">Body XS Regular</Text>\n <Text type=\"body\" size=\"sm\" weight=\"medium\">Body SM Medium</Text>\n <Text type=\"body\" size=\"md\" weight=\"semibold\">Body MD Semibold</Text>\n <Text type=\"body\" size=\"lg\" weight=\"bold\">Body LG Bold</Text>\n </>\n )\n }",
2230
3697
  "<Text type=\"title\" size=\"h1\">Heading H1</Text>\n <Text type=\"title\" size=\"h2\">Heading H2</Text>\n <Text type=\"title\" size=\"h3\">Heading H3</Text>",
2231
3698
  "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n <Text type=\"caption\" size=\"xs\">Caption XS</Text>\n <Text type=\"caption\" size=\"md\">Caption MD</Text>\n </>\n )\n }"
2232
- ]
3699
+ ],
3700
+ "props": {
3701
+ "groups": {},
3702
+ "deprecatedRoot": [
3703
+ {
3704
+ "name": "textColor",
3705
+ "type": "TextColor"
3706
+ }
3707
+ ],
3708
+ "flat": {
3709
+ "type": {
3710
+ "name": "type",
3711
+ "type": "T",
3712
+ "required": false,
3713
+ "description": "Tipo de texto: title, body, caption, code"
3714
+ },
3715
+ "size": {
3716
+ "name": "size",
3717
+ "type": "TextSize<T>",
3718
+ "required": false,
3719
+ "description": "Tamaño del texto según el tipo"
3720
+ },
3721
+ "weight": {
3722
+ "name": "weight",
3723
+ "type": "TextWeight",
3724
+ "required": false,
3725
+ "description": "Peso de la fuente"
3726
+ },
3727
+ "children": {
3728
+ "name": "children",
3729
+ "type": "ReactNode",
3730
+ "required": true,
3731
+ "description": "Contenido del texto"
3732
+ },
3733
+ "className": {
3734
+ "name": "className",
3735
+ "type": "string",
3736
+ "required": false,
3737
+ "description": "Clase CSS adicional"
3738
+ },
3739
+ "as": {
3740
+ "name": "as",
3741
+ "type": "keyof JSX.IntrinsicElements",
3742
+ "required": false,
3743
+ "description": "Elemento HTML a renderizar (por defecto: span para body/caption/code, h1-h6 para title)"
3744
+ },
3745
+ "color": {
3746
+ "name": "color",
3747
+ "type": "TextColor | (string & {})",
3748
+ "required": false,
3749
+ "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado"
3750
+ },
3751
+ "truncateLabel": {
3752
+ "name": "truncateLabel",
3753
+ "type": "boolean",
3754
+ "required": false,
3755
+ "description": "Si es true, el texto se trunca con ellipsis y, si `truncateTooltip` es true, muestra un tooltip\n con el contenido completo al pasar el cursor cuando el texto está efectivamente truncado."
3756
+ },
3757
+ "truncateTooltip": {
3758
+ "name": "truncateTooltip",
3759
+ "type": "boolean",
3760
+ "required": false,
3761
+ "description": "Si es true (por defecto) y `truncateLabel` es true, muestra el tooltip al truncar.\n Si es false, solo se aplica truncado sin tooltip."
3762
+ },
3763
+ "tooltipTitle": {
3764
+ "name": "tooltipTitle",
3765
+ "type": "ReactNode",
3766
+ "required": false,
3767
+ "description": "Texto mostrado en el tooltip cuando hace falta (p. ej. `children` no es un string o se quiere\n un texto distinto al visible)."
3768
+ }
3769
+ }
3770
+ }
2233
3771
  },
2234
3772
  {
2235
3773
  "name": "Body",