# All files index.tsx

100% Statements 76/76
94.44% Branches 17/18
100% Functions 9/9
100% Lines 76/76

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    771x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    22x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    9x
    9x
    9x
    9x
    9x
    1x
    1x
    1x
    1x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    1x
    1x
    1x
    1x
    6x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    1x
    6x
    6x
    1x
    1x
    1x
     import React from 'react'
    import { Hypostyle, HypostyleObject, HypostyleObjectOrFunction } from 'hypostyle'
    import { Properties as CSSProperties } from 'csstype'

    type CSSPropertyNames = keyof CSSProperties

    export type As = keyof JSX.IntrinsicElements
    export type HypoProps = { hypostyle: Hypostyle }
    export type BoxProps = {
      as?: As
      cx?: HypostyleObjectOrFunction
      style?: { [property in CSSPropertyNames]: string | number }
    } & HypostyleObject

    var context = React.createContext({} as Hypostyle)

    export function useHypostyle(): Hypostyle {
      return React.useContext<Hypostyle>(context)
    }

    export function useTheme() {
      var hypo = useHypostyle()
      return hypo.theme
    }

    export function Hypo(
      props: React.PropsWithChildren<HypoProps>
    ): React.FunctionComponentElement<React.ProviderProps<Hypostyle>> {
      return React.createElement(context.Provider, {
        value: props.hypostyle,
        children: props.children,
      })
    }

    export var Box = React.forwardRef<HTMLElement, BoxProps>((p, ref) => {
      var hypostyle = useHypostyle()
      var picked = hypostyle.pick<BoxProps>(p)
      var element = picked.props.as || 'div'
      var cx = picked.props.cx || {}
      var className = picked.props.className

      var css = hypostyle.css({
        ...hypostyle.explode(picked.styles), // custom attr
        ...hypostyle.explode(cx || {}), // custom cx
      })

      delete picked.props.as
      delete picked.props.cx

      return React.createElement(element, {
        ref,
        ...picked.props,
        className: ([className, css] as string[])
          .filter(Boolean)
          .map((s) => s.trim())
          .join(' '),
      })
    })

    export function compose(Element: As | React.ComponentType<BoxProps>, styles: HypostyleObjectOrFunction) {
      return (props: BoxProps) => {
        var hypostyle = useHypostyle()
        var picked = hypostyle.pick<BoxProps>(props)
        var cx = {
          ...hypostyle.explode(styles), // base
          ...hypostyle.explode(picked.styles), // custom attr
          ...hypostyle.explode(picked.props.cx || {}), // custom cx
        }

        return typeof Element === 'function' ? (
          <Element {...picked.props} cx={cx} />
        ) : (
          <Box as={Element} {...picked.props} cx={cx} />
        )
      }
    }