@mantine/core/cjs/components/AppShell/AppShellMediaStyles/get-variables/get-variables.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"get-variables.cjs","names":["getSortedBreakpoints","keys","em"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/get-variables/get-variables.ts"],"sourcesContent":["import { em, getSortedBreakpoints, keys, MantineTheme } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { assignAsideVariables } from '../assign-aside-variables/assign-aside-variables';\nimport { assignFooterVariables } from '../assign-footer-variables/assign-footer-variables';\nimport { assignHeaderVariables } from '../assign-header-variables/assign-header-variables';\nimport { assignNavbarVariables } from '../assign-navbar-variables/assign-navbar-variables';\nimport { assignPaddingVariables } from '../assign-padding-variables/assign-padding-variables';\n\nexport type CSSVariables = Record<`--${string}`, string | undefined>;\nexport type MediaQueryVariables = Record<string, Record<`--${string}`, string | undefined>>;\n\ninterface GetVariablesInput {\n  navbar: AppShellProps['navbar'] | undefined;\n  header: AppShellProps['header'] | undefined;\n  footer: AppShellProps['footer'] | undefined;\n  aside: AppShellProps['aside'] | undefined;\n  padding: AppShellProps['padding'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function getVariables({\n  navbar,\n  header,\n  footer,\n  aside,\n  padding,\n  theme,\n  mode,\n}: GetVariablesInput) {\n  const minMediaStyles: MediaQueryVariables = {};\n  const maxMediaStyles: MediaQueryVariables = {};\n  const baseStyles: CSSVariables = {};\n\n  // Set default main grid position in static mode\n  if (mode === 'static') {\n    baseStyles['--app-shell-main-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-main-grid-row'] = '2';\n  }\n\n  assignNavbarVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    navbar,\n    theme,\n    mode,\n  });\n\n  assignAsideVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    aside,\n    theme,\n    mode,\n  });\n\n  assignHeaderVariables({ baseStyles, minMediaStyles, header, mode });\n  assignFooterVariables({ baseStyles, minMediaStyles, footer, mode });\n  assignPaddingVariables({ baseStyles, minMediaStyles, padding });\n\n  const minMedia = getSortedBreakpoints(keys(minMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(min-width: ${em(breakpoint.px)})`,\n      styles: minMediaStyles[breakpoint.value],\n    })\n  );\n\n  const maxMedia = getSortedBreakpoints(keys(maxMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(max-width: ${em(breakpoint.px)})`,\n      styles: maxMediaStyles[breakpoint.value],\n    })\n  );\n\n  const media = [...minMedia, ...maxMedia];\n\n  return { baseStyles, media };\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAgB,aAAa,EAC3B,QACA,QACA,QACA,OACA,SACA,OACA,QACoB;CACpB,MAAM,iBAAsC,CAAC;CAC7C,MAAM,iBAAsC,CAAC;CAC7C,MAAM,aAA2B,CAAC;CAGlC,IAAI,SAAS,UAAU;EACrB,WAAW,kCAAkC;EAC7C,WAAW,+BAA+B;CAC5C;CAEA,gCAAA,sBAAsB;EACpB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,+BAAA,qBAAqB;EACnB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gCAAA,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,gCAAA,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,iCAAA,uBAAuB;EAAE;EAAY;EAAgB;CAAQ,CAAC;CAE9D,MAAM,WAAWA,+BAAAA,qBAAqBC,aAAAA,KAAK,cAAc,GAAG,MAAM,WAAW,EAAE,KAC5E,gBAAgB;EACf,OAAO,eAAeC,YAAAA,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAEA,MAAM,WAAWF,+BAAAA,qBAAqBC,aAAAA,KAAK,cAAc,GAAG,MAAM,WAAW,EAAE,KAC5E,gBAAgB;EACf,OAAO,eAAeC,YAAAA,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAIA,OAAO;EAAE;EAAY,OAAA,CAFN,GAAG,UAAU,GAAG,QAEN;CAAE;AAC7B"}