@recursica/mantine-adapter 0.7.0 → 0.9.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">, Pick<RecursicaFormControlWrapperProps, "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">, Pick<RecursicaFormControlWrapperProps, "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.9.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/components/Accordion/Accordion.module.css

@@ -40,16 +40,22 @@
 
   border-style: solid;
   border-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_divider
+    --recursica_ui-kit_components_accordion-item_properties_colors_item-border-color
   );
   border-width: var(
-    --recursica_ui-kit_components_accordion-item_properties_divider-size
+    --recursica_ui-kit_components_accordion-item_properties_item-border-size
+  );
+  border-bottom-color: var(
+    --recursica_ui-kit_components_accordion_properties_colors_divider
+  );
+  border-bottom-width: var(
+    --recursica_ui-kit_components_accordion_properties_divider-size
   );
   border-radius: var(
     --recursica_ui-kit_components_accordion-item_properties_border-radius
   );
   box-shadow: var(
-    --recursica_ui-kit_components_accordion-item_properties_elevation
+    --recursica_ui-kit_components_accordion-item_properties_elevation-item
   );
 
   background-color: var(
@@ -79,10 +85,10 @@
 
   /* Strip Mantine's baked padding directly */
   padding: var(
-      --recursica_ui-kit_components_accordion-item_properties_padding-vertical
+      --recursica_ui-kit_components_accordion-item_properties_header-vertical-padding
     )
     var(
-      --recursica_ui-kit_components_accordion-item_properties_padding-horizontal
+      --recursica_ui-kit_components_accordion-item_properties_header-horizontal-padding
     );
   background-color: transparent;
 
@@ -206,11 +212,26 @@
 /* ==== ACCORDION PANEL (CONTENT) ==== */
 .panel {
   box-sizing: border-box;
-  margin: 0;
+  margin: var(
+    --recursica_ui-kit_components_accordion-item_properties_content-margin
+  );
   padding: 0; /* Overriding dynamic layout structure */
   background-color: var(
     --recursica_ui-kit_components_accordion-item_properties_colors_content-background
   );
+  border-style: solid;
+  border-color: var(
+    --recursica_ui-kit_components_accordion-item_properties_colors_content-border-color
+  );
+  border-width: var(
+    --recursica_ui-kit_components_accordion-item_properties_content-border-size
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_accordion-item_properties_content-border-radius
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_accordion-item_properties_elevation-content
+  );
 }
 
 .content {
@@ -218,7 +239,7 @@
   /* Strip Mantine padding and apply logic directly mapped */
   padding: 0
     var(
-      --recursica_ui-kit_components_accordion-item_properties_padding-horizontal
+      --recursica_ui-kit_components_accordion-item_properties_content-horizontal-padding
     )
     var(
       --recursica_ui-kit_components_accordion-item_properties_content-bottom-padding
@@ -226,7 +247,7 @@
 
   /* Apply offset gap explicitly calculated below header */
   padding-top: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-content-gap
+    --recursica_ui-kit_components_accordion-item_properties_content-top-padding
   );
 
   color: var(

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -125,7 +125,7 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
             {React.Children.map(children, (child) => {
               if (React.isValidElement(child)) {
                 return React.cloneElement(child as React.ReactElement<any>, {
-                  disabled: readOnly || child.props.disabled,
+                  disabled: readOnly || (child.props as any).disabled,
                 });
               }
               return child;

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`.