@recursica/mantine-adapter 0.10.0 → 0.12.0

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

@@ -35,14 +35,32 @@ export default meta;
 
 type Story = StoryObj<typeof RadioGroup>;
 
-export const GroupStacked: Story = {
+export const Default: Story = {
+  args: {
+    formLayout: "stacked",
+    label: "Standard Group",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string>("");
+    return (
+      <RadioGroup {...args} value={value} onChange={setValue}>
+        <Radio value="1" label="Option 1" />
+        <Radio value="2" label="Option 2" />
+      </RadioGroup>
+    );
+  },
+};
+
+export const StackedLayout: Story = {
   args: {
     formLayout: "stacked",
     required: true,
     label: "Hosting Provider",
     error: "You must select a deployment provider.",
   },
-  render: function GroupStackedRender(args) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
     const [value, setValue] = useState<string>("aws");
     return (
       <RadioGroup {...args} value={value} onChange={setValue}>
@@ -57,7 +75,7 @@ export const GroupStacked: Story = {
   },
 };
 
-export const GroupSideBySide: Story = {
+export const SideBySideLayout: Story = {
   args: {
     formLayout: "side-by-side",
     labelOptionalText: "Recommended",
@@ -65,7 +83,8 @@ export const GroupSideBySide: Story = {
     label: "Deployment Region",
     assistiveText: "Select the data center closest to your user base.",
   },
-  render: function GroupSideBySideRender(args) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
     const [value, setValue] = useState<string>("us-east");
     return (
       <RadioGroup {...args} value={value} onChange={setValue}>
@@ -77,16 +96,16 @@ export const GroupSideBySide: Story = {
   },
 };
 
-export const StaticReadOnlyGroup: Story = {
+export const ReadOnly: Story = {
   args: {
     readOnly: true,
     formLayout: "stacked",
     required: true,
     label: "Selected Framework",
     assistiveText: "This selection cannot be changed after initialization.",
-    readOnlyComponent: <span>React (Standard Build)</span>,
   },
-  render: function StaticReadOnlyGroupRender(args) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
     const [value, setValue] = useState<string>("react");
     return (
       <RadioGroup {...args} value={value} onChange={setValue}>

package/src/components/Radio/RadioGroup.tsx

@@ -9,10 +9,8 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import {
-  FormControlWrapper,
-  type RecursicaFormControlWrapperProps,
-} from "../FormControlWrapper/FormControlWrapper";
+import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
+import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./Radio.module.css";
 
 export interface RecursicaRadioGroupProps
@@ -26,8 +24,8 @@ export interface RecursicaRadioGroupProps
 export type RadioGroupProps = RecursicaOverStyled<RecursicaRadioGroupProps>;
 
 export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  function RadioGroup(
-    {
+  function RadioGroup(props, ref) {
+    const {
       overStyled = false,
       formLayout = "stacked",
 
@@ -52,47 +50,19 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       children,
       readOnly,
       readOnlyComponent,
+      emptyValueComponent,
+      value,
+      defaultValue,
       ...rest
-    },
-    ref,
-  ) {
+    } = props;
     const sanitizedProps = filterStylingProps(rest, overStyled);
     const restRecord = sanitizedProps as Record<string, unknown>;
 
     // Delete prohibited sizing hooks from bypassing the variables
     delete restRecord["size"];
 
-    if (readOnly && readOnlyComponent) {
-      return (
-        <FormControlWrapper
-          className={className}
-          style={style as React.CSSProperties}
-          controlMaxWidth="var(--recursica_ui-kit_components_radio-button-item_properties_max-width)"
-          controlMinWidth={undefined}
-          overStyled={overStyled as true}
-          labelElement="div"
-          formLayout={formLayout}
-          labelSize={labelSize}
-          labelAlignment={labelAlignment}
-          labelOptionalText={labelOptionalText}
-          labelWithEditIcon={labelWithEditIcon}
-          onLabelEditClick={onLabelEditClick}
-          label={label}
-          description={description}
-          assistiveText={assistiveText}
-          assistiveWithIcon={assistiveWithIcon}
-          error={error}
-          required={required}
-          withAsterisk={withAsterisk}
-          id={id}
-        >
-          {readOnlyComponent}
-        </FormControlWrapper>
-      );
-    }
-
     return (
-      <FormControlWrapper
+      <WithReadOnlyWrapper
         className={className}
         style={style as React.CSSProperties}
         controlMaxWidth="var(--recursica_ui-kit_components_radio-button-item_properties_max-width)"
@@ -113,24 +83,34 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
         required={required}
         withAsterisk={withAsterisk}
         id={id}
-      >
-        <MantineRadio.Group
-          ref={ref}
-          /* Natively bind local disabled lock dynamically */
-          {...(sanitizedProps as unknown as MantineRadioGroupProps)}
-        >
-          <div className={styles.groupRoot} data-layout={formLayout}>
-            {React.Children.map(children, (child) => {
-              if (React.isValidElement(child)) {
-                return React.cloneElement(child as React.ReactElement<any>, {
-                  disabled: readOnly || (child.props as any).disabled,
-                });
-              }
-              return child;
-            })}
-          </div>
-        </MantineRadio.Group>
-      </FormControlWrapper>
+        readOnly={readOnly && !!readOnlyComponent}
+        readOnlyComponent={readOnlyComponent}
+        emptyValueComponent={emptyValueComponent}
+        readOnlyType="text"
+        readOnlyValue={value !== undefined ? value : defaultValue}
+        readOnlyNativeProps={props}
+        activeComponent={
+          <MantineRadio.Group
+            ref={ref}
+            /* Natively bind local disabled lock dynamically */
+            {...(sanitizedProps as unknown as MantineRadioGroupProps)}
+            disabled={readOnly || (restRecord as any).disabled}
+            value={value}
+            defaultValue={defaultValue}
+          >
+            <div className={styles.groupRoot} data-layout={formLayout}>
+              {React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                  return React.cloneElement(child as React.ReactElement<any>, {
+                    disabled: readOnly || (child.props as any).disabled,
+                  });
+                }
+                return child;
+              })}
+            </div>
+          </MantineRadio.Group>
+        }
+      />
     );
   },
 );

package/src/components/ReadOnlyField/ReadOnlyBooleanField.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Box } from "@mantine/core";
+import styles from "./ReadOnlyField.module.css";
+
+export const ReadOnlyBooleanField: React.FC<{
+  checked: boolean;
+  label?: React.ReactNode;
+}> = ({ checked, label }) => {
+  return (
+    <Box
+      component="span"
+      className={styles.textField}
+      style={{ display: "inline-flex", gap: "8px", alignItems: "baseline" }}
+    >
+      {label && <span style={{ fontWeight: 500 }}>{label}:</span>}
+      <span>{checked ? "True" : "False"}</span>
+    </Box>
+  );
+};
+
+ReadOnlyBooleanField.displayName = "ReadOnlyBooleanField";

package/src/components/ReadOnlyField/ReadOnlyField.stories.tsx

@@ -118,3 +118,46 @@ export const WithEditIcon: Story = {
     value: "Editable fixed structure",
   },
 };
+
+/**
+ * Demonstrates how the generic ReadOnlyField handles mapping different internal data types.
+ * Currently, all types safely default to string extraction mapping into the text renderer natively.
+ */
+export const DataTypes: Story = {
+  args: {},
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <ReadOnlyField
+        label="Text Mapping"
+        type="text"
+        value="Standard string output"
+      />
+      <ReadOnlyField label="Number Mapping" type="number" value={1234567.89} />
+      <ReadOnlyField
+        label="Date Mapping"
+        type="date"
+        value={new Date("2026-04-28T12:00:00Z").toLocaleDateString()}
+      />
+      <ReadOnlyField
+        label="Boolean Mapping (True)"
+        type="boolean"
+        value={true}
+      />
+      <ReadOnlyField
+        label="Boolean Mapping (False)"
+        type="boolean"
+        value={false}
+      />
+      <ReadOnlyField
+        label="Switch Mapping (True -> On)"
+        type="switch"
+        value={true}
+      />
+      <ReadOnlyField
+        label="Switch Mapping (False -> Off)"
+        type="switch"
+        value={false}
+      />
+    </div>
+  ),
+};

package/src/components/ReadOnlyField/ReadOnlyField.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 import {
   ReadOnlyFieldType,
   EmptyValueRenderer,
+  type ReadOnlyControlProps,
 } from "@recursica/adapter-common";
 import {
   filterStylingProps,
@@ -15,13 +16,19 @@ import {
 import { ReadOnlyTextField } from "./ReadOnlyTextField";
 
 export interface RecursicaReadOnlyFieldProps
-  extends Omit<FormControlWrapperProps, "children" | "overStyled"> {
+  extends Omit<
+      FormControlWrapperProps,
+      "children" | "overStyled" | "controlMaxWidth" | "controlMinWidth"
+    >,
+    Pick<ReadOnlyControlProps, "emptyValueComponent"> {
   /** The specific value to be rendered in read-only mode explicitly matching the original field input */
   value?: any;
   /** The data type formatting rules bounding how the string is presented to the user */
   type?: ReadOnlyFieldType;
-  /** Custom renderer explicitly responsible for formatting missing/empty value mappings (overriding default 'N/A') */
-  emptyValueComponent?: React.ElementType<{ value?: any }>;
+  /** Pass the native maximum width design variable dynamically bounding the specific wrapper width exclusively. */
+  controlMaxWidth?: string | undefined;
+  /** Pass the native minimum width design variable dynamically bounding the specific wrapper width exclusively. */
+  controlMinWidth?: string | undefined;
 }
 
 export type ReadOnlyFieldProps =
@@ -49,6 +56,26 @@ export const ReadOnlyField = forwardRef<HTMLDivElement, ReadOnlyFieldProps>(
     const displayValue = isValueEmpty ? <Renderer value={value} /> : value;
 
     switch (type) {
+      case "boolean":
+        content = (
+          <ReadOnlyTextField
+            value={
+              value === true ? "True" : value === false ? "False" : displayValue
+            }
+            overStyled={overStyled as true}
+          />
+        );
+        break;
+      case "switch":
+        content = (
+          <ReadOnlyTextField
+            value={
+              value === true ? "On" : value === false ? "Off" : displayValue
+            }
+            overStyled={overStyled as true}
+          />
+        );
+        break;
       case "text":
       default:
         content = (

package/src/components/ReadOnlyField/ReadOnlySwitchField.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Box } from "@mantine/core";
+import styles from "./ReadOnlyField.module.css";
+
+export const ReadOnlySwitchField: React.FC<{
+  checked: boolean;
+  label?: React.ReactNode;
+}> = ({ checked, label }) => {
+  return (
+    <Box
+      component="span"
+      className={styles.textField}
+      style={{ display: "inline-flex", gap: "8px", alignItems: "baseline" }}
+    >
+      {label && <span style={{ fontWeight: 500 }}>{label}:</span>}
+      <span>{checked ? "On" : "Off"}</span>
+    </Box>
+  );
+};
+
+ReadOnlySwitchField.displayName = "ReadOnlySwitchField";

package/src/components/ReadOnlyField/ReadOnlyTextField.tsx

@@ -37,7 +37,9 @@ export const ReadOnlyTextField: React.FC<ReadOnlyTextFieldProps> = ({
       {value != null
         ? React.isValidElement(value)
           ? value
-          : String(value)
+          : Array.isArray(value)
+            ? value.join(", ")
+            : String(value)
         : ""}
     </Box>
   );

package/src/components/ReadOnlyField/WithReadOnlyWrapper.tsx

@@ -12,7 +12,11 @@ export interface WithReadOnlyWrapperProps
   /** Injects whether the field defaults to reading mode natively */
   readOnly?: boolean;
   /** Explicit React component directly overtaking the baseline text renderer when read-only mode is active */
-  readOnlyComponent?: React.ReactNode;
+  readOnlyComponent?: React.ElementType<any>;
+  /** Custom renderer explicitly responsible for formatting missing/empty value mappings (overriding default 'N/A') */
+  emptyValueComponent?: React.ElementType<{ value?: any }>;
+  /** The full native props dictionary securely forwarded into the custom readOnlyComponent if active */
+  readOnlyNativeProps?: any;
   /** Instructs the underlying generic ReadOnlyField which raw visual structure to bridge automatically */
   readOnlyType?: ReadOnlyFieldType;
   /** The isolated raw data value intercepted explicitly into the ReadOnly formatters */
@@ -36,6 +40,8 @@ export const WithReadOnlyWrapper = forwardRef<
     readOnlyComponent,
     readOnlyType = "text",
     readOnlyValue,
+    readOnlyNativeProps,
+    emptyValueComponent,
     activeComponent,
     overStyled,
     onLabelEditClick,
@@ -45,6 +51,7 @@ export const WithReadOnlyWrapper = forwardRef<
 ) {
   if (readOnly) {
     if (readOnlyComponent) {
+      const ReadOnlyComponent = readOnlyComponent;
       return (
         <FormControlWrapper
           ref={ref}
@@ -52,7 +59,7 @@ export const WithReadOnlyWrapper = forwardRef<
           onLabelEditClick={onLabelEditClick}
           overStyled={overStyled as true}
         >
-          {readOnlyComponent}
+          <ReadOnlyComponent {...readOnlyNativeProps} />
         </FormControlWrapper>
       );
     }
@@ -62,6 +69,7 @@ export const WithReadOnlyWrapper = forwardRef<
         ref={ref}
         type={readOnlyType}
         value={readOnlyValue}
+        emptyValueComponent={emptyValueComponent}
         onLabelEditClick={onLabelEditClick}
         overStyled={overStyled as true}
         {...wrapperProps}

package/src/components/ReadOnlyField/index.ts

@@ -1,3 +1,5 @@
 export * from "./ReadOnlyField";
 export * from "./WithReadOnlyWrapper";
 export * from "./ReadOnlyTextField";
+export * from "./ReadOnlySwitchField";
+export * from "./ReadOnlyBooleanField";

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

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

package/src/components/Slider/Slider.stories.tsx

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

package/src/components/Stack/Stack.stories.tsx

@@ -69,7 +69,8 @@ export default meta;
 type Story = StoryObj<StackStoryProps>;
 
 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) => (
     <Stack {...args}>
       <Button variant="solid">Primary Block</Button>
       <Button variant="outline">Secondary Block</Button>
@@ -82,7 +83,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) => (
     <Stack {...args}>
       <Button variant="solid">Item 1</Button>
       <Button variant="solid">Item 2</Button>
@@ -95,7 +97,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) => (
     <Stack {...args}>
       <Button variant="solid">Item 1</Button>
       <Button variant="solid">Item 2</Button>

package/src/components/Switch/Switch.module.css

@@ -190,18 +190,10 @@
 
 .groupRoot {
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   gap: var(
     --recursica_ui-kit_components_switch_properties_label-switch-gap,
     16px
   );
 }
-
-.groupRoot[data-layout="stacked"] {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.groupRoot[data-layout="side-by-side"] {
-  flex-direction: row;
-  align-items: center;
-}

package/src/components/Switch/Switch.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Switch } from "./Switch";
+import { Stack } from "../Stack/Stack";
 
 const meta: Meta<typeof Switch> = {
   title: "UI-Kit/Switch",
@@ -24,9 +25,6 @@ To render a standard switch:
     },
   },
   argTypes: {
-    disabled: {
-      control: "boolean",
-    },
     checked: {
       control: "boolean",
     },
@@ -44,6 +42,9 @@ To render a standard switch:
       description:
         "Toggles structural read-only data presentation bypassing interaction boundaries completely.",
     },
+    controlMaxWidth: { table: { disable: true } },
+    controlMinWidth: { table: { disable: true } },
+    emptyValueComponent: { table: { disable: true } },
   },
 };
 
@@ -56,41 +57,55 @@ export const Default: Story = {
     disabled: false,
     label: "Standard Switch",
   },
+  // We explicitly destructure global Storybook injected arguments so they do not leak into the DOM natively.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Switch {...args} />,
+};
+
+export const SideBySideLayout: Story = {
+  args: {
+    label: "Opt-in form alignment",
+    formLayout: "side-by-side",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Switch {...args} />,
 };
 
 export const StaticVariations: Story = {
   args: {},
   render: () => (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "24px",
-      }}
-    >
+    <Stack gap="xl">
       <Switch label="Default Unchecked State" />
       <Switch label="Checked State" defaultChecked />
       <Switch label="Disabled Unchecked" disabled />
       <Switch label="Disabled Checked" defaultChecked disabled />
-    </div>
+    </Stack>
   ),
 };
 
-export const StaticReadOnly: Story = {
-  args: {},
-  render: () => (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "24px",
-      }}
-    >
-      <Switch
-        label="Read Only Switch"
-        readOnly
-        readOnlyComponent={<span>Enabled</span>}
-      />
-    </div>
+export const ReadOnly: Story = {
+  args: {
+    ...Default.args,
+    readOnly: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Switch {...args} />,
+};
+
+export const CustomReadOnly: Story = {
+  args: {
+    ...Default.args,
+    readOnly: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Switch
+      {...args}
+      readOnlyComponent={({ checked, label }) => (
+        <span style={{ fontWeight: "bold", color: checked ? "green" : "red" }}>
+          {label} {checked ? "ENABLED" : "DISABLED"}
+        </span>
+      )}
+    />
   ),
 };