use radix_yew_themes::Box;
use yew::prelude::*;

use crate::decorative_box::DecorativeBox;

#[function_component]
pub fn BoxExample() -> Html {
    html! {
        <Box width="64px" height="64px">
            <DecorativeBox />
        </Box>
    }
}

use radix_yew_themes::{Box, Flex};
use yew::prelude::*;

use crate::decorative_box::DecorativeBox;

#[function_component]
pub fn FlexExample() -> Html {
    html! {
        <Flex gap=3>
            <Box width="64px" height="64px">
                <DecorativeBox />
            </Box>
            <Box width="64px" height="64px">
                <DecorativeBox />
            </Box>
            <Box width="64px" height="64px">
                <DecorativeBox />
            </Box>
            <Box width="64px" height="64px">
                <DecorativeBox />
            </Box>
            <Box width="64px" height="64px">
                <DecorativeBox />
            </Box>
        </Flex>
    }
}

use radix_yew_themes::Grid;
use yew::prelude::*;

use crate::decorative_box::DecorativeBox;

#[function_component]
pub fn GridExample() -> Html {
    html! {
        <Grid columns=3 gap=3 rows="repeat(2, 64px)" width="auto">
            <DecorativeBox />
            <DecorativeBox />
            <DecorativeBox />
            <DecorativeBox />
            <DecorativeBox />
            <DecorativeBox />
        </Grid>
    }
}

use radix_yew_themes::{Box, Breakpoint, Grid, ResponsiveValues};
use yew::prelude::*;

use crate::decorative_box::DecorativeBox;

#[function_component]
pub fn GridResponsiveExample() -> Html {
    html! {
        <Grid columns={ResponsiveValues::from([(Breakpoint::Initial, 1), (Breakpoint::Md, 2)])} gap=3 width="auto">
            <Box height="64px">
                <DecorativeBox />
            </Box>
            <Box height="64px">
                <DecorativeBox />
            </Box>
        </Grid>
    }
}

use radix_yew_themes::{Box, Container};
use yew::prelude::*;

use crate::decorative_box::DecorativeBox;

#[function_component]
pub fn ContainerExample() -> Html {
    html! {
        <Box style={[("background", "var(--gray-a2)"), ("border-radius", "var(--radius-3)")]}>
            <Container size=1>
                <DecorativeBox>
                    <Box py=9 />
                </DecorativeBox>
            </Container>
        </Box>
    }
}

use radix_yew_themes::{Box, Section};
use yew::prelude::*;

use crate::decorative_box::{DecorativeBox, DecorativeBoxChildProps};

#[function_component]
pub fn SectionExample() -> Html {
    html! {
        <Box py=8 style={[("background", "var(--gray-a2)"), ("border-radius", "var(--radius-3)")]}>
            <DecorativeBox
                as_child={Callback::from(|DecorativeBoxChildProps {height, style}| html! {
                    <Section size=2 height={height} style={style} />
                })}
            />
        </Box>
    }
}

use radix_yew_themes::Text;
use yew::prelude::*;

#[function_component]
pub fn TextExample() -> Html {
    html! {
        <Text>{"The quick brown fox jumps over the lazy dog."}</Text>
    }
}

use radix_yew_themes::{Strong, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn TextAsExample() -> Html {
    html! {
        <>
            <Text r#as={TextAs::P}>{"This is a "}<Strong>{"paragraph"}</Strong>{" element."}</Text>
            <Text r#as={TextAs::Label}>{"This is a "}<Strong>{"label"}</Strong>{" element."}</Text>
            <Text r#as={TextAs::Div}>{"This is a "}<Strong>{"div"}</Strong>{" element."}</Text>
            <Text r#as={TextAs::Span}>{"This is a "}<Strong>{"span"}</Strong>{" element."}</Text>
        </>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Text};
use yew::prelude::*;

#[function_component]
pub fn TextSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Text size=1>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=2>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=3>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=4>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=5>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=6>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=7>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=8>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=9>{"The quick brown fox jumps over the lazy dog."}</Text>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn TextSizeContentExample() -> Html {
    html! {
        <>
            <Text r#as={TextAs::P} mb=5 size=4>
                {"The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography."}
            </Text>

            <Text r#as={TextAs::P} mb=5 size=3>
                {"The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography."}
            </Text>

            <Text r#as={TextAs::P} size=2 color={AccentColor::Gray}>
                {"The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography."}
            </Text>
        </>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Grid, GridAlign, Text, Weight};
use yew::prelude::*;

#[function_component]
pub fn TextSizeLabelsExample() -> Html {
    html! {
        <Grid align={GridAlign::Center} columns=2 gap=5 p=3>
            <Flex direction={FlexDirection::Column}>
                <Text size=3 weight={Weight::Bold}>
                    {"Get started"}
                </Text>
                <Text color={AccentColor::Gray} size=2>
                    {"Start your next project in minutes"}
                </Text>
            </Flex>

            <Flex direction={FlexDirection::Column}>
                <Text size=2 weight={Weight::Bold}>
                    {"Get started"}
                </Text>
                <Text color={AccentColor::Gray} size=2>
                    {"Start your next project in minutes"}
                </Text>
            </Flex>

            <Flex direction={FlexDirection::Column}>
                <Text size=2 weight={Weight::Bold}>
                    {"Get started"}
                </Text>
                <Text color={AccentColor::Gray} size=1>
                    {"Start your next project in minutes"}
                </Text>
            </Flex>

            <Flex direction={FlexDirection::Column}>
                <Text size=1 weight={Weight::Bold}>
                    {"Get started"}
                </Text>
                <Text color={AccentColor::Gray} size=1>
                    {"Start your next project in minutes"}
                </Text>
            </Flex>
        </Grid>
    }
}

use radix_yew_themes::{Text, TextAs, Weight};
use yew::prelude::*;

#[function_component]
pub fn TextWeightExample() -> Html {
    html! {
        <>
            <Text weight={Weight::Light} r#as={TextAs::Div} >
                {"The quick brown fox jumps over the lazy dog."}
            </Text>

            <Text weight={Weight::Regular} r#as={TextAs::Div} >
                {"The quick brown fox jumps over the lazy dog."}
            </Text>

            <Text weight={Weight::Medium} r#as={TextAs::Div} >
                {"The quick brown fox jumps over the lazy dog."}
            </Text>

            <Text weight={Weight::Bold} r#as={TextAs::Div} >
                {"The quick brown fox jumps over the lazy dog."}
            </Text>
        </>
    }
}

use radix_yew_themes::{Text, TextAlign, TextAs};
use yew::prelude::*;

#[function_component]
pub fn TextAlignExample() -> Html {
    html! {
        <>
            <Text align={TextAlign::Left} r#as={TextAs::Div}>{"Left-aligned"}</Text>
            <Text align={TextAlign::Center} r#as={TextAs::Div}>{"Center-aligned"}</Text>
            <Text align={TextAlign::Right} r#as={TextAs::Div}>{"Right-aligned"}</Text>
        </>
    }
}

use radix_yew_themes::{Flex, FlexDirection, LeadingTrim, Text};
use yew::prelude::*;

#[function_component]
pub fn TextTrimExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Text
                trim={LeadingTrim::Normal}
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border-top", "1px dashed var(--gray-a7)"),
                    ("border-bottom", "1px dashed var(--gray-a7)"),
                ]}
            >
                {"Without trim"}
            </Text>
            <Text
                trim={LeadingTrim::Both}
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border-top", "1px dashed var(--gray-a7)"),
                    ("border-bottom", "1px dashed var(--gray-a7)"),
                ]}
            >
                {"With trim"}
            </Text>
        </Flex>
    }
}

use radix_yew_themes::{Box, Flex, FlexDirection, Heading, LeadingTrim, Text};
use yew::prelude::*;

#[function_component]
pub fn TextTrimBoxExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Box
                p=4
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border", "1px dashed var(--gray-a7)"),
                ]}
            >
                <Heading mb=1 size=3>
                    {"Without trim"}
                </Heading>
                <Text>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Box>

            <Box
                p=4
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border", "1px dashed var(--gray-a7)"),
                ]}
            >
                <Heading mb=1 size=3 trim={LeadingTrim::Start}>
                    {"With trim"}
                </Heading>
                <Text trim={LeadingTrim::End}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Box>
        </Flex>
    }
}

use radix_yew_themes::{Flex, Text};
use yew::prelude::*;

#[function_component]
pub fn TextTruncateExample() -> Html {
    html! {
        <Flex max_width="300px">
            <Text truncate=true>
                {"The goal of typography is to relate font size, line height, and line width
                in a proportional way that maximizes beauty and makes reading easier and
                more pleasant."}
            </Text>
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Text, TextWrap};
use yew::prelude::*;

#[function_component]
pub fn TextWrapExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex max_width="270px">
                <Text wrap={TextWrap::Nowrap}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Flex>

            <Flex max_width="270px">
                <Text wrap={TextWrap::Balance}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Flex>

            <Flex max_width="270px">
                <Text wrap={TextWrap::Pretty}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Text};
use yew::prelude::*;

#[function_component]
pub fn TextColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Text color={AccentColor::Indigo}>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text color={AccentColor::Cyan}>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text color={AccentColor::Orange}>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text color={AccentColor::Crimson}>{"The quick brown fox jumps over the lazy dog."}</Text>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Text};
use yew::prelude::*;

#[function_component]
pub fn TextHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Text color={AccentColor::Gray}>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text color={AccentColor::Gray} high_contrast=true>
                {"The quick brown fox jumps over the lazy dog."}
            </Text>
        </Flex>
    }
}

use radix_yew_themes::{Em, Kbd, Text, TextAs};
use yew::prelude::*;

// TODO

#[function_component]
pub fn TextFormattingExample() -> Html {
    html! {
        <Text r#as={TextAs::P}>
            {"Look, such a helpful "}/*<Link href="#">{"link"}</Link>*/{", an "}<Em>{"italic emphasis"}</Em>{",
            a piece of computer "}/*<Code>{"code"}</Code>*/{", and even a hotkey combination "}
            <Kbd>{"⇧⌘A"}</Kbd>{" within the text."}
        </Text>
    }
}

use radix_yew_themes::{Box, Flex, Text, TextAs};
use yew::prelude::*;

// TODO

#[function_component]
pub fn TextFormControlsExample() -> Html {
    html! {
        <>
            <Box max_width="300px">
                <Text r#as={TextAs::Label} size=3>
                    <Flex gap=2>
                        /*<Checkbox default_checked=true />*/{" I understand that these documents are
                        confidential and cannot be shared with a third party."}
                    </Flex>
                </Text>
            </Box>
        </>
    }
}

use radix_yew_themes::Heading;
use yew::prelude::*;

#[function_component]
pub fn HeadingExample() -> Html {
    html! {
        <Heading>{"The quick brown fox jumps over the lazy dog"}</Heading>
    }
}

use radix_yew_themes::{Heading, HeadingAs};
use yew::prelude::*;

#[function_component]
pub fn HeadingAsExample() -> Html {
    html! {
        <>
            <Heading r#as={HeadingAs::H1}>{"Level 1"}</Heading>
            <Heading r#as={HeadingAs::H2}>{"Level 2"}</Heading>
            <Heading r#as={HeadingAs::H3}>{"Level 3"}</Heading>
        </>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Heading};
use yew::prelude::*;

#[function_component]
pub fn HeadingSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Heading size=1>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading size=2>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading size=3>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading size=4>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading size=5>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading size=6>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading size=7>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading size=8>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading size=9>{"The quick brown fox jumps over the lazy dog"}</Heading>
        </Flex>
    }
}

use radix_yew_themes::{Heading, Weight};
use yew::prelude::*;

#[function_component]
pub fn HeadingWeightExample() -> Html {
    html! {
        <>
            <Heading weight={Weight::Light}>
                {"The quick brown fox jumps over the lazy dog."}
            </Heading>

            <Heading weight={Weight::Regular}>
                {"The quick brown fox jumps over the lazy dog."}
            </Heading>

            <Heading weight={Weight::Medium}>
                {"The quick brown fox jumps over the lazy dog."}
            </Heading>

            <Heading weight={Weight::Bold}>
                {"The quick brown fox jumps over the lazy dog."}
            </Heading>
        </>
    }
}

use radix_yew_themes::{Heading, TextAlign};
use yew::prelude::*;

#[function_component]
pub fn HeadingAlignExample() -> Html {
    html! {
        <>
            <Heading align={TextAlign::Left}>{"Left-aligned"}</Heading>
            <Heading align={TextAlign::Center}>{"Center-aligned"}</Heading>
            <Heading align={TextAlign::Right}>{"Right-aligned"}</Heading>
        </>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Heading, LeadingTrim};
use yew::prelude::*;

#[function_component]
pub fn HeadingTrimExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Heading
                trim={LeadingTrim::Normal}
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border-top", "1px dashed var(--gray-a7)"),
                    ("border-bottom", "1px dashed var(--gray-a7)"),
                ]}
            >
                {"Without trim"}
            </Heading>
            <Heading
                trim={LeadingTrim::Both}
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border-top", "1px dashed var(--gray-a7)"),
                    ("border-bottom", "1px dashed var(--gray-a7)"),
                ]}
            >
                {"With trim"}
            </Heading>
        </Flex>
    }
}

use radix_yew_themes::{Box, Flex, FlexDirection, Heading, LeadingTrim, Text};
use yew::prelude::*;

#[function_component]
pub fn HeadingTrimBoxExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Box
                p=4
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border", "1px dashed var(--gray-a7)"),
                ]}
            >
                <Heading mb=1 size=3>
                    {"Without trim"}
                </Heading>
                <Text>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Box>

            <Box
                p=4
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border", "1px dashed var(--gray-a7)"),
                ]}
            >
                <Heading mb=1 size=3 trim={LeadingTrim::Start}>
                    {"With trim"}
                </Heading>
                <Text trim={LeadingTrim::End}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Box>
        </Flex>
    }
}

use radix_yew_themes::{Flex, Heading};
use yew::prelude::*;

#[function_component]
pub fn HeadingTruncateExample() -> Html {
    html! {
        <Flex max_width="300px">
            <Heading truncate=true>{"The quick brown fox jumps over the lazy dog"}</Heading>
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Heading, TextWrap};
use yew::prelude::*;

#[function_component]
pub fn HeadingWrapExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex max_width="300px">
                <Heading wrap={TextWrap::Nowrap}>{"The quick brown fox jumps over the lazy dog"}</Heading>
            </Flex>

            <Flex max_width="300px">
                <Heading wrap={TextWrap::Balance}>{"The quick brown fox jumps over the lazy dog"}</Heading>
            </Flex>

            <Flex max_width="300px">
                <Heading wrap={TextWrap::Pretty}>{"The quick brown fox jumps over the lazy dog"}</Heading>
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Heading};
use yew::prelude::*;

#[function_component]
pub fn HeadingColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Heading color={AccentColor::Indigo}>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading color={AccentColor::Cyan}>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading color={AccentColor::Orange}>{"The quick brown fox jumps over the lazy dog"}</Heading>
            <Heading color={AccentColor::Crimson}>{"The quick brown fox jumps over the lazy dog"}</Heading>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Heading};
use yew::prelude::*;

#[function_component]
pub fn HeadingHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Heading color={AccentColor::Gray}>{"The quick brown fox jumps over the lazy dog."}</Heading>
            <Heading color={AccentColor::Gray} high_contrast=true>
                {"The quick brown fox jumps over the lazy dog."}
            </Heading>
        </Flex>
    }
}

use radix_yew_themes::Blockquote;
use yew::prelude::*;

#[function_component]
pub fn BlockquoteExample() -> Html {
    html! {
        <Blockquote>
            {"Perfect typography is certainly the most elusive of all arts. Sculpture in
            stone alone comes near it in obstinacy."}
        </Blockquote>
    }
}

use radix_yew_themes::{Blockquote, Box, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=5>
            <Box max_width="300px">
                <Blockquote size=1>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="350px">
                <Blockquote size=2>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="400px">
                <Blockquote size=3>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="450px">
                <Blockquote size=4>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="500px">
                <Blockquote size=5>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="550px">
                <Blockquote size=6>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="600px">
                <Blockquote size=7>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="650px">
                <Blockquote size=8>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="1000px">
                <Blockquote size=9>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
        </Flex>
    }
}

use radix_yew_themes::{Blockquote, Flex, FlexDirection, Weight};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteWeightExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="500px">
            <Blockquote weight={Weight::Light}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote weight={Weight::Regular}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote weight={Weight::Medium}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote weight={Weight::Bold}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Blockquote, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="500px">
            <Blockquote color={AccentColor::Indigo}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote color={AccentColor::Cyan}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote color={AccentColor::Orange}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote color={AccentColor::Crimson}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Blockquote, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="500px">
            <Blockquote color={AccentColor::Gray}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
            <Blockquote color={AccentColor::Gray} high_contrast=true>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
        </Flex>
    }
}

use radix_yew_themes::{Blockquote, Flex};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteTruncateExample() -> Html {
    html! {
        <Flex max_width="500px">
            <Blockquote truncate=true>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
        </Flex>
    }
}

use radix_yew_themes::Code;
use yew::prelude::*;

#[function_component]
pub fn CodeExample() -> Html {
    html! {
        <Code>{"console.log()"}</Code>
    }
}

use radix_yew_themes::{Code, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CodeSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 align={FlexAlign::Start}>
            <Code size=1>{"console.log()"}</Code>
            <Code size=2>{"console.log()"}</Code>
            <Code size=3>{"console.log()"}</Code>
            <Code size=4>{"console.log()"}</Code>
            <Code size=5>{"console.log()"}</Code>
            <Code size=6>{"console.log()"}</Code>
            <Code size=7>{"console.log()"}</Code>
            <Code size=8>{"console.log()"}</Code>
            <Code size=9>{"console.log()"}</Code>
        </Flex>
    }
}

use radix_yew_themes::{Code, CodeVariant, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CodeVariantExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=2>
            <Code variant={CodeVariant::Solid}>{"console.log()"}</Code>
            <Code variant={CodeVariant::Soft}>{"console.log()"}</Code>
            <Code variant={CodeVariant::Outline}>{"console.log()"}</Code>
            <Code variant={CodeVariant::Ghost}>{"console.log()"}</Code>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Code, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CodeColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=2>
            <Code color={AccentColor::Indigo}>{"console.log()"}</Code>
            <Code color={AccentColor::Crimson}>{"console.log()"}</Code>
            <Code color={AccentColor::Cyan}>{"console.log()"}</Code>
            <Code color={AccentColor::Orange}>{"console.log()"}</Code>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Code, CodeVariant, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CodeHighContrastExample() -> Html {
    html! {
        <Flex gap=3>
            <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=2>
                <Code color={AccentColor::Gray} variant={CodeVariant::Solid}>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Soft}>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Outline}>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Ghost}>
                    {"console.log()"}
                </Code>
            </Flex>

            <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=2>
                <Code color={AccentColor::Gray} variant={CodeVariant::Solid} high_contrast=true>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Soft} high_contrast=true>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Outline} high_contrast=true>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Ghost} high_contrast=true>
                    {"console.log()"}
                </Code>
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{Code, Flex, FlexAlign, FlexDirection, Weight};
use yew::prelude::*;

#[function_component]
pub fn CodeWeightExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=2 align={FlexAlign::Start}>
            <Code weight={Weight::Light}>{"console.log()"}</Code>
            <Code weight={Weight::Regular}>{"console.log()"}</Code>
            <Code weight={Weight::Medium}>{"console.log()"}</Code>
            <Code weight={Weight::Bold}>{"console.log()"}</Code>
        </Flex>
    }
}

use radix_yew_themes::{Code, Flex};
use yew::prelude::*;

#[function_component]
pub fn CodeTruncateExample() -> Html {
    html! {
        <Flex max_width="200px">
            <Code truncate=true>{"linear-gradient(red, orange, yellow, green, blue);"}</Code>
        </Flex>
    }
}

use radix_yew_themes::{Em, Text};
use yew::prelude::*;

#[function_component]
pub fn EmExample() -> Html {
    html! {
        <Text>
            {"We "}<Em>{"had"}</Em>{" to do something about it."}
        </Text>
    }
}

use radix_yew_themes::{Em, Flex};
use yew::prelude::*;

#[function_component]
pub fn EmTruncateExample() -> Html {
    html! {
        <Flex max_width="300px">
            <Em truncate=true>
                {"The goal of typography is to relate font size, line height, and line width
                in a proportional way that maximizes beauty and makes reading easier and
                more pleasant."}
            </Em>
        </Flex>
    }
}

use radix_yew_themes::Kbd;
use yew::prelude::*;

#[function_component]
pub fn KbdExample() -> Html {
    html! {
        <Kbd>{"Shift + Tab"}</Kbd>
    }
}

use radix_yew_themes::{Flex, FlexAlign, FlexDirection, Kbd};
use yew::prelude::*;

#[function_component]
pub fn KbdSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=3>
            <Kbd size=1>{"Shift + Tab"}</Kbd>
            <Kbd size=2>{"Shift + Tab"}</Kbd>
            <Kbd size=3>{"Shift + Tab"}</Kbd>
            <Kbd size=4>{"Shift + Tab"}</Kbd>
            <Kbd size=5>{"Shift + Tab"}</Kbd>
            <Kbd size=6>{"Shift + Tab"}</Kbd>
            <Kbd size=7>{"Shift + Tab"}</Kbd>
            <Kbd size=8>{"Shift + Tab"}</Kbd>
            <Kbd size=9>{"Shift + Tab"}</Kbd>
        </Flex>
    }
}

use radix_yew_themes::Link;
use yew::prelude::*;

#[function_component]
pub fn LinkExample() -> Html {
    html! {
        <Link href="#">{"Sign up"}</Link>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Link};
use yew::prelude::*;

#[function_component]
pub fn LinkSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Link href="#" size=1>
                {"Sign up"}
            </Link>
            <Link href="#" size=2>
                {"Sign up"}
            </Link>
            <Link href="#" size=3>
                {"Sign up"}
            </Link>
            <Link href="#" size=4>
                {"Sign up"}
            </Link>
            <Link href="#" size=5>
                {"Sign up"}
            </Link>
            <Link href="#" size=6>
                {"Sign up"}
            </Link>
            <Link href="#" size=7>
                {"Sign up"}
            </Link>
            <Link href="#" size=8>
                {"Sign up"}
            </Link>
            <Link href="#" size=9>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Link, Weight};
use yew::prelude::*;

#[function_component]
pub fn LinkWeightExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Link href="#" weight={Weight::Light}>
                {"Sign up"}
            </Link>
            <Link href="#" weight={Weight::Regular}>
                {"Sign up"}
            </Link>
            <Link href="#" weight={Weight::Medium}>
                {"Sign up"}
            </Link>
            <Link href="#" weight={Weight::Bold}>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

use radix_yew_themes::{Flex, Link};
use yew::prelude::*;

#[function_component]
pub fn LinkTruncateExample() -> Html {
    html! {
        <Flex max_width="150px">
            <Link href="#" truncate=true>
                {"Sign up to the newsletter"}
            </Link>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Link};
use yew::prelude::*;

#[function_component]
pub fn LinkColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Link href="#" color={AccentColor::Indigo}>
                {"Sign up"}
            </Link>
            <Link href="#" color={AccentColor::Cyan}>
                {"Sign up"}
            </Link>
            <Link href="#" color={AccentColor::Orange}>
                {"Sign up"}
            </Link>
            <Link href="#" color={AccentColor::Crimson}>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Link};
use yew::prelude::*;

#[function_component]
pub fn LinkHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Link color={AccentColor::Gray}>
                {"Sign up."}
            </Link>
            <Link href="#" color={AccentColor::Gray} high_contrast=true>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Link, LinkUnderline};
use yew::prelude::*;

#[function_component]
pub fn LinkUnderlineExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Link href="#" underline={LinkUnderline::Hover}>
                {"Sign up"}
            </Link>
            <Link href="#" underline={LinkUnderline::Always}>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

use radix_yew_themes::{Quote, Text};
use yew::prelude::*;

#[function_component]
pub fn QuoteExample() -> Html {
    html! {
        <Text>
            {"His famous quote, "}
            <Quote>{"Styles come and go. Good design is a language, not a style"}</Quote>{",
            elegantly summs up Massimo's philosophy of design."}
        </Text>
    }
}

use radix_yew_themes::{Flex, Quote};
use yew::prelude::*;

#[function_component]
pub fn QuoteTruncateExample() -> Html {
    html! {
        <Flex max_width="300px">
            <Quote truncate=true>
                {"The goal of typography is to relate font size, line height, and line width
                in a proportional way that maximizes beauty and makes reading easier and
                more pleasant."}
            </Quote>
        </Flex>
    }
}

use radix_yew_themes::{Strong, Text};
use yew::prelude::*;

#[function_component]
pub fn StrongExample() -> Html {
    html! {
        <Text>
            {"The most important thing to remember is, "}<Strong>{"stay positive"}</Strong>{"."}
        </Text>
    }
}

use radix_yew_themes::{Flex, Strong};
use yew::prelude::*;

#[function_component]
pub fn StrongTruncateExample() -> Html {
    html! {
        <Flex max_width="300px">
            <Strong truncate=true>
                {"The goal of typography is to relate font size, line height, and line width
                in a proportional way that maximizes beauty and makes reading easier and
                more pleasant."}
            </Strong>
        </Flex>
    }
}

use radix_yew_themes::AspectRatio;
use yew::prelude::*;
use yew_style::Style;

#[function_component]
pub fn AspectRatioExample() -> Html {
    html! {
        <AspectRatio ratio={16.0 / 8.0}>
            <img
                src="https://images.unsplash.com/photo-1479030160180-b1860951d696?&auto=format&fit=crop&w=1200&q=80"
                alt="A house in a forest"
                style={Style::from([
                    ("object-fit", "cover",),
                    ("width", "100%"),
                    ("height", "100%"),
                    ("border-radius", "var(--radius-2)"),
                ])}
            />
        </AspectRatio>
    }
}

use radix_yew_themes::{Avatar, Flex};
use yew::prelude::*;

#[function_component]
pub fn AvatarExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar fallback="A" />
        </Flex>
    }
}

use radix_yew_themes::{Avatar, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn AvatarSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Avatar
                size=1
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=2
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=3
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=4
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=5
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=6
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=7
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=8
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=9
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
        </Flex>
    }
}

use radix_yew_themes::{Avatar, AvatarVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn AvatarVariantExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar variant={AvatarVariant::Solid} fallback="A" />
            <Avatar variant={AvatarVariant::Soft} fallback="A" />
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Avatar, AvatarVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn AvatarColorExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Indigo} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Cyan} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Orange} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Crimson} fallback="A" />
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Avatar, AvatarVariant, Grid, GridDisplay, GridFlow};
use yew::prelude::*;

#[function_component]
pub fn AvatarHighContrastExample() -> Html {
    html! {
        <Grid rows=2 gap=2 display={GridDisplay::InlineGrid} flow={GridFlow::Column}>
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Indigo} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Indigo} fallback="A" high_contrast=true />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Cyan} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Cyan} fallback="A" high_contrast=true />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Orange} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Orange} fallback="A" high_contrast=true />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Crimson} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Crimson} fallback="A" high_contrast=true />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Gray} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Gray} fallback="A" high_contrast=true />
        </Grid>
    }
}

use radix_yew_themes::{Avatar, Flex, Radius};
use yew::prelude::*;

#[function_component]
pub fn AvatarRadiusExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar radius={Radius::None} fallback="A" />
            <Avatar radius={Radius::Large} fallback="A" />
            <Avatar radius={Radius::Full} fallback="A" />
        </Flex>
    }
}

use radix_yew_themes::{Avatar, Box, Flex};
use yew::prelude::*;

#[function_component]
pub fn AvatarFallbackExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar fallback="A" />
            <Avatar fallback="AB" />
            <Avatar
                fallback={html! {
                    <Box width="24px" height="24px">
                        <svg viewBox="0 0 64 64" fill="currentColor">
                            <path d="M41.5 14c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S33 27.962 33 23 36.813 14 41.5 14zM56.289 43.609C57.254 46.21 55.3 49 52.506 49c-2.759 0-11.035 0-11.035 0 .689-5.371-4.525-10.747-8.541-13.03 2.388-1.171 5.149-1.834 8.07-1.834C48.044 34.136 54.187 37.944 56.289 43.609zM37.289 46.609C38.254 49.21 36.3 52 33.506 52c-5.753 0-17.259 0-23.012 0-2.782 0-4.753-2.779-3.783-5.392 2.102-5.665 8.245-9.472 15.289-9.472S35.187 40.944 37.289 46.609zM21.5 17c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S13 30.962 13 26 16.813 17 21.5 17z" />
                        </svg>
                    </Box>
                }}
            />
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Badge, Flex};
use yew::prelude::*;

#[function_component]
pub fn BadgeExample() -> Html {
    html! {
        <Flex gap=2>
            <Badge color={AccentColor::Orange}>{"In progress"}</Badge>
            <Badge color={AccentColor::Blue}>{"In review"}</Badge>
            <Badge color={AccentColor::Green}>{"Complete"}</Badge>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Badge, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn BadgeSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=2>
            <Badge size=1 color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge size=2 color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge size=3 color={AccentColor::Indigo}>
                {"New"}
            </Badge>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Badge, BadgeVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn BadgeVariantExample() -> Html {
    html! {
        <Flex gap=2>
            <Badge variant={BadgeVariant::Solid} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Soft} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Surface} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Outline} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Badge, Flex};
use yew::prelude::*;

#[function_component]
pub fn BadgeColorExample() -> Html {
    html! {
        <Flex gap=2>
            <Badge color={AccentColor::Indigo}>{"New"}</Badge>
            <Badge color={AccentColor::Cyan}>{"New"}</Badge>
            <Badge color={AccentColor::Orange}>{"New"}</Badge>
            <Badge color={AccentColor::Crimson}>{"New"}</Badge>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Badge, BadgeVariant, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn BadgeHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=2>
            <Flex gap=2>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Solid}>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Soft}>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Surface}>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Outline}>
                    {"New"}
                </Badge>
            </Flex>
            <Flex gap=2>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Solid} high_contrast=true>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Soft} high_contrast=true>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Surface} high_contrast=true>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Outline} high_contrast=true>
                    {"New"}
                </Badge>
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Badge, BadgeVariant, Flex, Radius};
use yew::prelude::*;

#[function_component]
pub fn BadgeRadiusExample() -> Html {
    html! {
        <Flex gap=2>
            <Badge variant={BadgeVariant::Solid} radius={Radius::None} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Solid} radius={Radius::Small} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Solid} radius={Radius::Medium} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Solid} radius={Radius::Large} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Solid} radius={Radius::Full} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
        </Flex>
    }
}

use radix_yew_icons::BookmarkIcon;
use radix_yew_themes::Button;
use yew::prelude::*;

#[function_component]
pub fn ButtonExample() -> Html {
    html! {
        <Button>
            <BookmarkIcon /> {"Bookmark"}
        </Button>
    }
}

use radix_yew_themes::{Button, ButtonVariant, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn ButtonSizeExample() -> Html {
    html! {
        <Flex gap=3 align={FlexAlign::Center}>
            <Button size=1 variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button size=2 variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button size=3 variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
        </Flex>
    }
}

use radix_yew_themes::{Button, ButtonVariant, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn ButtonVariantExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=3>
            <Button variant={ButtonVariant::Classic}>{"Edit profile"}</Button>
            <Button variant={ButtonVariant::Solid}>{"Edit profile"}</Button>
            <Button variant={ButtonVariant::Soft}>{"Edit profile"}</Button>
            <Button variant={ButtonVariant::Surface}>{"Edit profile"}</Button>
            <Button variant={ButtonVariant::Outline}>{"Edit profile"}</Button>
        </Flex>
    }
}

use radix_yew_themes::{Button, ButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn ButtonVariantGhostExample() -> Html {
    html! {
        <Button variant={ButtonVariant::Ghost}>{"Edit profile"}</Button>
    }
}

use radix_yew_themes::{AccentColor, Button, ButtonVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn ButtonColorExample() -> Html {
    html! {
        <Flex gap=3>
            <Button color={AccentColor::Indigo} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button color={AccentColor::Cyan} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button color={AccentColor::Orange} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button color={AccentColor::Crimson} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Button, ButtonVariant, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn ButtonHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex gap=3>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Classic}>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Solid}>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Soft}>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Surface}>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Outline}>
                    {"Edit profile"}
                </Button>
            </Flex>
            <Flex gap=3>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Classic} high_contrast=true>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Solid} high_contrast=true>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Soft} high_contrast=true>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Surface} high_contrast=true>
                    {"Edit profile"}
                </Button>
                <Button color={AccentColor::Gray} variant={ButtonVariant::Outline} high_contrast=true>
                    {"Edit profile"}
                </Button>
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{Button, ButtonVariant, Flex, Radius};
use yew::prelude::*;

#[function_component]
pub fn ButtonRadiusExample() -> Html {
    html! {
        <Flex gap=3>
            <Button radius={Radius::None} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button radius={Radius::Small} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button radius={Radius::Medium} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button radius={Radius::Large} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
            <Button radius={Radius::Full} variant={ButtonVariant::Soft}>
                {"Edit profile"}
            </Button>
        </Flex>
    }
}

use radix_yew_icons::BookmarkIcon;
use radix_yew_themes::{Button, ButtonVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn ButtonWithIconsExample() -> Html {
    html! {
        <Flex gap=3>
            <Button variant={ButtonVariant::Classic}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
            <Button variant={ButtonVariant::Solid}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
            <Button variant={ButtonVariant::Soft}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
            <Button variant={ButtonVariant::Surface}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
            <Button variant={ButtonVariant::Outline}>
                <BookmarkIcon /> {"Bookmark"}
            </Button>
        </Flex>
    }
}

use radix_yew_themes::{Button, ButtonVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn ButtonLoadingExample() -> Html {
    html! {
        <Flex gap=3>
            <Button loading=true variant={ButtonVariant::Classic}>
                {"Bookmark"}
            </Button>
            <Button loading=true variant={ButtonVariant::Solid}>
                {"Bookmark"}
            </Button>
            <Button loading=true variant={ButtonVariant::Soft}>
                {"Bookmark"}
            </Button>
            <Button loading=true variant={ButtonVariant::Surface}>
                {"Bookmark"}
            </Button>
            <Button loading=true variant={ButtonVariant::Outline}>
                {"Bookmark"}
            </Button>
        </Flex>
    }
}

use radix_yew_icons::BookmarkIcon;
use radix_yew_themes::{Button, ButtonVariant, Flex, Spinner};
use yew::prelude::*;

#[function_component]
pub fn ButtonLoadingSpinnerExample() -> Html {
    html! {
        <Flex gap=3>
            <Button disabled=true variant={ButtonVariant::Classic}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
            <Button disabled=true variant={ButtonVariant::Solid}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
            <Button disabled=true variant={ButtonVariant::Soft}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
            <Button disabled=true variant={ButtonVariant::Surface}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
            <Button disabled=true variant={ButtonVariant::Outline}>
                <Spinner loading=true>
                    <BookmarkIcon />
                </Spinner>
                {"Bookmark"}
            </Button>
        </Flex>
    }
}

use radix_yew_icons::InfoCircledIcon;
use radix_yew_themes::{Callout, CalloutIcon, CalloutText};
use yew::prelude::*;

#[function_component]
pub fn CalloutExample() -> Html {
    html! {
        <Callout>
            <CalloutIcon>
                <InfoCircledIcon />
            </CalloutIcon>
            <CalloutText>
                {"You will need admin privileges to install and access this application."}
            </CalloutText>
        </Callout>
    }
}

use radix_yew_icons::InfoCircledIcon;
use radix_yew_themes::{Callout, CalloutIcon, CalloutText, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CalloutSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 align={FlexAlign::Start}>
            <Callout size=1>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need admin privileges to install and access this application."}
                </CalloutText>
            </Callout>

            <Callout size=2>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need admin privileges to install and access this application."}
                </CalloutText>
            </Callout>

            <Callout size=3>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need admin privileges to install and access this application."}
                </CalloutText>
            </Callout>
        </Flex>
    }
}

use radix_yew_icons::InfoCircledIcon;
use radix_yew_themes::{
    Callout, CalloutIcon, CalloutText, CalloutVariant, Flex, FlexDirection, Link,
};
use yew::prelude::*;

#[function_component]
pub fn CalloutVariantExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Callout variant={CalloutVariant::Soft}>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need "}<Link href="#">{"admin privileges"}</Link>{" to install and access
                    this application."}
                </CalloutText>
            </Callout>

            <Callout variant={CalloutVariant::Surface}>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need "}<Link href="#">{"admin privileges"}</Link>{" to install and access
                    this application."}
                </CalloutText>
            </Callout>

            <Callout variant={CalloutVariant::Outline}>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need "}<Link href="#">{"admin privileges"}</Link>{" to install and access
                    this application."}
                </CalloutText>
            </Callout>
        </Flex>
    }
}

use radix_yew_icons::InfoCircledIcon;
use radix_yew_themes::{AccentColor, Callout, CalloutIcon, CalloutText, Flex, FlexDirection, Link};
use yew::prelude::*;

#[function_component]
pub fn CalloutColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Callout color={AccentColor::Blue}>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need "}<Link href="#">{"admin privileges"}</Link>{" to install and access
                    this application."}
                </CalloutText>
            </Callout>

            <Callout color={AccentColor::Green}>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need "}<Link href="#">{"admin privileges"}</Link>{" to install and access
                    this application."}
                </CalloutText>
            </Callout>

            <Callout color={AccentColor::Red}>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"You will need "}<Link href="#">{"admin privileges"}</Link>{" to install and access
                    this application."}
                </CalloutText>
            </Callout>
        </Flex>
    }
}

use radix_yew_icons::InfoCircledIcon;
use radix_yew_themes::{
    AccentColor, Callout, CalloutIcon, CalloutText, CalloutVariant, Flex, FlexDirection,
};
use yew::prelude::*;

#[function_component]
pub fn CalloutHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Callout color={AccentColor::Gray} variant={CalloutVariant::Soft}>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"An update to Radix Themes is available. See what's new in version 3.2.0."}
                </CalloutText>
            </Callout>

            <Callout color={AccentColor::Gray} variant={CalloutVariant::Soft} high_contrast=true>
                <CalloutIcon>
                    <InfoCircledIcon />
                </CalloutIcon>
                <CalloutText>
                    {"An update to Radix Themes is available. See what's new in version 3.2.0."}
                </CalloutText>
            </Callout>
        </Flex>
    }
}

use radix_yew_icons::ExclamationTriangleIcon;
use radix_yew_themes::{AccentColor, Callout, CalloutIcon, CalloutText};
use yew::prelude::*;

#[function_component]
pub fn CalloutAsAlertExample() -> Html {
    html! {
        <Callout color={AccentColor::Red} role="alert">
            <CalloutIcon>
                <ExclamationTriangleIcon />
            </CalloutIcon>
            <CalloutText>
                {"Access denied. Please contact the network administrator to view this page."}
            </CalloutText>
        </Callout>
    }
}

use radix_yew_themes::{
    AccentColor, Avatar, Box, Card, Flex, FlexAlign, Radius, Text, TextAs, Weight,
};
use yew::prelude::*;

#[function_component]
pub fn CardExample() -> Html {
    html! {
        <Box max_width="240px">
            <Card>
                <Flex gap=3 align={FlexAlign::Center}>
                    <Avatar
                        size=3
                        src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
                        radius={Radius::Full}
                        fallback="T"
                    />
                    <Box>
                        <Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
                            {"Teodros Girmay"}
                        </Text>
                        <Text r#as={TextAs::Div} size=2 color={AccentColor::Gray}>
                            {"Engineering"}
                        </Text>
                    </Box>
                </Flex>
            </Card>
        </Box>
    }
}

use radix_yew_themes::{AccentColor, Box, Card, CardChildProps, Text, TextAs, Weight};
use yew::prelude::*;

#[function_component]
pub fn CardAsAnotherElementExample() -> Html {
    html! {
        <Box max_width="350px">
            <Card
                as_child={Callback::from(|CardChildProps { class, style, .. }| html! {
                    <a
                        class={class}
                        style={style}

                        href="#"
                    >
                        <Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
                            {"Quick start"}
                        </Text>
                        <Text r#as={TextAs::Div} color={AccentColor::Gray} size=2>
                            {"Start building your next project in minutes"}
                        </Text>
                    </a>
                })}
            />
        </Box>
    }
}

use radix_yew_themes::{
    AccentColor, Avatar, Box, Card, Flex, FlexAlign, FlexDirection, Radius, Text, TextAs, Weight,
};
use yew::prelude::*;

#[function_component]
pub fn CardSizeExample() -> Html {
    html! {
        <Flex gap=3 direction={FlexDirection::Column}>
            <Box width="350px">
                <Card size=1>
                    <Flex gap=3 align={FlexAlign::Center}>
                        <Avatar size=3 radius={Radius::Full} fallback="T" color={AccentColor::Indigo} />
                        <Box>
                            <Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
                                {"Teodros Girmay"}
                            </Text>
                            <Text r#as={TextAs::Div} size=2 color={AccentColor::Gray}>
                                {"Engineering"}
                            </Text>
                        </Box>
                    </Flex>
                </Card>
            </Box>

            <Box width="400px">
                <Card size=2>
                    <Flex gap=4 align={FlexAlign::Center}>
                        <Avatar size=4 radius={Radius::Full} fallback="T" color={AccentColor::Indigo} />
                        <Box>
                            <Text r#as={TextAs::Div} weight={Weight::Bold}>
                                {"Teodros Girmay"}
                            </Text>
                            <Text r#as={TextAs::Div} color={AccentColor::Gray}>
                                {"Engineering"}
                            </Text>
                        </Box>
                    </Flex>
                </Card>
            </Box>

            <Box width="500px">
                <Card size=3>
                    <Flex gap=4 align={FlexAlign::Center}>
                        <Avatar size=5 radius={Radius::Full} fallback="T" color={AccentColor::Indigo} />
                        <Box>
                            <Text r#as={TextAs::Div} size=4 weight={Weight::Bold}>
                                {"Teodros Girmay"}
                            </Text>
                            <Text r#as={TextAs::Div} size=4 color={AccentColor::Gray}>
                                {"Engineering"}
                            </Text>
                        </Box>
                    </Flex>
                </Card>
            </Box>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Card, CardVariant, Flex, FlexDirection, Text, TextAs, Weight};
use yew::prelude::*;

#[function_component]
pub fn CardVariantExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="350px">
            <Card variant={CardVariant::Surface}>
                <Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
                    {"Quick start"}
                </Text>
                <Text r#as={TextAs::Div} color={AccentColor::Gray} size=2>
                    {"Start building your next project in minutes"}
                </Text>
            </Card>

            <Card variant={CardVariant::Classic}>
                <Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
                    {"Quick start"}
                </Text>
                <Text r#as={TextAs::Div} color={AccentColor::Gray} size=2>
                    {"Start building your next project in minutes"}
                </Text>
            </Card>
        </Flex>
    }
}

use radix_yew_themes::{
    Box, Card, Inset, InsetClip, InsetPadding, InsetSide, Strong, Text, TextAs,
};
use yew::prelude::*;
use yew_style::Style;

#[function_component]
pub fn CardWithInsetContentExample() -> Html {
    html! {
        <Box max_width="240px">
            <Card size=2>
                <Inset clip={InsetClip::PaddingBox} side={InsetSide::Top} pb={InsetPadding::Current}>
                    <img
                        src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
                        alt="Bold typography"
                        style={Style::from([
                            ("display", "block"),
                            ("object-fit", "cover"),
                            ("width", "100%"),
                            ("height", "140px"),
                            ("background-color", "var(--gray-5)"),
                        ])}
                    />
                </Inset>
                <Text r#as={TextAs::P} size=3>
                    <Strong>{"Typography"}</Strong>{" is the art and technique of arranging type to
                    make written language legible, readable and appealing when displayed."}
                </Text>
            </Card>
        </Box>
    }
}

use radix_yew_themes::{Checkbox, CheckedState, Flex, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn CheckboxExample() -> Html {
    html! {
        <Text r#as={TextAs::Label} size=2>
            <Flex gap=2>
                <Checkbox default_checked={CheckedState::True} />
                {"Agree to Terms and Conditions"}
            </Flex>
        </Text>
    }
}

use radix_yew_themes::{Checkbox, CheckedState, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn CheckboxSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=2>
            <Checkbox size=1 default_checked={CheckedState::True} />
            <Checkbox size=2 default_checked={CheckedState::True} />
            <Checkbox size=3 default_checked={CheckedState::True} />
        </Flex>
    }
}

use radix_yew_themes::{Checkbox, CheckboxVariant, CheckedState, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn CheckboxVariantExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Flex gap=2>
                <Checkbox variant={CheckboxVariant::Surface} default_checked={CheckedState::True} />
                <Checkbox variant={CheckboxVariant::Surface} />
            </Flex>

            <Flex gap=2>
                <Checkbox variant={CheckboxVariant::Classic} default_checked={CheckedState::True} />
                <Checkbox variant={CheckboxVariant::Classic} />
            </Flex>

            <Flex gap=2>
                <Checkbox variant={CheckboxVariant::Soft} default_checked={CheckedState::True} />
                <Checkbox variant={CheckboxVariant::Soft} />
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Checkbox, CheckedState, Flex};
use yew::prelude::*;

#[function_component]
pub fn CheckboxColorExample() -> Html {
    html! {
        <Flex gap=2>
            <Checkbox color={AccentColor::Indigo} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Cyan} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Orange} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Crimson} default_checked={CheckedState::True} />
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Checkbox, CheckedState, Grid, GridDisplay};
use yew::prelude::*;

#[function_component]
pub fn CheckboxHighContrastExample() -> Html {
    html! {
        <Grid columns=5 display={GridDisplay::InlineGrid} gap=2>
            <Checkbox color={AccentColor::Indigo} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Cyan} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Orange} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Crimson} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Gray} default_checked={CheckedState::True} />

            <Checkbox color={AccentColor::Indigo} default_checked={CheckedState::True} high_contrast=true />
            <Checkbox color={AccentColor::Cyan} default_checked={CheckedState::True} high_contrast=true />
            <Checkbox color={AccentColor::Orange} default_checked={CheckedState::True} high_contrast=true />
            <Checkbox color={AccentColor::Crimson} default_checked={CheckedState::True} high_contrast=true />
            <Checkbox color={AccentColor::Gray} default_checked={CheckedState::True} high_contrast=true />
        </Grid>
    }
}

use radix_yew_themes::{Checkbox, CheckedState, Flex, FlexAs, FlexDirection, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn CheckboxAlignmentExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Text r#as={TextAs::Label} size=2>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox size=1 default_checked={CheckedState::True} />{" Agree to Terms and Conditions"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=3>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox size=2 default_checked={CheckedState::True} />{" Agree to Terms and Conditions"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=4>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox size=3 default_checked={CheckedState::True} />{" Agree to Terms and Conditions"}
                </Flex>
            </Text>
        </Flex>
    }
}

use radix_yew_themes::{Box, Checkbox, CheckedState, Flex, FlexAs, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn CheckboxAlignmentMultiLineExample() -> Html {
    html! {
        <Box max_width="300px">
            <Text r#as={TextAs::Label} size=3>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox default_checked={CheckedState::True} />{" I understand that these documents are
                    confidential and cannot be shared with a third party."}
                </Flex>
            </Text>
        </Box>
    }
}

use radix_yew_themes::{
    AccentColor, Checkbox, CheckedState, Flex, FlexAs, FlexDirection, Text, TextAs,
};
use yew::prelude::*;

#[function_component]
pub fn CheckboxDisabledExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=2>
            <Text r#as={TextAs::Label} size=2>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox />
                    {"Not checked"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox default_checked={CheckedState::True} />
                    {"Checked"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2 color={AccentColor::Gray}>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox disabled=true />
                    {"Not checked"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2 color={AccentColor::Gray}>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox disabled=true default_checked={CheckedState::True} />
                    {"Checked"}
                </Flex>
            </Text>
        </Flex>
    }
}

use radix_yew_themes::{Checkbox, CheckedState, Flex};
use yew::prelude::*;

#[function_component]
pub fn CheckboxIndeterminateExample() -> Html {
    html! {
        <Flex gap=2>
            <Checkbox default_checked={CheckedState::Indeterminate} />
            <Checkbox checked={CheckedState::Indeterminate} />
        </Flex>
    }
}

use radix_yew_icons::CopyIcon;
use radix_yew_themes::{
    AccentColor, Badge, BadgeVariant, Code, CodeVariant, DataList, DataListItem, DataListItemAlign,
    DataListLabel, DataListValue, Flex, FlexAlign, IconButton, IconButtonVariant, Link, Radius,
};
use yew::prelude::*;

#[function_component]
pub fn DataListExample() -> Html {
    html! {
        <DataList>
            <DataListItem align={DataListItemAlign::Center}>
                <DataListLabel min_width="88px">{"Status"}</DataListLabel>
                <DataListValue>
                    <Badge color={AccentColor::Jade} variant={BadgeVariant::Soft} radius={Radius::Full}>
                        {"Authorized"}
                    </Badge>
                </DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"ID"}</DataListLabel>
                <DataListValue>
                    <Flex align={FlexAlign::Center} gap=2>
                        <Code variant={CodeVariant::Ghost}>{"u_2J89JSA4GJ"}</Code>
                        <IconButton
                            size=1
                            color={AccentColor::Gray}
                            variant={IconButtonVariant::Ghost}
                            attributes={[
                                ("aria-label", "Copy value")
                            ]}
                        >
                            <CopyIcon />
                        </IconButton>
                    </Flex>
                </DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                <DataListValue>{"Vlad Moroz"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                <DataListValue>
                    <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                </DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                <DataListValue>
                    <Link target="_blank" href="https://workos.com">
                        {"WorkOS"}
                    </Link>
                </DataListValue>
            </DataListItem>
        </DataList>
    }
}

use radix_yew_themes::{
    Breakpoint, DataList, DataListItem, DataListLabel, DataListOrientation, DataListValue, Link,
    ResponsiveValues,
};
use yew::prelude::*;

#[function_component]
pub fn DataListOrientationExample() -> Html {
    html! {
        <DataList
            orientation={ResponsiveValues::from([
                (Breakpoint::Initial, DataListOrientation::Vertical),
                (Breakpoint::Sm, DataListOrientation::Horizontal),
            ])}
        >
            <DataListItem>
                <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                <DataListValue>{"Vlad Moroz"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                <DataListValue>
                    <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                </DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                <DataListValue>
                    <Link target="_blank" href="https://workos.com">
                        {"WorkOS"}
                    </Link>
                </DataListValue>
            </DataListItem>
        </DataList>
    }
}

use radix_yew_themes::{
    DataList, DataListItem, DataListLabel, DataListValue, Flex, FlexDirection, Link,
};
use yew::prelude::*;

#[function_component]
pub fn DataListSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=6>
            <DataList size=1>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                    <DataListValue>{"Vlad Moroz"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                    <DataListValue>
                        <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                    </DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                    <DataListValue>
                        <Link target="_blank" href="https://workos.com">
                            {"WorkOS"}
                        </Link>
                    </DataListValue>
                </DataListItem>
            </DataList>

            <DataList size=2>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                    <DataListValue>{"Vlad Moroz"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                    <DataListValue>
                        <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                    </DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                    <DataListValue>
                        <Link target="_blank" href="https://workos.com">
                            {"WorkOS"}
                        </Link>
                    </DataListValue>
                </DataListItem>
            </DataList>

            <DataList size=3>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Name"}</DataListLabel>
                    <DataListValue>{"Vlad Moroz"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Email"}</DataListLabel>
                    <DataListValue>
                        <Link href="mailto:vlad@workos.com">{"vlad@workos.com"}</Link>
                    </DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel min_width="88px">{"Company"}</DataListLabel>
                    <DataListValue>
                        <Link target="_blank" href="https://workos.com">
                            {"WorkOS"}
                        </Link>
                    </DataListValue>
                </DataListItem>
            </DataList>
        </Flex>
    }
}

use radix_yew_themes::{
    AccentColor, DataList, DataListItem, DataListLabel, DataListOrientation, DataListValue,
};
use yew::prelude::*;

#[function_component]
pub fn DataListColorExample() -> Html {
    html! {
        <DataList orientation={DataListOrientation::Vertical}>
            <DataListItem>
                <DataListLabel color={AccentColor::Indigo}>{"Name"}</DataListLabel>
                <DataListValue>{"Indigo"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel color={AccentColor::Cyan}>{"Name"}</DataListLabel>
                <DataListValue>{"Cyan"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel color={AccentColor::Orange}>{"Name"}</DataListLabel>
                <DataListValue>{"Orange"}</DataListValue>
            </DataListItem>
            <DataListItem>
                <DataListLabel color={AccentColor::Crimson}>{"Name"}</DataListLabel>
                <DataListValue>{"Crimson"}</DataListValue>
            </DataListItem>
        </DataList>
    }
}

use radix_yew_themes::{
    AccentColor, DataList, DataListItem, DataListLabel, DataListOrientation, DataListValue, Flex,
};
use yew::prelude::*;

#[function_component]
pub fn DataListHighContrastExample() -> Html {
    html! {
        <Flex gap=9>
            <DataList orientation={DataListOrientation::Vertical}>
                <DataListItem>
                    <DataListLabel color={AccentColor::Indigo}>{"Name"}</DataListLabel>
                    <DataListValue>{"Indigo"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Cyan}>{"Name"}</DataListLabel>
                    <DataListValue>{"Cyan"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Orange}>{"Name"}</DataListLabel>
                    <DataListValue>{"Orange"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Crimson}>{"Name"}</DataListLabel>
                    <DataListValue>{"Crimson"}</DataListValue>
                </DataListItem>
            </DataList>

            <DataList orientation={DataListOrientation::Vertical}>
                <DataListItem>
                    <DataListLabel color={AccentColor::Indigo} high_contrast=true>
                        {"Name"}
                    </DataListLabel>
                    <DataListValue>{"Indigo"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Cyan} high_contrast=true>
                        {"Name"}
                    </DataListLabel>
                    <DataListValue>{"Cyan"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Orange} high_contrast=true>
                        {"Name"}
                    </DataListLabel>
                    <DataListValue>{"Orange"}</DataListValue>
                </DataListItem>
                <DataListItem>
                    <DataListLabel color={AccentColor::Crimson} high_contrast=true>
                        {"Name"}
                    </DataListLabel>
                    <DataListValue>{"Crimson"}</DataListValue>
                </DataListItem>
            </DataList>
        </Flex>
    }
}

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::IconButton;
use yew::prelude::*;

#[function_component]
pub fn IconButtonExample() -> Html {
    html! {
        <IconButton>
            <MagnifyingGlassIcon width="18" height="18" />
        </IconButton>
    }
}

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{Flex, FlexAlign, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=3>
            <IconButton size=1 variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="15" height="15" />
            </IconButton>

            <IconButton size=2 variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>

            <IconButton size=3 variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="22" height="22" />
            </IconButton>
        </Flex>
    }
}

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{Flex, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonVariantExample() -> Html {
    html! {
        <Flex gap=3>
            <IconButton variant={IconButtonVariant::Classic}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton variant={IconButtonVariant::Solid}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton variant={IconButtonVariant::Surface}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton variant={IconButtonVariant::Outline}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
        </Flex>
    }
}

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonVariantGhostExample() -> Html {
    html! {
        <IconButton variant={IconButtonVariant::Ghost}>
            <MagnifyingGlassIcon width="18" height="18" />
        </IconButton>
    }
}

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{AccentColor, Flex, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonColorExample() -> Html {
    html! {
        <Flex gap=3>
            <IconButton color={AccentColor::Indigo} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton color={AccentColor::Cyan} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton color={AccentColor::Orange} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton color={AccentColor::Crimson} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
        </Flex>
    }
}

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{AccentColor, Flex, FlexDirection, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex gap=3>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Classic}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Solid}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Soft}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Surface}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Outline}>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
            </Flex>
            <Flex gap=3>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Classic} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Solid} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Soft} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Surface} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
                <IconButton color={AccentColor::Gray} variant={IconButtonVariant::Outline} high_contrast=true>
                    <MagnifyingGlassIcon width="18" height="18" />
                </IconButton>
            </Flex>
        </Flex>
    }
}

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{Flex, IconButton, IconButtonVariant, Radius};
use yew::prelude::*;

#[function_component]
pub fn IconButtonRadiusExample() -> Html {
    html! {
        <Flex gap=3>
            <IconButton radius={Radius::None} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton radius={Radius::Small} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton radius={Radius::Medium} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton radius={Radius::Large} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton radius={Radius::Full} variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
        </Flex>
    }
}

use radix_yew_icons::MagnifyingGlassIcon;
use radix_yew_themes::{Flex, IconButton, IconButtonVariant};
use yew::prelude::*;

#[function_component]
pub fn IconButtonLoadingExample() -> Html {
    html! {
        <Flex gap=3>
            <IconButton loading=true variant={IconButtonVariant::Classic}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton loading=true variant={IconButtonVariant::Solid}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton loading=true variant={IconButtonVariant::Soft}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton loading=true variant={IconButtonVariant::Surface}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
            <IconButton loading=true variant={IconButtonVariant::Outline}>
                <MagnifyingGlassIcon width="18" height="18" />
            </IconButton>
        </Flex>
    }
}

use radix_yew_themes::{
    Box, Card, Inset, InsetClip, InsetPadding, InsetSide, Strong, Text, TextAs,
};
use yew::prelude::*;
use yew_style::Style;

#[function_component]
pub fn InsetExample() -> Html {
    html! {
        <Box max_width="240px">
            <Card size=2>
                <Inset clip={InsetClip::PaddingBox} side={InsetSide::Top} pb={InsetPadding::Current}>
                    <img
                        src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
                        alt="Bold typography"
                        style={Style::from([
                            ("display", "block"),
                            ("object-fit", "cover"),
                            ("width", "100%"),
                            ("height", "140px"),
                            ("background-color", "var(--gray-5)"),
                        ])}
                    />
                </Inset>
                <Text r#as={TextAs::P} size=3>
                    <Strong>{"Typography"}</Strong>{" is the art and technique of arranging type to
                    make written language legible, readable and appealing when displayed."}
                </Text>
            </Card>
        </Box>
    }
}

use radix_yew_themes::{Flex, FlexAlign, FlexChildProps, FlexDirection, Radio, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn RadioExample() -> Html {
    html! {
        <Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
            <Flex
                gap=2

                as_child={|FlexChildProps { class, style, .. }| html! {
                    <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                        <Radio name="example" value="1" default_checked=true />
                        {"Default"}
                    </Text>
                }}
            />

            <Flex
                gap=2

                as_child={|FlexChildProps { class, style, .. }| html! {
                    <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                        <Radio name="example" value="2" />
                        {"Comfortable"}
                    </Text>
                }}
            />

            <Flex
                gap=2

                as_child={|FlexChildProps { class, style, .. }| html! {
                    <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                        <Radio name="example" value="3" />
                        {"Compact"}
                    </Text>
                }}
            />
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexAlign, Radio};
use yew::prelude::*;

#[function_component]
pub fn RadioSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Flex gap=2>
                <Radio size=1 name="size-1" value="1" default_checked=true />
                <Radio size=1 name="size-1" value="2" />
            </Flex>

            <Flex gap=2>
                <Radio size=2 name="size-2" value="1" default_checked=true />
                <Radio size=2 name="size-2" value="2" />
            </Flex>

            <Flex gap=2>
                <Radio size=3 name="size-3" value="1" default_checked=true />
                <Radio size=3 name="size-3" value="2" />
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexAlign, Radio, RadioVariant};
use yew::prelude::*;

#[function_component]
pub fn RadioVariantExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Flex gap=2>
                <Radio variant={RadioVariant::Surface} name="surface" value="1" default_checked=true />
                <Radio variant={RadioVariant::Surface} name="surface" value="2" />
            </Flex>

            <Flex gap=2>
                <Radio variant={RadioVariant::Classic} name="classic" value="1" default_checked=true />
                <Radio variant={RadioVariant::Classic} name="classic" value="2" />
            </Flex>

            <Flex gap=2>
                <Radio variant={RadioVariant::Soft} name="soft" value="1" default_checked=true />
                <Radio variant={RadioVariant::Soft} name="soft" value="2" />
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexAs, Radio};
use yew::prelude::*;

#[function_component]
pub fn RadioColorExample() -> Html {
    html! {
        <Flex r#as={FlexAs::Span} gap=2>
            <Radio color={AccentColor::Indigo} default_checked=true />
            <Radio color={AccentColor::Cyan} default_checked=true />
            <Radio color={AccentColor::Orange} default_checked=true />
            <Radio color={AccentColor::Crimson} default_checked=true />
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Grid, GridDisplay, Radio};
use yew::prelude::*;

#[function_component]
pub fn RadioHighContrastExample() -> Html {
    html! {
        <Grid columns=5 display={GridDisplay::InlineGrid} gap=2>
            <Radio color={AccentColor::Indigo} default_checked=true />
            <Radio color={AccentColor::Cyan} default_checked=true />
            <Radio color={AccentColor::Orange} default_checked=true />
            <Radio color={AccentColor::Crimson} default_checked=true />
            <Radio color={AccentColor::Gray} default_checked=true />

            <Radio color={AccentColor::Indigo} default_checked=true high_contrast=true />
            <Radio color={AccentColor::Cyan} default_checked=true high_contrast=true />
            <Radio color={AccentColor::Orange} default_checked=true high_contrast=true />
            <Radio color={AccentColor::Crimson} default_checked=true high_contrast=true />
            <Radio color={AccentColor::Gray} default_checked=true high_contrast=true />
        </Grid>
    }
}

use radix_yew_themes::{Flex, FlexAlign, FlexChildProps, FlexDirection, Radio, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn RadioAlignmentExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                            <Radio size=1 name="alignment-1" value="1" default_checked=true />
                            {"Default"}
                        </Text>
                    }}
                />
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                            <Radio size=1 name="alignment-1" value="2" />
                            {"Compact"}
                        </Text>
                    }}
                />
            </Flex>

            <Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=3 class={class} style={style}>
                            <Radio size=2 name="alignment-2" value="1" default_checked=true />
                            {"Default"}
                        </Text>
                    }}
                />
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=3 class={class} style={style}>
                            <Radio size=2 name="alignment-2" value="2" />
                            {"Compact"}
                        </Text>
                    }}
                />
            </Flex>

            <Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=4 class={class} style={style}>
                            <Radio size=3 name="alignment-3" value="1" default_checked=true />
                            {"Default"}
                        </Text>
                    }}
                />
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=4 class={class} style={style}>
                            <Radio size=3 name="alignment-3" value="2" />
                            {"Compact"}
                        </Text>
                    }}
                />
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexAlign, FlexChildProps, FlexDirection, Radio, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn RadioDisabledExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                            <Radio name="enabled" value="1" default_checked=true />
                            {"On"}
                        </Text>
                    }}
                />
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                            <Radio name="enabled" value="2" />
                            {"Off"}
                        </Text>
                    }}
                />
            </Flex>

            <Flex align={FlexAlign::Start} direction={FlexDirection::Column} gap=1>
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                            <Radio disabled=true name="disabled" value="1" default_checked=true />
                            {"On"}
                        </Text>
                    }}
                />
                <Flex
                    gap=2

                    as_child={|FlexChildProps { class, style, .. }| html! {
                        <Text r#as={TextAs::Label} size=2 class={class} style={style}>
                            <Radio disabled=true name="disabled" value="2" />
                            {"Off"}
                        </Text>
                    }}
                />
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{
    Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger,
};
use yew::prelude::*;

#[function_component]
pub fn SelectExample() -> Html {
    html! {
        <Select default_value="apple">
            <SelectTrigger />
            <SelectContent>
                <SelectGroup>
                    <SelectLabel>{"Fruits"}</SelectLabel>
                    <SelectItem value="orange">{"Orange"}</SelectItem>
                    <SelectItem value="apple">{"Apple"}</SelectItem>
                    <SelectItem value="grape" disabled=true>
                        {"Grape"}
                    </SelectItem>
                </SelectGroup>
                <SelectSeparator />
                <SelectGroup>
                    <SelectLabel>{"Vegetables"}</SelectLabel>
                    <SelectItem value="carrot">{"Carrot"}</SelectItem>
                    <SelectItem value="potato">{"Potato"}</SelectItem>
                </SelectGroup>
            </SelectContent>
        </Select>
    }
}

use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation, Text};
use yew::prelude::*;

#[function_component]
pub fn SeparatorExample() -> Html {
    html! {
        <Text size=2>
            {"Tools for building high-quality, accessible UI."}
            <Separator my=3 size=4 />
            <Flex gap=3 align={FlexAlign::Center}>
                {"Themes"}
                <Separator orientation={SeparatorOrientation::Vertical} />
                {"Primitives"}
                <Separator orientation={SeparatorOrientation::Vertical} />
                {"Icons"}
                <Separator orientation={SeparatorOrientation::Vertical} />
                {"Colors"}
            </Flex>
        </Text>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Separator, SeparatorOrientation};
use yew::prelude::*;

#[function_component]
pub fn SeparatorSizeHorizontalExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=4>
            <Separator orientation={SeparatorOrientation::Horizontal} size=1 />
            <Separator orientation={SeparatorOrientation::Horizontal} size=2 />
            <Separator orientation={SeparatorOrientation::Horizontal} size=3 />
            <Separator orientation={SeparatorOrientation::Horizontal} size=4 />
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation};
use yew::prelude::*;

#[function_component]
pub fn SeparatorSizeVerticalExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4 height="96px">
            <Separator orientation={SeparatorOrientation::Vertical} size=1 />
            <Separator orientation={SeparatorOrientation::Vertical} size=2 />
            <Separator orientation={SeparatorOrientation::Vertical} size=3 />
            <Separator orientation={SeparatorOrientation::Vertical} size=4 />
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Separator};
use yew::prelude::*;

#[function_component]
pub fn SeparatorColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Separator color={AccentColor::Indigo} size=4 />
            <Separator color={AccentColor::Cyan} size=4 />
            <Separator color={AccentColor::Orange} size=4 />
            <Separator color={AccentColor::Crimson} size=4 />
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexAlign, Separator, SeparatorOrientation};
use yew::prelude::*;

#[function_component]
pub fn SeparatorOrientationExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Separator orientation={SeparatorOrientation::Horizontal} />
            <Separator orientation={SeparatorOrientation::Vertical} />
        </Flex>
    }
}

use radix_yew_themes::Skeleton;
use yew::prelude::*;

#[function_component]
pub fn SkeletonExample() -> Html {
    html! {
        <Skeleton>{"Loading"}</Skeleton>
    }
}

use radix_yew_themes::Skeleton;
use yew::prelude::*;

#[function_component]
pub fn SkeletonSizeExample() -> Html {
    html! {
        <Skeleton width="48px" height="48px" />
    }
}

use radix_yew_themes::{Flex, Skeleton, SkeletonChildProps, Switch};
use yew::prelude::*;

#[function_component]
pub fn SkeletonWithChildrenExample() -> Html {
    html! {
        <Flex gap=4>
            <Skeleton
                loading=true

                as_child={Callback::from(|SkeletonChildProps {
                    aria_hidden,
                    class,
                    inert,
                    style,
                    tabindex,
                    ..
                }| html! {
                    <Switch
                        default_checked=true

                        class={class}
                        style={style}

                        attributes={[
                            ("aria-hidden", aria_hidden),
                            ("inert", inert),
                            ("tabindex", tabindex),
                        ]}
                    />
                })}>
            </Skeleton>

            <Skeleton
                loading=false

                as_child={Callback::from(|SkeletonChildProps {
                    aria_hidden,
                    class,
                    inert,
                    style,
                    tabindex,
                    ..
                }| html! {
                    <Switch
                        default_checked=true

                        class={class}
                        style={style}

                        attributes={[
                            ("aria-hidden", aria_hidden),
                            ("inert", inert),
                            ("tabindex", tabindex),
                        ]}
                    />
                })}>
            </Skeleton>
        </Flex>
    }
}

use radix_yew_themes::{Container, Flex, FlexDirection, Skeleton, Text};
use yew::prelude::*;

#[function_component]
pub fn SkeletonWithTextExample() -> Html {
    html! {
        <Container size=1>
            <Flex direction={FlexDirection::Column} gap=2>
                <Text>
                    <Skeleton>{"Lorem ipsum dolor sit amet."}</Skeleton>
                </Text>

                <Skeleton>
                    <Text>{"Lorem ipsum dolor sit amet."}</Text>
                </Skeleton>
            </Flex>
        </Container>
    }
}

use radix_yew_themes::{Container, Flex, FlexDirection, Skeleton, Text};
use yew::prelude::*;

#[function_component]
pub fn SkeletonWithTextParagraphExample() -> Html {
    html! {
        <Container size=1>
            <Flex direction={FlexDirection::Column} gap=2>
                <Text>
                    <Skeleton>
                        {"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                        felis tellus, efficitur id convallis a, viverra eget libero. Nam magna
                        erat, fringilla sed commodo sed, aliquet nec magna."}
                    </Skeleton>
                </Text>

                <Skeleton>
                    <Text>
                        {"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                        felis tellus, efficitur id convallis a, viverra eget libero. Nam magna
                        erat, fringilla sed commodo sed, aliquet nec magna."}
                    </Text>
                </Skeleton>
            </Flex>
        </Container>
    }
}

use radix_yew_themes::Spinner;
use yew::prelude::*;

#[function_component]
pub fn SpinnerExample() -> Html {
    html! {
        <Spinner />
    }
}

use radix_yew_themes::{Flex, FlexAlign, Spinner};
use yew::prelude::*;

#[function_component]
pub fn SpinnerSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Spinner size=1 />
            <Spinner size=2 />
            <Spinner size=3 />
        </Flex>
    }
}

use radix_yew_themes::{Flex, Spinner, Switch};
use yew::prelude::*;

#[function_component]
pub fn SpinnerWithChildrenExample() -> Html {
    html! {
        <Flex gap=4>
            <Spinner loading={true}>
                <Switch default_checked=true />
            </Spinner>

            <Spinner loading={false}>
                <Switch default_checked=true />
            </Spinner>
        </Flex>
    }
}

use radix_yew_themes::Button;
use yew::prelude::*;

#[function_component]
pub fn SpinnerWithButtonsExample() -> Html {
    html! {
        <Button loading=true>{"Bookmark"}</Button>
    }
}

use radix_yew_icons::BookmarkIcon;
use radix_yew_themes::{Button, Spinner};
use yew::prelude::*;

#[function_component]
pub fn SpinnerWithButtonsDisabledExample() -> Html {
    html! {
        <Button disabled=true>
            <Spinner loading=true>
                <BookmarkIcon />
            </Spinner>
            {"Bookmark"}
        </Button>
    }
}

use radix_yew_themes::Switch;
use yew::prelude::*;

#[function_component]
pub fn SwitchExample() -> Html {
    html! {
        <Switch default_checked=true />
    }
}

use radix_yew_themes::{Flex, FlexAlign, Switch};
use yew::prelude::*;

#[function_component]
pub fn SwitchSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=2>
            <Switch size=1 default_checked=true />
            <Switch size=2 default_checked=true />
            <Switch size=3 default_checked=true />
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Switch, SwitchVariant};
use yew::prelude::*;

#[function_component]
pub fn SwitchVariantExample() -> Html {
    html! {
        <Flex gap=2>
            <Flex direction={FlexDirection::Column} gap=3>
                <Switch variant={SwitchVariant::Surface} />
                <Switch variant={SwitchVariant::Classic} />
                <Switch variant={SwitchVariant::Soft} />
            </Flex>

            <Flex direction={FlexDirection::Column} gap=3>
                <Switch variant={SwitchVariant::Surface} default_checked=true />
                <Switch variant={SwitchVariant::Classic} default_checked=true />
                <Switch variant={SwitchVariant::Soft} default_checked=true />
            </Flex>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, Switch};
use yew::prelude::*;

#[function_component]
pub fn SwitchColorExample() -> Html {
    html! {
        <Flex gap=2>
            <Switch color={AccentColor::Indigo} default_checked=true />
            <Switch color={AccentColor::Cyan} default_checked=true />
            <Switch color={AccentColor::Orange} default_checked=true />
            <Switch color={AccentColor::Crimson} default_checked=true />
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Grid, GridDisplay, GridFlow, Switch};
use yew::prelude::*;

#[function_component]
pub fn SwitchHighContrastExample() -> Html {
    html! {
        <Grid rows=2 gap_x=2 gap_y=3 display={GridDisplay::InlineGrid} flow={GridFlow::Column}>
            <Switch color={AccentColor::Indigo} default_checked=true />
            <Switch color={AccentColor::Indigo} default_checked=true high_contrast=true />
            <Switch color={AccentColor::Cyan} default_checked=true />
            <Switch color={AccentColor::Cyan} default_checked=true high_contrast=true />
            <Switch color={AccentColor::Orange} default_checked=true />
            <Switch color={AccentColor::Orange} default_checked=true high_contrast=true />
            <Switch color={AccentColor::Crimson} default_checked=true />
            <Switch color={AccentColor::Crimson} default_checked=true high_contrast=true />
            <Switch color={AccentColor::Gray} default_checked=true />
            <Switch color={AccentColor::Gray} default_checked=true high_contrast=true />
        </Grid>
    }
}

use radix_yew_themes::{Flex, Radius, Switch};
use yew::prelude::*;

#[function_component]
pub fn SwitchRadiusExample() -> Html {
    html! {
        <Flex gap=3>
            <Switch radius={Radius::None} default_checked=true />
            <Switch radius={Radius::Small} default_checked=true />
            <Switch radius={Radius::Medium} default_checked=true />
            <Switch radius={Radius::Large} default_checked=true />
            <Switch radius={Radius::Full} default_checked=true />
        </Flex>
    }
}

use radix_yew_themes::{Flex, FlexDirection, Switch, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn SwitchAlignmentExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Text r#as={TextAs::Label} size=2>
                <Flex gap=2>
                    <Switch size=1 default_checked=true />{" Sync settings"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=3>
                <Flex gap=2>
                    <Switch size=2 default_checked=true />{" Sync settings"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=4>
                <Flex gap=2>
                    <Switch size=3 default_checked=true />{" Sync settings"}
                </Flex>
            </Text>
        </Flex>
    }
}

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Switch, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn SwitchDisabledExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=2>
            <Text r#as={TextAs::Label} size=2>
                <Flex gap=2>
                    <Switch size=1 />
                    {"Off"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2>
                <Flex gap=2>
                    <Switch size=1 default_checked=true />
                    {"On"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2 color={AccentColor::Gray}>
                <Flex gap=2>
                    <Switch size=1 disabled=true />
                    {"On"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2 color={AccentColor::Gray}>
                <Flex gap=2>
                    <Switch size=1 disabled=true default_checked=true />
                    {"Off"}
                </Flex>
            </Text>
        </Flex>
    }
}