@recursica/mui-adapter 0.3.0 → 0.5.0

package/src/components/Loader/Loader.stories.tsx

@@ -1,35 +1,103 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Loader } from "./Loader";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Layer } from "@recursica/adapter-common";
 
-const meta: Meta<typeof Loader> = {
-  title: "UI-Kit/🚧 Loader",
-  component: Loader,
+type LoaderStoryArgs = React.ComponentProps<typeof Loader> & {
+  layer?: 0 | 1 | 2 | 3;
+};
+
+const meta: Meta<LoaderStoryArgs> = {
+  title: "UI-Kit/Loader",
+  component: Loader as React.ComponentType<LoaderStoryArgs>,
   tags: ["autodocs"],
   parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
+    docs: {
+      description: {
+        component:
+          "The Loader bridges the Recursica UI-Kit `loader` variables to the generic primitive, rendering deterministic sizes and variants visually mapped strictly from the explicit design boundary tokens.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["oval", "bars", "dots"],
+      description: "The structural layout variant of the loading indicator",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "small", "default", "large"],
+      description:
+        "Scales the dimensional and thickness layout constrained to the explicit UI variables",
+    },
+    color: {
+      control: "color",
+      description:
+        "Optional inline dynamic color override spanning the token defaults",
+    },
+    layer: {
+      control: { type: "range", min: 0, max: 3, step: 1 },
+      description:
+        "Applies a wrapping context to observe rendering logic externally",
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof Loader>;
+
+type Story = StoryObj<LoaderStoryArgs>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Loader" />,
+  args: {
+    variant: "oval",
+    size: "default",
+    layer: 0,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={layer ?? 0} style={{ padding: "24px" }}>
+      <Loader {...args} />
+    </Layer>
+  ),
+};
+
+export const StaticOvalDefault: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const StaticBarsLarge: Story = {
+  args: {
+    variant: "bars",
+    size: "large",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const StaticDotsSmall: Story = {
+  args: {
+    variant: "dots",
+    size: "sm",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const LayerTwoOval: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={2} style={{ padding: "24px" }}>
+      <Loader {...args} />
+    </Layer>
+  ),
 };

package/src/components/Loader/Loader.tsx

@@ -1,7 +1,71 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+  type RecursicaSize,
+} from "../../utils/filterStylingProps";
+import styles from "./Loader.module.css";
 
-export type LoaderProps = React.HTMLAttributes<HTMLDivElement>;
+export interface RecursicaLoaderProps {
+  /** Map to the component styles defined in variables */
+  variant?: "oval" | "bars" | "dots";
+  /** Map to Recursica sizes */
+  size?: "sm" | "md" | "lg" | RecursicaSize;
+}
 
-export const Loader: React.FC<LoaderProps> = (props) => {
-  return <div {...props}>Loader</div>;
-};
+export type LoaderProps = RecursicaOverStyled<
+  React.HTMLAttributes<HTMLSpanElement> & RecursicaLoaderProps
+>;
+
+export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
+  { variant = "oval", size = "default", overStyled = false, ...rest },
+  ref,
+) {
+  const mapSize = {
+    sm: "small",
+    md: "default",
+    lg: "large",
+    small: "small",
+    default: "default",
+    large: "large",
+  } as const;
+
+  const resolvedSize = mapSize[size] || "default";
+
+  // Strip all visual override injections unless developer has specifically opted into overStyling.
+  // External layout props like margins are safely preserved.
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  const renderChildren = () => {
+    if (variant === "bars" || variant === "dots") {
+      return (
+        <>
+          <span />
+          <span />
+          <span />
+        </>
+      );
+    }
+    return null; // Oval is handled purely via CSS ::after
+  };
+
+  return (
+    <span
+      ref={ref}
+      data-variant={variant}
+      data-size={resolvedSize}
+      {...sanitizedProps}
+      className={finalClass}
+    >
+      {renderChildren()}
+    </span>
+  );
+});
+
+Loader.displayName = "Loader";

package/src/components/Menu/Menu.module.css

@@ -0,0 +1,53 @@
+/* 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_menu-item_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_background */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_supporting-text-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_text */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_trailing-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_background */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_supporting-text-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_text */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_trailing-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_icon-leading-size */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_icon-trailing-size */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_supporting-text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_supporting-text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_supporting-text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_supporting-text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_supporting-text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_supporting-text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_supporting-text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_supporting-text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_colors_divider-color */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_divider-height */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_divider-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_max-height */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_menu_properties_min-width */

package/src/components/Menu/Menu.tsx

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

package/src/components/Modal/Modal.module.css

@@ -0,0 +1,36 @@
+/* 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_modal_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_button-gap */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_content */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_scroll-divider */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_title */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_fontFamily */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_fontSize */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_fontStyle */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_fontWeight */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_letterSpacing */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_lineHeight */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_textCase */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style_textDecoration */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_fontFamily */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_fontSize */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_fontStyle */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_fontWeight */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_letterSpacing */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_lineHeight */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_textCase */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style_textDecoration */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_max-height */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_min-height */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_scroll-divider-thickness */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_vertical-padding */

package/src/components/Modal/Modal.tsx

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

package/src/components/NumberInput/NumberInput.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_number-input_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_min-height */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_placeholder-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_leading-icon */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_trailing-icon */

package/src/components/NumberInput/NumberInput.tsx

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

package/src/components/Pagination/Pagination.module.css

@@ -0,0 +1,81 @@
+/* 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_pagination_properties_active-pages_subcomponent_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_text-hover */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_icon */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_max-label-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_colors_dots-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_text-hover */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_icon */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_max-label-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_item-gap */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_text-hover */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-elevation */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_icon */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_max-label-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_text-transform */

package/src/components/Pagination/Pagination.tsx

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

package/src/components/Panel/Panel.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_panel_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_content */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_divider-color */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_header-footer-background */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_colors_title */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_fontFamily */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_fontSize */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_fontStyle */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_fontWeight */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_letterSpacing */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_lineHeight */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_textCase */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-style_textDecoration */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_content-vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_divider-size */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_footer-button-gap */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-close-gap */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-footer-horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-footer-vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_fontFamily */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_fontSize */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_fontStyle */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_fontWeight */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_letterSpacing */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_lineHeight */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_textCase */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_header-style_textDecoration */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_panel_properties_min-width */

package/src/components/Panel/Panel.tsx

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

package/src/components/Radio/Radio.module.css

@@ -0,0 +1,37 @@
+/* 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_radio-button-group_properties_item-gap */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-group_properties_padding */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-group_variants_layouts_side-by-side_properties_gutter */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-group_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-group_variants_layouts_side-by-side_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_label-field-gap */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_colors_disabled-text */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_label-gap */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button-item_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_colors_background-selected */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_colors_background-unselected */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_colors_border-selected */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_colors_border-unselected */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_colors_disabled-background */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_colors_disabled-border */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_colors_disabled-icon */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_disabled-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_radio-button_properties_size */

package/src/components/Radio/Radio.tsx

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

package/src/components/ReadOnlyField/ReadOnlyField.module.css

@@ -0,0 +1,16 @@
+/* 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_read-only-field_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_min-height */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_read-only-field_variants_layouts_stacked_properties_top-bottom-margin */

package/src/components/ReadOnlyField/ReadOnlyField.tsx

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

package/src/components/SegmentedControl/SegmentedControl.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_segmented-control-item_properties_item_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_item_height */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_item_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_item_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected-text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected-text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_text-color */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_selected_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_text-color */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_unselected_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_colors_divider-color */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_divider-size */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_elevation */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_item-gap */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_padding-horizontal */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control_properties_padding-vertical */