-- Hoogle documentation, generated by Haddock
-- See Hoogle, http://www.haskell.org/hoogle/


-- | Type-safe HTML and CSS with intuitive layouts and composable styles.
--   
--   Type-safe HTML and CSS with intuitive layouts and composable styles.
--   Inspired by Tailwindcss and Elm-UI . See documentation for the
--   <tt>Web.View</tt> module below
@package web-view
@version 0.2.2

module Web.View.Reset

-- | Default CSS to clear unintuitive default styles. This or
--   <a>cssResetLink</a> is required.
--   
--   <pre>
--   import Data.String.Interpolate (i)
--   
--   toDocument :: Text -&gt; Text
--   toDocument cnt =
--     [i|&lt;html&gt;
--       &lt;head&gt;
--         &lt;style type="text/css"&gt;#{cssResetEmbed}&lt;/style&gt;
--       &lt;/head&gt;
--       &lt;body&gt;#{cnt}&lt;/body&gt;
--     &lt;/html&gt;|]
--   </pre>
cssResetEmbed :: ByteString

-- | Alternatively, the reset is available as on a CDN
--   
--   <pre>
--   import Data.String.Interpolate (i)
--   
--   toDocument :: Text -&gt; Text
--   toDocument cnt =
--     [i|&lt;html&gt;
--       &lt;head&gt;
--         &lt;link rel="stylesheet" href="#{cssResetEmbed}"&gt;
--       &lt;/head&gt;
--       &lt;body&gt;#{cnt}&lt;/body&gt;
--     &lt;/html&gt;|]
--   </pre>
cssResetLink :: Text

module Web.View.Types
data Content
Node :: Element -> Content
Text :: Text -> Content

-- | Raw embedded HTML or SVG. See <a>raw</a>
Raw :: Text -> Content

-- | A single HTML tag. Note that the class attribute is stored separately
--   from the rest of the attributes to make adding styles easier
data Element
Element :: Name -> [[Class]] -> Attributes -> [Content] -> Element
[$sel:name:Element] :: Element -> Name
[$sel:classes:Element] :: Element -> [[Class]]
[$sel:attributes:Element] :: Element -> Attributes
[$sel:children:Element] :: Element -> [Content]
type Attributes = Map Name AttValue
type Attribute = (Name, AttValue)
type Name = Text
type AttValue = Text

-- | Element functions expect a Mod function as their first argument that
--   adds attributes and classes.
--   
--   <pre>
--   userEmail :: User -&gt; View c ()
--   userEmail user = input (fontSize 16 . active) (text user.email)
--     where
--       active = isActive user then bold else id
--   </pre>
type Mod = Element -> Element

-- | All the atomic classes used in a <a>View</a>
type CSS = Map Selector Class

-- | Atomic classes include a selector and the corresponding styles
data Class
Class :: Selector -> Styles -> Class
[$sel:selector:Class] :: Class -> Selector
[$sel:properties:Class] :: Class -> Styles

-- | The styles to apply for a given atomic <a>Class</a>
type Styles = Map Name StyleValue

-- | The selector to use for the given atomic <a>Class</a>
data Selector
Selector :: Maybe Text -> Maybe Pseudo -> Maybe Media -> ClassName -> Selector
[$sel:parent:Selector] :: Selector -> Maybe Text
[$sel:pseudo:Selector] :: Selector -> Maybe Pseudo
[$sel:media:Selector] :: Selector -> Maybe Media
[$sel:className:Selector] :: Selector -> ClassName

-- | Create a <a>Selector</a> given only a <a>ClassName</a>
selector :: ClassName -> Selector

-- | A class name
newtype ClassName
ClassName :: Text -> ClassName
[$sel:text:ClassName] :: ClassName -> Text

-- | Convert a type into a className segment to generate unique compound
--   style names based on the value
class ToClassName a
toClassName :: ToClassName a => a -> Text
toClassName :: (ToClassName a, Show a) => a -> Text

-- | Psuedos allow for specifying styles that only apply in certain
--   conditions. See <a>hover</a> etc
--   
--   <pre>
--   el (color Primary . hover (color White)) "hello"
--   </pre>
data Pseudo
Hover :: Pseudo
Active :: Pseudo
Even :: Pseudo
Odd :: Pseudo

-- | The value of a css style property
newtype StyleValue
StyleValue :: String -> StyleValue

-- | Use a type as a css style property value
class ToStyleValue a
toStyleValue :: ToStyleValue a => a -> StyleValue
toStyleValue :: (ToStyleValue a, Show a) => a -> StyleValue

-- | Px, converted to Rem. Allows for the user to change the document font
--   size and have the app scale accordingly. But allows the programmer to
--   code in pixels to match a design
newtype PxRem
PxRem :: Int -> PxRem

-- | Milliseconds, used for transitions
newtype Ms
Ms :: Int -> Ms

-- | Media allows for responsive designs that change based on
--   characteristics of the window. See <a>Layout Example</a>
data Media
MinWidth :: Int -> Media
MaxWidth :: Int -> Media

-- | Options for styles that support specifying various sides. This has a
--   "fake" Num instance to support literals
--   
--   <pre>
--   border 5
--   border (X 2)
--   border (TRBL 0 5 0 0)
--   </pre>
data Sides a
All :: a -> Sides a
TRBL :: a -> a -> a -> a -> Sides a
X :: a -> Sides a
Y :: a -> Sides a
XY :: a -> a -> Sides a

-- | Element's attributes do not include class, which is separated.
--   FlatAttributes generate the class attribute and include it
newtype FlatAttributes
FlatAttributes :: Attributes -> FlatAttributes
[$sel:attributes:FlatAttributes] :: FlatAttributes -> Attributes
newtype Url
Url :: Text -> Url

-- | ToColor allows you to create a type containing your application's
--   colors:
--   
--   <pre>
--   data AppColor
--     = White
--     | Primary
--     | Dark
--   
--   instance ToColor AppColor where
--     colorValue White = "#FFF"
--     colorValue Dark = "#333"
--     colorValue Primary = "#00F"
--   
--   hello :: View c ()
--   hello = el (bg Primary . color White) "Hello"
--   </pre>
class ToColor a
colorValue :: ToColor a => a -> HexColor
colorName :: ToColor a => a -> Text
colorName :: (ToColor a, Show a) => a -> Text

-- | Hexidecimal Color. Can be specified with or without the leading
--   <tt>#</tt>. Recommended to use an AppColor type instead of manually
--   using hex colors. See <a>ToColor</a>
newtype HexColor
HexColor :: Text -> HexColor
instance Data.String.IsString Web.View.Types.ClassName
instance GHC.Classes.Ord Web.View.Types.ClassName
instance GHC.Classes.Eq Web.View.Types.ClassName
instance GHC.Classes.Ord Web.View.Types.Pseudo
instance GHC.Classes.Eq Web.View.Types.Pseudo
instance GHC.Show.Show Web.View.Types.Pseudo
instance GHC.Show.Show Web.View.Types.StyleValue
instance Data.String.IsString Web.View.Types.StyleValue
instance GHC.Num.Num Web.View.Types.PxRem
instance Web.View.Types.ToClassName Web.View.Types.PxRem
instance GHC.Show.Show Web.View.Types.PxRem
instance Web.View.Types.ToClassName Web.View.Types.Ms
instance GHC.Num.Num Web.View.Types.Ms
instance GHC.Show.Show Web.View.Types.Ms
instance GHC.Classes.Ord Web.View.Types.Media
instance GHC.Classes.Eq Web.View.Types.Media
instance GHC.Classes.Ord Web.View.Types.Selector
instance GHC.Classes.Eq Web.View.Types.Selector
instance GHC.Generics.Generic Web.View.Types.FlatAttributes
instance Data.String.IsString Web.View.Types.Url
instance Web.View.Types.ToColor Web.View.Types.HexColor
instance Web.View.Types.ToStyleValue Web.View.Types.HexColor
instance Data.String.IsString Web.View.Types.HexColor
instance GHC.Num.Num a => GHC.Num.Num (Web.View.Types.Sides a)
instance Data.String.IsString Web.View.Types.Selector
instance Web.View.Types.ToStyleValue Web.View.Types.Ms
instance Web.View.Types.ToStyleValue Web.View.Types.PxRem
instance Web.View.Types.ToStyleValue GHC.Base.String
instance Web.View.Types.ToStyleValue Data.Text.Internal.Text
instance Web.View.Types.ToStyleValue GHC.Types.Int
instance Web.View.Types.ToClassName GHC.Types.Int
instance Web.View.Types.ToClassName GHC.Types.Float
instance Web.View.Types.ToClassName Data.Text.Internal.Text

module Web.View.Style

-- | Set to a specific width
width :: PxRem -> Mod

-- | Set to a specific height
height :: PxRem -> Mod

-- | Allow width to grow to contents but not shrink any smaller than value
minWidth :: PxRem -> Mod

-- | Allow height to grow to contents but not shrink any smaller than value
minHeight :: PxRem -> Mod

-- | Space surrounding the children of the element
--   
--   To create even spacing around and between all elements:
--   
--   <pre>
--   col (pad 10 . gap 10) $ do
--     el_ "one"
--     el_ "two"
--     el_ "three"
--   </pre>
pad :: Sides PxRem -> Mod

-- | The space between child elements. See <a>pad</a>
gap :: PxRem -> Mod
fontSize :: PxRem -> Mod

-- | Set container to be a row. Favor <a>row</a> when possible
flexRow :: Mod

-- | Set container to be a column. Favor <a>col</a> when possible
flexCol :: Mod

-- | Adds a basic drop shadow to an element
shadow :: Mod

-- | Round the corners of the element
rounded :: PxRem -> Mod

-- | Set the background color. See <a>ToColor</a>
bg :: ToColor c => c -> Mod

-- | Set the text color. See <a>ToColor</a>
color :: ToColor c => c -> Mod
bold :: Mod

-- | Hide an element. See <a>parent</a> and <a>media</a>
hide :: Mod

-- | Set a border around the element
--   
--   <pre>
--   el (border 1) "all sides"
--   el (border (X 1)) "only left and right"
--   </pre>
border :: Sides PxRem -> Mod

-- | Set a border color. See <a>ToColor</a>
borderColor :: ToColor c => c -> Mod

-- | Use a button-like cursor when hovering over the element
--   
--   Button-like elements:
--   
--   <pre>
--   btn = pointer . bg Primary . hover (bg PrimaryLight)
--   
--   options = row id $ do
--     el btn "Login"
--     el btn "Sign Up"
--   </pre>
pointer :: Mod

-- | Cut off the contents of the element
truncate :: Mod

-- | Animate changes to the given property
--   
--   <pre>
--   el (transition 100 (Height 400)) "Tall"
--   el (transition 100 (Height 100)) "Small"
--   </pre>
transition :: Ms -> TransitionProperty -> Mod
data TransitionProperty
Width :: PxRem -> TransitionProperty
Height :: PxRem -> TransitionProperty
textAlign :: Align -> Mod
data Align
Center :: Align

-- | Apply when hovering over an element
--   
--   <pre>
--   el (bg Primary . hover (bg PrimaryLight)) "Hover"
--   </pre>
hover :: Mod -> Mod

-- | Apply when the mouse is pressed down on an element
active :: Mod -> Mod

-- | Apply to even-numbered children
even :: Mod -> Mod

-- | Apply to odd-numbered children
odd :: Mod -> Mod

-- | Apply when the Media matches the current window. This allows for
--   responsive designs
--   
--   <pre>
--   el (width 100 . media (MinWidth 800) (width 400))
--     "Big if window &gt; 800"
--   </pre>
media :: Media -> Mod -> Mod

-- | Apply when the element is somewhere inside an anscestor.
--   
--   For example, the HTMX library applies an "htmx-request" class to the
--   body when a request is pending. We can use this to create a loading
--   indicator
--   
--   <pre>
--   el (pad 10) $ do
--     el (parent "htmx-request" flexRow . hide) "Loading..."
--     el (parent "htmx-request" hide . flexRow) "Normal Content"
--   </pre>
parent :: Text -> Mod -> Mod
applyPseudo :: Pseudo -> Mod -> Mod
mapModClass :: (Class -> Class) -> Mod -> Mod

-- | Add a single class
--   
--   <pre>
--   width :: PxRem -&gt; Mod
--   width n =
--     addClass
--       $ cls ("w" -. n)
--       &amp; prop "width" n
--       &amp; prop @Int "flex-shrink" 0
--   </pre>
addClass :: Class -> Mod

-- | Construct a class from a ClassName
cls :: ClassName -> Class

-- | Add a property to a class
prop :: ToStyleValue val => Name -> val -> Class -> Class

-- | Hyphneate classnames
(-.) :: ToClassName a => ClassName -> a -> ClassName
infixl 6 -.
instance GHC.Show.Show Web.View.Style.TransitionProperty
instance Web.View.Types.ToStyleValue Web.View.Style.Align
instance Web.View.Types.ToClassName Web.View.Style.Align
instance GHC.Show.Show Web.View.Style.Align

module Web.View.View

-- | Views are HTML fragments that carry all <a>CSS</a> used by any child
--   element.
--   
--   <pre>
--   view :: View c ()
--   view = col (pad 10 . gap 10) $ do
--     el bold "Hello"
--     el_ "World"
--   </pre>
--   
--   They can also have a context which can be used to create type-safe or
--   context-aware elements. See <a>table</a> for an example
newtype View context a
View :: Eff [Reader context, State ViewState] a -> View context a
[$sel:viewState:View] :: View context a -> Eff [Reader context, State ViewState] a
data ViewState
ViewState :: [Content] -> CSS -> ViewState
[$sel:contents:ViewState] :: ViewState -> [Content]
[$sel:css:ViewState] :: ViewState -> CSS

-- | Extract the <a>ViewState</a> from a <a>View</a>
runView :: context -> View context () -> ViewState

-- | Get the current context
context :: View context context

-- | Run a view with a specific <a>context</a> in a parent <a>View</a> with
--   a different context. This can be used to create type safe view
--   functions, like <a>table</a>
addContext :: context -> View context () -> View c ()
viewModContents :: ([Content] -> [Content]) -> View context ()
viewModCss :: (CSS -> CSS) -> View context ()
viewAddClasses :: [Class] -> View c ()
viewAddContent :: Content -> View c ()

-- | Inserts contents into the first child element
viewInsertContents :: [Content] -> View c ()

-- | Create a new element constructor
--   
--   <pre>
--   aside :: Mod -&gt; View c () -&gt; View c ()
--   aside = tag "aside"
--   </pre>
tag :: Text -> Mod -> View c () -> View c ()

-- | Set an attribute, replacing existing value
--   
--   <pre>
--   hlink :: Text -&gt; View c () -&gt; View c ()
--   hlink url content = tag "a" (att "href" url) content
--   </pre>
att :: Name -> AttValue -> Mod
instance GHC.Base.Monad (Web.View.View.View context)
instance GHC.Base.Applicative (Web.View.View.View context)
instance GHC.Base.Functor (Web.View.View.View context)
instance Data.String.IsString (Web.View.View.View context ())
instance GHC.Base.Semigroup Web.View.View.ViewState

module Web.View.Render

-- | Renders a <a>View</a> as HTML with embedded CSS class definitions
--   
--   <pre>
--   &gt;&gt;&gt; renderText $ el bold "Hello"
--   &lt;style type='text/css'&gt;.bold { font-weight:bold }&lt;/style&gt;
--   &lt;div class='bold'&gt;Hello&lt;/div&gt;
--   </pre>
renderText :: View () () -> Text
renderLazyText :: View () () -> Text
renderLazyByteString :: View () () -> ByteString

-- | Render with the specified view context
--   
--   <pre>
--   renderText' () $ el bold "Hello"
--   </pre>
renderText' :: c -> View c () -> Text
renderTag :: (Text -> Text) -> Element -> [Text]
renderCSS :: CSS -> [Text]
indent :: Text -> Text

-- | The css selector for this style
selectorText :: Selector -> Text

-- | The class name as it appears in the element
classNameElementText :: Maybe Media -> Maybe Text -> Maybe Pseudo -> ClassName -> Text
pseudoText :: Pseudo -> Text

-- | The <a>Attributes</a> for an element, inclusive of class.
flatAttributes :: Element -> FlatAttributes

module Web.View.Element

-- | A basic element
--   
--   <pre>
--   el (bold . pad 10) "Hello"
--   </pre>
el :: Mod -> View c () -> View c ()

-- | A basic element, with no modifiers
--   
--   <pre>
--   el_ "Hello"
--   </pre>
el_ :: View c () -> View c ()

-- | Add text to a view. Not required for string literals
--   
--   <pre>
--   el_ $ do
--     "Hello: "
--     text user.name
--   </pre>
text :: Text -> View c ()

-- | Embed static, unescaped HTML or SVG. Take care not to use <a>raw</a>
--   with user-generated content.
--   
--   <pre>
--   spinner = raw "&lt;svg&gt;...&lt;/svg&gt;"
--   </pre>
raw :: Text -> View c ()

-- | Do not show any content
--   
--   <pre>
--   if isVisible
--    then content
--    else none
--   </pre>
none :: View c ()
pre :: Mod -> Text -> View c ()
form :: Mod -> View c () -> View c ()
input :: Mod -> View c ()
name :: Text -> Mod
value :: Text -> Mod
label :: Mod -> View c () -> View c ()
button :: Mod -> View c () -> View c ()
script :: Text -> View c ()
style :: Text -> View c ()
stylesheet :: Text -> View c ()

-- | Create a type safe data table by specifying columns
--   
--   <pre>
--   usersTable :: [User] -&gt; View c ()
--   usersTable us = do
--     table id us $ do
--       tcol (th hd "Name") $ \u -&gt; td cell $ text u.name
--       tcol (th hd "Email") $ \u -&gt; td cell $ text u.email
--    where
--     hd = cell . bold
--     cell = pad 4 . border 1
--   </pre>
table :: Mod -> [dt] -> Eff '[Writer [TableColumn c dt]] () -> View c ()
tcol :: forall dt c. View (TableHead c) () -> (dt -> View dt ()) -> Eff '[Writer [TableColumn c dt]] ()
th :: Mod -> View c () -> View (TableHead c) ()
td :: Mod -> View () () -> View dt ()
newtype TableHead a
TableHead :: a -> TableHead a
data TableColumn c dt
TableColumn :: View (TableHead c) () -> (dt -> View dt ()) -> TableColumn c dt
[$sel:headCell:TableColumn] :: TableColumn c dt -> View (TableHead c) ()
[$sel:dataCell:TableColumn] :: TableColumn c dt -> dt -> View dt ()

module Web.View.Layout

-- | We can intuitively create layouts with combindations of <a>row</a>,
--   <a>col</a>, <a>grow</a>, and <a>space</a>
--   
--   Wrap main content in <a>layout</a> to allow the view to consume
--   vertical screen space
--   
--   <pre>
--   holygrail :: <a>View</a> c ()
--   holygrail = <a>layout</a> id $ do
--     <a>row</a> section "Top Bar"
--     <a>row</a> <a>grow</a> $ do
--       <a>col</a> section "Left Sidebar"
--       <a>col</a> (section . <a>grow</a>) "Main Content"
--       <a>col</a> section "Right Sidebar"
--     <a>row</a> section "Bottom Bar"
--     where section = <a>border</a> 1
--   </pre>
layout :: Mod -> View c () -> View c ()

-- | As <a>layout</a> but as a <a>Mod</a>
--   
--   <pre>
--   holygrail = col root $ do
--     ...
--   </pre>
root :: Mod

-- | Lay out children in a column.
--   
--   <pre>
--   col grow $ do
--      el_ "Top"
--      space
--      el_ "Bottom"
--   </pre>
col :: Mod -> View c () -> View c ()

-- | Lay out children in a row
--   
--   <pre>
--   row id $ do
--      el_ "Left"
--      space
--      el_ "Right"
--   </pre>
row :: Mod -> View c () -> View c ()

-- | Grow to fill the available space in the parent <a>row</a> or
--   <a>col</a>
--   
--   <pre>
--   row id $ do
--    el grow none
--    el_ "Right"
--   </pre>
grow :: Mod

-- | Space that fills the available space in the parent <a>row</a> or
--   <a>col</a>.
--   
--   <pre>
--   row id $ do
--    space
--    el_ "Right"
--   </pre>
--   
--   This is equivalent to an empty element with <a>grow</a>
--   
--   <pre>
--   space = el grow none
--   </pre>
space :: View c ()

-- | Allow items to become smaller than their contents. This is not the
--   opposite of grow!
collapse :: Mod

-- | Make a fixed <a>layout</a> by putting <a>scroll</a> on a child-element
--   
--   <pre>
--   document = row root $ do
--     nav (width 300) "Sidebar"
--     col (grow . scroll) "Main Content"
--   </pre>
scroll :: Mod

-- | A Nav element
nav :: Mod -> View c () -> View c ()


-- | Type-safe HTML and CSS with intuitive layout and composable styles.
--   Inspired by Tailwindcss and Elm-UI
module Web.View

-- | Renders a <a>View</a> as HTML with embedded CSS class definitions
--   
--   <pre>
--   &gt;&gt;&gt; renderText $ el bold "Hello"
--   &lt;style type='text/css'&gt;.bold { font-weight:bold }&lt;/style&gt;
--   &lt;div class='bold'&gt;Hello&lt;/div&gt;
--   </pre>
renderText :: View () () -> Text
renderLazyText :: View () () -> Text
renderLazyByteString :: View () () -> ByteString

-- | Views are HTML fragments that carry all <a>CSS</a> used by any child
--   element.
--   
--   <pre>
--   view :: View c ()
--   view = col (pad 10 . gap 10) $ do
--     el bold "Hello"
--     el_ "World"
--   </pre>
--   
--   They can also have a context which can be used to create type-safe or
--   context-aware elements. See <a>table</a> for an example
data View context a

-- | Element functions expect a Mod function as their first argument that
--   adds attributes and classes.
--   
--   <pre>
--   userEmail :: User -&gt; View c ()
--   userEmail user = input (fontSize 16 . active) (text user.email)
--     where
--       active = isActive user then bold else id
--   </pre>
type Mod = Element -> Element

-- | A basic element
--   
--   <pre>
--   el (bold . pad 10) "Hello"
--   </pre>
el :: Mod -> View c () -> View c ()

-- | A basic element, with no modifiers
--   
--   <pre>
--   el_ "Hello"
--   </pre>
el_ :: View c () -> View c ()

-- | We can intuitively create layouts with combindations of <a>row</a>,
--   <a>col</a>, <a>grow</a>, and <a>space</a>
--   
--   Wrap main content in <a>layout</a> to allow the view to consume
--   vertical screen space
--   
--   <pre>
--   holygrail :: <a>View</a> c ()
--   holygrail = <a>layout</a> id $ do
--     <a>row</a> section "Top Bar"
--     <a>row</a> <a>grow</a> $ do
--       <a>col</a> section "Left Sidebar"
--       <a>col</a> (section . <a>grow</a>) "Main Content"
--       <a>col</a> section "Right Sidebar"
--     <a>row</a> section "Bottom Bar"
--     where section = <a>border</a> 1
--   </pre>
layout :: Mod -> View c () -> View c ()

-- | As <a>layout</a> but as a <a>Mod</a>
--   
--   <pre>
--   holygrail = col root $ do
--     ...
--   </pre>
root :: Mod

-- | Lay out children in a column.
--   
--   <pre>
--   col grow $ do
--      el_ "Top"
--      space
--      el_ "Bottom"
--   </pre>
col :: Mod -> View c () -> View c ()

-- | Lay out children in a row
--   
--   <pre>
--   row id $ do
--      el_ "Left"
--      space
--      el_ "Right"
--   </pre>
row :: Mod -> View c () -> View c ()

-- | Grow to fill the available space in the parent <a>row</a> or
--   <a>col</a>
--   
--   <pre>
--   row id $ do
--    el grow none
--    el_ "Right"
--   </pre>
grow :: Mod

-- | Space that fills the available space in the parent <a>row</a> or
--   <a>col</a>.
--   
--   <pre>
--   row id $ do
--    space
--    el_ "Right"
--   </pre>
--   
--   This is equivalent to an empty element with <a>grow</a>
--   
--   <pre>
--   space = el grow none
--   </pre>
space :: View c ()

-- | Allow items to become smaller than their contents. This is not the
--   opposite of grow!
collapse :: Mod

-- | Make a fixed <a>layout</a> by putting <a>scroll</a> on a child-element
--   
--   <pre>
--   document = row root $ do
--     nav (width 300) "Sidebar"
--     col (grow . scroll) "Main Content"
--   </pre>
scroll :: Mod

-- | A Nav element
nav :: Mod -> View c () -> View c ()

-- | Add text to a view. Not required for string literals
--   
--   <pre>
--   el_ $ do
--     "Hello: "
--     text user.name
--   </pre>
text :: Text -> View c ()

-- | Embed static, unescaped HTML or SVG. Take care not to use <a>raw</a>
--   with user-generated content.
--   
--   <pre>
--   spinner = raw "&lt;svg&gt;...&lt;/svg&gt;"
--   </pre>
raw :: Text -> View c ()

-- | Do not show any content
--   
--   <pre>
--   if isVisible
--    then content
--    else none
--   </pre>
none :: View c ()
pre :: Mod -> Text -> View c ()
form :: Mod -> View c () -> View c ()
input :: Mod -> View c ()
name :: Text -> Mod
value :: Text -> Mod
label :: Mod -> View c () -> View c ()
button :: Mod -> View c () -> View c ()

-- | Create a type safe data table by specifying columns
--   
--   <pre>
--   usersTable :: [User] -&gt; View c ()
--   usersTable us = do
--     table id us $ do
--       tcol (th hd "Name") $ \u -&gt; td cell $ text u.name
--       tcol (th hd "Email") $ \u -&gt; td cell $ text u.email
--    where
--     hd = cell . bold
--     cell = pad 4 . border 1
--   </pre>
table :: Mod -> [dt] -> Eff '[Writer [TableColumn c dt]] () -> View c ()
tcol :: forall dt c. View (TableHead c) () -> (dt -> View dt ()) -> Eff '[Writer [TableColumn c dt]] ()
th :: Mod -> View c () -> View (TableHead c) ()
td :: Mod -> View () () -> View dt ()
script :: Text -> View c ()
style :: Text -> View c ()
stylesheet :: Text -> View c ()

-- | Set to a specific width
width :: PxRem -> Mod

-- | Set to a specific height
height :: PxRem -> Mod

-- | Allow width to grow to contents but not shrink any smaller than value
minWidth :: PxRem -> Mod

-- | Allow height to grow to contents but not shrink any smaller than value
minHeight :: PxRem -> Mod

-- | Set container to be a row. Favor <a>row</a> when possible
flexRow :: Mod

-- | Set container to be a column. Favor <a>col</a> when possible
flexCol :: Mod

-- | Space surrounding the children of the element
--   
--   To create even spacing around and between all elements:
--   
--   <pre>
--   col (pad 10 . gap 10) $ do
--     el_ "one"
--     el_ "two"
--     el_ "three"
--   </pre>
pad :: Sides PxRem -> Mod

-- | The space between child elements. See <a>pad</a>
gap :: PxRem -> Mod

-- | Hide an element. See <a>parent</a> and <a>media</a>
hide :: Mod

-- | Adds a basic drop shadow to an element
shadow :: Mod

-- | Round the corners of the element
rounded :: PxRem -> Mod
fontSize :: PxRem -> Mod

-- | Set the text color. See <a>ToColor</a>
color :: ToColor c => c -> Mod

-- | Set the background color. See <a>ToColor</a>
bg :: ToColor c => c -> Mod
bold :: Mod

-- | Set a border around the element
--   
--   <pre>
--   el (border 1) "all sides"
--   el (border (X 1)) "only left and right"
--   </pre>
border :: Sides PxRem -> Mod

-- | Set a border color. See <a>ToColor</a>
borderColor :: ToColor c => c -> Mod

-- | Use a button-like cursor when hovering over the element
--   
--   Button-like elements:
--   
--   <pre>
--   btn = pointer . bg Primary . hover (bg PrimaryLight)
--   
--   options = row id $ do
--     el btn "Login"
--     el btn "Sign Up"
--   </pre>
pointer :: Mod

-- | Animate changes to the given property
--   
--   <pre>
--   el (transition 100 (Height 400)) "Tall"
--   el (transition 100 (Height 100)) "Small"
--   </pre>
transition :: Ms -> TransitionProperty -> Mod
textAlign :: Align -> Mod

-- | Apply when hovering over an element
--   
--   <pre>
--   el (bg Primary . hover (bg PrimaryLight)) "Hover"
--   </pre>
hover :: Mod -> Mod

-- | Apply when the mouse is pressed down on an element
active :: Mod -> Mod

-- | Apply to even-numbered children
even :: Mod -> Mod

-- | Apply to odd-numbered children
odd :: Mod -> Mod

-- | Apply when the Media matches the current window. This allows for
--   responsive designs
--   
--   <pre>
--   el (width 100 . media (MinWidth 800) (width 400))
--     "Big if window &gt; 800"
--   </pre>
media :: Media -> Mod -> Mod

-- | Apply when the element is somewhere inside an anscestor.
--   
--   For example, the HTMX library applies an "htmx-request" class to the
--   body when a request is pending. We can use this to create a loading
--   indicator
--   
--   <pre>
--   el (pad 10) $ do
--     el (parent "htmx-request" flexRow . hide) "Loading..."
--     el (parent "htmx-request" hide . flexRow) "Normal Content"
--   </pre>
parent :: Text -> Mod -> Mod

-- | Get the current context
context :: View context context

-- | Run a view with a specific <a>context</a> in a parent <a>View</a> with
--   a different context. This can be used to create type safe view
--   functions, like <a>table</a>
addContext :: context -> View context () -> View c ()

-- | Create a new element constructor
--   
--   <pre>
--   aside :: Mod -&gt; View c () -&gt; View c ()
--   aside = tag "aside"
--   </pre>
tag :: Text -> Mod -> View c () -> View c ()

-- | Set an attribute, replacing existing value
--   
--   <pre>
--   hlink :: Text -&gt; View c () -&gt; View c ()
--   hlink url content = tag "a" (att "href" url) content
--   </pre>
att :: Name -> AttValue -> Mod

-- | Options for styles that support specifying various sides. This has a
--   "fake" Num instance to support literals
--   
--   <pre>
--   border 5
--   border (X 2)
--   border (TRBL 0 5 0 0)
--   </pre>
data Sides a
All :: a -> Sides a
TRBL :: a -> a -> a -> a -> Sides a
X :: a -> Sides a
Y :: a -> Sides a
XY :: a -> a -> Sides a

-- | Media allows for responsive designs that change based on
--   characteristics of the window. See <a>Layout Example</a>
data Media
MinWidth :: Int -> Media
MaxWidth :: Int -> Media

-- | Px, converted to Rem. Allows for the user to change the document font
--   size and have the app scale accordingly. But allows the programmer to
--   code in pixels to match a design
data PxRem
newtype Url
Url :: Text -> Url
data TransitionProperty
Width :: PxRem -> TransitionProperty
Height :: PxRem -> TransitionProperty

-- | Milliseconds, used for transitions
data Ms

-- | ToColor allows you to create a type containing your application's
--   colors:
--   
--   <pre>
--   data AppColor
--     = White
--     | Primary
--     | Dark
--   
--   instance ToColor AppColor where
--     colorValue White = "#FFF"
--     colorValue Dark = "#333"
--     colorValue Primary = "#00F"
--   
--   hello :: View c ()
--   hello = el (bg Primary . color White) "Hello"
--   </pre>
class ToColor a
colorValue :: ToColor a => a -> HexColor
colorName :: ToColor a => a -> Text
colorName :: (ToColor a, Show a) => a -> Text

-- | Hexidecimal Color. Can be specified with or without the leading
--   <tt>#</tt>. Recommended to use an AppColor type instead of manually
--   using hex colors. See <a>ToColor</a>
newtype HexColor
HexColor :: Text -> HexColor