@vitus-labs/coolgrid 0.76.0 → 0.79.0

package/lib/vitus-labs-coolgrid.native.js

@@ -0,0 +1,288 @@
+import { context, makeItResponsive, value, extendCss, ALIGN_CONTENT_MAP_X } from '@vitus-labs/unistyle';
+export { Provider } from '@vitus-labs/unistyle';
+import React, { createContext, useContext, useMemo } from 'react';
+import { omit, pick, get, config } from '@vitus-labs/core';
+
+const PKG_NAME = '@vitus-labs/coolgrid';
+/* eslint-disable import/prefer-default-export */
+const CONTEXT_KEYS = [
+    // 'breakpoints',
+    // 'rootSize',
+    'columns',
+    'size',
+    'gap',
+    'padding',
+    'gutter',
+    'colCss',
+    'colComponent',
+    'rowCss',
+    'rowComponent',
+    'contentAlignX',
+];
+
+const isNumber = (value) => Number.isFinite(value);
+const hasValue = (value) => isNumber(value) && value > 0;
+const isVisible = (value) => (isNumber(value) && value !== 0) || value === undefined;
+const omitCtxKeys = (props) => omit(props, CONTEXT_KEYS);
+
+var ContainerContext = createContext({});
+
+const pickThemeProps = (props, keywords) => pick(props, keywords);
+const getGridContext = (props = {}, theme = {}) => ({
+    columns: (get(props, 'columns') ||
+        get(theme, 'grid.columns') ||
+        get(theme, 'coolgrid.columns')),
+    containerWidth: (get(props, 'width') ||
+        get(theme, 'grid.container') ||
+        get(theme, 'coolgrid.container')),
+});
+const useGridContext = (props) => {
+    const { theme } = useContext(context);
+    const ctxProps = pickThemeProps(props, CONTEXT_KEYS);
+    const gridContext = getGridContext(ctxProps, theme);
+    return { ...gridContext, ...ctxProps };
+};
+
+const styles$2 = ({ theme: t, css, rootSize }) => css `
+  max-width: ${value(t.width, rootSize)};
+  ${extendCss(t.extraStyles)};
+`;
+var Styled$2 = config.styled(config.component) `
+  ${false };
+
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-right: auto;
+  margin-left: auto;
+
+  ${makeItResponsive({
+    key: '$coolgrid',
+    styles: styles$2,
+    css: config.css,
+    normalize: true,
+})};
+`;
+
+const Component$2 = ({ children, component, css, width, ...props }) => {
+    const { containerWidth = {}, ...ctx } = useGridContext(props);
+    const context = useMemo(() => ctx, [ctx]);
+    let finalWidth = containerWidth;
+    if (width) {
+        // @ts-ignore
+        finalWidth = typeof width === 'function' ? width(containerWidth) : width;
+    }
+    const finalProps = useMemo(() => ({
+        $coolgrid: {
+            width: finalWidth,
+            extraStyles: css,
+        },
+    }), [finalWidth, css]);
+    const getDevProps = () => {
+        const result = {};
+        if (process.env.NODE_ENV !== 'production') {
+            result['data-coolgrid'] = 'container';
+        }
+        return result;
+    };
+    return (React.createElement(Styled$2, { ...omitCtxKeys(props), as: component, ...finalProps, ...getDevProps() },
+        React.createElement(ContainerContext.Provider, { value: context }, children)));
+};
+const name$2 = `${PKG_NAME}/Container`;
+Component$2.displayName = name$2;
+Component$2.pkgName = PKG_NAME;
+Component$2.VITUS_LABS__COMPONENT = name$2;
+
+var RowContext = createContext({});
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+const spacingStyles$1 = ({ gap, gutter }, { rootSize }) => {
+    if (!isNumber(gap))
+        return '';
+    const getValue = (param) => value(param, rootSize);
+    const spacingX = (gap / 2) * -1;
+    const spacingY = isNumber(gutter) ? gutter - gap / 2 : gap / 2;
+    return config.css `
+    margin: ${getValue(spacingY)} ${getValue(spacingX)};
+  `;
+};
+const contentAlign = (align) => {
+    if (!align)
+        return '';
+    return config.css `
+    justify-content: ${ALIGN_CONTENT_MAP_X[align]};
+  `;
+};
+const styles$1 = ({ theme, css, rootSize }) => {
+    const { gap, gutter, contentAlignX, extraStyles } = theme;
+    return css `
+    ${spacingStyles$1({ gap, gutter }, { rootSize })};
+    ${contentAlign(contentAlignX)};
+    ${extendCss(extraStyles)};
+  `;
+};
+var Styled$1 = config.styled(config.component) `
+  ${false };
+
+  display: flex;
+  flex-wrap: wrap;
+  align-self: stretch;
+  flex-direction: row;
+
+  ${makeItResponsive({
+    key: '$coolgrid',
+    styles: styles$1,
+    css: config.css,
+    normalize: true,
+})};
+`;
+
+const Component$1 = ({ children, component, css, contentAlignX: rowAlignX, ...props }) => {
+    const parentCtx = useContext(ContainerContext);
+    const { columns, gap, gutter, rowComponent, rowCss, contentAlignX, ...ctx } = useGridContext({ ...parentCtx, ...props });
+    const context = useMemo(() => ({ ...ctx, columns, gap, gutter }), [ctx, columns, gap, gutter]);
+    const finalComponent = useMemo(() => component || rowComponent, [component, rowComponent]);
+    const finalProps = useMemo(() => ({
+        $coolgrid: {
+            contentAlignX: rowAlignX || contentAlignX,
+            columns,
+            gap,
+            gutter,
+            extraStyles: css || rowCss,
+        },
+    }), [rowAlignX, contentAlignX, columns, gap, gutter, css, rowCss]);
+    const getDevProps = () => {
+        const result = {};
+        if (process.env.NODE_ENV !== 'production') {
+            result['data-coolgrid'] = 'row';
+        }
+        return result;
+    };
+    return (React.createElement(Styled$1, { ...omitCtxKeys(props), as: finalComponent, ...finalProps, ...getDevProps() },
+        React.createElement(RowContext.Provider, { value: context }, children)));
+};
+const name$1 = `${PKG_NAME}/Row`;
+Component$1.displayName = name$1;
+Component$1.pkgName = PKG_NAME;
+Component$1.VITUS_LABS__COMPONENT = name$1;
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+const hasWidth = (size, columns) => hasValue(size) && hasValue(columns);
+const widthStyles = ({ size, columns, gap, RNparentWidth }, { rootSize }) => {
+    if (!hasWidth(size, columns)) {
+        return '';
+    }
+    // calculate % of width
+    const width = (RNparentWidth / columns) * size;
+    const hasGap = hasValue(gap);
+    // eslint-disable-next-line no-nested-ternary
+    const val = hasGap
+            ? width - gap
+            : width;
+    return config.css `
+      flex-grow: 0;
+      flex-shrink: 0;
+      max-width: ${value(val, rootSize)};
+      flex-basis: ${value(val, rootSize)};
+    `;
+};
+const spacingStyles = (type, param, rootSize) => {
+    if (!isNumber(param)) {
+        return '';
+    }
+    const finalStyle = `${type}: ${value(param / 2, rootSize)}`;
+    return config.css `
+      ${finalStyle};
+    `;
+};
+const styles = ({ theme, css, rootSize, }) => {
+    const { size, columns, gap, padding, extraStyles, RNparentWidth } = theme;
+    const renderStyles = isVisible(size);
+    if (renderStyles) {
+        return css `
+      left: initial;
+      position: relative;
+      ${widthStyles({ size, columns, gap, RNparentWidth }, { rootSize })};
+      ${spacingStyles('padding', padding, rootSize)};
+      ${spacingStyles('margin', gap, rootSize)};
+      ${extendCss(extraStyles)};
+    `;
+    }
+    return css `
+    left: -9999px;
+    position: fixed;
+    margin: 0;
+    padding: 0;
+  `;
+};
+var Styled = config.styled(config.component) `
+  ${false };
+
+  position: relative;
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: stretch;
+
+  ${makeItResponsive({
+    key: '$coolgrid',
+    styles,
+    css: config.css,
+    normalize: true,
+})};
+`;
+
+const Component = ({ children, component, css, ...props }) => {
+    const parentCtx = useContext(RowContext);
+    const { colCss, colComponent, columns, gap, size, padding } = useGridContext({
+        ...parentCtx,
+        ...props,
+    });
+    const finalComponent = useMemo(() => component || colComponent, [component, colComponent]);
+    const finalProps = useMemo(() => ({
+        $coolgrid: {
+            columns,
+            gap,
+            size,
+            padding,
+            extraStyles: css || colCss,
+        },
+    }), [columns, gap, size, padding, css, colCss]);
+    const getDevProps = () => {
+        const result = {};
+        if (process.env.NODE_ENV !== 'production') {
+            result['data-coolgrid'] = 'col';
+        }
+        return result;
+    };
+    return (React.createElement(Styled, { ...omitCtxKeys(props), as: finalComponent, ...finalProps, ...getDevProps() }, children));
+};
+const name = `${PKG_NAME}/Col`;
+Component.displayName = name;
+Component.pkgName = PKG_NAME;
+Component.VITUS_LABS__COMPONENT = name;
+
+var theme = {
+    rootSize: 16,
+    breakpoints: {
+        xs: 0,
+        sm: 576,
+        md: 768,
+        lg: 992,
+        xl: 1200,
+    },
+    grid: {
+        columns: 12,
+        container: {
+            xs: '100%',
+            sm: 540,
+            md: 720,
+            lg: 960,
+            xl: 1140,
+        },
+    },
+};
+
+export { Component as Col, Component$2 as Container, Component$1 as Row, theme };
+//# sourceMappingURL=vitus-labs-coolgrid.native.js.map

package/lib/vitus-labs-coolgrid.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitus-labs-coolgrid.native.js","sources":["../src/constants.ts","../src/utils.ts","../src/context/ContainerContext.ts","../src/useContext.tsx","../src/Container/styled.ts","../src/Container/component.tsx","../src/context/RowContext.ts","../src/Row/styled.ts","../src/Row/component.tsx","../src/Col/styled.ts","../src/Col/component.tsx","../src/theme.ts"],"sourcesContent":["export const PKG_NAME = '@vitus-labs/coolgrid'\n\n/* eslint-disable import/prefer-default-export */\nexport const CONTEXT_KEYS = [\n  // 'breakpoints',\n  // 'rootSize',\n  'columns',\n  'size',\n  'gap',\n  'padding',\n  'gutter',\n  'colCss',\n  'colComponent',\n  'rowCss',\n  'rowComponent',\n  'contentAlignX',\n]\n","import { omit } from '@vitus-labs/core'\nimport { CONTEXT_KEYS } from '~/constants'\n\ntype BoolFunc = (value: any) => boolean\n\nexport const isNumber: BoolFunc = (value) => Number.isFinite(value)\nexport const hasValue: BoolFunc = (value) => isNumber(value) && value > 0\nexport const isVisible: BoolFunc = (value) =>\n  (isNumber(value) && value !== 0) || value === undefined\n\ntype HasWidth = (size: any, columns: any) => boolean\nexport const hasWidth: HasWidth = (size, columns) =>\n  !!(hasValue(size) && hasValue(columns))\n\ntype OmitCtxKeys = (props?: Record<string, any>) => ReturnType<typeof omit>\nexport const omitCtxKeys: OmitCtxKeys = (props) => omit(props, CONTEXT_KEYS)\n","import { createContext } from 'react'\nimport type { Context } from '~/types'\n\nexport default createContext<Context>({})\n","import { useContext } from 'react'\nimport { get, pick } from '@vitus-labs/core'\nimport { context } from '@vitus-labs/unistyle'\nimport { CONTEXT_KEYS } from '~/constants'\nimport { Obj, ValueType, Context } from '~/types'\n\n// ------------------------------------------\n// pickTheme props\n// ------------------------------------------\nexport type PickThemeProps = <T extends Record<string, unknown>>(\n  props: T,\n  keywords: Array<keyof T>\n) => ReturnType<typeof pick>\nconst pickThemeProps: PickThemeProps = (props, keywords) =>\n  pick(props, keywords)\n\n// ------------------------------------------\n// create grid settings\n// ------------------------------------------\ntype GetGridContext = (\n  props: Obj,\n  theme: Obj\n) => {\n  columns?: ValueType\n  containerWidth?: Record<string, number>\n}\n\nexport const getGridContext: GetGridContext = (props = {}, theme = {}) => ({\n  columns: (get(props, 'columns') ||\n    get(theme, 'grid.columns') ||\n    get(theme, 'coolgrid.columns')) as ValueType,\n  containerWidth: (get(props, 'width') ||\n    get(theme, 'grid.container') ||\n    get(theme, 'coolgrid.container')) as Record<string, number>,\n})\n\ntype UseGridContext = (props: Obj) => Context\nconst useGridContext: UseGridContext = (props) => {\n  const { theme } = useContext(context)\n  const ctxProps = pickThemeProps(props, CONTEXT_KEYS)\n  const gridContext = getGridContext(ctxProps, theme as Record<string, unknown>)\n\n  return { ...gridContext, ...ctxProps }\n}\n\nexport default useGridContext\n","import { config } from '@vitus-labs/core'\nimport {\n  makeItResponsive,\n  value,\n  extendCss,\n  MakeItResponsiveStyles,\n} from '@vitus-labs/unistyle'\nimport { StyledTypes } from '~/types'\n\nconst styles: MakeItResponsiveStyles<\n  Pick<StyledTypes, 'width' | 'extraStyles'>\n> = ({ theme: t, css, rootSize }) => css`\n  max-width: ${value(t.width, rootSize)};\n  ${extendCss(t.extraStyles)};\n`\n\nexport default config.styled<any>(config.component)`\n  ${\n    __WEB__ &&\n    config.css`\n      box-sizing: border-box;\n    `\n  };\n\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  margin-right: auto;\n  margin-left: auto;\n\n  ${makeItResponsive({\n    key: '$coolgrid',\n    styles,\n    css: config.css,\n    normalize: true,\n  })};\n`\n","import React, { useMemo } from 'react'\nimport { PKG_NAME } from '~/constants'\nimport { omitCtxKeys } from '~/utils'\nimport Context from '~/context/ContainerContext'\nimport useGridContext from '~/useContext'\nimport type { ElementType } from '~/types'\nimport Styled from './styled'\n\nconst Component: ElementType<['containerWidth']> = ({\n  children,\n  component,\n  css,\n  width,\n  ...props\n}) => {\n  const { containerWidth = {}, ...ctx } = useGridContext(props)\n  const context = useMemo(() => ctx, [ctx])\n\n  let finalWidth = containerWidth\n  if (width) {\n    // @ts-ignore\n    finalWidth = typeof width === 'function' ? width(containerWidth) : width\n  }\n\n  const finalProps = useMemo(\n    () => ({\n      $coolgrid: {\n        width: finalWidth,\n        extraStyles: css,\n      },\n    }),\n    [finalWidth, css]\n  )\n\n  const getDevProps = () => {\n    const result = {}\n    if (process.env.NODE_ENV !== 'production') {\n      result['data-coolgrid'] = 'container'\n    }\n\n    return result\n  }\n\n  return (\n    <Styled\n      {...omitCtxKeys(props)}\n      as={component}\n      {...finalProps}\n      {...getDevProps()}\n    >\n      <Context.Provider value={context}>{children}</Context.Provider>\n    </Styled>\n  )\n}\n\nconst name = `${PKG_NAME}/Container`\n\nComponent.displayName = name\nComponent.pkgName = PKG_NAME\nComponent.VITUS_LABS__COMPONENT = name\n\nexport default Component\n","import { createContext } from 'react'\nimport type { Context } from '~/types'\n\nexport default createContext<Context>({})\n","/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport { config } from '@vitus-labs/core'\nimport {\n  makeItResponsive,\n  value,\n  extendCss,\n  ALIGN_CONTENT_MAP_X,\n  MakeItResponsiveStyles,\n} from '@vitus-labs/unistyle'\nimport { isNumber } from '~/utils'\nimport { CssOutput, StyledTypes } from '~/types'\n\ntype SpacingStyles = (\n  props: Pick<StyledTypes, 'gap' | 'gutter'>,\n  { rootSize }: { rootSize?: number }\n) => CssOutput\n\nconst spacingStyles: SpacingStyles = ({ gap, gutter }, { rootSize }) => {\n  if (!isNumber(gap)) return ''\n\n  const getValue = (param) => value(param, rootSize)\n\n  const spacingX = (gap! / 2) * -1\n  const spacingY = isNumber(gutter) ? gutter! - gap! / 2 : gap! / 2\n\n  return config.css`\n    margin: ${getValue(spacingY)} ${getValue(spacingX)};\n  `\n}\n\nconst contentAlign = (align?: StyledTypes['contentAlignX']) => {\n  if (!align) return ''\n\n  return config.css`\n    justify-content: ${ALIGN_CONTENT_MAP_X[align]};\n  `\n}\n\nconst styles: MakeItResponsiveStyles<\n  Pick<StyledTypes, 'gap' | 'gutter' | 'contentAlignX' | 'extraStyles'>\n> = ({ theme, css, rootSize }) => {\n  const { gap, gutter, contentAlignX, extraStyles } = theme\n\n  return css`\n    ${spacingStyles({ gap, gutter }, { rootSize })};\n    ${contentAlign(contentAlignX)};\n    ${extendCss(extraStyles)};\n  `\n}\n\nexport default config.styled<any>(config.component)`\n  ${\n    __WEB__ &&\n    config.css`\n      box-sizing: border-box;\n    `\n  };\n\n  display: flex;\n  flex-wrap: wrap;\n  align-self: stretch;\n  flex-direction: row;\n\n  ${makeItResponsive({\n    key: '$coolgrid',\n    styles,\n    css: config.css,\n    normalize: true,\n  })};\n`\n","import React, { useContext, useMemo } from 'react'\nimport { PKG_NAME } from '~/constants'\nimport { omitCtxKeys } from '~/utils'\nimport useGridContext from '~/useContext'\nimport { ContainerContext, RowContext } from '~/context'\nimport type { ElementType } from '~/types'\nimport Styled from './styled'\n\nconst Component: ElementType<\n  ['containerWidth', 'width', 'rowComponent', 'rowCss']\n> = ({ children, component, css, contentAlignX: rowAlignX, ...props }) => {\n  const parentCtx = useContext(ContainerContext)\n\n  const { columns, gap, gutter, rowComponent, rowCss, contentAlignX, ...ctx } =\n    useGridContext({ ...parentCtx, ...props })\n\n  const context = useMemo(\n    () => ({ ...ctx, columns, gap, gutter }),\n    [ctx, columns, gap, gutter]\n  )\n\n  const finalComponent = useMemo(\n    () => component || rowComponent,\n    [component, rowComponent]\n  )\n\n  const finalProps = useMemo(\n    () => ({\n      $coolgrid: {\n        contentAlignX: rowAlignX || contentAlignX,\n        columns,\n        gap,\n        gutter,\n        extraStyles: css || rowCss,\n      },\n    }),\n    [rowAlignX, contentAlignX, columns, gap, gutter, css, rowCss]\n  )\n\n  const getDevProps = () => {\n    const result = {}\n    if (process.env.NODE_ENV !== 'production') {\n      result['data-coolgrid'] = 'row'\n    }\n\n    return result\n  }\n\n  return (\n    <Styled\n      {...omitCtxKeys(props)}\n      as={finalComponent}\n      {...finalProps}\n      {...getDevProps()}\n    >\n      <RowContext.Provider value={context}>{children}</RowContext.Provider>\n    </Styled>\n  )\n}\n\nconst name = `${PKG_NAME}/Row`\n\nComponent.displayName = name\nComponent.pkgName = PKG_NAME\nComponent.VITUS_LABS__COMPONENT = name\n\nexport default Component\n","/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport { config } from '@vitus-labs/core'\nimport {\n  makeItResponsive,\n  value,\n  extendCss,\n  MakeItResponsiveStyles,\n} from '@vitus-labs/unistyle'\nimport { hasValue, isVisible, isNumber } from '~/utils'\nimport { CssOutput, StyledTypes } from '~/types'\n\ntype HasWidth = (size?: number, columns?: number) => boolean\n\nconst hasWidth: HasWidth = (size, columns) =>\n  hasValue(size) && hasValue(columns)\n\ntype WidthStyles = (\n  props: Pick<StyledTypes, 'size' | 'columns' | 'gap' | 'RNparentWidth'>,\n  defaults: { rootSize?: number }\n) => CssOutput\n\nconst widthStyles: WidthStyles = (\n  { size, columns, gap, RNparentWidth },\n  { rootSize }\n) => {\n  if (!hasWidth(size, columns)) {\n    return ''\n  }\n\n  // calculate % of width\n  const width = __WEB__\n    ? (size! / columns!) * 100\n    : (RNparentWidth / columns!) * size!\n\n  const hasGap = hasValue(gap)\n\n  // eslint-disable-next-line no-nested-ternary\n  const val = __WEB__\n    ? hasGap\n      ? `calc(${width}% - ${gap}px)`\n      : `${width}%`\n    : hasGap\n    ? width - gap!\n    : width\n\n  return config.css`\n      flex-grow: 0;\n      flex-shrink: 0;\n      max-width: ${value(val, rootSize)};\n      flex-basis: ${value(val, rootSize)};\n    `\n}\n\ntype SpacingStyles = (\n  type: 'margin' | 'padding',\n  param?: number,\n  rootSize?: number\n) => CssOutput\nconst spacingStyles: SpacingStyles = (type, param, rootSize) => {\n  if (!isNumber(param)) {\n    return ''\n  }\n\n  const finalStyle = `${type}: ${value(param! / 2, rootSize)}`\n\n  return config.css`\n      ${finalStyle};\n    `\n}\n\nconst styles: MakeItResponsiveStyles<StyledTypes> = ({\n  theme,\n  css,\n  rootSize,\n}) => {\n  const { size, columns, gap, padding, extraStyles, RNparentWidth } = theme\n  const renderStyles = isVisible(size)\n\n  if (renderStyles) {\n    return css`\n      left: initial;\n      position: relative;\n      ${widthStyles({ size, columns, gap, RNparentWidth }, { rootSize })};\n      ${spacingStyles('padding', padding, rootSize)};\n      ${spacingStyles('margin', gap, rootSize)};\n      ${extendCss(extraStyles)};\n    `\n  }\n\n  return css`\n    left: -9999px;\n    position: fixed;\n    margin: 0;\n    padding: 0;\n  `\n}\n\nexport default config.styled<any>(config.component)`\n  ${\n    __WEB__ &&\n    config.css`\n      box-sizing: border-box;\n    `\n  };\n\n  position: relative;\n  display: flex;\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-direction: column;\n  justify-content: stretch;\n\n  ${makeItResponsive({\n    key: '$coolgrid',\n    styles,\n    css: config.css,\n    normalize: true,\n  })};\n`\n","import React, { useContext, useMemo } from 'react'\nimport { PKG_NAME } from '~/constants'\nimport { omitCtxKeys } from '~/utils'\nimport useGridContext from '~/useContext'\nimport { RowContext } from '~/context'\nimport type { ElementType } from '~/types'\nimport Styled from './styled'\n\nconst Component: ElementType<\n  [\n    'containerWidth',\n    'width',\n    'rowComponent',\n    'rowCss',\n    'colCss',\n    'colComponent',\n    'columns',\n    'gap',\n    'gutter',\n    'contentAlignX'\n  ]\n> = ({ children, component, css, ...props }) => {\n  const parentCtx = useContext(RowContext)\n  const { colCss, colComponent, columns, gap, size, padding } = useGridContext({\n    ...parentCtx,\n    ...props,\n  })\n\n  const finalComponent = useMemo(\n    () => component || colComponent,\n    [component, colComponent]\n  )\n\n  const finalProps = useMemo(\n    () => ({\n      $coolgrid: {\n        columns,\n        gap,\n        size,\n        padding,\n        extraStyles: css || colCss,\n      },\n    }),\n    [columns, gap, size, padding, css, colCss]\n  )\n\n  const getDevProps = () => {\n    const result = {}\n    if (process.env.NODE_ENV !== 'production') {\n      result['data-coolgrid'] = 'col'\n    }\n\n    return result\n  }\n\n  return (\n    <Styled\n      {...omitCtxKeys(props)}\n      as={finalComponent}\n      {...finalProps}\n      {...getDevProps()}\n    >\n      {children}\n    </Styled>\n  )\n}\n\nconst name = `${PKG_NAME}/Col`\n\nComponent.displayName = name\nComponent.pkgName = PKG_NAME\nComponent.VITUS_LABS__COMPONENT = name\n\nexport default Component\n","export default {\n  rootSize: 16,\n  breakpoints: {\n    xs: 0,\n    sm: 576,\n    md: 768,\n    lg: 992,\n    xl: 1200,\n  },\n  grid: {\n    columns: 12,\n    container: {\n      xs: '100%',\n      sm: 540,\n      md: 720,\n      lg: 960,\n      xl: 1140,\n    },\n  },\n} as const\n"],"names":["styles","Component","Styled","Context","name","spacingStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/coolgrid",
-  "version": "0.76.0",
+  "version": "0.79.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -8,7 +8,7 @@
   ],
   "main": "lib/vitus-labs-coolgrid.js",
   "module": "lib/vitus-labs-coolgrid.module.js",
-  "react-native": "lib/vitus-labs-coolgrid.module.js",
+  "react-native": "lib/vitus-labs-coolgrid.native.js",
   "types": "lib/index.d.ts",
   "files": [
     "lib/"
@@ -54,12 +54,12 @@
     "react": ">= 16.8"
   },
   "devDependencies": {
-    "@vitus-labs/core": "^0.76.0",
-    "@vitus-labs/tools-babel": "^0.43.0",
-    "@vitus-labs/tools-rollup": "^0.43.0",
-    "@vitus-labs/tools-storybook": "^0.43.0",
-    "@vitus-labs/tools-typescript": "^0.43.0",
-    "@vitus-labs/unistyle": "^0.76.0"
+    "@vitus-labs/core": "^0.79.0",
+    "@vitus-labs/tools-babel": "^0.45.0",
+    "@vitus-labs/tools-rollup": "^0.45.0",
+    "@vitus-labs/tools-storybook": "^0.45.0",
+    "@vitus-labs/tools-typescript": "^0.45.0",
+    "@vitus-labs/unistyle": "^0.79.0"
   },
-  "gitHead": "183f53352a6bba2d71ea72ec3f07a8f2f96ae0df"
+  "gitHead": "dda2a8b8d07026cd6b7781721ca5b992172246ba"
 }