@recursica/mui-adapter 0.4.0 → 0.5.0

package/src/components/Badge/Badge.module.css

@@ -0,0 +1,29 @@
+/* EXEMPTIONS:
+   This component is a placeholder stub. Once fully implemented, its specific
+   tokens will be fully wired up to direct styles. */
+
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_padding-horizontal */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_padding-vertical */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_badge_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_alert_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_alert_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_alert_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_primary-color_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_primary-color_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_primary-color_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_success_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_success_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_success_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_text */

package/src/components/Badge/Badge.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Badge.module.css";
 
 export type BadgeProps = React.HTMLAttributes<HTMLDivElement>;
 

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -0,0 +1,6 @@
+/* EXEMPTIONS:
+   This component is a placeholder stub. Once fully implemented, its specific
+   tokens will be fully wired up to direct styles. */
+
+/* recursica-ignore: --recursica_ui-kit_components_breadcrumb_properties_item-gap */
+/* recursica-ignore: --recursica_ui-kit_components_breadcrumb_properties_padding */

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Breadcrumb.module.css";
 
 export type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement>;
 

package/src/components/Button/Button.module.css

@@ -112,39 +112,55 @@
 
 /* ==== SIZES ==== */
 .root[data-size="default"] {
-  border-radius: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_border-radius
-  );
   height: var(
     --recursica_ui-kit_components_button_variants_sizes_default_properties_height
   );
+}
+.root[data-size="default"][data-content="label"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_border-radius
+  );
   min-width: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_min-width
+    --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_min-width
   );
   padding: 0
     var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding
+      --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_horizontal-padding
     );
 }
-.root[data-size="default"] .labelText {
-  max-width: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_max-label-width
+.root[data-size="default"][data-content="icon-label"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_border-radius
   );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_horizontal-padding
+    );
 }
-.root[data-size="small"] {
+.root[data-size="default"][data-content="icon-only"] {
   border-radius: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_border-radius
-  );
-  height: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_height
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius
   );
   min-width: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_min-width
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_min-width
   );
   padding: 0
     var(
-      --recursica_ui-kit_components_button_variants_sizes_small_properties_horizontal-padding
+      --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_horizontal-padding
     );
+}
+.root[data-size="default"] .labelText {
+  max-width: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_max-label-width
+  );
+}
+.root[data-size="small"] {
+  height: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_height
+  );
 
   /* Override specific typography for small */
   font-family: var(
@@ -166,6 +182,42 @@
     )
   );
 }
+.root[data-size="small"][data-content="label"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_border-radius
+  );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_horizontal-padding
+    );
+}
+.root[data-size="small"][data-content="icon-label"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_border-radius
+  );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_horizontal-padding
+    );
+}
+.root[data-size="small"][data-content="icon-only"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_border-radius
+  );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_horizontal-padding
+    );
+}
 .root[data-size="small"] .labelText {
   max-width: var(
     --recursica_ui-kit_components_button_variants_sizes_small_properties_max-label-width
@@ -218,8 +270,11 @@
 }
 
 /* Icon-only logic overrides */
-.root[data-icon-only] .MuiButton-startIcon,
-.root[data-icon-only] .MuiButton-endIcon {
+.root[data-content="icon-only"] .labelText {
+  display: none;
+}
+.root[data-content="icon-only"] .MuiButton-startIcon,
+.root[data-content="icon-only"] .MuiButton-endIcon {
   margin-right: 0;
   margin-left: 0;
 }
@@ -288,10 +343,18 @@
     --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text
   );
 }
+.root[data-variant="solid"] .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_icon-color
+  );
+}
 .root[data-variant="solid"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
   color: var(
     --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
   );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_hover-elevation
+  );
 }
 
 /* OUTLINE */
@@ -312,10 +375,18 @@
     --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text
   );
 }
+.root[data-variant="outline"] .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_icon-color
+  );
+}
 .root[data-variant="outline"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
   color: var(
     --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
   );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_hover-elevation
+  );
 }
 
 /* TEXT */
@@ -336,8 +407,30 @@
     --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text
   );
 }
+.root[data-variant="text"] .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_icon-color
+  );
+}
 .root[data-variant="text"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
   color: var(
     --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-hover
   );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_hover-elevation
+  );
 }
+
+/* EXEMPTIONS:
+   These general button properties are redundant because visual mapping has been refactored
+   to content-specific variables (_content_label_sizes_... etc.) or are handled by design defaults. */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_default_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-transform */

package/src/components/Button/Button.stories.tsx

@@ -10,6 +10,9 @@ const meta: Meta<ButtonStoryProps> = {
   component: Button,
   tags: ["autodocs"],
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     variant: {
       control: "select",
       options: ["solid", "outline", "text"],

package/src/components/Button/Button.tsx

@@ -78,8 +78,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const hasStartIcon = !!icon || !!restRecord["startIcon"];
     const hasEndIcon = !!restRecord["endIcon"];
-    const isIconOnly =
-      (hasStartIcon || hasEndIcon) && !hasVisibleChildren(children);
+    const hasVisibleText = hasVisibleChildren(children);
+    const isIconOnly = (hasStartIcon || hasEndIcon) && !hasVisibleText;
+
+    let contentType = "label";
+    if (isIconOnly) {
+      contentType = "icon-only";
+    } else if (hasStartIcon || hasEndIcon) {
+      contentType = "icon-label";
+    }
 
     if (
       typeof process !== "undefined" &&
@@ -129,7 +136,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         }
         data-variant={variant}
         data-size={size}
-        {...(isIconOnly ? { "data-icon-only": "" } : {})}
+        data-content={contentType}
         {...(restRecord.loading ? { "data-loading": "true" } : {})}
         {...sanitizedProps}
         disabled={!!restRecord.disabled || !!restRecord.loading}

package/src/components/Card/Card.module.css

@@ -0,0 +1,38 @@
+/* EXEMPTIONS:
+   This component is a placeholder stub. Once fully implemented, its specific
+   tokens will be fully wired up to direct styles. */
+
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_borders_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_borders_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_colors_content */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_colors_divider-color */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_colors_footer-background */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_colors_header-background */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_colors_title */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_content-style_fontFamily */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_content-style_fontSize */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_content-style_fontStyle */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_content-style_fontWeight */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_content-style_letterSpacing */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_content-style_lineHeight */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_content-style_textCase */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_content-style_textDecoration */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_divider-size */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_elevations_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_footer-padding */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-padding */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-style_fontFamily */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-style_fontSize */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-style_fontStyle */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-style_fontWeight */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-style_letterSpacing */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-style_lineHeight */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-style_textCase */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_header-style_textDecoration */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_padding */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_section-gap */
+/* recursica-ignore: --recursica_ui-kit_components_card_properties_vertical-gutter */

package/src/components/Card/Card.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Card.module.css";
 
 export type CardProps = React.HTMLAttributes<HTMLDivElement>;
 

package/src/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,39 @@
+/* EXEMPTIONS:
+   This component is a placeholder stub. Once fully implemented, its specific
+   tokens will be fully wired up to direct styles. */
+
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-group_properties_item-gap */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-group_properties_padding */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-group_variants_layouts_side-by-side_properties_gutter */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-group_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-group_variants_layouts_side-by-side_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-group_variants_layouts_stacked_properties_label-field-gap */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-group_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_colors_disabled-text */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_label-gap */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox-item_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_background-checked */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_background-indeterminate */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_background-unchecked */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_border-checked */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_border-indeterminate */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_border-unchecked */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_disabled-background */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_disabled-border */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_disabled-icon */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_checkbox_properties_size */

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Checkbox.module.css";
 
 export type CheckboxProps = React.HTMLAttributes<HTMLDivElement>;
 

package/src/components/Chip/Chip.module.css

@@ -0,0 +1,51 @@
+/* EXEMPTIONS:
+   This component is a placeholder stub. Once fully implemented, its specific
+   tokens will be fully wired up to direct styles. */
+
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text-size */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_close-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_icon */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_close-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_icon */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_close-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_close-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_text */

package/src/components/Chip/Chip.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Chip.module.css";
 
 export type ChipProps = React.HTMLAttributes<HTMLDivElement>;
 

package/src/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,42 @@
+/* EXEMPTIONS:
+   This component is a placeholder stub. Once fully implemented, its specific
+   tokens will be fully wired up to direct styles. */
+
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_min-height */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_placeholder-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_width */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_text */

package/src/components/DatePicker/DatePicker.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./DatePicker.module.css";
 
 export type DatePickerProps = React.HTMLAttributes<HTMLDivElement>;
 

package/src/components/Dropdown/Dropdown.module.css

@@ -0,0 +1,46 @@
+/* EXEMPTIONS:
+   This component is a placeholder stub. Once fully implemented, its specific
+   tokens will be fully wired up to direct styles. */
+
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_min-height */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_trailing-icon */

package/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Dropdown.module.css";
 
 export type DropdownProps = React.HTMLAttributes<HTMLDivElement>;
 

package/src/components/FileInput/FileInput.module.css

@@ -0,0 +1,47 @@
+/* EXEMPTIONS:
+   This component is a placeholder stub. Once fully implemented, its specific
+   tokens will be fully wired up to direct styles. */
+
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_min-height */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_placeholder-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_trailing-icon */

package/src/components/FileInput/FileInput.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./FileInput.module.css";
 
 export type FileInputProps = React.HTMLAttributes<HTMLDivElement>;