soda-material/src/documention/ThemingExample.mdx

A React(>=18) component library that may follow [Material Design 3](https://m3.material.io/components) (a.k.a. Material You)

import ThemingExample from './ThemingExample'
import { Meta, Canvas, Story } from '@storybook/blocks'
import * as Soda from '@/index'

<Meta title="ThemingExample" />

# Theming Example

<ThemingExample />

## Preview

<Soda.ProgressIndicator sd="linear" />

<Soda.ProgressIndicator sd="circular" />

<Soda.Search
    leadingIcon={
        <Soda.IconButton path="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
    }
    placeholder="placeholder"
    trailingIcon={
        <Soda.IconButton path="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
    }
/>

<Soda.Switch />

<Soda.RadioButton defaultChecked></Soda.RadioButton>

<Soda.Checkbox />

<Soda.List
    headline="theming"
    leadingAvatarLabelText="M"
    supportingText="@material/material-color-utilities"
/>

<Soda.Tabs defaultValue="1">
    <Soda.Tab value="0">Apple</Soda.Tab>
    <Soda.Tab value="1">Banana</Soda.Tab>
    <Soda.Tab value="2">Orange</Soda.Tab>
</Soda.Tabs>

<Soda.DatePicker />

<Soda.TimePicker />