@recursica/mantine-adapter 0.34.0 → 0.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/OVERSTYLING.md +1 -1
  3. package/dist/mantine-adapter.cjs +2 -2
  4. package/dist/mantine-adapter.cjs.map +1 -1
  5. package/dist/mantine-adapter.js +1261 -1203
  6. package/dist/mantine-adapter.js.map +1 -1
  7. package/dist/src/components/Grid/Grid.d.ts +91 -0
  8. package/dist/src/components/index.d.ts +1 -0
  9. package/dist/src/index.d.ts +64 -0
  10. package/llms.txt +1 -0
  11. package/package.json +1 -1
  12. package/src/components/Grid/GRID_IMPLEMENTATION_NOTES.md +9 -0
  13. package/src/components/Grid/Grid.module.css +11 -0
  14. package/src/components/Grid/Grid.stories.tsx +182 -0
  15. package/src/components/Grid/Grid.tsx +145 -0
  16. package/src/components/Grid/USAGE.md +47 -0
  17. package/src/components/index.ts +1 -0
  18. package/src/index.ts +2 -0
package/dist/src/components/Grid/Grid.d.ts ADDED
@@ -0,0 +1,91 @@
1
+ import { GridProps as MantineGridProps, GridColProps as MantineGridColProps } from '@mantine/core';
2
+ import { WithRecursicaSpacing } from '../../utils/filterStylingProps';
3
+ import { RecursicaGridProps, RecursicaGridColProps } from '@recursica/adapter-common';
4
+ /**
5
+ * Grid layout wrapper.
6
+ *
7
+ * Note: Unlike complex UI components, primitive layout components (Flex, Stack, Group, Container, Grid)
8
+ * DO NOT use the `RecursicaOverStyled` gatekeeper. Developers must be able to freely pass
9
+ * width, height, padding, margins, and flexbox alignment props to construct structural layouts.
10
+ */
11
+ export type GridProps = WithRecursicaSpacing<Omit<MantineGridProps, "gutter"> & RecursicaGridProps>;
12
+ /**
13
+ * Recursica Grid layout wrapper.
14
+ *
15
+ * Supports polymorphism via the `component` prop for custom element rendering.
16
+ * @example
17
+ * ```tsx
18
+ * <Grid gap="rec-default">
19
+ * <Grid.Col span={6}>Half width</Grid.Col>
20
+ * <Grid.Col span={6}>Half width</Grid.Col>
21
+ * </Grid>
22
+ * ```
23
+ */
24
+ declare const GridBase: (<C = "div">(props: import('@mantine/core').PolymorphicComponentProps<C, GridProps>) => React.ReactElement) & Omit<import('react').FunctionComponent<(Omit<Omit<MantineGridProps, "gutter"> & RecursicaGridProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
25
+ m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
26
+ mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
27
+ my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
28
+ mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
29
+ mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
30
+ ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
31
+ mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
32
+ gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
33
+ rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
34
+ columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
35
+ } & {
36
+ component?: any;
37
+ } & 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" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "onChange" | "variant" | "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" | "attributes" | "type" | "justify" | "component" | "align" | "overflow" | "grow" | "columns" | "breakpoints"> & {
38
+ ref?: any;
39
+ renderRoot?: (props: any) => any;
40
+ }) | (Omit<Omit<MantineGridProps, "gutter"> & RecursicaGridProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
41
+ m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
42
+ mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
43
+ my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
44
+ mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
45
+ mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
46
+ ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
47
+ mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
48
+ gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
49
+ rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
50
+ columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
51
+ } & {
52
+ component: React.ElementType;
53
+ renderRoot?: (props: Record<string, any>) => any;
54
+ })>, never> & Record<string, never>;
55
+ export type GridColProps = WithRecursicaSpacing<MantineGridColProps & RecursicaGridColProps>;
56
+ export declare const GridCol: (<C = "div">(props: import('@mantine/core').PolymorphicComponentProps<C, GridColProps>) => React.ReactElement) & Omit<import('react').FunctionComponent<(Omit<MantineGridColProps & RecursicaGridColProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
57
+ m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
58
+ mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
59
+ my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
60
+ mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
61
+ mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
62
+ ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
63
+ mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
64
+ gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
65
+ rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
66
+ columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
67
+ } & {
68
+ component?: any;
69
+ } & 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" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "onChange" | "variant" | "slot" | "span" | "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" | "order" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "component" | "offset"> & {
70
+ ref?: any;
71
+ renderRoot?: (props: any) => any;
72
+ }) | (Omit<MantineGridColProps & RecursicaGridColProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
73
+ m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
74
+ mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
75
+ my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
76
+ mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
77
+ mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
78
+ ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
79
+ mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
80
+ gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
81
+ rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
82
+ columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
83
+ } & {
84
+ component: React.ElementType;
85
+ renderRoot?: (props: Record<string, any>) => any;
86
+ })>, never> & Record<string, never>;
87
+ type GridComponent = typeof GridBase & {
88
+ Col: typeof GridCol;
89
+ };
90
+ export declare const Grid: GridComponent;
91
+ export {};
package/dist/src/components/index.d.ts CHANGED
@@ -15,6 +15,7 @@ export * from './FileInput/FileInput';
15
15
  export * from './FileUpload/FileUpload';
16
16
  export * from './Flex/Flex';
17
17
  export * from './FormControlLayout/FormControlLayout';
18
+ export * from './Grid/Grid';
18
19
  export * from './Group/Group';
19
20
  export * from './HoverCard/HoverCard';
20
21
  export * from './Link/Link';
package/dist/src/index.d.ts CHANGED
@@ -31,6 +31,70 @@ export declare const Flex: (<C = "div">(props: import('@mantine/core').Polymorph
31
31
  component: React.ElementType;
32
32
  renderRoot?: (props: Record<string, any>) => any;
33
33
  })>, never> & Record<string, never>;
34
+ export declare const Grid: (<C = "div">(props: import('@mantine/core').PolymorphicComponentProps<C, rawComponents.GridProps>) => React.ReactElement) & Omit<import('react').FunctionComponent<(Omit<Omit<import('@mantine/core').GridProps, "gutter"> & import('@recursica/adapter-common').RecursicaGridProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
35
+ m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
36
+ mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
37
+ my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
38
+ mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
39
+ mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
40
+ ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
41
+ mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
42
+ gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
43
+ rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
44
+ columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
45
+ } & {
46
+ component?: any;
47
+ } & 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" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "onChange" | "variant" | "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" | "attributes" | "type" | "justify" | "component" | "align" | "overflow" | "grow" | "columns" | "breakpoints"> & {
48
+ ref?: any;
49
+ renderRoot?: (props: any) => any;
50
+ }) | (Omit<Omit<import('@mantine/core').GridProps, "gutter"> & import('@recursica/adapter-common').RecursicaGridProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
51
+ m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
52
+ mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
53
+ my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
54
+ mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
55
+ mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
56
+ ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
57
+ mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
58
+ gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
59
+ rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
60
+ columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
61
+ } & {
62
+ component: React.ElementType;
63
+ renderRoot?: (props: Record<string, any>) => any;
64
+ })>, never> & Record<string, never> & {
65
+ Col: typeof rawComponents.GridCol;
66
+ };
67
+ export declare const GridCol: (<C = "div">(props: import('@mantine/core').PolymorphicComponentProps<C, rawComponents.GridColProps>) => React.ReactElement) & Omit<import('react').FunctionComponent<(Omit<import('@mantine/core').GridColProps & import('@recursica/adapter-common').RecursicaGridColProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
68
+ m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
69
+ mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
70
+ my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
71
+ mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
72
+ mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
73
+ ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
74
+ mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
75
+ gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
76
+ rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
77
+ columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
78
+ } & {
79
+ component?: any;
80
+ } & 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" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "onChange" | "variant" | "slot" | "span" | "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" | "order" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "component" | "offset"> & {
81
+ ref?: any;
82
+ renderRoot?: (props: any) => any;
83
+ }) | (Omit<import('@mantine/core').GridColProps & import('@recursica/adapter-common').RecursicaGridColProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
84
+ m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
85
+ mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
86
+ my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
87
+ mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
88
+ mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
89
+ ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
90
+ mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
91
+ gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
92
+ rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
93
+ columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
94
+ } & {
95
+ component: React.ElementType;
96
+ renderRoot?: (props: Record<string, any>) => any;
97
+ })>, never> & Record<string, never>;
34
98
  export declare const Group: import('react').ForwardRefExoticComponent<Omit<import('@mantine/core').GroupProps & import('@recursica/adapter-common').RecursicaGroupProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
35
99
  m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
36
100
  mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
package/llms.txt CHANGED
@@ -39,6 +39,7 @@ Each component has its own `USAGE.md` documenting its props, adapter-specific be
39
39
  - [Flex](src/components/Flex/USAGE.md)
40
40
  - [FormControlLayout](src/components/FormControlLayout/USAGE.md)
41
41
  - [FormControlWrapper](src/components/FormControlWrapper/USAGE.md)
42
+ - [Grid](src/components/Grid/USAGE.md)
42
43
  - [Group](src/components/Group/USAGE.md)
43
44
  - [HoverCard](src/components/HoverCard/USAGE.md)
44
45
  - [Label](src/components/Label/USAGE.md)
package/package.json CHANGED
@@ -13,7 +13,7 @@
13
13
  "url": "git+https://github.com/borderux/recursica.git",
14
14
  "directory": "packages/mantine-adapter"
15
15
  },
16
- "version": "0.34.0",
16
+ "version": "0.35.0",
17
17
  "type": "module",
18
18
  "main": "./dist/mantine-adapter.cjs",
19
19
  "module": "./dist/mantine-adapter.js",
package/src/components/Grid/GRID_IMPLEMENTATION_NOTES.md ADDED
@@ -0,0 +1,9 @@
1
+ # Grid Implementation Notes
2
+
3
+ The `Grid` component is a generic 12-column (by default) layout wrapper mapped directly to Mantine's `Grid`/`Grid.Col`. It requires no custom logical layouts or CSS workarounds — Mantine handles column geometry, breakpoints, and wrapping natively.
4
+
5
+ The one deliberate divergence from Mantine's native API: the public `gap` prop replaces Mantine's `gutter`, for naming consistency with the other primitive layout components (`Flex`, `Stack`, `Group`). `gap` is translated to Mantine's `gutter` prop internally via `mapLayoutProps`, the same utility used to resolve `rec-*` spacing tokens elsewhere.
6
+
7
+ `Grid.Col`'s `span`, `offset`, `order`, `visibleFrom`, and `hiddenFrom` props are passed straight through to Mantine's `Grid.Col` unchanged — Mantine already uses generic, portable naming for these.
8
+
9
+ Like the other primitive layout components, `Grid` and `Grid.Col` use `WithRecursicaSpacing<T>` rather than `RecursicaOverStyled<T>` and are listed in the "Primitive Layout Components Exemption" section of `OVERSTYLING.md`.
package/src/components/Grid/Grid.module.css ADDED
@@ -0,0 +1,11 @@
1
+ /* HARDCODED VALUES:
2
+ * None. This is a generic grid layout wrapper.
3
+ */
4
+
5
+ .root {
6
+ /* Mantine handles the grid geometry (columns, gutter, spans) natively. No intrinsic design-system styles required for pure layout wrappers. */
7
+ }
8
+
9
+ .col {
10
+ /* Mantine handles column sizing (span, offset, order, visibleFrom/hiddenFrom) natively. */
11
+ }
package/src/components/Grid/Grid.stories.tsx ADDED
@@ -0,0 +1,182 @@
1
+ import React from "react";
2
+ import type { Meta, StoryObj } from "@storybook/react";
3
+ import { Grid } from "./Grid";
4
+ import { Card } from "../Card/Card";
5
+ import { Text } from "../Text/Text";
6
+
7
+ type GridStoryProps = React.ComponentProps<typeof Grid>;
8
+
9
+ const meta: Meta<GridStoryProps> = {
10
+ title: "UI-Kit/Grid",
11
+ component: Grid,
12
+ tags: ["autodocs"],
13
+ parameters: {
14
+ docs: {
15
+ description: {
16
+ component:
17
+ "Grid is a 12-column (by default) responsive grid layout that maps directly to Mantine's Grid/Grid.Col, providing column spans, offsets, ordering, and breakpoint-based visibility.",
18
+ },
19
+ },
20
+ },
21
+ args: {
22
+ gap: "rec-default",
23
+ columns: 12,
24
+ grow: false,
25
+ },
26
+ argTypes: {
27
+ gap: {
28
+ control: "select",
29
+ options: [
30
+ "rec-none",
31
+ "rec-sm",
32
+ "rec-default",
33
+ "rec-md",
34
+ "rec-lg",
35
+ "rec-xl",
36
+ "rec-2xl",
37
+ ],
38
+ description: "Gap between columns",
39
+ },
40
+ columns: {
41
+ control: "number",
42
+ description: "Number of columns in each row",
43
+ },
44
+ grow: {
45
+ control: "boolean",
46
+ description: "Columns in the last row expand to fill available space",
47
+ },
48
+ justify: {
49
+ control: "select",
50
+ options: [
51
+ "flex-start",
52
+ "center",
53
+ "flex-end",
54
+ "space-between",
55
+ "space-around",
56
+ ],
57
+ description: "Justify-content property",
58
+ },
59
+ align: {
60
+ control: "select",
61
+ options: ["flex-start", "center", "flex-end", "stretch"],
62
+ description: "Align-items property",
63
+ },
64
+ },
65
+ };
66
+
67
+ export default meta;
68
+
69
+ type Story = StoryObj<GridStoryProps>;
70
+
71
+ const Swatch = ({ children }: { children: React.ReactNode }) => (
72
+ <Card>
73
+ <Card.Content>
74
+ <Text>{children}</Text>
75
+ </Card.Content>
76
+ </Card>
77
+ );
78
+
79
+ export const Default: Story = {
80
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
81
+ render: ({ withLayer, layer, ...args }: any) => (
82
+ <Grid {...args}>
83
+ <Grid.Col span={4}>
84
+ <Swatch>span 4</Swatch>
85
+ </Grid.Col>
86
+ <Grid.Col span={4}>
87
+ <Swatch>span 4</Swatch>
88
+ </Grid.Col>
89
+ <Grid.Col span={4}>
90
+ <Swatch>span 4</Swatch>
91
+ </Grid.Col>
92
+ </Grid>
93
+ ),
94
+ };
95
+
96
+ export const ResponsiveSpans: Story = {
97
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
98
+ render: ({ withLayer, layer, ...args }: any) => (
99
+ <Grid {...args}>
100
+ <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
101
+ <Swatch>base 12 / sm 6 / md 3</Swatch>
102
+ </Grid.Col>
103
+ <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
104
+ <Swatch>base 12 / sm 6 / md 3</Swatch>
105
+ </Grid.Col>
106
+ <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
107
+ <Swatch>base 12 / sm 6 / md 3</Swatch>
108
+ </Grid.Col>
109
+ <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
110
+ <Swatch>base 12 / sm 6 / md 3</Swatch>
111
+ </Grid.Col>
112
+ </Grid>
113
+ ),
114
+ };
115
+
116
+ export const Offset: Story = {
117
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
118
+ render: ({ withLayer, layer, ...args }: any) => (
119
+ <Grid {...args}>
120
+ <Grid.Col span={4} offset={4}>
121
+ <Swatch>span 4, offset 4</Swatch>
122
+ </Grid.Col>
123
+ <Grid.Col span={4}>
124
+ <Swatch>span 4</Swatch>
125
+ </Grid.Col>
126
+ </Grid>
127
+ ),
128
+ };
129
+
130
+ export const Grow: Story = {
131
+ args: {
132
+ grow: true,
133
+ },
134
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
135
+ render: ({ withLayer, layer, ...args }: any) => (
136
+ <Grid {...args}>
137
+ <Grid.Col span={3}>
138
+ <Swatch>span 3</Swatch>
139
+ </Grid.Col>
140
+ <Grid.Col span={3}>
141
+ <Swatch>span 3</Swatch>
142
+ </Grid.Col>
143
+ <Grid.Col span={3}>
144
+ <Swatch>span 3 (grows to fill row)</Swatch>
145
+ </Grid.Col>
146
+ </Grid>
147
+ ),
148
+ };
149
+
150
+ export const CustomColumnCount: Story = {
151
+ args: {
152
+ columns: 6,
153
+ },
154
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
155
+ render: ({ withLayer, layer, ...args }: any) => (
156
+ <Grid {...args}>
157
+ <Grid.Col span={2}>
158
+ <Swatch>span 2 of 6</Swatch>
159
+ </Grid.Col>
160
+ <Grid.Col span={2}>
161
+ <Swatch>span 2 of 6</Swatch>
162
+ </Grid.Col>
163
+ <Grid.Col span={2}>
164
+ <Swatch>span 2 of 6</Swatch>
165
+ </Grid.Col>
166
+ </Grid>
167
+ ),
168
+ };
169
+
170
+ export const VisibleHiddenFrom: Story = {
171
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
172
+ render: ({ withLayer, layer, ...args }: any) => (
173
+ <Grid {...args}>
174
+ <Grid.Col span={6} hiddenFrom="sm">
175
+ <Swatch>hidden from sm and up</Swatch>
176
+ </Grid.Col>
177
+ <Grid.Col span={6} visibleFrom="sm">
178
+ <Swatch>visible from sm and up</Swatch>
179
+ </Grid.Col>
180
+ </Grid>
181
+ ),
182
+ };
package/src/components/Grid/Grid.tsx ADDED
@@ -0,0 +1,145 @@
1
+ import { forwardRef } from "react";
2
+ import {
3
+ Grid as MantineGrid,
4
+ type GridProps as MantineGridProps,
5
+ type GridColProps as MantineGridColProps,
6
+ createPolymorphicComponent,
7
+ } from "@mantine/core";
8
+ import {
9
+ mapLayoutProps,
10
+ type WithRecursicaSpacing,
11
+ } from "../../utils/filterStylingProps";
12
+ import styles from "./Grid.module.css";
13
+
14
+ import {
15
+ type RecursicaGridProps,
16
+ type RecursicaGridColProps,
17
+ } from "@recursica/adapter-common";
18
+
19
+ /**
20
+ * Grid layout wrapper.
21
+ *
22
+ * Note: Unlike complex UI components, primitive layout components (Flex, Stack, Group, Container, Grid)
23
+ * DO NOT use the `RecursicaOverStyled` gatekeeper. Developers must be able to freely pass
24
+ * width, height, padding, margins, and flexbox alignment props to construct structural layouts.
25
+ */
26
+ export type GridProps = WithRecursicaSpacing<
27
+ Omit<MantineGridProps, "gutter"> & RecursicaGridProps
28
+ >;
29
+
30
+ const _Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
31
+ { children, gap = "rec-default", ...rest },
32
+ ref,
33
+ ) {
34
+ const mergedClassNames: Partial<Record<string, string>> = {
35
+ root: styles.root,
36
+ };
37
+
38
+ const classNamesProp = rest.classNames;
39
+ if (
40
+ classNamesProp &&
41
+ typeof classNamesProp === "object" &&
42
+ !Array.isArray(classNamesProp)
43
+ ) {
44
+ const o = classNamesProp as Partial<Record<string, string>>;
45
+ mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
46
+ }
47
+
48
+ const classNameProp = rest.className as string | undefined;
49
+ const finalClass = classNameProp
50
+ ? `${styles.root} ${classNameProp}`
51
+ : styles.root;
52
+
53
+ const { gap: gutter, ...mappedRest } = mapLayoutProps({
54
+ gap,
55
+ ...rest,
56
+ } as Record<string, unknown>);
57
+
58
+ return (
59
+ <MantineGrid
60
+ ref={ref}
61
+ gutter={gutter as MantineGridProps["gutter"]}
62
+ className={finalClass}
63
+ classNames={mergedClassNames}
64
+ {...(mappedRest as unknown as Omit<MantineGridProps, "gutter">)}
65
+ >
66
+ {children}
67
+ </MantineGrid>
68
+ );
69
+ });
70
+ _Grid.displayName = "Grid";
71
+
72
+ /**
73
+ * Recursica Grid layout wrapper.
74
+ *
75
+ * Supports polymorphism via the `component` prop for custom element rendering.
76
+ * @example
77
+ * ```tsx
78
+ * <Grid gap="rec-default">
79
+ * <Grid.Col span={6}>Half width</Grid.Col>
80
+ * <Grid.Col span={6}>Half width</Grid.Col>
81
+ * </Grid>
82
+ * ```
83
+ */
84
+ const GridBase = createPolymorphicComponent<"div", GridProps>(_Grid);
85
+
86
+ // ============================================================
87
+ // GRID.COL
88
+ // ============================================================
89
+
90
+ export type GridColProps = WithRecursicaSpacing<
91
+ MantineGridColProps & RecursicaGridColProps
92
+ >;
93
+
94
+ const _GridCol = forwardRef<HTMLDivElement, GridColProps>(function GridCol(
95
+ { children, ...rest },
96
+ ref,
97
+ ) {
98
+ const mergedClassNames: Partial<Record<string, string>> = {
99
+ col: styles.col,
100
+ };
101
+
102
+ const classNamesProp = rest.classNames;
103
+ if (
104
+ classNamesProp &&
105
+ typeof classNamesProp === "object" &&
106
+ !Array.isArray(classNamesProp)
107
+ ) {
108
+ const o = classNamesProp as Partial<Record<string, string>>;
109
+ mergedClassNames.col = o.col ? `${styles.col} ${o.col}` : styles.col;
110
+ }
111
+
112
+ const classNameProp = rest.className as string | undefined;
113
+ const finalClass = classNameProp
114
+ ? `${styles.col} ${classNameProp}`
115
+ : styles.col;
116
+
117
+ return (
118
+ <MantineGrid.Col
119
+ ref={ref}
120
+ className={finalClass}
121
+ classNames={mergedClassNames}
122
+ {...(mapLayoutProps(
123
+ rest as Record<string, unknown>,
124
+ ) as unknown as MantineGridColProps)}
125
+ >
126
+ {children}
127
+ </MantineGrid.Col>
128
+ );
129
+ });
130
+ _GridCol.displayName = "GridCol";
131
+
132
+ export const GridCol = createPolymorphicComponent<"div", GridColProps>(
133
+ _GridCol,
134
+ );
135
+
136
+ // ============================================================
137
+ // DOT NOTATION EXPORT
138
+ // ============================================================
139
+
140
+ type GridComponent = typeof GridBase & {
141
+ Col: typeof GridCol;
142
+ };
143
+
144
+ export const Grid = GridBase as GridComponent;
145
+ Grid.Col = GridCol;