@mirohq/design-system-grid 3.1.2 → 3.2.0-fix-stitches-types.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 (5) hide show
  1. package/dist/main.js +2 -8
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js.map +1 -1
  4. package/dist/types.d.ts +55 -35
  5. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -1,17 +1,11 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var jsxRuntime = require('react/jsx-runtime');
6
4
  var React = require('react');
7
5
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
8
6
  var designSystemStitches = require('@mirohq/design-system-stitches');
9
7
  var designSystemUtils = require('@mirohq/design-system-utils');
10
8
 
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
-
15
9
  const SIZES$1 = designSystemUtils.createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
16
10
  const StyledGrid = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
17
11
  display: "grid",
@@ -110,11 +104,11 @@ const StyledItem = designSystemStitches.styled(designSystemPrimitive.Primitive.d
110
104
  }
111
105
  });
112
106
 
113
- const Item = React__default["default"].forwardRef(
107
+ const Item = React.forwardRef(
114
108
  (props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledItem, { ...props, ref: forwardRef })
115
109
  );
116
110
 
117
- const Grid = React__default["default"].forwardRef(
111
+ const Grid = React.forwardRef(
118
112
  (props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGrid, { ...props, ref: forwardRef })
119
113
  );
120
114
  Grid.Item = Item;
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/grid.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/grid.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { createConstants, mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const SIZES = createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)\n\nexport const StyledGrid = styled(Primitive.div, {\n display: 'grid',\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n gap: mapKeysToVariants(theme.space, 'gap'),\n gapX: mapKeysToVariants(theme.space, 'rowGap'),\n gapY: mapKeysToVariants(theme.space, 'columnGap'),\n columns: mapKeysToVariants(SIZES, key => ({\n gridTemplateColumns: `repeat(${key}, 1fr)`,\n })),\n rows: mapKeysToVariants(SIZES, key => ({\n gridTemplateRows: `repeat(${key}, 1fr)`,\n })),\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n justifyItems: {\n start: {\n justifyItems: 'start',\n },\n center: {\n justifyItems: 'center',\n },\n end: {\n justifyItems: 'end',\n },\n stretch: {\n justifyItems: 'stretch',\n },\n },\n },\n})\n\nexport type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants, createConstants } from '@mirohq/design-system-utils'\n\nimport { SIZES as GRID_SIZES } from '../grid.styled'\n\nconst ADDITIONAL_COLUMNS_ROWS_SIZES = createConstants(-1)\nconst SIZES = { ...ADDITIONAL_COLUMNS_ROWS_SIZES, ...GRID_SIZES }\n\nexport const StyledItem = styled(Primitive.div, {\n variants: {\n columnStart: mapKeysToVariants(SIZES, key => ({ gridColumnStart: key })),\n rowStart: mapKeysToVariants(SIZES, key => ({ gridRowStart: key })),\n columnEnd: mapKeysToVariants(SIZES, key => ({ gridColumnEnd: key })),\n rowEnd: mapKeysToVariants(SIZES, key => ({ gridRowEnd: key })),\n },\n})\n\nexport type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Determines the grid item's start position within the grid referring to a column number.\n */\n columnStart?: StyledItemProps['columnStart']\n\n /**\n * Determines the grid item's start position within the grid referring to a row number.\n */\n rowStart?: StyledItemProps['rowStart']\n /**\n * Determines the grid item's end position within the grid referring to a column number.\n */\n columnEnd?: StyledItemProps['columnEnd']\n /**\n * Determines the grid item's end position within the grid referring to a row number.\n */\n rowEnd?: StyledItemProps['rowEnd']\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (props, forwardRef) => <StyledItem {...props} ref={forwardRef} />\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledGrid } from './grid.styled'\nimport type { StyledGridProps } from './grid.styled'\nimport { Item } from './partials/item'\n\nexport interface GridProps extends StyledGridProps {\n /**\n * Defines how elements are aligned along the block (column) axis.\n */\n align?: StyledGridProps['align']\n\n /**\n * Defines how elements are aligned along the inline (row) axis.\n */\n justify?: StyledGridProps['justify']\n\n /**\n * Aligns grid items along the inline (row) axis.\n * This value applies to all grid items inside the container.\n */\n justifyItems?: StyledGridProps['justifyItems']\n\n /**\n * Defines how elements are automatically placed in the grid.\n */\n flow?: StyledGridProps['flow']\n\n /**\n * Defines the width of the gutter between both columns and rows. Uses the\n * space token.\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. Uses the\n * space token.\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns. Uses the\n * space token.\n */\n gapY?: StyledGridProps['gapY']\n\n /**\n * Defines the number of columns in the grid.\n */\n columns?: StyledGridProps['columns']\n\n /**\n * Defines the number of rows in the grid.\n */\n rows?: StyledGridProps['rows']\n}\n\nexport const Grid = React.forwardRef<ElementRef<typeof StyledGrid>, GridProps>(\n (props, forwardRef) => <StyledGrid {...props} ref={forwardRef} />\n) as ForwardRefExoticComponent<GridProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Item: typeof Item\n}\n\nGrid.Item = Item\n"],"names":["SIZES","createConstants","styled","Primitive","mapKeysToVariants","theme","GRID_SIZES","React","jsx"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/grid.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/grid.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { createConstants, mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const SIZES = createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)\n\nexport const StyledGrid = styled(Primitive.div, {\n display: 'grid',\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n gap: mapKeysToVariants(theme.space, 'gap'),\n gapX: mapKeysToVariants(theme.space, 'rowGap'),\n gapY: mapKeysToVariants(theme.space, 'columnGap'),\n columns: mapKeysToVariants(SIZES, key => ({\n gridTemplateColumns: `repeat(${key}, 1fr)`,\n })),\n rows: mapKeysToVariants(SIZES, key => ({\n gridTemplateRows: `repeat(${key}, 1fr)`,\n })),\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n justifyItems: {\n start: {\n justifyItems: 'start',\n },\n center: {\n justifyItems: 'center',\n },\n end: {\n justifyItems: 'end',\n },\n stretch: {\n justifyItems: 'stretch',\n },\n },\n },\n})\n\nexport type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants, createConstants } from '@mirohq/design-system-utils'\n\nimport { SIZES as GRID_SIZES } from '../grid.styled'\n\nconst ADDITIONAL_COLUMNS_ROWS_SIZES = createConstants(-1)\nconst SIZES = { ...ADDITIONAL_COLUMNS_ROWS_SIZES, ...GRID_SIZES }\n\nexport const StyledItem = styled(Primitive.div, {\n variants: {\n columnStart: mapKeysToVariants(SIZES, key => ({ gridColumnStart: key })),\n rowStart: mapKeysToVariants(SIZES, key => ({ gridRowStart: key })),\n columnEnd: mapKeysToVariants(SIZES, key => ({ gridColumnEnd: key })),\n rowEnd: mapKeysToVariants(SIZES, key => ({ gridRowEnd: key })),\n },\n})\n\nexport type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Determines the grid item's start position within the grid referring to a column number.\n */\n columnStart?: StyledItemProps['columnStart']\n\n /**\n * Determines the grid item's start position within the grid referring to a row number.\n */\n rowStart?: StyledItemProps['rowStart']\n /**\n * Determines the grid item's end position within the grid referring to a column number.\n */\n columnEnd?: StyledItemProps['columnEnd']\n /**\n * Determines the grid item's end position within the grid referring to a row number.\n */\n rowEnd?: StyledItemProps['rowEnd']\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (props, forwardRef) => <StyledItem {...props} ref={forwardRef} />\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledGrid } from './grid.styled'\nimport type { StyledGridProps } from './grid.styled'\nimport { Item } from './partials/item'\n\nexport interface GridProps extends StyledGridProps {\n /**\n * Defines how elements are aligned along the block (column) axis.\n */\n align?: StyledGridProps['align']\n\n /**\n * Defines how elements are aligned along the inline (row) axis.\n */\n justify?: StyledGridProps['justify']\n\n /**\n * Aligns grid items along the inline (row) axis.\n * This value applies to all grid items inside the container.\n */\n justifyItems?: StyledGridProps['justifyItems']\n\n /**\n * Defines how elements are automatically placed in the grid.\n */\n flow?: StyledGridProps['flow']\n\n /**\n * Defines the width of the gutter between both columns and rows. Uses the\n * space token.\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. Uses the\n * space token.\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns. Uses the\n * space token.\n */\n gapY?: StyledGridProps['gapY']\n\n /**\n * Defines the number of columns in the grid.\n */\n columns?: StyledGridProps['columns']\n\n /**\n * Defines the number of rows in the grid.\n */\n rows?: StyledGridProps['rows']\n}\n\nexport const Grid = React.forwardRef<ElementRef<typeof StyledGrid>, GridProps>(\n (props, forwardRef) => <StyledGrid {...props} ref={forwardRef} />\n) as ForwardRefExoticComponent<GridProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Item: typeof Item\n}\n\nGrid.Item = Item\n"],"names":["SIZES","createConstants","styled","Primitive","mapKeysToVariants","theme","GRID_SIZES","jsx"],"mappings":"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"}
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/grid.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/grid.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { createConstants, mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const SIZES = createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)\n\nexport const StyledGrid = styled(Primitive.div, {\n display: 'grid',\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n gap: mapKeysToVariants(theme.space, 'gap'),\n gapX: mapKeysToVariants(theme.space, 'rowGap'),\n gapY: mapKeysToVariants(theme.space, 'columnGap'),\n columns: mapKeysToVariants(SIZES, key => ({\n gridTemplateColumns: `repeat(${key}, 1fr)`,\n })),\n rows: mapKeysToVariants(SIZES, key => ({\n gridTemplateRows: `repeat(${key}, 1fr)`,\n })),\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n justifyItems: {\n start: {\n justifyItems: 'start',\n },\n center: {\n justifyItems: 'center',\n },\n end: {\n justifyItems: 'end',\n },\n stretch: {\n justifyItems: 'stretch',\n },\n },\n },\n})\n\nexport type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants, createConstants } from '@mirohq/design-system-utils'\n\nimport { SIZES as GRID_SIZES } from '../grid.styled'\n\nconst ADDITIONAL_COLUMNS_ROWS_SIZES = createConstants(-1)\nconst SIZES = { ...ADDITIONAL_COLUMNS_ROWS_SIZES, ...GRID_SIZES }\n\nexport const StyledItem = styled(Primitive.div, {\n variants: {\n columnStart: mapKeysToVariants(SIZES, key => ({ gridColumnStart: key })),\n rowStart: mapKeysToVariants(SIZES, key => ({ gridRowStart: key })),\n columnEnd: mapKeysToVariants(SIZES, key => ({ gridColumnEnd: key })),\n rowEnd: mapKeysToVariants(SIZES, key => ({ gridRowEnd: key })),\n },\n})\n\nexport type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Determines the grid item's start position within the grid referring to a column number.\n */\n columnStart?: StyledItemProps['columnStart']\n\n /**\n * Determines the grid item's start position within the grid referring to a row number.\n */\n rowStart?: StyledItemProps['rowStart']\n /**\n * Determines the grid item's end position within the grid referring to a column number.\n */\n columnEnd?: StyledItemProps['columnEnd']\n /**\n * Determines the grid item's end position within the grid referring to a row number.\n */\n rowEnd?: StyledItemProps['rowEnd']\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (props, forwardRef) => <StyledItem {...props} ref={forwardRef} />\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledGrid } from './grid.styled'\nimport type { StyledGridProps } from './grid.styled'\nimport { Item } from './partials/item'\n\nexport interface GridProps extends StyledGridProps {\n /**\n * Defines how elements are aligned along the block (column) axis.\n */\n align?: StyledGridProps['align']\n\n /**\n * Defines how elements are aligned along the inline (row) axis.\n */\n justify?: StyledGridProps['justify']\n\n /**\n * Aligns grid items along the inline (row) axis.\n * This value applies to all grid items inside the container.\n */\n justifyItems?: StyledGridProps['justifyItems']\n\n /**\n * Defines how elements are automatically placed in the grid.\n */\n flow?: StyledGridProps['flow']\n\n /**\n * Defines the width of the gutter between both columns and rows. Uses the\n * space token.\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. Uses the\n * space token.\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns. Uses the\n * space token.\n */\n gapY?: StyledGridProps['gapY']\n\n /**\n * Defines the number of columns in the grid.\n */\n columns?: StyledGridProps['columns']\n\n /**\n * Defines the number of rows in the grid.\n */\n rows?: StyledGridProps['rows']\n}\n\nexport const Grid = React.forwardRef<ElementRef<typeof StyledGrid>, GridProps>(\n (props, forwardRef) => <StyledGrid {...props} ref={forwardRef} />\n) as ForwardRefExoticComponent<GridProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Item: typeof Item\n}\n\nGrid.Item = Item\n"],"names":["SIZES","GRID_SIZES"],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/grid.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/grid.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { createConstants, mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const SIZES = createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)\n\nexport const StyledGrid = styled(Primitive.div, {\n display: 'grid',\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n gap: mapKeysToVariants(theme.space, 'gap'),\n gapX: mapKeysToVariants(theme.space, 'rowGap'),\n gapY: mapKeysToVariants(theme.space, 'columnGap'),\n columns: mapKeysToVariants(SIZES, key => ({\n gridTemplateColumns: `repeat(${key}, 1fr)`,\n })),\n rows: mapKeysToVariants(SIZES, key => ({\n gridTemplateRows: `repeat(${key}, 1fr)`,\n })),\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n justifyItems: {\n start: {\n justifyItems: 'start',\n },\n center: {\n justifyItems: 'center',\n },\n end: {\n justifyItems: 'end',\n },\n stretch: {\n justifyItems: 'stretch',\n },\n },\n },\n})\n\nexport type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants, createConstants } from '@mirohq/design-system-utils'\n\nimport { SIZES as GRID_SIZES } from '../grid.styled'\n\nconst ADDITIONAL_COLUMNS_ROWS_SIZES = createConstants(-1)\nconst SIZES = { ...ADDITIONAL_COLUMNS_ROWS_SIZES, ...GRID_SIZES }\n\nexport const StyledItem = styled(Primitive.div, {\n variants: {\n columnStart: mapKeysToVariants(SIZES, key => ({ gridColumnStart: key })),\n rowStart: mapKeysToVariants(SIZES, key => ({ gridRowStart: key })),\n columnEnd: mapKeysToVariants(SIZES, key => ({ gridColumnEnd: key })),\n rowEnd: mapKeysToVariants(SIZES, key => ({ gridRowEnd: key })),\n },\n})\n\nexport type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Determines the grid item's start position within the grid referring to a column number.\n */\n columnStart?: StyledItemProps['columnStart']\n\n /**\n * Determines the grid item's start position within the grid referring to a row number.\n */\n rowStart?: StyledItemProps['rowStart']\n /**\n * Determines the grid item's end position within the grid referring to a column number.\n */\n columnEnd?: StyledItemProps['columnEnd']\n /**\n * Determines the grid item's end position within the grid referring to a row number.\n */\n rowEnd?: StyledItemProps['rowEnd']\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (props, forwardRef) => <StyledItem {...props} ref={forwardRef} />\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledGrid } from './grid.styled'\nimport type { StyledGridProps } from './grid.styled'\nimport { Item } from './partials/item'\n\nexport interface GridProps extends StyledGridProps {\n /**\n * Defines how elements are aligned along the block (column) axis.\n */\n align?: StyledGridProps['align']\n\n /**\n * Defines how elements are aligned along the inline (row) axis.\n */\n justify?: StyledGridProps['justify']\n\n /**\n * Aligns grid items along the inline (row) axis.\n * This value applies to all grid items inside the container.\n */\n justifyItems?: StyledGridProps['justifyItems']\n\n /**\n * Defines how elements are automatically placed in the grid.\n */\n flow?: StyledGridProps['flow']\n\n /**\n * Defines the width of the gutter between both columns and rows. Uses the\n * space token.\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. Uses the\n * space token.\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns. Uses the\n * space token.\n */\n gapY?: StyledGridProps['gapY']\n\n /**\n * Defines the number of columns in the grid.\n */\n columns?: StyledGridProps['columns']\n\n /**\n * Defines the number of rows in the grid.\n */\n rows?: StyledGridProps['rows']\n}\n\nexport const Grid = React.forwardRef<ElementRef<typeof StyledGrid>, GridProps>(\n (props, forwardRef) => <StyledGrid {...props} ref={forwardRef} />\n) as ForwardRefExoticComponent<GridProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Item: typeof Item\n}\n\nGrid.Item = Item\n"],"names":["SIZES","GRID_SIZES"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -1,42 +1,61 @@
1
- import * as react from 'react';
2
- import react__default, { ComponentPropsWithRef, ForwardRefExoticComponent } from 'react';
3
- import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
1
+ import * as React from 'react';
2
+ import React__default, { ComponentPropsWithRef, ForwardRefExoticComponent } from 'react';
4
3
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
5
4
  import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
6
5
 
7
- declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "rows" | "align" | "justify" | "justifyItems" | "columns" | "gap" | "flow" | "gapX" | "gapY"> & _stitches_react_types_styled_component.TransformProps<{
8
- align?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
9
- flow?: "row" | "column" | "dense" | "rowDense" | "columnDense" | undefined;
10
- gap?: 0 | 400 | 600 | 200 | 100 | 300 | 50 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
11
- gapX?: 0 | 400 | 600 | 200 | 100 | 300 | 50 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
12
- gapY?: 0 | 400 | 600 | 200 | 100 | 300 | 50 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
13
- columns?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
14
- rows?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
15
- justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
16
- justifyItems?: "center" | "end" | "start" | "stretch" | undefined;
17
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
18
- align?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
19
- flow?: "row" | "column" | "dense" | "rowDense" | "columnDense" | undefined;
20
- gap?: 0 | 400 | 600 | 200 | 100 | 300 | 50 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
21
- gapX?: 0 | 400 | 600 | 200 | 100 | 300 | 50 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
22
- gapY?: 0 | 400 | 600 | 200 | 100 | 300 | 50 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
23
- columns?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
24
- rows?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
25
- justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
26
- justifyItems?: "center" | "end" | "start" | "stretch" | undefined;
6
+ /* Utilities */
7
+ /* ========================================================================== */
8
+
9
+ /** Returns a string with the given prefix followed by the given values. */
10
+ type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
11
+
12
+ type TransformProps<Props, Media> = {
13
+ [K in keyof Props]: (
14
+ | Props[K]
15
+ | (
16
+ & {
17
+ [KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
18
+ }
19
+ & {
20
+ [KMedia in string]: Props[K]
21
+ }
22
+ )
23
+ )
24
+ }
25
+
26
+ declare const StyledGrid: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "justifyItems" | "columns" | "gap" | "flow" | "justify" | "align" | "rows" | "gapX" | "gapY"> & TransformProps<{
27
+ align?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
28
+ flow?: "column" | "row" | "dense" | "rowDense" | "columnDense" | undefined;
29
+ gap?: 0 | 400 | 600 | 50 | 100 | 200 | 300 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
30
+ gapX?: 0 | 400 | 600 | 50 | 100 | 200 | 300 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
31
+ gapY?: 0 | 400 | 600 | 50 | 100 | 200 | 300 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
32
+ columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
33
+ rows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
34
+ justify?: "center" | "stretch" | "end" | "start" | "between" | "around" | "evenly" | undefined;
35
+ justifyItems?: "center" | "stretch" | "end" | "start" | undefined;
36
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
37
+ align?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
38
+ flow?: "column" | "row" | "dense" | "rowDense" | "columnDense" | undefined;
39
+ gap?: 0 | 400 | 600 | 50 | 100 | 200 | 300 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
40
+ gapX?: 0 | 400 | 600 | 50 | 100 | 200 | 300 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
41
+ gapY?: 0 | 400 | 600 | 50 | 100 | 200 | 300 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
42
+ columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
43
+ rows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
44
+ justify?: "center" | "stretch" | "end" | "start" | "between" | "around" | "evenly" | undefined;
45
+ justifyItems?: "center" | "stretch" | "end" | "start" | undefined;
27
46
  }, {}>;
28
47
  type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>;
29
48
 
30
- declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "columnStart" | "rowStart" | "columnEnd" | "rowEnd"> & _stitches_react_types_styled_component.TransformProps<{
31
- columnStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | -1 | "-1" | undefined;
32
- rowStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | -1 | "-1" | undefined;
33
- columnEnd?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | -1 | "-1" | undefined;
34
- rowEnd?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | -1 | "-1" | undefined;
35
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
36
- columnStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | -1 | "-1" | undefined;
37
- rowStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | -1 | "-1" | undefined;
38
- columnEnd?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | -1 | "-1" | undefined;
39
- rowEnd?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | -1 | "-1" | undefined;
49
+ declare const StyledItem: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "columnStart" | "rowStart" | "columnEnd" | "rowEnd"> & TransformProps<{
50
+ columnStart?: 1 | -1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
51
+ rowStart?: 1 | -1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
52
+ columnEnd?: 1 | -1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
53
+ rowEnd?: 1 | -1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
54
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
55
+ columnStart?: 1 | -1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
56
+ rowStart?: 1 | -1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
57
+ columnEnd?: 1 | -1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
58
+ rowEnd?: 1 | -1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
40
59
  }, {}>;
41
60
  type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>;
42
61
 
@@ -58,7 +77,7 @@ interface ItemProps extends StyledItemProps {
58
77
  */
59
78
  rowEnd?: StyledItemProps['rowEnd'];
60
79
  }
61
- declare const Item: react__default.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
80
+ declare const Item: React__default.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
62
81
 
63
82
  interface GridProps extends StyledGridProps {
64
83
  /**
@@ -107,4 +126,5 @@ interface Partials {
107
126
  Item: typeof Item;
108
127
  }
109
128
 
110
- export { Grid, ItemProps as GridItemProps, GridProps };
129
+ export { Grid };
130
+ export type { ItemProps as GridItemProps, GridProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-grid",
3
- "version": "3.1.2",
3
+ "version": "3.2.0-fix-stitches-types.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,8 +26,8 @@
26
26
  "react": "^16.14 || ^17 || ^18 || ^19"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-primitive": "^2.1.0",
30
- "@mirohq/design-system-stitches": "^3.1.2",
29
+ "@mirohq/design-system-primitive": "^2.2.0-fix-stitches-types.0",
30
+ "@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.0",
31
31
  "@mirohq/design-system-utils": "^1.2.1"
32
32
  },
33
33
  "scripts": {