@recursica/adapter-mui-v7 1.3.1 → 1.3.3

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

@@ -1,174 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Tabs, Tab, TabPanel } from "./Tabs";
-import { TabContext } from "@mui/lab";
-import { Flex } from "../Flex/Flex";
-
-const meta: Meta<typeof Tabs> = {
-  title: "UI-Kit/Tabs",
-  component: Tabs,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    variant: {
-      control: "radio",
-      options: ["default", "outline", "pills"],
-    },
-    orientation: {
-      control: "radio",
-      options: ["horizontal", "vertical"],
-    },
-    // @ts-expect-error Custom prop not in native TabsProps
-    disabled: {
-      control: "boolean",
-    },
-    defaultChecked: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-const InteractiveTabs = (
-  args: React.ComponentProps<typeof Tabs> & {
-    disabled?: boolean;
-    inverted?: boolean;
-  },
-) => {
-  const [value, setValue] = useState("gallery");
-
-  const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
-    setValue(newValue);
-  };
-
-  return (
-    <Flex
-      direction={args.orientation === "vertical" ? "row" : "column"}
-      style={{ width: 600, height: 300 }}
-    >
-      <TabContext value={value}>
-        <Tabs value={value} onChange={handleChange} {...args}>
-          <Tab
-            value="gallery"
-            label="Gallery"
-            disabled={args.disabled}
-            icon={
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                width={16}
-                height={16}
-              >
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                <circle cx="8.5" cy="8.5" r="1.5"></circle>
-                <polyline points="21 15 16 10 5 21"></polyline>
-              </svg>
-            }
-            iconPosition="start"
-          />
-          <Tab
-            value="messages"
-            label="Messages"
-            disabled={args.disabled}
-            icon={
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                width={16}
-                height={16}
-              >
-                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-              </svg>
-            }
-            iconPosition="start"
-          />
-          <Tab
-            value="settings"
-            label="Settings"
-            disabled={args.disabled}
-            icon={
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                width={16}
-                height={16}
-              >
-                <circle cx="12" cy="12" r="3"></circle>
-                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-              </svg>
-            }
-            iconPosition="start"
-          />
-        </Tabs>
-
-        <TabPanel value="gallery">Gallery tab content</TabPanel>
-
-        <TabPanel value="messages">Messages tab content</TabPanel>
-
-        <TabPanel value="settings">Settings tab content</TabPanel>
-      </TabContext>
-    </Flex>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "default",
-    orientation: "horizontal",
-  },
-};
-
-export const Outline: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "outline",
-    orientation: "horizontal",
-  },
-};
-
-export const Pills: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "pills",
-    orientation: "horizontal",
-  },
-};
-
-export const Vertical: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "default",
-    orientation: "vertical",
-  },
-};
-
-export const Inverted: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "default",
-    orientation: "horizontal",
-    inverted: true,
-  },
-};

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

@@ -1,123 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Text } from "./Text";
-import brand from "../../../recursica_brand.json";
-
-const BUILT_IN_VARIANTS = ["body", "caption", "overline"];
-
-// Custom styles defined under `brand.typography` (beyond h1-h6 and the built-ins above); each has
-// an exported `recursica_brand_typography_<name>` class, so `Text` renders it by name.
-// Sorted so the render order is stable across exports (the visual diff depends on it).
-const customVariants = Object.keys(brand.brand.typography)
-  .filter((name) => !/^h[1-6]$/.test(name) && !BUILT_IN_VARIANTS.includes(name))
-  .sort();
-
-const meta: Meta<typeof 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 `<Heading>` instead.",
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: [...BUILT_IN_VARIANTS, ...customVariants],
-      description:
-        "Controls the standard logical boundary definitions natively extracted from Figma.",
-    },
-    color: {
-      control: "select",
-      options: ["default", "warning", "alert", "success"],
-      description:
-        "Semantic text color, bound to the theme's text-element tokens via `data-color`.",
-    },
-    emphasis: {
-      control: "select",
-      options: ["high", "low"],
-      description:
-        "Emphasis level, bound to the theme's text-emphasis opacity tokens via `data-emphasis`.",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Text>;
-
-export const Default: Story = {
-  args: {
-    variant: "body",
-    children:
-      "This is standard body typography controlled by the central UI-kit boundaries exclusively.",
-  },
-  render: ({ ...args }) => <Text {...args} />,
-};
-
-export const StaticVariations: Story = {
-  args: {},
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-      <Text variant="body">
-        Body (Base paragraph and generic information flow)
-      </Text>
-      <Text variant="caption">
-        Caption (Data table descriptions or micro-labels)
-      </Text>
-      <Text variant="overline">
-        Overline (Card contextual pre-headers and categorical tags)
-      </Text>
-      {customVariants.map((name) => (
-        <Text key={name} variant={name}>
-          {name} (Custom style from brand.typography)
-        </Text>
-      ))}
-    </div>
-  ),
-};
-
-export const Colors: Story = {
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Semantic colors map to the active layer's text-element tokens. `default` follows the layer's base text color; `warning`, `alert`, and `success` pull their respective semantic tones.",
-      },
-    },
-  },
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-      <Text color="default">Default (follows the layer's base text color)</Text>
-      <Text color="warning">Warning (cautionary, non-blocking messaging)</Text>
-      <Text color="alert">Alert (errors and destructive states)</Text>
-      <Text color="success">Success (confirmations and positive states)</Text>
-    </div>
-  ),
-};
-
-export const Emphasis: Story = {
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Emphasis controls text opacity via the theme's text-emphasis tokens. `high` (the default) is solid; `low` dims the text for secondary content.",
-      },
-    },
-  },
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-      <Text emphasis="high">
-        High emphasis (solid — primary reading content)
-      </Text>
-      <Text emphasis="low">
-        Low emphasis (dimmed — secondary or supporting content)
-      </Text>
-    </div>
-  ),
-};

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

@@ -1,94 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { TextArea } from "./TextArea";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-
-type TextAreaStoryProps = React.ComponentProps<typeof TextArea>;
-
-const meta: Meta<TextAreaStoryProps> = {
-  title: "UI-Kit/TextArea",
-  component: TextArea,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "TextArea provides a multi-line input field, mapping layout explicitly over the standardized FormControlWrapper.",
-      },
-    },
-  },
-  args: {
-    label: "Description",
-    assistiveText: "Enter your full description here.",
-    disabled: false,
-    required: false,
-    readOnly: false,
-    autosize: false,
-  },
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    ...formControlArgTypes,
-    readOnly: {
-      control: "boolean",
-    },
-    autosize: {
-      control: "boolean",
-    },
-    minRows: {
-      control: "number",
-    },
-    maxRows: {
-      control: "number",
-    },
-    value: {
-      control: "text",
-    },
-    placeholder: {
-      control: "text",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<TextAreaStoryProps>;
-
-export const Default: Story = {
-  args: {
-    placeholder: "Type something long...",
-  },
-};
-
-export const Autosize: Story = {
-  args: {
-    label: "Auto-sizing TextArea",
-    autosize: true,
-    minRows: 2,
-    maxRows: 6,
-    placeholder: "Type multiple lines here. Watch it grow!",
-  },
-};
-
-export const StaticError: Story = {
-  args: {
-    error: "This field requires a detailed explanation.",
-    value: "Some bad input.",
-  },
-};
-
-export const StaticDisabled: Story = {
-  args: {
-    disabled: true,
-    value: "This content is locked.",
-  },
-};
-
-export const StaticReadOnly: Story = {
-  args: {
-    label: "Read Only View",
-    readOnly: true,
-    value: "This text is safely frozen in read-only form.",
-  },
-};

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

@@ -1,162 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { TextField } from "./TextField";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-const meta: Meta<typeof TextField> = {
-  title: "UI-Kit/TextField",
-  component: TextField,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`TextField\` primitive functions as a universal text entry input natively integrated directly into the unified \`FormControlWrapper\` architecture.
-
-### Architectural Decoupling
-Recursica forcibly overrides the internal Mantine \`Input.Wrapper\` defaults injecting an untamed \`<Input>\` layout primitive perfectly mapped back into our rigid design systems. State modifiers (e.g. Focus, Errors) hook flawlessly back onto our CSS module mapping variable colors strictly accurately.
-
-### Examples
-Always structure horizontal architectures via the generic \`formLayout\` parameter.
-\`\`\`tsx
-<TextField 
-  label="Primary Network Socket" 
-  assistiveText="Ensure connections resolve seamlessly." 
-  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 TextField>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    label: "Authentication Token",
-    placeholder: "Enter validation hash...",
-    assistiveText:
-      "Tokens are stored identically locally and strictly ephemeral.",
-  },
-};
-
-export const FormsSideBySide: Story = {
-  args: {
-    label: "Distributed Access Control",
-    placeholder: "admin@node.local",
-    assistiveText:
-      "Specify the exact cluster administrative credentials enforcing strict domain policies. This violently long string tests native textual wrapping safely mapping alongside inputs.",
-    formLayout: "side-by-side",
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  args: {
-    label: "Search Global Context",
-    placeholder: "Search for repositories...",
-    leftSection: (
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-      </svg>
-    ),
-  },
-};
-
-export const WithTrailingIcon: Story = {
-  args: {
-    label: "Validation URL",
-    placeholder: "https://recursica.dev",
-    rightSection: (
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <polyline points="20 6 9 17 4 12"></polyline>
-      </svg>
-    ),
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: "Disabled Deployment Node",
-    placeholder: "Disabled primitive map...",
-    disabled: true,
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    label: "Cluster Failure",
-    placeholder: "Failing component instance...",
-    defaultValue: "Invalid Execution Plan",
-    error:
-      "Critical runtime node disconnect detected traversing DOM architecture.",
-    required: true,
-  },
-};
-
-export const StaticReadOnly: Story = {
-  args: {
-    label: "Static ReadOnly Review",
-    placeholder: "Ignored...",
-    value: "Explicitly Uneditable Bound Output",
-    readOnly: true,
-  },
-};
-
-export const EditableReadOnly: Story = {
-  args: {
-    label: "Editable ReadOnly Review",
-    placeholder: "Ignored until active...",
-    defaultValue: "Waiting for Edit Execution",
-    readOnly: true,
-    labelWithEditIcon: true,
-  },
-};

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

@@ -1,155 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { TimePicker } from "./TimePicker";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-
-const meta: Meta<typeof TimePicker> = {
-  title: "UI-Kit/TimePicker",
-  component: TimePicker,
-  tags: ["autodocs"],
-  parameters: {
-    controls: {
-      include: [
-        "value",
-        "defaultValue",
-        "disabled",
-        "error",
-        "required",
-        "label",
-        "assistiveText",
-        "readOnly",
-        "withSeconds",
-        "formLayout",
-      ],
-    },
-    docs: {
-      description: {
-        component: `
-The \`TimePicker\` primitive provides a 12-hour time field (via \`@mui/x-date-pickers\`) paired with a dedicated AM/PM \`Dropdown\`-style selector, integrated directly into the \`FormControlWrapper\` architecture. This composite is the only way this component operates — a Recursica-specific design, not a user-configurable option.
-
-### Examples
-Always structure horizontal architectures via the generic \`formLayout\` parameter.
-\`\`\`tsx
-<TimePicker
-  label="Start Time"
-  assistiveText="Select the deployment kick-off time."
-  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.",
-    },
-    withSeconds: {
-      control: "boolean",
-      description: "Shows and allows editing the seconds segment.",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TimePicker>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    label: "Meeting Time",
-    assistiveText: "Choose the start time in your local timezone.",
-  },
-};
-
-export const FormsSideBySide: Story = {
-  args: {
-    label: "Incident Start Time",
-    assistiveText: "When did the incident originally occur?",
-    formLayout: "side-by-side",
-  },
-};
-
-export const WithSeconds: Story = {
-  args: {
-    label: "Precise Execution Time",
-    assistiveText: "Includes a seconds segment for exact scheduling.",
-    withSeconds: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: "Disabled Time Slot",
-    disabled: true,
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    label: "Deployment Window",
-    error: "The chosen time falls outside the allowed deployment window.",
-    required: true,
-  },
-};
-
-export const WithLeadingIcon: Story = {
-  args: {
-    label: "Meeting Time",
-    assistiveText: "Choose the start time in your local timezone.",
-    leftSection: (
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="12" cy="12" r="10"></circle>
-        <polyline points="12 6 12 12 16 14"></polyline>
-      </svg>
-    ),
-  },
-};
-
-export const StaticReadOnly: Story = {
-  args: {
-    label: "Static ReadOnly Review",
-    value: "14:30",
-    readOnly: true,
-  },
-};
-
-export const EditableReadOnly: Story = {
-  args: {
-    label: "Editable ReadOnly Review",
-    defaultValue: "09:00",
-    readOnly: true,
-    labelWithEditIcon: true,
-  },
-};