@recursica/mantine-adapter 0.20.0 → 0.22.0

package/src/components/AutoComplete/AutoComplete.stories.tsx

@@ -0,0 +1,187 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AutoComplete } from "./AutoComplete";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+const meta: Meta<typeof AutoComplete> = {
+  title: "UI-Kit/AutoComplete",
+  component: AutoComplete,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`AutoComplete\` primitive provides a text input with a dropdown menu for displaying suggestions as the user types.
+
+### Architectural Decoupling
+Recursica wraps the internal Mantine \`<Autocomplete>\` component inside the \`WithReadOnlyWrapper\`, ensuring it integrates perfectly with the strict design system form architecture.
+
+### Examples
+Always structure horizontal architectures via the generic \`formLayout\` parameter.
+\`\`\`tsx
+<AutoComplete 
+  label="Country" 
+  assistiveText="Select your country of residence." 
+  data={["United States", "Canada", "Mexico", "United Kingdom", "France"]}
+  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;
+
+type Story = StoryObj<typeof AutoComplete>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    readOnly: false,
+    label: "Country Selection",
+    placeholder: "Start typing...",
+    data: [
+      "United States",
+      "Canada",
+      "Mexico",
+      "United Kingdom",
+      "France",
+      "Germany",
+      "Japan",
+      "Brazil",
+      "India",
+      "Australia",
+    ],
+    assistiveText: "Search from a predefined list of countries.",
+  },
+};
+
+export const FormsSideBySide: Story = {
+  args: {
+    label: "Primary Region",
+    placeholder: "Select region...",
+    data: ["US-East", "US-West", "EU-Central", "AP-South", "SA-East"],
+    assistiveText:
+      "Select the primary region for the deployment. This violently long string tests native textual wrapping safely mapping alongside inputs.",
+    formLayout: "side-by-side",
+  },
+};
+
+export const WithLeadingIcon: Story = {
+  args: {
+    label: "Search Projects",
+    placeholder: "Project name...",
+    data: ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"],
+    leftSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+    ),
+  },
+};
+
+export const WithTrailingIcon: Story = {
+  args: {
+    label: "Validation URL",
+    placeholder: "https://recursica.dev",
+    data: [
+      "https://recursica.dev",
+      "https://beta.recursica.dev",
+      "https://api.recursica.dev",
+    ],
+    rightSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Deployment Node",
+    placeholder: "Disabled primitive map...",
+    data: ["Node 1", "Node 2", "Node 3"],
+    disabled: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    label: "Cluster Failure",
+    placeholder: "Failing component instance...",
+    data: ["Cluster A", "Cluster B", "Cluster C"],
+    defaultValue: "Invalid Cluster",
+    error:
+      "Critical runtime node disconnect detected traversing DOM architecture.",
+    required: true,
+  },
+};
+
+export const StaticReadOnly: Story = {
+  args: {
+    label: "Static ReadOnly Review",
+    placeholder: "Ignored...",
+    data: ["Option 1", "Option 2"],
+    value: "Explicitly Uneditable Bound Output",
+    readOnly: true,
+  },
+};
+
+export const EditableReadOnly: Story = {
+  args: {
+    label: "Editable ReadOnly Review",
+    placeholder: "Ignored until active...",
+    data: ["Option 1", "Option 2"],
+    defaultValue: "Waiting for Edit Execution",
+    readOnly: true,
+    labelWithEditIcon: true,
+  },
+};

package/src/components/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,154 @@
+import React, { forwardRef } from "react";
+import {
+  Autocomplete as MantineAutocomplete,
+  type AutocompleteProps as MantineAutocompleteProps,
+  type InputWrapperProps,
+} from "@mantine/core";
+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 "./AutoComplete.module.css";
+
+export interface RecursicaAutoCompleteProps
+  extends Omit<
+      MantineAutocompleteProps,
+      "size" | "variant" | "radius" | "wrapperProps"
+    >,
+    Pick<
+      InputWrapperProps,
+      "label" | "error" | "required" | "withAsterisk" | "id"
+    >,
+    Omit<
+      RecursicaFormControlWrapperProps,
+      "controlMaxWidth" | "controlMinWidth"
+    >,
+    ReadOnlyControlProps {}
+
+export type AutoCompleteProps = RecursicaOverStyled<RecursicaAutoCompleteProps>;
+
+export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(
+  function AutoComplete(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"];
+
+    // 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,
+      option: styles.option,
+    };
+
+    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;
+      mergedClassNames.dropdown = o.dropdown
+        ? `${styles.dropdown} ${o.dropdown}`
+        : styles.dropdown;
+      mergedClassNames.option = o.option
+        ? `${styles.option} ${o.option}`
+        : styles.option;
+    }
+
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
+    return (
+      <WithReadOnlyWrapper
+        className={wrapperClass}
+        style={style as React.CSSProperties}
+        controlMaxWidth="var(--recursica_ui-kit_components_autocomplete_properties_max-width)"
+        controlMinWidth="var(--recursica_ui-kit_components_autocomplete_properties_min-width)"
+        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 ? value : defaultValue}
+        readOnlyNativeProps={props}
+        activeComponent={
+          /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
+          <MantineAutocomplete
+            ref={ref}
+            classNames={mergedClassNames}
+            disabled={disabled}
+            value={value}
+            defaultValue={defaultValue}
+            wrapperProps={{
+              "data-disabled": disabled ? "true" : undefined,
+              "data-error": error ? "true" : undefined,
+            }}
+            {...(sanitizedProps as unknown as MantineAutocompleteProps)}
+          />
+        }
+      />
+    );
+  },
+);
+
+AutoComplete.displayName = "AutoComplete";

package/src/components/Avatar/Avatar.module.css

@@ -7,6 +7,14 @@ HARDCODED VALUES:
 - Image has no explicit size tokens other than root size, assume it scales 100%
 */
 
+/* EXEMPTIONS:
+   The generic size variables below are defined in Figma but unused.
+   We explicitly style the avatar's dimensions using the dedicated width and height tokens
+   (e.g., small_properties_width and small_properties_height) for precise component layout. */
+/* recursica-ignore: --recursica_ui-kit_components_avatar_variants_sizes_default_properties_size */
+/* recursica-ignore: --recursica_ui-kit_components_avatar_variants_sizes_large_properties_size */
+/* recursica-ignore: --recursica_ui-kit_components_avatar_variants_sizes_small_properties_size */
+
 .root {
   box-sizing: border-box;
   margin: 0;
@@ -14,6 +22,7 @@ HARDCODED VALUES:
   overflow: hidden;
   position: relative;
   transition: all 0.2s ease;
+  box-shadow: var(--recursica_ui-kit_components_avatar_properties_elevation);
 
   /* HARDCODE: Remove internal Mantine custom props that interfere */
   --avatar-bd: none;
@@ -180,9 +189,13 @@ HARDCODED VALUES:
     --recursica_ui-kit_components_avatar_variants_styles_image_properties_padding
   );
 
-  /* Missing specific standard variant tokens so hardcoding typical resets */
-  background-color: transparent;
-  border-color: transparent;
+  /* Image variant styles */
+  background-color: var(
+    --recursica_ui-kit_components_avatar_variants_styles_image_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_avatar_variants_styles_image_properties_colors_border-color
+  );
 }
 
 /* Base styles for Internal Nodes */
@@ -232,55 +245,46 @@ HARDCODED VALUES:
 
 .root[data-style="icon"][data-variant="solid"] {
   border-width: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_solid_properties_border-size
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_solid_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_solid_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_solid_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_solid_properties_colors_border-color
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_solid_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_solid_properties_colors_icon-color,
-    var(
-      --recursica_ui-kit_components_avatar_variants_styles_icon_variants_solid_properties_colors_text-color
-    )
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_solid_properties_colors_icon-color
   );
 }
 
 .root[data-style="icon"][data-variant="outline"] {
   border-width: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_outline_properties_border-size
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_outline_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_outline_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_outline_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_outline_properties_colors_border-color
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_outline_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_outline_properties_colors_icon-color,
-    var(
-      --recursica_ui-kit_components_avatar_variants_styles_icon_variants_outline_properties_colors_text-color
-    )
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_outline_properties_colors_icon-color
   );
 }
 
 .root[data-style="icon"][data-variant="ghost"] {
   border-width: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_ghost_properties_border-size
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_ghost_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_ghost_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_ghost_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_ghost_properties_colors_border-color
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_ghost_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_ghost_properties_colors_icon-color,
-    var(
-      --recursica_ui-kit_components_avatar_variants_styles_icon_variants_ghost_properties_colors_text-color
-    )
+    --recursica_ui-kit_components_avatar_variants_styles_icon_variants_types_ghost_properties_colors_icon-color
   );
 }
 
@@ -296,45 +300,45 @@ HARDCODED VALUES:
 
 .root[data-style="text"][data-variant="solid"] {
   border-width: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_solid_properties_border-size
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_solid_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_solid_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_solid_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_solid_properties_colors_border-color
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_solid_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_solid_properties_colors_text-color
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_solid_properties_colors_text-color
   );
 }
 
 .root[data-style="text"][data-variant="outline"] {
   border-width: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_outline_properties_border-size
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_outline_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_outline_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_outline_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_outline_properties_colors_border-color
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_outline_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_outline_properties_colors_text-color
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_outline_properties_colors_text-color
   );
 }
 
 .root[data-style="text"][data-variant="ghost"] {
   border-width: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_ghost_properties_border-size
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_ghost_properties_border-size
   );
   background-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_ghost_properties_colors_background
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_ghost_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_ghost_properties_colors_border-color
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_ghost_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_avatar_variants_styles_text_variants_ghost_properties_colors_text-color
+    --recursica_ui-kit_components_avatar_variants_styles_text_variants_types_ghost_properties_colors_text-color
   );
 }

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

@@ -5,7 +5,7 @@
    - align-items: center
    - justify-content: center
    - text-transform: uppercase (Mantine does this, but our tokens also specify it so we map it)
-*/
+ */
 
 .root {
   /* HARDCODE: Basic structural assumptions */
@@ -47,6 +47,9 @@
   font-weight: var(
     --recursica_ui-kit_components_badge_properties_text_font-weight
   );
+  font-style: var(
+    --recursica_ui-kit_components_badge_properties_text_font-style
+  );
   letter-spacing: var(
     --recursica_ui-kit_components_badge_properties_text_letter-spacing
   );

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Breadcrumb } from "./Breadcrumb";
+import { Link } from "../Link";
 
 type BreadcrumbStoryProps = React.ComponentProps<typeof Breadcrumb> & {
   items?: string[];
@@ -35,17 +36,9 @@ const meta: Meta<BreadcrumbStoryProps> = {
   render: ({ items, children, ...args }) => {
     const mappedChildren = items
       ? items.map((label, index) => (
-          <a
-            href="#"
-            key={index}
-            style={{
-              color:
-                "var(--recursica_brand_palettes_primary_default_color_tone)",
-              textDecoration: "none",
-            }}
-          >
+          <Link href="#" key={index}>
             {label}
-          </a>
+          </Link>
         ))
       : children;