@chakra-ui/layout/dist/chunk-NEK3OOAM.mjs.map

Chakra UI layout components that give you massive speed

{"version":3,"sources":["../src/simple-grid.tsx"],"sourcesContent":["import {\n  forwardRef,\n  getToken,\n  ResponsiveValue,\n  useTheme,\n} from \"@chakra-ui/system\"\nimport { mapResponsive } from \"@chakra-ui/breakpoint-utils\"\nimport { Grid, GridProps } from \"./grid\"\n\ninterface SimpleGridOptions {\n  /**\n   * The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.\n   */\n  minChildWidth?: GridProps[\"minWidth\"]\n  /**\n   * The number of columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * The gap between the grid items\n   */\n  spacing?: GridProps[\"gridGap\"]\n  /**\n   * The column gap between the grid items\n   */\n  spacingX?: GridProps[\"gridGap\"]\n  /**\n   * The row gap between the grid items\n   */\n  spacingY?: GridProps[\"gridGap\"]\n}\n\nexport interface SimpleGridProps extends GridProps, SimpleGridOptions {}\n\n/**\n * SimpleGrid\n *\n * React component that uses the `Grid` component and provides\n * a simpler interface to create responsive grid layouts.\n *\n * Provides props that easily define columns and spacing.\n *\n * @see Docs https://chakra-ui.com/simplegrid\n */\nexport const SimpleGrid = forwardRef<SimpleGridProps, \"div\">(\n  function SimpleGrid(props, ref) {\n    const { columns, spacingX, spacingY, spacing, minChildWidth, ...rest } =\n      props\n\n    const theme = useTheme()\n    const templateColumns = minChildWidth\n      ? widthToColumns(minChildWidth, theme)\n      : countToColumns(columns)\n\n    return (\n      <Grid\n        ref={ref}\n        gap={spacing}\n        columnGap={spacingX}\n        rowGap={spacingY}\n        templateColumns={templateColumns}\n        {...rest}\n      />\n    )\n  },\n)\n\nSimpleGrid.displayName = \"SimpleGrid\"\n\nfunction toPx(n: string | number) {\n  return typeof n === \"number\" ? `${n}px` : n\n}\n\nfunction widthToColumns(width: any, theme: Record<string, any>) {\n  return mapResponsive(width, (value) => {\n    const _value = getToken(\"sizes\", value, toPx(value))(theme)\n    return value === null ? null : `repeat(auto-fit, minmax(${_value}, 1fr))`\n  })\n}\n\nfunction countToColumns(count: any) {\n  return mapResponsive(count, (value) =>\n    value === null ? null : `repeat(${value}, minmax(0, 1fr))`,\n  )\n}\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,qBAAqB;AAiDxB;AAXC,IAAM,aAAa;AAAA,EACxB,SAASA,YAAW,OAAO,KAAK;AAC9B,UAAM,EAAE,SAAS,UAAU,UAAU,SAAS,eAAe,GAAG,KAAK,IACnE;AAEF,UAAM,QAAQ,SAAS;AACvB,UAAM,kBAAkB,gBACpB,eAAe,eAAe,KAAK,IACnC,eAAe,OAAO;AAE1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,WAAW;AAAA,QACX,QAAQ;AAAA,QACR;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,SAAS,KAAK,GAAoB;AAChC,SAAO,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAC5C;AAEA,SAAS,eAAe,OAAY,OAA4B;AAC9D,SAAO,cAAc,OAAO,CAAC,UAAU;AACrC,UAAM,SAAS,SAAS,SAAS,OAAO,KAAK,KAAK,CAAC,EAAE,KAAK;AAC1D,WAAO,UAAU,OAAO,OAAO,2BAA2B,MAAM;AAAA,EAClE,CAAC;AACH;AAEA,SAAS,eAAe,OAAY;AAClC,SAAO;AAAA,IAAc;AAAA,IAAO,CAAC,UAC3B,UAAU,OAAO,OAAO,UAAU,KAAK;AAAA,EACzC;AACF;","names":["SimpleGrid"]}