@recursica/mantine-adapter 0.7.0 → 0.8.0

package/dist/src/components/Container/Container.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { ContainerProps as MantineContainerProps } from '@mantine/core';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export interface RecursicaContainerProps {
+    /**
+     * Children components inside the layout container
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Container layout wrapper
+ */
+export type ContainerProps = RecursicaOverStyled<MantineContainerProps & RecursicaContainerProps>;
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Dropdown/Dropdown.d.ts

@@ -1,3 +1,11 @@
 import { default as React } from 'react';
-export type DropdownProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Dropdown: React.FC<DropdownProps>;
+import { SelectProps as MantineSelectProps } from '@mantine/core';
+import { ReadOnlyControlProps } from '@recursica/adapter-common';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
+export interface RecursicaDropdownProps extends Omit<MantineSelectProps, "size" | "variant" | "radius" | "wrapperProps" | "label" | "description" | "error" | "required" | "withAsterisk">, Pick<RecursicaFormControlWrapperProps, "label" | "error" | "required" | "withAsterisk" | "id" | "assistiveText" | "assistiveWithIcon" | "formLayout" | "labelSize" | "labelAlignment" | "labelOptionalText" | "labelWithEditIcon" | "onLabelEditClick">, ReadOnlyControlProps {
+    /** Internal hook for Selects to override raw layout width properties when necessary */
+    containerWidth?: React.CSSProperties["width"];
+}
+export type DropdownProps = RecursicaOverStyled<RecursicaDropdownProps>;
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/Flex/Flex.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { FlexProps as MantineFlexProps } from '@mantine/core';
+import { RecursicaOverStyled, RecursicaSpacing } from '../../utils/filterStylingProps';
+export interface RecursicaFlexProps {
+    /**
+     * Children components inside the Flex container
+     */
+    children?: React.ReactNode;
+    gap?: MantineFlexProps["gap"] | RecursicaSpacing;
+    rowGap?: MantineFlexProps["gap"] | RecursicaSpacing;
+    columnGap?: MantineFlexProps["gap"] | RecursicaSpacing;
+}
+/**
+ * Flex layout wrapper
+ */
+export type FlexProps = RecursicaOverStyled<MantineFlexProps & RecursicaFlexProps>;
+export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Group/Group.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { GroupProps as MantineGroupProps } from '@mantine/core';
+import { RecursicaOverStyled, RecursicaSpacing } from '../../utils/filterStylingProps';
+export interface RecursicaGroupProps {
+    /**
+     * Children components inside the group
+     */
+    children?: React.ReactNode;
+    gap?: MantineGroupProps["gap"] | RecursicaSpacing;
+    rowGap?: MantineGroupProps["gap"] | RecursicaSpacing;
+    columnGap?: MantineGroupProps["gap"] | RecursicaSpacing;
+}
+/**
+ * Group flex layout wrapper
+ */
+export type GroupProps = RecursicaOverStyled<MantineGroupProps & RecursicaGroupProps>;
+export declare const Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Stack/Stack.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { StackProps as MantineStackProps } from '@mantine/core';
+import { RecursicaOverStyled, RecursicaSpacing } from '../../utils/filterStylingProps';
+export interface RecursicaStackProps {
+    /**
+     * Children components inside the stack
+     */
+    children?: React.ReactNode;
+    gap?: MantineStackProps["gap"] | RecursicaSpacing;
+}
+/**
+ * Stack flex layout wrapper
+ */
+export type StackProps = RecursicaOverStyled<MantineStackProps & RecursicaStackProps>;
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/TextArea/TextArea.d.ts

@@ -1,3 +1,15 @@
 import { default as React } from 'react';
-export type TextAreaProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const TextArea: React.FC<TextAreaProps>;
+import { TextareaProps as MantineTextareaProps } from '@mantine/core';
+import { ReadOnlyControlProps } from '@recursica/adapter-common';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
+export interface RecursicaTextAreaProps extends Omit<MantineTextareaProps, "size" | "variant" | "radius" | "wrapperProps" | "label" | "description" | "error" | "required" | "withAsterisk">, Pick<RecursicaFormControlWrapperProps, "label" | "error" | "required" | "withAsterisk" | "id" | "assistiveText" | "assistiveWithIcon" | "formLayout" | "labelSize" | "labelAlignment" | "labelOptionalText" | "labelWithEditIcon" | "onLabelEditClick">, ReadOnlyControlProps {
+    /** Maximum rows for autosize textarea to grow */
+    maxRows?: number;
+    /** Minimum rows of autosize textarea */
+    minRows?: number;
+    /** If set, enables textarea height growing with its content */
+    autosize?: boolean;
+}
+export type TextAreaProps = RecursicaOverStyled<RecursicaTextAreaProps>;
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/src/components/index.d.ts

@@ -7,10 +7,13 @@ export * from './Card/Card';
 export * from './Checkbox/Checkbox';
 export * from './Checkbox/CheckboxGroup';
 export * from './Chip/Chip';
+export * from './Container/Container';
 export * from './DatePicker/DatePicker';
 export * from './Dropdown/Dropdown';
 export * from './FileInput/FileInput';
 export * from './FileUpload/FileUpload';
+export * from './Flex/Flex';
+export * from './Group/Group';
 export * from './HoverCard/HoverCard';
 export * from './Link/Link';
 export * from './Loader/Loader';
@@ -26,14 +29,17 @@ export * from './ReadOnlyField';
 export * from './Search/Search';
 export * from './SegmentedControl/SegmentedControl';
 export * from './Slider/Slider';
+export * from './Stack/Stack';
 export * from './Stepper/Stepper';
 export * from './Switch/Switch';
 export * from './Table/Table';
 export * from './Tabs/Tabs';
+export * from './Text/Text';
 export * from './TextArea/TextArea';
 export * from './TextField/TextField';
 export * from './TimePicker/TimePicker';
 export * from './Timeline/Timeline';
+export * from './Title/Title';
 export * from './Toast/Toast';
 export * from './Tooltip/Tooltip';
 export * from './TransferList/TransferList';

package/package.json

@@ -11,7 +11,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica.git"
   },
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/components/Container/CONTAINER_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,4 @@
+# Container Implementation Notes
+
+The `Container` component is a generic layout wrapper mapped directly to Mantine's `Container`.
+It serves to provide standardized centered max-width bounds around content. Mantine handles the width boundaries inherently based on size properties.

package/src/components/Container/Container.module.css

@@ -0,0 +1,7 @@
+/* HARDCODED VALUES:
+ * None. This is a generic layout wrapper.
+ */
+
+.root {
+  /* Mantine handles container constraints natively. */
+}

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

@@ -0,0 +1,102 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Container } from "./Container";
+import { Text } from "../Text/Text";
+
+type ContainerStoryProps = React.ComponentProps<typeof Container>;
+
+const meta: Meta<ContainerStoryProps> = {
+  title: "UI-Kit/Container",
+  component: Container,
+  tags: ["autodocs"],
+  parameters: {
+    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"],
+      description: "Maximum width defined by Mantine system 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<ContainerStoryProps>;
+
+export const Default: Story = {
+  render: (args) => (
+    <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",
+  },
+  render: (args) => (
+    <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,
+  },
+  render: (args) => (
+    <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

@@ -0,0 +1,63 @@
+import React, { forwardRef } from "react";
+import {
+  Container as MantineContainer,
+  type ContainerProps as MantineContainerProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Container.module.css";
+
+export interface RecursicaContainerProps {
+  /**
+   * Children components inside the layout container
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Container layout wrapper
+ */
+export type ContainerProps = RecursicaOverStyled<
+  MantineContainerProps & RecursicaContainerProps
+>;
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  function Container({ children, overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    const mergedClassNames: Partial<Record<string, string>> = {
+      root: styles.root,
+    };
+
+    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;
+    }
+
+    const classNameProp = restRecord.className as string | undefined;
+    const finalClass = classNameProp
+      ? `${styles.root} ${classNameProp}`
+      : styles.root;
+
+    return (
+      <MantineContainer
+        ref={ref}
+        className={finalClass}
+        classNames={mergedClassNames}
+        {...sanitizedProps}
+      >
+        {children}
+      </MantineContainer>
+    );
+  },
+);
+
+Container.displayName = "Container";

package/src/components/Dropdown/DROPDOWN_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,7 @@
+# Dropdown Implementation Notes
+
+The `Dropdown` component is mapped explicitly to Mantine's `<Select>` following the exact same strict encapsulation rules as `TextField`.
+
+1. **Naked Primitive Mapping:** Mantine's `Select` natively executes macro-label generation. To decouple it, we explicitly disable internal labels (`label={undefined}`) and inject it purely inside our generic `FormControlWrapper`.
+2. **Strict Dropdown Design Tokens:** The adapter implements strictly sandboxed styling utilizing only `--recursica_ui-kit_components_dropdown_...` variables. It explicitly does NOT inherit general `text-field` tokens despite geometric similarities, ensuring dropdown menus can be themed independently.
+3. **Dropdown Appendages:** To correctly map Mantine's detached Popover `.dropdown` and list `.option` items, we targeted focus and geometric bindings appending standard padding structures matched to the dropdown height overrides dynamically into our `Dropdown.module.css`.

package/src/components/Dropdown/Dropdown.module.css

@@ -0,0 +1,272 @@
+/* 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.
+   - placeholder opacity: 0.5. The dropdown parameters currently lack a dedicated placeholder-opacity variable.
+*/
+
+.root {
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: var(--recursica_ui-kit_components_dropdown_properties_min-height);
+
+  /* Override Mantine native Input variables governing section spacing padding mathematics safely */
+  --input-left-section-size: calc(
+    var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
+      (
+        var(
+            --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+          ) *
+          2
+      )
+  );
+  --input-right-section-size: calc(
+    var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
+      (
+        var(
+            --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+          ) *
+          2
+      )
+  );
+}
+
+.input {
+  /* Structural Overrides */
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+
+  /* Box Geometry */
+  min-height: var(--recursica_ui-kit_components_dropdown_properties_min-height);
+  padding-top: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  );
+  padding-left: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  );
+  padding-right: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_dropdown_properties_border-radius
+  );
+  border-width: 1px;
+  border-style: solid;
+
+  /* Strict Typography Unification */
+  font-family: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_dropdown_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_dropdown_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_dropdown_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_dropdown_properties_text_text-transform
+  );
+
+  /* Base State Default Execution */
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_text
+  );
+
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.input::placeholder {
+  /* HARDCODE: Dropdown properties currently missing placeholder-opacity tokens from Figma JSON */
+  opacity: 0.5;
+  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_dropdown_properties_icon-size);
+  height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_leading-icon
+  );
+}
+
+.section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_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_dropdown_variants_states_focus_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_background
+  );
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_text
+  );
+}
+
+.root:focus-within .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_leading-icon
+  );
+}
+
+.root:focus-within .section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_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_dropdown_variants_states_error_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_background
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_text
+  ) !important;
+}
+
+.root[data-error] .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_leading-icon
+  ) !important;
+}
+
+.root[data-error] .section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_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_dropdown_variants_states_disabled_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_background
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_dropdown_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_dropdown_variants_states_disabled_properties_colors_leading-icon
+  ) !important;
+}
+
+.root[data-disabled] .section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_trailing-icon
+  ) !important;
+}
+
+/* -------------------------------------
+   DROPDOWN & OPTIONS ARCHITECTURE
+-------------------------------------- */
+
+.dropdown {
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_background
+  );
+  border: 1px solid
+    var(
+      --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_border-color
+    );
+  border-radius: var(
+    --recursica_ui-kit_components_dropdown_properties_border-radius
+  );
+  overflow: hidden;
+}
+
+.option {
+  font-family: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-size
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-weight
+  );
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_text
+  );
+  padding: calc(
+      var(--recursica_ui-kit_components_dropdown_properties_vertical-padding) *
+        0.75
+    )
+    var(--recursica_ui-kit_components_dropdown_properties_horizontal-padding);
+  cursor: pointer;
+}
+
+.option[data-selected="true"],
+.option[data-combobox-selected="true"],
+.option[data-hovered="true"],
+.option:hover {
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_background
+  );
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_text
+  );
+}