@recursica/mui-adapter 0.2.0 → 0.3.0

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

@@ -6,6 +6,25 @@ const meta: Meta<typeof Radio> = {
   title: "UI-Kit/🚧 Radio",
   component: Radio,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

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

@@ -6,6 +6,25 @@ const meta: Meta<typeof ReadOnlyField> = {
   title: "UI-Kit/🚧 ReadOnlyField",
   component: ReadOnlyField,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

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

@@ -6,6 +6,25 @@ const meta: Meta<typeof 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",
+      ],
+    },
+  },
 };
 
 export default meta;

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

@@ -6,6 +6,25 @@ const meta: Meta<typeof Slider> = {
   title: "UI-Kit/🚧 Slider",
   component: Slider,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

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

@@ -1,16 +1,129 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Stack } from "./Stack";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Button } from "../Button";
+import { Text } from "../Text/Text";
 
-const meta: Meta<typeof Stack> = {
-  title: "UI-Kit/🚧 Stack",
+type StackStoryProps = React.ComponentProps<typeof Stack>;
+
+const meta: Meta<StackStoryProps> = {
+  title: "UI-Kit/Stack",
   component: Stack,
   tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Stack is a flex vertical layout container that maps directly to Mantine's Stack component allowing safe layout property passing.",
+      },
+    },
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "gap",
+        "alignItems",
+        "justifyContent",
+        "defaultChecked",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
+  args: {
+    gap: "rec-default",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+  },
+  argTypes: {
+    gap: {
+      control: "select",
+      options: [
+        "rec-none",
+        "rec-sm",
+        "rec-default",
+        "rec-md",
+        "rec-lg",
+        "rec-xl",
+        "rec-2xl",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+      ],
+      description: "Gap between elements",
+    },
+    alignItems: {
+      control: "select",
+      options: ["flex-start", "center", "flex-end", "stretch"],
+      description: "Align-items property",
+    },
+    justifyContent: {
+      control: "select",
+      options: [
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around",
+      ],
+      description: "Justify-content property",
+    },
+    defaultChecked: {
+      table: { disable: true },
+    },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof Stack>;
+
+type Story = StoryObj<StackStoryProps>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Stack" />,
+  // 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>
+      <Text>Text element within Stack</Text>
+    </Stack>
+  ),
+};
+
+export const StaticGapSmall: Story = {
+  args: {
+    gap: "rec-sm",
+  },
+  // 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>
+      <Button variant="solid">Item 3</Button>
+    </Stack>
+  ),
+};
+
+export const StaticGapLarge: Story = {
+  args: {
+    gap: "rec-xl",
+  },
+  // 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>
+      <Button variant="solid">Item 3</Button>
+    </Stack>
+  ),
 };

package/src/components/Stack/Stack.tsx

@@ -1,7 +1,39 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import {
+  Stack as MUIStack,
+  type StackProps as MUIStackProps,
+} from "@mui/material";
+import {
+  type RecursicaSpacing,
+  SPACING_MAP,
+  type OmitSx,
+  filterSxProp,
+} from "../../utils/filterStylingProps";
 
-export type StackProps = React.HTMLAttributes<HTMLDivElement>;
+export interface RecursicaStackProps {
+  children?: React.ReactNode;
+  gap?: MUIStackProps["spacing"] | RecursicaSpacing;
+}
 
-export const Stack: React.FC<StackProps> = (props) => {
-  return <div {...props}>Stack</div>;
-};
+export type StackProps = OmitSx<
+  Omit<MUIStackProps, "spacing"> & RecursicaStackProps
+>;
+
+export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
+  { children, gap = "rec-default", ...rest },
+  ref,
+) {
+  const safeProps = filterSxProp(rest as Record<string, unknown>);
+  const resolvedGap =
+    typeof gap === "string" && gap in SPACING_MAP
+      ? SPACING_MAP[gap as keyof typeof SPACING_MAP]
+      : gap;
+
+  return (
+    <MUIStack ref={ref} spacing={resolvedGap} {...safeProps}>
+      {children}
+    </MUIStack>
+  );
+});
+
+Stack.displayName = "Stack";

package/src/components/Stepper/Stepper.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Stepper> = {
   title: "UI-Kit/🚧 Stepper",
   component: Stepper,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

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

@@ -6,6 +6,25 @@ const meta: Meta<typeof Switch> = {
   title: "UI-Kit/🚧 Switch",
   component: Switch,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Table/Table.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Table> = {
   title: "UI-Kit/🚧 Table",
   component: Table,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Tabs/Tabs.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Tabs> = {
   title: "UI-Kit/🚧 Tabs",
   component: Tabs,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Text/Text.stories.tsx

@@ -1,16 +1,100 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Text } from "./Text";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Layer } from "@recursica/adapter-common";
 
 const meta: Meta<typeof Text> = {
-  title: "UI-Kit/🚧 Text",
+  title: "UI-Kit/Text",
   component: Text,
   tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The standard `<Text>` component controls common body sizing scales and implicit paragraphs governed by the active theme layer. For semantic headings (`h1` through `h6`), use `<Title>` instead.",
+      },
+    },
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "variant",
+        "children",
+        "component",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "body",
+        "body-small",
+        "caption",
+        "overline",
+        "subtitle",
+        "subtitle-small",
+      ],
+      description:
+        "Controls the standard logical boundary definitions natively extracted from Figma.",
+    },
+  },
 };
 
 export default meta;
+
 type Story = StoryObj<typeof Text>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Text" />,
+  args: {
+    variant: "body",
+    children:
+      "This is standard body typography controlled by the central UI-kit boundaries exclusively.",
+  },
+  render: ({ ...args }) => (
+    <Layer layer={0} style={{ padding: "48px" }}>
+      <Text {...args} />
+    </Layer>
+  ),
+};
+
+export const StaticVariations: Story = {
+  args: {},
+  render: () => (
+    <Layer
+      layer={0}
+      style={{
+        padding: "48px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+      }}
+    >
+      <Text variant="body">
+        Body (Base paragraph and generic information flow)
+      </Text>
+      <Text variant="body-small">
+        Body Small (Compacted list items and helper blocks)
+      </Text>
+      <Text variant="caption">
+        Caption (Data table descriptions or micro-labels)
+      </Text>
+      <Text variant="overline">
+        Overline (Card contextual pre-headers and categorical tags)
+      </Text>
+      <Text variant="subtitle">
+        Subtitle (Minor sub-headers avoiding heavy display weights)
+      </Text>
+      <Text variant="subtitle-small">
+        Subtitle Small (Section anchors deep in hierarchy)
+      </Text>
+    </Layer>
+  ),
 };

package/src/components/Text/Text.tsx

@@ -1,7 +1,30 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { Typography } from "../Typography/Typography";
+import { type RecursicaOverStyled } from "../../utils/filterStylingProps";
+import { type TypographyProps as MuiTypographyProps } from "@mui/material";
 
-export type TextProps = React.HTMLAttributes<HTMLDivElement>;
+export type TextVariant =
+  | "body"
+  | "body-small"
+  | "caption"
+  | "overline"
+  | "subtitle"
+  | "subtitle-small";
 
-export const Text: React.FC<TextProps> = (props) => {
-  return <div {...props}>Text</div>;
+export type RecursicaTextProps = Omit<MuiTypographyProps, "variant"> & {
+  variant?: TextVariant;
+  children?: React.ReactNode;
+  component?: React.ElementType;
 };
+
+export type TextProps = RecursicaOverStyled<RecursicaTextProps>;
+
+export const Text = forwardRef<HTMLElement, TextProps>(function Text(
+  { variant = "body", ...rest },
+  ref,
+) {
+  const typographyClass = `recursica_brand_typography_${variant}`;
+  return <Typography ref={ref} typographyClass={typographyClass} {...rest} />;
+});
+
+Text.displayName = "Text";

package/src/components/TextArea/TextArea.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof TextArea> = {
   title: "UI-Kit/🚧 TextArea",
   component: TextArea,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/TextField/TextField.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof TextField> = {
   title: "UI-Kit/🚧 TextField",
   component: TextField,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/TimePicker/TimePicker.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof TimePicker> = {
   title: "UI-Kit/🚧 TimePicker",
   component: TimePicker,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Timeline/Timeline.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Timeline> = {
   title: "UI-Kit/🚧 Timeline",
   component: Timeline,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;