@recursica/mantine-adapter 0.21.0 → 0.23.0

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,12 +1,61 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { DatePicker } from "./DatePicker";
-import { ComingSoon } from "@recursica/storybook-template";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
 
 const meta: Meta<typeof DatePicker> = {
-  title: "UI-Kit/🚧 DatePicker",
+  title: "UI-Kit/DatePicker",
   component: DatePicker,
   tags: ["autodocs"],
-  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`DatePicker\` primitive provides a unified calendar date selection input integrated directly into the \`FormControlWrapper\` architecture.
+
+### Architectural Decoupling
+Recursica overrides the internal Mantine \`DatePickerInput\` wrapper defaults, safely injecting the date picker into our rigid structural layout systems. State modifiers (e.g. Focus, Errors, ReadOnly) hook seamlessly back onto our native CSS mapping architecture.
+
+### Examples
+Always structure horizontal architectures via the generic \`formLayout\` parameter.
+\`\`\`tsx
+<DatePicker 
+  label="Start Date" 
+  assistiveText="Select the deployment kick-off date." 
+  formLayout="stacked" 
+/>
+\`\`\`
+`,
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+    disabled: {
+      control: "boolean",
+      description:
+        "Maps the formal disabled variable states structurally to the input core.",
+    },
+    error: {
+      control: "text",
+      description:
+        "Applies the strict error string boundary rendering invalid structures seamlessly.",
+    },
+    required: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+    assistiveText: {
+      control: "text",
+    },
+    readOnly: {
+      control: "boolean",
+      description:
+        "Toggles structural read-only data presentation explicitly blocking standard component bindings.",
+    },
+  },
 };
 
 export default meta;
@@ -14,5 +63,79 @@ export default meta;
 type Story = StoryObj<typeof DatePicker>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="DatePicker" />,
+  args: {
+    disabled: false,
+    label: "Project Deadline",
+    placeholder: "Select a deadline...",
+    assistiveText: "Specify the absolute cutoff for code submission.",
+  },
+};
+
+export const FormsSideBySide: Story = {
+  args: {
+    label: "Incident Start Date",
+    placeholder: "Pick date...",
+    assistiveText: "When did the incident originally occur?",
+    formLayout: "side-by-side",
+  },
+};
+
+export const WithLeadingIcon: Story = {
+  args: {
+    label: "Launch Date",
+    placeholder: "Select launch date...",
+    leftSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+        <line x1="16" y1="2" x2="16" y2="6"></line>
+        <line x1="8" y1="2" x2="8" y2="6"></line>
+        <line x1="3" y1="10" x2="21" y2="10"></line>
+      </svg>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Date Range",
+    placeholder: "Disabled selection...",
+    disabled: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    label: "Execution Date",
+    placeholder: "Pick a valid date...",
+    error: "The chosen date conflicts with an existing deployment freeze.",
+    required: true,
+  },
+};
+
+export const StaticReadOnly: Story = {
+  args: {
+    label: "Static ReadOnly Review",
+    placeholder: "Ignored...",
+    value: new Date("2026-05-21"),
+    readOnly: true,
+  },
+};
+
+export const EditableReadOnly: Story = {
+  args: {
+    label: "Editable ReadOnly Review",
+    placeholder: "Ignored until active...",
+    defaultValue: new Date("2026-06-01"),
+    readOnly: true,
+    labelWithEditIcon: true,
+  },
 };

package/src/components/DatePicker/DatePicker.tsx

@@ -1,7 +1,168 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { DatePickerInput, type DatePickerInputProps } from "@mantine/dates";
+import { type ReadOnlyControlProps } from "@recursica/adapter-common";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
+import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
+import styles from "./DatePicker.module.css";
 
-export type DatePickerProps = React.HTMLAttributes<HTMLDivElement>;
+export interface RecursicaDatePickerProps
+  extends Omit<
+      DatePickerInputProps,
+      | "size"
+      | "variant"
+      | "radius"
+      | "wrapperProps"
+      | "label"
+      | "error"
+      | "required"
+      | "withAsterisk"
+      | "id"
+      | "description"
+    >,
+    Pick<
+      DatePickerInputProps,
+      "label" | "error" | "required" | "withAsterisk" | "id"
+    >,
+    Omit<
+      RecursicaFormControlWrapperProps,
+      "controlMaxWidth" | "controlMinWidth"
+    >,
+    ReadOnlyControlProps {}
 
-export const DatePicker: React.FC<DatePickerProps> = (props) => {
-  return <div {...props}>DatePicker</div>;
-};
+export type DatePickerProps = RecursicaOverStyled<RecursicaDatePickerProps>;
+
+export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
+  function DatePicker(props, ref) {
+    const {
+      overStyled = false,
+      formLayout = "stacked",
+
+      // Label & Wrapper Maps
+      labelSize,
+      labelAlignment,
+      labelOptionalText,
+      labelWithEditIcon,
+      onLabelEditClick,
+
+      label,
+      assistiveText,
+      assistiveWithIcon,
+      error,
+      required,
+      withAsterisk,
+      id,
+      className,
+      style,
+      disabled,
+      readOnly,
+      readOnlyComponent,
+      emptyValueComponent,
+      value,
+      defaultValue,
+      ...rest
+    } = props;
+
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Delete prohibited sizing hooks from bypassing variables natively
+    delete restRecord["size"];
+    delete restRecord["variant"];
+    delete restRecord["radius"];
+    delete restRecord["description"]; // Managed by FormControlWrapper via assistiveText
+
+    // Securely map core native blocks down ensuring nested CSS modules map precisely
+    const mergedClassNames: Partial<Record<string, string>> = {
+      wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+      input: styles.input,
+      section: styles.section,
+      dropdown: styles.dropdown,
+      day: styles.day,
+      calendarHeader: styles.calendarHeader,
+    };
+
+    const classNamesProp = restRecord.classNames;
+    if (
+      classNamesProp &&
+      typeof classNamesProp === "object" &&
+      !Array.isArray(classNamesProp)
+    ) {
+      const o = classNamesProp as Partial<Record<string, string>>;
+      mergedClassNames.wrapper = o.wrapper
+        ? `${styles.root} ${o.wrapper}`
+        : styles.root;
+      mergedClassNames.input = o.input
+        ? `${styles.input} ${o.input}`
+        : styles.input;
+      mergedClassNames.section = o.section
+        ? `${styles.section} ${o.section}`
+        : styles.section;
+    }
+
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
+    return (
+      <WithReadOnlyWrapper
+        className={wrapperClass}
+        style={style as React.CSSProperties}
+        controlMaxWidth={undefined}
+        controlMinWidth={undefined}
+        overStyled={overStyled as true}
+        formLayout={formLayout}
+        labelSize={labelSize}
+        labelAlignment={labelAlignment}
+        labelOptionalText={labelOptionalText}
+        labelWithEditIcon={labelWithEditIcon}
+        onLabelEditClick={onLabelEditClick}
+        label={label}
+        assistiveText={assistiveText}
+        assistiveWithIcon={assistiveWithIcon}
+        error={error}
+        required={required}
+        withAsterisk={withAsterisk}
+        id={id}
+        readOnly={readOnly}
+        readOnlyComponent={readOnlyComponent}
+        emptyValueComponent={emptyValueComponent}
+        readOnlyType="text"
+        readOnlyValue={
+          value !== undefined
+            ? String(value)
+            : defaultValue
+              ? String(defaultValue)
+              : undefined
+        }
+        readOnlyNativeProps={props}
+        activeComponent={
+          /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
+          <DatePickerInput
+            ref={ref}
+            classNames={mergedClassNames}
+            disabled={disabled}
+            // @ts-expect-error Mantine 8 DatePickerInput types are overly complex for unified wrappers
+            value={value}
+            // @ts-expect-error Mantine 8 DatePickerInput types are overly complex for unified wrappers
+            defaultValue={defaultValue}
+            label={undefined} // Disable Mantine's native label
+            description={undefined} // Disable Mantine's native description
+            error={undefined} // Disable Mantine's native error text (handled by wrapper)
+            withAsterisk={false} // Handled by wrapper
+            wrapperProps={{
+              "data-disabled": disabled ? "true" : undefined,
+              "data-error": error ? "true" : undefined,
+            }}
+            {...(sanitizedProps as unknown as DatePickerInputProps)}
+          />
+        }
+      />
+    );
+  },
+);
+
+DatePicker.displayName = "DatePicker";

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

@@ -1,3 +1,25 @@
+/* EXEMPTIONS:
+   - state-specific border-size variables are ignored because a uniform 1px border is applied globally to prevent 
+     unexpected layout shift or flickering during focus, disabled, or error state transitions. */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_border-size */
+
+/* LAYOUT SPACING OVERRIDES:
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
 /* HARDCODED VALUES:
    - border-width: 1px. Native geometric boundary for the input box.
    - border-style: solid. Native structural rendering rule.
@@ -14,22 +36,14 @@
 
   /* Override Mantine native Input variables governing section spacing padding mathematics safely */
   --input-left-section-size: calc(
-    var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_dropdown_properties_horizontal-padding
-          ) *
-          2
-      )
+    var(--recursica_ui-kit_components_dropdown_properties_horizontal-padding) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-text-gap)
   );
   --input-right-section-size: calc(
-    var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_dropdown_properties_horizontal-padding
-          ) *
-          2
-      )
+    var(--recursica_ui-kit_components_dropdown_properties_horizontal-padding) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-text-gap)
   );
 }
 
@@ -118,10 +132,23 @@
 .section {
   display: flex;
   align-items: center;
-  justify-content: center;
   height: 100%;
 }
 
+.section[data-position="left"] {
+  justify-content: flex-start;
+  padding-left: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  );
+}
+
+.section[data-position="right"] {
+  justify-content: flex-end;
+  padding-right: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  );
+}
+
 .section :global(svg) {
   width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
   height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -29,6 +29,9 @@ const meta: Meta<DropdownStoryProps> = {
     clearable: false,
   },
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     ...formControlArgTypes,
     readOnly: {
       control: "boolean",

package/src/components/Dropdown/Dropdown.tsx

@@ -113,9 +113,13 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       width: containerWidth || "100%",
     };
 
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
     return (
       <WithReadOnlyWrapper
-        className={className}
+        className={wrapperClass}
         style={injectedStyles}
         controlMaxWidth="var(--recursica_ui-kit_components_dropdown_properties_max-width)"
         controlMinWidth="var(--recursica_ui-kit_components_dropdown_properties_min-width)"

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

@@ -0,0 +1,50 @@
+/*
+ * EXEMPTIONS:
+ * - FileInput is a "Coming Soon" stub component.
+ * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
+ * - The following tokens generated by Figma are ignored until the component is fully built.
+ */
+
+/* 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_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_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_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_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_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/FileUpload/FileUpload.module.css

@@ -0,0 +1,43 @@
+/*
+ * EXEMPTIONS:
+ * - FileUpload is a "Coming Soon" stub component.
+ * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
+ * - The following tokens generated by Figma are ignored until the component is fully built.
+ */
+
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-style */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_item-gap */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_list-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_padding */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_vertical-element-gap */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_upload-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_upload-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_upload-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_upload-icon */

package/src/components/FormControlLayout/FormControlLayout.module.css

@@ -3,6 +3,10 @@
 .root {
   display: flex;
   margin: 0; /* Hardcoded structural reset */
+  margin-bottom: var(
+    --form-control-margin-bottom,
+    var(--recursica_ui-kit_globals_form_properties_vertical-item-gap, 0)
+  );
   padding: 0; /* Hardcoded structural reset */
   max-width: var(--form-control-max-width, 100%);
   min-width: var(--form-control-min-width, auto);
@@ -31,7 +35,10 @@
 .root[data-form-layout="stacked"] .leftSection {
   padding-bottom: var(
     --recursica_ui-kit_components_label_variants_layouts_stacked_properties_bottom-padding,
-    8px
+    var(
+      --recursica_ui-kit_globals_form_properties_label-field-gap-vertical,
+      8px
+    )
   );
   min-height: var(
     --recursica_ui-kit_components_label_variants_layouts_stacked_properties_min-height,
@@ -56,7 +63,10 @@
   /* In side-by-side, the label column exists to the left of its input, so we use the gutter gap here. */
   margin-right: var(
     --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_gutter,
-    16px
+    var(
+      --recursica_ui-kit_globals_form_properties_label-field-gap-horizontal,
+      16px
+    )
   );
 }
 

package/src/components/FormControlWrapper/FormControlWrapper.module.css

@@ -1,5 +1,72 @@
 /* FormControlWrapper.module.css */
 
+.root {
+  /* Global Form Field Colors */
+  --form-field-background: var(
+    --recursica_ui-kit_globals_form_field_colors_background
+  );
+  --form-field-background-read-only: var(
+    --recursica_ui-kit_globals_form_field_colors_background-read-only
+  );
+  --form-field-border: var(--recursica_ui-kit_globals_form_field_colors_border);
+  --form-field-border-error: var(
+    --recursica_ui-kit_globals_form_field_colors_border-error
+  );
+  --form-field-border-focus: var(
+    --recursica_ui-kit_globals_form_field_colors_border-focus
+  );
+  --form-field-border-selected: var(
+    --recursica_ui-kit_globals_form_field_colors_border-selected
+  );
+  --form-field-disabled-background: var(
+    --recursica_ui-kit_globals_form_field_colors_disabled-background
+  );
+  --form-field-disabled-text: var(
+    --recursica_ui-kit_globals_form_field_colors_disabled-text
+  );
+  --form-field-icon: var(--recursica_ui-kit_globals_form_field_colors_icon);
+  --form-field-placeholder-text-opacity: var(
+    --recursica_ui-kit_globals_form_field_colors_placeholder-text-opacity
+  );
+  --form-field-text-valued: var(
+    --recursica_ui-kit_globals_form_field_colors_text-valued
+  );
+
+  /* Global Form Field Geometric Sizes */
+  --form-field-border-radius: var(
+    --recursica_ui-kit_globals_form_field_size_border-radius
+  );
+  --form-field-border-size-default: var(
+    --recursica_ui-kit_globals_form_field_size_border-size-default
+  );
+  --form-field-border-size-focus: var(
+    --recursica_ui-kit_globals_form_field_size_border-size-focus
+  );
+  --form-field-horizontal-padding: var(
+    --recursica_ui-kit_globals_form_field_size_horizontal-padding
+  );
+  --form-field-icon-size: var(--recursica_ui-kit_globals_form_field_size_icon);
+  --form-field-icon-text-gap: var(
+    --recursica_ui-kit_globals_form_field_size_icon-text-gap
+  );
+  --form-field-max-width: var(
+    --recursica_ui-kit_globals_form_field_size_max-width
+  );
+  --form-field-min-width: var(
+    --recursica_ui-kit_globals_form_field_size_min-width
+  );
+  --form-field-single-line-input-height: var(
+    --recursica_ui-kit_globals_form_field_size_single-line-input-height
+  );
+  --form-field-vertical-gutter: var(
+    --recursica_ui-kit_globals_form_field_size_vertical-gutter
+  );
+  --form-field-vertical-padding: var(
+    --recursica_ui-kit_globals_form_field_size_vertical-padding
+  );
+  color: var(--form-field-text-valued);
+}
+
 .inputSection {
   display: flex;
   flex-direction: column;

package/src/components/HoverCard/HoverCard.module.css

@@ -6,7 +6,12 @@
      the Recursica beak-size token (16px). See COMPONENT_ISSUES.md for details.
    - All structural layout (display, position, overflow) is deferred to Mantine's native
      behavior. We only override visual design tokens (colors, typography, spacing, borders).
-*/
+/* EXEMPTIONS:
+   - beak-size is ignored here because Mantine's popover arrows compute their sizing and positional offsets
+     dynamically within the React rendering engine (requires inline pixel number rather than standard CSS variables).
+     The beak size is checked in JS against a fixed value of 16px. If this variable changes, the TSX components
+     need to be reviewed/re-compiled. */
+/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_beak-size = 16px */
 
 /* ======================================
    DROPDOWN CONTAINER
@@ -14,14 +19,14 @@
 
 .dropdown {
   background-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_background
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_background
   );
   border-style: solid; /* HARDCODE: Mantine Paper does not set border-style natively */
   border-width: var(
     --recursica_ui-kit_components_hover-card-popover_properties_border-size
   );
   border-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_border-color
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color
   );
   border-radius: var(
     --recursica_ui-kit_components_hover-card-popover_properties_border-radius
@@ -70,7 +75,9 @@
     --recursica_ui-kit_components_hover-card-popover_properties_content-text_text-transform
   );
 
-  color: var(--recursica_ui-kit_components_hover-card-popover_colors_content);
+  color: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_content
+  );
 }
 
 /* ======================================
@@ -79,6 +86,6 @@
 
 .arrow {
   border-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_border-color
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color
   );
 }