@recursica/mui-adapter 0.3.0 → 0.5.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 (93) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/mui-adapter.cjs +1 -1
  3. package/dist/mui-adapter.cjs.map +1 -1
  4. package/dist/mui-adapter.css +1 -1
  5. package/dist/mui-adapter.js +216 -178
  6. package/dist/mui-adapter.js.map +1 -1
  7. package/dist/src/components/Autocomplete/Autocomplete.d.ts +3 -0
  8. package/dist/src/components/Autocomplete/index.d.ts +1 -0
  9. package/dist/src/components/Button/Button.d.ts +9 -2
  10. package/dist/src/components/Loader/Loader.d.ts +9 -2
  11. package/dist/src/components/index.d.ts +1 -0
  12. package/package.json +5 -2
  13. package/src/GlobalExemptions.modules.css +13 -0
  14. package/src/components/Accordion/Accordion.module.css +56 -0
  15. package/src/components/Accordion/Accordion.tsx +1 -0
  16. package/src/components/AssistiveElement/AssistiveElement.module.css +20 -0
  17. package/src/components/AssistiveElement/AssistiveElement.tsx +1 -0
  18. package/src/components/Autocomplete/Autocomplete.module.css +47 -0
  19. package/src/components/Autocomplete/Autocomplete.stories.tsx +35 -0
  20. package/src/components/Autocomplete/Autocomplete.tsx +8 -0
  21. package/src/components/Autocomplete/index.ts +1 -0
  22. package/src/components/Avatar/Avatar.module.css +74 -0
  23. package/src/components/Avatar/Avatar.tsx +1 -0
  24. package/src/components/Badge/Badge.module.css +29 -0
  25. package/src/components/Badge/Badge.tsx +1 -0
  26. package/src/components/Breadcrumb/Breadcrumb.module.css +6 -0
  27. package/src/components/Breadcrumb/Breadcrumb.tsx +1 -0
  28. package/src/components/Button/BUTTON_IMPLEMENTATION_NOTES.md +16 -0
  29. package/src/components/Button/Button.module.css +154 -18
  30. package/src/components/Button/Button.stories.tsx +48 -0
  31. package/src/components/Button/Button.tsx +35 -3
  32. package/src/components/Card/Card.module.css +38 -0
  33. package/src/components/Card/Card.tsx +1 -0
  34. package/src/components/Checkbox/Checkbox.module.css +39 -0
  35. package/src/components/Checkbox/Checkbox.tsx +1 -0
  36. package/src/components/Chip/Chip.module.css +51 -0
  37. package/src/components/Chip/Chip.tsx +1 -0
  38. package/src/components/DatePicker/DatePicker.module.css +42 -0
  39. package/src/components/DatePicker/DatePicker.tsx +1 -0
  40. package/src/components/Dropdown/Dropdown.module.css +46 -0
  41. package/src/components/Dropdown/Dropdown.tsx +1 -0
  42. package/src/components/FileInput/FileInput.module.css +47 -0
  43. package/src/components/FileInput/FileInput.tsx +1 -0
  44. package/src/components/FileUpload/FileUpload.module.css +40 -0
  45. package/src/components/FileUpload/FileUpload.tsx +1 -0
  46. package/src/components/HoverCard/HoverCard.module.css +23 -0
  47. package/src/components/HoverCard/HoverCard.tsx +1 -0
  48. package/src/components/Label/Label.module.css +35 -0
  49. package/src/components/Label/Label.tsx +1 -0
  50. package/src/components/Link/Link.module.css +8 -0
  51. package/src/components/Loader/LOADER_IMPLEMENTATION_NOTES.md +25 -0
  52. package/src/components/Loader/Loader.module.css +166 -0
  53. package/src/components/Loader/Loader.stories.tsx +90 -22
  54. package/src/components/Loader/Loader.tsx +69 -5
  55. package/src/components/Menu/Menu.module.css +53 -0
  56. package/src/components/Menu/Menu.tsx +1 -0
  57. package/src/components/Modal/Modal.module.css +36 -0
  58. package/src/components/Modal/Modal.tsx +1 -0
  59. package/src/components/NumberInput/NumberInput.module.css +47 -0
  60. package/src/components/NumberInput/NumberInput.tsx +1 -0
  61. package/src/components/Pagination/Pagination.module.css +81 -0
  62. package/src/components/Pagination/Pagination.tsx +1 -0
  63. package/src/components/Panel/Panel.module.css +38 -0
  64. package/src/components/Panel/Panel.tsx +1 -0
  65. package/src/components/Radio/Radio.module.css +37 -0
  66. package/src/components/Radio/Radio.tsx +1 -0
  67. package/src/components/ReadOnlyField/ReadOnlyField.module.css +16 -0
  68. package/src/components/ReadOnlyField/ReadOnlyField.tsx +1 -0
  69. package/src/components/SegmentedControl/SegmentedControl.module.css +47 -0
  70. package/src/components/SegmentedControl/SegmentedControl.tsx +1 -0
  71. package/src/components/Slider/Slider.module.css +86 -0
  72. package/src/components/Slider/Slider.tsx +1 -0
  73. package/src/components/Stepper/Stepper.module.css +71 -0
  74. package/src/components/Stepper/Stepper.tsx +1 -0
  75. package/src/components/Switch/Switch.module.css +39 -0
  76. package/src/components/Switch/Switch.tsx +1 -0
  77. package/src/components/Tabs/Tabs.module.css +79 -0
  78. package/src/components/Tabs/Tabs.tsx +1 -0
  79. package/src/components/TextArea/TextArea.module.css +37 -0
  80. package/src/components/TextArea/TextArea.tsx +1 -0
  81. package/src/components/TextField/TextField.module.css +47 -0
  82. package/src/components/TextField/TextField.tsx +1 -0
  83. package/src/components/TimePicker/TimePicker.module.css +41 -0
  84. package/src/components/TimePicker/TimePicker.tsx +1 -0
  85. package/src/components/Timeline/Timeline.module.css +78 -0
  86. package/src/components/Timeline/Timeline.tsx +1 -0
  87. package/src/components/Toast/Toast.module.css +32 -0
  88. package/src/components/Toast/Toast.tsx +1 -0
  89. package/src/components/Tooltip/Tooltip.module.css +25 -0
  90. package/src/components/Tooltip/Tooltip.tsx +1 -0
  91. package/src/components/TransferList/TransferList.module.css +38 -0
  92. package/src/components/TransferList/TransferList.tsx +1 -0
  93. package/src/components/index.ts +1 -0
@@ -0,0 +1,51 @@
1
+ /* EXEMPTIONS:
2
+ This component is a placeholder stub. Once fully implemented, its specific
3
+ tokens will be fully wired up to direct styles. */
4
+
5
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_border-radius */
6
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_border-size */
7
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-color */
8
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-size */
9
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_elevation */
10
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_horizontal-padding */
11
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_icon-size */
12
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_icon-text-gap */
13
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_leading-icon-color */
14
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_max-width */
15
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_min-width */
16
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text-size */
17
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-family */
18
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-size */
19
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-style */
20
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-weight */
21
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_letter-spacing */
22
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_line-height */
23
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_text-decoration */
24
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_text-transform */
25
+ /* recursica-ignore: --recursica_ui-kit_components_chip_properties_vertical-padding */
26
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_background */
27
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_border-color */
28
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_close-icon-color */
29
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_icon */
30
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_leading-icon-color */
31
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_selected-icon-color */
32
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_text */
33
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_background */
34
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_border-color */
35
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_close-icon-color */
36
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_icon */
37
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_leading-icon-color */
38
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_selected-icon-color */
39
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_text */
40
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_background */
41
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_border-color */
42
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_close-icon-color */
43
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_leading-icon-color */
44
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_selected-icon-color */
45
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_text */
46
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_background */
47
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_border-color */
48
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_close-icon-color */
49
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_leading-icon-color */
50
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_selected-icon-color */
51
+ /* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_text */
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import "./Chip.module.css";
2
3
 
3
4
  export type ChipProps = React.HTMLAttributes<HTMLDivElement>;
4
5
 
@@ -0,0 +1,42 @@
1
+ /* EXEMPTIONS:
2
+ This component is a placeholder stub. Once fully implemented, its specific
3
+ tokens will be fully wired up to direct styles. */
4
+
5
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_border-radius */
6
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_horizontal-padding */
7
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_icon-size */
8
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_icon-text-gap */
9
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_min-height */
10
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_placeholder-opacity */
11
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-family */
12
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-size */
13
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-style */
14
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-weight */
15
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_letter-spacing */
16
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_line-height */
17
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_text-decoration */
18
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_text-transform */
19
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_vertical-padding */
20
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_width */
21
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_layouts_side-by-side_properties_top-bottom-margin */
22
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_layouts_stacked_properties_top-bottom-margin */
23
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_border-size */
24
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_background */
25
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_border-color */
26
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_leading-icon */
27
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_text */
28
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_border-size */
29
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_background */
30
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_border-color */
31
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_leading-icon */
32
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_text */
33
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_border-size */
34
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_background */
35
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_border-color */
36
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_leading-icon */
37
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_text */
38
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_border-size */
39
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_background */
40
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_border-color */
41
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_leading-icon */
42
+ /* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_text */
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import "./DatePicker.module.css";
2
3
 
3
4
  export type DatePickerProps = React.HTMLAttributes<HTMLDivElement>;
4
5
 
@@ -0,0 +1,46 @@
1
+ /* EXEMPTIONS:
2
+ This component is a placeholder stub. Once fully implemented, its specific
3
+ tokens will be fully wired up to direct styles. */
4
+
5
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_border-radius */
6
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_horizontal-padding */
7
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_icon-size */
8
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_icon-text-gap */
9
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_max-width */
10
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_min-height */
11
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_min-width */
12
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-family */
13
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-size */
14
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-style */
15
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-weight */
16
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_letter-spacing */
17
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_line-height */
18
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_text-decoration */
19
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_text-transform */
20
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_vertical-padding */
21
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_top-bottom-margin */
22
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_top-bottom-margin */
23
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_border-size */
24
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_background */
25
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_border-color */
26
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_leading-icon */
27
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_text */
28
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_trailing-icon */
29
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_border-size */
30
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_background */
31
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_border-color */
32
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_leading-icon */
33
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_text */
34
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_trailing-icon */
35
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_border-size */
36
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_background */
37
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_border-color */
38
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_leading-icon */
39
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_text */
40
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_trailing-icon */
41
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_border-size */
42
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_background */
43
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_border-color */
44
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_leading-icon */
45
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_text */
46
+ /* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_trailing-icon */
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import "./Dropdown.module.css";
2
3
 
3
4
  export type DropdownProps = React.HTMLAttributes<HTMLDivElement>;
4
5
 
@@ -0,0 +1,47 @@
1
+ /* EXEMPTIONS:
2
+ This component is a placeholder stub. Once fully implemented, its specific
3
+ tokens will be fully wired up to direct styles. */
4
+
5
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_border-radius */
6
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_horizontal-padding */
7
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_icon-size */
8
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_icon-text-gap */
9
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_max-width */
10
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_min-height */
11
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_min-width */
12
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_placeholder-opacity */
13
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-family */
14
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-size */
15
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-style */
16
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-weight */
17
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_letter-spacing */
18
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_line-height */
19
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_text-decoration */
20
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_text-transform */
21
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_properties_vertical-padding */
22
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_layouts_side-by-side_properties_top-bottom-margin */
23
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_layouts_stacked_properties_top-bottom-margin */
24
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_border-size */
25
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_background */
26
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_border-color */
27
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_leading-icon */
28
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_text */
29
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_trailing-icon */
30
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_border-size */
31
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_background */
32
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_border-color */
33
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_leading-icon */
34
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_text */
35
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_trailing-icon */
36
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_border-size */
37
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_background */
38
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_border-color */
39
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_leading-icon */
40
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_text */
41
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_trailing-icon */
42
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_border-size */
43
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_background */
44
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_border-color */
45
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_leading-icon */
46
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_text */
47
+ /* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_trailing-icon */
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import "./FileInput.module.css";
2
3
 
3
4
  export type FileInputProps = React.HTMLAttributes<HTMLDivElement>;
4
5
 
@@ -0,0 +1,40 @@
1
+ /* EXEMPTIONS:
2
+ This component is a placeholder stub. Once fully implemented, its specific
3
+ tokens will be fully wired up to direct styles. */
4
+
5
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-radius */
6
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-style */
7
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_item-gap */
8
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_list-spacing */
9
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_padding */
10
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-family */
11
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-size */
12
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-style */
13
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-weight */
14
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_letter-spacing */
15
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_line-height */
16
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_text-decoration */
17
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_text-transform */
18
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_vertical-element-gap */
19
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_layouts_side-by-side_properties_top-bottom-margin */
20
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_layouts_stacked_properties_top-bottom-margin */
21
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_border-size */
22
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_background */
23
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_border-color */
24
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_text */
25
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_upload-icon */
26
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_border-size */
27
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_background */
28
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_border-color */
29
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_text */
30
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_upload-icon */
31
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_border-size */
32
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_background */
33
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_border-color */
34
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_text */
35
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_upload-icon */
36
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_border-size */
37
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_background */
38
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_border-color */
39
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_text */
40
+ /* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_upload-icon */
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import "./FileUpload.module.css";
2
3
 
3
4
  export type FileUploadProps = React.HTMLAttributes<HTMLDivElement>;
4
5
 
@@ -0,0 +1,23 @@
1
+ /* EXEMPTIONS:
2
+ This component is a placeholder stub. Once fully implemented, its specific
3
+ tokens will be fully wired up to direct styles. */
4
+
5
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_beak-size */
6
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_border-radius */
7
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_border-size */
8
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_colors_background */
9
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color */
10
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_colors_content */
11
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-family */
12
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-size */
13
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-style */
14
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-weight */
15
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_letter-spacing */
16
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_line-height */
17
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_text-decoration */
18
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_text-transform */
19
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_elevation */
20
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_horizontal-padding */
21
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_max-width */
22
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_min-width */
23
+ /* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_vertical-padding */
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import "./HoverCard.module.css";
2
3
 
3
4
  export type HoverCardProps = React.HTMLAttributes<HTMLDivElement>;
4
5
 
@@ -0,0 +1,35 @@
1
+ /* EXEMPTIONS:
2
+ This component is a placeholder stub. Once fully implemented, its specific
3
+ tokens will be fully wired up to direct styles. */
4
+
5
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_colors_asterisk */
6
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_colors_text */
7
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_edit-icon-gap */
8
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-optional-text-gap */
9
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_font-family */
10
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_font-size */
11
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_font-style */
12
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_font-weight */
13
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_letter-spacing */
14
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_line-height */
15
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_text-decoration */
16
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_text-transform */
17
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text-opacity */
18
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_font-family */
19
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_font-size */
20
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_font-style */
21
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_font-weight */
22
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_letter-spacing */
23
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_line-height */
24
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_text-decoration */
25
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_text-transform */
26
+ /* recursica-ignore: --recursica_ui-kit_components_label_properties_required-indicator-gap */
27
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_gutter */
28
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_min-height */
29
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding */
30
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_variants_sizes_default_properties_width */
31
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_variants_sizes_small_properties_width */
32
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_properties_bottom-padding */
33
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_properties_min-height */
34
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_default_properties_width */
35
+ /* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_small_properties_width */
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import "./Label.module.css";
2
3
 
3
4
  export type LabelProps = React.HTMLAttributes<HTMLDivElement>;
4
5
 
@@ -131,3 +131,11 @@ HARDCODED VALUES:
131
131
  /* HARDCODE: allows text truncation if bounded */
132
132
  min-width: 0;
133
133
  }
134
+
135
+ /* EXEMPTIONS:
136
+ text_text-transform across multiple link states (default, hover, visited, visited-hover) is ignored
137
+ because links naturally inherit casing directly from text children rather than requiring custom CSS transforms. */
138
+ /* recursica-ignore: --recursica_ui-kit_components_link_variants_states_default_properties_text_text-transform */
139
+ /* recursica-ignore: --recursica_ui-kit_components_link_variants_states_hover_properties_text_text-transform */
140
+ /* recursica-ignore: --recursica_ui-kit_components_link_variants_states_visited_properties_text_text-transform */
141
+ /* recursica-ignore: --recursica_ui-kit_components_link_variants_states_visited-hover_properties_text_text-transform */
@@ -0,0 +1,25 @@
1
+ # Loader Implementation Notes
2
+
3
+ ## Architecture & Integration
4
+
5
+ The `Loader` component for the MUI adapter has been completely hand-coded from scratch using pure CSS and basic HTML `<span>` elements. It explicitly **does not** use MUI's native `<CircularProgress>` component.
6
+
7
+ This was a deliberate architectural decision to ensure 100% feature and visual parity with the `mantine-adapter`.
8
+
9
+ ### Key Decisions:
10
+
11
+ - **Bypassing Native Components:** MUI's native loaders (like `<CircularProgress>`) are built using complex animated SVGs and only support a circular "oval" shape. Since the Recursica design system mandates `oval`, `bars`, and `dots` variants, relying on MUI's primitives would have forced a fragmented architecture where `oval` used MUI but `bars` and `dots` were hand-coded.
12
+ - **Parity with Mantine:** To guarantee identical animation timing, easing curves, and DOM structures across frameworks, the CSS keyframes and layout strategies used internally by Mantine's `<Loader>` were extracted and directly replicated in this adapter's `Loader.module.css`.
13
+
14
+ ### Token Mapping:
15
+
16
+ Sizes are bound through `data-size` attributes (`sm`, `md`, `lg` parsing to target `<div data-size="small">`, etc.).
17
+
18
+ - **Oval Variant:** Uses a CSS spinning `::after` pseudo-element. To avoid CSS border inheritance bugs when computing tokenized border-widths, a custom `--loader-thickness` CSS variable is used to bridge the token into the spinning element.
19
+ - **Bars & Dots Variants:** Render three internal `<span />` elements sequentially, styled via `Loader.module.css` to handle individual keyframe delays for bouncing or fading animations.
20
+
21
+ ### Color Contrast Rules:
22
+
23
+ Loaders are hardcoded to map to their explicitly defined design tokens (e.g., `--recursica_ui-kit_components_loader_properties_indicator-color`). By default, they do **not** inherit `currentColor`.
24
+
25
+ When injected into components like the `Button` (where contrast issues may arise against solid backgrounds), it is the responsibility of the parent component (e.g., `Button.module.css`) to use contextual CSS overrides to force `--loader-color: currentColor !important` if necessary.
@@ -0,0 +1,166 @@
1
+ .root {
2
+ /* Default inheritance mapped from component variables if not explicitly overridden by variants */
3
+ --loader-color: var(
4
+ --recursica_ui-kit_components_loader_properties_indicator-color,
5
+ currentColor
6
+ );
7
+ box-sizing: border-box;
8
+ }
9
+ .root * {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ /* data-size mapping */
14
+
15
+ /* SMALL */
16
+ .root[data-size="small"] {
17
+ --loader-size: var(
18
+ --recursica_ui-kit_components_loader_variants_sizes_small_properties_size
19
+ );
20
+ }
21
+ .root[data-size="small"][data-variant="oval"] {
22
+ --loader-thickness: var(
23
+ --recursica_ui-kit_components_loader_variants_sizes_small_properties_thickness
24
+ );
25
+ }
26
+ .root[data-size="small"]:not([data-variant="oval"]) span {
27
+ border-radius: var(
28
+ --recursica_ui-kit_components_loader_variants_sizes_small_properties_border-radius
29
+ );
30
+ }
31
+
32
+ /* DEFAULT */
33
+ .root[data-size="default"] {
34
+ --loader-size: var(
35
+ --recursica_ui-kit_components_loader_variants_sizes_default_properties_size
36
+ );
37
+ }
38
+ .root[data-size="default"][data-variant="oval"] {
39
+ --loader-thickness: var(
40
+ --recursica_ui-kit_components_loader_variants_sizes_default_properties_thickness
41
+ );
42
+ }
43
+ .root[data-size="default"]:not([data-variant="oval"]) span {
44
+ border-radius: var(
45
+ --recursica_ui-kit_components_loader_variants_sizes_default_properties_border-radius
46
+ );
47
+ }
48
+
49
+ /* LARGE */
50
+ .root[data-size="large"] {
51
+ --loader-size: var(
52
+ --recursica_ui-kit_components_loader_variants_sizes_large_properties_size
53
+ );
54
+ }
55
+ .root[data-size="large"][data-variant="oval"] {
56
+ --loader-thickness: var(
57
+ --recursica_ui-kit_components_loader_variants_sizes_large_properties_thickness
58
+ );
59
+ }
60
+ .root[data-size="large"]:not([data-variant="oval"]) span {
61
+ border-radius: var(
62
+ --recursica_ui-kit_components_loader_variants_sizes_large_properties_border-radius
63
+ );
64
+ }
65
+
66
+ /* ----- Oval loader ----- */
67
+ @keyframes oval-spin {
68
+ 0% {
69
+ transform: rotate(0deg);
70
+ }
71
+ 100% {
72
+ transform: rotate(360deg);
73
+ }
74
+ }
75
+
76
+ .root[data-variant="oval"] {
77
+ display: inline-block;
78
+ width: var(--loader-size);
79
+ height: var(--loader-size);
80
+ }
81
+ .root[data-variant="oval"]::after {
82
+ content: "";
83
+ display: block;
84
+ width: var(--loader-size);
85
+ height: var(--loader-size);
86
+ border-radius: 10000px;
87
+ border-width: var(--loader-thickness);
88
+ border-style: solid;
89
+ border-color: var(--loader-color) var(--loader-color) var(--loader-color)
90
+ transparent;
91
+ animation: oval-spin 1.2s linear infinite;
92
+ }
93
+
94
+ /* ----- Bars loader ----- */
95
+ @keyframes bars-bounce {
96
+ 0% {
97
+ transform: scale(0.6);
98
+ opacity: 0;
99
+ }
100
+ 50%,
101
+ 100% {
102
+ transform: scale(1);
103
+ opacity: 1;
104
+ }
105
+ }
106
+
107
+ .root[data-variant="bars"] {
108
+ position: relative;
109
+ width: var(--loader-size);
110
+ height: var(--loader-size);
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: center;
114
+ gap: calc(var(--loader-size) / 5);
115
+ }
116
+
117
+ .root[data-variant="bars"] span {
118
+ flex: 1;
119
+ height: 100%;
120
+ background: var(--loader-color);
121
+ animation: bars-bounce 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
122
+ }
123
+
124
+ .root[data-variant="bars"] span:nth-of-type(1) {
125
+ animation-delay: -240ms;
126
+ }
127
+ .root[data-variant="bars"] span:nth-of-type(2) {
128
+ animation-delay: -120ms;
129
+ }
130
+ .root[data-variant="bars"] span:nth-of-type(3) {
131
+ animation-delay: 0;
132
+ }
133
+
134
+ /* ----- Dots loader ----- */
135
+ @keyframes dots-pulse {
136
+ 0%,
137
+ 100% {
138
+ transform: scale(1);
139
+ opacity: 1;
140
+ }
141
+ 50% {
142
+ transform: scale(0.6);
143
+ opacity: 0.5;
144
+ }
145
+ }
146
+
147
+ .root[data-variant="dots"] {
148
+ display: flex;
149
+ justify-content: center;
150
+ align-items: center;
151
+ gap: calc(var(--loader-size) / 10);
152
+ position: relative;
153
+ width: var(--loader-size);
154
+ height: var(--loader-size);
155
+ }
156
+
157
+ .root[data-variant="dots"] span {
158
+ width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
159
+ height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
160
+ background: var(--loader-color);
161
+ animation: dots-pulse 0.8s infinite linear;
162
+ }
163
+
164
+ .root[data-variant="dots"] span:nth-child(2) {
165
+ animation-delay: 0.4s;
166
+ }