@persona/design-system 0.8.1 → 0.9.0

package/dist/patterns/PageLayout/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../patterns/PageLayout/PageLayout.tsx","../../../patterns/PageLayout/PageLayoutFrame.tsx","../../../patterns/PageLayout/SingleColumnLayout.tsx","../../../patterns/PageLayout/SplitColumnLayout.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Backdrop = styled.div`\n  position: relative;\n  width: 100%;\n  padding: ${Spacing[7]} ${Spacing[5]};\n\n  display: flex;\n  flex-direction: column;\n`;\n\nconst StyledContainer = styled('div')`\n  position: relative;\n  width: 100%;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const Container = ({\n  children,\n  ...rest\n}: { children: ReactNode } & ComponentPropsWithoutRef<'div'>) => {\n  return <StyledContainer {...rest}>{children}</StyledContainer>;\n};\n\nexport const Section = styled('div')`\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Grid, { GRID_BREAKPOINTS, GridItem } from 'design-system/components/Grid';\nimport { Stack } from 'design-system/components/Stack';\n\nexport type PageLayoutWidth = 'standard' | 'wide';\n\nexport interface PageLayoutChromeProps {\n  /**\n   * `standard` uses the fixed grid (centered, max 1408px). `wide` uses the fluid grid.\n   *\n   * @defaultValue 'standard'\n   */\n  width?: PageLayoutWidth;\n  /** Tab group. Sits above the page notice and scrolls with the page. Omit to skip the region and its gap. */\n  tabs?: ReactNode;\n  /** Page notice under the tabs. Omit to skip the region and its gap. */\n  pageNotice?: ReactNode;\n}\n\nconst topPadding = (condensed: boolean) => (condensed ? Spacing[5] : Spacing[6]);\n\nconst Root = styled.div<{ $condensed: boolean; $tabs: boolean }>`\n  width: 100%;\n  min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n  padding-top: ${({ $condensed, $tabs }) => ($tabs ? Spacing[5] : topPadding($condensed))};\n  padding-bottom: ${({ $condensed }) => topPadding($condensed)};\n`;\n\nconst gridMode = (width: PageLayoutWidth): 'fixed' | 'fluid' =>\n  width === 'wide' ? 'fluid' : 'fixed';\n\nconst FullWidthBand = ({ mode, children }: { mode: 'fixed' | 'fluid'; children: ReactNode }) => (\n  <Grid mode={mode}>\n    <GridItem span={12}>{children}</GridItem>\n  </Grid>\n);\n\nexport const PageLayoutFrame = ({\n  width = 'standard',\n  tabs,\n  pageNotice,\n  children,\n}: PageLayoutChromeProps & { children: ReactNode }) => {\n  const mode = gridMode(width);\n  const ref = useRef<HTMLDivElement>(null);\n  const [condensed, setCondensed] = useState(false);\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n    const update = () => setCondensed(node.offsetWidth < GRID_BREAKPOINTS.md);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Root ref={ref} $condensed={condensed} $tabs={Boolean(tabs)}>\n      <Stack spacing={Spacing[5]}>\n        {tabs && <FullWidthBand mode={mode}>{tabs}</FullWidthBand>}\n        {pageNotice && <FullWidthBand mode={mode}>{pageNotice}</FullWidthBand>}\n        <Grid mode={mode}>{children}</Grid>\n      </Stack>\n    </Root>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { GridItem } from 'design-system/components/Grid';\nimport { Stack } from 'design-system/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nexport interface SingleColumnLayoutProps extends PageLayoutChromeProps {\n  /** Primary page content. Direct children stack vertically. */\n  main: ReactNode;\n}\n\nexport const SingleColumnLayout = ({ main, ...chrome }: SingleColumnLayoutProps) => (\n  <PageLayoutFrame {...chrome}>\n    <GridItem span={12}>\n      <Stack spacing={Spacing[4]}>{main}</Stack>\n    </GridItem>\n  </PageLayoutFrame>\n);\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { GridItem, type GridSpan, useGridBreakpoint } from 'design-system/components/Grid';\nimport { Stack } from 'design-system/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nconst SPLIT_COLUMN_SPANS = { main: 8, aside: 4 } as const satisfies Record<string, GridSpan>;\n\nexport interface SplitColumnLayoutProps extends PageLayoutChromeProps {\n  /** Primary column. Direct children stack vertically and stay in this column. */\n  main: ReactNode;\n  /** Supporting column. Direct children stack vertically and stay in this column. */\n  aside: ReactNode;\n}\n\nconst Region = ({ children }: { children: ReactNode }) => (\n  <Stack spacing={Spacing[4]}>{children}</Stack>\n);\n\nconst SplitBody = ({ main, aside }: { main: ReactNode; aside: ReactNode }) => {\n  const stacked = useGridBreakpoint() === 'xs';\n  const mainSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.main;\n  const asideSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.aside;\n\n  return (\n    <>\n      <GridItem span={mainSpan}>\n        <Region>{main}</Region>\n      </GridItem>\n      <GridItem span={asideSpan}>\n        <aside>\n          <Region>{aside}</Region>\n        </aside>\n      </GridItem>\n    </>\n  );\n};\n\nexport const SplitColumnLayout = ({ main, aside, ...chrome }: SplitColumnLayoutProps) => (\n  <PageLayoutFrame {...chrome}>\n    <SplitBody main={main} aside={aside} />\n  </PageLayoutFrame>\n);\n"],"mappings":";;;;;;;AAKA,MAAa,WAAW,OAAO,GAAG;;;aAGrB,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;;;AAMtC,MAAM,kBAAkB,OAAO,MAAM;;;;;;;;;AAUrC,MAAa,aAAa,EACxB,UACA,GAAG,WAC4D;AAC/D,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO;EAA2B,CAAA;;AAGhE,MAAa,UAAU,OAAO,MAAM;;aAEvB,QAAQ,GAAG;;;;ACXxB,MAAM,cAAc,cAAwB,YAAY,QAAQ,KAAK,QAAQ;AAE7E,MAAM,OAAO,OAAO,GAA4C;;eAEjD,iBAAiB,KAAK,EAAE;kBACrB,EAAE,YAAY,YAAa,QAAQ,QAAQ,KAAK,WAAW,WAAW,CAAE;qBACrE,EAAE,iBAAiB,WAAW,WAAW,CAAC;;AAG/D,MAAM,YAAY,UAChB,UAAU,SAAS,UAAU;AAE/B,MAAM,iBAAiB,EAAE,MAAM,eAC7B,oBAAC,MAAD;CAAY;WACV,oBAAC,UAAD;EAAU,MAAM;EAAK;EAAoB,CAAA;CACpC,CAAA;AAGT,MAAa,mBAAmB,EAC9B,QAAQ,YACR,MACA,YACA,eACqD;CACrD,MAAM,OAAO,SAAS,MAAM;CAC5B,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,aAAa,KAAK,cAAc,iBAAiB,GAAG;AACzE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;AAEN,QACE,oBAAC,MAAD;EAAW;EAAK,YAAY;EAAW,OAAO,QAAQ,KAAK;YACzD,qBAAC,OAAD;GAAO,SAAS,QAAQ;aAAxB;IACG,QAAQ,oBAAC,eAAD;KAAqB;eAAO;KAAqB,CAAA;IACzD,cAAc,oBAAC,eAAD;KAAqB;eAAO;KAA2B,CAAA;IACtE,oBAAC,MAAD;KAAY;KAAO;KAAgB,CAAA;IAC7B;;EACH,CAAA;;;;ACxDX,MAAa,sBAAsB,EAAE,MAAM,GAAG,aAC5C,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,OAAD;GAAO,SAAS,QAAQ;aAAK;GAAa,CAAA;EACjC,CAAA;CACK,CAAA;;;ACVpB,MAAM,qBAAqB;CAAE,MAAM;CAAG,OAAO;CAAG;AAShD,MAAM,UAAU,EAAE,eAChB,oBAAC,OAAD;CAAO,SAAS,QAAQ;CAAK;CAAiB,CAAA;AAGhD,MAAM,aAAa,EAAE,MAAM,YAAmD;CAC5E,MAAM,UAAU,mBAAmB,KAAK;CACxC,MAAM,WAAW,UAAU,KAAK,mBAAmB;CACnD,MAAM,YAAY,UAAU,KAAK,mBAAmB;AAEpD,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,QAAD,EAAA,UAAS,MAAc,CAAA;EACd,CAAA,EACX,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,SAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAS,OAAe,CAAA,EAClB,CAAA;EACC,CAAA,CACV,EAAA,CAAA;;AAIP,MAAa,qBAAqB,EAAE,MAAM,OAAO,GAAG,aAClD,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,WAAD;EAAiB;EAAa;EAAS,CAAA;CACvB,CAAA"}