-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Spinner
  ( -- ** Props
    SpinnerProps (..)
  , defaultSpinnerProps
    -- ** Views
  , spinner_
    -- ** Samples
  , spinnerUsage
  , spinnerSample
  , spinnerCodeSample
  , spinnerPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import qualified Miso.Svg           as S
import qualified Miso.Svg.Property  as SP
-----------------------------------------------------------------------------
import           Miso.UI.Button
import           Miso.UI.Icons
import           Miso.UI.Progress
import           Miso.UI.Types
-----------------------------------------------------------------------------
-- | Props for 'spinner_'
data SpinnerProps action
  = SpinnerProps
  { forall action. SpinnerProps action -> MisoString
spinnerLabel :: MisoString
    -- ^ @aria-label@ for screen readers
  , forall action. SpinnerProps action -> [MisoString]
spinnerClasses :: [MisoString]
    -- ^ Extra classes (e.g. @size-4@)
  , forall action. SpinnerProps action -> [Attribute action]
spinnerAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor
defaultSpinnerProps :: SpinnerProps action
defaultSpinnerProps :: forall action. SpinnerProps action
defaultSpinnerProps
  = SpinnerProps
  { spinnerLabel :: MisoString
spinnerLabel = MisoString
"Loading"
  , spinnerClasses :: [MisoString]
spinnerClasses = [ MisoString
"size-4" ]
  , spinnerAttrs :: [Attribute action]
spinnerAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/spinner/ Spinner>, driven by 'SpinnerProps'
spinner_ :: SpinnerProps action -> View model action
spinner_ :: forall action model. SpinnerProps action -> View model action
spinner_ SpinnerProps {[MisoString]
[Attribute action]
MisoString
spinnerLabel :: forall action. SpinnerProps action -> MisoString
spinnerClasses :: forall action. SpinnerProps action -> [MisoString]
spinnerAttrs :: forall action. SpinnerProps action -> [Attribute action]
spinnerLabel :: MisoString
spinnerClasses :: [MisoString]
spinnerAttrs :: [Attribute action]
..} = [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
lucide_
  ( [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"animate-spin" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
spinnerClasses)
    , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"label" MisoString
spinnerLabel
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"status"
    ] [Attribute action] -> [Attribute action] -> [Attribute action]
forall a. [a] -> [a] -> [a]
++ [Attribute action]
spinnerAttrs
  )
  [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M21 12a9 9 0 1 1-6.219-8.56" ]
  ]
-----------------------------------------------------------------------------
-- | Compact usage example (source of the kitchen sink "Code" tab)
spinnerUsage :: View model action
spinnerUsage :: forall model action. View model action
spinnerUsage =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
  [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex items-center gap-4" ]
  [ SpinnerProps action -> View model action
forall action model. SpinnerProps action -> View model action
spinner_ SpinnerProps action
forall action. SpinnerProps action
defaultSpinnerProps
  , SpinnerProps action -> View model action
forall action model. SpinnerProps action -> View model action
spinner_ SpinnerProps action
forall action. SpinnerProps action
defaultSpinnerProps { spinnerClasses = [ "size-6" ] }
  , SpinnerProps action -> View model action
forall action model. SpinnerProps action -> View model action
spinner_ SpinnerProps action
forall action. SpinnerProps action
defaultSpinnerProps
    { spinnerClasses = [ "size-8", "text-muted-foreground" ] }
  ]
-----------------------------------------------------------------------------
spinnerSample :: View model action
spinnerSample :: forall model action. View model action
spinnerSample =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.article_
  [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4"
  ]
  [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
    [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex shrink-0 items-center justify-center gap-2 self-start [&_svg]:pointer-events-none size-8 border rounded-md bg-muted [&_svg:not([class*='size-'])]:size-4"
    ]
    [ SpinnerProps action -> View model action
forall action model. SpinnerProps action -> View model action
spinner_ SpinnerProps action
forall action. SpinnerProps action
defaultSpinnerProps
      { spinnerClasses = [ "size-4", "text-muted-foreground" ]
      }
    ]
  , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
    [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex flex-1 flex-col gap-1" ]
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.h3_
      [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex w-fit items-center gap-2 text-sm leading-snug font-medium" ]
      [ View model action
"Downloading..." ]
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.p_
      [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4" ]
      [ View model action
"129 MB / 1000 MB" ]
    ]
  , ButtonProps action -> [View model action] -> View model action
forall action model.
ButtonProps action -> [View model action] -> View model action
button_ ButtonProps action
forall action. ButtonProps action
defaultButtonProps
      { buttonVariant = Outline
      , buttonSize = Small
      , buttonClasses = [ "self-start" ]
      }
      [ View model action
"Cancel" ]
  , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.footer_
    [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex basis-full items-center justify-between gap-2" ]
    [ ProgressProps action -> View model action
forall action model. ProgressProps action -> View model action
progress_ ProgressProps action
forall action. ProgressProps action
defaultProgressProps { progressValue = 13 }
    ]
  ]
-----------------------------------------------------------------------------
spinnerCodeSample :: View model action
spinnerCodeSample :: forall model action. View model action
spinnerCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MySpinner (spinnerUsage) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import qualified Miso.Svg           as S
  import qualified Miso.Svg.Property  as SP
  import           Miso.UI.Button
  import           Miso.UI.Icons
  import           Miso.UI.Progress
  import           Miso.UI.Types
  import           Miso.UI.Spinner
  -----------------------------------------------------------------------------
  spinnerUsage :: View model action
  spinnerUsage =
    H.div_
    [ P.class_ "flex items-center gap-4" ]
    [ spinner_ defaultSpinnerProps
    , spinner_ defaultSpinnerProps { spinnerClasses = [ "size-6" ] }
    , spinner_ defaultSpinnerProps
      { spinnerClasses = [ "size-8", "text-muted-foreground" ] }
    ]
  """
-----------------------------------------------------------------------------
spinnerPropsApi :: View model action
spinnerPropsApi :: forall model action. View model action
spinnerPropsApi =
  View model action
"""
  -- | Props for 'spinner_'
  data SpinnerProps action
    = SpinnerProps
    { spinnerLabel :: MisoString
      -- ^ @aria-label@ for screen readers
    , spinnerClasses :: [MisoString]
      -- ^ Extra classes (e.g. @size-4@)
    , spinnerAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor
  defaultSpinnerProps :: SpinnerProps action
  defaultSpinnerProps
    = SpinnerProps
    { spinnerLabel = "Loading"
    , spinnerClasses = [ "size-4" ]
    , spinnerAttrs = []
    }
  """
-----------------------------------------------------------------------------