@undp/design-system-react/dist/Grid.cjs.map

React based design system for UNDP

{"version":3,"file":"Grid.cjs","names":[],"sources":["../src/components/ui/grid.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype ResponsiveValue = {\n  base?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n  '2xl'?: number;\n};\n\ninterface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  noOfCol?: number | ResponsiveValue;\n  gap?: string;\n}\n\nconst gridColsMap: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n  4: 'grid-cols-4',\n  5: 'grid-cols-5',\n  6: 'grid-cols-6',\n  7: 'grid-cols-7',\n  8: 'grid-cols-8',\n  9: 'grid-cols-9',\n  10: 'grid-cols-10',\n  11: 'grid-cols-11',\n  12: 'grid-cols-12',\n};\n\nconst gridColsSmMap: Record<number, string> = {\n  1: 'sm:grid-cols-1',\n  2: 'sm:grid-cols-2',\n  3: 'sm:grid-cols-3',\n  4: 'sm:grid-cols-4',\n  5: 'sm:grid-cols-5',\n  6: 'sm:grid-cols-6',\n  7: 'sm:grid-cols-7',\n  8: 'sm:grid-cols-8',\n  9: 'sm:grid-cols-9',\n  10: 'sm:grid-cols-10',\n  11: 'sm:grid-cols-11',\n  12: 'sm:grid-cols-12',\n};\n\nconst gridColsMdMap: Record<number, string> = {\n  1: 'md:grid-cols-1',\n  2: 'md:grid-cols-2',\n  3: 'md:grid-cols-3',\n  4: 'md:grid-cols-4',\n  5: 'md:grid-cols-5',\n  6: 'md:grid-cols-6',\n  7: 'md:grid-cols-7',\n  8: 'md:grid-cols-8',\n  9: 'md:grid-cols-9',\n  10: 'md:grid-cols-10',\n  11: 'md:grid-cols-11',\n  12: 'md:grid-cols-12',\n};\n\nconst gridColsLgMap: Record<number, string> = {\n  1: 'lg:grid-cols-1',\n  2: 'lg:grid-cols-2',\n  3: 'lg:grid-cols-3',\n  4: 'lg:grid-cols-4',\n  5: 'lg:grid-cols-5',\n  6: 'lg:grid-cols-6',\n  7: 'lg:grid-cols-7',\n  8: 'lg:grid-cols-8',\n  9: 'lg:grid-cols-9',\n  10: 'lg:grid-cols-10',\n  11: 'lg:grid-cols-11',\n  12: 'lg:grid-cols-12',\n};\n\nconst gridColsXlMap: Record<number, string> = {\n  1: 'xl:grid-cols-1',\n  2: 'xl:grid-cols-2',\n  3: 'xl:grid-cols-3',\n  4: 'xl:grid-cols-4',\n  5: 'xl:grid-cols-5',\n  6: 'xl:grid-cols-6',\n  7: 'xl:grid-cols-7',\n  8: 'xl:grid-cols-8',\n  9: 'xl:grid-cols-9',\n  10: 'xl:grid-cols-10',\n  11: 'xl:grid-cols-11',\n  12: 'xl:grid-cols-12',\n};\n\nconst gridCols2xlMap: Record<number, string> = {\n  1: '2xl:grid-cols-1',\n  2: '2xl:grid-cols-2',\n  3: '2xl:grid-cols-3',\n  4: '2xl:grid-cols-4',\n  5: '2xl:grid-cols-5',\n  6: '2xl:grid-cols-6',\n  7: '2xl:grid-cols-7',\n  8: '2xl:grid-cols-8',\n  9: '2xl:grid-cols-9',\n  10: '2xl:grid-cols-10',\n  11: '2xl:grid-cols-11',\n  12: '2xl:grid-cols-12',\n};\n\nconst colSpanMap: Record<number, string> = {\n  1: 'col-span-1',\n  2: 'col-span-2',\n  3: 'col-span-3',\n  4: 'col-span-4',\n  5: 'col-span-5',\n  6: 'col-span-6',\n  7: 'col-span-7',\n  8: 'col-span-8',\n  9: 'col-span-9',\n  10: 'col-span-10',\n  11: 'col-span-11',\n  12: 'col-span-12',\n};\n\nconst colSpanSmMap: Record<number, string> = {\n  1: 'sm:col-span-1',\n  2: 'sm:col-span-2',\n  3: 'sm:col-span-3',\n  4: 'sm:col-span-4',\n  5: 'sm:col-span-5',\n  6: 'sm:col-span-6',\n  7: 'sm:col-span-7',\n  8: 'sm:col-span-8',\n  9: 'sm:col-span-9',\n  10: 'sm:col-span-10',\n  11: 'sm:col-span-11',\n  12: 'sm:col-span-12',\n};\n\nconst colSpanMdMap: Record<number, string> = {\n  1: 'md:col-span-1',\n  2: 'md:col-span-2',\n  3: 'md:col-span-3',\n  4: 'md:col-span-4',\n  5: 'md:col-span-5',\n  6: 'md:col-span-6',\n  7: 'md:col-span-7',\n  8: 'md:col-span-8',\n  9: 'md:col-span-9',\n  10: 'md:col-span-10',\n  11: 'md:col-span-11',\n  12: 'md:col-span-12',\n};\n\nconst colSpanLgMap: Record<number, string> = {\n  1: 'lg:col-span-1',\n  2: 'lg:col-span-2',\n  3: 'lg:col-span-3',\n  4: 'lg:col-span-4',\n  5: 'lg:col-span-5',\n  6: 'lg:col-span-6',\n  7: 'lg:col-span-7',\n  8: 'lg:col-span-8',\n  9: 'lg:col-span-9',\n  10: 'lg:col-span-10',\n  11: 'lg:col-span-11',\n  12: 'lg:col-span-12',\n};\n\nconst colSpanXlMap: Record<number, string> = {\n  1: 'xl:col-span-1',\n  2: 'xl:col-span-2',\n  3: 'xl:col-span-3',\n  4: 'xl:col-span-4',\n  5: 'xl:col-span-5',\n  6: 'xl:col-span-6',\n  7: 'xl:col-span-7',\n  8: 'xl:col-span-8',\n  9: 'xl:col-span-9',\n  10: 'xl:col-span-10',\n  11: 'xl:col-span-11',\n  12: 'xl:col-span-12',\n};\n\nconst colSpan2xlMap: Record<number, string> = {\n  1: '2xl:col-span-1',\n  2: '2xl:col-span-2',\n  3: '2xl:col-span-3',\n  4: '2xl:col-span-4',\n  5: '2xl:col-span-5',\n  6: '2xl:col-span-6',\n  7: '2xl:col-span-7',\n  8: '2xl:col-span-8',\n  9: '2xl:col-span-9',\n  10: '2xl:col-span-10',\n  11: '2xl:col-span-11',\n  12: '2xl:col-span-12',\n};\n\nconst resolveResponsiveClasses = (\n  value: number | ResponsiveValue | undefined,\n  maps: {\n    base: Record<number, string>;\n    sm: Record<number, string>;\n    md: Record<number, string>;\n    lg: Record<number, string>;\n    xl: Record<number, string>;\n    '2xl': Record<number, string>;\n  },\n) => {\n  if (value === undefined) return undefined;\n\n  if (typeof value === 'number') {\n    return maps.base[value];\n  }\n\n  return cn(\n    value.base !== undefined && maps.base[value.base],\n    value.sm !== undefined && maps.sm[value.sm],\n    value.md !== undefined && maps.md[value.md],\n    value.lg !== undefined && maps.lg[value.lg],\n    value.xl !== undefined && maps.xl[value.xl],\n    value['2xl'] !== undefined && maps['2xl'][value['2xl']],\n  );\n};\n\nconst gridColsMaps = {\n  base: gridColsMap,\n  sm: gridColsSmMap,\n  md: gridColsMdMap,\n  lg: gridColsLgMap,\n  xl: gridColsXlMap,\n  '2xl': gridCols2xlMap,\n};\n\nconst colSpanMaps = {\n  base: colSpanMap,\n  sm: colSpanSmMap,\n  md: colSpanMdMap,\n  lg: colSpanLgMap,\n  xl: colSpanXlMap,\n  '2xl': colSpan2xlMap,\n};\n\nconst Grid = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & GridProps>(\n  ({ className, noOfCol = { base: 1, sm: 2, md: 3 }, gap = '16px', style, ...props }, ref) => {\n    return (\n      <div\n        className={cn(\n          'grid items-stretch',\n          resolveResponsiveClasses(noOfCol, gridColsMaps),\n          className,\n        )}\n        ref={ref}\n        style={{ gap, ...style }}\n        {...props}\n      />\n    );\n  },\n);\nGrid.displayName = 'Grid';\n\ninterface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  noOfColSpan?:\n    | number\n    | {\n        base?: number;\n        sm?: number;\n        md?: number;\n        lg?: number;\n        xl?: number;\n        '2xl'?: number;\n      };\n}\nconst GridItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & GridItemProps\n>(({ noOfColSpan = { base: 1, sm: 1, md: 1 }, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(resolveResponsiveClasses(noOfColSpan, colSpanMaps), className)}\n      {...props}\n    />\n  );\n});\nGridItem.displayName = 'GridItem';\n\nexport { Grid, GridItem };\n"],"mappings":"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"}