@recursica/mantine-adapter 0.10.0 → 0.11.0

package/src/components/FormControlWrapper/FormControlWrapper.tsx

@@ -1,14 +1,17 @@
 import React, { forwardRef, useId } from "react";
-import { type InputWrapperProps, Box } from "@mantine/core";
+import { type InputWrapperProps } from "@mantine/core";
 import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { Label, type RecursicaLabelProps } from "../Label/Label";
+import { FormControlLayout } from "../FormControlLayout/FormControlLayout";
 import { AssistiveElement } from "../AssistiveElement/AssistiveElement";
 import styles from "./FormControlWrapper.module.css";
 
 export interface RecursicaFormControlWrapperProps extends RecursicaLabelProps {
+  /** Overall structural flow mapping the Form Control natively cascading down to Label and Input logic. */
+  formLayout?: "stacked" | "side-by-side";
   /** Securely replaces standard Mantine descriptions safely providing standard Assistive properties. */
   assistiveText?: React.ReactNode;
   /** Explicit toggle to suppress the Info icon rendering natively alongside the assistiveText. Defaults to true. */
@@ -93,51 +96,35 @@ export const FormControlWrapper = forwardRef<
       )
     : children;
 
+  const labelNode = label ? (
+    <Label
+      id={id} // Directly binds ARIA references down
+      labelAlignment={labelAlignment}
+      labelOptionalText={labelOptionalText}
+      labelWithEditIcon={labelWithEditIcon}
+      labelActionArea={labelActionArea}
+      onLabelEditClick={onLabelEditClick}
+      required={withAsterisk ?? required}
+      // Manually propagate relevant structural logic if underlying groups dictate Label to act as generic wrapper
+      {...(labelElement === "div" ? { as: "div" } : {})}
+    >
+      {label}
+    </Label>
+  ) : undefined;
+
   return (
-    <Box
+    <FormControlLayout
       ref={ref}
       className={finalClass}
-      data-form-layout={formLayout || "stacked"}
-      data-form-alignment={labelAlignment || "left"}
-      style={
-        {
-          ...((restRecord.style as React.CSSProperties) || {}),
-          ...(controlMaxWidth
-            ? { "--form-control-max-width": controlMaxWidth }
-            : {}),
-          ...(controlMinWidth
-            ? { "--form-control-min-width": controlMinWidth }
-            : {}),
-        } as React.CSSProperties
-      }
+      formLayout={formLayout}
+      labelSize={labelSize}
+      controlMaxWidth={controlMaxWidth}
+      controlMinWidth={controlMinWidth}
+      leftSection={labelNode}
       {...restRecord}
     >
-      {/* 
-        Section 1: The Native Custom Label
-        Bypasses Mantine's built-in Input.Wrapper Label entirely in favor of explicit Recursica formatting.
-      */}
-      {label && (
-        <div className={styles.labelSection}>
-          <Label
-            id={id} // Directly binds ARIA references down
-            formLayout={formLayout}
-            labelSize={labelSize}
-            labelAlignment={labelAlignment}
-            labelOptionalText={labelOptionalText}
-            labelWithEditIcon={labelWithEditIcon}
-            labelActionArea={labelActionArea}
-            onLabelEditClick={onLabelEditClick}
-            required={withAsterisk ?? required}
-            // Manually propagate relevant structural logic if underlying groups dictate Label to act as generic wrapper
-            {...(labelElement === "div" ? { as: "div" } : {})}
-          >
-            {label}
-          </Label>
-        </div>
-      )}
-
       {/*
-        Section 2: The Core Input Wrapper & Controls
+        The Core Input Wrapper & Controls
         Nakedly inject the actual field elements alongside natively bridged Assistive components mapped dynamically.
       */}
       <div className={styles.inputSection}>
@@ -163,7 +150,7 @@ export const FormControlWrapper = forwardRef<
           </AssistiveElement>
         )}
       </div>
-    </Box>
+    </FormControlLayout>
   );
 });
 

package/src/components/Group/Group.stories.tsx

@@ -81,7 +81,8 @@ export default meta;
 type Story = StoryObj<GroupStoryProps>;
 
 export const Default: Story = {
-  render: (args) => (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
     <Group {...args}>
       <Button variant="solid">Primary</Button>
       <Button variant="outline">Secondary</Button>
@@ -94,7 +95,8 @@ export const StaticGapSmall: Story = {
   args: {
     gap: "rec-sm",
   },
-  render: (args) => (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
     <Group {...args}>
       <Button variant="solid">Item 1</Button>
       <Button variant="solid">Item 2</Button>
@@ -107,7 +109,8 @@ export const StaticGapLarge: Story = {
   args: {
     gap: "rec-xl",
   },
-  render: (args) => (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
     <Group {...args}>
       <Button variant="solid">Item 1</Button>
       <Button variant="solid">Item 2</Button>

package/src/components/Label/Label.module.css

@@ -23,43 +23,6 @@
   text-align: right;
 }
 
-.root[data-layout="stacked"] {
-  padding-bottom: var(
-    --recursica_ui-kit_components_label_variants_layouts_stacked_properties_bottom-padding
-  );
-  min-height: var(
-    --recursica_ui-kit_components_label_variants_layouts_stacked_properties_min-height
-  );
-}
-
-.root[data-layout="side-by-side"] {
-  padding-top: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding
-  );
-  padding-bottom: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding
-  );
-  min-height: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_min-height
-  );
-  /* In side-by-side, the label 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
-  );
-}
-
-.root[data-layout="side-by-side"][data-size="default"] {
-  width: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_variants_sizes_default_properties_width
-  );
-}
-
-.root[data-layout="side-by-side"][data-size="small"] {
-  width: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_variants_sizes_small_properties_width
-  );
-}
-
 .labelText {
   order: 1;
   font-family: var(

package/src/components/Label/Label.stories.tsx

@@ -40,7 +40,7 @@ const renderWithTextField = ({ children, ...args }: LabelStoryProps) => (
 export const Default: Story = {
   args: {
     children: "Dynamic Label (Controls)",
-    formLayout: "stacked",
+
     labelSize: "default",
     labelAlignment: "left",
     required: false,
@@ -53,7 +53,6 @@ export const Default: Story = {
 export const StackedDefault: Story = {
   args: {
     children: "Email Address",
-    formLayout: "stacked",
   },
   render: renderWithTextField,
 };
@@ -61,7 +60,7 @@ export const StackedDefault: Story = {
 export const StackedRequired: Story = {
   args: {
     children: "Primary Network Node",
-    formLayout: "stacked",
+
     required: true,
   },
   render: renderWithTextField,
@@ -70,7 +69,7 @@ export const StackedRequired: Story = {
 export const StackedWithEditIcon: Story = {
   args: {
     children: "Environment Variables",
-    formLayout: "stacked",
+
     labelWithEditIcon: true,
   },
   render: renderWithTextField,
@@ -79,7 +78,7 @@ export const StackedWithEditIcon: Story = {
 export const SideBySideDefault: Story = {
   args: {
     children: "Status",
-    formLayout: "side-by-side",
+
     labelSize: "default",
   },
   render: renderWithTextField,
@@ -88,7 +87,7 @@ export const SideBySideDefault: Story = {
 export const RequiredSuppressesOptionalText: Story = {
   args: {
     children: "Full Name",
-    formLayout: "stacked",
+
     required: true,
     labelOptionalText: "This should not render",
   },
@@ -98,7 +97,7 @@ export const RequiredSuppressesOptionalText: Story = {
 export const BooleanOptionalText: Story = {
   args: {
     children: "Middle Initial",
-    formLayout: "side-by-side",
+
     labelOptionalText: true,
   },
   render: renderWithTextField,
@@ -107,7 +106,7 @@ export const BooleanOptionalText: Story = {
 export const WithEditIcon: Story = {
   args: {
     children: "Shipping Address",
-    formLayout: "side-by-side",
+
     labelWithEditIcon: true,
   },
   render: renderWithTextField,
@@ -116,7 +115,7 @@ export const WithEditIcon: Story = {
 export const LayerOneSideBySide: Story = {
   args: {
     children: "Configuration",
-    formLayout: "side-by-side",
+
     labelWithEditIcon: true,
   },
   render: renderWithTextField,

package/src/components/Label/Label.tsx

@@ -7,10 +7,8 @@ import {
 import styles from "./Label.module.css";
 
 export interface RecursicaLabelProps {
-  /** Overall structural flow mapping the Form Control natively cascading down to Label and Input logic. */
-  formLayout?: "stacked" | "side-by-side";
   /** Specifies the sizing metrics natively mapping the Label boundaries. */
-  labelSize?: "default" | "small";
+  labelSize?: "default" | "small" | "md";
   /** Overall alignment directive for the label strings natively forcing Left/Right justification. */
   labelAlignment?: "left" | "right";
   /** Injects an indicator text block alongside the label. Can be boolean (`true` maps to '(Optional)') or custom React nodes. */
@@ -29,7 +27,6 @@ export type LabelProps = RecursicaOverStyled<
 
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   {
-    formLayout = "stacked",
     labelSize = "default",
     labelAlignment,
     required = false,
@@ -43,8 +40,7 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   },
   ref,
 ) {
-  const resolvedAlignment =
-    labelAlignment || (formLayout === "side-by-side" ? "right" : "left");
+  const resolvedAlignment = labelAlignment || "left";
 
   let resolvedOptionalText: React.ReactNode | undefined;
   if (!required) {
@@ -85,7 +81,6 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
       ref={ref}
       className={finalClass}
       classNames={mergedClassNames}
-      data-layout={formLayout}
       data-size={labelSize}
       data-alignment={resolvedAlignment}
       required={required && !labelWithEditIcon}

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

@@ -54,7 +54,8 @@ export const Default: Story = {
     size: "default",
     layer: 0,
   },
-  render: ({ layer, ...args }) => (
+  // 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>
@@ -66,7 +67,8 @@ export const StaticOvalDefault: Story = {
     variant: "oval",
     size: "default",
   },
-  render: (args) => <Loader {...args} />,
+  // 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 = {
@@ -74,7 +76,8 @@ export const StaticBarsLarge: Story = {
     variant: "bars",
     size: "large",
   },
-  render: (args) => <Loader {...args} />,
+  // 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 = {
@@ -82,7 +85,8 @@ export const StaticDotsSmall: Story = {
     variant: "dots",
     size: "sm",
   },
-  render: (args) => <Loader {...args} />,
+  // 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 = {
@@ -90,7 +94,8 @@ export const LayerTwoOval: Story = {
     variant: "oval",
     size: "default",
   },
-  render: (args) => (
+  // 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/NumberInput/NumberInput.stories.tsx

@@ -6,11 +6,7 @@ const meta: Meta<typeof NumberInput> = {
   title: "UI-Kit/🚧 NumberInput",
   component: NumberInput,
   tags: ["autodocs"],
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-  },
+  argTypes: {},
 };
 
 export default meta;

package/src/components/Radio/Radio.stories.tsx

@@ -18,9 +18,6 @@ The \`Radio\` component represents a fundamental standalone boolean selection no
     },
   },
   argTypes: {
-    disabled: {
-      control: "boolean",
-    },
     checked: {
       control: "boolean",
     },
@@ -33,6 +30,8 @@ The \`Radio\` component represents a fundamental standalone boolean selection no
     defaultChecked: {
       control: "boolean",
     },
+    controlMaxWidth: { table: { disable: true } },
+    controlMinWidth: { table: { disable: true } },
   },
 };
 
@@ -46,6 +45,13 @@ export const Default: Story = {
   },
 };
 
+export const SideBySideLayout: Story = {
+  args: {
+    label: "Opt-in form alignment",
+    formLayout: "side-by-side",
+  },
+};
+
 export const CheckedState: Story = {
   args: {
     ...Default.args,
@@ -68,9 +74,17 @@ export const DisabledChecked: Story = {
   },
 };
 
-export const ReadOnlyStandalone: Story = {
-  args: {
-    readOnly: true,
-    readOnlyComponent: <span>Locked Native Value</span>,
-  },
+export const ReadOnly: Story = {
+  args: {},
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "24px",
+      }}
+    >
+      <Radio label="Account Type" defaultChecked readOnly />
+    </div>
+  ),
 };

package/src/components/Radio/Radio.tsx

@@ -9,6 +9,12 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
+import { type RequireAccessibleLabel } from "../../utils/RequireAccessibleLabel";
+import {
+  FormControlLayout,
+  type FormControlLayoutProps,
+} from "../FormControlLayout/FormControlLayout";
+
 import styles from "./Radio.module.css";
 
 const RadioIcon: React.FC<{
@@ -26,11 +32,17 @@ const RadioIcon: React.FC<{
   </svg>
 );
 
-export type RecursicaRadioProps = Omit<
-  MantineRadioProps,
-  "size" | "color" | "radius" | "iconColor" | "variant"
-> &
-  ReadOnlyControlProps;
+export type RecursicaRadioProps = RequireAccessibleLabel<
+  Omit<
+    MantineRadioProps,
+    "size" | "color" | "radius" | "iconColor" | "variant"
+  > &
+    ReadOnlyControlProps &
+    Pick<
+      FormControlLayoutProps,
+      "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
+    >
+>;
 
 export type RadioProps = RecursicaOverStyled<RecursicaRadioProps>;
 
@@ -40,76 +52,123 @@ type RadioComponent = React.ForwardRefExoticComponent<
   Group: typeof RadioGroup;
 };
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
-  { overStyled = false, readOnly, readOnlyComponent, disabled, ...rest },
-  ref,
-) {
-  const sanitizedProps = filterStylingProps(rest, overStyled);
-  const restRecord = sanitizedProps as Record<string, unknown>;
-
-  // Actively delete dimension bindings that bypass the abstraction
-  delete restRecord["size"];
-  delete restRecord["color"];
-  delete restRecord["radius"];
-  delete restRecord["variant"];
-  delete restRecord["iconColor"];
-
-  if (readOnly && readOnlyComponent) {
-    // Safely fallback explicitly returning mapped elements natively without macro wrappers
-    return <>{readOnlyComponent}</>;
-  }
-
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    body: styles.body,
-    inner: styles.inner,
-    radio: styles.radio,
-    icon: styles.icon,
-    labelWrapper: styles.labelWrapper,
-    label: styles.label,
-  };
-
-  const classNamesProp = restRecord.classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Partial<Record<string, string>>;
-    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-    mergedClassNames.body = o.body ? `${styles.body} ${o.body}` : styles.body;
-    mergedClassNames.inner = o.inner
-      ? `${styles.inner} ${o.inner}`
-      : styles.inner;
-    mergedClassNames.radio = o.radio
-      ? `${styles.radio} ${o.radio}`
-      : styles.radio;
-    mergedClassNames.icon = o.icon ? `${styles.icon} ${o.icon}` : styles.icon;
-    mergedClassNames.labelWrapper = o.labelWrapper
-      ? `${styles.labelWrapper} ${o.labelWrapper}`
-      : styles.labelWrapper;
-    mergedClassNames.label = o.label
-      ? `${styles.label} ${o.label}`
-      : styles.label;
-  }
-
-  const classNameProp = restRecord.className as string | undefined;
-  const finalClass = classNameProp
-    ? `${styles.root} ${classNameProp}`
-    : styles.root;
-
-  // We omit Mantine's sizing/coloring so we rely strictly on variables from Radio.module.css
-  return (
-    <MantineRadio
-      ref={ref}
-      icon={RadioIcon}
-      className={finalClass}
-      classNames={mergedClassNames}
-      disabled={readOnly || disabled}
-      {...(sanitizedProps as unknown as MantineRadioProps)}
-    />
-  );
-}) as RadioComponent;
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  function Radio(props, ref) {
+    const {
+      overStyled = false,
+      readOnly,
+      readOnlyComponent,
+      disabled,
+      formLayout,
+      labelSize,
+      controlMaxWidth,
+      controlMinWidth,
+      ...rest
+    } = props;
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Actively delete dimension bindings that bypass the abstraction
+    delete restRecord["size"];
+    delete restRecord["color"];
+    delete restRecord["radius"];
+    delete restRecord["variant"];
+    delete restRecord["iconColor"];
+
+    const mergedClassNames: Partial<Record<string, string>> = {
+      root: styles.root,
+      body: styles.body,
+      inner: styles.inner,
+      radio: styles.radio,
+      icon: styles.icon,
+      labelWrapper: styles.labelWrapper,
+      label: styles.label,
+    };
+
+    const classNamesProp = restRecord.classNames;
+    if (
+      classNamesProp &&
+      typeof classNamesProp === "object" &&
+      !Array.isArray(classNamesProp)
+    ) {
+      const o = classNamesProp as Partial<Record<string, string>>;
+      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
+      mergedClassNames.body = o.body ? `${styles.body} ${o.body}` : styles.body;
+      mergedClassNames.inner = o.inner
+        ? `${styles.inner} ${o.inner}`
+        : styles.inner;
+      mergedClassNames.radio = o.radio
+        ? `${styles.radio} ${o.radio}`
+        : styles.radio;
+      mergedClassNames.icon = o.icon ? `${styles.icon} ${o.icon}` : styles.icon;
+      mergedClassNames.labelWrapper = o.labelWrapper
+        ? `${styles.labelWrapper} ${o.labelWrapper}`
+        : styles.labelWrapper;
+      mergedClassNames.label = o.label
+        ? `${styles.label} ${o.label}`
+        : styles.label;
+    }
+
+    const classNameProp = restRecord.className as string | undefined;
+    const finalClass = classNameProp
+      ? `${styles.root} ${classNameProp}`
+      : styles.root;
+
+    if (readOnly && !!readOnlyComponent) {
+      const isChecked = !!(restRecord.checked ?? restRecord.defaultChecked);
+      const ReadOnlyComp = readOnlyComponent;
+      const roNode = (
+        <ReadOnlyComp
+          {...props}
+          checked={isChecked}
+          label={restRecord.label as React.ReactNode}
+        />
+      );
+
+      if (formLayout) {
+        return (
+          <FormControlLayout
+            formLayout={formLayout}
+            labelSize={labelSize}
+            controlMaxWidth={controlMaxWidth}
+            controlMinWidth={controlMinWidth}
+          >
+            {roNode}
+          </FormControlLayout>
+        );
+      }
+
+      return <>{roNode}</>;
+    }
+
+    // We omit Mantine's sizing/coloring so we rely strictly on variables from Radio.module.css
+    const radioNode = (
+      <MantineRadio
+        ref={ref}
+        icon={RadioIcon}
+        className={finalClass}
+        classNames={mergedClassNames}
+        disabled={readOnly || disabled}
+        {...(sanitizedProps as unknown as MantineRadioProps)}
+      />
+    );
+
+    if (formLayout) {
+      return (
+        <FormControlLayout
+          formLayout={formLayout}
+          labelSize={labelSize}
+          controlMaxWidth={controlMaxWidth}
+          controlMinWidth={controlMinWidth}
+        >
+          {radioNode}
+        </FormControlLayout>
+      );
+    }
+
+    return radioNode;
+  },
+) as RadioComponent;
 
 Radio.displayName = "Radio";
 Radio.Group = RadioGroup;