### Install Mielo UI Packages

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Installs the necessary Mielo UI packages, including the core CSS framework and the React component library, using npm.

```bash
npm install @mielo-ui/mielo @mielo-ui/mielo-react
```

--------------------------------

### Modal Component Example - React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Shows how to implement a Modal component for displaying content in a full-screen overlay. Includes state management for opening/closing, backdrop click, and escape key handling. Requires the @mielo-ui/mielo-react library and React's useState hook.

```tsx
import { Modal } from "@mielo-ui/mielo-react"
import { useState } from "react"

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>

      <Modal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
      >
        <div className="mie dialog">
          <div className="content">
            <h2>Modal Content</h2>
            <p>This content appears in a modal overlay.</p>
            <p>Click outside or press Escape to close.</p>
          </div>
          <div className="mie buttons relaxed actions">
            <button
              className="mie button"
              onClick={() => setIsOpen(false)}
            >
              Close
            </button>
          </div>
        </div>
      </Modal>
    </div>
  )
}
```

--------------------------------

### Install Mielo UI Packages

Source: https://github.com/mielo-ui/mielo-react/blob/main/README.md

Installs the core mielo UI package and the mielo-react component library using npm or yarn. This is the first step to using Mielo components in your project.

```sh
npm install @mielo-ui/mielo @mielo-ui/mielo-react # or use "yarn add" instead
```

--------------------------------

### Window Component Examples in React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Illustrates the Mielo UI Window component for creating desktop application-style windows. Features include optional header bars, split view layouts, and window controls for Tauri/Electron apps. Supports transparent and accent-colored themes, and draggable headers.

```tsx
import { Window, HeaderBar, View, Button } from "@mielo-ui/mielo-react"

function WindowExample() {
  return (
    <div>
      {/* Basic window with headerbar */}
      <Window
        headerbar={{
          header: "My Application",
          left: <Button label="Menu" transparent />,
          right: <Button label="Settings" transparent />
        }}
      >
        <View scrollable>
          <p>Window content goes here</p>
        </View>
      </Window>

      {/* Window with window controls */}
      <Window
        headerbar={{
          header: "Desktop App",
          controls: (
            <Window.Controls
              controls={["minimize", "maximize", "close"]}
              onClickControl={(event, type) => {
                console.log("Control clicked:", type)
              }}
            />
          )
        }}
      >
        <View>Content</View>
      </Window>

      {/* Window with split view */}
      <Window
        split={{
          sidebar: <div>Sidebar content</div>,
          content: <View>Main content</View>
        }}
      />

      {/* Transparent window */}
      <Window transparent>
        <View>Transparent window content</View>
      </Window>

      {/* Accent colored window */}
      <Window accent="success">
        <View>Success themed window</View>
      </Window>

      {/* Window for Tauri/Electron with draggable header */}
      <Window
        headerbar={{
          header: "Draggable Window",
          "data-desktop-drag": true
        }}
      >
        <View>Desktop app content</View>
      </Window>
    </div>
  )
}

```

--------------------------------

### Label Component Examples - React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates various ways to use the Label component for styled labels and badges. Supports different accents, sizes, styles, colors, and floating positions. Requires the @mielo-ui/mielo-react library.

```tsx
import { Label } from "@mielo-ui/mielo-react"

function LabelExample() {
  return (
    <div>
      {/* Basic label */}
      <Label>Default Label</Label>

      {/* Accent colors */}
      <Label accent={true}>Accent</Label>
      <Label accent="success">Success</Label>
      <Label accent="warning">Warning</Label>
      <Label accent="error">Error</Label>

      {/* Size variants */}
      <Label size="mini">Mini</Label>
      <Label size="tiny">Tiny</Label>
      <Label size="small">Small</Label>
      <Label size="large">Large</Label>
      <Label size="huge">Huge</Label>

      {/* Style variants */}
      <Label bordered>Bordered</Label>
      <Label transparent>Transparent</Label>
      <Label circular>99</Label>

      {/* Color variants */}
      <Label color="blue">Blue</Label>
      <Label color="green">Green</Label>
      <Label color="red">Red</Label>
      <Label color="purple">Purple</Label>

      {/* Floating labels (positioned at corners) */}
      <div style={{ position: "relative", width: 100, height: 100 }}>
        <Label floating="ftl">Top Left</Label>
        <Label floating="ftr">Top Right</Label>
        <Label floating="fbl">Bottom Left</Label>
        <Label floating="fbr">Bottom Right</Label>
        <Label floating={true}>Default Float</Label>
      </div>
    </div>
  )
}
```

--------------------------------

### Item Component Examples - React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Illustrates the usage of the Item component for creating versatile list items. Supports titles, descriptions, icons, side content, labels, clickable actions, links, and various layout/style variants. Requires the @mielo-ui/mielo-react library.

```tsx
import { Item } from "@mielo-ui/mielo-react"

function ItemExample() {
  return (
    <div>
      {/* Basic item with title */}
      <Item title="Item Title" />

      {/* Item with title and description */}
      <Item
        title="Settings"
        description="Configure application preferences"
      />

      {/* Item with icon */}
      <Item
        title="Profile"
        description="View your profile"
        icon={<span>*</span>}
      />

      {/* Item with side content */}
      <Item
        title="Notifications"
        description="Manage notifications"
        side={<span>5 new</span>}
      />

      {/* Item with label badge */}
      <Item
        title="Messages"
        label={<span className="mie label">New</span>}
      />

      {/* Clickable item with active state */}
      <Item
        title="Dashboard"
        activatable
        active
        onClick={() => console.log("Clicked")}
      />

      {/* Item as link */}
      <Item
        title="Documentation"
        description="Read the docs"
        link="https://mielo-ui.github.io"
      />

      {/* Accent and color variants */}
      <Item title="Success Item" accent="success" />
      <Item title="Warning Item" accent="warning" />
      <Item title="Blue Item" color="blue" />

      {/* Layout variants */}
      <Item title="Vertical Item" vertical />
      <Item title="Centered Item" center />
      <Item
        title="Inverted Content"
        description="Description first"
        inverted
      />

      {/* Custom content instead of title/description */}
      <Item
        content={
          <div>
            <strong>Custom Content</strong>
            <p>Any React content here</p>
          </div>
        }
      />

      {/* Hover state */}
      <Item title="Hover Effect" hover />
    </div>
  )
}
```

--------------------------------

### Mielo UI React Entry Component Example

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates the usage of the Mielo UI React Entry component, a styled text input with floating label, prefix/postfix slots, and visual variants. It handles focus states for label and placeholder animation. Dependencies include React and the @mielo-ui/mielo-react library.

```tsx
import { Entry } from "@mielo-ui/mielo-react"
import { useState } from "react"

function EntryExample() {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  return (
    <div>
      {/* Basic entry with floating label */}
      <Entry
        id="username"
        label="Username"
        placeholder="Enter your username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />

      {/* Password input */}
      <Entry
        id="password"
        type="password"
        label="Password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />

      {/* Accent colors */}
      <Entry id="success" label="Success" accent="success" />
      <Entry id="error" label="Error" accent="error" />
      <Entry id="warning" label="Warning" accent="warning" />

      {/* Style variants */}
      <Entry id="bordered" label="Bordered" bordered />
      <Entry id="transparent" label="Transparent" transparent />

      {/* Size variants */}
      <Entry id="small" label="Small Input" size="small" />
      <Entry id="large" label="Large Input" size="large" />

      {/* With prefix and postfix */}
      <Entry
        id="email"
        label="Email"
        prefix={<span>@</span>}
        postfix={<button>Clear</button>}
      />

      {/* Disabled state */}
      <Entry id="disabled" label="Disabled" disabled value="Cannot edit" />

      {/* With container ID for styling */}
      <Entry
        id="search"
        containerId="search-container"
        label="Search"
        placeholder="Type to search..."
      />
    </div>
  )
}
```

--------------------------------

### Build Mielo React Library from Source

Source: https://github.com/mielo-ui/mielo-react/blob/main/README.md

Provides commands to clone the Mielo React repository, install dependencies, format code, and build the library. This is for developers who want to build from source.

```sh
git clone https://github.com/mielo-ui/mielo-react
cd mielo-react

npm install # or "yarn"
npm run fmt # format & linting components
npm build # build module library with .d.ts
```

--------------------------------

### View Component Examples (React)

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

The View component serves as a versatile content container, offering various background styles (panel, windows, content, osd), scrolling capabilities, and decorative borders. It also supports activatable states for interactive elements and can be themed with accent colors or custom colors.

```tsx
import { View } from "@mielo-ui/mielo-react"

function ViewExample() {
  return (
    <div>
      {/* Basic view */}
      <View>
        <p>Default view content</p>
      </View>

      {/* Background styles: panel, windows, content, osd */}
      <View bg="panel">Panel background</View>
      <View bg="windows">Windows background</View>
      <View bg="content">Content background</View>
      <View bg="osd">OSD (on-screen display) background</View>

      {/* Scrollable view */}
      <View scrollable style={{ height: 200 }}>
        <div style={{ height: 500 }}>
          <p>Scrollable content that exceeds container height</p>
        </div>
      </View>

      {/* Bordered view */}
      <View bordered>
        <p>View with border</p>
      </View>

      {/* Activatable view (hover/focus states) */}
      <View activatable>
        <p>Interactive view with hover states</p>
      </View>

      {/* Accent colored view */}
      <View accent="success">
        <p>Success themed view</p>
      </View>

      {/* Color variants */}
      <View color="blue">Blue view</View>
      <View color="purple">Purple view</View>
    </div>
  )
}
```

--------------------------------

### Mielo React Button Component Examples

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Showcases various configurations and styles for the Mielo React Button component. This includes basic usage, accent colors, size variants, style modifiers, icon integration, and usage as a link or within a button group.

```tsx
import { Button } from "@mielo-ui/mielo-react"

function ButtonExample() {
  return (
    <div>
      {/* Basic button with label */}
      <Button label="Click Me" onClick={() => console.log("clicked")} />

      {/* Accent buttons for different states */}
      <Button label="Success" accent="success" />
      <Button label="Warning" accent="warning" />
      <Button label="Error" accent="error" />
      <Button accent={true} label="Default Accent" />

      {/* Size variants: mini, tiny, small, large, big, huge, massive */}
      <Button label="Small" size="small" />
      <Button label="Large" size="large" />

      {/* Style variants */}
      <Button label="Filled" filled />
      <Button label="Transparent" transparent />
      <Button label="Tertiary" tertiary />
      <Button label="Pilled" pilled />
      <Button label="Circular" circular />

      {/* Button with icon */}
      <Button
        label="With Icon"
        icon={<span>+</span>}
      />

      {/* Button as link */}
      <Button label="Go to Docs" link="https://mielo-ui.github.io" />

      {/* Button group */}
      <Button.Group>
        <Button label="One" />
        <Button label="Two" />
        <Button label="Three" />
      </Button.Group>

      {/* Color variants: blue, green, yellow, orange, red, purple, pink, etc. */}
      <Button label="Blue" color="blue" />
      <Button label="Purple" color="purple" />
    </div>
  )
}
```

--------------------------------

### Rows Component Example - React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Illustrates the Mielo UI Rows component for creating structured form layouts. It showcases basic row usage, rows with select and entry inputs, and a more complex settings page example. Dependencies include React's useState hook and various Mielo UI components like Rows, Select, Entry, and Item.

```tsx
import { Rows, Select, Entry, Item, OptionValue } from "@mielo-ui/mielo-react"
import { useState } from "react"

function RowsExample() {
  const [theme, setTheme] = useState<OptionValue | undefined>()
  const [name, setName] = useState("")

  const themeOptions: OptionValue[] = [
    { value: "light", title: "Light" },
    { value: "dark", title: "Dark" },
    { value: "system", title: "System" }
  ]

  return (
    <div>
      {/* Basic rows container */}
      <Rows>
        <Rows.Row title="Username" description="Your display name" />
        <Rows.Row title="Email" description="Primary email address" />
        <Rows.Row title="Status" description="Account status" side={<span>Active</span>} />
      </Rows>

      {/* Rows with select input */}
      <Rows>
        <Rows.Row title="Appearance" description="Choose your theme">
          <Rows.Select
            name="theme"
            label="Theme"
            options={themeOptions}
            value={theme}
            onChange={setTheme}
          />
        </Rows.Row>
      </Rows>

      {/* Rows with entry input */}
      <Rows>
        <Rows.Row title="Profile">
          <Rows.Entry
            id="name"
            label="Display Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </Rows.Row>
      </Rows>

      {/* Settings page example */}
      <Rows>
        <Rows.Row
          title="Notifications"
          description="Receive email notifications"
          side={<input type="checkbox" />}
        />
        <Rows.Row
          title="Language"
          description="Interface language"
        >
          <Rows.Select
            name="language"
            label="Language"
            options={[
              { value: "en", title: "English" },
              { value: "es", title: "Spanish" },
              { value: "fr", title: "French" }
            ]}
            value={undefined}
            onChange={() => {}}
          />
        </Rows.Row>
        <Rows.Row
          title="About"
          description="Version 1.0.8"
          activatable
          onClick={() => console.log("Show about")}
        />
      </Rows>
    </div>
  )
}

```

--------------------------------

### Tabs Component Examples in React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates the Mielo UI Tabs component for creating tabbed interfaces. Supports array-based and record-based tab definitions, animated indicators, accent colors, and transparent styles. Also shows custom tab content using RawTabs and Tab components.

```tsx
import { Tabs, Tab, RawTabs } from "@mielo-ui/mielo-react"
import { useState } from "react"

function TabsExample() {
  const [selected, setSelected] = useState("home")

  // Array-based tabs
  const tabsArray = [
    { name: "home", title: "Home", icon: <span>H</span> },
    { name: "profile", title: "Profile" },
    { name: "settings", title: "Settings", accent: "warning" as const },
    { name: "help", title: "Help", color: "blue" }
  ]

  // Record-based tabs
  const tabsRecord = {
    home: { name: "home", title: "Home" },
    profile: { name: "profile", title: "Profile" },
    settings: { name: "settings", title: "Settings" }
  }

  return (
    <div>
      {/* Basic tabs with array */}
      <Tabs
        tabs={tabsArray}
        selected={selected}
        onChange={(name) => setSelected(name)}
      />

      {/* Tabs with animated indicator */}
      <Tabs
        tabs={tabsArray}
        selected={selected}
        onChange={setSelected}
        animated
      />

      {/* Tabs with accent color */}
      <Tabs
        tabs={tabsArray}
        selected={selected}
        onChange={setSelected}
        accent="success"
      />

      {/* Transparent tabs */}
      <Tabs
        tabs={tabsArray}
        selected={selected}
        onChange={setSelected}
        transparent
      />

      {/* Record-based tabs */}
      <Tabs
        tabs={tabsRecord}
        selected={selected}
        onChange={setSelected}
      />

      {/* Tab content based on selection */}
      <div className="tab-content">
        {selected === "home" && <p>Home content</p>}
        {selected === "profile" && <p>Profile content</p>}
        {selected === "settings" && <p>Settings content</p>}
        {selected === "help" && <p>Help content</p>}
      </div>

      {/* Raw tabs for custom content */}
      <RawTabs accent="success">
        <Tab name="one" title="Tab 1" selected={selected} index={0} />
        <Tab name="two" title="Tab 2" selected={selected} index={1} />
      </RawTabs>
    </div>
  )
}

```

--------------------------------

### Mielo React Checkbox Component Examples

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates the usage of the Mielo React Checkbox component, including basic functionality, accent colors, size variants, disabled states, circular styling, and toggle mode (switch). It also shows how to use custom icons and children for labels.

```tsx
import { Checkbox } from "@mielo-ui/mielo-react"
import { useState } from "react"

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false)

  return (
    <div>
      {/* Basic checkbox with label */}
      <Checkbox
        name="terms"
        label="I agree to the terms"
        checked={isChecked}
        onChange={(e) => setIsChecked(e.target.checked)}
      />

      {/* Checkbox with accent colors */}
      <Checkbox name="success" label="Success style" accent="success" checked />
      <Checkbox name="warning" label="Warning style" accent="warning" />
      <Checkbox name="error" label="Error style" accent="error" />

      {/* Size variants */}
      <Checkbox name="small" label="Small checkbox" size="small" />
      <Checkbox name="large" label="Large checkbox" size="large" />

      {/* Disabled state */}
      <Checkbox name="disabled" label="Disabled" disabled />

      {/* Circular style */}
      <Checkbox name="circular" label="Circular checkbox" circular />

      {/* Toggle mode (switch style) */}
      <Checkbox
        name="darkMode"
        label="Dark Mode"
        toggle
        checked={isChecked}
        onChange={(e) => setIsChecked(e.target.checked)}
      />

      {/* Toggle with custom icons */}
      <Checkbox
        name="customToggle"
        label="Custom Icons Toggle"
        toggle
        icon={{
          indicator: {
            checked: <span>ON</span>,
            unchecked: <span>OFF</span>
          },
          layout: {
            checked: <span>*</span>,
            unchecked: <span>-</span>
          }
        }}
      />

      {/* Using children instead of label */}
      <Checkbox name="children">
        <span>Custom content as children</span>
      </Checkbox>
    </div>
  )
}
```

--------------------------------

### Dropdown Component Example in React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates the usage of the Mielo UI Dropdown component in React. It covers basic dropdown functionality, programmatic control via ref, custom menu height, and custom class names for styling. This component handles open/close state, click-outside detection, and keyboard navigation.

```tsx
import { Dropdown, DropdownHandles, Button, List, Item } from "@mielo-ui/mielo-react"
import { useRef } from "react"

function DropdownExample() {
  const dropdownRef = useRef<DropdownHandles>(null)

  return (
    <div>
      {/* Basic dropdown */}
      <Dropdown
        content={({ open, isOpen }) => (
          <Button
            label={isOpen ? "Close Menu" : "Open Menu"}
            onClick={open}
          />
        )}
        menu={({ close }) => (
          <List>
            <Item
              title="Option 1"
              activatable
              onClick={() => { console.log("Option 1"); close() }}
            />
            <Item
              title="Option 2"
              activatable
              onClick={() => { console.log("Option 2"); close() }}
            />
            <Item
              title="Option 3"
              activatable
              onClick={() => { console.log("Option 3"); close() }}
            />
          </List>
        )}
      />

      {/* Dropdown with ref for programmatic control */}
      <Dropdown
        ref={dropdownRef}
        content={({ isOpen }) => (
          <Button label={isOpen ? "Expanded" : "Collapsed"} />
        )}
        menu={({ close }) => (
          <div style={{ padding: 16 }}>
            <p>Dropdown content</p>
            <Button label="Close" onClick={close} />
          </div>
        )}
        onOpen={() => console.log("Dropdown opened")}
        onClose={() => console.log("Dropdown closed")}
      />
      <Button
        label="Open Programmatically"
        onClick={() => dropdownRef.current?.open()}
      />

      {/* Dropdown with custom height */}
      <Dropdown
        menuHeight={200}
        content={() => <Button label="Tall Menu" />}
        menu={() => (
          <div style={{ height: 300 }}>
            <p>Content taller than menuHeight</p>
          </div>
        )}
      />

      {/* Dropdown with custom class names */}
      <Dropdown
        className={{ 
          container: "custom-dropdown",
          content: "custom-trigger",
          menu: "custom-menu"
        }}
        content={() => <Button label="Styled" />}
        menu={() => <p>Styled dropdown menu</p>}
      />
    </div>
  )
}

```

--------------------------------

### HeaderBar Component Examples (React)

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

The HeaderBar component creates a header bar with customizable left, center, and right content areas. It supports various styling options like borders, transparency, and accent colors, and is designed for desktop-style applications, including window dragging support for Tauri and Electron.

```tsx
import { HeaderBar, Button } from "@mielo-ui/mielo-react"

function HeaderBarExample() {
  return (
    <div>
      {/* Basic header bar */}
      <HeaderBar
        header="Application Title"
        left={<Button label="Back" transparent />} 
        right={<Button label="Search" transparent />}
      />

      {/* Header bar with window controls */}
      <HeaderBar
        header="Desktop App"
        left={<Button label="Menu" transparent />}
        controls={
          <div className="window-controls">
            <button>-</button>
            <button>[]</button>
            <button>x</button>
          </div>
        }
      />

      {/* Bordered header bar */}
      <HeaderBar
        header="Bordered Header"
        bordered
      />

      {/* Transparent header bar */}
      <HeaderBar
        header="Transparent Header"
        transparent
      />

      {/* Accent colored header bar */}
      <HeaderBar
        header="Accent Header"
        accent="success"
      />

      {/* Desktop draggable header (for Tauri/Electron) */}
      <HeaderBar
        header="Draggable"
        data-desktop-drag
      />
    </div>
  )
}
```

--------------------------------

### Collapsible Component Example - React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates the Mielo UI Collapsible component for creating expandable content sections. It shows basic usage, an accordion pattern, and how to manage multiple open sections. Dependencies include React's useState hook and Mielo UI's Collapsible and Button components.

```tsx
import { Collapsible, Button } from "@mielo-ui/mielo-react"
import { useState } from "react"

function CollapsibleExample() {
  const [isOpen, setIsOpen] = useState(false)
  const [sections, setSections] = useState({ a: true, b: false, c: false })

  return (
    <div>
      {/* Basic collapsible */}
      <Button
        label={isOpen ? "Hide Content" : "Show Content"}
        onClick={() => setIsOpen(!isOpen)}
      />
      <Collapsible open={isOpen}>
        <div style={{ padding: 16 }}>
          <h3>Collapsible Content</h3>
          <p>This content animates in and out smoothly.</p>
          <p>The height is calculated automatically.</p>
        </div>
      </Collapsible>

      {/* Accordion pattern */}
      <div>
        <Button
          label="Section A"
          onClick={() => setSections({ a: !sections.a, b: false, c: false })}
        />
        <Collapsible open={sections.a}>
          <p>Section A content</p>
        </Collapsible>

        <Button
          label="Section B"
          onClick={() => setSections({ a: false, b: !sections.b, c: false })}
        />
        <Collapsible open={sections.b}>
          <p>Section B content</p>
        </Collapsible>

        <Button
          label="Section C"
          onClick={() => setSections({ a: false, b: false, c: !sections.c })}
        />
        <Collapsible open={sections.c}>
          <p>Section C content</p>
        </Collapsible>
      </div>

      {/* Multiple open sections */}
      <div>
        <Button
          label="Toggle Details"
          onClick={() => setSections(s => ({ ...s, a: !s.a }))}
        />
        <Collapsible open={sections.a}>
          <p>Details section that can be open with others</p>
        </Collapsible>
      </div>
    </div>
  )
}

```

--------------------------------

### Mielo UI React Select Component Example

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Illustrates the Mielo UI React Select component, a customizable dropdown for selection. It supports various options, labels, styling, and event callbacks. Internally uses the Dropdown component and allows custom item rendering. Dependencies include React and @mielo-ui/mielo-react.

```tsx
import { Select, OptionValue } from "@mielo-ui/mielo-react"
import { useState } from "react"

function SelectExample() {
  const [selected, setSelected] = useState<OptionValue | undefined>()

  const options: OptionValue[] = [
    { value: "react", title: "React" },
    { value: "vue", title: "Vue.js" },
    { value: "angular", title: "Angular" },
    { value: "svelte", title: "Svelte", description: "Compiler-based framework" }
  ]

  return (
    <div>
      {/* Basic select */}
      <Select
        name="framework"
        label="Select Framework"
        options={options}
        value={selected}
        onChange={(option) => setSelected(option)}
      />

      {/* Accent colors */}
      <Select
        name="accent-select"
        label="Accent Select"
        options={options}
        value={selected}
        onChange={setSelected}
        accent="success"
      />

      {/* Style variants */}
      <Select
        name="bordered"
        label="Bordered"
        options={options}
        value={selected}
        onChange={setSelected}
        bordered
      />
      <Select
        name="transparent"
        label="Transparent"
        options={options}
        value={selected}
        onChange={setSelected}
        transparent
      />

      {/* Size variants */}
      <Select
        name="small"
        label="Small Select"
        options={options}
        value={selected}
        onChange={setSelected}
        size="small"
      />

      {/* Disabled state */}
      <Select
        name="disabled"
        label="Disabled"
        options={options}
        value={selected}
        onChange={setSelected}
        disabled
      />

      {/* With callbacks for open/close events */}
      <Select
        name="events"
        label="With Events"
        options={options}
        value={selected}
        onChange={setSelected}
        onOpen={() => console.log("Dropdown opened")}
        onClose={() => console.log("Dropdown closed")}
      />

      {/* With prefix and postfix */}
      <Select
        name="decorated"
        label="Decorated"
        options={options}
        value={selected}
        onChange={setSelected}
        prefix={<span>Icon</span>}
        postfix={<span>*</span>}
      />

      {/* Custom menu height */}
      <Select
        name="tall"
        label="Tall Menu"
        options={options}
        value={selected}
        onChange={setSelected}
        menuHeight={300}
      />
    </div>
  )
}
```

--------------------------------

### Sidebar Component Examples (React)

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

The Sidebar component provides a collapsible panel suitable for navigation or additional content. It supports different animation styles (width, overlap, shift), header bars, and can be styled with accent colors and size variants. It's often used in conjunction with main content areas.

```tsx
import { Sidebar, HeaderBar, List, Item, Button } from "@mielo-ui/mielo-react"
import { useState } from "react"

function SidebarExample() {
  const [isOpen, setIsOpen] = useState(true)

  return (
    <div style={{ display: "flex" }}>
      {/* Basic sidebar */}
      <Sidebar opened={isOpen}>
        <List>
          <Item title="Home" activatable active />
          <Item title="Profile" activatable />
          <Item title="Settings" activatable />
        </List>
      </Sidebar>

      {/* Sidebar with header bar */}
      <Sidebar
        opened={isOpen}
        headerbar={
          <HeaderBar
            header="Navigation"
            right={<Button label="x" transparent onClick={() => setIsOpen(false)} />}
          />
        }
      >
        <List>
          <Item title="Dashboard" />
          <Item title="Reports" />
        </List>
      </Sidebar>

      {/* Animation styles: width, overlap, shift */}
      <Sidebar opened={isOpen} animateStyle="width">
        <p>Width animation (default)</p>
      </Sidebar>
      <Sidebar opened={isOpen} animateStyle="overlap">
        <p>Overlaps main content</p>
      </Sidebar>
      <Sidebar opened={isOpen} animateStyle="shift">
        <p>Shifts main content</p>
      </Sidebar>

      {/* Accent colored sidebar */}
      <Sidebar opened={isOpen} accent="success">
        <p>Success themed sidebar</p>
      </Sidebar>

      {/* Size variants */}
      <Sidebar opened={isOpen} size="small">
        <p>Small sidebar</p>
      </Sidebar>

      {/* Main content */}
      <div style={{ flex: 1 }}>
        <Button
          label={isOpen ? "Close Sidebar" : "Open Sidebar"}
          onClick={() => setIsOpen(!isOpen)}
        />
        <p>Main content area</p>
      </div>
    </div>
  )
}
```

--------------------------------

### Mielo UI Core Types and Usage in React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Defines and demonstrates the core type definitions for Mielo UI components, including size, accent, and color options. These types ensure consistent styling across various components like Button, Entry, Label, Progress, and Checkbox. The example shows how to apply these types for semantic meaning and custom theming.

```typescript
// Size options for components
type CoreSize = "mini" | "tiny" | "small" | "large" | "big" | "huge" | "massive"

// Accent options for semantic coloring
type CoreAccent = boolean | "warning" | "error" | "success"

// Color palette options
type CoreColor =
  | "blue"
  | "green"
  | "yellow"
  | "orange"
  | "red"
  | "purple"
  | "brown"
  | "pink"
  | "deeppurple"
  | "indigo"
  | "lightgreen"
  | "deeporange"
  | "light"
  | "dark"

// Example usage across components
import { Button, Entry, Label, Progress, Checkbox } from "@mielo-ui/mielo-react"

function CoreTypesExample() {
  return (
    <>
      {/* Size applies to most components */}
      <Button size="small" label="Small" />
      <Entry size="large" label="Large Input" id="large" />
      <Label size="tiny">Tiny Label</Label>
      <Progress size="huge"><Progress.Bar progress={50} /></Progress>

      {/* Accent for semantic meaning */}
      <Button accent="success" label="Success" />
      <Button accent="warning" label="Warning" />
      <Button accent="error" label="Error" />
      <Button accent={true} label="Default Accent" />

      {/* Color for custom theming */}
      <Checkbox name="blue" color="blue" label="Blue" />
      <Label color="purple">Purple</Label>
      <Entry id="green" color="green" label="Green Input" />
    </>
  )
}

```

--------------------------------

### Import Mielo CSS and React Components

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates how to import the Mielo CSS framework and the Mielo React components into your main application file. Ensure the CSS is imported before components are used.

```typescript
// Import CSS in your main file
import '@mielo-ui/mielo/css/mielo.css'

// Import components
import * as Mie from "@mielo-ui/mielo-react"
```

--------------------------------

### Create and Style Dialog Boxes with Mielo UI React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates how to use the Dialog component from '@mielo-ui/mielo-react' to create standalone, modal-attached, and styled dialog boxes. It covers different accent colors, sizes, and action button configurations.

```tsx
import { Dialog, Button } from "@mielo-ui/mielo-react"
import { useState } from "react"

function DialogExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      {/* Standalone dialog (not in modal) */}
      <Dialog accent="success">
        <h3>Success Dialog</h3>
        <p>Your operation completed successfully.</p>
      </Dialog>

      {/* Dialog with actions */}
      <Dialog
        accent="warning"
        actions={
          <>
            <Button label="Cancel" transparent />
            <Button label="Confirm" accent="warning" />
          </>
        }
      >
        <h3>Warning</h3>
        <p>Are you sure you want to proceed?</p>
      </Dialog>

      {/* Dialog attached to modal */}
      <button onClick={() => setIsOpen(true)}>Open Modal Dialog</button>

      <Dialog
        attached="modal"
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        actions={
          <>
            <Button
              label="Close"
              transparent
              onClick={() => setIsOpen(false)}
            />
          </>
        }
      >
        <h3>Modal Dialog</h3>
        <p>This dialog appears in a modal overlay.</p>
      </Dialog>

      {/* Size variants */}
      <Dialog size="small">
        <p>Small dialog</p>
      </Dialog>
      <Dialog size="large">
        <p>Large dialog</p>
      </Dialog>

      {/* Color variants */}
      <Dialog color="blue">
        <p>Blue themed dialog</p>
      </Dialog>
    </div>
  )
}
```

--------------------------------

### Implement Promise-Based Confirmations with Mielo UI React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Illustrates the usage of the Confirm component from '@mielo-ui/mielo-react' for handling user confirmations via promises. It shows basic confirmation dialogs, custom actions, and three-way choices (confirm/reject/cancel).

```tsx
import { Confirm, ConfirmHandles, Button } from "@mielo-ui/mielo-react"
import { useRef } from "react"

function ConfirmExample() {
  const confirmRef = useRef<ConfirmHandles>(null)

  const handleDelete = async () => {
    const result = await confirmRef.current?.confirm()

    if (result?.action === "confirm") {
      console.log("User confirmed deletion")
      // Perform delete operation
    } else if (result?.action === "cancel") {
      console.log("User cancelled")
    } else if (result?.action === "reject") {
      console.log("User rejected")
    }
  }

  return (
    <div>
      <Button label="Delete Item" accent="error" onClick={handleDelete} />

      {/* Basic confirm dialog (default: confirm + cancel) */}
      <Confirm ref={confirmRef} accent="error">
        <p>Are you sure you want to delete this item?</p>
        <p>This action cannot be undone.</p>
      </Confirm>
    </div>
  )
}

function ConfirmWithCustomActions() {
  const confirmRef = useRef<ConfirmHandles>(null)

  const handleAction = async () => {
    const result = await confirmRef.current?.confirm()
    console.log("Selected action:", result?.action)
  }

  return (
    <div>
      <Button label="Show Options" onClick={handleAction} />

      {/* Confirm with custom actions */}
      <Confirm
        ref={confirmRef}
        header={{ title: "Unsaved Changes", description: "What do you want to do?" }}
        actions={{
          save: { name: "save", label: "Save Changes", accent: "success" },
          discard: { name: "discard", label: "Discard", accent: "error" },
          cancel: { name: "cancel", label: "Cancel" }
        }}
      >
        <p>You have unsaved changes in this document.</p>
      </Confirm>

      {/* Confirm with three-way choice (confirm/reject/cancel) */}
      <Confirm
        ref={confirmRef}
        accent="warning"
        actions={{
          confirm: { name: "confirm", label: "Accept", accent: true },
          reject: { name: "reject", label: "Reject", accent: "error" },
          cancel: { name: "cancel", label: "Cancel" }
        }}
      >
        <p>Do you accept the terms of service?</p>
      </Confirm>
    </div>
  )
}
```

--------------------------------

### Progress Component Usage in React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Illustrates the usage of the Mielo UI Progress component in React. It showcases basic progress bars, accent colors, size variants, various indeterminate animation styles, stacked progress bars, and transparent or custom-content bars.

```tsx
import { Progress, ProgressBar } from "@mielo-ui/mielo-react"

function ProgressExample() {
  return (
    <div>
      {/* Basic progress bar with percentage */}
      <Progress>
        <Progress.Bar progress={75} progressVisible />
      </Progress>

      {/* Accent colors */}
      <Progress accent="success">
        <Progress.Bar progress={100} />
      </Progress>
      <Progress accent="warning">
        <Progress.Bar progress={50} />
      </Progress>
      <Progress accent="error">
        <Progress.Bar progress={25} />
      </Progress>

      {/* Size variants */}
      <Progress size="small">
        <Progress.Bar progress={60} />
      </Progress>
      <Progress size="large">
        <Progress.Bar progress={60} />
      </Progress>

      {/* Indeterminate animations: pulsating, filling, sliding, swinging */}
      <Progress>
        <Progress.Bar indeterminate="pulsating" />
      </Progress>
      <Progress>
        <Progress.Bar indeterminate="filling" />
      </Progress>
      <Progress>
        <Progress.Bar indeterminate="sliding" />
      </Progress>
      <Progress>
        <Progress.Bar indeterminate="swinging" />
      </Progress>

      {/* Multiple progress bars (stacked) */}
      <Progress multiple>
        <Progress.Bar progress={30} color="blue" />
        <Progress.Bar progress={20} color="green" />
        <Progress.Bar progress={15} color="yellow" />
      </Progress>

      {/* Transparent progress bar */}
      <Progress>
        <Progress.Bar progress={50} transparent />
      </Progress>

      {/* Custom content in progress bar */}
      <Progress>
        <Progress.Bar progress={80}>
          <span>80% Complete</span>
        </Progress.Bar>
      </Progress>
    </div>
  )
}
```

--------------------------------

### Use Mielo React Button Component

Source: https://github.com/mielo-ui/mielo-react/blob/main/README.md

Demonstrates how to import and use a Mielo React Button component. It shows importing the Mie namespace and rendering a button with a label and accent color.

```typescript
import * as Mie from "@mielo-ui/mielo-react"

<Mie.Button label="Success" accent="success" />
```

--------------------------------

### Radio Component Usage in React

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

Demonstrates how to use the Mielo UI Radio component in a React application. It covers controlled mode with state management, accent colors, size variants, disabled states, and color options.

```tsx
import { Radio } from "@mielo-ui/mielo-react"
import { useState } from "react"

function RadioExample() {
  const [selected, setSelected] = useState("option1")

  return (
    <div>
      {/* Radio group */}
      <Radio
        id="option1"
        name="options"
        checked={selected === "option1"}
        onChange={() => setSelected("option1")}
      >
        Option 1
      </Radio>
      <Radio
        id="option2"
        name="options"
        checked={selected === "option2"}
        onChange={() => setSelected("option2")}
      >
        Option 2
      </Radio>
      <Radio
        id="option3"
        name="options"
        checked={selected === "option3"}
        onChange={() => setSelected("option3")}
      >
        Option 3
      </Radio>

      {/* Accent colors */}
      <Radio id="success-radio" name="accents" accent="success">
        Success
      </Radio>
      <Radio id="warning-radio" name="accents" accent="warning">
        Warning
      </Radio>
      <Radio id="error-radio" name="accents" accent="error">
        Error
      </Radio>

      {/* Size variants */}
      <Radio id="small-radio" name="sizes" size="small">Small</Radio>
      <Radio id="large-radio" name="sizes" size="large">Large</Radio>

      {/* Disabled state */}
      <Radio id="disabled-radio" name="disabled" disabled>
        Disabled Option
      </Radio>

      {/* Color variants */}
      <Radio id="blue-radio" name="colors" color="blue">Blue</Radio>
      <Radio id="purple-radio" name="colors" color="purple">Purple</Radio>
    </div>
  )
}
```

--------------------------------

### Import Mielo CSS

Source: https://github.com/mielo-ui/mielo-react/blob/main/README.md

Imports the main Mielo CSS file into your project. This ensures that all styles provided by the mielo.css framework are applied to your components.

```css
@import 'mielo/css/mielo.css'
```

--------------------------------

### Create and Style Lists with Mielo UI List Component (React)

Source: https://context7.com/mielo-ui/mielo-react/llms.txt

The List component from '@mielo-ui/mielo-react' creates a styled container for Item components. It's suitable for navigation menus, settings lists, and data displays. The component supports basic lists, navigation-style lists with descriptions and active states, lists with icons and side content, and a shorthand syntax using List.Item.

```tsx
import { List, Item } from "@mielo-ui/mielo-react"

function ListExample() {
  return (
    <div>
      {/* Basic list with items */}
      <List>
        <Item title="First Item" />
        <Item title="Second Item" />
        <Item title="Third Item" />
      </List>

      {/* Navigation list */}
      <List>
        <Item
          title="Dashboard"
          description="View statistics"
          activatable
          active
        />
        <Item
          title="Users"
          description="Manage users"
          activatable
        />
        <Item
          title="Settings"
          description="Configure app"
          activatable
        />
      </List>

      {/* List with icons and side content */}
      <List>
        <Item
          title="Notifications"
          icon={<span>B</span>}
          side={<span className="mie label accent">5</span>}
        />
        <Item
          title="Messages"
          icon={<span>M</span>}
          side={<span className="mie label">12</span>}
        />
      </List>

      {/* Using List.Item shorthand */}
      <List>
        <List.Item title="Shorthand Item 1" />
        <List.Item title="Shorthand Item 2" />
      </List>
    </div>
  )
}
```