5655e26 · rowtype-yoga/ry-blocks

.autogit/autogit.jsondeleted−5

@@ -1,5 +0,0 @@

1−{

2− "updateInterval": 1800,

3− "logging": true,

4− "silent": true

5−}

.autogit/logs/log-9-4-2021-12-38-38.txtdeleted−15

@@ -1,15 +0,0 @@

1−-------------------- Auto-Git Log --------------------

2− Sun May 09 2021 12:38:38 GMT+0200 (Central European Summer Time)

3−------------------------------------------------------

4−

5−Modified files:

6−

7−

8−Created files:

9−* .autogit/logs/log-9-4-2021-12-8-28.txt

10−

11−

12−Deleted files:

13−

14−

15−Renamed files:

.autogit/logs/log-9-4-2021-12-8-28.txtdeleted−47

@@ -1,47 +0,0 @@

1−-------------------- Auto-Git Log --------------------

2− Sun May 09 2021 12:08:28 GMT+0200 (Central European Summer Time)

3−------------------------------------------------------

4−

5−Modified files:

6−* .storybook/main.js

7−* .storybook/rowtype-yoga-theme.js

8−* .vscode/settings.json

9−* package.json

10−* spago.dhall

11−* src/Framer/Motion/Types.purs

12−* src/React/Basic/Popper/Story.purs

13−* src/Yoga/Block/Atom/Icon/Style.purs

14−* src/Yoga/Block/Atom/Input/Story.purs

15−* src/Yoga/Block/Atom/Input/Style.purs

16−* src/Yoga/Block/Atom/Input/View.purs

17−* src/Yoga/Block/Atom/Popover/Style.purs

18−* src/Yoga/Block/Atom/Popover/View.purs

19−* src/Yoga/Block/Atom/Toggle/Story.purs

20−* src/Yoga/Block/Atom/Tooltip/View.purs

21−* src/Yoga/Block/Container/Spec.purs

22−* src/Yoga/Block/Container/Story.purs

23−* src/Yoga/Block/Container/Style.purs

24−* src/Yoga/Block/Container/View.purs

25−* src/Yoga/Block/Internal.purs

26−* src/Yoga/Block/Layout/Cluster/View.purs

27−* src/Yoga/Block/Organism/Form.purs

28−* src/Yoga/Block/Organism/Form/Story.purs

29−* src/Yoga/Block/Organism/Form/Validation.purs

30−* yarn.lock

31−

32−

33−Created files:

34−* .autogit/autogit.json

35−* src/React/Downshift.purs

36−* src/React/Downshift/Internal.js

37−* src/React/Downshift/Internal.purs

38−* src/React/Downshift/Types.purs

39−* src/React/Downshift/Types/StateChangeType.js

40−* src/React/Downshift/Types/StateChangeType.purs

41−

42−

43−Deleted files:

44−* src/Yoga/Block/Atom/Popover/Story.purs

45−

46−

47−Renamed files:

.autogit/logs/log-9-4-2021-22-37-12.txtdeleted−15

@@ -1,15 +0,0 @@

1−-------------------- Auto-Git Log --------------------

2− Sun May 09 2021 22:37:12 GMT+0200 (Central European Summer Time)

3−------------------------------------------------------

4−

5−Modified files:

6−

7−

8−Created files:

9−* .autogit/logs/log-9-4-2021-12-38-38.txt

10−

11−

12−Deleted files:

13−

14−

15−Renamed files:

.autogit/logs/log-9-4-2021-23-7-23.txtdeleted−15

@@ -1,15 +0,0 @@

1−-------------------- Auto-Git Log --------------------

2− Sun May 09 2021 23:07:23 GMT+0200 (Central European Summer Time)

3−------------------------------------------------------

4−

5−Modified files:

6−

7−

8−Created files:

9−* .autogit/logs/log-9-4-2021-22-37-12.txt

10−

11−

12−Deleted files:

13−

14−

15−Renamed files:

.psci_modules/index.jsdeleted−1

@@ -1 +0,0 @@

1−require('$PSCI')['$main']();

.storybook/main.js+1−12

@@ -1,15 +1,4 @@

1−const path = require('path');

2−const webpack = require('webpack');

3−

41module.exports = {

52 stories: ['../output/**/*.Story/index.js'],

6− addons: [],

7− webpackFinal: async config => {

8− // config.plugins.push(new webpack.SourceMapDevToolPlugin({

9− // append: '\n//# sourceMappingURL=./[url]',

10− // }))

11−

12− // do mutation to the config

13− return config;

14− },

3+ addons: []

154};

.storybook/rowtype-yoga-theme.js+8−11

@@ -1,26 +1,23 @@

11import logo from './logo.svg';

22import { create } from '@storybook/theming/create';

33

4−const pink = '#c55397'

5−const green = '#0f552b'

6−

74export default create({

8− base: 'dark',

5+ base: 'light',

96

10− colorSecondary: pink,

11− colorPrimary: green,

7+ colorSecondary: "#271C5A",

8+ colorPrimary: "#5B43D0",

129

1310 // UI

14− appBg: '#10354a',

15− appContentBg: '#203f50',

16− appBorderColor: '#002334',

11+ // appBg: '#10354a',

12+ // appContentBg: '#203f50',

13+ // appBorderColor: '#002334',

1714

1815 // Typography

19− fontBase: '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, Arial, sans-serif',

16+ fontBase: '"Inter V", Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, Arial, sans-serif',

2017 fontCode: '"VictorMono", monospace',

2118

2219 // Text colors

23− textColor: 'white',

20+ textColor: 'black',

2421

2522 textInverseColor: 'rgba(255,255,255,0.9)',

2623

.vscode/settings.json+1−1

@@ -1,5 +1,5 @@

11{

22 "editor.formatOnSave": true,

3− "workbench.colorTheme": "Kai Light",

3+ "workbench.colorTheme": "Irul Theme",

44 "search.useGlobalIgnoreFiles": true

55}

package.json+3−5

@@ -1,7 +1,7 @@

11{

22 "name": "ry-blocks",

33 "version": "1.0.0",

4− "description": "A design system for the Web, built in PureScript and React.",

4+ "description": "A design system for the Web, built in PureScript and React",

55 "main": "index.js",

66 "repository": "git@github.com:rowtype-yoga/ry-components.git",

77 "author": "Mark Eibes <mark.eibes@gmail.com>",

@@ -52,15 +52,13 @@

5252 "@dnd-kit/modifiers": "^1.0.5",

5353 "@dnd-kit/sortable": "^2.0.1",

5454 "@dnd-kit/utilities": "^1.0.3",

55− "@emotion/core": "^10.0.28",

55+ "@emotion/react": "^11.4.0",

5656 "@popperjs/core": "^2.6.0",

5757 "downshift": "^6.1.2",

58− "focus-trap-react": "^8.4.2",

5958 "framer-motion": "^4.0.3",

6059 "react": "^16.0.0",

6160 "react-dom": "^16.0.0",

62− "react-laag": "^2.0.2",

6361 "react-popper": "^2.2.4",

6462 "react-syntax-highlighter": "^15.3.1"

6563 }

66−}

64+}

packages.dhall+53−122

@@ -4,13 +4,6 @@ Welcome to your new Dhall package-set!

44Below are instructions for how to edit this file for most use

55cases, so that you don't need to know Dhall to use it.

66

7−## Warning: Don't Move This Top-Level Comment!

8−

9−Due to how `dhall format` currently works, this comment's

10−instructions cannot appear near corresponding sections below

11−because `dhall format` will delete the comment. However,

12−it will not delete a top-level comment like this one.

13−

147## Use Cases

158

169Most will want to do one or both of these options:

@@ -31,28 +24,25 @@ Purpose:

3124 the package set's repo

3225

3326Syntax:

34−Replace the overrides' "{=}" (an empty record) with the following idea

35−The "//" or "⫽" means "merge these two records and

36− when they have the same value, use the one on the right:"

27+where `entityName` is one of the following:

28+- dependencies

29+- repo

30+- version

3731-------------------------------

38−let overrides =

39− { packageName =

40− upstream.packageName // { updateEntity1 = "new value", updateEntity2 = "new value" }

41− , packageName =

42− upstream.packageName // { version = "v4.0.0" }

43− , packageName =

44− upstream.packageName // { repo = "https://www.example.com/path/to/new/repo.git" }

45− }

32+let upstream = --

33+in upstream

34+ with packageName.entityName = "new value"

4635-------------------------------

4736

4837Example:

4938-------------------------------

50−let overrides =

51− { halogen =

52− upstream.halogen // { version = "master" }

53− , halogen-vdom =

54− upstream.halogen-vdom // { version = "v4.0.0" }

55− }

39+let upstream = --

40+in upstream

41+ with halogen.version = "master"

42+ with halogen.repo = "https://example.com/path/to/git/repo.git"

43+

44+ with halogen-vdom.version = "v4.0.0"

45+ with halogen-vdom.dependencies = [ "extra-dependency" ] # halogen-vdom.dependencies

5646-------------------------------

5747

5848### Additions

@@ -61,37 +51,30 @@ Purpose:

6151- Add packages that aren't already included in the default package set

6252

6353Syntax:

64−Replace the additions' "{=}" (an empty record) with the following idea:

54+where `<version>` is:

55+- a tag (i.e. "v4.0.0")

56+- a branch (i.e. "master")

57+- commit hash (i.e. "701f3e44aafb1a6459281714858fadf2c4c2a977")

6558-------------------------------

66−let additions =

67− { package-name =

68− { dependencies =

69− [ "dependency1"

70− , "dependency2"

71− ]

72− , repo =

73− "https://example.com/path/to/git/repo.git"

74− , version =

75− "tag ('v4.0.0') or branch ('master')"

76− }

77− , package-name =

78− { dependencies =

79− [ "dependency1"

80− , "dependency2"

81− ]

82− , repo =

83− "https://example.com/path/to/git/repo.git"

84− , version =

85− "tag ('v4.0.0') or branch ('master')"

86− }

87− , etc.

88− }

59+let upstream = --

60+in upstream

61+ with new-package-name =

62+ { dependencies =

63+ [ "dependency1"

64+ , "dependency2"

65+ ]

66+ , repo =

67+ "https://example.com/path/to/git/repo.git"

68+ , version =

69+ "<version>"

70+ }

8971-------------------------------

9072

9173Example:

9274-------------------------------

93−let additions =

94− { benchotron =

75+let upstream = --

76+in upstream

77+ with benchotron =

9578 { dependencies =

9679 [ "arrays"

9780 , "exists"

@@ -113,78 +96,26 @@ let additions =

11396 , version =

11497 "v7.0.0"

11598 }

116− }

11799-------------------------------

118100-}

119101let upstream =

120− https://github.com/purescript/package-sets/releases/download/psc-0.14.1-20210506/packages.dhall sha256:d199e142515f9cc15838d8e6d724a98cd0ca776ceb426b7b36e841311643e3ef

121−

122−let overrides =

123− { spec-discovery = upstream.spec-discovery // { version = "master" }

124− , typelevel-peano = upstream.typelevel-peano // { version = "master" }

125− }

126−

127−let additions =

128− { literals =

129− { dependencies =

130− [ "assert"

131− , "effect"

132− , "console"

133− , "integers"

134− , "numbers"

135− , "partial"

136− , "psci-support"

137− , "unsafe-coerce"

138− , "typelevel-prelude"

139− ]

140− , repo = "https://github.com/jvliwanag/purescript-literal.git"

141− , version = "7b2ae20f77c67b7e419a92fdd0dc7a09b447b18e"

142− }

143− , untagged-union =

144− { dependencies =

145− [ "assert"

146− , "console"

147− , "effect"

148− , "foreign"

149− , "foreign-object"

150− , "literals"

151− , "maybe"

152− , "newtype"

153− , "psci-support"

154− , "tuples"

155− , "unsafe-coerce"

156− ]

157− , repo = "https://github.com/jvliwanag/purescript-untagged-union.git"

158− , version = "master"

159− }

160− , react-basic-dom =

161− { dependencies =

162− [ "effect"

163− , "foreign-object"

164− , "react-basic"

165− , "unsafe-coerce"

166− , "web-dom"

167− , "web-events"

168− , "web-file"

169− , "web-html"

170− ]

171− , repo = "https://github.com/lumihq/purescript-react-basic-dom.git"

172− , version = "main"

173− }

174− , react-basic-emotion =

175− { dependencies =

176− [ "colors"

177− , "foreign"

178− , "numbers"

179− , "prelude"

180− , "react-basic"

181− , "typelevel-prelude"

182− , "unsafe-reference"

183− ]

184− , repo =

185− "https://github.com/i-am-the-slime/purescript-react-basic-emotion.git"

186− , version = "patch-1"

187− }

188− }

189−

190−in upstream // overrides // additions

102+ https://github.com/purescript/package-sets/releases/download/psc-0.14.1-20210516/packages.dhall sha256:f5e978371d4cdc4b916add9011021509c8d869f4c3f6d0d2694c0e03a85046c8

103+in upstream

104+ with two-or-more =

105+ {

106+ dependencies =[

107+ "arrays",

108+ "console",

109+ "effect",

110+ "foldable-traversable",

111+ "maybe",

112+ "partial",

113+ "prelude",

114+ "psci-support",

115+ "tuples"

116+ ],

117+ repo ="https://github.com/i-am-the-slime/purescript-two-or-more.git",

118+ version ="v0.3.0"

119+ }

120+ with framer-motion =

121+ ../purescript-framer-motion/spago.dhall as Location

spago.dhall+2

@@ -20,6 +20,7 @@ You can edit this file as you like.

2020 , "foreign"

2121 , "foreign-generic"

2222 , "foreign-object"

23+ , "framer-motion"

2324 , "free"

2425 , "functions"

2526 , "heterogeneous"

@@ -51,6 +52,7 @@ You can edit this file as you like.

5152 , "tailrec"

5253 , "transformers"

5354 , "tuples"

55+ , "two-or-more"

5456 , "typelevel-peano"

5557 , "typelevel-prelude"

5658 , "unsafe-coerce"

src/Data/TwoOrMore.pursdeleted−90

@@ -1,90 +0,0 @@

1−module Data.TwoOrMore

2− ( TwoOrMore

3− , twoOrMore

4− , fromArray

5− , pushFront

6− , pushBack

7− , toArray

8− , length

9− , head

10− , neck

11− , tail

12− , last

13− , zip

14− , findIndex

15− , mapWithIndex

16− , toNonEmptyArray

17− , index

18− , (!!)

19− ) where

20−

21−import Prelude

22−import Data.Array as A

23−import Data.Array.NonEmpty (NonEmptyArray)

24−import Data.Array.NonEmpty as NEA

25−import Data.Foldable (class Foldable)

26−import Data.FoldableWithIndex (class FoldableWithIndex)

27−import Data.FunctorWithIndex (class FunctorWithIndex)

28−import Data.Maybe (Maybe(..))

29−import Data.Traversable (class Traversable)

30−import Data.Tuple.Nested (type (/\))

31−import Partial.Unsafe (unsafePartial)

32−

33−newtype TwoOrMore a = TwoOrMore (Array a)

34−

35−twoOrMore ∷ ∀ a. a -> a -> Array a -> TwoOrMore a

36−twoOrMore first second rest = TwoOrMore ([ first, second ] <> rest)

37−

38−fromArray ∷ ∀ a. Array a -> Maybe (TwoOrMore a)

39−fromArray xs = if A.length xs >= 2 then Just (TwoOrMore xs) else Nothing

40−

41−toArray ∷ TwoOrMore ~> Array

42−toArray (TwoOrMore xs) = xs

43−

44−length ∷ ∀ a. TwoOrMore a -> Int

45−length (TwoOrMore xs) = A.length xs

46−

47−head ∷ ∀ a. TwoOrMore a -> a

48−head (TwoOrMore xs) = unsafePartial A.unsafeIndex xs 0

49−

50−pushFront ∷ ∀ a. a -> TwoOrMore a -> TwoOrMore a

51−pushFront x (TwoOrMore xs) = TwoOrMore (A.cons x xs)

52−

53−pushBack ∷ ∀ a. a -> TwoOrMore a -> TwoOrMore a

54−pushBack x (TwoOrMore xs) = TwoOrMore (A.snoc xs x)

55−

56−neck ∷ ∀ a. TwoOrMore a -> a

57−neck (TwoOrMore xs) = unsafePartial A.unsafeIndex xs 1

58−

59−tail ∷ TwoOrMore ~> NonEmptyArray

60−tail twoOrMore'@(TwoOrMore xs) = NEA.cons' (neck twoOrMore') (A.drop 2 xs)

61−

62−last ∷ ∀ a. TwoOrMore a -> a

63−last (TwoOrMore xs) = unsafePartial A.unsafeIndex xs (A.length xs - 1)

64−

65−zip ∷ ∀ a b. TwoOrMore a -> TwoOrMore b -> TwoOrMore (a /\ b)

66−zip (TwoOrMore as) (TwoOrMore bs) = TwoOrMore (A.zip as bs)

67−

68−findIndex ∷ ∀ a. (a -> Boolean) -> TwoOrMore a -> Maybe Int

69−findIndex f (TwoOrMore xs) = A.findIndex f xs

70−

71−mapWithIndex ∷ ∀ a b. (Int -> a -> b) -> TwoOrMore a -> TwoOrMore b

72−mapWithIndex f (TwoOrMore xs) = TwoOrMore (A.mapWithIndex f xs)

73−

74−toNonEmptyArray ∷ TwoOrMore ~> NonEmptyArray

75−toNonEmptyArray twoOrMore' = NEA.cons (head twoOrMore') (tail twoOrMore')

76−

77−index ∷ ∀ a. TwoOrMore a -> Int -> Maybe a

78−index (TwoOrMore xs) = A.index xs

79−

80−infixl 8 index as !!

81−

82−derive newtype instance eqTwoOrMore ∷ Eq a => Eq (TwoOrMore a)

83−derive newtype instance ordTwoOrMore ∷ Ord a => Ord (TwoOrMore a)

84−derive newtype instance showTwoOrMore ∷ Show a => Show (TwoOrMore a)

85−derive newtype instance functorTwoOrMore ∷ Functor TwoOrMore

86−derive newtype instance functorWithIndexTwoOrMore ∷ FunctorWithIndex Int TwoOrMore

87−derive newtype instance foldableWithIndexTwoOrMore ∷ FoldableWithIndex Int TwoOrMore

88−derive newtype instance foldableTwoOrMore ∷ Foldable TwoOrMore

89−derive newtype instance traversableTwoOrMore ∷ Traversable TwoOrMore

90−derive newtype instance semigroupTwoOrMore ∷ Semigroup (TwoOrMore a)

src/Framer/Motion.jsdeleted−69

@@ -1,69 +0,0 @@

1−const framerMotion = require("framer-motion")

2−const React = require("react")

3−const Emotion = require("@emotion/core")

4−

5−exports.animatePresenceImpl = framerMotion.AnimatePresence

6−

7−exports.animateSharedLayoutImpl = framerMotion.AnimateSharedLayout

8−

9−const flattenDataProp = (props) => {

10− let data = null;

11− if (props._data != null) {

12− data = { _data: undefined };

13− Object.entries(props._data).forEach(function (entry) {

14− data["data-" + entry[0]] = entry[1];

15− });

16− }

17− let aria = null;

18− if (props._aria != null) {

19− aria = { _aria: undefined };

20− Object.entries(props._aria).forEach(function (entry) {

21− aria["aria-" + entry[0]] = entry[1];

22− });

23− }

24− if (data == null && aria == null) {

25− return props

26− } else if (aria == null) {

27− return Object.assign({}, props, data);

28− } else if (data == null) {

29− return Object.assign({}, props, aria)

30− } else {

31− return Object.assign({}, props, data, aria)

32− }

33−};

34−

35−exports.motionElement_ = (component, props, areChildrenDynamic) => {

36− const args = [component, flattenDataProp(props)];

37− // const c = React.forwardRef((props, ref) =>

38− // createElement(el)(flattenDataProp(props, ref))

39− // );

40− return React.createElement.apply(

41− null,

42− areChildrenDynamic || props.children == null

43− ? args

44− : args.concat(props.children)

45− );

46−};

47−

48−exports.motionElementKeyed_ = (component, props) =>

49− exports.motionElement_(component, props, true);

50−

51−

52−exports.styledMotionElement_ = (component, props, areChildrenDynamic) => {

53− const args = [component, flattenDataProp(props)];

54− // const c = React.forwardRef((props, ref) =>

55− // createElement(el)(flattenDataProp(props, ref))

56− // );

57− return Emotion.jsx.apply(

58− null,

59− areChildrenDynamic || props.children == null

60− ? args

61− : args.concat(props.children)

62− );

63−};

64−

65−exports.styledMotionElementKeyed_ = (component, props) =>

66− exports.styledMotionElement_(component, props, true);

67−

68−exports.startImpl = (args) => (controls) => controls.start(args)

69−exports.stopImpl = (controls) => controls.stop

src/Framer/Motion.pursdeleted−118

@@ -1,118 +0,0 @@

1−module Framer.Motion

2− ( motion

3− , withMotion

4− , animatePresence

5− , animateSharedLayout

6− , module Framer.Motion.Types

7− , module Framer.Motion.MotionComponent

8− , element

9− , elementKeyed

10− , elementStyled

11− , elementStyledKeyed

12− , startAnimation

13− , startAnimationDynamic

14− , startAnimationVariant

15− , stopAnimation

16− ) where

17−

18−import Framer.Motion.Types

19−import Control.Promise (Promise)

20−import Control.Promise as Promise

21−import Data.Function.Uncurried (Fn2, runFn2)

22−import Effect (Effect)

23−import Effect.Aff (Aff)

24−import Framer.Motion.MotionComponent (_data, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, custom, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, keygen, label, legend, li, line, linearGradient, link, main, map, mark, marker, mask, menu, menuitem, meta, metadata, meter, motionComponentImpl, nav, noscript, object, ol, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, section, select, small, source, span, stop, strong, style, sub, summary, sup, svg, svgAnimate, svgSwitch, symbol, table, tbody, td, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, var, video, view, wbr)

25−import Prelude (Unit, flip)

26−import Prim.Row (class Nub, class Union)

27−import React.Basic (JSX, ReactComponent)

28−import React.Basic.DOM (CSS)

29−import React.Basic.Emotion (Style)

30−import Record (disjointUnion)

31−import Untagged.Castable (class Castable, cast)

32−

33−withMotion ∷

34− ∀ result baseProps motionSubset.

35− Union baseProps (MotionProps ()) result => Nub result result => Castable motionSubset { | MotionProps () } => Record baseProps -> motionSubset -> Record result

36−withMotion old new = disjointUnion old ((cast new) ∷ { | MotionProps () })

37−

38−motion ∷

39− ∀ result baseProps motionSubset.

40− Union baseProps (MotionProps ()) result => Nub result result => Castable motionSubset { | MotionProps () } => motionSubset -> Record baseProps -> Record result

41−motion = flip withMotion

42−

43−foreign import animatePresenceImpl ∷ ∀ attrs. ReactComponent { | attrs }

44−

45−animatePresence ∷

46− ∀ attrs attrs_.

47− Union attrs attrs_ AnimatePresenceProps =>

48− ReactComponent { | attrs }

49−animatePresence = animatePresenceImpl

50−

51−foreign import animateSharedLayoutImpl ∷ ∀ attrs. ReactComponent { | attrs }

52−

53−animateSharedLayout ∷

54− ∀ attrs attrs_.

55− Union attrs attrs_ AnimateSharedLayoutProps =>

56− ReactComponent { | attrs }

57−animateSharedLayout = animateSharedLayoutImpl

58−

59−element ∷ ∀ p q. Union p q (MotionProps q) => ReactComponent { | p } -> { | p } -> JSX

60−element = runFn2 motionElement_

61−

62−foreign import motionElement_ ∷

63− ∀ props. Fn2 (ReactComponent { | props }) { | props } JSX

64−

65−elementKeyed ∷

66− ∀ props.

67− ReactComponent { | MotionProps props } ->

68− { key ∷ String | MotionProps props } ->

69− JSX

70−elementKeyed = runFn2 motionElementKeyed_

71−

72−foreign import motionElementKeyed_ ∷

73− ∀ props.

74− Fn2 (ReactComponent { | MotionProps props })

75− { key ∷ String | MotionProps props }

76− JSX

77−

78−elementStyled ∷

79− ∀ props.

80− ReactComponent { className ∷ String | props } ->

81− { className ∷ String, css ∷ Style | props } ->

82− JSX

83−elementStyled = runFn2 styledMotionElement_

84−

85−foreign import styledMotionElement_ ∷

86− ∀ props.

87− Fn2 (ReactComponent { className ∷ String | props })

88− { className ∷ String, css ∷ Style | props }

89− JSX

90−

91−elementStyledKeyed ∷

92− ∀ props.

93− ReactComponent { className ∷ String | props } ->

94− { className ∷ String, css ∷ Style, key ∷ String | props } ->

95− JSX

96−elementStyledKeyed = runFn2 styledMotionElementKeyed_

97−

98−foreign import styledMotionElementKeyed_ ∷

99− ∀ props.

100− Fn2 (ReactComponent { className ∷ String | props })

101− { className ∷ String, css ∷ Style, key ∷ String | props }

102− JSX

103−

104−foreign import startImpl ∷ ∀ arg. arg -> AnimationControls -> Promise Unit

105−

106−foreign import stopImpl ∷ AnimationControls -> Effect Unit

107−

108−startAnimation ∷ CSS -> AnimationControls -> Aff Unit

109−startAnimation arg controls = Promise.toAff (startImpl arg controls)

110−

111−startAnimationDynamic ∷ ∀ arg. (arg -> CSS) -> AnimationControls -> Aff Unit

112−startAnimationDynamic arg controls = Promise.toAff (startImpl arg controls)

113−

114−startAnimationVariant ∷ VariantLabel -> AnimationControls -> Aff Unit

115−startAnimationVariant arg controls = Promise.toAff (startImpl arg controls)

116−

117−stopAnimation ∷ AnimationControls -> Effect Unit

118−stopAnimation = stopImpl

src/Framer/Motion/Hook.jsdeleted−6

@@ -1,6 +0,0 @@

1−const framerMotion = require("framer-motion")

2−

3−exports.useViewportScrollImpl = framerMotion.useViewportScroll

4−exports.useTransformImpl = framerMotion.useTransform

5−exports.useSpringImpl = framerMotion.useSpring

6−exports.useAnimationImpl = framerMotion.useAnimation

src/Framer/Motion/Hook.pursdeleted−142

@@ -1,142 +0,0 @@

1−module Framer.Motion.Hook

2− ( useViewportScroll

3− , useAnimation

4− , UseAnimation

5− , UseViewportScroll

6− , useTransform

7− , useSpringWithMotionValue

8− , useSpringWithNumber

9− , UseSpring

10− , SpringProps

11− , UseTransform

12− , ViewportScrollValues

13− , TransformOptions

14− , Ease

15− ) where

16−

17−import Prelude

18−import Data.Array as Array

19−import Data.Maybe (Maybe(..))

20−import Data.Tuple.Nested ((/\), type (/\))

21−import Data.TwoOrMore (TwoOrMore)

22−import Data.TwoOrMore as TwoOrMore

23−import Effect (Effect)

24−import Effect.Uncurried (EffectFn2, EffectFn4, runEffectFn2, runEffectFn4)

25−import Framer.Motion (AnimationControls)

26−import Literals.Undefined (Undefined, undefined)

27−import MotionValue (MotionValue)

28−import React.Basic.Hooks (Hook, unsafeHook)

29−import Untagged.Castable (class Castable, cast)

30−import Untagged.Union (type (|+|), UndefinedOr, maybeToUor)

31−

32−-- UseViewportScroll

33−type ViewportScrollValues =

34− { scrollX ∷ MotionValue Number

35− , scrollY ∷ MotionValue Number

36− , scrollXProgress ∷ MotionValue Number

37− , scrollYProgress ∷ MotionValue Number

38− }

39−

40−foreign import data UseViewportScroll ∷ Type -> Type

41−

42−foreign import useViewportScrollImpl ∷ Effect ViewportScrollValues

43−

44−useViewportScroll ∷ Hook UseViewportScroll ViewportScrollValues

45−useViewportScroll = unsafeHook useViewportScrollImpl

46−

47−data Ease

48− = EaseFn (Number -> Number)

49− | EaseFns (Array (Number -> Number))

50−

51−-- UseTransform

52−type TransformOptionsImpl :: forall k. k -> Type

53−type TransformOptionsImpl a =

54− { clamp ∷ UndefinedOr Boolean

55− , ease ∷ UndefinedOr ((Number -> Number) |+| (Array (Number -> Number)))

56− }

57−

58−type TransformOptions :: forall k. k -> Type

59−type TransformOptions a =

60− { clamp ∷ Maybe Boolean

61− , ease ∷ Maybe Ease

62− }

63−

64−transformOptionsToTransformOptionsImpl ∷ ∀ a. TransformOptions a -> TransformOptionsImpl a

65−transformOptionsToTransformOptionsImpl { clamp, ease } =

66− { clamp: maybeToUor clamp

67− , ease:

68− case ease of

69− Just (EaseFn fn) -> cast fn

70− Just (EaseFns fns) -> cast fns

71− Nothing -> cast undefined

72− }

73−

74−foreign import data UseTransform ∷ Type -> Type -> Type

75−

76−foreign import useTransformImpl ∷

77− ∀ a.

78− EffectFn4

79− (MotionValue a)

80− (Array Number)

81− (Array a)

82− (UndefinedOr (TransformOptionsImpl a))

83− (MotionValue a)

84−

85−useTransform ∷

86− ∀ a. MotionValue a -> TwoOrMore (Number /\ a) -> Maybe (TransformOptions a) -> Hook (UseTransform a) (MotionValue a)

87−useTransform motionValue mapping options =

88− unsafeHook do

89− runEffectFn4

90− useTransformImpl

91− motionValue

92− numbers

93− as

94− (maybeToUor $ transformOptionsToTransformOptionsImpl <$> options)

95− where

96− numbers /\ as = TwoOrMore.toArray mapping # Array.unzip

97−

98−-- UseSpring

99−type SpringProps =

100− { from ∷ Number |+| Int |+| Undefined

101− , to ∷ Number |+| Int |+| Undefined

102− , stiffness ∷ Number |+| Int |+| Undefined

103− , damping ∷ Number |+| Int |+| Undefined

104− , mass ∷ Number |+| Int |+| Undefined

105− , velocity ∷ Number |+| Int |+| Undefined

106− , restSpeed ∷ Number |+| Int |+| Undefined

107− , restDelta ∷ Number |+| Int |+| Undefined

108− }

109−

110−foreign import data UseSpring ∷ Type -> Type -> Type

111−

112−foreign import useSpringImpl ∷

113− ∀ a b.

114− EffectFn2

115− (MotionValue a |+| Number)

116− SpringProps

117− b

118−

119−useSpringWithMotionValue ∷

120− ∀ a opts. Castable opts SpringProps => MotionValue a -> opts -> Hook (UseSpring (MotionValue a)) (MotionValue a)

121−useSpringWithMotionValue motionValue springProps =

122− unsafeHook do

123− runEffectFn2

124− useSpringImpl

125− (cast motionValue ∷ MotionValue a |+| Number)

126− (cast springProps)

127−

128−useSpringWithNumber ∷

129− ∀ opts. Castable opts SpringProps => Number -> opts -> Hook (UseSpring (MotionValue Number)) (MotionValue Number)

130−useSpringWithNumber number springProps =

131− unsafeHook do

132− runEffectFn2

133− useSpringImpl

134− (cast number ∷ MotionValue Number |+| Number)

135− (cast springProps)

136−

137−foreign import data UseAnimation ∷ Type -> Type

138−

139−foreign import useAnimationImpl ∷ Effect AnimationControls

140−

141−useAnimation ∷ Hook UseAnimation AnimationControls

142−useAnimation = unsafeHook useAnimationImpl

src/Framer/Motion/MotionComponent.jsdeleted−14

@@ -1,14 +0,0 @@

1−const framerMotion = require("framer-motion")

2−

3−exports.motionComponentImpl = (str) => {

4− const html = ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "webview"]

5− const svg = ["animate", "circle", "clipPath", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use", "view"]

6− if (html.indexOf(str) === -1 && svg.indexOf(str) === -1) {

7− console.error("Tried to use non-existing motion component " + str)

8− }

9− return framerMotion.motion[str]

10−}

11−

12−exports.custom = (component) => () => {

13− return framerMotion.motion(component)

14−}

src/Framer/Motion/MotionComponent.pursdeleted−522

@@ -1,522 +0,0 @@

1−module Framer.Motion.MotionComponent where

2−

3−import Effect (Effect)

4−import Framer.Motion.Types (MotionProps)

5−import Prim.Row (class Union)

6−import React.Basic (ReactComponent)

7−import React.Basic.DOM as DOM

8−import React.Basic.DOM.Internal (SharedSVGProps)

9−import React.Basic.DOM.SVG as SVG

10−import Type.Row (type (+))

11−

12−foreign import motionComponentImpl ∷ ∀ a. String -> ReactComponent { | a }

13−

14−foreign import custom ∷

15− ∀ old.

16− ReactComponent { | old } ->

17− Effect (ReactComponent { | MotionProps old })

18−

19−-- DOM

20−abbr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_abbr) => ReactComponent { | attrs }

21−abbr = motionComponentImpl "abbr"

22−

23−address ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_address) => ReactComponent { | attrs }

24−address = motionComponentImpl "address"

25−

26−area ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_area) => ReactComponent { | attrs }

27−area = motionComponentImpl "area"

28−

29−article ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_article) => ReactComponent { | attrs }

30−article = motionComponentImpl "article"

31−

32−aside ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_aside) => ReactComponent { | attrs }

33−aside = motionComponentImpl "aside"

34−

35−audio ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_audio) => ReactComponent { | attrs }

36−audio = motionComponentImpl "audio"

37−

38−b ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_b) => ReactComponent { | attrs }

39−b = motionComponentImpl "b"

40−

41−base ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_base) => ReactComponent { | attrs }

42−base = motionComponentImpl "base"

43−

44−bdi ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdi) => ReactComponent { | attrs }

45−bdi = motionComponentImpl "bdi"

46−

47−bdo ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdo) => ReactComponent { | attrs }

48−bdo = motionComponentImpl "bdo"

49−

50−-- No support in React Basic Hooks

51−-- big :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_big) => ReactComponent { | attrs }

52−-- big = motionComponentImpl "big"

53−blockquote ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_blockquote) => ReactComponent { | attrs }

54−blockquote = motionComponentImpl "blockquote"

55−

56−body ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_body) => ReactComponent { | attrs }

57−body = motionComponentImpl "body"

58−

59−br ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_br) => ReactComponent { | attrs }

60−br = motionComponentImpl "br"

61−

62−button ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_button) => ReactComponent { | attrs }

63−button = motionComponentImpl "button"

64−

65−canvas ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_canvas) => ReactComponent { | attrs }

66−canvas = motionComponentImpl "canvas"

67−

68−caption ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_caption) => ReactComponent { | attrs }

69−caption = motionComponentImpl "caption"

70−

71−cite ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_cite) => ReactComponent { | attrs }

72−cite = motionComponentImpl "cite"

73−

74−code ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_code) => ReactComponent { | attrs }

75−code = motionComponentImpl "code"

76−

77−col ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_col) => ReactComponent { | attrs }

78−col = motionComponentImpl "col"

79−

80−colgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_colgroup) => ReactComponent { | attrs }

81−colgroup = motionComponentImpl "colgroup"

82−

83−_data ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_data) => ReactComponent { | attrs }

84−_data = motionComponentImpl "data"

85−

86−datalist ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_datalist) => ReactComponent { | attrs }

87−datalist = motionComponentImpl "datalist"

88−

89−dd ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dd) => ReactComponent { | attrs }

90−dd = motionComponentImpl "dd"

91−

92−del ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_del) => ReactComponent { | attrs }

93−del = motionComponentImpl "del"

94−

95−details ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_details) => ReactComponent { | attrs }

96−details = motionComponentImpl "details"

97−

98−dfn ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dfn) => ReactComponent { | attrs }

99−dfn = motionComponentImpl "dfn"

100−

101−dialog ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dialog) => ReactComponent { | attrs }

102−dialog = motionComponentImpl "dialog"

103−

104−div ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_div) => ReactComponent { | attrs }

105−div = motionComponentImpl "div"

106−

107−dl ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dl) => ReactComponent { | attrs }

108−dl = motionComponentImpl "dl"

109−

110−dt ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dt) => ReactComponent { | attrs }

111−dt = motionComponentImpl "dt"

112−

113−em ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_em) => ReactComponent { | attrs }

114−em = motionComponentImpl "em"

115−

116−embed ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_embed) => ReactComponent { | attrs }

117−embed = motionComponentImpl "embed"

118−

119−fieldset ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_fieldset) => ReactComponent { | attrs }

120−fieldset = motionComponentImpl "fieldset"

121−

122−figcaption ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figcaption) => ReactComponent { | attrs }

123−figcaption = motionComponentImpl "figcaption"

124−

125−figure ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figure) => ReactComponent { | attrs }

126−figure = motionComponentImpl "figure"

127−

128−footer ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_footer) => ReactComponent { | attrs }

129−footer = motionComponentImpl "footer"

130−

131−form ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_form) => ReactComponent { | attrs }

132−form = motionComponentImpl "form"

133−

134−h1 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h1) => ReactComponent { | attrs }

135−h1 = motionComponentImpl "h1"

136−

137−h2 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h2) => ReactComponent { | attrs }

138−h2 = motionComponentImpl "h2"

139−

140−h3 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h3) => ReactComponent { | attrs }

141−h3 = motionComponentImpl "h3"

142−

143−h4 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h4) => ReactComponent { | attrs }

144−h4 = motionComponentImpl "h4"

145−

146−h5 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h5) => ReactComponent { | attrs }

147−h5 = motionComponentImpl "h5"

148−

149−h6 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h6) => ReactComponent { | attrs }

150−h6 = motionComponentImpl "h6"

151−

152−head ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_head) => ReactComponent { | attrs }

153−head = motionComponentImpl "head"

154−

155−header ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_header) => ReactComponent { | attrs }

156−header = motionComponentImpl "header"

157−

158−hgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hgroup) => ReactComponent { | attrs }

159−hgroup = motionComponentImpl "hgroup"

160−

161−hr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hr) => ReactComponent { | attrs }

162−hr = motionComponentImpl "hr"

163−

164−html ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_html) => ReactComponent { | attrs }

165−html = motionComponentImpl "html"

166−

167−i ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_i) => ReactComponent { | attrs }

168−i = motionComponentImpl "i"

169−

170−iframe ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_iframe) => ReactComponent { | attrs }

171−iframe = motionComponentImpl "iframe"

172−

173−img ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_img) => ReactComponent { | attrs }

174−img = motionComponentImpl "img"

175−

176−input ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_input) => ReactComponent { | attrs }

177−input = motionComponentImpl "input"

178−

179−ins ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ins) => ReactComponent { | attrs }

180−ins = motionComponentImpl "ins"

181−

182−kbd ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_kbd) => ReactComponent { | attrs }

183−kbd = motionComponentImpl "kbd"

184−

185−keygen ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_keygen) => ReactComponent { | attrs }

186−keygen = motionComponentImpl "keygen"

187−

188−label ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_label) => ReactComponent { | attrs }

189−label = motionComponentImpl "label"

190−

191−legend ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_legend) => ReactComponent { | attrs }

192−legend = motionComponentImpl "legend"

193−

194−li ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_li) => ReactComponent { | attrs }

195−li = motionComponentImpl "li"

196−

197−link ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_link) => ReactComponent { | attrs }

198−link = motionComponentImpl "link"

199−

200−main ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_main) => ReactComponent { | attrs }

201−main = motionComponentImpl "main"

202−

203−map ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_map) => ReactComponent { | attrs }

204−map = motionComponentImpl "map"

205−

206−mark ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_mark) => ReactComponent { | attrs }

207−mark = motionComponentImpl "mark"

208−

209−menu ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menu) => ReactComponent { | attrs }

210−menu = motionComponentImpl "menu"

211−

212−menuitem ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menuitem) => ReactComponent { | attrs }

213−menuitem = motionComponentImpl "menuitem"

214−

215−meta ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meta) => ReactComponent { | attrs }

216−meta = motionComponentImpl "meta"

217−

218−meter ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meter) => ReactComponent { | attrs }

219−meter = motionComponentImpl "meter"

220−

221−nav ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_nav) => ReactComponent { | attrs }

222−nav = motionComponentImpl "nav"

223−

224−noscript ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_noscript) => ReactComponent { | attrs }

225−noscript = motionComponentImpl "noscript"

226−

227−object ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_object) => ReactComponent { | attrs }

228−object = motionComponentImpl "object"

229−

230−ol ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ol) => ReactComponent { | attrs }

231−ol = motionComponentImpl "ol"

232−

233−optgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_optgroup) => ReactComponent { | attrs }

234−optgroup = motionComponentImpl "optgroup"

235−

236−option ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_option) => ReactComponent { | attrs }

237−option = motionComponentImpl "option"

238−

239−output ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_output) => ReactComponent { | attrs }

240−output = motionComponentImpl "output"

241−

242−p ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_p) => ReactComponent { | attrs }

243−p = motionComponentImpl "p"

244−

245−param ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_param) => ReactComponent { | attrs }

246−param = motionComponentImpl "param"

247−

248−picture ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_picture) => ReactComponent { | attrs }

249−picture = motionComponentImpl "picture"

250−

251−pre ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_pre) => ReactComponent { | attrs }

252−pre = motionComponentImpl "pre"

253−

254−progress ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_progress) => ReactComponent { | attrs }

255−progress = motionComponentImpl "progress"

256−

257−q ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_q) => ReactComponent { | attrs }

258−q = motionComponentImpl "q"

259−

260−rp ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rp) => ReactComponent { | attrs }

261−rp = motionComponentImpl "rp"

262−

263−rt ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rt) => ReactComponent { | attrs }

264−rt = motionComponentImpl "rt"

265−

266−ruby ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ruby) => ReactComponent { | attrs }

267−ruby = motionComponentImpl "ruby"

268−

269−s ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_s) => ReactComponent { | attrs }

270−s = motionComponentImpl "s"

271−

272−samp ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_samp) => ReactComponent { | attrs }

273−samp = motionComponentImpl "samp"

274−

275−script ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_script) => ReactComponent { | attrs }

276−script = motionComponentImpl "script"

277−

278−section ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_section) => ReactComponent { | attrs }

279−section = motionComponentImpl "section"

280−

281−select ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_select) => ReactComponent { | attrs }

282−select = motionComponentImpl "select"

283−

284−small ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_small) => ReactComponent { | attrs }

285−small = motionComponentImpl "small"

286−

287−source ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_source) => ReactComponent { | attrs }

288−source = motionComponentImpl "source"

289−

290−span ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_span) => ReactComponent { | attrs }

291−span = motionComponentImpl "span"

292−

293−strong ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_strong) => ReactComponent { | attrs }

294−strong = motionComponentImpl "strong"

295−

296−style ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_style) => ReactComponent { | attrs }

297−style = motionComponentImpl "style"

298−

299−sub ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sub) => ReactComponent { | attrs }

300−sub = motionComponentImpl "sub"

301−

302−summary ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_summary) => ReactComponent { | attrs }

303−summary = motionComponentImpl "summary"

304−

305−sup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sup) => ReactComponent { | attrs }

306−sup = motionComponentImpl "sup"

307−

308−table ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_table) => ReactComponent { | attrs }

309−table = motionComponentImpl "table"

310−

311−tbody ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tbody) => ReactComponent { | attrs }

312−tbody = motionComponentImpl "tbody"

313−

314−td ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_td) => ReactComponent { | attrs }

315−td = motionComponentImpl "td"

316−

317−textarea ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_textarea) => ReactComponent { | attrs }

318−textarea = motionComponentImpl "textarea"

319−

320−tfoot ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tfoot) => ReactComponent { | attrs }

321−tfoot = motionComponentImpl "tfoot"

322−

323−th ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_th) => ReactComponent { | attrs }

324−th = motionComponentImpl "th"

325−

326−thead ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_thead) => ReactComponent { | attrs }

327−thead = motionComponentImpl "thead"

328−

329−time ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_time) => ReactComponent { | attrs }

330−time = motionComponentImpl "time"

331−

332−title ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_title) => ReactComponent { | attrs }

333−title = motionComponentImpl "title"

334−

335−tr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tr) => ReactComponent { | attrs }

336−tr = motionComponentImpl "tr"

337−

338−track ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_track) => ReactComponent { | attrs }

339−track = motionComponentImpl "track"

340−

341−u ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_u) => ReactComponent { | attrs }

342−u = motionComponentImpl "u"

343−

344−ul ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ul) => ReactComponent { | attrs }

345−ul = motionComponentImpl "ul"

346−

347−var ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_var) => ReactComponent { | attrs }

348−var = motionComponentImpl "var"

349−

350−video ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_video) => ReactComponent { | attrs }

351−video = motionComponentImpl "video"

352−

353−wbr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_wbr) => ReactComponent { | attrs }

354−wbr = motionComponentImpl "wbr"

355−

356−-- No support in React.Basic.Hooks

357−-- webview :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_webview) => ReactComponent { | attrs }

358−-- webview = motionComponentImpl "webview"

359−svgAnimate ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_animate) => ReactComponent { | attrs }

360−svgAnimate = motionComponentImpl "animate"

361−

362−circle ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_circle) => ReactComponent { | attrs }

363−circle = motionComponentImpl "circle"

364−

365−clipPath ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_clipPath) => ReactComponent { | attrs }

366−clipPath = motionComponentImpl "clipPath"

367−

368−defs ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_defs) => ReactComponent { | attrs }

369−defs = motionComponentImpl "defs"

370−

371−desc ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_desc) => ReactComponent { | attrs }

372−desc = motionComponentImpl "desc"

373−

374−ellipse ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_ellipse) => ReactComponent { | attrs }

375−ellipse = motionComponentImpl "ellipse"

376−

377−feBlend ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feBlend) => ReactComponent { | attrs }

378−feBlend = motionComponentImpl "feBlend"

379−

380−feColorMatrix ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feColorMatrix) => ReactComponent { | attrs }

381−feColorMatrix = motionComponentImpl "feColorMatrix"

382−

383−feComponentTransfer ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComponentTransfer) => ReactComponent { | attrs }

384−feComponentTransfer = motionComponentImpl "feComponentTransfer"

385−

386−feComposite ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComposite) => ReactComponent { | attrs }

387−feComposite = motionComponentImpl "feComposite"

388−

389−feConvolveMatrix ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feConvolveMatrix) => ReactComponent { | attrs }

390−feConvolveMatrix = motionComponentImpl "feConvolveMatrix"

391−

392−feDiffuseLighting ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDiffuseLighting) => ReactComponent { | attrs }

393−feDiffuseLighting = motionComponentImpl "feDiffuseLighting"

394−

395−feDisplacementMap ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDisplacementMap) => ReactComponent { | attrs }

396−feDisplacementMap = motionComponentImpl "feDisplacementMap"

397−

398−feDistantLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDistantLight) => ReactComponent { | attrs }

399−feDistantLight = motionComponentImpl "feDistantLight"

400−

401−feDropShadow ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDropShadow) => ReactComponent { | attrs }

402−feDropShadow = motionComponentImpl "feDropShadow"

403−

404−feFlood ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFlood) => ReactComponent { | attrs }

405−feFlood = motionComponentImpl "feFlood"

406−

407−feFuncA ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncA) => ReactComponent { | attrs }

408−feFuncA = motionComponentImpl "feFuncA"

409−

410−feFuncB ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncB) => ReactComponent { | attrs }

411−feFuncB = motionComponentImpl "feFuncB"

412−

413−feFuncG ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncG) => ReactComponent { | attrs }

414−feFuncG = motionComponentImpl "feFuncG"

415−

416−feFuncR ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncR) => ReactComponent { | attrs }

417−feFuncR = motionComponentImpl "feFuncR"

418−

419−feGaussianBlur ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feGaussianBlur) => ReactComponent { | attrs }

420−feGaussianBlur = motionComponentImpl "feGaussianBlur"

421−

422−feImage ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feImage) => ReactComponent { | attrs }

423−feImage = motionComponentImpl "feImage"

424−

425−feMerge ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMerge) => ReactComponent { | attrs }

426−feMerge = motionComponentImpl "feMerge"

427−

428−feMergeNode ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMergeNode) => ReactComponent { | attrs }

429−feMergeNode = motionComponentImpl "feMergeNode"

430−

431−feMorphology ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMorphology) => ReactComponent { | attrs }

432−feMorphology = motionComponentImpl "feMorphology"

433−

434−feOffset ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feOffset) => ReactComponent { | attrs }

435−feOffset = motionComponentImpl "feOffset"

436−

437−fePointLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_fePointLight) => ReactComponent { | attrs }

438−fePointLight = motionComponentImpl "fePointLight"

439−

440−feSpecularLighting ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpecularLighting) => ReactComponent { | attrs }

441−feSpecularLighting = motionComponentImpl "feSpecularLighting"

442−

443−feSpotLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpotLight) => ReactComponent { | attrs }

444−feSpotLight = motionComponentImpl "feSpotLight"

445−

446−feTile ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTile) => ReactComponent { | attrs }

447−feTile = motionComponentImpl "feTile"

448−

449−feTurbulence ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTurbulence) => ReactComponent { | attrs }

450−feTurbulence = motionComponentImpl "feTurbulence"

451−

452−filter ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_filter) => ReactComponent { | attrs }

453−filter = motionComponentImpl "filter"

454−

455−foreignObject ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_foreignObject) => ReactComponent { | attrs }

456−foreignObject = motionComponentImpl "foreignObject"

457−

458−g ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_g) => ReactComponent { | attrs }

459−g = motionComponentImpl "g"

460−

461−image ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_image) => ReactComponent { | attrs }

462−image = motionComponentImpl "image"

463−

464−line ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_line) => ReactComponent { | attrs }

465−line = motionComponentImpl "line"

466−

467−linearGradient ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_linearGradient) => ReactComponent { | attrs }

468−linearGradient = motionComponentImpl "linearGradient"

469−

470−marker ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_marker) => ReactComponent { | attrs }

471−marker = motionComponentImpl "marker"

472−

473−mask ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_mask) => ReactComponent { | attrs }

474−mask = motionComponentImpl "mask"

475−

476−metadata ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_metadata) => ReactComponent { | attrs }

477−metadata = motionComponentImpl "metadata"

478−

479−path ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SharedSVGProps SVG.Props_path) => ReactComponent { | attrs }

480−path = motionComponentImpl "path"

481−

482−pattern ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_pattern) => ReactComponent { | attrs }

483−pattern = motionComponentImpl "pattern"

484−

485−polygon ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polygon) => ReactComponent { | attrs }

486−polygon = motionComponentImpl "polygon"

487−

488−polyline ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polyline) => ReactComponent { | attrs }

489−polyline = motionComponentImpl "polyline"

490−

491−radialGradient ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_radialGradient) => ReactComponent { | attrs }

492−radialGradient = motionComponentImpl "radialGradient"

493−

494−rect ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_rect) => ReactComponent { | attrs }

495−rect = motionComponentImpl "rect"

496−

497−stop ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_stop) => ReactComponent { | attrs }

498−stop = motionComponentImpl "stop"

499−

500−svg ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_svg) => ReactComponent { | attrs }

501−svg = motionComponentImpl "svg"

502−

503−svgSwitch ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_switch) => ReactComponent { | attrs }

504−svgSwitch = motionComponentImpl "switch"

505−

506−symbol ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_symbol) => ReactComponent { | attrs }

507−symbol = motionComponentImpl "symbol"

508−

509−text ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_text) => ReactComponent { | attrs }

510−text = motionComponentImpl "text"

511−

512−textPath ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_textPath) => ReactComponent { | attrs }

513−textPath = motionComponentImpl "textPath"

514−

515−tspan ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_tspan) => ReactComponent { | attrs }

516−tspan = motionComponentImpl "tspan"

517−

518−use ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_use) => ReactComponent { | attrs }

519−use = motionComponentImpl "use"

520−

521−view ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_view) => ReactComponent { | attrs }

522−view = motionComponentImpl "view"

src/Framer/Motion/Types.jsdeleted−4

@@ -1,4 +0,0 @@

1−const framerMotion = require("framer-motion")

2−

3−exports.infinity = Infinity

4−

src/Framer/Motion/Types.pursdeleted−375

@@ -1,375 +0,0 @@

1−module Framer.Motion.Types where

2−

3−import Prelude

4−

5−import Data.Nullable (Nullable)

6−import Data.Symbol (class IsSymbol, reflectSymbol)

7−import Effect (Effect)

8−import Effect.Uncurried (EffectFn1, EffectFn2, mkEffectFn1, mkEffectFn2)

9−import Foreign (Foreign, unsafeToForeign)

10−import Foreign.Object (Object)

11−import Heterogeneous.Mapping (class HMapWithIndex, class MappingWithIndex, hmapWithIndex)

12−import Literals.Undefined (Undefined)

13−import React.Basic (JSX)

14−import React.Basic.DOM (CSS, css)

15−import React.Basic.Hooks (Ref)

16−import Type.Proxy (Proxy)

17−import Unsafe.Coerce (unsafeCoerce)

18−import Untagged.Castable (class Castable, cast)

19−import Untagged.Union (type (|+|))

20−import Web.DOM (Node)

21−import Web.Event.Internal.Types (Event)

22−import Web.UIEvent.MouseEvent (MouseEvent)

23−import Yoga.Block.Internal (Id)

24−

25−type MotionPropsF :: (Type -> Type) -> Row Type -> Row Type

26−type MotionPropsF f r =

27− ( animate ∷ f Animate

28− , custom ∷ f Foreign

29− , drag ∷ f Drag

30− , dragConstraints ∷ f DragConstraints

31− , dragElastic ∷ f DragElastic

32− , dragMomentum ∷ f DragMomentum

33− , dragPropagation ∷ f DragPropagation

34− , exit ∷ f Exit

35− , initial ∷ f Initial

36− , layout ∷ f Layout

37− , layoutId ∷ f LayoutId

38− , onAnimationComplete ∷ f OnAnimationComplete

39− , onAnimationStart ∷ f OnAnimationStart

40− , onDrag ∷ f OnDrag

41− , onDragEnd ∷ f OnDragEnd

42− , onDragStart ∷ f OnDragStart

43− , onPan ∷ f OnPan

44− , onPanEnd ∷ f OnPanEnd

45− , onPanStart ∷ f OnPanStart

46− , onHoverEnd ∷ f OnHoverEnd

47− , onHoverStart ∷ f OnHoverStart

48− , onLayoutAnimationComplete ∷ f OnLayoutAnimationComplete

49− , onTap ∷ f OnTap

50− , onTapCancel ∷ f OnTapCancel

51− , onTapEnd ∷ f OnTapEnd

52− , onTapStart ∷ f OnTapStart

53− , onViewportBoxUpdate ∷ f OnViewportBoxUpdate

54− , transition ∷ f Transition

55− , variants ∷ f Variants

56− , whileHover ∷ f WhileHover

57− , whileTap ∷ f WhileTap

58− | r

59− )

60−

61−

62−type Drag = Boolean |+| String |+| Undefined

63−

64−type MotionProps :: Row Type -> Row Type

65−type MotionProps r =

66− MotionPropsF Id r

67−

68−type Transition =

69− CSS |+| Undefined

70−

71−newtype VariantLabel = VariantLabel String

72−

73−data Target

74− = Target

75−

76−type Exit =

77− CSS |+| VariantLabel |+| Array VariantLabel |+| Undefined

78−

79−foreign import data AnimationControls ∷ Type

80−

81−

82−prop ∷ ∀ a b. Castable a b => a -> b

83−prop = cast

84−

85−type Animate =

86− CSS

87− |+| VariantLabel

88− |+| Array VariantLabel

89− |+| AnimationControls

90− |+| Undefined

91−

92−type Initial =

93− Boolean |+| CSS |+| VariantLabel |+| Array VariantLabel |+| Undefined

94−

95−type Layout =

96− Boolean |+| Undefined

97−

98−type Variants =

99− CSS |+| Undefined

100−

101−type LayoutTransition =

102− Boolean |+| Undefined

103−

104−-- type Drag =

105−-- Boolean |+| String |+| Undefined

106−

107−type DragMomentum =

108− Boolean |+| Undefined

109−

110−dragMomentum ∷ ∀ c. Castable c DragMomentum => c -> DragMomentum

111−dragMomentum = cast

112−

113−type DragConstraints =

114− Ref (Nullable Node) |+| BoundingBox2D |+| Undefined

115−

116−type DragElastic = Boolean |+| Number |+| BoundingBox2D |+| Undefined

117−

118−dragElastic ∷ ∀ c. Castable c DragElastic => c -> DragElastic

119−dragElastic = cast

120−

121−dragElasticBoundingBox ∷ ∀ a. Castable a BoundingBox2D => a -> DragElastic

122−dragElasticBoundingBox x = cast ((cast x) ∷ BoundingBox2D)

123−

124−type BoundingBox2D =

125− { left ∷ Int |+| Number |+| Undefined

126− , right ∷ Int |+| Number |+| Undefined

127− , top ∷ Int |+| Number |+| Undefined

128− , bottom ∷ Int |+| Number |+| Undefined

129− }

130−

131−boundingBox2D ∷ ∀ c. Castable c BoundingBox2D => c -> BoundingBox2D

132−boundingBox2D = cast

133−

134−type Point2D =

135− { x ∷ Number, y ∷ Number }

136−

137−type PanInfo =

138− { point ∷ Point2D, delta ∷ Point2D, offset ∷ Point2D, velocity ∷ Point2D }

139−

140−type OnDragStart =

141− (EffectFn2 Event PanInfo Unit |+| Undefined)

142−

143−type OnDragEnd =

144− (EffectFn2 Event PanInfo Unit |+| Undefined)

145−

146−type OnDrag =

147− (EffectFn2 Event PanInfo Unit |+| Undefined)

148−

149−type OnPanStart =

150− (EffectFn2 Event PanInfo Unit |+| Undefined)

151−

152−type OnPanEnd =

153− (EffectFn2 Event PanInfo Unit |+| Undefined)

154−

155−type OnPan =

156− (EffectFn2 Event PanInfo Unit |+| Undefined)

157−

158−type WhileTap =

159− TargetAndTransition |+| String |+| Undefined

160−

161−type OnTap =

162− (EffectFn2 Event TapInfo Unit |+| Undefined)

163−

164−type OnTapStart =

165− (EffectFn2 Event TapInfo Unit |+| Undefined)

166−

167−type OnTapEnd =

168− (EffectFn2 Event TapInfo Unit |+| Undefined)

169−

170−type OnTapCancel =

171− (EffectFn2 Event TapInfo Unit |+| Undefined)

172−

173−onTapStart ∷ (Event -> TapInfo -> Effect Unit) -> OnTapStart

174−onTapStart = cast <<< toEffectFn

175−

176−onTapEnd ∷ (Event -> TapInfo -> Effect Unit) -> OnTapEnd

177−onTapEnd = cast <<< toEffectFn

178−

179−onTap ∷ (Event -> TapInfo -> Effect Unit) -> OnTap

180−onTap fn2 = cast (mkEffectFn2 fn2)

181−

182−onTapCancel ∷ (Event -> TapInfo -> Effect Unit) -> OnTap

183−onTapCancel fn2 = cast (mkEffectFn2 fn2)

184−

185−type Axis =

186− { min ∷ Number, max ∷ Number }

187−

188−type AxisBox2D =

189− { x ∷ Axis

190− , y ∷ Axis

191− }

192−

193−type EventInfo =

194− { point ∷ { x ∷ Number, y ∷ Number }

195− }

196−

197−type AxisDelta =

198− { translate ∷ Number

199− , scale ∷ Number

200− , origin ∷ Number

201− , originPoint ∷ Number

202− }

203−

204−type BoxDelta =

205− { x ∷ AxisDelta

206− , y ∷ AxisDelta

207− }

208−

209−-- [TODO]: Fix this eventually?

210−type AnimationDefinition = Foreign -- VariantLabel |+| TargetAndTransition |+| TargetResolver

211−

212−type OnAnimationComplete =

213− (EffectFn1 AnimationDefinition Unit |+| Undefined)

214−

215−onAnimationComplete :: (AnimationDefinition -> Effect Unit) -> OnAnimationComplete

216−onAnimationComplete = cast <<< toEffectFn

217−

218−type OnAnimationStart =

219− (Effect Unit |+| Undefined)

220−

221−onAnimationStart :: (Effect Unit) -> OnAnimationStart

222−onAnimationStart = cast

223−

224−type OnHoverStart =

225− (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

226−

227−onHoverStart ∷ (MouseEvent -> EventInfo -> Effect Unit) -> OnHoverStart

228−onHoverStart = cast <<< toEffectFn

229−

230−type OnHoverEnd =

231− (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

232−

233−onHoverEnd ∷ (MouseEvent -> EventInfo -> Effect Unit) -> OnHoverEnd

234−onHoverEnd = cast <<< toEffectFn

235−

236−type WhileHover =

237− (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

238−

239−whileHover ∷ ∀ c. Castable c WhileHover => c -> WhileHover

240−whileHover = cast

241−

242−type OnLayoutAnimationComplete =

243− (Effect Unit |+| Undefined)

244−

245−onLayoutAnimationComplete ∷ Effect Unit -> OnLayoutAnimationComplete

246−onLayoutAnimationComplete = cast

247−

248−type OnViewportBoxUpdate =

249− (EffectFn2 AxisBox2D BoxDelta Unit |+| Undefined)

250−

251−onViewportBoxUpdate ∷ (AxisBox2D -> BoxDelta -> Effect Unit) -> OnViewportBoxUpdate

252−onViewportBoxUpdate = cast <<< toEffectFn

253−

254−type TapInfo =

255− { x ∷ Number, y ∷ Number }

256−

257−-- Can contain "transition" and "transitionEnd"

258−type TargetAndTransition =

259− CSS

260−

261−type DragPropagation =

262− Boolean |+| Undefined

263−

264−whileTap ∷ ∀ c. Castable c WhileTap => c -> WhileTap

265−whileTap = cast

266−

267−class EffectFnMaker fn effectFn | fn -> effectFn where

268− toEffectFn ∷ fn -> effectFn

269−

270−instance callbackableEffectFn2 ∷ EffectFnMaker (a -> b -> Effect c) (EffectFn2 a b c) where

271− toEffectFn = mkEffectFn2

272−

273−instance callbackableEffectFn1 ∷ EffectFnMaker (a -> Effect b) (EffectFn1 a b) where

274− toEffectFn = mkEffectFn1

275−

276−callback ∷ ∀ a c f. Castable c a => EffectFnMaker f c => f -> a

277−callback = cast <<< toEffectFn

278−

279−onDragStart ∷ (Event -> PanInfo -> Effect Unit) -> OnDragStart

280−onDragStart = cast <<< toEffectFn

281−

282−onDragEnd ∷ (Event -> PanInfo -> Effect Unit) -> OnDragEnd

283−onDragEnd = cast <<< toEffectFn

284−

285−onDrag ∷ (Event -> PanInfo -> Effect Unit) -> OnDrag

286−onDrag fn2 = cast (mkEffectFn2 fn2)

287−

288−onPanStart ∷ (Event -> PanInfo -> Effect Unit) -> OnPanStart

289−onPanStart = cast <<< toEffectFn

290−

291−onPanEnd ∷ (Event -> PanInfo -> Effect Unit) -> OnPanEnd

292−onPanEnd = cast <<< toEffectFn

293−

294−onPan ∷ (Event -> PanInfo -> Effect Unit) -> OnPan

295−onPan fn2 = cast (mkEffectFn2 fn2)

296−

297−customProp ∷ ∀ a. a -> Foreign

298−customProp = unsafeToForeign

299−

300−type LayoutId =

301− String |+| Undefined

302−

303−layoutId ∷ ∀ a. Castable a LayoutId => a -> LayoutId

304−layoutId = cast

305−

306−animate ∷ ∀ a. Castable a Animate => a -> Animate

307−animate = cast

308−

309−initial ∷ ∀ a. Castable a Initial => a -> Initial

310−initial = cast

311−

312−transition ∷ ∀ r. { | r } -> Transition

313−transition = cast <<< css

314−

315−drag ∷ ∀ a. Castable a Drag => a -> Drag

316−drag = cast

317−

318−dragConstraints ∷ ∀ a. Castable a DragConstraints => a -> DragConstraints

319−dragConstraints = cast

320−

321−dragConstraintsBoundingBox ∷ ∀ a. Castable a BoundingBox2D => a -> DragConstraints

322−dragConstraintsBoundingBox x = cast ((cast x) ∷ BoundingBox2D)

323−

324−dragPropagation ∷ ∀ a. Castable a DragPropagation => a -> DragPropagation

325−dragPropagation = cast

326−

327−exit ∷ ∀ a. Castable a Exit => a -> Exit

328−exit = cast

329−

330−variants ∷ ∀ r. { | r } -> Variants

331−variants = cast <<< css

332−

333−variantsFromObject ∷ ∀ o. Object o -> Variants

334−variantsFromObject = cast <<< (unsafeCoerce ∷ _ -> CSS)

335−

336−layout ∷ ∀ a. Castable a Layout => a -> Layout

337−layout = cast

338−

339−data MakeVariantLabel

340− = MakeVariantLabel

341−

342−instance makeVariantLabels' ∷

343− (IsSymbol sym) =>

344− MappingWithIndex MakeVariantLabel (Proxy sym) a VariantLabel where

345− mappingWithIndex MakeVariantLabel prop' _ = VariantLabel (reflectSymbol prop')

346−

347−makeVariantLabels ∷ ∀ a b. HMapWithIndex MakeVariantLabel a b => a -> b

348−makeVariantLabels = hmapWithIndex MakeVariantLabel

349−

350−foreign import data Infinity ∷ Type

351−

352−foreign import infinity ∷ Infinity

353−

354−type AnimatePresenceProps =

355− ( initial ∷ Boolean

356− , custom ∷ ∀ a. a

357− , exitBeforeEnter ∷ Boolean

358− , onExitComplete ∷ Effect Unit

359− , children ∷ Array JSX

360− )

361−

362−type AnimateSharedLayoutProps =

363− ( type ∷ AnimateSharedLayoutType

364− , children ∷ Array JSX

365− )

366−

367−newtype AnimateSharedLayoutType = AnimateSharedLayoutType String

368−

369−switch ∷ AnimateSharedLayoutType

370−switch = AnimateSharedLayoutType "switch"

371−

372−crossfade ∷ AnimateSharedLayoutType

373−crossfade = AnimateSharedLayoutType "crossfade"

374−

375−foreign import data AnimationPlaybackControls ∷ Type

src/Framer/MotionValue.jsdeleted−12

@@ -1,12 +0,0 @@

1−const framerMotion = require("framer-motion")

2−

3−exports.useMotionValueImpl = framerMotion.useMotionValue

4−exports.get = mv => () => { return mv.get() }

5−exports.setImpl = v => render => mv => () => {

6− mv.set(v, render)

7−}

8−exports.isAnimating = mv => () => { return mv.isAnimating() }

9−exports.stop = mv => () => { return mv.stop() }

10−exports.onChangeImpl = callback => mv => { return () => mv.onChange(callback); }

11−exports.animateImpl = framerMotion.animate

12−exports.stopAnimation = (playbackControls) => playbackControls.stop

src/Framer/MotionValue.pursdeleted−42

@@ -1,42 +0,0 @@

1−module MotionValue where

2−

3−import Prelude

4−import Effect (Effect)

5−import Effect.Uncurried (EffectFn1, EffectFn3, mkEffectFn1, runEffectFn1, runEffectFn3)

6−import Framer.Motion.Types (AnimationPlaybackControls)

7−import React.Basic.Hooks (Hook, unsafeHook)

8−

9−foreign import data MotionValue ∷ Type -> Type

10−

11−foreign import data UseMotionValue ∷ Type -> Type -> Type

12−

13−foreign import useMotionValueImpl ∷ ∀ a. EffectFn1 a (MotionValue a)

14−

15−foreign import get ∷ ∀ a. (MotionValue a) -> Effect a

16−

17−foreign import setImpl ∷ ∀ a. a -> Boolean -> (MotionValue a) -> Effect Unit

18−

19−setButDoNotRender ∷ ∀ a. a -> MotionValue a -> Effect Unit

20−setButDoNotRender v = setImpl v false

21−

22−set ∷ ∀ a. a -> MotionValue a -> Effect Unit

23−set v = setImpl v true

24−

25−foreign import isAnimating ∷ ∀ a. MotionValue a -> Effect Boolean

26−

27−foreign import stop ∷ ∀ a. MotionValue a -> Effect Unit

28−

29−foreign import onChangeImpl ∷ ∀ a. EffectFn1 a Unit -> MotionValue a -> Effect (Effect Unit)

30−

31−onChange ∷ ∀ a. (a -> Effect Unit) -> MotionValue a -> Effect (Effect Unit)

32−onChange = mkEffectFn1 >>> onChangeImpl

33−

34−useMotionValue ∷ ∀ a. a -> Hook (UseMotionValue a) (MotionValue a)

35−useMotionValue = unsafeHook <<< runEffectFn1 useMotionValueImpl

36−

37−foreign import animateImpl ∷ ∀ a options. EffectFn3 (MotionValue a) a { | options } AnimationPlaybackControls

38−

39−animate ∷ ∀ a options. a -> Record options -> MotionValue a -> Effect AnimationPlaybackControls

40−animate target opts value = runEffectFn3 animateImpl value target opts

41−

42−foreign import stopAnimation ∷ AnimationPlaybackControls -> Effect Unit

src/React/Basic/Popper/Story.purs+1−1

@@ -153,7 +153,7 @@ animatedPopper = do

153153 [ animatePresence

154154 $ guard on

155155 [ content

156− [ Block.box </ {} /> [ text "Ich bin Stinky Bill" ]

156+ [ Block.box {} [ text "Ich bin Stinky Bill" ]

157157 , arrow

158158 ]

159159 ]

src/React/FocusTrap.jsdeleted−1

@@ -1 +0,0 @@

1−exports.focusTrap_ = require('focus-trap-react');

src/React/FocusTrap.pursdeleted−26

@@ -1,26 +0,0 @@

1−module React.FocusTrap (focusTrap) where

2−

3−import Prelude

4−import Effect (Effect)

5−import Prim.Row (class Union)

6−import React.Basic (JSX, ReactComponent)

7−import Web.DOM (Node)

8−import Web.HTML (HTMLElement)

9−

10−foreign import focusTrap_ ∷ ∀ p. ReactComponent { | p }

11−

12−focusTrap ∷ ∀ p q. Union p q Props => ReactComponent { | p }

13−focusTrap = focusTrap_

14−

15−type Props =

16− ( focusTrapOptions ∷

17− { onActivate ∷ Effect Unit

18− , onDeactivate ∷ Effect Unit

19− , initialFocus ∷ Effect Node

20− , fallbackFocus ∷ Effect Node

21− }

22− , active ∷ Boolean

23− , paused ∷ Boolean

24− , containerElements ∷ Array HTMLElement

25− , children ∷ JSX

26− )

src/Yoga/Block.purs+50−13

@@ -1,7 +1,8 @@

11module Yoga.Block where

22

3−import Prim.Row (class Union)

3+import Prim.Row (class Lacks, class Union)

44import React.Basic (JSX, ReactComponent)

5+import Yoga (el)

56import Yoga.Block.Atom.Button as Button

67import Yoga.Block.Atom.Icon as Icon

78import Yoga.Block.Atom.Input as Input

@@ -22,17 +23,41 @@ import Yoga.Block.Layout.Switcher as Switcher

2223import Yoga.Block.Molecule.Modal as Modal

2324import Yoga.Block.Molecule.ReadMore as ReadMore

2425

25−box ∷ ∀ p q. Union p q Box.Props => ReactComponent { | p }

26−box = Box.component

26+box' ∷ ∀ p q. Union p q Box.Props => ReactComponent { | p }

27+box' = Box.component

2728

28−button ∷ ∀ p q. Union p q Button.Props => ReactComponent { | p }

29−button = Button.component

29+box ∷ ∀ p q. Lacks "children" p => Union p q Box.PropsNoChildren => { | p } -> Array JSX -> JSX

30+box = el box'

3031

31−centre ∷ ∀ p q. Union p q Centre.Props => ReactComponent { | p }

32−centre = Centre.component

32+box_ ∷ Array JSX -> JSX

33+box_ = box {}

3334

34−cluster ∷ ∀ p q. Union p q Cluster.Props => ReactComponent { | p }

35−cluster = Cluster.component

35+button' ∷ ∀ p q. Union p q Button.Props => ReactComponent { | p }

36+button' = Button.component

37+

38+button ∷ ∀ p q. Lacks "children" p => Union p q Button.PropsNoChildren => { | p } -> Array JSX -> JSX

39+button = el button'

40+

41+button_ ∷ Array JSX -> JSX

42+button_ = button {}

43+

44+centre' ∷ ∀ p q. Union p q Centre.Props => ReactComponent { | p }

45+centre' = Centre.component

46+

47+centre ∷ ∀ p q. Lacks "children" p => Union p q Centre.PropsNoChildren => { | p } -> Array JSX -> JSX

48+centre = el centre'

49+

50+centre_ ∷ Array JSX -> JSX

51+centre_ = centre {}

52+

53+cluster' ∷ ∀ p q. Union p q Cluster.Props => ReactComponent { | p }

54+cluster' = Cluster.component

55+

56+cluster ∷ ∀ p q. Lacks "children" p => Union p q Cluster.PropsNoChildren => { | p } -> Array JSX -> JSX

57+cluster = el cluster'

58+

59+cluster_ ∷ Array JSX -> JSX

60+cluster_ = cluster {}

3661

3762container ∷ ∀ p q. Union p q Container.Props => ReactComponent { | p }

3863container = Container.component

@@ -61,11 +86,23 @@ range = Range.component

6186segmented ∷ ReactComponent Segmented.Props

6287segmented = Segmented.component

6388

64−sidebar ∷ ∀ p q. Union p q Sidebar.Props => ReactComponent { children ∷ Array JSX | p }

65−sidebar = Sidebar.component

89+sidebar' ∷ ∀ p q. Union p q Sidebar.Props => ReactComponent { sidebar ∷ JSX, children ∷ Array JSX | p }

90+sidebar' = Sidebar.component

91+

92+sidebar ∷ ∀ p q. Lacks "children" p => Union p q Sidebar.Props => { sidebar ∷ JSX | p } -> Array JSX -> JSX

93+sidebar = el sidebar'

94+

95+sidebar_ ∷ JSX -> Array JSX -> JSX

96+sidebar_ jsx = sidebar { sidebar: jsx }

97+

98+stack' ∷ ∀ p q. Union p q Stack.Props => ReactComponent { children ∷ Array JSX | p }

99+stack' = Stack.component

100+

101+stack ∷ ∀ p q. Lacks "children" p => Union p q Stack.Props => { | p } -> Array JSX -> JSX

102+stack = el stack'

66103

67−stack ∷ ∀ p q. Union p q Stack.Props => ReactComponent { children ∷ Array JSX | p }

68−stack = Stack.component

104+stack_ ∷ Array JSX -> JSX

105+stack_ = stack {}

69106

70107switcher ∷ ∀ p q. Union p q Switcher.Props => ReactComponent { | p }

71108switcher = Switcher.component

src/Yoga/Block/Atom/Button.purs+1−1

@@ -2,4 +2,4 @@ module Yoga.Block.Atom.Button

22 ( module Yoga.Block.Atom.Button.View

33 ) where

44

5−import Yoga.Block.Atom.Button.View (component, Props)

5+import Yoga.Block.Atom.Button.View (component, Props, PropsNoChildren)

src/Yoga/Block/Atom/Button/Story.purs+47−48

@@ -7,10 +7,9 @@ import React.Basic (JSX, element, fragment)

77import React.Basic.DOM as R

88import React.Basic.Emotion (str)

99import React.Basic.Emotion as E

10−import Yoga ((/>), (</), (</>))

10+import Yoga ((</>))

1111import Yoga.Block as Block

1212import Yoga.Block.Atom.Button.Types as ButtonType

13−import Yoga.Block.Atom.Button.View as Button

1413import Yoga.Block.Container.Style (colour, size)

1514import Yoga.Block.Container.Style as Styles

1615import Yoga.Block.Icon.SVG as Icon

@@ -24,12 +23,12 @@ default ∷

2423default =

2524 { title: "Atom/Button"

2625 , decorators:

27− [ \storyFn ->

28− R.div_

29− [ element E.global { styles: Styles.global }

30− , unsafePerformEffect storyFn

31− ]

32− ]

26+ [ \storyFn ->

27+ R.div_

28+ [ element E.global { styles: Styles.global }

29+ , unsafePerformEffect storyFn

30+ ]

31+ ]

3332 }

3433

3534button ∷ Effect JSX

@@ -39,34 +38,34 @@ button = do

3938 [ R.div_

4039 [ R.h1_ [ R.text "Button Examples" ]

4140 , R.h2_ [ R.text "Button types" ]

42− , Block.cluster </ { space: "var(--s-1)" }

43− /> [ Button.component </ { buttonType: ButtonType.Generic } /> [ R.text "Generic" ]

44− , Button.component </ { buttonType: ButtonType.Primary } /> [ R.text "Primary" ]

45− , Button.component </ { buttonType: ButtonType.Dangerous } /> [ R.text "Dangerous" ]

46− , Button.component </ { css: customStyle } /> [ R.text "Custom" ]

47− , Button.component </ { css: customStyle2 } /> [ R.text "Custom 2" ]

48− ]

41+ , Block.cluster { space: "var(--s-1)" }

42+ [ Block.button { buttonType: ButtonType.Generic } [ R.text "Generic" ]

43+ , Block.button { buttonType: ButtonType.Primary } [ R.text "Primary" ]

44+ , Block.button { buttonType: ButtonType.Dangerous } [ R.text "Dangerous" ]

45+ , Block.button { css: customStyle } [ R.text "Custom" ]

46+ , Block.button { css: customStyle2 } [ R.text "Custom 2" ]

47+ ]

4948 , R.h2_ [ R.text "Button shapes" ]

50− , Block.cluster </ { space: "var(--s-1)" }

51− /> [ Button.component </ { buttonType: ButtonType.Generic, buttonShape: ButtonType.Pill } /> [ R.text "Generic" ]

52− , Button.component </ { buttonType: ButtonType.Primary, buttonShape: ButtonType.Pill } /> [ R.text "Primary" ]

53− , Button.component </ { css: customStyle, buttonShape: ButtonType.Pill } /> [ R.text "+ Custom" ]

54− ]

49+ , Block.cluster { space: "var(--s-1)" }

50+ [ Block.button { buttonType: ButtonType.Generic, buttonShape: ButtonType.Pill } [ R.text "Generic" ]

51+ , Block.button { buttonType: ButtonType.Primary, buttonShape: ButtonType.Pill } [ R.text "Primary" ]

52+ , Block.button { css: customStyle, buttonShape: ButtonType.Pill } [ R.text "+ Custom" ]

53+ ]

5554 , R.h2_ [ R.text "Icon button" ]

56− , Block.cluster </ { space: "var(--s-1)" }

57− /> [ Button.component </ {} /> [ Block.icon </> { icon: Icon.questionMark, size: str "var(--s2)", colour: str colour.highlight } ]

58− ]

55+ , Block.cluster { space: "var(--s-1)" }

56+ [ Block.button {} [ Block.icon </> { icon: Icon.questionMark, size: str "var(--s2)", colour: str colour.highlight } ]

57+ ]

5958 , R.h2_ [ R.text "Disabled" ]

60− , Block.cluster </ { space: "var(--s-1)" }

61− /> [ Button.component </ { buttonType: ButtonType.Generic, disabled: true } /> [ R.text "Generic" ]

62− , Button.component </ { buttonType: ButtonType.Primary, disabled: true } /> [ R.text "Primary" ]

63− , Button.component </ { buttonType: ButtonType.Generic, buttonShape: ButtonType.Pill, disabled: true } /> [ R.text "Generic" ]

64− , Button.component </ { buttonType: ButtonType.Primary, buttonShape: ButtonType.Pill, disabled: true } /> [ R.text "Primary" ]

65− ]

59+ , Block.cluster { space: "var(--s-1)" }

60+ [ Block.button { buttonType: ButtonType.Generic, disabled: true } [ R.text "Generic" ]

61+ , Block.button { buttonType: ButtonType.Primary, disabled: true } [ R.text "Primary" ]

62+ , Block.button { buttonType: ButtonType.Generic, buttonShape: ButtonType.Pill, disabled: true } [ R.text "Generic" ]

63+ , Block.button { buttonType: ButtonType.Primary, buttonShape: ButtonType.Pill, disabled: true } [ R.text "Primary" ]

64+ ]

6665 ]

6766 ]

6867

69−customStyle :: E.Style

68+customStyle ∷ E.Style

7069customStyle =

7170 E.css

7271 { background: E.str colour.backgroundLayer5

@@ -79,24 +78,24 @@ customStyle =

7978 , fontWeight: E.str "500"

8079 , transition: str "all 0.7s ease"

8180 , "&:active":

82− nest

83− { boxShadow: E.none

84− , border: E.str $ "1px solid " <> colour.highlightText

85− , transform: E.none

86− , background: E.str colour.highlight

87− , color: E.str colour.highlightText

88− }

81+ nest

82+ { boxShadow: E.none

83+ , border: E.str $ "1px solid " <> colour.highlightText

84+ , transform: E.none

85+ , background: E.str colour.highlight

86+ , color: E.str colour.highlightText

87+ }

8988 , "&:hover":

90− nest

91− { boxShadow: E.none

92− , border: E.str $ "1px solid " <> colour.backgroundLayer1

93− , transform: E.none

94− , background: E.str colour.backgroundLayer4

95− , color: E.str colour.text

96− }

89+ nest

90+ { boxShadow: E.none

91+ , border: E.str $ "1px solid " <> colour.backgroundLayer1

92+ , transform: E.none

93+ , background: E.str colour.backgroundLayer4

94+ , color: E.str colour.text

95+ }

9796 }

9897

99−customStyle2 :: E.Style

98+customStyle2 ∷ E.Style

10099customStyle2 =

101100 E.css

102101 { background: E.color Palette.seaGreen.dark

@@ -105,7 +104,7 @@ customStyle2 =

105104 , fontWeight: E.str "400"

106105 , minWidth: E.str size."3xl"

107106 , "&:focus":

108− nest

109− { border: E.str $ "1px solid " <> colour.background

110− }

107+ nest

108+ { border: E.str $ "1px solid " <> colour.background

109+ }

111110 }

src/Yoga/Block/Atom/Button/View.purs+13−12

@@ -1,27 +1,28 @@

11module Yoga.Block.Atom.Button.View where

22

33import Yoga.Prelude.View

4−import Data.Symbol (SProxy(..))

4+

55import Foreign.Object as Object

66import Yoga.Block.Atom.Button.Style as Style

77import Yoga.Block.Atom.Button.Types (ButtonShape, ButtonType, renderButtonShape, renderButtonType)

88import Yoga.Block.Atom.Button.Types as Button

9+import Yoga.Block.Internal (ButtonWritablePropsNoChildrenF)

910

1011type PropsF :: forall k. (Type -> k) -> Row k -> Row k

11−type PropsF f r

12− = ( buttonType ∷ f ButtonType

13− , buttonShape ∷ f ButtonShape

14− | Style.Props f r

15− )

12+type PropsF f r =

13+ ( buttonType ∷ f ButtonType

14+ , buttonShape ∷ f ButtonShape

15+ | Style.Props f r

16+ )

1617

17−type Props

18− = PropsF Id (ButtonWritablePropsF Id ())

18+type PropsNoChildren =

19+ PropsF Id (ButtonWritablePropsNoChildrenF Id ())

1920

20−type PropsOptional

21− = PropsF OptionalProp (ButtonReadableProps)

21+type Props =

22+ PropsF Id (ButtonWritablePropsF Id ())

2223

23−key ∷ ∀ t1. SProxy t1

24−key = SProxy

24+type PropsOptional =

25+ PropsF OptionalProp (ButtonReadableProps)

2526

2627component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }

2728component = rawComponent

src/Yoga/Block/Atom/Input/Story.purs+28−28

@@ -15,7 +15,7 @@ import React.Basic.Events (handler, handler_)

1515import React.Basic.Hooks (reactComponent, (/\))

1616import React.Basic.Hooks as React

1717import Type.Proxy (Proxy(..))

18−import Yoga ((/>), (</), (</>))

18+import Yoga ((</>))

1919import Yoga.Block as Block

2020import Yoga.Block.Atom.Input as Input

2121import Yoga.Block.Atom.Input.Types as HTMLInput

@@ -45,35 +45,35 @@ input = do

4545 [ R.div_

4646 [ R.h1_ [ R.text "Input Examples" ]

4747 , R.h3_ [ R.text "With a label" ]

48− , Block.cluster </ {}

49− /> [ element Input.component { label: nes (SProxy ∷ _ "This has a label"), value: "And text", onChange: handler_ mempty }

50− , element Input.component { label: nes (SProxy ∷ _ "This has a label"), value: "", onChange: handler_ mempty }

51− , element Input.component { label: nes (SProxy ∷ _ "This has a label"), placeholder: "A very long placeholder, too..." }

52− , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "🐽🤣" }

53− , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), trailing: R.text "🤫" }

54− , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "🌭" }

55− , Block.box

56− </ { background: colour.backgroundLayer3

48+ , Block.cluster {}

49+ [ element Input.component { label: nes (SProxy ∷ _ "This has a label"), value: "And text", onChange: handler_ mempty }

50+ , element Input.component { label: nes (SProxy ∷ _ "This has a label"), value: "", onChange: handler_ mempty }

51+ , element Input.component { label: nes (SProxy ∷ _ "This has a label"), placeholder: "A very long placeholder, too..." }

52+ , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "🐽🤣" }

53+ , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), trailing: R.text "🤫" }

54+ , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "🌭" }

55+ , Block.box

56+ { background: colour.backgroundLayer3

57+ }

58+ [ element Input.component

59+ { label: nes (SProxy ∷ _ "Different background")

60+ , leading: R.text "🌭"

61+ , forceSmallLabel: true

5762 }

58− /> [ element Input.component

59− { label: nes (SProxy ∷ _ "Different background")

60− , leading: R.text "🌭"

61− , forceSmallLabel: true

62− }

63− ]

64− , Block.box

65− </ { background: colour.backgroundLayer1

63+ ]

64+ , Block.box

65+ { background: colour.backgroundLayer1

66+ }

67+ [ element Input.component

68+ { label: nes (SProxy ∷ _ "Another background")

69+ , background: colour.backgroundLayer3

70+ , textColour: "blue"

71+ , placeholderColour: colour.backgroundLayer4

72+ , leading: R.text "🌭"

6673 }

67− /> [ element Input.component

68− { label: nes (SProxy ∷ _ "Another background")

69− , background: colour.backgroundLayer3

70− , textColour: "blue"

71− , placeholderColour: colour.backgroundLayer4

72− , leading: R.text "🌭"

73− }

74− ]

75− , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "⭐", trailing: R.text "🔮" }

76− ]

74+ ]

75+ , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "⭐", trailing: R.text "🔮" }

76+ ]

7777 , R.h2_ [ R.text "Generic Input" ]

7878 , Input.component </> { value: "A Generic Input", onChange: handler_ mempty }

7979 , R.h2_ [ R.text "Validation on text Input" ]

src/Yoga/Block/Atom/Input/Style.purs+1−1

@@ -73,7 +73,7 @@ labelSmall background textColour =

7373 nest

7474 { fontWeight: str "500"

7575 , whiteSpace: str "nowrap"

76− , background: str $ i "linear-gradient(" background "51%, transparent 51%, transparent)"

76+ , background: str $ i "linear-gradient(" background " 51%, transparent 51%, transparent)"

7777 , color: str textColour

7878 , borderRadius: var "--s-4"

7979 , paddingLeft: var "--s-4"

src/Yoga/Block/Atom/Popover/Story.purs−5

@@ -1,20 +1,15 @@

11module Yoga.Block.Atom.Popover.Story (default, popover) where

22

33import Yoga.Prelude.View

4−import Data.Interpolate (i)

54import Effect.Uncurried (mkEffectFn1)

65import Effect.Unsafe (unsafePerformEffect)

7−import Framer.Motion as Motion

86import React.Basic.DOM (h2_, text)

97import React.Basic.DOM as R

108import React.Basic.Emotion as E

119import React.Basic.Hooks as React

12−import React.Basic.Popper (modifierArrow, modifierOffset)

13−import React.Basic.Popper.Hook (usePopper)

1410import Unsafe.Coerce (unsafeCoerce)

1511import Yoga.Block as Block

1612import Yoga.Block.Container.Style as Styles

17−import Yoga.Block.Internal.CSS (nest)

1813

1914default ∷

2015 { decorators ∷ Array (Effect JSX -> JSX)

src/Yoga/Block/Atom/Toggle/View.purs+1−1

@@ -102,7 +102,7 @@ rawComponent =

102102 -- components

103103 let

104104 container children =

105− Motion.elementStyled

105+ Emotion.element

106106 Motion.button

107107 { className: "ry-toggle" <>? props.className

108108 , css: Style.button <>? props.css

src/Yoga/Block/Container/Story.purs+20−20

@@ -6,7 +6,7 @@ import React.Basic (JSX, element)

66import React.Basic.DOM (css)

77import React.Basic.DOM as R

88import React.Basic.Emotion as E

9−import Yoga (el, styledLeaf, (/>), (</))

9+import Yoga (el, styledLeaf)

1010import Yoga.Block as Block

1111import Yoga.Block.Container as Container

1212import Yoga.Block.Container.Style (colour, inputFocus)

@@ -32,27 +32,27 @@ container =

3232 ]

3333 ]

3434 ]

35− , Block.box </ {}

36− /> [ Block.stack </ { space: E.str "10px" }

37− /> [ el Box.component

38− { style:

39− css

40− { background: colour.highlight

41− , color: colour.highlightText

42− }

35+ , Block.box {}

36+ [ Block.stack { space: E.str "10px" }

37+ [ Block.box

38+ { style:

39+ css

40+ { background: colour.highlight

41+ , color: colour.highlightText

4342 }

44− [ R.text "Highlight" ]

45− , el Box.component

46− { style:

47− css

48− { background:

49− "linear-gradient(90deg," <> colour.highlightRotatedForwards <> "," <> colour.highlightRotatedBackwards <> ")"

50− , color: colour.highlightText

51− }

43+ }

44+ [ R.text "Highlight" ]

45+ , Block.box

46+ { style:

47+ css

48+ { background:

49+ "linear-gradient(90deg," <> colour.highlightRotatedForwards <> "," <> colour.highlightRotatedBackwards <> ")"

50+ , color: colour.highlightText

5251 }

53− [ R.text "Highlight gradient" ]

54− ]

55− ]

52+ }

53+ [ R.text "Highlight gradient" ]

54+ ]

55+ ]

5656 , R.text "Content"

5757 , el Stack.component {}

5858 [ el Cluster.component {}

src/Yoga/Block/Container/Style.purs+29−12

@@ -262,8 +262,15 @@ defaultColours =

262262 , success

263263 , successText

264264 , text: text

265− , textPaler

265+ , textPaler1: text # lighten 0.1

266+ , textPaler2: text # lighten 0.2

267+ , textPaler3: text # lighten 0.3

268+ , textPaler4: text # lighten 0.4

266269 , textInverted: lightBg

270+ , textInvertedPaler1: lightBg # darken 0.1

271+ , textInvertedPaler2: lightBg # darken 0.2

272+ , textInvertedPaler3: lightBg # darken 0.3

273+ , textInvertedPaler4: lightBg # darken 0.4

267274 , boxShadow

268275 }

269276 , dark:

@@ -274,10 +281,10 @@ defaultColours =

274281 , backgroundAlpha75: withAlpha 0.75 darkBg

275282 , backgroundInverted: lightBg

276283 , backgroundLayer1: lighten 0.1 >>> saturate 0.18 $ darkBg

277− , backgroundLayer2: lighten 0.15 >>> saturate 0.10 $ darkBg

278− , backgroundLayer3: lighten 0.22 >>> saturate 0.11 $ darkBg

279− , backgroundLayer4: lighten 0.32 >>> saturate 0.11 $ darkBg

280− , backgroundLayer5: lighten 0.37 >>> saturate 0.11 $ darkBg

284+ , backgroundLayer2: lighten 0.13 >>> saturate 0.10 $ darkBg

285+ , backgroundLayer3: lighten 0.16 >>> saturate 0.11 $ darkBg

286+ , backgroundLayer4: lighten 0.19 >>> saturate 0.11 $ darkBg

287+ , backgroundLayer5: lighten 0.22 >>> saturate 0.08 $ darkBg

281288 , backgroundCard: lighten 0.05 >>> saturate 0.1 $ darkBg

282289 , popperBackground: (withAlpha 0.8 >>> lighten 0.09 >>> saturate 0.05) darkBg

283290 , popperBackgroundNoAlpha: (lighten 0.09 >>> saturate 0.05) darkBg

@@ -310,8 +317,15 @@ defaultColours =

310317 , success: successDark

311318 , successText

312319 , text: textDark

313− , textPaler: textDarkPaler

320+ , textPaler1: textDark # darken 0.1 # desaturate 0.25

321+ , textPaler2: textDark # darken 0.2 # desaturate 0.25

322+ , textPaler3: textDark # darken 0.3 # desaturate 0.25

323+ , textPaler4: textDark # darken 0.4 # desaturate 0.25

314324 , textInverted: darkBg

325+ , textInvertedPaler1: darkBg # lighten 0.1

326+ , textInvertedPaler2: darkBg # lighten 0.2

327+ , textInvertedPaler3: darkBg # lighten 0.3

328+ , textInvertedPaler4: darkBg # lighten 0.4

315329 , boxShadow: boxShadowDark

316330 }

317331 }

@@ -368,11 +382,7 @@ defaultColours =

368382

369383 text = Color.rgb 16 16 32

370384

371− textPaler = Color.rgb 100 100 110

372−

373− textDark = Color.rgb 230 230 250

374−

375− textDarkPaler = Color.rgb 190 190 210

385+ textDark = Color.rgb 240 245 250

376386

377387 boxShadow = Color.rgba 0 0 0 0.2

378388

@@ -421,8 +431,15 @@ type FlatTheme a =

421431 , invalidText ∷ a

422432 , required ∷ a

423433 , text ∷ a

424− , textPaler ∷ a

434+ , textPaler1 ∷ a

435+ , textPaler2 ∷ a

436+ , textPaler3 ∷ a

437+ , textPaler4 ∷ a

425438 , textInverted ∷ a

439+ , textInvertedPaler1 ∷ a

440+ , textInvertedPaler2 ∷ a

441+ , textInvertedPaler3 ∷ a

442+ , textInvertedPaler4 ∷ a

426443 , placeholderText ∷ a

427444 , boxShadow ∷ a

428445 }

src/Yoga/Block/Internal.purs+22−4

@@ -7,6 +7,8 @@ module Yoga.Block.Internal

77 , dangerous

88 , DivProps

99 , DivPropsF

10+ , DivPropsNoChildren

11+ , DivPropsNoChildrenF

1012 , InputReadableProps

1113 , InputWritableProps

1214 , InputReadablePropsF

@@ -14,7 +16,9 @@ module Yoga.Block.Internal

1416 , ButtonWritableProps

1517 , ButtonReadableProps

1618 , ButtonReadablePropsF

19+ , ButtonReadablePropsNoChildrenF

1720 , ButtonWritablePropsF

21+ , ButtonWritablePropsNoChildrenF

1822 , NodeRef

1923 , emotionDiv

2024 , emotionInput

@@ -279,7 +283,13 @@ dangerous = unsafePerformEffect <<< unsafeCreateDOMComponent

279283type DivProps

280284 = DivPropsF Id ()

281285

286+type DivPropsNoChildren

287+ = DivPropsNoChildrenF Id ()

288+

282289type DivPropsF f more

290+ = DivPropsNoChildrenF f ( children ∷ f (Array JSX) | more)

291+

292+type DivPropsNoChildrenF f more

283293 = ( _aria ∷ f (Object String)

284294 , _data ∷ f (Object String)

285295 , about ∷ f String

@@ -292,7 +302,6 @@ type DivPropsF f more

292302 , cellPadding ∷ f String

293303 , cellSpacing ∷ f String

294304 , charSet ∷ f String

295− , children ∷ f (Array JSX)

296305 , classID ∷ f String

297306 , colSpan ∷ f Int

298307 , contentEditable ∷ f Boolean

@@ -410,7 +419,6 @@ type DivPropsF f more

410419 , wmode ∷ f String

411420 | more

412421 )

413−

414422type InputReadableProps

415423 = InputReadablePropsF OptionalProp ()

416424

@@ -595,8 +603,19 @@ type ButtonWritablePropsF f more

595603 | more

596604 )

597605

606+type ButtonWritablePropsNoChildrenF :: forall k. (Type -> k) -> Row k -> Row k

607+type ButtonWritablePropsNoChildrenF f more

608+ = ButtonReadablePropsNoChildrenF f

609+ ( ref ∷ f (Ref (Nullable Node))

610+ | more

611+ )

612+

598613type ButtonReadablePropsF :: forall k. (Type -> k) -> Row k -> Row k

599614type ButtonReadablePropsF f more

615+ = ButtonReadablePropsNoChildrenF f ( children ∷ f (Array JSX) | more)

616+

617+type ButtonReadablePropsNoChildrenF :: forall k. (Type -> k) -> Row k -> Row k

618+type ButtonReadablePropsNoChildrenF f more

600619 = ( _aria ∷ f (Object String)

601620 , _data ∷ f (Object String)

602621 , about ∷ f String

@@ -610,7 +629,6 @@ type ButtonReadablePropsF f more

610629 , cellPadding ∷ f String

611630 , cellSpacing ∷ f String

612631 , charSet ∷ f String

613− , children ∷ f (Array JSX)

614632 , classID ∷ f String

615633 , className ∷ f String

616634 , colSpan ∷ f Int

@@ -733,4 +751,4 @@ type ButtonReadablePropsF f more

733751 , vocab ∷ f String

734752 , wmode ∷ f String

735753 | more

736− )

754+ )

src/Yoga/Block/Layout/Box.purs+1−1

@@ -2,4 +2,4 @@ module Yoga.Block.Layout.Box

22 ( module Yoga.Block.Layout.Box.View

33 ) where

44

5−import Yoga.Block.Layout.Box.View (component, Props)

5+import Yoga.Block.Layout.Box.View (component, Props, PropsNoChildren)

src/Yoga/Block/Layout/Box/Story.purs+59−59

@@ -35,67 +35,67 @@ box =

3535 pure

3636 $ fragment

3737 [ element Box.component { children: [ R.text "Default" ] }

38− , Block.stack </ {}

39− /> [ Box.component </ myBox "var(--s1)" /> [ R.text "Shadow" ]

40− , cluster

41− [ Box.component </ colBox1 Palette.pink.regular "var(--s0)" /> [ colText1 Palette.pink.regular "text" ]

42− , Box.component </ colBox1 Palette.pink.darker "var(--s0)" /> [ colText1 Palette.pink.darker "text" ]

43− , Box.component </ colBox1 Palette.pink.dark "var(--s0)" /> [ colText1 Palette.pink.dark "text" ]

44− ]

45− , cluster

46− [ Box.component </ colBox1 Palette.mauve.regular "var(--s-1)" /> [ colText1 Palette.mauve.regular "text" ]

47− , Box.component </ colBox1 Palette.mauve.darker "var(--s0)" /> [ colText1 Palette.mauve.darker "text" ]

48− , Box.component </ colBox1 Palette.mauve.dark "var(--s0)" /> [ colText1 Palette.mauve.dark "text" ]

49− ]

50− , cluster

51− [ Box.component </ colBox1 Palette.violet.regular "var(--s-1)" /> [ colText1 Palette.violet.regular "text" ]

52− , Box.component </ colBox1 Palette.violet.darker "var(--s0)" /> [ colText1 Palette.violet.darker "text" ]

53− , Box.component </ colBox1 Palette.violet.dark "var(--s0)" /> [ colText1 Palette.violet.dark "text" ]

54− ]

55− , cluster

56− [ Box.component </ colBox1 Palette.blue.regular "var(--s0)" /> [ colText1 Palette.blue.dark "text" ]

57− , Box.component </ colBox1 Palette.blue.darker "var(--s0)" /> [ colText1 Palette.blue.darker "text" ]

58− , Box.component </ colBox1 Palette.blue.dark "var(--s0)" /> [ colText1 Palette.blue.dark "text" ]

59− ]

60− , cluster

61− [ Box.component </ colBox1 Palette.azure.regular "var(--s0)" /> [ colText1 Palette.azure.dark "text" ]

62− , Box.component </ colBox1 Palette.azure.darker "var(--s0)" /> [ colText1 Palette.azure.darker "text" ]

63− , Box.component </ colBox1 Palette.azure.dark "var(--s0)" /> [ colText1 Palette.azure.dark "text" ]

64− ]

65− , cluster

66− [ Box.component </ colBox1 Palette.capri.regular "var(--s-1)" /> [ colText1 Palette.capri.regular "text" ]

67− , Box.component </ colBox1 Palette.capri.darker "var(--s0)" /> [ colText1 Palette.capri.darker "text" ]

68− , Box.component </ colBox1 Palette.capri.dark "var(--s0)" /> [ colText1 Palette.capri.dark "text" ]

69− ]

70− , cluster

71− [ Box.component </ colBox1 Palette.seaGreen.regular "var(--s0)" /> [ colText1 Palette.seaGreen.regular "text" ]

72− , Box.component </ colBox1 Palette.seaGreen.darker "var(--s0)" /> [ colText1 Palette.seaGreen.darker "text" ]

73− , Box.component </ colBox1 Palette.seaGreen.dark "var(--s0)" /> [ colText1 Palette.seaGreen.dark "text" ]

74− ]

75− , cluster

76− [ Box.component </ colBox1 Palette.malachite.regular "var(--s-1)" /> [ colText1 Palette.malachite.regular "text" ]

77− , Box.component </ colBox1 Palette.malachite.darker "var(--s0)" /> [ colText1 Palette.malachite.darker "text" ]

78− , Box.component </ colBox1 Palette.malachite.dark "var(--s0)" /> [ colText1 Palette.malachite.dark "text" ]

79− ]

80− , cluster

81− [ Box.component </ colBox1 Palette.yellow.regular "var(--s-1)" /> [ colText1 Palette.yellow.regular "text" ]

82− , Box.component </ colBox1 Palette.yellow.darker "var(--s0)" /> [ colText1 Palette.yellow.darker "text" ]

83− , Box.component </ colBox1 Palette.yellow.dark "var(--s0)" /> [ colText1 Palette.yellow.dark "text" ]

84− ]

85− , cluster

86− [ Box.component </ colBox1 Palette.mango.regular "var(--s-1)" /> [ colText1 Palette.mango.regular "text" ]

87− , Box.component </ colBox1 Palette.mango.darker "var(--s0)" /> [ colText1 Palette.mango.darker "text" ]

88− , Box.component </ colBox1 Palette.mango.dark "var(--s0)" /> [ colText1 Palette.mango.dark "text" ]

89− ]

90− , cluster

91− [ Box.component </ colBox1 Palette.coral.regular "var(--s-1)" /> [ colText1 Palette.coral.regular "text" ]

92− , Box.component </ colBox1 Palette.coral.darker "var(--s0)" /> [ colText1 Palette.coral.darker "text" ]

93− , Box.component </ colBox1 Palette.coral.dark "var(--s0)" /> [ colText1 Palette.coral.dark "text" ]

94− ]

95− ]

38+ , Block.stack {}

39+ [ Box.component </ myBox "var(--s1)" /> [ R.text "Shadow" ]

40+ , cluster

41+ [ Box.component </ colBox1 Palette.pink.regular "var(--s0)" /> [ colText1 Palette.pink.regular "text" ]

42+ , Box.component </ colBox1 Palette.pink.darker "var(--s0)" /> [ colText1 Palette.pink.darker "text" ]

43+ , Box.component </ colBox1 Palette.pink.dark "var(--s0)" /> [ colText1 Palette.pink.dark "text" ]

44+ ]

45+ , cluster

46+ [ Box.component </ colBox1 Palette.mauve.regular "var(--s-1)" /> [ colText1 Palette.mauve.regular "text" ]

47+ , Box.component </ colBox1 Palette.mauve.darker "var(--s0)" /> [ colText1 Palette.mauve.darker "text" ]

48+ , Box.component </ colBox1 Palette.mauve.dark "var(--s0)" /> [ colText1 Palette.mauve.dark "text" ]

49+ ]

50+ , cluster

51+ [ Box.component </ colBox1 Palette.violet.regular "var(--s-1)" /> [ colText1 Palette.violet.regular "text" ]

52+ , Box.component </ colBox1 Palette.violet.darker "var(--s0)" /> [ colText1 Palette.violet.darker "text" ]

53+ , Box.component </ colBox1 Palette.violet.dark "var(--s0)" /> [ colText1 Palette.violet.dark "text" ]

54+ ]

55+ , cluster

56+ [ Box.component </ colBox1 Palette.blue.regular "var(--s0)" /> [ colText1 Palette.blue.dark "text" ]

57+ , Box.component </ colBox1 Palette.blue.darker "var(--s0)" /> [ colText1 Palette.blue.darker "text" ]

58+ , Box.component </ colBox1 Palette.blue.dark "var(--s0)" /> [ colText1 Palette.blue.dark "text" ]

59+ ]

60+ , cluster

61+ [ Box.component </ colBox1 Palette.azure.regular "var(--s0)" /> [ colText1 Palette.azure.dark "text" ]

62+ , Box.component </ colBox1 Palette.azure.darker "var(--s0)" /> [ colText1 Palette.azure.darker "text" ]

63+ , Box.component </ colBox1 Palette.azure.dark "var(--s0)" /> [ colText1 Palette.azure.dark "text" ]

64+ ]

65+ , cluster

66+ [ Box.component </ colBox1 Palette.capri.regular "var(--s-1)" /> [ colText1 Palette.capri.regular "text" ]

67+ , Box.component </ colBox1 Palette.capri.darker "var(--s0)" /> [ colText1 Palette.capri.darker "text" ]

68+ , Box.component </ colBox1 Palette.capri.dark "var(--s0)" /> [ colText1 Palette.capri.dark "text" ]

69+ ]

70+ , cluster

71+ [ Box.component </ colBox1 Palette.seaGreen.regular "var(--s0)" /> [ colText1 Palette.seaGreen.regular "text" ]

72+ , Box.component </ colBox1 Palette.seaGreen.darker "var(--s0)" /> [ colText1 Palette.seaGreen.darker "text" ]

73+ , Box.component </ colBox1 Palette.seaGreen.dark "var(--s0)" /> [ colText1 Palette.seaGreen.dark "text" ]

74+ ]

75+ , cluster

76+ [ Box.component </ colBox1 Palette.malachite.regular "var(--s-1)" /> [ colText1 Palette.malachite.regular "text" ]

77+ , Box.component </ colBox1 Palette.malachite.darker "var(--s0)" /> [ colText1 Palette.malachite.darker "text" ]

78+ , Box.component </ colBox1 Palette.malachite.dark "var(--s0)" /> [ colText1 Palette.malachite.dark "text" ]

79+ ]

80+ , cluster

81+ [ Box.component </ colBox1 Palette.yellow.regular "var(--s-1)" /> [ colText1 Palette.yellow.regular "text" ]

82+ , Box.component </ colBox1 Palette.yellow.darker "var(--s0)" /> [ colText1 Palette.yellow.darker "text" ]

83+ , Box.component </ colBox1 Palette.yellow.dark "var(--s0)" /> [ colText1 Palette.yellow.dark "text" ]

84+ ]

85+ , cluster

86+ [ Box.component </ colBox1 Palette.mango.regular "var(--s-1)" /> [ colText1 Palette.mango.regular "text" ]

87+ , Box.component </ colBox1 Palette.mango.darker "var(--s0)" /> [ colText1 Palette.mango.darker "text" ]

88+ , Box.component </ colBox1 Palette.mango.dark "var(--s0)" /> [ colText1 Palette.mango.dark "text" ]

89+ ]

90+ , cluster

91+ [ Box.component </ colBox1 Palette.coral.regular "var(--s-1)" /> [ colText1 Palette.coral.regular "text" ]

92+ , Box.component </ colBox1 Palette.coral.darker "var(--s0)" /> [ colText1 Palette.coral.darker "text" ]

93+ , Box.component </ colBox1 Palette.coral.dark "var(--s0)" /> [ colText1 Palette.coral.dark "text" ]

94+ ]

95+ ]

9696 ]

9797 where

98− cluster = Block.cluster </ { space: "0px", justify: "space-between" }

98+ cluster = Block.cluster { space: "0px", justify: "space-between" }

9999

100100 colText1 col1 text =

101101 R.span'

src/Yoga/Block/Layout/Box/View.purs+12−3

@@ -1,16 +1,25 @@

1−module Yoga.Block.Layout.Box.View (component, Props, PropsF) where

1+module Yoga.Block.Layout.Box.View (component, Props, PropsNoChildren, PropsNoChildrenF, PropsF) where

22

33import Yoga.Prelude.View

4+import Yoga.Block.Internal (DivPropsNoChildren)

45import Yoga.Block.Layout.Box.Style as Style

56

6−type PropsF f =

7+type PropsNoChildrenF f =

78 ( className ∷ f String

8− | Style.Props f + DivProps

9+ | Style.Props f + DivPropsNoChildren

10+ )

11+

12+type PropsF f =

13+ ( children ∷ Array JSX

14+ | PropsNoChildrenF f

915 )

1016

1117type Props =

1218 PropsF Id

1319

20+type PropsNoChildren =

21+ PropsNoChildrenF Id

22+

1423type PropsOptional =

1524 PropsF OptionalProp

1625

src/Yoga/Block/Layout/Centre.purs+1−1

@@ -2,4 +2,4 @@ module Yoga.Block.Layout.Centre

22 ( module Yoga.Block.Layout.Centre.View

33 ) where

44

5−import Yoga.Block.Layout.Centre.View (component, Props)

5+import Yoga.Block.Layout.Centre.View (component, Props, PropsNoChildren)

src/Yoga/Block/Layout/Centre/Style.purs+1−1

@@ -17,7 +17,7 @@ centre props = styles <>? props.css

1717 where

1818 styles =

1919 css

20− { padding: props.padding ?|| (1.0 # em)

20+ { padding: props.padding ?|| (0 # px)

2121 , boxSizing: contentBox

2222 , marginLeft: auto

2323 , marginRight: auto

src/Yoga/Block/Layout/Centre/View.purs+12−3

@@ -1,13 +1,22 @@

1−module Yoga.Block.Layout.Centre.View (component, Props, PropsF) where

1+module Yoga.Block.Layout.Centre.View (component, Props, PropsF, PropsNoChildrenF, PropsNoChildren) where

22

33import Yoga.Prelude.View

4+import Yoga.Block.Internal (DivPropsNoChildren)

45import Yoga.Block.Layout.Centre.Style as Style

56

6−type PropsF f =

7+type PropsNoChildrenF f =

78 ( className ∷ f String

8− | Style.Props f + DivProps

9+ | Style.Props f + DivPropsNoChildren

910 )

1011

12+type PropsF f =

13+ ( children ∷ Array JSX

14+ | PropsNoChildrenF f

15+ )

16+

17+type PropsNoChildren =

18+ PropsNoChildrenF Id

19+

1120type Props =

1221 PropsF Id

1322

src/Yoga/Block/Layout/Cluster.purs+1−1

@@ -2,4 +2,4 @@ module Yoga.Block.Layout.Cluster

22 ( module Yoga.Block.Layout.Cluster.View

33 ) where

44

5−import Yoga.Block.Layout.Cluster.View (component, Props)

5+import Yoga.Block.Layout.Cluster.View (component, Props, PropsNoChildren)

src/Yoga/Block/Layout/Cluster/View.purs+12−3

@@ -1,18 +1,27 @@

1−module Yoga.Block.Layout.Cluster.View (component, Props, PropsF) where

1+module Yoga.Block.Layout.Cluster.View (component, Props, PropsF, PropsNoChildren, PropsNoChildrenF) where

22

33import Yoga.Prelude.View

44import React.Basic.DOM as R

5+import Yoga.Block.Internal (DivPropsNoChildren)

56import Yoga.Block.Layout.Cluster.Style as Style

67

7−type PropsF f =

8+type PropsNoChildrenF f =

89 ( className ∷ f String

910 , wrapper ∷ f (Array JSX -> JSX)

10− | Style.Props f DivProps

11+ | Style.Props f + DivPropsNoChildren

12+ )

13+

14+type PropsF f =

15+ ( children ∷ Array JSX

16+ | PropsNoChildrenF f

1117 )

1218

1319type Props =

1420 PropsF Id

1521

22+type PropsNoChildren =

23+ PropsNoChildrenF Id

24+

1625type PropsOptional =

1726 PropsF OptionalProp

1827

src/Yoga/Block/Layout/Sidebar/Spec.purs+2−1

@@ -10,12 +10,13 @@ spec =

1010 describe "The sidebar" do

1111 it "renders without errors" do

1212 void

13− $ renderComponent Sidebar.component { children: [] }

13+ $ renderComponent Sidebar.component { sidebar: mempty, children: [] }

1414 it "accepts div props" do

1515 { findByText } <-

1616 renderComponent Sidebar.component

1717 { role: "Heinz"

1818 , children: [ R.text "Find me!" ]

19+ , sidebar: mempty

1920 }

2021 elem <- findByText "Find me!"

2122 parent <- elem # getParentOrFailWith "Sidebar has no parent"

src/Yoga/Block/Layout/Sidebar/Story.purs+26−29

@@ -1,7 +1,6 @@

11module Yoga.Block.Layout.Sidebar.Story where

22

33import Prelude

4−import Color (cssStringRGBA)

54import Data.Monoid (power)

65import Effect (Effect)

76import Effect.Unsafe (unsafePerformEffect)

@@ -9,12 +8,10 @@ import React.Basic (JSX, element, fragment)

98import React.Basic.DOM (css)

109import React.Basic.DOM as R

1110import React.Basic.Emotion as E

12−import Web.HTML.HTMLElement (contentEditable)

1311import Yoga.Block.Container.Style (colour)

1412import Yoga.Block.Container.Style as Styles

1513import Yoga.Block.Layout.Sidebar as Sidebar

1614import Yoga.Block.Layout.Sidebar.Style (SidebarSide(..))

17−import Yoga.Block.Palette as Palette

1815

1916default ∷

2017 { decorators ∷ Array (Effect JSX -> JSX)

@@ -23,12 +20,12 @@ default ∷

2320default =

2421 { title: "Layout/Sidebar"

2522 , decorators:

26− [ \storyFn ->

27− R.div_

28− [ element E.global { styles: Styles.global }

29− , unsafePerformEffect storyFn

30− ]

31− ]

23+ [ \storyFn ->

24+ R.div_

25+ [ element E.global { styles: Styles.global }

26+ , unsafePerformEffect storyFn

27+ ]

28+ ]

3229 }

3330

3431sidebar ∷ Effect JSX

@@ -38,35 +35,35 @@ sidebar =

3835 [ R.div_

3936 [ R.h2_ [ R.text "No Options" ]

4037 , element Sidebar.component

41− { children:

42− [ R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

43− , R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } }

44− ]

38+ { sidebar: R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

39+ , children:

40+ [ R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } }

41+ ]

4542 , style: css { backgroundColor: "oldlace" }

4643 }

4744 , R.h2_ [ R.text "Zero Space" ]

4845 , element Sidebar.component

49− { children:

50− [ R.div { children: [ R.text "Child 1" ], style: css { backgroundColor: "teal" } }

51− , R.div { children: [ R.text "Child 2" ], style: css { backgroundColor: "darkslateblue" } }

52− ]

46+ { sidebar: R.div { children: [ R.text "Child 1" ], style: css { backgroundColor: "teal" } }

47+ , children:

48+ [ R.div { children: [ R.text "Child 2" ], style: css { backgroundColor: "darkslateblue" } }

49+ ]

5350 , style: css { backgroundColor: "oldlace" }

5451 , space: "0"

5552 }

5653 , R.h2_ [ R.text "Wide Side" ]

5754 , element Sidebar.component

58− { children:

59− [ R.div { contentEditable: true, children: [ R.text $ power "Side " 12 ], style: css { backgroundColor: colour.backgroundLayer4 } }

60− , R.div { children: [ R.text "Content" ], style: css { backgroundColor: colour.backgroundLayer4 } }

61− ]

55+ { sidebar: R.div { contentEditable: true, children: [ R.text $ power "Side " 12 ], style: css { backgroundColor: colour.backgroundLayer4 } }

56+ , children:

57+ [ R.div { children: [ R.text "Content" ], style: css { backgroundColor: colour.backgroundLayer4 } }

58+ ]

6259 , style: css { backgroundColor: colour.backgroundLayer2 }

6360 }

6461 , R.h2_ [ R.text "Sidebar Right" ]

6562 , element Sidebar.component

66− { children:

67− [ R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } }

68− , R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

69− ]

63+ { sidebar: R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } }

64+ , children:

65+ [ R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

66+ ]

7067 , style: css { backgroundColor: "oldlace" }

7168 , sideWidth: "40px"

7269 , contentMin: "80%"

@@ -75,10 +72,10 @@ sidebar =

7572 }

7673 , R.h2_ [ R.text "No Stretch" ]

7774 , element Sidebar.component

78− { children:

79− [ R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } }

80− , R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

81− ]

75+ { sidebar: R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } }

76+ , children:

77+ [ R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

78+ ]

8279 , style: css { backgroundColor: "oldlace" }

8380 , noStretch: true

8481 , side: SidebarRight

src/Yoga/Block/Layout/Sidebar/View.purs+19−11

@@ -1,20 +1,22 @@

11module Yoga.Block.Layout.Sidebar.View (component, Props, PropsF) where

22

33import Yoga.Prelude.View

4+import React.Basic.DOM (div_)

45import Yoga.Block.Layout.Sidebar.Style as Style

56

6−type PropsF f

7− = ( className ∷ f String

8− | Style.Props f DivProps

9− )

7+type PropsF f =

8+ ( className ∷ f String

9+ , sidebar ∷ JSX

10+ | Style.Props f DivProps

11+ )

1012

11−type Props

12− = PropsF Id

13+type Props =

14+ PropsF Id

1315

14−type PropsOptional

15− = PropsF OptionalProp

16+type PropsOptional =

17+ PropsF OptionalProp

1618

17−component ∷ ∀ p p_. Union p p_ Props => ReactComponent { children :: Array JSX | p }

19+component ∷ ∀ p p_. Union p p_ Props => ReactComponent { sidebar ∷ JSX, children ∷ Array JSX | p }

1820component = rawComponent

1921

2022rawComponent ∷ ∀ p. ReactComponent { | p }

@@ -22,8 +24,14 @@ rawComponent =

2224 mkForwardRefComponent "Sidebar" do

2325 \(props ∷ { | PropsOptional }) ref -> React.do

2426 pure

25− $ emotionDiv ref props

27+ $ emotionDiv ref

28+ props

2629 { className: "ry-sidebar " <>? props.className

2730 , css: Style.sidebar props

28− , children: [ div </ {} /> props.children ]

31+ , children:

32+ [ div_

33+ [ div_ [ props.sidebar ]

34+ , div_ props.children

35+ ]

36+ ]

2937 }

src/Yoga/Block/Layout/Stack.purs+1−1

@@ -2,4 +2,4 @@ module Yoga.Block.Layout.Stack

22 ( module Yoga.Block.Layout.Stack.View

33 ) where

44

5−import Yoga.Block.Layout.Stack.View (component, Props)

5+import Yoga.Block.Layout.Stack.View (Props, PropsNoChildren, component)

src/Yoga/Block/Layout/Stack/View.purs+12−3

@@ -1,17 +1,26 @@

1−module Yoga.Block.Layout.Stack.View (component, Props, PropsF) where

1+module Yoga.Block.Layout.Stack.View (component, Props, PropsNoChildren, PropsNoChildrenF, PropsF) where

22

33import Yoga.Prelude.View

44import Unsafe.Coerce (unsafeCoerce)

5+import Yoga.Block.Internal (DivPropsNoChildren)

56import Yoga.Block.Layout.Stack.Style as Style

67

7−type PropsF f =

8+type PropsNoChildrenF f =

89 ( className ∷ f String

9− | Style.Props f DivProps

10+ | Style.Props f + DivPropsNoChildren

11+ )

12+

13+type PropsF f =

14+ ( children ∷ Array JSX

15+ | PropsNoChildrenF f

1016 )

1117

1218type Props =

1319 PropsF Id

1420

21+type PropsNoChildren =

22+ PropsNoChildrenF Id

23+

1524type PropsOptional =

1625 PropsF OptionalProp

1726

src/Yoga/Block/Layout/Story.purs+80−70

@@ -1,16 +1,15 @@

11module Yoga.Block.Layout.Story (default, layout) where

22

33import Prelude

4−import Color (cssStringRGBA)

54import Effect (Effect)

65import Effect.Unsafe (unsafePerformEffect)

76import React.Basic (JSX, element, fragment)

87import React.Basic.DOM as R

98import React.Basic.Emotion (nested)

109import React.Basic.Emotion as E

11−import Yoga ((/>), (</), (</*), (</*>), (</>))

10+import Yoga ((/>), (</*), (</*>))

1211import Yoga.Block as Block

13−import Yoga.Block.Container.Style (colour, size, withAlpha)

12+import Yoga.Block.Container.Style (colour, size)

1413import Yoga.Block.Container.Style as Styles

1514import Yoga.Block.Palette as Palette

1615import Yoga.Block.Typography as Typo

@@ -42,27 +41,34 @@ layout =

4241 ]

4342 where

4443 postPreview =

45− Block.box </* { padding: E.str $ size.l <> " " <> size.l <> " " <> size.xl, className: "post-preview", css: boxCss }

46− /> [ Block.stack </ { space: E.str size.l }

47− /> [ Block.stack </ { space: E.str size.xs }

48− /> [ Block.cluster </ {} /> [ avatar, postTitle ]

49− , Block.stack </ { space: E.str size.xs }

50− /> [ R.hr'

51− </*> { className: "hr"

52− , css:

53− E.css

54− { backgroundColor: E.str $ colour.backgroundLayer3

55− , height: E.px 1

56− , border: E.none

57− }

58− }

59− , Block.cluster </ { justify: "space-between", space: "0" } /> [ postAuthor, postDate ]

60− ]

61− ]

62− , preview

44+ Block.box

45+ { padding: E.str $ size.l <> " " <> size.l <> " " <> size.xl

46+ , className: "post-preview"

47+ , css: boxCss

48+ }

49+ [ Block.stack { space: E.str size.s }

50+ [ Block.stack { space: E.str size.m }

51+ [ Block.sidebar { sidebar: avatar, noStretch: true, contentMin: "25ch" }

52+ [ postTitle ]

53+ , Block.cluster { justify: "space-between", space: size.s }

54+ [ postAuthor, postDate ]

6355 ]

64− ]

56+ , hr

57+ , preview

58+ ]

59+ ]

6560 where

61+ hr =

62+ R.hr'

63+ </*> { className: "hr"

64+ , css:

65+ E.css

66+ { backgroundColor: E.str $ colour.textInvertedPaler4

67+ , height: E.px 1

68+ , border: E.none

69+ }

70+ }

71+

6672 preview =

6773 R.p'

6874 </* { className: "post-preview-text"

@@ -70,70 +76,70 @@ layout =

7076 Typo.fontSizeSmall

7177 <> E.css

7278 { margin: E.str "0"

73− , marginBottom: E.str size.xs

7479 , lineHeight: E.str "1.6"

80+ , color: E.str colour.textPaler2

7581 }

7682 }

77− /> [ R.text "When I was a young girl fighting with 'undefined' not being a function my mother used to come up to me and say: 'Use PureScript'. Now, a mere twenty years later..."

83+ /> [ R.text "When I was a young girl wrestling with 'undefined' not being a function my mother used to come up to me and say: 'Use PureScript'. Now, a mere twenty years later..."

7884 ]

7985

8086 boxCss =

8187 Typo.fontSizeSmall

8288 <> E.css

83− { background: E.str $ colour.backgroundLayer2

89+ { background: E.str $ colour.backgroundLayer4

8490 , borderRadius: E.str size.l

8591 , maxWidth: E.ch 60.0

92+ , paddingBottom: E.str size.xl

8693 }

8794

8895 avatar =

89− R.div'

90− </* { className: "profile-picture-container"

91− , css:

92− E.css

93− { width: E.str size.xxl

94− , height: E.str size.xxl

95− , overflow: E.str "hidden"

96− , display: E.inlineBlock

97− , borderRadius: E.percent 50.0

98− , border: E.str $ size.xxs <> " solid " <> colour.highlight

99− , background: E.str $ Palette.gradientBox Palette.malachite.dark

100− , userSelect: E.none

101− , marginLeft: E.auto

102− , marginRight: E.auto

96+ Block.centre { css: E.css { width: E.str $ size.xxl } }

97+ [ R.div'

98+ </* { className: "profile-picture-container"

99+ , css:

100+ E.css

101+ { width: E.str $ size.xxl

102+ , padding: E.str "0"

103+ , margin: E.str "0"

104+ , height: E.str size.xxl

105+ , overflow: E.str "hidden"

106+ , borderRadius: E.percent 50.0

107+ , border: E.str $ size.xxs <> " solid " <> colour.highlight

108+ , userSelect: E.none

109+ }

103110 }

104− }

105− /> [ R.img'

106− </*> { alt: "Profile Picture"

107− , src: "https://source.unsplash.com/z_8Jqe0Cc-s/360x200"

108− , className: "profile-picture"

109− , css:

110− E.css

111− { objectFit: E.str "cover"

112− , width: E.str "100%"

113− , height: E.str "100%"

114− , objectPosition: E.str "center right"

115− , transform: E.str "scaleX(-1)"

111+ /> [ R.img'

112+ </*> { alt: "Profile Picture"

113+ , src: "https://source.unsplash.com/z_8Jqe0Cc-s/360x200"

114+ , className: "profile-picture"

115+ , css:

116+ E.css

117+ { objectFit: E.str "cover"

118+ , width: E.str $ size.xxl

119+ , height: E.str $ size.xxl

120+ , boxSizing: E.borderBox

121+ , objectPosition: E.str "center right"

122+ , transform: E.str "scaleX(-1)"

123+ }

116124 }

117− }

118− ]

125+ ]

126+ ]

119127

120128 postTitle =

121− R.h2'

122− </* { className: "title"

123− , css:

124− Typo.fontSizeH3

125− <> E.css

126− { fontWeight: E.str "bold"

127− , padding: E.str "0"

128− , lineHeight: E.str "1.2"

129− , display: E.inlineBlock

130− , maxWidth: E.str "100%"

131− , flexBasis: "0" # E.str

132− , flexGrow: "999" # E.str

133− , minWidth: "20ch" # E.str

134− }

129+ R.div'

130+ </* { className: "title-wrapper"

131+ , css: E.css { minHeight: E.str size.xxl }

135132 }

136− /> [ R.text "How to properly write effective React code in 2021" ]

133+ /> [ R.h2'

134+ </* { className: "title"

135+ , css:

136+ Typo.fontSizeH3

137+ <> E.css

138+ { color: E.str colour.textPaler2

139+ }

140+ }

141+ /> [ R.text "How to properly write effective React code in 2021" ]

142+ ]

137143

138144 postAuthor =

139145 R.h4'

@@ -146,9 +152,13 @@ layout =

146152 <> Typo.regular

147153 <> E.css

148154 { "&::before":

149− nested $ E.css { content: E.str "'by '" }

155+ nested

156+ $ E.css

157+ { content: E.str "'by '"

158+ }

150159 <> Typo.thin

151160 <> Typo.resetTextTransform

161+ , color: E.str colour.textPaler3

152162 }

153163 }

154164 /> [ R.text "Someöne W. Knows" ]

@@ -162,6 +172,6 @@ layout =

162172 <> Typo.allCaps

163173 <> Typo.fontSizeSmall

164174 <> Typo.thin

165− <> E.css { color: E.str $ colour.textPaler }

175+ <> E.css { color: E.str $ colour.textPaler3 }

166176 }

167177 /> [ R.text "16th May 2021" ]

src/Yoga/Block/Molecule/Modal/Story.purs+1−1

@@ -66,7 +66,7 @@ modal = do

6666 # foldMap \(modalElement ∷ Element) ->

6767 element Modal.component

6868 { content:

69− Y.el Block.box

69+ Block.box

7070 { borderRadius: E.str "var(--s3)"

7171 , background: colour.backgroundLayer1

7272 , padding: E.str "var(--s3) var(--s2)"

src/Yoga/Block/Molecule/Modal/View.purs+4−9

@@ -10,7 +10,6 @@ import React.Basic.DOM as R

1010import React.Basic.Emotion as Emotion

1111import React.Basic.Hooks (reactComponent)

1212import React.Basic.Hooks as React

13−import React.FocusTrap (focusTrap)

1413import Web.DOM (Element)

1514import Yoga.Block.Hook.Key as KeyCode

1615import Yoga.Block.Hook.UseKeyDown (useKeyDown)

@@ -36,14 +35,10 @@ component =

3635 let

3736 toRender ∷ JSX

3837 toRender =

39− React.element focusTrap

40− { active: isOpen

41− , children:

42− R.div' </ {}

43− /> [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

44− , Motion.animatePresence </ {} /> [ guard isOpen $ element window { clickAwayRef, onDismiss, content } ]

45− ]

46− }

38+ R.div' </ {}

39+ /> [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

40+ , Motion.animatePresence </ {} /> [ guard isOpen $ element window { clickAwayRef, onDismiss, content } ]

41+ ]

4742 pure (createPortal toRender target)

4843

4944clickaway ∷ ReactComponent { theRef ∷ Ref (Nullable Node), onDismiss ∷ Effect Unit }

src/Yoga/Block/Molecule/Sheet/Story.purs+23−23

@@ -68,31 +68,31 @@ sheet = do

6868 R.div' </ {}

6969 /> [ R.h2_ [ R.text "Would you like us to track you?" ]

7070 , R.p_ [ R.text text ]

71− , Block.cluster </ { justify: "flex-end", space: "var(--s-1)" }

71+ , Block.cluster { justify: "flex-end", space: "var(--s-1)" }

7272 /> [ Block.button

73− </ { buttonType: ButtonType.Primary

74− , onClick:

75− handler_ do

76− launchAff_ do

77− delay (fromDuration $ (2.0 # Seconds))

78− liftEffect do

79− setText "Thanks, that's very nice of you"

80− setIsOpen true

81− setIsOpen false

82− }

83− /> [ R.text "Yes" ]

73+ { buttonType: ButtonType.Primary

74+ , onClick:

75+ handler_ do

76+ launchAff_ do

77+ delay (fromDuration $ (2.0 # Seconds))

78+ liftEffect do

79+ setText "Thanks, that's very nice of you"

80+ setIsOpen true

81+ setIsOpen false

82+ }

83+ [ R.text "Yes" ]

8484 , Block.button

85− </ { buttonType: ButtonType.Dangerous

86− , onClick:

87− handler_ do

88− launchAff_ do

89− delay (fromDuration $ (2.0 # Seconds))

90− liftEffect do

91− setText (power "Oh, but please! " 200)

92− setIsOpen true

93− setIsOpen false

94− }

95− /> [ R.text "No" ]

85+ { buttonType: ButtonType.Dangerous

86+ , onClick:

87+ handler_ do

88+ launchAff_ do

89+ delay (fromDuration $ (2.0 # Seconds))

90+ liftEffect do

91+ setText (power "Oh, but please! " 200)

92+ setIsOpen true

93+ setIsOpen false

94+ }

95+ [ R.text "No" ]

9696 ]

9797 ]

9898 , isOpen

src/Yoga/Block/Molecule/Sheet/View.purs+4−9

@@ -14,7 +14,6 @@ import React.Basic.DOM as R

1414import React.Basic.Emotion as Emotion

1515import React.Basic.Hooks (reactComponent)

1616import React.Basic.Hooks as React

17−import React.FocusTrap (focusTrap)

1817import Web.DOM (Element)

1918import Web.HTML as HTML

2019import Web.HTML.Window (innerHeight)

@@ -41,14 +40,10 @@ component =

4140 let

4241 toRender ∷ JSX

4342 toRender =

44− React.element focusTrap

45− { active: isOpen

46− , children:

47− R.div' </ {}

48− /> [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

49− , element window { onDismiss, content, isOpen }

50− ]

51− }

43+ R.div' </ {}

44+ /> [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

45+ , element window { onDismiss, content, isOpen }

46+ ]

5247 pure (createPortal toRender target)

5348

5449clickaway ∷ ReactComponent { theRef ∷ Ref (Nullable Node), onDismiss ∷ Effect Unit }

src/Yoga/Block/Motion/Story.pursdeleted−220

@@ -1,220 +0,0 @@

1−module Yoga.Block.Motion.Story where

2−

3−import Prelude

4−import Data.Monoid (guard)

5−import Data.Tuple (Tuple(..))

6−import Data.Tuple.Nested ((/\))

7−import Effect (Effect)

8−import Effect.Unsafe (unsafePerformEffect)

9−import Framer.Motion (animateSharedLayout, withMotion)

10−import Framer.Motion as M

11−import React.Basic (JSX, element, fragment)

12−import React.Basic.DOM (css)

13−import React.Basic.DOM as R

14−import React.Basic.Emotion (center, flex)

15−import React.Basic.Emotion as E

16−import React.Basic.Events (handler_)

17−import React.Basic.Hooks (reactComponent, useState)

18−import React.Basic.Hooks as React

19−import Untagged.Castable (cast)

20−import Yoga (el, styled, (/>), (</), (</*))

21−import Yoga.Block.Container.Style as Styles

22−import Yoga.Block.Internal (_0)

23−import Yoga.Block.Internal.CSS (_100percent)

24−import Yoga.Block.Layout.Centre as Centre

25−import Yoga.Block.Layout.Sidebar as Sidebar

26−import Yoga.Block.Layout.Stack as Stack

27−

28−default ∷

29− { decorators ∷ Array (Effect JSX -> JSX)

30− , title ∷ String

31− }

32−default =

33− { title: "Motion"

34− , decorators:

35− [ \storyFn ->

36− R.div_

37− [ element E.global { styles: Styles.global }

38− , unsafePerformEffect storyFn

39− ]

40− ]

41− }

42−

43−motion ∷ Effect JSX

44−motion = do

45− mc <- mkMc

46− pure $ element mc {}

47− where

48− mkMc = do

49− motionCentre <- M.custom Centre.component

50− reactComponent "MotionTest" \{} -> React.do

51− Tuple isOpen setIsOpen <- React.useState false

52− pure

53− $ fragment

54− [ E.element R.div'

55− { className: "bg"

56− , css: backgroundStyle

57− , children:

58− [ E.element motionCentre

59− ( { className: "parent"

60− , css: parentStyle <> if isOpen then parentStyleOpen else mempty

61− , onClick: handler_ (setIsOpen not)

62− }

63− `withMotion`

64− { layout: true

65− , initial: css { borderRadius: 50, y: 0 }

66− }

67− )

68− ]

69− }

70− ]

71−

72− backgroundStyle ∷ E.Style

73− backgroundStyle =

74− E.css

75− { background: E.str "#da36dd"

76− , height: E.vh 88.0

77− , borderRadius: E.px 8

78− , display: flex

79− , alignItems: center

80− , justifyContent: center

81− }

82−

83− parentStyle ∷ E.Style

84− parentStyle =

85− E.css

86− { width: E.px 100

87− , height: E.px 100

88− , padding: _0

89− , margin: _0

90− , display: flex

91− , alignItems: center

92− , justifyContent: center

93− , boxShadow: E.str "30px 30px 60px #b92ebc, -30px -30px 60px #fb3efe"

94− , background: E.str "linear-gradient(145deg, #e93aec, #c431c7)"

95− }

96−

97− parentStyleOpen ∷ E.Style

98− parentStyleOpen =

99− E.css

100− { width: E.px 300

101− , height: E.px 300

102− , boxShadow: E.str "50px 50px 60px #b92ebc, -50px -50px 60px #fb3efe"

103− , background: E.str "linear-gradient(145deg, #e93aec, #c431c7)"

104− }

105−

106−layoutTrans ∷ Effect JSX

107−layoutTrans = do

108− mc <- mkMc

109− pure $ element mc {}

110− where

111− mkMc =

112− reactComponent "MotionTest" \{} -> React.do

113− sidebarOpen /\ setSidebarOpen <- useState true

114− let

115− ava1 =

116− el M.div

117− { layout: cast true

118− , layoutId: cast "ava"

119− , key: "ava"

120− , onClick: handler_ (setSidebarOpen not)

121− , transition: M.transition { delay: 0.2, type: "spring", damping: 30, stiffness: 200 }

122− , style:

123− css

124− { height: "200px"

125− , width: "200px"

126− , borderRadius: "50%"

127− , border: "4px solid darkslateblue"

128− , backgroundImage: "url('https://pbs.twimg.com/profile_images/1166763324723404801/nAUqF6tX.jpg')"

129− , backgroundSize: "cover"

130− }

131− }

132− []

133−

134− ava2 =

135− el M.div

136− { layout: cast true

137− , layoutId: cast "ava"

138− , key: "ava"

139− , onClick: handler_ (setSidebarOpen not)

140− , style:

141− css

142− { height: "100px"

143− , width: "100px"

144− , backgroundImage: "url('https://pbs.twimg.com/profile_images/1166763324723404801/nAUqF6tX.jpg')"

145− , backgroundSize: "cover"

146− , borderRadius: "50%"

147− , border: "2px solid darkslateblue"

148− }

149− }

150− []

151−

152− ava3 =

153− el M.div

154− { onClick: handler_ (setSidebarOpen not)

155− , exit: M.exit (css { scale: 1.4, opacity: 0 })

156− , transition: M.transition { duration: 0.19 }

157− , style:

158− css

159− { height: "100px"

160− , width: "100px"

161− , background: "oldlace"

162− , borderRadius: "50%"

163− , border: "4px solid darkslateblue"

164− }

165− }

166− []

167− pure

168− $ el animateSharedLayout {}

169− [ el M.animatePresence {}

170− [ if sidebarOpen then

171− ava1

172− else

173− el Stack.component {} [ ava2, ava3 ]

174− ]

175− ]

176−

177−animatedSidebar ∷ Effect JSX

178−animatedSidebar = do

179− mc <- mkMc

180− pure $ element mc {}

181− where

182− mkMc =

183− reactComponent "MotionTest" \{} -> React.do

184− sidebarOpen /\ setSidebarOpen <- useState true

185− let

186− sb =

187− M.div

188− </ { className: "sidebar"

189− , onClick: handler_ (setSidebarOpen not)

190− , initial: M.initial $ css { opacity: 0 }

191− , animate: M.animate $ css { opacity: 1, width: "200px" }

192− , exit: M.exit $ css { opacity: 0 }

193− , key: "sidebar"

194− }

195− /> [ R.text $ if sidebarOpen then "Sidebar" else "|||" ]

196− pure

197− $ R.div'

198− </ {}

199− /> [ Sidebar.component

200− </ { className: "parent"

201− }

202− /> [ element M.animatePresence

203− { children: [ guard sidebarOpen sb ]

204− }

205− , R.div' </ {}

206− /> [ el M.h1

207− { initial: M.initial (css { x: -10, opacity: 0 })

208− , animate:

209− M.animate

210− $ css

211− { x: [ -10, -3, 0 ]

212− , opacity: [ 0.1, 0.2, 1.0 ]

213− }

214− , transition: M.transition { duration: 0.6, times: [ 0.1, 0.4, 1.0 ] }

215− , key: "non-sidebar-heading"

216− }

217− [ R.text "Non-sidebar" ]

218− ]

219− ]

220− ]

src/Yoga/Block/Organism/Form.purs+57−60

@@ -46,7 +46,6 @@ import React.Basic.Emotion as E

4646import React.Basic.Hooks (reactComponent)

4747import React.Basic.Hooks as Hooks

4848import React.Basic.Popper (nullRef)

49−import React.Basic.Popper.Placement.Types as Placement

5049import React.DndKit as Dnd

5150import Record (disjointUnion)

5251import Record.Builder as RB

@@ -162,47 +161,47 @@ defaultRenderForest =

162161 Node { label, key, required: _required, validationError, children } ->

163162 maybe identity keyed key

164163 $ Block.box

165− </ { css:

166− E.css

167− { border: E.str $ "1px solid " <> colour.inputBorder

168− , background: E.str colour.backgroundLayer1

169− , borderRadius: E.var "--s-1"

170− , marginTop: E.str "var(--s0)"

171− , "--label-bg": E.str colour.background

172− , "--label-fg": E.str colour.text

173− , "&:focus-within":

174− nest

175− { "--label-bg": labelSmallFocusBackground

176− , "--label-fg": E.str colour.highlightText

177− }

178− }

179− , padding: E.str "0"

180− } --space: E.var "--s-2", css: E.css { marginTop: E.var "--s-1" } }

181− /> ( [ R.div'

182− </* { className: "ry-form-label"

183− , css:

184− labelSmall colour.background colour.text

185− <> E.css

186− { position: E.absolute

187− , display: E.inlineBlock

188− , "& > span":

189− nest

190− { background: E.var "--label-bg"

191− , color: E.var "--label-fg"

192− }

193− }

194− }

195− /> [ R.span_ [ label ] ]

196− ]

197− <> [ Block.box

198− </ { padding: E.var "--s-2"

164+ { css:

165+ E.css

166+ { border: E.str $ "1px solid " <> colour.inputBorder

167+ , background: E.str colour.backgroundLayer1

168+ , borderRadius: E.var "--s-1"

169+ , marginTop: E.str "var(--s0)"

170+ , "--label-bg": E.str colour.background

171+ , "--label-fg": E.str colour.text

172+ , "&:focus-within":

173+ nest

174+ { "--label-bg": labelSmallFocusBackground

175+ , "--label-fg": E.str colour.highlightText

176+ }

177+ }

178+ , padding: E.str "0"

179+ } --space: E.var "--s-2", css: E.css { marginTop: E.var "--s-1" } }

180+ ( [ R.div'

181+ </* { className: "ry-form-label"

182+ , css:

183+ labelSmall colour.background colour.text

184+ <> E.css

185+ { position: E.absolute

186+ , display: E.inlineBlock

187+ , "& > span":

188+ nest

189+ { background: E.var "--label-bg"

190+ , color: E.var "--label-fg"

191+ }

192+ }

193+ }

194+ /> [ R.span_ [ label ] ]

195+ ]

196+ <> [ Block.box

197+ { padding: E.var "--s-2"

199198 , css: E.css { marginTop: E.var "--s0" }

200199 }

201− /> [ intercalate fieldDivider (defaultRenderForest children) ]

202− ]

203− <> [ foldMap R.text validationError

204− ]

205− )

200+ [ intercalate fieldDivider (defaultRenderForest children) ]

201+ ]

202+ <> [ foldMap R.text validationError

203+ ]

204+ )

206205 where

207206 fieldDivider =

208207 R.div'

@@ -570,9 +569,7 @@ array { label, addLabel, defaultValue, editor } =

570569 [ Wrapper

571570 { key: Nothing

572571 , wrap:

573− \kids ->

574− Block.box </ { style: R.css { paddingTop: 0 } }

575− /> kids

572+ Block.box { style: R.css { paddingTop: 0 } }

576573 , children

577574 }

578575 ]

@@ -610,11 +607,11 @@ array { label, addLabel, defaultValue, editor } =

610607 ( Child

611608 { key: Nothing

612609 , child:

613− Block.cluster </ { justify: "flex-end" }

610+ Block.cluster { justify: "flex-end" }

614611 /> [ Block.button

615− </ { onClick: handler preventDefault (const (onChange $ flip append [ defaultValue ]))

616− }

617− /> [ R.text $ "+ " <> addLabel ]

612+ { onClick: handler preventDefault (const (onChange $ flip append [ defaultValue ]))

613+ }

614+ [ R.text $ "+ " <> addLabel ]

618615 ]

619616 }

620617 )

@@ -639,13 +636,13 @@ sortableArray { label, addLabel, defaultValue, editor } =

639636 \(onChange ∷ (Array u -> Array u) -> Effect Unit) -> do

640637 let

641638 addButton =

642− Block.cluster </ { justify: "flex-end" }

643− /> [ Block.button

644− </ { onClick: handler preventDefault (const (onChange $ flip append [ defaultValue ]))

645− , disabled: readOnly

646− }

647− /> [ R.text $ "+ " <> addLabel ]

648− ]

639+ Block.cluster { justify: "flex-end" }

640+ [ Block.button

641+ { onClick: handler preventDefault (const (onChange $ flip append [ defaultValue ]))

642+ , disabled: readOnly

643+ }

644+ [ R.text $ "+ " <> addLabel ]

645+ ]

649646 appendAddButton items =

650647 if readOnly then

651648 items

@@ -672,8 +669,8 @@ sortableArray { label, addLabel, defaultValue, editor } =

672669 { key: Nothing

673670 , wrap:

674671 \kids ->

675− Block.box </ { style: R.css { paddingTop: 0 } }

676− /> [ formArray </> { kids, onChange, readOnly } ]

672+ Block.box { style: R.css { paddingTop: 0 } }

673+ [ formArray </> { kids, onChange, readOnly } ]

677674 , children

678675 }

679676 ]

@@ -839,10 +836,10 @@ sortableArray { label, addLabel, defaultValue, editor } =

839836 -- , placement: Placement.Placement Placement.Bottom (Just Placement.End)

840837 , renderArrow: true

841838 }

842− /> [ Block.box </ {}

843− /> [ R.text "Sure?"

844− , deleteButton

845− ]

839+ /> [ Block.box {}

840+ [ R.text "Sure?"

841+ , deleteButton

842+ ]

846843 ]

847844 else

848845 mempty

src/Yoga/Block/Organism/Form/Validation.purs+8−8

@@ -356,14 +356,14 @@ validated runValidator editor =

356356 value = fromValidated v

357357 innerColumn_ =

358358 Block.stack

359− </* { className: "ry-form-inner-column"

360− , space: E.str "0"

361− , css:

362− E.css

363− { maxWidth: E.str "100%"

364− , margin: E.str "0"

365− }

366− }

359+ { className: "ry-form-inner-column"

360+ , space: E.str "0"

361+ , css:

362+ E.css

363+ { maxWidth: E.str "100%"

364+ , margin: E.str "0"

365+ }

366+ }

367367 -- validationMessage ∷ Maybe validated

368368 -- validationMessage = case v of

369369 -- Fresh _ -> Nothing

src/Yoga/Block/Palette.purs+3−4

@@ -1,13 +1,12 @@

11module Yoga.Block.Palette where

22

33import Prelude

4−import Color (Color, brightness, cssStringRGBA, darken, desaturate, hsl, hsla, lighten, rgba, rotateHue, saturate)

5−import Color as Color

4+import Color (Color, brightness, cssStringRGBA, darken, desaturate, hsl, rgba, rotateHue, saturate)

65import Data.Array (intercalate)

76import Yoga.Block.Container.Style (withAlpha)

87

9−type ColourVariants

10− = { regular ∷ Color, darker ∷ Color, dark ∷ Color }

8+type ColourVariants =

9+ { regular ∷ Color, darker ∷ Color, dark ∷ Color }

1110

1211pink ∷ ColourVariants

1312pink =

src/Yoga/Block/Typography.purs+1−1

@@ -77,7 +77,7 @@ fontSizeH2 =

7777 }

7878

7979fontSizeH3 ∷ Style

80−fontSizeH3 = css { fontSize: str size.text.heading.h3 }

80+fontSizeH3 = css { fontSize: str size.text.heading.h3, marginTop: _0, marginBottom: _0 }

8181

8282fontSizeH4 ∷ Style

8383fontSizeH4 = css { fontSize: str size.text.heading.h4 }

yarn.lock+60−5

@@ -1101,7 +1101,18 @@

11011101 "@emotion/utils" "0.11.3"

11021102 "@emotion/weak-memoize" "0.2.5"

11031103

1104−"@emotion/core@^10.0.28", "@emotion/core@^10.1.1":

1104+"@emotion/cache@^11.4.0":

1105+ version "11.4.0"

1106+ resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"

1107+ integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==

1108+ dependencies:

1109+ "@emotion/memoize" "^0.7.4"

1110+ "@emotion/sheet" "^1.0.0"

1111+ "@emotion/utils" "^1.0.0"

1112+ "@emotion/weak-memoize" "^0.2.5"

1113+ stylis "^4.0.3"

1114+

1115+"@emotion/core@^10.1.1":

11051116 version "10.1.1"

11061117 resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"

11071118 integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==

@@ -1122,7 +1133,7 @@

11221133 "@emotion/utils" "0.11.3"

11231134 babel-plugin-emotion "^10.0.27"

11241135

1125−"@emotion/hash@0.8.0":

1136+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":

11261137 version "0.8.0"

11271138 resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"

11281139 integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==

@@ -1139,6 +1150,24 @@

11391150 resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"

11401151 integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==

11411152

1153+"@emotion/memoize@^0.7.4":

1154+ version "0.7.5"

1155+ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"

1156+ integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==

1157+

1158+"@emotion/react@^11.4.0":

1159+ version "11.4.0"

1160+ resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.0.tgz#2465ad7b073a691409b88dfd96dc17097ddad9b7"

1161+ integrity sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==

1162+ dependencies:

1163+ "@babel/runtime" "^7.13.10"

1164+ "@emotion/cache" "^11.4.0"

1165+ "@emotion/serialize" "^1.0.2"

1166+ "@emotion/sheet" "^1.0.1"

1167+ "@emotion/utils" "^1.0.0"

1168+ "@emotion/weak-memoize" "^0.2.5"

1169+ hoist-non-react-statics "^3.3.1"

1170+

11421171"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":

11431172 version "0.11.16"

11441173 resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"

@@ -1150,11 +1179,27 @@

11501179 "@emotion/utils" "0.11.3"

11511180 csstype "^2.5.7"

11521181

1182+"@emotion/serialize@^1.0.2":

1183+ version "1.0.2"

1184+ resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"

1185+ integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==

1186+ dependencies:

1187+ "@emotion/hash" "^0.8.0"

1188+ "@emotion/memoize" "^0.7.4"

1189+ "@emotion/unitless" "^0.7.5"

1190+ "@emotion/utils" "^1.0.0"

1191+ csstype "^3.0.2"

1192+

11531193"@emotion/sheet@0.9.4":

11541194 version "0.9.4"

11551195 resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"

11561196 integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==

11571197

1198+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":

1199+ version "1.0.1"

1200+ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"

1201+ integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==

1202+

11581203"@emotion/styled-base@^10.0.27":

11591204 version "10.0.31"

11601205 resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"

@@ -1178,7 +1223,7 @@

11781223 resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"

11791224 integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==

11801225

1181−"@emotion/unitless@0.7.5":

1226+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5":

11821227 version "0.7.5"

11831228 resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"

11841229 integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==

@@ -1188,7 +1233,12 @@

11881233 resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"

11891234 integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==

11901235

1191−"@emotion/weak-memoize@0.2.5":

1236+"@emotion/utils@^1.0.0":

1237+ version "1.0.0"

1238+ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"

1239+ integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==

1240+

1241+"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":

11921242 version "0.2.5"

11931243 resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"

11941244 integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==

@@ -5341,7 +5391,7 @@ hmac-drbg@^1.0.1:

53415391 minimalistic-assert "^1.0.0"

53425392 minimalistic-crypto-utils "^1.0.1"

53435393

5344−hoist-non-react-statics@^3.3.0:

5394+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:

53455395 version "3.3.2"

53465396 resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"

53475397 integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==

@@ -9112,6 +9162,11 @@ style-value-types@4.1.4:

91129162 hey-listen "^1.0.8"

91139163 tslib "^2.1.0"

91149164

9165+stylis@^4.0.3:

9166+ version "4.0.10"

9167+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"

9168+ integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==

9169+

91159170supports-color@^5.3.0:

91169171 version "5.5.0"

91179172 resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"