@recursica/mui-adapter 0.6.0 → 0.7.0

package/src/components/Chip/Chip.module.css

@@ -23,10 +23,12 @@
    background: transparent; (Override mantine default)
  */
 
-.root {
+.root.root {
   /* Set preset layout variables to override mantine defaults safely */
   box-sizing: border-box;
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
   /* Token properties */
   --chip-height: max-content; /* Sizing is driven by padding and line height */
@@ -46,24 +48,45 @@
     --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_close-icon-color
   );
 
+  /* Container geometry */
+  height: var(--chip-height);
   border-radius: var(
     --recursica_ui-kit_components_chip_properties_border-radius
   );
+  border-style: solid;
+  border-width: var(--recursica_ui-kit_components_chip_properties_border-size);
+  padding: var(--recursica_ui-kit_components_chip_properties_vertical-padding)
+    var(--recursica_ui-kit_components_chip_properties_horizontal-padding);
+
+  /* Gap for native MUI icons */
+  gap: var(--recursica_ui-kit_components_chip_properties_icon-text-gap);
+
+  /* Background and colors */
+  background-color: var(--chip-bg);
+  border-color: var(--chip-border);
+  color: var(--chip-text);
+  min-width: var(--recursica_ui-kit_components_chip_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_chip_properties_max-width);
+  box-shadow: var(--recursica_ui-kit_components_chip_properties_elevation);
+
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  transition: all 0.2s ease;
 }
 
 /* We target the mantine label directly because that is the visible container in Mantine's Chip */
-.label {
+.label.label {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  /* Reset mantine styles */
-  background: transparent !important; /* HARDCODE: Mantine forces background styling on label */
-  border-style: solid;
-  border-width: var(--recursica_ui-kit_components_chip_properties_border-size);
-  padding: var(--recursica_ui-kit_components_chip_properties_vertical-padding)
-    var(--recursica_ui-kit_components_chip_properties_horizontal-padding) !important;
+  /* Reset MUI styles */
+  background: transparent;
+  padding: 0;
+  border: none;
+  border-radius: 0;
 
   /* Typography */
   font-family: var(
@@ -90,21 +113,18 @@
   );
 
   /* Token evaluation */
-  background-color: var(--chip-bg) !important;
-  border-color: var(--chip-border) !important;
-  color: var(--chip-text) !important;
+  background-color: var(--chip-bg);
+  border-color: var(--chip-border);
+  color: var(--chip-text);
   min-width: var(--recursica_ui-kit_components_chip_properties_min-width);
   max-width: var(--recursica_ui-kit_components_chip_properties_max-width);
-  box-shadow: var(
-    --recursica_ui-kit_components_chip_properties_elevation,
-    none
-  );
+  box-shadow: var(--recursica_ui-kit_components_chip_properties_elevation);
 
   transition: all 0.2s ease;
 }
 
 /* Default (Unselected) hover/active interactions (Mantine overrides) */
-.label[data-checked] {
+.root.root[data-checked] {
   --chip-bg: var(
     --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_background
   );
@@ -122,7 +142,7 @@
   );
 }
 
-.root[data-error] .label {
+.root.root[data-error] {
   --chip-bg: var(
     --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_background
   );
@@ -140,7 +160,7 @@
   );
 }
 
-.root[data-error] .label[data-checked] {
+.root.root[data-error][data-checked] {
   --chip-bg: var(
     --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_background
   );
@@ -158,20 +178,16 @@
   );
 }
 
-.root[data-disabled] .label {
-  opacity: var(--recursica_brand_states_disabled, 0.5);
+.root.root[data-disabled] {
+  opacity: var(--recursica_brand_states_disabled);
   cursor: not-allowed;
 }
 
 /* Override Mantine's built-in check icon colors and size if we keep it */
-.mantineIconWrapper {
-  color: var(--chip-icon) !important;
-  width: var(
-    --recursica_ui-kit_components_chip_properties_icon-size
-  ) !important;
-  height: var(
-    --recursica_ui-kit_components_chip_properties_icon-size
-  ) !important;
+.mantineIconWrapper.mantineIconWrapper {
+  color: var(--chip-icon);
+  width: var(--recursica_ui-kit_components_chip_properties_icon-size);
+  height: var(--recursica_ui-kit_components_chip_properties_icon-size);
   margin-right: var(
     --recursica_ui-kit_components_chip_properties_icon-text-gap
   );
@@ -205,7 +221,7 @@
   height: 100%;
 }
 
-.removeIcon {
+.removeIconWrapper {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -215,22 +231,24 @@
   cursor: pointer;
   border-radius: 50%; /* HARDCODE: Make focus ring rounded */
   outline: none;
+  /* Reset MUI icon defaults */
+  margin: 0;
 }
 
-.removeIcon:focus-visible {
+.removeIconWrapper:focus-visible {
   box-shadow: 0 0 0 2px var(--chip-border); /* HARDCODE: Focus indication */
 }
 
-.removeIcon svg {
+.removeIconWrapper svg {
   width: 100%;
   height: 100%;
 }
 
-.root[data-icon-only] .label {
+.root.root[data-icon-only] {
   padding-left: var(
     --recursica_ui-kit_components_chip_properties_vertical-padding
-  ) !important;
+  );
   padding-right: var(
     --recursica_ui-kit_components_chip_properties_vertical-padding
-  ) !important;
+  );
 }

package/src/components/Chip/Chip.tsx

@@ -6,19 +6,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Chip.module.css";
 
-export interface RecursicaChipProps {
-  /** Enables the error state styling */
-  error?: boolean;
-
-  /** Leading icon content */
-  icon?: React.ReactNode;
-
-  /** Called when the remove (X) icon is clicked. If provided, the remove icon will be displayed. */
-  onRemove?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-
-  /** Screen reader label for the remove button. Defaults to 'Remove' */
-  removeLabel?: string;
-}
+import { type RecursicaChipProps } from "@recursica/adapter-common";
 
 export type ChipProps = RecursicaOverStyled<
   Omit<MuiChipProps, "variant" | "size" | "color" | "radius"> &
@@ -45,13 +33,33 @@ function CloseIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   );
 }
 
+function CheckIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+  return (
+    <svg
+      viewBox="0 0 10 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
 export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
   {
     error = false,
     icon,
     onRemove,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     removeLabel = "Remove",
     children,
+    checked,
     overStyled = false,
     ...rest
   },
@@ -63,9 +71,8 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
   const mergedClassNames: Partial<Record<string, string>> = {
     root: styles.root,
     label: styles.label,
-    input: styles.input,
-    iconWrapper: styles.muiIconWrapper,
-    checkIcon: styles.checkIcon,
+    icon: styles.leadingIcon,
+    deleteIcon: styles.removeIconWrapper,
   };
 
   const classNamesProp = restRecord.classNames;
@@ -88,6 +95,7 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
 
   // Determine state
   const dataError = error ? "" : undefined;
+  const dataChecked = checked ? "" : undefined;
   const isIconOnly = !children && (!!icon || !!onRemove);
 
   return (
@@ -96,44 +104,34 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
       className={finalClass}
       classes={mergedClassNames}
       {...(dataError !== undefined ? { "data-error": "" } : {})}
+      {...(dataChecked !== undefined ? { "data-checked": "" } : {})}
       {...(isIconOnly ? { "data-icon-only": "" } : {})}
       {...sanitizedProps}
-    >
-      <span className={styles.innerWrapper}>
-        {icon && (
+      icon={
+        checked ? (
+          <span className={styles.mantineIconWrapper} aria-hidden>
+            <CheckIcon />
+          </span>
+        ) : icon ? (
           <span className={styles.leadingIcon} aria-hidden>
             {icon}
           </span>
-        )}
-
-        <span className={styles.children}>{children}</span>
-
-        {onRemove && (
-          <span
-            role="button"
-            className={styles.removeIcon}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onRemove(e);
-            }}
-            aria-label={removeLabel}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                onRemove(
-                  e as unknown as React.MouseEvent<HTMLSpanElement, MouseEvent>,
-                );
-              }
-            }}
-            tabIndex={0}
-          >
+        ) : undefined
+      }
+      onDelete={onRemove}
+      deleteIcon={
+        onRemove ? (
+          <span className={styles.removeIconWrapper}>
             <CloseIcon />
           </span>
-        )}
-      </span>
-    </MuiChip>
+        ) : undefined
+      }
+      label={
+        <span className={styles.innerWrapper}>
+          <span className={styles.children}>{children}</span>
+        </span>
+      }
+    />
   );
 });
 

package/src/components/Container/Container.stories.tsx

@@ -1,35 +1,118 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Container } from "./Container";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Text } from "../Text/Text";
 
-const meta: Meta<typeof Container> = {
-  title: "UI-Kit/🚧 Container",
+type ContainerStoryProps = React.ComponentProps<typeof Container>;
+
+const meta: Meta<ContainerStoryProps> = {
+  title: "UI-Kit/Container",
   component: Container,
   tags: ["autodocs"],
   parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
+    docs: {
+      description: {
+        component:
+          "Container is a generic layout wrapper that safely maps to Mantine's Container, standardizing maximum content widths across the application.",
+      },
+    },
+  },
+  args: {
+    size: "md",
+    fluid: false,
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "rec-sm",
+        "rec-default",
+        "rec-md",
+        "rec-lg",
+        "rec-xl",
+        "rec-2xl",
       ],
+      description:
+        "Maximum width defined by Mantine system sizes or Recursica sizes",
+    },
+    fluid: {
+      control: "boolean",
+      description: "If true, overrides size and sets max-width to 100%",
+    },
+    defaultChecked: {
+      table: { disable: true },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof Container>;
+
+type Story = StoryObj<ContainerStoryProps>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Container" />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <div style={{ backgroundColor: "#f0f0f0", padding: "16px" }}>
+      <Container
+        {...args}
+        style={{
+          backgroundColor: "white",
+          padding: "16px",
+          border: "1px solid #ccc",
+        }}
+      >
+        <Text>
+          This is a Container holding centered content. The background and
+          border are added just to demonstrate the layout bounds visually.
+        </Text>
+      </Container>
+    </div>
+  ),
+};
+
+export const SmallContainer: Story = {
+  args: {
+    size: "sm",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <div style={{ backgroundColor: "#f0f0f0", padding: "16px" }}>
+      <Container
+        {...args}
+        style={{
+          backgroundColor: "white",
+          padding: "16px",
+          border: "1px solid #ccc",
+        }}
+      >
+        <Text>Small Container Layout</Text>
+      </Container>
+    </div>
+  ),
+};
+
+export const FluidContainer: Story = {
+  args: {
+    fluid: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <div style={{ backgroundColor: "#f0f0f0", padding: "16px" }}>
+      <Container
+        {...args}
+        style={{
+          backgroundColor: "white",
+          padding: "16px",
+          border: "1px solid #ccc",
+        }}
+      >
+        <Text>Fluid Container Layout</Text>
+      </Container>
+    </div>
+  ),
 };

package/src/components/Container/Container.tsx

@@ -11,20 +11,8 @@ import {
   Container as MUIContainer,
   type ContainerProps as MUIContainerProps,
 } from "@mui/material";
-import { type RecursicaSpacing } from "../../utils/filterStylingProps";
 
-export interface RecursicaContainerProps {
-  children?: React.ReactNode;
-  size?:
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | RecursicaSpacing
-    | (string & {})
-    | number;
-}
+import { type RecursicaContainerProps } from "@recursica/adapter-common";
 
 export type ContainerProps = Omit<MUIContainerProps, "maxWidth"> &
   RecursicaContainerProps;

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

@@ -1,35 +1,141 @@
+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"],
   parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
+    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;
+
 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,9 @@
 import React from "react";
 import "./DatePicker.module.css";
+import { type RecursicaDatePickerProps } from "@recursica/adapter-common";
 
-export type DatePickerProps = React.HTMLAttributes<HTMLDivElement>;
+export type DatePickerProps = React.HTMLAttributes<HTMLDivElement> &
+  RecursicaDatePickerProps;
 
 export const DatePicker: React.FC<DatePickerProps> = (props) => {
   return <div {...props}>DatePicker</div>;