-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Tabs
  ( -- ** Props
    TabsProps (..)
  , defaultTabsProps
  , TabButtonProps (..)
  , defaultTabButtonProps
  , TabPanelProps (..)
  , defaultTabPanelProps
    -- ** Views
  , tabs_
  , tabList_
  , tabButton_
  , tab_
    -- ** Samples
  , tabsUsage
  , tabsSample
  , tabsCodeSample
  , tabsPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
-- | Props for 'tabs_'
data TabsProps action
  = TabsProps
  { forall action. TabsProps action -> MisoString
tabsId :: MisoString
    -- ^ id of the tabs root (basecoat JS keys off it; required)
  , forall action. TabsProps action -> [MisoString]
tabsClasses :: [MisoString]
    -- ^ Extra classes appended to @div.tabs@
  , forall action. TabsProps action -> [Attribute action]
tabsAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor
defaultTabsProps :: TabsProps action
defaultTabsProps :: forall action. TabsProps action
defaultTabsProps
  = TabsProps
  { tabsId :: MisoString
tabsId = MisoString
"tabs"
  , tabsClasses :: [MisoString]
tabsClasses = [ MisoString
"w-full" ]
  , tabsAttrs :: [Attribute action]
tabsAttrs = []
  }
-----------------------------------------------------------------------------
-- | Props for 'tabButton_'
data TabButtonProps action
  = TabButtonProps
  { forall action. TabButtonProps action -> MisoString
tabButtonId :: MisoString
    -- ^ id of this tab button (matched by the panel's @aria-labelledby@)
  , forall action. TabButtonProps action -> MisoString
tabButtonControls :: MisoString
    -- ^ id of the controlled panel
  , forall action. TabButtonProps action -> Bool
tabButtonSelected :: Bool
  , forall action. TabButtonProps action -> Bool
tabButtonDisabled :: Bool
  , forall action. TabButtonProps action -> [Attribute action]
tabButtonAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: unselected tab
defaultTabButtonProps :: TabButtonProps action
defaultTabButtonProps :: forall action. TabButtonProps action
defaultTabButtonProps
  = TabButtonProps
  { tabButtonId :: MisoString
tabButtonId = MisoString
""
  , tabButtonControls :: MisoString
tabButtonControls = MisoString
""
  , tabButtonSelected :: Bool
tabButtonSelected = Bool
False
  , tabButtonDisabled :: Bool
tabButtonDisabled = Bool
False
  , tabButtonAttrs :: [Attribute action]
tabButtonAttrs = []
  }
-----------------------------------------------------------------------------
-- | Props for 'tab_' (a tab panel)
data TabPanelProps action
  = TabPanelProps
  { forall action. TabPanelProps action -> MisoString
tabPanelId :: MisoString
    -- ^ id of the panel (matched by the button's @aria-controls@)
  , forall action. TabPanelProps action -> MisoString
tabPanelLabelledBy :: MisoString
    -- ^ id of the button labelling this panel
  , forall action. TabPanelProps action -> Bool
tabPanelSelected :: Bool
  , forall action. TabPanelProps action -> [Attribute action]
tabPanelAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: hidden panel
defaultTabPanelProps :: TabPanelProps action
defaultTabPanelProps :: forall action. TabPanelProps action
defaultTabPanelProps
  = TabPanelProps
  { tabPanelId :: MisoString
tabPanelId = MisoString
""
  , tabPanelLabelledBy :: MisoString
tabPanelLabelledBy = MisoString
""
  , tabPanelSelected :: Bool
tabPanelSelected = Bool
False
  , tabPanelAttrs :: [Attribute action]
tabPanelAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/tabs/ Tabs>, driven by 'TabsProps'
tabs_
  :: TabsProps action
  -> [View model action]
  -> View model action
tabs_ :: forall action model.
TabsProps action -> [View model action] -> View model action
tabs_ TabsProps {[MisoString]
[Attribute action]
MisoString
tabsId :: forall action. TabsProps action -> MisoString
tabsClasses :: forall action. TabsProps action -> [MisoString]
tabsAttrs :: forall action. TabsProps action -> [Attribute action]
tabsId :: MisoString
tabsClasses :: [MisoString]
tabsAttrs :: [Attribute action]
..} [View model action]
kids =
  [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.classes_ (MisoString
"tabs" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
tabsClasses)
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ MisoString
tabsId
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
tabsAttrs
    ) [View model action]
kids
-----------------------------------------------------------------------------
tabList_
  :: [Attribute action]
  -> [View model action]
  -> View model action
tabList_ :: forall action model.
[Attribute action] -> [View model action] -> View model action
tabList_ [Attribute action]
attrs [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.nav_
    ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"w-full"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"tablist"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"orientation" MisoString
"horizontal"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
    ) [View model action]
kids
-----------------------------------------------------------------------------
tabButton_
  :: TabButtonProps action
  -> [View model action]
  -> View model action
tabButton_ :: forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps {Bool
[Attribute action]
MisoString
tabButtonId :: forall action. TabButtonProps action -> MisoString
tabButtonControls :: forall action. TabButtonProps action -> MisoString
tabButtonSelected :: forall action. TabButtonProps action -> Bool
tabButtonDisabled :: forall action. TabButtonProps action -> Bool
tabButtonAttrs :: forall action. TabButtonProps action -> [Attribute action]
tabButtonId :: MisoString
tabButtonControls :: MisoString
tabButtonSelected :: Bool
tabButtonDisabled :: Bool
tabButtonAttrs :: [Attribute action]
..} [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.button_
    ( [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
      [ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"tab"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"button"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ MisoString
tabButtonId
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"controls" MisoString
tabButtonControls
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"selected" (if Bool
tabButtonSelected then MisoString
"true" else MisoString
"false")
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.tabindex_ MisoString
"0"
        ]
      , [ Attribute action
forall action. Attribute action
P.disabled_ | Bool
tabButtonDisabled ]
      , [Attribute action]
tabButtonAttrs
      ]
    ) [View model action]
kids
-----------------------------------------------------------------------------
tab_
  :: TabPanelProps action
  -> [View model action]
  -> View model action
tab_ :: forall action model.
TabPanelProps action -> [View model action] -> View model action
tab_ TabPanelProps {Bool
[Attribute action]
MisoString
tabPanelId :: forall action. TabPanelProps action -> MisoString
tabPanelLabelledBy :: forall action. TabPanelProps action -> MisoString
tabPanelSelected :: forall action. TabPanelProps action -> Bool
tabPanelAttrs :: forall action. TabPanelProps action -> [Attribute action]
tabPanelId :: MisoString
tabPanelLabelledBy :: MisoString
tabPanelSelected :: Bool
tabPanelAttrs :: [Attribute action]
..} [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
    ( [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
      [ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"tabpanel"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ MisoString
tabPanelId
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"labelledby" MisoString
tabPanelLabelledBy
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"selected" (if Bool
tabPanelSelected then MisoString
"true" else MisoString
"false")
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.tabindex_ (if Bool
tabPanelSelected then MisoString
"0" else MisoString
"-1")
        , Bool -> Attribute action
forall action. Bool -> Attribute action
P.hidden_ (Bool -> Bool
not Bool
tabPanelSelected)
        ]
      , [Attribute action]
tabPanelAttrs
      ]
    ) [View model action]
kids
-----------------------------------------------------------------------------
-- | Compact usage example (source of the kitchen sink "Code" tab)
tabsUsage :: View model action
tabsUsage :: forall model action. View model action
tabsUsage =
  TabsProps action -> [View model action] -> View model action
forall action model.
TabsProps action -> [View model action] -> View model action
tabs_ TabsProps action
forall action. TabsProps action
defaultTabsProps { tabsId = "my-tabs" }
  [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
tabList_ []
    [ TabButtonProps action -> [View model action] -> View model action
forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps action
forall action. TabButtonProps action
defaultTabButtonProps
      { tabButtonId = "my-tabs-tab-1"
      , tabButtonControls = "my-tabs-panel-1"
      , tabButtonSelected = True
      }
      [ View model action
"Account" ]
    , TabButtonProps action -> [View model action] -> View model action
forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps action
forall action. TabButtonProps action
defaultTabButtonProps
      { tabButtonId = "my-tabs-tab-2"
      , tabButtonControls = "my-tabs-panel-2"
      }
      [ View model action
"Password" ]
    ]
  , TabPanelProps action -> [View model action] -> View model action
forall action model.
TabPanelProps action -> [View model action] -> View model action
tab_ TabPanelProps action
forall action. TabPanelProps action
defaultTabPanelProps
    { tabPanelId = "my-tabs-panel-1"
    , tabPanelLabelledBy = "my-tabs-tab-1"
    , tabPanelSelected = True
    }
    [ View model action
"Account panel" ]
  , TabPanelProps action -> [View model action] -> View model action
forall action model.
TabPanelProps action -> [View model action] -> View model action
tab_ TabPanelProps action
forall action. TabPanelProps action
defaultTabPanelProps
    { tabPanelId = "my-tabs-panel-2"
    , tabPanelLabelledBy = "my-tabs-tab-2"
    }
    [ View model action
"Password panel" ]
  ]
-----------------------------------------------------------------------------
tabsSample :: View model action
tabsSample :: forall model action. View model action
tabsSample =
  [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-col gap-6" ]
  [ TabsProps action -> [View model action] -> View model action
forall action model.
TabsProps action -> [View model action] -> View model action
tabs_ TabsProps action
forall action. TabsProps action
defaultTabsProps
    { tabsId = "demo-tabs-with-panels-tabs"
    , tabsClasses = [ "max-w-[300px]" ]
    }
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
tabList_ []
      [ TabButtonProps action -> [View model action] -> View model action
forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps action
forall action. TabButtonProps action
defaultTabButtonProps
        { tabButtonId = "demo-tabs-with-panels-tab-tabs-1"
        , tabButtonControls = "demo-tabs-with-panels-panel-tabs-1"
        , tabButtonSelected = True
        }
        [ View model action
"Account" ]
      , TabButtonProps action -> [View model action] -> View model action
forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps action
forall action. TabButtonProps action
defaultTabButtonProps
        { tabButtonId = "demo-tabs-with-panels-tab-tabs-2"
        , tabButtonControls = "demo-tabs-with-panels-panel-tabs-2"
        }
        [ View model action
"Password" ]
      ]
    , TabPanelProps action -> [View model action] -> View model action
forall action model.
TabPanelProps action -> [View model action] -> View model action
tab_ TabPanelProps action
forall action. TabPanelProps action
defaultTabPanelProps
      { tabPanelId = "demo-tabs-with-panels-panel-tabs-1"
      , tabPanelLabelledBy = "demo-tabs-with-panels-tab-tabs-1"
      , tabPanelSelected = True
      }
      [ MisoString
-> MisoString
-> MisoString
-> [(MisoString, MisoString, MisoString, Maybe MisoString)]
-> View model action
forall {model} {action}.
MisoString
-> MisoString
-> MisoString
-> [(MisoString, MisoString, MisoString, Maybe MisoString)]
-> View model action
panelCard MisoString
"Account"
          MisoString
"Make changes to your account here. Click save when you're done."
          MisoString
"Save changes"
          [ (MisoString
"demo-tabs-account-name", MisoString
"Name", MisoString
"text", MisoString -> Maybe MisoString
forall a. a -> Maybe a
Just MisoString
"Pedro Duarte")
          , (MisoString
"demo-tabs-account-username", MisoString
"Username", MisoString
"text", MisoString -> Maybe MisoString
forall a. a -> Maybe a
Just MisoString
"@peduarte")
          ]
      ]
    , TabPanelProps action -> [View model action] -> View model action
forall action model.
TabPanelProps action -> [View model action] -> View model action
tab_ TabPanelProps action
forall action. TabPanelProps action
defaultTabPanelProps
      { tabPanelId = "demo-tabs-with-panels-panel-tabs-2"
      , tabPanelLabelledBy = "demo-tabs-with-panels-tab-tabs-2"
      }
      [ MisoString
-> MisoString
-> MisoString
-> [(MisoString, MisoString, MisoString, Maybe MisoString)]
-> View model action
forall {model} {action}.
MisoString
-> MisoString
-> MisoString
-> [(MisoString, MisoString, MisoString, Maybe MisoString)]
-> View model action
panelCard MisoString
"Password"
          MisoString
"Change your password here. After saving, you'll be logged out."
          MisoString
"Save Password"
          [ (MisoString
"demo-tabs-password-current", MisoString
"Current password", MisoString
"password", Maybe MisoString
forall a. Maybe a
Nothing)
          , (MisoString
"demo-tabs-password-new", MisoString
"New password", MisoString
"password", Maybe MisoString
forall a. Maybe a
Nothing)
          ]
      ]
    ]
  , TabsProps action -> [View model action] -> View model action
forall action model.
TabsProps action -> [View model action] -> View model action
tabs_ TabsProps action
forall action. TabsProps action
defaultTabsProps
    { tabsId = "demo-tabs-without-panels"
    , tabsClasses = []
    }
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
tabList_ []
      [ TabButtonProps action -> [View model action] -> View model action
forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps action
forall action. TabButtonProps action
defaultTabButtonProps
        { tabButtonId = "demo-tabs-without-panels-tab-1"
        , tabButtonControls = "demo-tabs-without-panels-panel-1"
        , tabButtonSelected = True
        }
        [ View model action
"Home" ]
      , TabButtonProps action -> [View model action] -> View model action
forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps action
forall action. TabButtonProps action
defaultTabButtonProps
        { tabButtonId = "demo-tabs-without-panels-tab-2"
        , tabButtonControls = "demo-tabs-without-panels-panel-2"
        }
        [ View model action
"Settings" ]
      ]
    ]
  , TabsProps action -> [View model action] -> View model action
forall action model.
TabsProps action -> [View model action] -> View model action
tabs_ TabsProps action
forall action. TabsProps action
defaultTabsProps
    { tabsId = "demo-tabs-disabled"
    , tabsClasses = []
    }
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
tabList_ []
      [ TabButtonProps action -> [View model action] -> View model action
forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps action
forall action. TabButtonProps action
defaultTabButtonProps
        { tabButtonId = "demo-tabs-disabled-tab-1"
        , tabButtonControls = "demo-tabs-disabled-panel-1"
        , tabButtonSelected = True
        }
        [ View model action
"Home" ]
      , TabButtonProps action -> [View model action] -> View model action
forall action model.
TabButtonProps action -> [View model action] -> View model action
tabButton_ TabButtonProps action
forall action. TabButtonProps action
defaultTabButtonProps
        { tabButtonId = "demo-tabs-disabled-tab-2"
        , tabButtonControls = "demo-tabs-disabled-panel-2"
        , tabButtonDisabled = True
        }
        [ View model action
"Disabled" ]
      ]
    ]
  ]
  where
    panelCard :: MisoString
-> MisoString
-> MisoString
-> [(MisoString, MisoString, MisoString, Maybe MisoString)]
-> View model action
panelCard MisoString
title MisoString
description MisoString
buttonLabel [(MisoString, MisoString, MisoString, Maybe MisoString)]
fields =
      [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
"card" ]
      [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.header_ []
        [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.h2_ [] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
title ]
        , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.p_ [] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
description ]
        ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.section_ []
        [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.form_
          [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"form grid gap-6" ]
          [ [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
"grid gap-3" ]
            [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.label_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.for_ MisoString
fieldId ] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
labelText ]
            , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.input_
              ( [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
                [ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ MisoString
fieldId, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
ty ]
                , [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.value_ MisoString
v | Just MisoString
v <- [Maybe MisoString
val] ]
                ]
              )
            ]
          | (MisoString
fieldId, MisoString
labelText, MisoString
ty, Maybe MisoString
val) <- [(MisoString, MisoString, MisoString, Maybe MisoString)]
fields
          ]
        ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.footer_ []
        [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.button_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"btn", MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"button" ] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
buttonLabel ]
        ]
      ]
-----------------------------------------------------------------------------
tabsCodeSample :: View model action
tabsCodeSample :: forall model action. View model action
tabsCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyTabs (tabsUsage) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html as H
  import qualified Miso.Html.Property as P
  import           Miso.UI.Tabs
  -----------------------------------------------------------------------------
  tabsUsage :: View model action
  tabsUsage =
    tabs_ defaultTabsProps { tabsId = "my-tabs" }
    [ tabList_ []
      [ tabButton_ defaultTabButtonProps
        { tabButtonId = "my-tabs-tab-1"
        , tabButtonControls = "my-tabs-panel-1"
        , tabButtonSelected = True
        }
        [ "Account" ]
      , tabButton_ defaultTabButtonProps
        { tabButtonId = "my-tabs-tab-2"
        , tabButtonControls = "my-tabs-panel-2"
        }
        [ "Password" ]
      ]
    , tab_ defaultTabPanelProps
      { tabPanelId = "my-tabs-panel-1"
      , tabPanelLabelledBy = "my-tabs-tab-1"
      , tabPanelSelected = True
      }
      [ "Account panel" ]
    , tab_ defaultTabPanelProps
      { tabPanelId = "my-tabs-panel-2"
      , tabPanelLabelledBy = "my-tabs-tab-2"
      }
      [ "Password panel" ]
    ]
  """
-----------------------------------------------------------------------------
tabsPropsApi :: View model action
tabsPropsApi :: forall model action. View model action
tabsPropsApi =
  View model action
"""
  -- | Props for 'tabs_'
  data TabsProps action
    = TabsProps
    { tabsId :: MisoString
      -- ^ id of the tabs root (basecoat JS keys off it; required)
    , tabsClasses :: [MisoString]
      -- ^ Extra classes appended to @div.tabs@
    , tabsAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor
  defaultTabsProps :: TabsProps action
  defaultTabsProps
    = TabsProps
    { tabsId = "tabs"
    , tabsClasses = [ "w-full" ]
    , tabsAttrs = []
    }
  -----------------------------------------------------------------------------
  -- | Props for 'tabButton_'
  data TabButtonProps action
    = TabButtonProps
    { tabButtonId :: MisoString
      -- ^ id of this tab button (matched by the panel's @aria-labelledby@)
    , tabButtonControls :: MisoString
      -- ^ id of the controlled panel
    , tabButtonSelected :: Bool
    , tabButtonDisabled :: Bool
    , tabButtonAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: unselected tab
  defaultTabButtonProps :: TabButtonProps action
  defaultTabButtonProps
    = TabButtonProps
    { tabButtonId = ""
    , tabButtonControls = ""
    , tabButtonSelected = False
    , tabButtonDisabled = False
    , tabButtonAttrs = []
    }
  -----------------------------------------------------------------------------
  -- | Props for 'tab_' (a tab panel)
  data TabPanelProps action
    = TabPanelProps
    { tabPanelId :: MisoString
      -- ^ id of the panel (matched by the button's @aria-controls@)
    , tabPanelLabelledBy :: MisoString
      -- ^ id of the button labelling this panel
    , tabPanelSelected :: Bool
    , tabPanelAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: hidden panel
  defaultTabPanelProps :: TabPanelProps action
  defaultTabPanelProps
    = TabPanelProps
    { tabPanelId = ""
    , tabPanelLabelledBy = ""
    , tabPanelSelected = False
    , tabPanelAttrs = []
    }
  """
-----------------------------------------------------------------------------