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

React based design system for UNDP

{"version":3,"file":"Banner.cjs","names":[],"sources":["../src/components/ui/banner.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst bannerVariants = cva('', {\n  variants: {\n    backgroundColor: {\n      transparent: 'bg-transparent text-content-primary',\n      background: 'bg-background text-content-primary',\n      'background-soft': 'bg-background-soft text-content-primary',\n      foreground: 'bg-foreground text-content-reverse',\n      'foreground-soft': 'bg-foreground-soft text-content-reverse',\n      primary: 'bg-primary text-content-reverse',\n      secondary: 'bg-secondary text-content-reverse',\n      tertiary: 'bg-tertiary text-content-reverse',\n      quaternary: 'bg-quaternary text-content-primary',\n      success: 'bg-success text-content-reverse',\n      warning: 'bg-warning text-content-reverse',\n      info: 'bg-info text-content-reverse',\n      error: 'bg-error text-content-reverse',\n    },\n    padding: {\n      none: 'py-24 px-0',\n      '2xs': 'py-24 px-1',\n      xs: 'py-24 px-2',\n      sm: 'py-24 px-3',\n      base: 'py-24 px-4',\n      lg: 'py-24 px-5',\n      xl: 'py-24 px-6',\n      '2xl': 'py-24 px-8',\n      '3xl': 'py-24 px-10',\n    },\n  },\n  defaultVariants: {\n    backgroundColor: 'transparent',\n    padding: 'base',\n  },\n});\n\nconst bodyVariants = cva('flex flex-row items-stretch flex-wrap w-full', {\n  variants: {\n    bodyMaxWidth: {\n      xs: 'max-w-[1024px] mx-auto',\n      sm: 'max-w-[1272px] mx-auto',\n      base: 'max-w-[1440px] mx-auto',\n      lg: 'max-w-[1600px] mx-auto',\n      xl: 'max-w-[1980px] mx-auto',\n      full: 'max-w-none',\n    },\n    bodyGap: {\n      none: 'gap-0',\n      '2xs': 'gap-1',\n      xs: 'gap-2',\n      sm: 'gap-3',\n      base: 'gap-4',\n      lg: 'gap-5',\n      xl: 'gap-6',\n      '2xl': 'gap-7',\n      '3xl': 'gap-8',\n    },\n  },\n  defaultVariants: {\n    bodyGap: 'base',\n    bodyMaxWidth: 'full',\n  },\n});\n\nconst sidebarVariants = cva('w-full', {\n  variants: {\n    sidebarWidth: {\n      sm: 'sm:w-1/4',\n      base: 'sm:w-1/3',\n      lg: 'sm:w-1/2',\n      full: '',\n    },\n  },\n  defaultVariants: { sidebarWidth: 'base' },\n});\n\nconst BannerContext = React.createContext<{\n  backgroundColor:\n    | 'transparent'\n    | 'background'\n    | 'background-soft'\n    | 'foreground'\n    | 'foreground-soft'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'quaternary'\n    | 'success'\n    | 'warning'\n    | 'info'\n    | 'error'\n    | null\n    | undefined;\n  padding: 'none' | '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | null | undefined;\n  bodyMaxWidth: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'full' | null | undefined;\n  bodyGap: 'none' | '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | null | undefined;\n  sidebarWidth: 'sm' | 'base' | 'lg' | 'full' | null | undefined;\n} | null>(null);\n\nconst Banner = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> &\n    VariantProps<typeof bannerVariants> &\n    VariantProps<typeof bodyVariants> &\n    VariantProps<typeof sidebarVariants>\n>(({ className, backgroundColor, sidebarWidth, bodyGap, bodyMaxWidth, padding, ...props }, ref) => {\n  const contextValue = React.useMemo(\n    () => ({\n      backgroundColor,\n      sidebarWidth,\n      bodyGap,\n      bodyMaxWidth,\n      padding,\n    }),\n    [backgroundColor, sidebarWidth, bodyGap, bodyMaxWidth, padding],\n  );\n  return (\n    <BannerContext.Provider value={contextValue}>\n      <div\n        {...props}\n        className={cn(\n          bannerVariants({\n            backgroundColor,\n            padding,\n          }),\n          className,\n        )}\n        ref={ref}\n      />\n    </BannerContext.Provider>\n  );\n});\nBanner.displayName = 'Banner';\n\nconst BannerBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const context = React.useContext(BannerContext);\n    return (\n      <div\n        {...props}\n        className={cn(\n          bodyVariants({\n            bodyMaxWidth: context?.bodyMaxWidth,\n            bodyGap: context?.bodyGap,\n          }),\n          className,\n        )}\n        ref={ref}\n      />\n    );\n  },\n);\nBannerBody.displayName = 'BannerBody';\n\nconst BannerBodySidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const context = React.useContext(BannerContext);\n    return (\n      <div\n        {...props}\n        className={cn(sidebarVariants({ sidebarWidth: context?.sidebarWidth }), className)}\n        ref={ref}\n      />\n    );\n  },\n);\nBannerBodySidebar.displayName = 'BannerBodySidebar';\n\nconst BannerBodyContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    return <div {...props} className={cn('flex-1', className)} ref={ref} />;\n  },\n);\nBannerBodyContent.displayName = 'BannerBodyContent';\n\nexport { Banner, BannerBody, BannerBodyContent, BannerBodySidebar };\n"],"mappings":"8PAKA,IAAM,EAAiB,EAAA,EAAI,GAAI,CAC7B,SAAU,CACR,gBAAiB,CACf,YAAa,sCACb,WAAY,qCACZ,kBAAmB,0CACnB,WAAY,qCACZ,kBAAmB,0CACnB,QAAS,kCACT,UAAW,oCACX,SAAU,mCACV,WAAY,qCACZ,QAAS,kCACT,QAAS,kCACT,KAAM,+BACN,MAAO,+BACT,EACA,QAAS,CACP,KAAM,aACN,MAAO,aACP,GAAI,aACJ,GAAI,aACJ,KAAM,aACN,GAAI,aACJ,GAAI,aACJ,MAAO,aACP,MAAO,aACT,CACF,EACA,gBAAiB,CACf,gBAAiB,cACjB,QAAS,MACX,CACF,CAAC,EAEK,EAAe,EAAA,EAAI,+CAAgD,CACvE,SAAU,CACR,aAAc,CACZ,GAAI,yBACJ,GAAI,yBACJ,KAAM,yBACN,GAAI,yBACJ,GAAI,yBACJ,KAAM,YACR,EACA,QAAS,CACP,KAAM,QACN,MAAO,QACP,GAAI,QACJ,GAAI,QACJ,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,MAAO,QACP,MAAO,OACT,CACF,EACA,gBAAiB,CACf,QAAS,OACT,aAAc,MAChB,CACF,CAAC,EAEK,EAAkB,EAAA,EAAI,SAAU,CACpC,SAAU,CACR,aAAc,CACZ,GAAI,WACJ,KAAM,WACN,GAAI,WACJ,KAAM,EACR,CACF,EACA,gBAAiB,CAAE,aAAc,MAAO,CAC1C,CAAC,EAEK,EAAgB,EAAA,QAAM,cAqBlB,IAAI,EAER,EAAS,EAAA,QAAM,YAMlB,CAAE,YAAW,kBAAiB,eAAc,UAAS,eAAc,UAAS,GAAG,GAAS,IAAQ,CACjG,IAAM,EAAe,EAAA,QAAM,aAClB,CACL,kBACA,eACA,UACA,eACA,SACF,GACA,CAAC,EAAiB,EAAc,EAAS,EAAc,CAAO,CAChE,EACA,OACE,EAAA,EAAA,IAAA,CAAC,EAAc,SAAf,CAAwB,MAAO,YAC7B,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAA,EACT,EAAe,CACb,kBACA,SACF,CAAC,EACD,CACF,EACK,KACN,CAAA,CACqB,CAAA,CAE5B,CAAC,EACD,EAAO,YAAc,SAErB,IAAM,EAAa,EAAA,QAAM,YACtB,CAAE,YAAW,GAAG,GAAS,IAAQ,CAChC,IAAM,EAAU,EAAA,QAAM,WAAW,CAAa,EAC9C,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAA,EACT,EAAa,CACX,aAAc,GAAS,aACvB,QAAS,GAAS,OACpB,CAAC,EACD,CACF,EACK,KACN,CAAA,CAEL,CACF,EACA,EAAW,YAAc,aAEzB,IAAM,EAAoB,EAAA,QAAM,YAC7B,CAAE,YAAW,GAAG,GAAS,IAAQ,CAChC,IAAM,EAAU,EAAA,QAAM,WAAW,CAAa,EAC9C,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAA,EAAG,EAAgB,CAAE,aAAc,GAAS,YAAa,CAAC,EAAG,CAAS,EAC5E,KACN,CAAA,CAEL,CACF,EACA,EAAkB,YAAc,oBAEhC,IAAM,EAAoB,EAAA,QAAM,YAC7B,CAAE,YAAW,GAAG,GAAS,KACjB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,GAAI,EAAO,UAAW,EAAA,EAAG,SAAU,CAAS,EAAQ,KAAM,CAAA,CAE1E,EACA,EAAkB,YAAc"}