@recursica/mantine-adapter 0.5.0 → 0.7.0

package/src/components/Search/Search.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type SearchProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Search: React.FC<SearchProps> = (props) => {
+  return <div {...props}>Search</div>;
+};

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

@@ -0,0 +1,22 @@
+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",
+  component: SegmentedControl,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SegmentedControl>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="SegmentedControl" />,
+};

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type SegmentedControlProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const SegmentedControl: React.FC<SegmentedControlProps> = (props) => {
+  return <div {...props}>SegmentedControl</div>;
+};

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "./Slider";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Slider> = {
+  title: "UI-Kit/🚧 Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Slider" />,
+};

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type SliderProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Slider: React.FC<SliderProps> = (props) => {
+  return <div {...props}>Slider</div>;
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stepper } from "./Stepper";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Stepper> = {
+  title: "UI-Kit/🚧 Stepper",
+  component: Stepper,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Stepper" />,
+};

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type StepperProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Stepper: React.FC<StepperProps> = (props) => {
+  return <div {...props}>Stepper</div>;
+};

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./Switch";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Switch> = {
+  title: "UI-Kit/🚧 Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Switch" />,
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type SwitchProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Switch: React.FC<SwitchProps> = (props) => {
+  return <div {...props}>Switch</div>;
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Table } from "./Table";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Table> = {
+  title: "UI-Kit/🚧 Table",
+  component: Table,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Table" />,
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TableProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Table: React.FC<TableProps> = (props) => {
+  return <div {...props}>Table</div>;
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs } from "./Tabs";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof Tabs> = {
+  title: "UI-Kit/🚧 Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="Tabs" />,
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TabsProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Tabs: React.FC<TabsProps> = (props) => {
+  return <div {...props}>Tabs</div>;
+};

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./Text";
+import { Layer } from "@recursica/adapter-common";
+
+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 `<Title>` instead.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "body",
+        "body-small",
+        "caption",
+        "overline",
+        "subtitle",
+        "subtitle-small",
+      ],
+      description:
+        "Controls the standard logical boundary definitions natively extracted from Figma.",
+    },
+    c: {
+      control: "text",
+      description:
+        "Standard Mantine color string mapped via internal boundaries. Example: `dimmed`",
+    },
+  },
+};
+
+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 }) => (
+    <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

@@ -0,0 +1,54 @@
+import { forwardRef, type ReactNode } from "react";
+import {
+  Text as MantineText,
+  type TextProps as MantineTextProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+
+export type TextVariant =
+  | "body"
+  | "body-small"
+  | "caption"
+  | "overline"
+  | "subtitle"
+  | "subtitle-small";
+
+export type RecursicaTextProps = Omit<MantineTextProps, "variant"> & {
+  /**
+   * The explicit typography hierarchy dictated by Recursica's global design tokens.
+   */
+  variant?: TextVariant;
+  children?: ReactNode;
+};
+
+export type TextProps = RecursicaOverStyled<RecursicaTextProps>;
+
+/**
+ * A generalized typographical wrapper limiting text properties to bounded Recursica UI-kit tokens inherently.
+ * Do not use for semantic headings; use the explicit `<Title>` component for `<h1>` - `<h6>`.
+ */
+export const Text = forwardRef<HTMLDivElement, TextProps>(function Text(
+  { overStyled = false, variant = "body", ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+
+  const typographyClass = `recursica_brand_typography_${variant}`;
+  const mergedClassName = classNameProp
+    ? `${typographyClass} ${classNameProp}`
+    : typographyClass;
+
+  return (
+    <MantineText
+      ref={ref}
+      className={mergedClassName}
+      {...(sanitizedProps as unknown as MantineTextProps)}
+    />
+  );
+});
+Text.displayName = "Text";

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "./TextArea";
+import { ComingSoon } from "@recursica/storybook-template";
+
+const meta: Meta<typeof TextArea> = {
+  title: "UI-Kit/🚧 TextArea",
+  component: TextArea,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {
+  render: () => <ComingSoon componentName="TextArea" />,
+};

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type TextAreaProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const TextArea: React.FC<TextAreaProps> = (props) => {
+  return <div {...props}>TextArea</div>;
+};

package/src/components/TextField/TEXTFIELD_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,19 @@
+# TextField Implementation Notes
+
+## Architectural philosophy
+
+The `TextField` primitive intentionally ignores Mantine's built-in `<TextInput>` structure in favor of directly binding against `<Input>`.
+
+### 1. Bypassing `Input.Wrapper`
+
+Because `<TextInput>` inherently renders Mantine's `Input.Wrapper` underneath the hood, utilizing it natively double-wraps our layouts causing massive DOM bloat and margin collapsing errors. By leveraging the completely naked `<Input>` primitive natively natively alongside `FormControlWrapper`, we retain full logical control of where the `label` maps, avoiding dual label conflicts or mis-aligned asterisks securely.
+
+### 2. State Hooks (`wrapperProps`)
+
+Because we target `<Input>`, all dynamic UI modifiers (`disabled`, `error`, etc) must strictly be applied to the `.root` CSS module to correctly style the internal `<input>` boxes AND the nested `.[data-position]` icon sections simultaneously.
+
+To accomplish this safely without spilling random pseudo-variables onto the input parameters, we exclusively use Mantine's `<Input wrapperProps={{...}}>` block natively locking `.root[data-error]` to correctly map Recursica UI variable hooks without breaking the DOM hierarchy natively.
+
+### 3. Component Definition Intersections
+
+To strictly acquire native HTML typings, `TextField.tsx` explicitly extracts `React.ComponentPropsWithoutRef<"input">`. However, to prevent Typescript strict union collisions with overlapping Mantine definitions over functional `style` components and custom mappings natively, we meticulously omit (`Pick<InputWrapperProps, ...>`) explicit base elements to guarantee that strictly Recursica styles traverse the array flawlessly.

package/src/components/TextField/TextField.module.css

@@ -0,0 +1,225 @@
+/* HARDCODED VALUES:
+   - border-width: 1px. Native geometric boundary for the input box.
+   - border-style: solid. Native structural rendering rule.
+   - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
+   - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
+*/
+
+.root {
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: var(
+    --recursica_ui-kit_components_text-field_properties_min-height
+  );
+
+  /* Override Mantine native Input variables governing section spacing padding mathematics safely */
+  --input-left-section-size: calc(
+    var(--recursica_ui-kit_components_text-field_properties_icon-size) +
+      (
+        var(
+            --recursica_ui-kit_components_text-field_properties_horizontal-padding
+          ) *
+          2
+      )
+  );
+  --input-right-section-size: calc(
+    var(--recursica_ui-kit_components_text-field_properties_icon-size) +
+      (
+        var(
+            --recursica_ui-kit_components_text-field_properties_horizontal-padding
+          ) *
+          2
+      )
+  );
+}
+
+.input {
+  /* Structural Overrides */
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+
+  /* Box Geometry */
+  min-height: var(
+    --recursica_ui-kit_components_text-field_properties_min-height
+  );
+  padding-top: var(
+    --recursica_ui-kit_components_text-field_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_text-field_properties_vertical-padding
+  );
+  padding-left: var(
+    --recursica_ui-kit_components_text-field_properties_horizontal-padding
+  );
+  padding-right: var(
+    --recursica_ui-kit_components_text-field_properties_horizontal-padding
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_text-field_properties_border-radius
+  );
+  border-width: 1px;
+  border-style: solid;
+
+  /* Strict Typography Unification */
+  font-family: var(
+    --recursica_ui-kit_components_text-field_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_text-field_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_text-field_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_text-field_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_text-field_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_text-field_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_text-field_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_text-field_properties_text_text-transform
+  );
+
+  /* Base State Default Execution */
+  background-color: var(
+    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_text
+  );
+
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.input::placeholder {
+  opacity: var(
+    --recursica_ui-kit_components_text-field_properties_placeholder-opacity
+  );
+  color: inherit;
+}
+
+/* Dynamic Padding Overrides */
+.root[data-with-left-section] .input {
+  padding-left: var(--input-left-section-size);
+}
+
+.root[data-with-right-section] .input {
+  padding-right: var(--input-right-section-size);
+}
+
+/* Flexible End-Caps (Icons, actions) */
+.section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.section :global(svg) {
+  width: var(--recursica_ui-kit_components_text-field_properties_icon-size);
+  height: var(--recursica_ui-kit_components_text-field_properties_icon-size);
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_leading-icon
+  );
+}
+
+.section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_trailing-icon
+  );
+}
+
+/* -------------------------------------
+   STATE CASCADE ARCHITECTURE
+-------------------------------------- */
+
+/* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+.input:focus-within,
+.input:focus {
+  border-color: var(
+    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_background
+  );
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_text
+  );
+}
+
+.root:focus-within .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_leading-icon
+  );
+}
+
+.root:focus-within .section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_trailing-icon
+  );
+}
+
+/* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-error] .input {
+  border-color: var(
+    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_background
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_text
+  ) !important;
+}
+
+.root[data-error] .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_leading-icon
+  ) !important;
+}
+
+.root[data-error] .section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_trailing-icon
+  ) !important;
+}
+
+/* Disabled State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-disabled] .input {
+  border-color: var(
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_background
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_text
+  ) !important;
+  cursor: not-allowed;
+}
+
+.root[data-disabled] .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_leading-icon
+  ) !important;
+}
+
+.root[data-disabled] .section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_trailing-icon
+  ) !important;
+}