@recursica/mantine-adapter 0.19.0 → 0.20.0

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

@@ -15,4 +15,12 @@ export interface RecursicaStackProps {
  * width, height, padding, margins, and flexbox alignment props to construct structural layouts.
  */
 export type StackProps = MantineStackProps & RecursicaStackProps;
-export declare const Stack: import('react').ForwardRefExoticComponent<MantineStackProps & RecursicaStackProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Stack: (<C = "div">(props: import('@mantine/core').PolymorphicComponentProps<C, StackProps>) => React.ReactElement) & Omit<import('react').FunctionComponent<(MantineStackProps & RecursicaStackProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "onChange" | "slot" | "title" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "unstyled" | "variant" | "attributes" | "justify" | "component" | "align"> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (MantineStackProps & RecursicaStackProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;

package/dist/src/utils/filterStylingProps.d.ts

@@ -25,6 +25,7 @@ export declare const BLOCKED_STYLING_KEYS: readonly ["className", "classNames",
 export type BlockedStylingKeys = (typeof BLOCKED_STYLING_KEYS)[number];
 export type RecursicaSpacing = "rec-none" | "rec-sm" | "rec-default" | "rec-md" | "rec-lg" | "rec-xl" | "rec-2xl";
 export type RecursicaSize = "small" | "default" | "large";
+export declare const SPACING_MAP: Record<string, string>;
 export type ForbiddenStyles = {
     [K in BlockedStylingKeys]?: never;
 };
@@ -33,4 +34,5 @@ export type RecursicaOverStyled<T> = (Omit<T, BlockedStylingKeys> & ForbiddenSty
 }) | (T & {
     overStyled: true;
 });
+export declare function mapLayoutProps<T extends Record<string, unknown>>(props: T): T;
 export declare function filterStylingProps<T extends Record<string, unknown>>(props: T, overStyled?: boolean): Partial<T>;

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/Introduction.stories.tsx

@@ -1,75 +1,49 @@
 import type { Meta } from "@storybook/react-vite";
 import { AdaptersContent, MantineLogo } from "@recursica/storybook-template";
-import { Button } from "./components/Button/Button";
 import { VersionInfo } from "./Version";
 import { OverStylingInfo } from "./OverStyling";
+import {
+  Container,
+  Stack,
+  Group,
+  Title,
+  Text,
+  Link,
+  Button,
+} from "./components";
 
 const DOCS_URL = "https://recursica.com";
 const FORGE_URL = "https://forge.recursica.com";
 
-const sectionStyle: React.CSSProperties = {
-  marginBottom: 32,
-};
-
-const headingStyle: React.CSSProperties = {
-  fontSize: 14,
-  fontWeight: 600,
-  color: "#333",
-  marginBottom: 8,
-  marginTop: 0,
-};
-
-const bodyStyle: React.CSSProperties = {
-  fontSize: 14,
-  lineHeight: 1.6,
-  color: "#444",
-  margin: 0,
-};
-
-const linkStyle: React.CSSProperties = {
-  color: "#0066cc",
-  textDecoration: "none",
-};
-
 function IntroductionContent() {
   return (
-    <div style={{ padding: 24, maxWidth: 640 }}>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "16px",
-          marginBottom: "16px",
-        }}
-      >
-        <MantineLogo width={40} height={40} />
-        <div>
-          <h1 style={{ fontSize: 24, fontWeight: 700, margin: 0 }}>
+    <Container size="md" style={{ padding: "32px 0", maxWidth: 640 }}>
+      <Group gap="rec-md" mb="rec-xl" align="flex-start" wrap="nowrap">
+        <MantineLogo width={80} height={80} />
+        <Stack gap={0}>
+          <Title order={1} m={0}>
             Recursica Design System (Mantine Adapter)
-          </h1>
-          <a
-            href="https://mantine.dev"
-            target="_blank"
-            rel="noreferrer"
-            style={linkStyle}
-          >
+          </Title>
+          <Link href="https://mantine.dev" target="_blank" rel="noreferrer">
             mantine.dev
-          </a>
-        </div>
-      </div>
-      <p style={{ ...bodyStyle, marginBottom: 24 }}>
+          </Link>
+        </Stack>
+      </Group>
+      <Text mb="rec-xl">
         This Storybook showcases the Recursica design system implemented for the{" "}
         <strong>Mantine UI Kit</strong>. It provides reusable components that
         map our design tokens to Mantine's robust component layer.
-      </p>
+      </Text>
 
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Looking for another UI Kit?</h2>
-        <p style={bodyStyle}>
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Looking for another UI Kit?
+        </Title>
+        <Text mb="rec-md">
           Are you using a different UI Kit (like Material UI)? Recursica
           provides multiple adapters for different frameworks.
-        </p>
-        <div style={{ marginTop: "16px" }}>
+        </Text>
+        <Group mt="rec-md">
           <Button
             component="a"
             href="./?path=/story/introduction--adapters"
@@ -78,15 +52,17 @@ function IntroductionContent() {
           >
             View Supported Adapters
           </Button>
-        </div>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Installation</h2>
-        <p style={bodyStyle}>
+        </Group>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Installation
+        </Title>
+        <Text mb="rec-md">
           To install the Mantine adapter in your project, run:
-        </p>
-        <pre
+        </Text>
+        <Stack
           style={{
             padding: 12,
             backgroundColor: "#f5f5f5",
@@ -98,60 +74,58 @@ function IntroductionContent() {
           <code>
             npm install @recursica/mantine-adapter @mantine/core @mantine/hooks
           </code>
-        </pre>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Tokens</h2>
-        <p style={bodyStyle}>
+        </Stack>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Tokens
+        </Title>
+        <Text mb="rec-md">
           Raw design tokens (colors, sizes, font weights, opacities, etc.) that
           feed the theme and components. These are the primitive values defined
           in your token set and exposed as CSS custom properties.
-        </p>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Theme</h2>
-        <p style={bodyStyle}>
+        </Text>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Theme
+        </Title>
+        <Text mb="rec-md">
           Brand and theme layer built on top of tokens. Typography types,
           dimensions, and layout grids are defined here. Theme uses the tokens
           and exposes both CSS variables and helper classes (e.g. typography
           classes) for consistent styling across the product.
-        </p>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Configuring Recursica</h2>
-        <p style={bodyStyle}>
+        </Text>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Configuring Recursica
+        </Title>
+        <Text mb="rec-md">
           To modify the Recursica configuration (tokens, brand, theme), go to{" "}
-          <a
-            href={FORGE_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={linkStyle}
-          >
+          <Link href={FORGE_URL} target="_blank" rel="noopener noreferrer">
             {FORGE_URL}
-          </a>
+          </Link>
           . Changes there drive the tokens and theme you see in this Storybook.
-        </p>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Documentation</h2>
-        <p style={bodyStyle}>
+        </Text>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Documentation
+        </Title>
+        <Text mb="rec-md">
           For full documentation, guides, and API reference, visit{" "}
-          <a
-            href={DOCS_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={linkStyle}
-          >
+          <Link href={DOCS_URL} target="_blank" rel="noopener noreferrer">
             {DOCS_URL}
-          </a>
+          </Link>
           .
-        </p>
-      </section>
-    </div>
+        </Text>
+      </Stack>
+    </Container>
   );
 }