@recursica/adapter-mantine-v8 1.2.2 → 1.3.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.
- package/CHANGELOG.md +11 -0
- package/OVERSTYLING.md +1 -1
- package/SETUP.md +34 -3
- package/dist/adapter-mantine-v8.cjs +2 -2
- package/dist/adapter-mantine-v8.cjs.map +1 -1
- package/dist/adapter-mantine-v8.css +1 -1
- package/dist/adapter-mantine-v8.js +3157 -3002
- package/dist/adapter-mantine-v8.js.map +1 -1
- package/dist/index.d.ts +191 -164
- package/llms.txt +1 -1
- package/package.json +3 -3
- package/recursica_brand.json +2 -2
- package/recursica_tokens.json +2 -2
- package/recursica_ui-kit.json +2 -2
- package/recursica_variables_scoped.css +7 -3
- package/src/components/Container/USAGE.md +0 -1
- package/src/components/Flex/USAGE.md +2 -1
- package/src/components/Group/USAGE.md +2 -1
- package/src/components/LayoutGrid/LAYOUT_GRID_IMPLEMENTATION_NOTES.md +88 -0
- package/src/components/LayoutGrid/LayoutGrid.columns.dom.test.tsx +66 -0
- package/src/components/LayoutGrid/LayoutGrid.module.css +48 -0
- package/src/components/LayoutGrid/LayoutGrid.stories.tsx +61 -0
- package/src/components/LayoutGrid/LayoutGrid.test.tsx +1 -0
- package/src/components/LayoutGrid/LayoutGrid.tsx +309 -0
- package/src/components/LayoutGrid/USAGE.md +76 -0
- package/src/components/Pagination/IMPLEMENTATION_NOTES.md +29 -8
- package/src/components/Pagination/Pagination.icons.tsx +0 -32
- package/src/components/Pagination/Pagination.manifest.dom.test.tsx +108 -0
- package/src/components/Pagination/Pagination.module.css +25 -155
- package/src/components/Pagination/Pagination.tsx +328 -197
- package/src/components/Pagination/USAGE.md +1 -0
- package/src/components/Stack/USAGE.md +2 -1
- package/src/components/index.ts +1 -1
- package/src/index.ts +1 -0
- package/src/utils/breakpointsFromRecManifest.test.ts +40 -0
- package/src/utils/breakpointsFromRecManifest.ts +75 -0
- package/src/utils/index.ts +1 -0
- package/src/components/Grid/GRID_IMPLEMENTATION_NOTES.md +0 -85
- package/src/components/Grid/Grid.module.css +0 -41
- package/src/components/Grid/Grid.stories.tsx +0 -200
- package/src/components/Grid/Grid.test.tsx +0 -1
- package/src/components/Grid/Grid.tsx +0 -179
- package/src/components/Grid/USAGE.md +0 -61
package/dist/index.d.ts
CHANGED
|
@@ -28,8 +28,8 @@ import { DrawerTitleProps } from '@mantine/core';
|
|
|
28
28
|
import { FlexProps as FlexProps_2 } from '@mantine/core';
|
|
29
29
|
import { ForwardRefExoticComponent } from 'react';
|
|
30
30
|
import { FunctionComponent } from 'react';
|
|
31
|
-
import { GridColProps
|
|
32
|
-
import { GridProps
|
|
31
|
+
import { GridColProps } from '@mantine/core';
|
|
32
|
+
import { GridProps } from '@mantine/core';
|
|
33
33
|
import { GroupProps as GroupProps_2 } from '@mantine/core';
|
|
34
34
|
import { HoverCardDropdownProps as HoverCardDropdownProps_2 } from '@mantine/core';
|
|
35
35
|
import { HoverCardProps as HoverCardProps_2 } from '@mantine/core';
|
|
@@ -58,12 +58,6 @@ import { ModalRootProps as ModalRootProps_2 } from '@mantine/core';
|
|
|
58
58
|
import { ModalTitleProps as ModalTitleProps_2 } from '@mantine/core';
|
|
59
59
|
import { NotificationProps } from '@mantine/core';
|
|
60
60
|
import { NumberInputProps as NumberInputProps_2 } from '@mantine/core';
|
|
61
|
-
import { Pagination as Pagination_2 } from '@mantine/core';
|
|
62
|
-
import { PaginationControlProps as PaginationControlProps_2 } from '@mantine/core';
|
|
63
|
-
import { PaginationDotsProps as PaginationDotsProps_2 } from '@mantine/core';
|
|
64
|
-
import { PaginationEdgeProps as PaginationEdgeProps_2 } from '@mantine/core';
|
|
65
|
-
import { PaginationProps as PaginationProps_2 } from '@mantine/core';
|
|
66
|
-
import { PaginationRootProps as PaginationRootProps_2 } from '@mantine/core';
|
|
67
61
|
import { PolymorphicComponentProps } from '@mantine/core';
|
|
68
62
|
import { PopoverDropdownProps as PopoverDropdownProps_2 } from '@mantine/core';
|
|
69
63
|
import { PopoverProps as PopoverProps_2 } from '@mantine/core';
|
|
@@ -95,11 +89,11 @@ import { RecursicaFileUploadItem } from '@recursica/adapter-common';
|
|
|
95
89
|
import { RecursicaFileUploadProps as RecursicaFileUploadProps_2 } from '@recursica/adapter-common';
|
|
96
90
|
import { RecursicaFormControlLayoutProps } from '@recursica/adapter-common';
|
|
97
91
|
import { RecursicaFormControlWrapperProps } from '@recursica/adapter-common';
|
|
98
|
-
import { RecursicaGridColProps } from '@recursica/adapter-common';
|
|
99
|
-
import { RecursicaGridProps } from '@recursica/adapter-common';
|
|
100
92
|
import { RecursicaHeadingProps } from '@recursica/adapter-common';
|
|
101
93
|
import { RecursicaHoverCardProps } from '@recursica/adapter-common';
|
|
102
94
|
import { RecursicaLabelProps } from '@recursica/adapter-common';
|
|
95
|
+
import { RecursicaLayoutGridColProps } from '@recursica/adapter-common';
|
|
96
|
+
import { RecursicaLayoutGridProps } from '@recursica/adapter-common';
|
|
103
97
|
import { RecursicaLinkProps } from '@recursica/adapter-common';
|
|
104
98
|
import { RecursicaLoaderProps } from '@recursica/adapter-common';
|
|
105
99
|
import { RecursicaMenuProps } from '@recursica/adapter-common';
|
|
@@ -251,6 +245,22 @@ export declare const Breadcrumb: ForwardRefExoticComponent<BreadcrumbProps & Ref
|
|
|
251
245
|
|
|
252
246
|
export declare type BreadcrumbProps = RecursicaOverStyled<Omit<BreadcrumbsProps, "variant" | "size"> & RecursicaBreadcrumbProps>;
|
|
253
247
|
|
|
248
|
+
/**
|
|
249
|
+
* Builds a `{ name: "<start>px" }` breakpoints object from the manifest's layout grids, ready to
|
|
250
|
+
* pass to Mantine's `createTheme({ breakpoints })`. Opt-in: nothing in the
|
|
251
|
+
* adapters calls this for you, and the result is a plain object you can edit.
|
|
252
|
+
*
|
|
253
|
+
* Mantine breakpoints are mobile-first start widths, so each non-default grid maps to its
|
|
254
|
+
* `min-width`; a grid with only a `max-width` (e.g. `mobile`, up to 480px) starts at `0px`. The
|
|
255
|
+
* `default` grid has no width of its own: when other grids exist it is included, named `default`,
|
|
256
|
+
* starting one pixel past the widest `max-width`. A manifest with only the `default` grid (the
|
|
257
|
+
* stock Forge export) returns `{}`, so the theme is left untouched.
|
|
258
|
+
*
|
|
259
|
+
* Throws for a non-default grid with neither width, for non-numeric widths, and when no other grid
|
|
260
|
+
* has a `max-width` for `default` to start after.
|
|
261
|
+
*/
|
|
262
|
+
export declare function breakpointsFromRecManifest(manifest: ManifestWithLayoutGrids): Record<string, string>;
|
|
263
|
+
|
|
254
264
|
/**
|
|
255
265
|
* Recursica Button component wrapping Mantine's Button.
|
|
256
266
|
*
|
|
@@ -277,6 +287,8 @@ export declare const Button: (<C = "button">(props: PolymorphicComponentProps<C,
|
|
|
277
287
|
renderRoot?: (props: Record<string, any>) => any;
|
|
278
288
|
})>, never> & Record<string, never>;
|
|
279
289
|
|
|
290
|
+
declare type ButtonElementProps = Omit<default_2.ComponentPropsWithoutRef<"button">, "style" | "className"> & Pick<ButtonProps, "overStyled">;
|
|
291
|
+
|
|
280
292
|
export declare type ButtonProps = RecursicaOverStyled<Omit<ButtonProps_2, "variant" | "size" | "leftSection" | "fullWidth"> & RecursicaButtonProps>;
|
|
281
293
|
|
|
282
294
|
export declare const Card: typeof PolymorphicCard & {
|
|
@@ -482,113 +494,6 @@ export declare interface FormControlLayoutProps extends default_2.HTMLAttributes
|
|
|
482
494
|
|
|
483
495
|
declare type FormControlWrapperProps = RecursicaOverStyled<Omit<InputWrapperProps, "labelProps" | "inputWrapperOrder"> & RecursicaFormControlWrapperProps>;
|
|
484
496
|
|
|
485
|
-
export declare const Grid: GridComponent;
|
|
486
|
-
|
|
487
|
-
/**
|
|
488
|
-
* Recursica Grid layout wrapper.
|
|
489
|
-
*
|
|
490
|
-
* Supports polymorphism via the `component` prop for custom element rendering.
|
|
491
|
-
* @example
|
|
492
|
-
* ```tsx
|
|
493
|
-
* <Grid>
|
|
494
|
-
* <Grid.Col span={3}>Quarter width (defaults to 6 columns)</Grid.Col>
|
|
495
|
-
* <Grid.Col span={3}>Quarter width</Grid.Col>
|
|
496
|
-
* </Grid>
|
|
497
|
-
* ```
|
|
498
|
-
*/
|
|
499
|
-
declare const GridBase: (<C = "div">(props: PolymorphicComponentProps<C, GridProps>) => React.ReactElement) & Omit<FunctionComponent<(Omit<Omit<GridProps_2, "gutter" | "columns"> & RecursicaGridProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
500
|
-
m?: string | number | RecursicaSpacing;
|
|
501
|
-
mx?: string | number | RecursicaSpacing;
|
|
502
|
-
my?: string | number | RecursicaSpacing;
|
|
503
|
-
mt?: string | number | RecursicaSpacing;
|
|
504
|
-
mb?: string | number | RecursicaSpacing;
|
|
505
|
-
ml?: string | number | RecursicaSpacing;
|
|
506
|
-
mr?: string | number | RecursicaSpacing;
|
|
507
|
-
gap?: string | number | RecursicaSpacing;
|
|
508
|
-
rowGap?: string | number | RecursicaSpacing;
|
|
509
|
-
columnGap?: string | number | RecursicaSpacing;
|
|
510
|
-
gutter?: string | number | RecursicaSpacing;
|
|
511
|
-
spacing?: string | number | RecursicaSpacing;
|
|
512
|
-
} & {
|
|
513
|
-
component?: any;
|
|
514
|
-
} & 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" | "gutter" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "variant" | "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" | "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" | "spacing" | "type" | "justify" | "component" | "align" | "overflow" | "grow" | "breakpoints" | keyof RecursicaGridProps> & {
|
|
515
|
-
ref?: any;
|
|
516
|
-
renderRoot?: (props: any) => any;
|
|
517
|
-
}) | (Omit<Omit<GridProps_2, "gutter" | "columns"> & RecursicaGridProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
518
|
-
m?: string | number | RecursicaSpacing;
|
|
519
|
-
mx?: string | number | RecursicaSpacing;
|
|
520
|
-
my?: string | number | RecursicaSpacing;
|
|
521
|
-
mt?: string | number | RecursicaSpacing;
|
|
522
|
-
mb?: string | number | RecursicaSpacing;
|
|
523
|
-
ml?: string | number | RecursicaSpacing;
|
|
524
|
-
mr?: string | number | RecursicaSpacing;
|
|
525
|
-
gap?: string | number | RecursicaSpacing;
|
|
526
|
-
rowGap?: string | number | RecursicaSpacing;
|
|
527
|
-
columnGap?: string | number | RecursicaSpacing;
|
|
528
|
-
gutter?: string | number | RecursicaSpacing;
|
|
529
|
-
spacing?: string | number | RecursicaSpacing;
|
|
530
|
-
} & {
|
|
531
|
-
component: React.ElementType;
|
|
532
|
-
renderRoot?: (props: Record<string, any>) => any;
|
|
533
|
-
})>, never> & Record<string, never>;
|
|
534
|
-
|
|
535
|
-
export declare const GridCol: (<C = "div">(props: PolymorphicComponentProps<C, GridColProps>) => React.ReactElement) & Omit<FunctionComponent<(Omit<GridColProps_2 & RecursicaGridColProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
536
|
-
m?: string | number | RecursicaSpacing;
|
|
537
|
-
mx?: string | number | RecursicaSpacing;
|
|
538
|
-
my?: string | number | RecursicaSpacing;
|
|
539
|
-
mt?: string | number | RecursicaSpacing;
|
|
540
|
-
mb?: string | number | RecursicaSpacing;
|
|
541
|
-
ml?: string | number | RecursicaSpacing;
|
|
542
|
-
mr?: string | number | RecursicaSpacing;
|
|
543
|
-
gap?: string | number | RecursicaSpacing;
|
|
544
|
-
rowGap?: string | number | RecursicaSpacing;
|
|
545
|
-
columnGap?: string | number | RecursicaSpacing;
|
|
546
|
-
gutter?: string | number | RecursicaSpacing;
|
|
547
|
-
spacing?: string | number | RecursicaSpacing;
|
|
548
|
-
} & {
|
|
549
|
-
component?: any;
|
|
550
|
-
} & 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" | "gutter" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "variant" | "onChange" | "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" | "spacing" | "component" | "offset"> & {
|
|
551
|
-
ref?: any;
|
|
552
|
-
renderRoot?: (props: any) => any;
|
|
553
|
-
}) | (Omit<GridColProps_2 & RecursicaGridColProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
554
|
-
m?: string | number | RecursicaSpacing;
|
|
555
|
-
mx?: string | number | RecursicaSpacing;
|
|
556
|
-
my?: string | number | RecursicaSpacing;
|
|
557
|
-
mt?: string | number | RecursicaSpacing;
|
|
558
|
-
mb?: string | number | RecursicaSpacing;
|
|
559
|
-
ml?: string | number | RecursicaSpacing;
|
|
560
|
-
mr?: string | number | RecursicaSpacing;
|
|
561
|
-
gap?: string | number | RecursicaSpacing;
|
|
562
|
-
rowGap?: string | number | RecursicaSpacing;
|
|
563
|
-
columnGap?: string | number | RecursicaSpacing;
|
|
564
|
-
gutter?: string | number | RecursicaSpacing;
|
|
565
|
-
spacing?: string | number | RecursicaSpacing;
|
|
566
|
-
} & {
|
|
567
|
-
component: React.ElementType;
|
|
568
|
-
renderRoot?: (props: Record<string, any>) => any;
|
|
569
|
-
})>, never> & Record<string, never>;
|
|
570
|
-
|
|
571
|
-
export declare type GridColProps = WithRecursicaSpacing<GridColProps_2 & RecursicaGridColProps>;
|
|
572
|
-
|
|
573
|
-
declare type GridComponent = typeof GridBase & {
|
|
574
|
-
Col: typeof GridCol;
|
|
575
|
-
};
|
|
576
|
-
|
|
577
|
-
/**
|
|
578
|
-
* Grid layout wrapper.
|
|
579
|
-
*
|
|
580
|
-
* Note: Unlike complex UI components, primitive layout components (Flex, Stack, Group, Container, Grid)
|
|
581
|
-
* DO NOT use the `RecursicaOverStyled` gatekeeper. Developers must be able to freely pass
|
|
582
|
-
* width, height, padding, margins, and flexbox alignment props to construct structural layouts.
|
|
583
|
-
*
|
|
584
|
-
* Recursica's `layout-grids` tokens (column-gutter, row-gutter, margin) are design-system-managed
|
|
585
|
-
* values, not integrator-facing settings — Grid applies them itself via CSS variables. Mantine's
|
|
586
|
-
* own `gutter` prop is not accepted; only `columns` (from `RecursicaGridProps` in
|
|
587
|
-
* `adapter-common`) is exposed as an override, matching how `Container.size` overrides its own
|
|
588
|
-
* token-backed default. See `GRID_IMPLEMENTATION_NOTES.md`.
|
|
589
|
-
*/
|
|
590
|
-
export declare type GridProps = WithRecursicaSpacing<Omit<GridProps_2, "gutter" | "columns"> & RecursicaGridProps>;
|
|
591
|
-
|
|
592
497
|
export declare const Group: ForwardRefExoticComponent<Omit<GroupProps_2, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
593
498
|
m?: string | number | RecursicaSpacing;
|
|
594
499
|
mx?: string | number | RecursicaSpacing;
|
|
@@ -677,6 +582,113 @@ export declare const Label: default_2.ForwardRefExoticComponent<LabelProps & def
|
|
|
677
582
|
|
|
678
583
|
export declare type LabelProps = RecursicaOverStyled<Omit<InputLabelProps, "size"> & RecursicaLabelProps>;
|
|
679
584
|
|
|
585
|
+
export declare const LayoutGrid: LayoutGridComponent;
|
|
586
|
+
|
|
587
|
+
/**
|
|
588
|
+
* Recursica LayoutGrid layout wrapper.
|
|
589
|
+
*
|
|
590
|
+
* Supports polymorphism via the `component` prop for custom element rendering.
|
|
591
|
+
* @example
|
|
592
|
+
* ```tsx
|
|
593
|
+
* <LayoutGrid>
|
|
594
|
+
* <LayoutGrid.Col span={3}>Half width at 6 columns (full width at 3)</LayoutGrid.Col>
|
|
595
|
+
* <LayoutGrid.Col span={3}>Half width at 6 columns</LayoutGrid.Col>
|
|
596
|
+
* </LayoutGrid>
|
|
597
|
+
* ```
|
|
598
|
+
*/
|
|
599
|
+
declare const LayoutGridBase: (<C = "div">(props: PolymorphicComponentProps<C, LayoutGridProps>) => React.ReactElement) & Omit<FunctionComponent<(Omit<Omit<GridProps, "gutter" | "columns"> & Omit<RecursicaLayoutGridProps, "columns">, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
600
|
+
m?: string | number | RecursicaSpacing;
|
|
601
|
+
mx?: string | number | RecursicaSpacing;
|
|
602
|
+
my?: string | number | RecursicaSpacing;
|
|
603
|
+
mt?: string | number | RecursicaSpacing;
|
|
604
|
+
mb?: string | number | RecursicaSpacing;
|
|
605
|
+
ml?: string | number | RecursicaSpacing;
|
|
606
|
+
mr?: string | number | RecursicaSpacing;
|
|
607
|
+
gap?: string | number | RecursicaSpacing;
|
|
608
|
+
rowGap?: string | number | RecursicaSpacing;
|
|
609
|
+
columnGap?: string | number | RecursicaSpacing;
|
|
610
|
+
gutter?: string | number | RecursicaSpacing;
|
|
611
|
+
spacing?: string | number | RecursicaSpacing;
|
|
612
|
+
} & {
|
|
613
|
+
component?: any;
|
|
614
|
+
} & 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" | "gutter" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "variant" | "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" | "attributes" | "spacing" | "type" | "justify" | "component" | "align" | "overflow" | "grow" | "breakpoints"> & {
|
|
615
|
+
ref?: any;
|
|
616
|
+
renderRoot?: (props: any) => any;
|
|
617
|
+
}) | (Omit<Omit<GridProps, "gutter" | "columns"> & Omit<RecursicaLayoutGridProps, "columns">, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
618
|
+
m?: string | number | RecursicaSpacing;
|
|
619
|
+
mx?: string | number | RecursicaSpacing;
|
|
620
|
+
my?: string | number | RecursicaSpacing;
|
|
621
|
+
mt?: string | number | RecursicaSpacing;
|
|
622
|
+
mb?: string | number | RecursicaSpacing;
|
|
623
|
+
ml?: string | number | RecursicaSpacing;
|
|
624
|
+
mr?: string | number | RecursicaSpacing;
|
|
625
|
+
gap?: string | number | RecursicaSpacing;
|
|
626
|
+
rowGap?: string | number | RecursicaSpacing;
|
|
627
|
+
columnGap?: string | number | RecursicaSpacing;
|
|
628
|
+
gutter?: string | number | RecursicaSpacing;
|
|
629
|
+
spacing?: string | number | RecursicaSpacing;
|
|
630
|
+
} & {
|
|
631
|
+
component: React.ElementType;
|
|
632
|
+
renderRoot?: (props: Record<string, any>) => any;
|
|
633
|
+
})>, never> & Record<string, never>;
|
|
634
|
+
|
|
635
|
+
export declare const LayoutGridCol: (<C = "div">(props: PolymorphicComponentProps<C, LayoutGridColProps>) => React.ReactElement) & Omit<FunctionComponent<(Omit<GridColProps & RecursicaLayoutGridColProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
636
|
+
m?: string | number | RecursicaSpacing;
|
|
637
|
+
mx?: string | number | RecursicaSpacing;
|
|
638
|
+
my?: string | number | RecursicaSpacing;
|
|
639
|
+
mt?: string | number | RecursicaSpacing;
|
|
640
|
+
mb?: string | number | RecursicaSpacing;
|
|
641
|
+
ml?: string | number | RecursicaSpacing;
|
|
642
|
+
mr?: string | number | RecursicaSpacing;
|
|
643
|
+
gap?: string | number | RecursicaSpacing;
|
|
644
|
+
rowGap?: string | number | RecursicaSpacing;
|
|
645
|
+
columnGap?: string | number | RecursicaSpacing;
|
|
646
|
+
gutter?: string | number | RecursicaSpacing;
|
|
647
|
+
spacing?: string | number | RecursicaSpacing;
|
|
648
|
+
} & {
|
|
649
|
+
component?: any;
|
|
650
|
+
} & 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" | "gutter" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "variant" | "onChange" | "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" | "spacing" | "component" | "offset"> & {
|
|
651
|
+
ref?: any;
|
|
652
|
+
renderRoot?: (props: any) => any;
|
|
653
|
+
}) | (Omit<GridColProps & RecursicaLayoutGridColProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "gutter" | "spacing"> & {
|
|
654
|
+
m?: string | number | RecursicaSpacing;
|
|
655
|
+
mx?: string | number | RecursicaSpacing;
|
|
656
|
+
my?: string | number | RecursicaSpacing;
|
|
657
|
+
mt?: string | number | RecursicaSpacing;
|
|
658
|
+
mb?: string | number | RecursicaSpacing;
|
|
659
|
+
ml?: string | number | RecursicaSpacing;
|
|
660
|
+
mr?: string | number | RecursicaSpacing;
|
|
661
|
+
gap?: string | number | RecursicaSpacing;
|
|
662
|
+
rowGap?: string | number | RecursicaSpacing;
|
|
663
|
+
columnGap?: string | number | RecursicaSpacing;
|
|
664
|
+
gutter?: string | number | RecursicaSpacing;
|
|
665
|
+
spacing?: string | number | RecursicaSpacing;
|
|
666
|
+
} & {
|
|
667
|
+
component: React.ElementType;
|
|
668
|
+
renderRoot?: (props: Record<string, any>) => any;
|
|
669
|
+
})>, never> & Record<string, never>;
|
|
670
|
+
|
|
671
|
+
export declare type LayoutGridColProps = WithRecursicaSpacing<GridColProps & RecursicaLayoutGridColProps>;
|
|
672
|
+
|
|
673
|
+
declare type LayoutGridComponent = typeof LayoutGridBase & {
|
|
674
|
+
Col: typeof LayoutGridCol;
|
|
675
|
+
};
|
|
676
|
+
|
|
677
|
+
/**
|
|
678
|
+
* LayoutGrid: the Recursica layout grid.
|
|
679
|
+
*
|
|
680
|
+
* Note: Unlike complex UI components, primitive layout components (Flex, Stack, Group, Container, LayoutGrid)
|
|
681
|
+
* DO NOT use the `RecursicaOverStyled` gatekeeper. Developers must be able to freely pass
|
|
682
|
+
* width, height, padding, margins, and flexbox alignment props to construct structural layouts.
|
|
683
|
+
*
|
|
684
|
+
* Recursica's `layout-grids` tokens (columns, column-gutter, row-gutter, margin) are
|
|
685
|
+
* design-system-managed and breakpoint-aware (Forge redefines them inside `@media` blocks), so
|
|
686
|
+
* LayoutGrid applies them itself via CSS variables. Neither Mantine's `gutter` nor `columns` is
|
|
687
|
+
* accepted; use Mantine's Grid directly for a fixed N-column grid. See
|
|
688
|
+
* `LAYOUT_GRID_IMPLEMENTATION_NOTES.md`.
|
|
689
|
+
*/
|
|
690
|
+
export declare type LayoutGridProps = WithRecursicaSpacing<Omit<GridProps, "gutter" | "columns"> & Omit<RecursicaLayoutGridProps, "columns">>;
|
|
691
|
+
|
|
680
692
|
/**
|
|
681
693
|
* Recursica Link component wrapping Mantine's Anchor.
|
|
682
694
|
*
|
|
@@ -703,6 +715,12 @@ export declare const Loader: ForwardRefExoticComponent<LoaderProps & RefAttribut
|
|
|
703
715
|
|
|
704
716
|
export declare type LoaderProps = RecursicaOverStyled<Omit<LoaderProps_2, "variant" | "size" | "type"> & RecursicaLoaderProps>;
|
|
705
717
|
|
|
718
|
+
declare interface ManifestWithLayoutGrids {
|
|
719
|
+
brand?: {
|
|
720
|
+
"layout-grids"?: Record<string, unknown>;
|
|
721
|
+
};
|
|
722
|
+
}
|
|
723
|
+
|
|
706
724
|
export declare const Menu: MenuComponent;
|
|
707
725
|
|
|
708
726
|
declare const MenuBase: {
|
|
@@ -903,16 +921,20 @@ declare const ModalTitle: default_2.ForwardRefExoticComponent<ModalTitleProps &
|
|
|
903
921
|
|
|
904
922
|
export declare type ModalTitleProps = RecursicaOverStyled<ModalTitleProps_2>;
|
|
905
923
|
|
|
924
|
+
declare type NavControl = "first" | "previous" | "next" | "last";
|
|
925
|
+
|
|
906
926
|
export declare const NumberInput: default_2.ForwardRefExoticComponent<NumberInputProps & default_2.RefAttributes<HTMLInputElement>>;
|
|
907
927
|
|
|
908
928
|
export declare type NumberInputProps = RecursicaOverStyled<RecursicaNumberInputProps>;
|
|
909
929
|
|
|
910
930
|
/**
|
|
911
|
-
* Recursica Pagination
|
|
931
|
+
* Recursica Pagination. Its page and navigation buttons are Recursica `Button`s whose style and
|
|
932
|
+
* size come from the manifest's `ui-kit.components.pagination` selected variants. Requires the
|
|
933
|
+
* `manifest` prop on `RecursicaThemeProvider`.
|
|
912
934
|
*/
|
|
913
935
|
export declare const Pagination: typeof _Pagination & {
|
|
914
936
|
Root: typeof _PaginationRoot;
|
|
915
|
-
Items: typeof
|
|
937
|
+
Items: typeof PaginationItems;
|
|
916
938
|
Control: typeof _PaginationControl;
|
|
917
939
|
Dots: typeof _PaginationDots;
|
|
918
940
|
Next: typeof _PaginationNext;
|
|
@@ -922,31 +944,52 @@ export declare const Pagination: typeof _Pagination & {
|
|
|
922
944
|
Icon: typeof PaginationIcon;
|
|
923
945
|
};
|
|
924
946
|
|
|
925
|
-
declare const _Pagination: default_2.ForwardRefExoticComponent<PaginationProps & default_2.RefAttributes<
|
|
947
|
+
declare const _Pagination: default_2.ForwardRefExoticComponent<PaginationProps & default_2.RefAttributes<HTMLElement>>;
|
|
948
|
+
|
|
949
|
+
declare interface PaginationBaseProps {
|
|
950
|
+
/** Total number of pages */
|
|
951
|
+
total: number;
|
|
952
|
+
/** Active page (controlled) */
|
|
953
|
+
value?: number;
|
|
954
|
+
/** Initial active page (uncontrolled) */
|
|
955
|
+
defaultValue?: number;
|
|
956
|
+
/** Called when the active page changes */
|
|
957
|
+
onChange?: (page: number) => void;
|
|
958
|
+
/** Pages shown on each side of the active page */
|
|
959
|
+
siblings?: number;
|
|
960
|
+
/** Pages always shown at the start and end */
|
|
961
|
+
boundaries?: number;
|
|
962
|
+
disabled?: boolean;
|
|
963
|
+
/** Extra props for each page button */
|
|
964
|
+
getItemProps?: (page: number) => Record<string, unknown>;
|
|
965
|
+
/** Extra props for each first/previous/next/last button */
|
|
966
|
+
getControlProps?: (control: NavControl) => Record<string, unknown>;
|
|
967
|
+
/** Replaces the dots between page ranges */
|
|
968
|
+
dotsIcon?: default_2.ReactNode;
|
|
969
|
+
}
|
|
926
970
|
|
|
927
971
|
declare const _PaginationControl: default_2.ForwardRefExoticComponent<PaginationControlProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
928
972
|
|
|
929
|
-
export declare type PaginationControlProps = RecursicaOverStyled<
|
|
973
|
+
export declare type PaginationControlProps = RecursicaOverStyled<ButtonElementProps & {
|
|
974
|
+
/** Whether this is the active page: uses the manifest's `active-pages` Button variant. */
|
|
975
|
+
active?: boolean;
|
|
976
|
+
}>;
|
|
930
977
|
|
|
931
|
-
declare const _PaginationDots: default_2.ForwardRefExoticComponent<
|
|
978
|
+
declare const _PaginationDots: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
979
|
+
icon?: default_2.ReactNode;
|
|
980
|
+
} & default_2.RefAttributes<HTMLDivElement>>;
|
|
932
981
|
|
|
933
|
-
export declare type PaginationDotsProps =
|
|
982
|
+
export declare type PaginationDotsProps = default_2.ComponentPropsWithoutRef<"div"> & {
|
|
983
|
+
icon?: default_2.ReactNode;
|
|
984
|
+
};
|
|
934
985
|
|
|
935
|
-
export declare type PaginationEdgeProps
|
|
986
|
+
export declare type PaginationEdgeProps = RecursicaOverStyled<Omit<ButtonElementProps, "children" | "rightSection"> & {
|
|
936
987
|
/** If set to true, displays text labels alongside the icon. */
|
|
937
988
|
withLabel?: boolean;
|
|
938
|
-
icon?:
|
|
989
|
+
icon?: default_2.ReactNode;
|
|
939
990
|
}>;
|
|
940
991
|
|
|
941
|
-
declare const _PaginationFirst: default_2.ForwardRefExoticComponent<PaginationEdgeProps
|
|
942
|
-
component?: any;
|
|
943
|
-
} & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps_2> & {
|
|
944
|
-
ref?: any;
|
|
945
|
-
renderRoot?: (props: any) => any;
|
|
946
|
-
}) | (PaginationEdgeProps_2 & {
|
|
947
|
-
component: default_2.ElementType;
|
|
948
|
-
renderRoot?: (props: Record<string, any>) => any;
|
|
949
|
-
})>, never> & Record<string, never>> & default_2.RefAttributes<HTMLButtonElement>>;
|
|
992
|
+
declare const _PaginationFirst: default_2.ForwardRefExoticComponent<PaginationEdgeProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
950
993
|
|
|
951
994
|
declare const PaginationIcon: ({ type, className, ...props }: React.ComponentProps<"svg"> & {
|
|
952
995
|
type: PaginationIconType;
|
|
@@ -954,41 +997,25 @@ declare const PaginationIcon: ({ type, className, ...props }: React.ComponentPro
|
|
|
954
997
|
|
|
955
998
|
declare type PaginationIconType = "next" | "prev" | "first" | "last";
|
|
956
999
|
|
|
957
|
-
declare
|
|
958
|
-
component?: any;
|
|
959
|
-
} & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps_2> & {
|
|
960
|
-
ref?: any;
|
|
961
|
-
renderRoot?: (props: any) => any;
|
|
962
|
-
}) | (PaginationEdgeProps_2 & {
|
|
963
|
-
component: default_2.ElementType;
|
|
964
|
-
renderRoot?: (props: Record<string, any>) => any;
|
|
965
|
-
})>, never> & Record<string, never>> & default_2.RefAttributes<HTMLButtonElement>>;
|
|
1000
|
+
declare function PaginationItems(): default_2.JSX.Element;
|
|
966
1001
|
|
|
967
|
-
declare
|
|
968
|
-
|
|
969
|
-
}
|
|
970
|
-
ref?: any;
|
|
971
|
-
renderRoot?: (props: any) => any;
|
|
972
|
-
}) | (PaginationEdgeProps_2 & {
|
|
973
|
-
component: default_2.ElementType;
|
|
974
|
-
renderRoot?: (props: Record<string, any>) => any;
|
|
975
|
-
})>, never> & Record<string, never>> & default_2.RefAttributes<HTMLButtonElement>>;
|
|
1002
|
+
declare namespace PaginationItems {
|
|
1003
|
+
var displayName: string;
|
|
1004
|
+
}
|
|
976
1005
|
|
|
977
|
-
declare const
|
|
978
|
-
component?: any;
|
|
979
|
-
} & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps_2> & {
|
|
980
|
-
ref?: any;
|
|
981
|
-
renderRoot?: (props: any) => any;
|
|
982
|
-
}) | (PaginationEdgeProps_2 & {
|
|
983
|
-
component: default_2.ElementType;
|
|
984
|
-
renderRoot?: (props: Record<string, any>) => any;
|
|
985
|
-
})>, never> & Record<string, never>> & default_2.RefAttributes<HTMLButtonElement>>;
|
|
1006
|
+
declare const _PaginationLast: default_2.ForwardRefExoticComponent<PaginationEdgeProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
986
1007
|
|
|
987
|
-
|
|
1008
|
+
declare const _PaginationNext: default_2.ForwardRefExoticComponent<PaginationEdgeProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
988
1009
|
|
|
989
|
-
declare const
|
|
1010
|
+
declare const _PaginationPrevious: default_2.ForwardRefExoticComponent<PaginationEdgeProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
990
1011
|
|
|
991
|
-
export declare type
|
|
1012
|
+
export declare type PaginationProps = RecursicaOverStyled<RecursicaPaginationProps & PaginationBaseProps & Omit<default_2.ComponentPropsWithoutRef<"nav">, "onChange" | "children">>;
|
|
1013
|
+
|
|
1014
|
+
declare const _PaginationRoot: default_2.ForwardRefExoticComponent<PaginationRootProps & default_2.RefAttributes<HTMLElement>>;
|
|
1015
|
+
|
|
1016
|
+
export declare type PaginationRootProps = RecursicaOverStyled<PaginationBaseProps & Omit<default_2.ComponentPropsWithoutRef<"nav">, "onChange" | "children"> & {
|
|
1017
|
+
children?: default_2.ReactNode;
|
|
1018
|
+
}>;
|
|
992
1019
|
|
|
993
1020
|
export declare const Panel: PanelComponent;
|
|
994
1021
|
|
package/llms.txt
CHANGED
|
@@ -40,7 +40,7 @@ Each component has its own `USAGE.md` documenting its props, adapter-specific be
|
|
|
40
40
|
- [Flex](src/components/Flex/USAGE.md)
|
|
41
41
|
- [FormControlLayout](src/components/FormControlLayout/USAGE.md)
|
|
42
42
|
- [FormControlWrapper](src/components/FormControlWrapper/USAGE.md)
|
|
43
|
-
- [
|
|
43
|
+
- [LayoutGrid](src/components/LayoutGrid/USAGE.md)
|
|
44
44
|
- [Group](src/components/Group/USAGE.md)
|
|
45
45
|
- [HoverCard](src/components/HoverCard/USAGE.md)
|
|
46
46
|
- [Label](src/components/Label/USAGE.md)
|
package/package.json
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"type": "git",
|
|
13
13
|
"url": "git+https://github.com/borderux/recursica-adapter-mantine-v8.git"
|
|
14
14
|
},
|
|
15
|
-
"version": "1.
|
|
15
|
+
"version": "1.3.0",
|
|
16
16
|
"publishConfig": {
|
|
17
17
|
"access": "public"
|
|
18
18
|
},
|
|
@@ -78,13 +78,13 @@
|
|
|
78
78
|
"release": "changeset publish"
|
|
79
79
|
},
|
|
80
80
|
"dependencies": {
|
|
81
|
-
"@recursica/adapter-common": "^
|
|
81
|
+
"@recursica/adapter-common": "^1.1.0"
|
|
82
82
|
},
|
|
83
83
|
"devDependencies": {
|
|
84
84
|
"@changesets/cli": "^2.29.7",
|
|
85
85
|
"@eslint/js": "^9.25.0",
|
|
86
86
|
"@playwright/test": "^1.62.1",
|
|
87
|
-
"@recursica/adapter-tester": "^5.
|
|
87
|
+
"@recursica/adapter-tester": "^5.3.0",
|
|
88
88
|
"@recursica/recursica-postcss-vars": "^1.5.0",
|
|
89
89
|
"@recursica/storybook-template": "^0.7.11",
|
|
90
90
|
"@recursica/token-analyzer": "^1.8.0",
|
package/recursica_brand.json
CHANGED
package/recursica_tokens.json
CHANGED
package/recursica_ui-kit.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* Recursica CSS Variables - Scoped
|
|
3
|
-
* Transform version: 1.
|
|
4
|
-
* Source JSON version: 0.
|
|
5
|
-
* Generated:
|
|
3
|
+
* Transform version: 1.4.0
|
|
4
|
+
* Source JSON version: 0.29.0
|
|
5
|
+
* Generated: Fri, 02 Oct 2026 22:19:36 GMT
|
|
6
6
|
*
|
|
7
7
|
* --- How to integrate this file ---
|
|
8
8
|
*
|
|
@@ -133,10 +133,14 @@
|
|
|
133
133
|
--recursica_brand_layer_1_elements_interactive_tone: var(--recursica_tokens_colors_scale-06_400);
|
|
134
134
|
--recursica_brand_layer_2_elements_interactive_tone: var(--recursica_tokens_colors_scale-06_400);
|
|
135
135
|
--recursica_brand_layer_3_elements_interactive_tone: var(--recursica_tokens_colors_scale-06_400);
|
|
136
|
+
--recursica_brand_layout-grids_column-gutter: var(--recursica_brand_layout-grids_default_column-gutter);
|
|
137
|
+
--recursica_brand_layout-grids_columns: var(--recursica_brand_layout-grids_default_columns);
|
|
136
138
|
--recursica_brand_layout-grids_default_column-gutter: var(--recursica_tokens_sizes_2x);
|
|
137
139
|
--recursica_brand_layout-grids_default_columns: 6;
|
|
138
140
|
--recursica_brand_layout-grids_default_margin: var(--recursica_tokens_sizes_3x);
|
|
139
141
|
--recursica_brand_layout-grids_default_row-gutter: var(--recursica_tokens_sizes_3x);
|
|
142
|
+
--recursica_brand_layout-grids_margin: var(--recursica_brand_layout-grids_default_margin);
|
|
143
|
+
--recursica_brand_layout-grids_row-gutter: var(--recursica_brand_layout-grids_default_row-gutter);
|
|
140
144
|
--recursica_brand_modes_dark_elevations_elevation-0: var(--recursica_brand_modes_dark_elevations_elevation-0_x) var(--recursica_brand_modes_dark_elevations_elevation-0_y) var(--recursica_brand_modes_dark_elevations_elevation-0_blur) var(--recursica_brand_modes_dark_elevations_elevation-0_spread) var(--recursica_brand_modes_dark_elevations_elevation-0_color);
|
|
141
145
|
--recursica_brand_modes_dark_elevations_elevation-0_blur: 0px;
|
|
142
146
|
--recursica_brand_modes_dark_elevations_elevation-0_color: var(--recursica_brand_modes_dark_palettes_neutral_500_color_tone);
|
|
@@ -35,7 +35,6 @@ All Recursica components in the `@recursica/adapter-mantine-v8` package adhere s
|
|
|
35
35
|
|
|
36
36
|
> [!IMPORTANT]
|
|
37
37
|
>
|
|
38
|
-
> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
|
|
39
38
|
> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
|
|
40
39
|
> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
|
|
41
40
|
|