@saas-ui/layout/dist/index.modern.mjs.map

Saas UI Layout components for Chakra UI

{"version":3,"file":"index.modern.mjs","sources":["../src/divider.tsx","../src/empty-state.tsx","../src/loader.tsx","../src/link.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  chakra,\n  useStyleConfig,\n  Divider as ChakraDivider,\n  DividerProps as ChakraDividerProps,\n  SystemStyleObject,\n} from '@chakra-ui/react'\nimport { __DEV__ } from '@chakra-ui/utils'\n\nexport interface DividerProps extends ChakraDividerProps {\n  label?: string\n}\n\nexport const Divider: React.FC<DividerProps> = (props) => {\n  const { label, orientation, ...rest } = props\n  const styles = useStyleConfig('Divider', props)\n\n  // @todo properly fix typings.\n  const borderColor: any = styles.borderColor\n\n  const lineHorizontal: SystemStyleObject = {\n    borderBottomWidth: '1px',\n    borderColor,\n    width: '50%',\n    top: '50%',\n  }\n\n  const lineVertical: SystemStyleObject = {\n    borderLeftWidth: '1px',\n    borderColor,\n    height: '50%',\n    left: -'50%',\n  }\n\n  const line: SystemStyleObject = {\n    content: '\"\"',\n    position: 'relative',\n    display: 'inline-block',\n    ...(orientation === 'vertical' ? lineVertical : lineHorizontal),\n  }\n\n  const dividerStyles: SystemStyleObject = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    alignItems: 'center',\n    whiteSpace: 'nowrap',\n    color: borderColor,\n    _before: line,\n    _after: line,\n    fontSize: 'md',\n    ...styles,\n    border: 0,\n    borderLeftWidth: 0,\n    borderBottomWidth: 0,\n  }\n\n  const labelStyles: SystemStyleObject = {\n    display: 'inline-block',\n    flexShrink: 0,\n    mx: 2,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    ...(orientation === 'vertical'\n      ? {\n          writingMode: 'vertical-rl',\n          textOrientation: 'mixed',\n        }\n      : {}),\n  }\n\n  return (\n    <ChakraDivider\n      as={label || orientation === 'vertical' ? 'div' : 'hr'}\n      orientation={orientation}\n      role=\"separator\"\n      {...rest}\n      __css={dividerStyles}\n    >\n      {label && <chakra.span __css={labelStyles}>{label}</chakra.span>}\n    </ChakraDivider>\n  )\n}\n\nif (__DEV__) {\n  Divider.displayName = 'Divider'\n}\n","import * as React from 'react'\nimport {\n  forwardRef,\n  Heading,\n  Text,\n  Icon,\n  chakra,\n  As,\n  ThemingProps,\n  omitThemingProps,\n  useMultiStyleConfig,\n  ButtonGroup,\n  IconProps,\n  SystemProps,\n  SystemStyleObject,\n  HTMLChakraProps,\n  HeadingProps,\n  TextProps,\n  ButtonGroupProps,\n  createStylesContext,\n} from '@chakra-ui/react'\n\nimport { cx, __DEV__ } from '@chakra-ui/utils'\n\nconst [StylesProvider, useStyles] = createStylesContext('EmptyState')\n\nexport interface EmptyStateProps\n  extends Omit<EmptyStateContainerProps, 'title'> {\n  title?: React.ReactNode\n  description?: React.ReactNode\n  icon?: As<any>\n  actions?: React.ReactNode\n  footer?: React.ReactNode\n  children?: React.ReactNode\n  spacing?: SystemProps['margin']\n}\n\nexport const EmptyState: React.FC<EmptyStateProps> = (props) => {\n  const {\n    children,\n    spacing,\n    icon,\n    title,\n    description,\n    actions,\n    footer,\n    ...rest\n  } = props\n\n  return (\n    <EmptyStateContainer {...rest}>\n      <EmptyStateBody spacing={spacing}>\n        {icon && <EmptyStateIcon as={icon} />}\n        <chakra.div>\n          {title && <EmptyStateTitle>{title}</EmptyStateTitle>}\n          {description && (\n            <EmptyStateDescription>{description}</EmptyStateDescription>\n          )}\n        </chakra.div>\n        {children}\n\n        {actions && <EmptyStateActions>{actions}</EmptyStateActions>}\n        {footer && <EmptyStateFooter>{footer}</EmptyStateFooter>}\n      </EmptyStateBody>\n    </EmptyStateContainer>\n  )\n}\n\nif (__DEV__) {\n  EmptyState.displayName = 'EmptyState'\n}\n\nexport interface EmptyStateContainerProps\n  extends HTMLChakraProps<'div'>,\n    ThemingProps<'EmptyState'> {\n  children?: React.ReactNode\n  spacing?: SystemProps['margin']\n}\n\nexport const EmptyStateContainer: React.FC<EmptyStateContainerProps> = (\n  props\n) => {\n  const { children, spacing, ...rest } = props\n  const styles = useMultiStyleConfig('EmptyState', props)\n\n  const containerProps = omitThemingProps(rest)\n\n  const containerStyles: SystemStyleObject = {\n    display: 'flex',\n    flex: 1,\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...styles.container,\n  }\n\n  return (\n    <StylesProvider value={styles}>\n      <chakra.div\n        {...containerProps}\n        __css={containerStyles}\n        className={cx('saas-empty-state', props.className)}\n      >\n        {children}\n      </chakra.div>\n    </StylesProvider>\n  )\n}\n\nif (__DEV__) {\n  EmptyStateContainer.displayName = 'EmptyStateContainer'\n}\n\nexport const EmptyStateIcon = forwardRef<IconProps, typeof Icon>(\n  (props, ref) => {\n    const styles = useStyles()\n\n    const iconStyles: SystemStyleObject = {\n      boxSize: 10,\n      ...styles.icon,\n    }\n\n    return (\n      <Icon\n        ref={ref}\n        role=\"presentation\"\n        sx={iconStyles}\n        {...props}\n        className={cx('saas-empty-state__icon', props.className)}\n      />\n    )\n  }\n)\n\nif (__DEV__) {\n  EmptyStateIcon.displayName = 'EmptyStateIcon'\n}\n\nexport const EmptyStateTitle: React.FC<HeadingProps> = (props) => {\n  const styles = useStyles()\n\n  const titleStyles = {\n    mb: 1,\n    ...styles.title,\n  }\n\n  return (\n    <Heading\n      sx={titleStyles}\n      size=\"md\"\n      {...props}\n      className={cx('saas-empty-state__title', props.className)}\n    />\n  )\n}\n\nif (__DEV__) {\n  EmptyStateTitle.displayName = 'EmptyStateTitle'\n}\n\nexport const EmptyStateDescription: React.FC<TextProps> = (props) => {\n  const styles = useStyles()\n\n  const descriptionStyles: SystemStyleObject = {\n    color: 'muted',\n    fontSize: 'md',\n    ...styles.description,\n  }\n\n  return (\n    <Text\n      sx={descriptionStyles}\n      {...props}\n      className={cx('saas-empty-state__description', props.className)}\n    />\n  )\n}\n\nif (__DEV__) {\n  EmptyStateDescription.displayName = 'EmptyStateDescription'\n}\n\ninterface EmptyStateBodyProps extends HTMLChakraProps<'div'> {\n  spacing?: SystemProps['margin']\n}\n\nexport const EmptyStateBody: React.FC<EmptyStateBodyProps> = (props) => {\n  const { spacing = 8, ...rest } = props\n  const styles = useStyles()\n\n  const bodyStyles: SystemStyleObject = {\n    ...styles.body,\n  }\n\n  return (\n    <chakra.div\n      __css={bodyStyles}\n      {...rest}\n      className={cx('saas-empty-state__body', props.className)}\n    />\n  )\n}\n\nif (__DEV__) {\n  EmptyStateBody.displayName = 'EmptyStateBody'\n}\n\nexport const EmptyStateActions: React.FC<ButtonGroupProps> = (props) => {\n  const styles = useStyles()\n  return (\n    <ButtonGroup\n      sx={styles.actions}\n      {...props}\n      className={cx('saas-empty-state__actions', props.className)}\n    />\n  )\n}\n\nif (__DEV__) {\n  EmptyStateActions.displayName = 'EmptyStateActions'\n}\n\nexport const EmptyStateFooter: React.FC<HTMLChakraProps<'footer'>> = (\n  props\n) => {\n  const styles = useStyles()\n  return (\n    <chakra.footer\n      __css={styles.footer}\n      {...props}\n      className={cx('saas-empty-state__footer', props.className)}\n    />\n  )\n}\n\nif (__DEV__) {\n  EmptyStateFooter.displayName = 'EmptyStateFooter'\n}\n","import * as React from 'react'\nimport {\n  chakra,\n  ChakraProps,\n  Spinner,\n  SpinnerProps,\n  ThemingProps,\n  ThemeTypings,\n  SystemProps,\n  useStyleConfig,\n} from '@chakra-ui/react'\nimport { cx, __DEV__ } from '@chakra-ui/utils'\n\ntype Variants = 'fill' | 'overlay' | 'fullscreen'\n\ntype SpinnerOptions = Pick<\n  SpinnerProps,\n  'emptyColor' | 'color' | 'thickness' | 'speed' | 'label' | 'className'\n>\n\nexport interface LoaderProps\n  extends Omit<MotionProps, 'transition'>,\n    Omit<ChakraProps, 'color'>,\n    ThemingProps<'Loader'>,\n    SpinnerOptions {\n  /**\n   * Show or hide the loader.\n   */\n  isLoading?: boolean\n\n  /**\n   * Render a custom spinner\n   */\n  spinner?: React.ReactNode\n\n  /**\n   * Spacing between children\n   */\n  spacing?: SystemProps['margin']\n\n  /**\n   * @type \"fill\" | \"overlay\" | \"fullscreen\"\n   * @default \"fill\"\n   */\n  variant?: 'Loader' extends keyof ThemeTypings['components'] /* @ts-ignore */\n    ? ThemeTypings['components']['Loader']['variants']\n    : Variants\n\n  children?: React.ReactNode\n}\n\nimport { AnimatePresence, motion, MotionProps } from 'framer-motion'\n\nconst Motion = chakra(motion.div)\n\n/**\n * Show a fullscreen loading animation while your app is loading.\n */\nexport const Loader: React.FC<LoaderProps> = (props) => {\n  const styles = useStyleConfig('Loader', props)\n\n  const {\n    children,\n    isLoading = true,\n    variant,\n    size,\n    colorScheme,\n    color,\n    emptyColor,\n    thickness,\n    speed,\n    label,\n    spinner,\n    spacing = 2,\n    ...rest\n  } = props\n\n  const spinnerProps = {\n    size,\n    colorScheme,\n    color,\n    emptyColor,\n    thickness,\n    speed,\n    label,\n  }\n\n  const loaderStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    '& > *:not(style) ~ *:not(style)': { marginTop: spacing },\n    ...styles,\n  }\n\n  const animateInitial = React.useMemo(() => !isLoading, [])\n\n  let content = children\n  if (typeof children === 'string') {\n    content = <chakra.div>{children}</chakra.div>\n  }\n\n  return (\n    <AnimatePresence>\n      {isLoading && (\n        <Motion\n          initial={{ opacity: animateInitial ? 0 : 1 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          {...rest}\n          __css={loaderStyles}\n          className={cx('saas-loader', props.className)}\n        >\n          {spinner || <Spinner {...spinnerProps} />}\n          {content}\n        </Motion>\n      )}\n    </AnimatePresence>\n  )\n}\n\nif (__DEV__) {\n  Loader.displayName = 'Loader'\n}\n\n/**\n * deprecated, will be removed in 1.0\n */\nexport const Loading = Loader\n","import * as React from 'react'\nimport { Link as ChakraLink, LinkProps, forwardRef } from '@chakra-ui/react'\nimport { __DEV__ } from '@chakra-ui/utils'\nimport { useLink } from '@saas-ui/provider'\n\nexport type { LinkProps }\n\n/**\n * Chakra UI `Link` component wrapped in a router specific link component.\n * Falls back to a plain `Link` if no Saas UI context is available or no `linkComponent` is configured\n * The router link component can be configured in `SaasProvider`.\n *\n */\nexport const Link = forwardRef<LinkProps, 'a'>((props, ref) => {\n  const LinkWrapper = useLink()\n\n  const { href, ...rest } = props\n\n  const link = <ChakraLink ref={ref} href={href} {...rest} />\n\n  if (LinkWrapper) {\n    return <LinkWrapper href={href}>{link}</LinkWrapper>\n  }\n\n  return link\n})\n\nif (__DEV__) {\n  Link.displayName = 'Link'\n}\n"],"names":["_excluded","Divider","props","label","orientation","rest","_objectWithoutPropertiesLoose","styles","useStyleConfig","borderColor","line","_extends","content","position","display","borderLeftWidth","height","left","borderBottomWidth","width","top","dividerStyles","flexDirection","alignItems","whiteSpace","color","_before","_after","fontSize","border","labelStyles","flexShrink","mx","overflow","textOverflow","writingMode","textOrientation","React","createElement","ChakraDivider","as","role","__css","chakra","span","__DEV__","displayName","_excluded2","_excluded3","StylesProvider","useStyles","createStylesContext","EmptyState","children","spacing","icon","title","description","actions","footer","EmptyStateContainer","EmptyStateBody","EmptyStateIcon","div","EmptyStateTitle","EmptyStateDescription","EmptyStateActions","EmptyStateFooter","useMultiStyleConfig","omitThemingProps","containerStyles","flex","justifyContent","container","value","containerProps","className","cx","forwardRef","ref","iconStyles","boxSize","Icon","sx","mb","Heading","titleStyles","size","descriptionStyles","Text","bodyStyles","body","ButtonGroup","Motion","motion","Loader","isLoading","colorScheme","emptyColor","thickness","speed","spinner","spinnerProps","loaderStyles","marginTop","animateInitial","useMemo","AnimatePresence","initial","opacity","animate","exit","Spinner","Loading","LinkWrapper","useLink","href","link","ChakraLink","Link"],"mappings":"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"}