@recursica/mui-adapter 0.5.0 → 0.7.0

package/src/components/ReadOnlyField/ReadOnlyTextField.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { Box } from "@mui/material";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./ReadOnlyField.module.css";
+
+export interface RecursicaReadOnlyTextFieldProps {
+  /** The value strictly rendered as text output */
+  value?: any;
+}
+
+export type ReadOnlyTextFieldProps =
+  RecursicaOverStyled<RecursicaReadOnlyTextFieldProps>;
+
+export const ReadOnlyTextField: React.FC<ReadOnlyTextFieldProps> = ({
+  value,
+  overStyled = false,
+  ...rest
+}) => {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+
+  return (
+    <Box
+      component="p"
+      className={
+        classNameProp
+          ? `${styles.textField} ${classNameProp}`
+          : styles.textField
+      }
+      {...sanitizedProps}
+    >
+      {value != null
+        ? React.isValidElement(value)
+          ? value
+          : Array.isArray(value)
+            ? value.join(", ")
+            : String(value)
+        : ""}
+    </Box>
+  );
+};
+
+ReadOnlyTextField.displayName = "ReadOnlyTextField";

package/src/components/ReadOnlyField/WithReadOnlyWrapper.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import { type ReadOnlyFieldType } from "@recursica/adapter-common";
+import {
+  FormControlWrapper,
+  type FormControlWrapperProps,
+} from "../FormControlWrapper/FormControlWrapper";
+import { ReadOnlyField } from "./ReadOnlyField";
+
+export interface WithReadOnlyWrapperProps
+  extends Omit<FormControlWrapperProps, "children" | "overStyled"> {
+  /** 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.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 */
+  readOnlyValue?: any;
+  /** Safely enables deep overrides transparently bypassing block filters */
+  overStyled?: boolean;
+  /** The nested active node dynamically exposed exclusively when read-only bounds are disabled */
+  activeComponent: React.ReactNode;
+}
+
+/**
+ * Universal execution barrier trapping readOnly states globally.
+ * Natively delegates active logic down avoiding duplicative internal component bindings dynamically.
+ */
+export const WithReadOnlyWrapper = forwardRef<
+  HTMLDivElement,
+  WithReadOnlyWrapperProps
+>(function WithReadOnlyWrapper(
+  {
+    readOnly,
+    readOnlyComponent,
+    readOnlyType = "text",
+    readOnlyValue,
+    readOnlyNativeProps,
+    emptyValueComponent,
+    activeComponent,
+    overStyled,
+    onLabelEditClick,
+    ...wrapperProps
+  },
+  ref,
+) {
+  if (readOnly) {
+    if (readOnlyComponent) {
+      const ReadOnlyComponent = readOnlyComponent;
+      return (
+        <FormControlWrapper
+          ref={ref}
+          {...wrapperProps}
+          onLabelEditClick={onLabelEditClick}
+          overStyled={overStyled as true}
+        >
+          <ReadOnlyComponent {...readOnlyNativeProps} />
+        </FormControlWrapper>
+      );
+    }
+
+    return (
+      <ReadOnlyField
+        ref={ref}
+        type={readOnlyType}
+        value={readOnlyValue}
+        emptyValueComponent={emptyValueComponent}
+        onLabelEditClick={onLabelEditClick}
+        overStyled={overStyled as true}
+        {...wrapperProps}
+      />
+    );
+  }
+
+  // Active Standard Execution natively forwarding bound children implicitly
+  return (
+    <FormControlWrapper
+      ref={ref}
+      {...wrapperProps}
+      onLabelEditClick={onLabelEditClick}
+      overStyled={overStyled as true}
+    >
+      {activeComponent}
+    </FormControlWrapper>
+  );
+});
+
+WithReadOnlyWrapper.displayName = "WithReadOnlyWrapper";

package/src/components/ReadOnlyField/index.ts

@@ -1 +1,2 @@
 export * from "./ReadOnlyField";
+export * from "./WithReadOnlyWrapper";

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -1,47 +1,179 @@
-/* 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 */
+/* HARDCODED VALUES:
+   - border-style: solid; on container and indicator
+   - background-color: transparent; on label hover (overriding Mantine)
+   - Scope prefix .root to enforce Figma tokens over Mantine's inline calculation without using !important
+*/
+
+.root {
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control_properties_colors_background
+  );
+  border: var(
+      --recursica_ui-kit_components_segmented-control_properties_border-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_segmented-control_properties_colors_border-color
+    );
+  border-radius: var(
+    --recursica_ui-kit_components_segmented-control_properties_border-radius
+  );
+  padding: var(
+      --recursica_ui-kit_components_segmented-control_properties_padding-vertical
+    )
+    var(
+      --recursica_ui-kit_components_segmented-control_properties_padding-horizontal
+    );
+  box-shadow: var(
+    --recursica_ui-kit_components_segmented-control_properties_elevation
+  );
+  gap: var(--recursica_ui-kit_components_segmented-control_properties_item-gap);
+}
+
+.root .label {
+  padding-left: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal
+  );
+  padding-right: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal
+  );
+  height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_height
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-radius
+  );
+
+  border: var(
+      --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_border-color
+    );
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_background
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_elevation
+  );
+
+  font-family: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-transform
+  );
+
+  color: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_text-color
+  );
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Mantine natively wraps label contents in an innerLabel span */
+.root .label :global(.mantine-SegmentedControl-innerLabel) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_icon-text-gap
+  );
+}
+
+.root .label svg {
+  width: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_icon-size
+  );
+  height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_icon-size
+  );
+  flex-shrink: 0;
+}
+
+/* Mantine adds a background on hover, we must strictly strip it */
+.root .label:hover {
+  background-color: transparent;
+}
+
+/* Mantine adds separators via ::before on the .control */
+.root .control::before {
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control_properties_colors_divider-color
+  );
+  width: var(
+    --recursica_ui-kit_components_segmented-control_properties_divider-size
+  );
+}
+
+/* Indicator mapping (MUI ToggleButton applies .Mui-selected to the button instead of rendering a sliding indicator) */
+.root .control.Mui-selected {
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_background
+  );
+  border: var(
+      --recursica_ui-kit_components_segmented-control-item_properties_selected_border-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_border-color
+    );
+  box-shadow: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_elevation
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_border-radius
+  );
+}
+
+/* Selected label text color override */
+.root .control.Mui-selected .label {
+  color: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_text-color
+  );
+  font-family: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-transform
+  );
+}

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

@@ -1,35 +1,117 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { SegmentedControl } from "./SegmentedControl";
-import { ComingSoon } from "@recursica/storybook-template";
 
 const meta: Meta<typeof SegmentedControl> = {
-  title: "UI-Kit/🚧 SegmentedControl",
+  title: "UI-Kit/SegmentedControl",
   component: SegmentedControl,
   tags: ["autodocs"],
   parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
+    docs: {
+      description: {
+        component:
+          "SegmentedControl provides a linear set of two or more segments, each of which functions as a mutually exclusive button.",
+      },
     },
   },
-};
+  argTypes: {
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+    fullWidth: {
+      control: "boolean",
+    },
+    disabled: { table: { disable: true } },
+    data: { table: { disable: true } },
+    defaultChecked: { table: { disable: true } },
+  },
+} satisfies Meta<typeof SegmentedControl>;
 
 export default meta;
 type Story = StoryObj<typeof SegmentedControl>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="SegmentedControl" />,
+  args: {
+    data: ["React", "Angular", "Vue", "Svelte"],
+    orientation: "horizontal",
+    fullWidth: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    data: ["Daily", "Weekly", "Monthly"],
+    fullWidth: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    data: ["Option 1", "Option 2", "Option 3"],
+    orientation: "vertical",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+const CheckIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+export const WithIcons: Story = {
+  args: {
+    data: [
+      {
+        value: "daily",
+        label: (
+          <>
+            <CheckIcon />
+            <span>Daily</span>
+          </>
+        ),
+      },
+      {
+        value: "weekly",
+        label: (
+          <>
+            <CheckIcon />
+            <span>Weekly</span>
+          </>
+        ),
+      },
+      {
+        value: "monthly",
+        label: (
+          <>
+            <CheckIcon />
+            <span>Monthly</span>
+          </>
+        ),
+      },
+    ],
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
 };

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,8 +1,142 @@
-import React from "react";
-import "./SegmentedControl.module.css";
+import { forwardRef } from "react";
+import {
+  ToggleButtonGroup as MuiSegmentedControl,
+  ToggleButton,
+  type ToggleButtonGroupProps as MuiSegmentedControlProps,
+} from "@mui/material";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./SegmentedControl.module.css";
 
-export type SegmentedControlProps = React.HTMLAttributes<HTMLDivElement>;
+import { type RecursicaSegmentedControlProps } from "@recursica/adapter-common";
 
-export const SegmentedControl: React.FC<SegmentedControlProps> = (props) => {
-  return <div {...props}>SegmentedControl</div>;
-};
+export type SegmentedControlProps = RecursicaOverStyled<
+  Omit<
+    MuiSegmentedControlProps,
+    | "variant"
+    | "size"
+    | "radius"
+    | "color"
+    | "classNames"
+    | "className"
+    | "disabled"
+    | "value"
+    | "onChange"
+  > & {
+    className?: string;
+    classNames?: Partial<Record<string, string>>;
+  } & RecursicaSegmentedControlProps
+>;
+
+function useSegmentedControlClassNames(restRecord: Record<string, unknown>): {
+  className: string;
+  classNames: Partial<Record<string, string>>;
+} {
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+    control: styles.control,
+    label: styles.label,
+    indicator: styles.indicator,
+  };
+
+  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.control = o.control
+      ? `${styles.control} ${o.control}`
+      : styles.control;
+    mergedClassNames.label = o.label
+      ? `${styles.label} ${o.label}`
+      : styles.label;
+    mergedClassNames.indicator = o.indicator
+      ? `${styles.indicator} ${o.indicator}`
+      : styles.indicator;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return { className: finalClass, classNames: mergedClassNames };
+}
+
+const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
+  function SegmentedControl(
+    {
+      overStyled = false,
+      orientation = "horizontal",
+      fullWidth,
+      data = [],
+      value,
+      onChange,
+      ...rest
+    },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Explicitly prevent consumers from bypassing the disabled restriction
+    delete restRecord["disabled"];
+
+    const stylingParams = useSegmentedControlClassNames(restRecord);
+
+    const handleChange = (
+      _event: React.MouseEvent<HTMLElement>,
+      newValue: string | null,
+    ) => {
+      if (newValue !== null && onChange) {
+        onChange(newValue);
+      }
+    };
+
+    return (
+      <MuiSegmentedControl
+        ref={ref}
+        className={stylingParams.className}
+        classes={stylingParams.classNames}
+        orientation={orientation}
+        fullWidth={fullWidth}
+        data-orientation={orientation}
+        exclusive
+        value={value}
+        onChange={handleChange as any}
+        {...(sanitizedProps as Omit<
+          MuiSegmentedControlProps,
+          "variant" | "size" | "value" | "onChange"
+        >)}
+      >
+        {data.map((item) => {
+          const itemValue = typeof item === "string" ? item : item.value;
+          const itemLabel = typeof item === "string" ? item : item.label;
+          const itemDisabled = typeof item === "string" ? false : item.disabled;
+
+          return (
+            <ToggleButton
+              key={itemValue}
+              value={itemValue}
+              disabled={itemDisabled}
+              className={stylingParams.classNames.control}
+            >
+              <div className={stylingParams.classNames.label}>{itemLabel}</div>
+            </ToggleButton>
+          );
+        })}
+      </MuiSegmentedControl>
+    );
+  },
+);
+_SegmentedControl.displayName = "SegmentedControl";
+
+/**
+ * Recursica SegmentedControl component wrapping Mui's SegmentedControl.
+ */
+export const SegmentedControl = _SegmentedControl;