### Basic Toaster Demo

Source: https://docs.medusajs.com/ui/components/toast/index.html.md

This example demonstrates the basic setup of the Toaster component and triggering an informational toast message with a description.

```tsx
import { Button, Toaster, toast } from "@medusajs/ui"

export default function ToasterDemo() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() =>
          toast.info("Info", {
            description: "The quick brown fox jumps over the lazy dog.",
          })
        }
      >
        Show
      </Button>
    </>
  )
}
```

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

### Complete Product Table with Pagination

Source: https://docs.medusajs.com/ui/components/data-table/index.html.md

This example demonstrates a full implementation of a product table with pagination enabled. It includes data setup, column definitions, state management for pagination, data slicing for the current page, and rendering the DataTable with its toolbar, table, and pagination components.

```tsx
import { DataTable, Heading, createDataTableColumnHelper, useDataTable, type DataTablePaginationState } from "@medusajs/ui"
import { useMemo, useState } from "react"

const products = [
  {
    id: "1",
    title: "Shirt",
    price: 10
  },
  {
    id: "2",
    title: "Pants",
    price: 20
  },
  {
    id: "3",
    title: "Hat",
    price: 15
  },
  {
    id: "4",
    title: "Socks",
    price: 5
  },
  {
    id: "5",
    title: "Shoes",
    price: 50
  },
  {
    id: "6",
    title: "Jacket",
    price: 100
  },
  {
    id: "7",
    title: "Scarf",
    price: 25
  },
  {
    id: "8",
    title: "Gloves",
    price: 12
  },
  {
    id: "9",
    title: "Belt",
    price: 18
  },
  {
    id: "10",
    title: "Sunglasses",
    price: 30
  },
  {
    id: "11",
    title: "Watch",
    price: 200
  },
  {
    id: "12",
    title: "Tie",
    price: 20
  },
  {
    id: "13",
    title: "Sweater",
    price: 40
  },
  {
    id: "14",
    title: "Jeans",
    price: 60
  },
  {
    id: "15",
    title: "Shorts",
    price: 25
  },
  {
    id: "16",
    title: "Blouse",
    price: 35
  },
  {
    id: "17",
    title: "Dress",
    price: 80
  }
]

const columnHelper = createDataTableColumnHelper<typeof products[0]>()

const columns = [
  columnHelper.accessor("title", {
    header: "Title",
    enableSorting: true,
  }),
  columnHelper.accessor("price", {
    header: "Price",
    enableSorting: true,
  }),
]

const PAGE_SIZE = 10;

export default function ProductTable () {
  const [pagination, setPagination] = useState<DataTablePaginationState>({
    pageSize: PAGE_SIZE,
    pageIndex: 0,
  })

  const shownProducts = useMemo(() => {
    return products.slice(
      pagination.pageIndex * pagination.pageSize,
      (pagination.pageIndex + 1) * pagination.pageSize
    )
  }, [pagination])

  const table = useDataTable({
    data: shownProducts,
    columns,
    rowCount: products.length,
    getRowId: (product) => product.id,
    pagination: {
      // Pass the pagination state and updater to the table instance
      state: pagination,
      onPaginationChange: setPagination,
    },
    isLoading: false,
  });

  return (
      <DataTable instance={table}>
        <DataTable.Toolbar>
          <Heading>Products</Heading>
        </DataTable.Toolbar>
				<DataTable.Table />
        {/** This component will render the pagination controls ** /}
        <DataTable.Pagination />
      </DataTable>
  );
};

```

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

### Input Component Examples

Source: https://docs.medusajs.com/ui/components/input/index.html.md

Provides various examples of the Input component in different states and configurations.

```APIDOC
## Input Component Examples

### Password Input

```tsx
import { Input } from "@medusajs/ui"

export default function InputPassword() {
  return (
    <div className="w-[250px]">
      <Input id="password" type="password" defaultValue="supersecret" />
    </div>
  )
}
```

### Search Input

```tsx
import { Input } from "@medusajs/ui"

export default function InputSearch() {
  return (
    <div className="w-[250px]">
      <Input placeholder="Search" id="search-input" type="search" />
    </div>
  )
}
```

### Disabled Input

```tsx
import { Input } from "@medusajs/ui"

export default function InputDisabled() {
  return (
    <div className="w-[250px]">
      <Input placeholder="Disabled" id="disabled-input" disabled />
    </div>
  )
}
```

### Small Size Input

```tsx
import { Input } from "@medusajs/ui"

export default function InputSmall() {
  return (
    <div className="w-[250px]">
      <Input placeholder="First name" id="first-name" size="small" />
    </div>
  )
}
```

### Controlled Input

```tsx
import { Input } from "@medusajs/ui"
import { useState } from "react"

export default function InputControlled() {
  const [value, setValue] = useState("")

  return (
    <div className="flex flex-col items-center gap-2">
      <Input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter name"
        id="controlled-input"
      />
      {value && <span>Hello, {value}!</span>}
    </div>
  )
}
```

### Error State Input

Leverage the native `aria-invalid` property to show an error state on your input.

```tsx
import { Input } from "@medusajs/ui"

export default function InputError() {
  return (
    <div className="w-[250px]">
      <Input
        placeholder="Sales Channel Name"
        id="sales-channel-name"
        aria-invalid={true}
      />
    </div>
  )
}
```
```

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

### Calendar Component Examples

Source: https://docs.medusajs.com/ui/components/calendar/index.html.md

Examples demonstrating different ways to use the Calendar component.

```APIDOC
## Calendar Component Examples

### Controlled Calendar

#### Description
Example of a controlled Calendar component where the date state is managed externally.

#### Usage
```tsx
import { Calendar } from "@medusajs/ui"
import { useState } from "react"

export default function CalendarControlled() {
  const [date, setDate] = useState<Date | null>(null)
  return (
    <div className="flex flex-col gap-2">
      <Calendar value={date} onChange={setDate} />
      <span className="txt-small text-ui-fg-muted">
        Selected: {date?.toDateString() ?? "None"}
      </span>
    </div>
  )
}
```

### Calendar with Min/Max Dates

#### Description
Example demonstrating how to set minimum and maximum selectable dates for the Calendar.

#### Usage
```tsx
import { Calendar } from "@medusajs/ui"

export default function CalendarMinMax() {
  const min = new Date()
  const max = new Date()
  max.setDate(max.getDate() + 10)
  return (
    <div className="flex flex-col gap-2">
      <span className="txt-small text-ui-fg-muted">
        Selectable dates: {min.toDateString()} to {max.toDateString()}
      </span>
      <Calendar minValue={min} maxValue={max} />
    </div>
  )
}
```

### Calendar with Unavailable Dates

#### Description
Example showing how to disable specific dates using the `isDateUnavailable` prop.

#### Usage
```tsx
import { Calendar } from "@medusajs/ui"

function isUnavailable(date: Date) {
  // Disable all Sundays
  return date.getDay() === 0
}

export default function CalendarUnavailable() {
  return (
    <div className="flex flex-col gap-2">
      <span className="txt-small text-ui-fg-muted">
        All Sundays are unavailable for selection.
      </span>
      <Calendar isDateUnavailable={isUnavailable} />
    </div>
  )
}
```
```

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

### Calendar Component Examples

Source: https://docs.medusajs.com/ui/components/calendar

Examples demonstrating different ways to use the Calendar component.

```APIDOC
## Examples

### Controlled Calendar

```tsx
import { Calendar } from "@medusajs/ui"
import { useState } from "react"

export default function CalendarControlled() {
  const [date, setDate] = useState<Date | null>(null)
  return (
    <div className="flex flex-col gap-2">
      <Calendar value={date} onChange={setDate} />
      <span className="txt-small text-ui-fg-muted">
        Selected: {date?.toDateString() ?? "None"}
      </span>
    </div>
  )
}
```

### Calendar with Min/Max Dates

```tsx
import { Calendar } from "@medusajs/ui"

export default function CalendarMinMax() {
  const min = new Date()
  const max = new Date()
  max.setDate(max.getDate() + 10)
  return (
    <div className="flex flex-col gap-2">
      <span className="txt-small text-ui-fg-muted">
        Selectable dates: {min.toDateString()} to {max.toDateString()}
      </span>
      <Calendar minValue={min} maxValue={max} />
    </div>
  )
}
```

### Calendar with Unavailable Dates

```tsx
import { Calendar } from "@medusajs/ui"

function isUnavailable(date: Date) {
  // Disable all Sundays
  return date.getDay() === 0
}

export default function CalendarUnavailable() {
  return (
    <div className="flex flex-col gap-2">
      <span className="txt-small text-ui-fg-muted">
        All Sundays are unavailable for selection.
      </span>
      <Calendar isDateUnavailable={isUnavailable} />
    </div>
  )
}
```
```

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

### usePrompt Hook Usage Example

Source: https://docs.medusajs.com/ui/hooks/use-prompt/index.html.md

This example shows how to call the dialog function returned by usePrompt to get user confirmation. The confirmed variable will be true if the user confirms the action.

```tsx
const dialog = usePrompt()
const actionFunction = async () => {
  const confirmed = await dialog({
    title: "Are you sure?",
    description: "Please confirm this action",
  })
}
```

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

### Basic usePrompt Hook Implementation

Source: https://docs.medusajs.com/ui/hooks/use-prompt/index.html.md

This example demonstrates the basic usage of the usePrompt hook to get user confirmation before performing an action. The hook returns a dialog function that resolves to a boolean indicating confirmation.

```tsx
import { Button, usePrompt } from "@medusajs/ui"

export default function usePromptDemo() {
  const dialog = usePrompt()

  const deleteEntity = async () => {
    const userHasConfirmed = await dialog({
      title: "Please confirm",
      description: "Are you sure you want to do this?",
    })
    if (userHasConfirmed) {
      // Perform Delete
    }
  }

  return <Button onClick={async () => deleteEntity()}>Delete Entity</Button>
}
```

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

### Button Sizes Example

Source: https://docs.medusajs.com/ui/components/button/index.html.md

Demonstrates how to apply different sizes to the Button component.

```APIDOC
## Button Sizes Example

### Description
This example shows how to control the size of the Button component.

### Code Example
```tsx
import { Button } from "@medusajs/ui"

export default function ButtonAllSizes() {
  return (
    <div className="flex gap-4 items-center">
      <Button size="small">Small</Button>
      <Button size="base">Base</Button>
      <Button size="large">Large</Button>
      <Button size="xlarge">XLarge</Button>
    </div>
  )
}
```
```

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

### Alert Component Examples

Source: https://docs.medusajs.com/ui/components/alert/index.html.md

Examples demonstrating various use cases of the Alert component.

```APIDOC
## Alert Component Examples

### Basic Usage

```tsx
import { Alert } from "@medusajs/ui"

<Alert>Here's a message</Alert>
```

### Success Alert

```tsx
import { Alert } from "@medusajs/ui"

<Alert variant="success">Data updated successfully!</Alert>
```

### Warning Alert

```tsx
import { Alert } from "@medusajs/ui"

<Alert variant="warning">Be careful!</Alert>
```

### Error Alert

```tsx
import { Alert } from "@medusajs/ui"

<Alert variant="error">An error occured while updating data.</Alert>
```

### Dismissible Alert

```tsx
import { Alert } from "@medusajs/ui"

<Alert dismissible={true}>You are viewing Medusa docs.</Alert>
```
```

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

### Tabs Component Usage

Source: https://docs.medusajs.com/ui/components/tabs/index.html.md

Demonstrates how to use the Tabs component to create tabbed content sections. This example shows basic setup with multiple tabs and their corresponding content.

```APIDOC
## POST /ui/agents/feedback

### Description
Submit feedback for documentation issues.

### Method
POST

### Endpoint
https://docs.medusajs.com/ui/agents/feedback

### Request Body
- **agent** (string) - Required - Name of the agent.
- **path** (string) - Required - The path of the page where the issue is observed.
- **feedback** (string) - Required - Description of the issue.

### Request Example
```json
{
  "agent": "Name of the agent",
  "path": "/optimize/feedback",
  "feedback": "Description of the issue"
}
```

## Tabs Component

### Description
A component that displays tabbed content.

### Usage
Import the Tabs component and its sub-components (List, Trigger, Content) to create tabbed interfaces.

### Code Example
```tsx
import { Tabs, Text } from "@medusajs/ui"

export default function TabsDemo() {
  return (
    <div className="w-full px-4 flex flex-col gap-4">
      <Tabs defaultValue="general">
        <Tabs.List>
          <Tabs.Trigger value="general">General</Tabs.Trigger>
          <Tabs.Trigger value="shipping">Shipping</Tabs.Trigger>
          <Tabs.Trigger value="payment">Payment</Tabs.Trigger>
        </Tabs.List>
        <div className="mt-2">
          <Tabs.Content value="general">
            <Text size="small">
              At ACME, we&apos;re dedicated to providing you with an exceptional
              shopping experience. Our wide selection of products caters to your
              every need, from fashion to electronics and beyond. We take pride
              in our commitment to quality, customer satisfaction, and timely
              delivery. Our friendly customer support team is here to assist you
              with any inquiries or concerns you may have. Thank you for
              choosing ACME as your trusted online shopping destination.
            </Text>
          </Tabs.Content>
          <Tabs.Content value="shipping">
            <Text size="small">
              Shipping is a crucial part of our service, designed to ensure your
              products reach you quickly and securely. Our dedicated team works
              tirelessly to process orders, carefully package items, and
              coordinate with reliable carriers to deliver your purchases to
              your doorstep. We take pride in our efficient shipping process,
              guaranteeing your satisfaction with every delivery.
            </Text>
          </Tabs.Content>
          <Tabs.Content value="payment">
            <Text size="small">
              Our payment process is designed to make your shopping experience
              smooth and secure. We offer a variety of payment options to
              accommodate your preferences, from credit and debit cards to
              online payment gateways. Rest assured that your financial
              information is protected through advanced encryption methods.
              Shopping with us means you can shop with confidence, knowing your
              payments are safe and hassle-free.
            </Text>
          </Tabs.Content>
        </div>
      </Tabs>
      <Text size="xsmall" className="text-ui-fg-muted">
        Use the left and right arrow keys to navigate between the tabs. You must
        focus on a tab first.
      </Text>
    </div>
  )
}
```

### API Reference: Tabs Props

This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitives.

- **activationMode** (union) - Whether a tab is activated automatically or manually.
- **defaultValue** (string) - The value of the tab to select by default, if uncontrolled.
- **dir** (Direction) - The direction of navigation between toolbar items.
- **onValueChange** (signature) - A function called when a new tab is selected.
- **orientation** (union) - The orientation the tabs are layed out. Mainly so arrow navigation is done accordingly (left & right vs. up & down).
- **value** (string) - The value for the selected tab, if controlled.
```

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

### Currency Input Examples

Source: https://docs.medusajs.com/ui/components/currency-input

Provides various examples of the CurrencyInput component, including controlled input, disabled state, error state, and different sizes.

```APIDOC
## Examples

### Controlled Currency Input

```tsx
import { useState } from "react"
import { CurrencyInput } from "@medusajs/ui"

export default function CurrencyInputControlled() {
  const [value, setValue] = useState<string | undefined>("")
  const formatValue = (val: string | undefined) => {
    if (!val) {
      return ""
    }
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(parseFloat(val))
  }
  return (
    <div className="max-w-[250px]">
      <CurrencyInput
        symbol="$"
        code="usd"
        value={value}
        onValueChange={setValue}
        aria-label="Amount"
      />
      <div className="mt-2 text-xs text-ui-fg-muted">
        Value: {formatValue(value)}
      </div>
    </div>
  )
}
```

### Disabled Currency Input

```tsx
import { CurrencyInput } from "@medusajs/ui"

export default function CurrencyInputDisabled() {
  return (
    <div className="max-w-[250px]">
      <CurrencyInput
        symbol="€"
        code="eur"
        disabled
        value={"100"}
        aria-label="Amount"
      />
    </div>
  )
}
```

### Currency Input with Error State

```tsx
import { useState } from "react"
import { CurrencyInput } from "@medusajs/ui"

export default function CurrencyInputError() {
  const [value, setValue] = useState<string | undefined>("0")
  const [touched, setTouched] = useState(false)
  const isError = touched && (!value || parseFloat(value) <= 0)
  return (
    <div className="max-w-[250px]">
      <CurrencyInput
        symbol="$"
        code="usd"
        value={value}
        onValueChange={(val) => setValue(val)}
        aria-label="Amount"
        aria-invalid={isError}
        onBlur={() => setTouched(true)}
        min={0.01}
      />
      {isError && (
        <div className="mt-2 text-xs text-ui-fg-error">
          Amount must be greater than 0
        </div>
      )}
    </div>
  )
}
```

### Currency Input Sizes

#### Base

```tsx
import { CurrencyInput } from "@medusajs/ui"

export default function CurrencyInputBase() {
  return (
    <div className="max-w-[250px]">
      <CurrencyInput size="base" symbol="$" code="usd" />
    </div>
  )
}
```

#### Small

```tsx
import { CurrencyInput } from "@medusajs/ui"

export default function CurrencyInputSmall() {
  return (
    <div className="max-w-[250px]">
      <CurrencyInput size="small" symbol="$" code="usd" />
    </div>
  )
}
```
```

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

### Small Select Example

Source: https://docs.medusajs.com/ui/components/select/index.html.md

Example of using the Select component with the 'small' size prop.

```APIDOC
## Small Select

### Description
Example of a small-sized Select component.

### Code

```tsx
import { Select } from "@medusajs/ui"

export default function SelectSmall() {
  return (
    <div className="w-[256px]">
      <Select size="small">
        <Select.Trigger>
          <Select.Value placeholder="Select a currency" />
        </Select.Trigger>
        <Select.Content>
          {currencies.map((item) => (
            <Select.Item key={item.value} value={item.value}>
              {item.label}
            </Select.Item>
          ))}
        </Select.Content>
      </Select>
    </div>
  )
}

const currencies = [
  {
    value: "eur",
    label: "EUR",
  },
  {
    value: "usd",
    label: "USD",
  },
  {
    value: "dkk",
    label: "DKK",
  },
]
```
```

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

### Button Loading State Example

Source: https://docs.medusajs.com/ui/components/button/index.html.md

Shows how to display a loading spinner within a Button.

```APIDOC
## Button Loading State Example

### Description
This example demonstrates how to enable the loading state for a Button.

### Code Example
```tsx
import { Button } from "@medusajs/ui"

export default function ButtonLoading() {
  return <Button isLoading={true}>Button</Button>
}
```
```

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

### Prompt with Verification Text Example

Source: https://docs.medusajs.com/ui/hooks/use-prompt/index.html.md

Example of using the usePrompt hook with the verificationText prop for a more secure confirmation.

```APIDOC
## Prompt with Verification Text

### Description
This example demonstrates how to use the `usePrompt` hook with the `verificationText` prop to require the user to type a specific text to confirm an action.

### Usage
```tsx
import { Button, usePrompt } from "@medusajs/ui"

export default function usePromptVerification() {
  const entityName = "foo-bar-baz"

  const dialog = usePrompt()

  const deleteEntity = async () => {
    const userHasConfirmed = await dialog({
      title: "Please confirm",
      description: "Are you sure you want to delete this entity?",
      verificationText: entityName,
    })
    if (userHasConfirmed) {
      // Perform Delete
    }
  }

  return (
    <Button onClick={async () => deleteEntity()}>Delete {entityName}</Button>
  )
}
```
```

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

### Icon Button Loading State Example

Source: https://docs.medusajs.com/ui/components/icon-button

Demonstrates the loading state of the Icon Button component.

```APIDOC
### Icon Button Loading State

```tsx
import { PlusMini } from "@medusajs/icons"
import { IconButton } from "@medusajs/ui"

export default function IconButtonLoading() {
  return (
    <IconButton isLoading className="relative">
      <PlusMini />
    </IconButton>
  )
}
```
```

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

### Icon Button Sizes Example

Source: https://docs.medusajs.com/ui/components/icon-button

Demonstrates different sizes of the Icon Button component.

```APIDOC
### Icon Button Sizes

```tsx
import { IconButton } from "@medusajs/ui"
import { PlusMini } from "@medusajs/icons"

export default function IconButtonAllSizes() {
  return (
    <div className="flex gap-2 items-center">
      <IconButton size="2xsmall">
        <PlusMini />
      </IconButton>
      <IconButton size="xsmall">
        <PlusMini />
      </IconButton>
      <IconButton size="small">
        <PlusMini />
      </IconButton>
      <IconButton size="base">
        <PlusMini />
      </IconButton>
      <IconButton size="large">
        <PlusMini />
      </IconButton>
      <IconButton size="xlarge">
        <PlusMini />
      </IconButton>
    </div>
  )
}
```
```

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

### Table with Pagination Example

Source: https://docs.medusajs.com/ui/components/table

This example demonstrates how to use the Table and Table.Pagination components to display paginated data. It includes setting up fake data, managing pagination state with useState and useMemo, and rendering the table rows and pagination controls.

```tsx
import { Table } from "@medusajs/ui"
import { useMemo, useState } from "react"

type Order = {
  id: string
  displayId: number
  customer: string
  email: string
  amount: number
  currency: string
}

export default function TableDemo() {
  const fakeData: Order[] = useMemo(
    () => [
      {
        id: "order_6782",
        displayId: 86078,
        customer: "Jill Miller",
        email: "32690@gmail.com",
        amount: 493,
        currency: "EUR",
      },
      {
        id: "order_46487",
        displayId: 42845,
        customer: "Sarah Garcia",
        email: "86379@gmail.com",
        amount: 113,
        currency: "JPY",
      },
      {
        id: "order_8169",
        displayId: 39129,
        customer: "Josef Smith",
        email: "89383@gmail.com",
        amount: 43,
        currency: "USD",
      },
      {
        id: "order_67883",
        displayId: 5548,
        customer: "Elvis Jones",
        email: "52860@gmail.com",
        amount: 840,
        currency: "GBP",
      },
      {
        id: "order_61121",
        displayId: 87668,
        customer: "Charles Rodriguez",
        email: "45675@gmail.com",
        amount: 304,
        currency: "GBP",
      },
    ],
    []
  )
  const [currentPage, setCurrentPage] = useState(0)
  const pageSize = 3
  const pageCount = Math.ceil(fakeData.length / pageSize)
  const canNextPage = useMemo(
    () => currentPage < pageCount - 1,
    [currentPage, pageCount]
  )
  const canPreviousPage = useMemo(() => currentPage - 1 >= 0, [currentPage])

  const nextPage = () => {
    if (canNextPage) {
      setCurrentPage(currentPage + 1)
    }
  }

  const previousPage = () => {
    if (canPreviousPage) {
      setCurrentPage(currentPage - 1)
    }
  }

  const currentOrders = useMemo(() => {
    const offset = currentPage * pageSize
    const limit = Math.min(offset + pageSize, fakeData.length)

    return fakeData.slice(offset, limit)
  }, [currentPage, pageSize, fakeData])

  return (
    <div className="flex gap-1 flex-col">
      <Table>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>#</Table.HeaderCell>
            <Table.HeaderCell>Customer</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
            <Table.HeaderCell className="text-right">Amount</Table.HeaderCell>
            <Table.HeaderCell></Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {currentOrders.map((order) => {
            return (
              <Table.Row
                key={order.id}
                className="[&_td:last-child]:w-[1%] [&_td:last-child]:whitespace-nowrap"
              >
                <Table.Cell>{order.displayId}</Table.Cell>
                <Table.Cell>{order.customer}</Table.Cell>
                <Table.Cell>{order.email}</Table.Cell>
                <Table.Cell className="text-right">
                  {new Intl.NumberFormat("en-US", {
                    style: "currency",
                    currency: order.currency,
                  }).format(order.amount)}
                </Table.Cell>
                <Table.Cell className="text-ui-fg-muted">
                  {order.currency}
                </Table.Cell>
              </Table.Row>
            )
          })}
        </Table.Body>
      </Table>
      <Table.Pagination
        count={fakeData.length}
        pageSize={pageSize}
        pageIndex={currentPage}
        pageCount={fakeData.length}
        canPreviousPage={canPreviousPage}
        canNextPage={canNextPage}
        previousPage={previousPage}
        nextPage={nextPage}
      />
    </div>
  )
}
```

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

### Button Sizes Example

Source: https://docs.medusajs.com/ui/components/button

Demonstrates how to use different size options for the Button component.

```tsx
import { Button } from "@medusajs/ui"

export default function ButtonAllSizes() {
  return (
    <div className="flex gap-4 items-center">
      <Button size="small">Small</Button>
      <Button size="base">Base</Button>
      <Button size="large">Large</Button>
      <Button size="xlarge">XLarge</Button>
    </div>
  )
}
```

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

### Currency Input - Error State Example

Source: https://docs.medusajs.com/ui/components/currency-input/index.html.md

Example demonstrating how to implement an error state for the CurrencyInput component.

```APIDOC
### Currency Input with Error State

```tsx
import { useState } from "react"
import { CurrencyInput } from "@medusajs/ui"

export default function CurrencyInputError() {
  const [value, setValue] = useState<string | undefined>("0")
  const [touched, setTouched] = useState(false)
  const isError = touched && (!value || parseFloat(value) <= 0)
  return (
    <div className="max-w-[250px]">
      <CurrencyInput
        symbol="$"
        code="usd"
        value={value}
        onValueChange={(val) => setValue(val)}
        aria-label="Amount"
        aria-invalid={isError}
        onBlur={() => setTouched(true)}
        min={0.01}
      />
      {isError && (
        <div className="mt-2 text-xs text-ui-fg-error">
          Amount must be greater than 0
        </div>
      )}
    </div>
  )
}
```
```

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

### Tooltip Examples

Source: https://docs.medusajs.com/ui/components/tooltip

Illustrates how to change the tooltip's side and set its maximum width.

```APIDOC
## Examples

### Changing Tooltip Side

This example demonstrates how to position the tooltip on different sides (top, bottom, left, right) of the trigger element.

### Set Tooltip Max Width

This example shows how to control the maximum width of the tooltip content using the `maxWidth` prop.
```

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

### Avatar Sizes Example

Source: https://docs.medusajs.com/ui/components/avatar/index.html.md

Illustrates how to use the 'size' prop to adjust the avatar's dimensions.

```APIDOC
## Avatar Sizes Example

### Description
Demonstrates how to use the `size` prop to control the avatar's dimensions.

### Method
N/A (Component Example)

### Endpoint
N/A (Component Example)

### Parameters
N/A

### Request Example
```tsx
import { Avatar } from "@medusajs/ui"

export default function AvatarSizes() {
  return (
    <div className="flex gap-4 items-center">
      <Avatar
        src="https://avatars.githubusercontent.com/u/10656202?v=4"
        fallback="M"
        size="2xsmall"
      />
      <Avatar
        src="https://avatars.githubusercontent.com/u/10656202?v=4"
        fallback="M"
        size="xsmall"
      />
      <Avatar
        src="https://avatars.githubusercontent.com/u/10656202?v=4"
        fallback="M"
        size="small"
      />
      <Avatar
        src="https://avatars.githubusercontent.com/u/10656202?v=4"
        fallback="M"
        size="base"
      />
      <Avatar
        src="https://avatars.githubusercontent.com/u/10656202?v=4"
        fallback="M"
        size="large"
      />
      <Avatar
        src="https://avatars.githubusercontent.com/u/10656202?v=4"
        fallback="M"
        size="xlarge"
      />
    </div>
  )
}
```

### Response
N/A
```

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

### Command Component for Installation Command

Source: https://docs.medusajs.com/ui/components/command/index.html.md

Displays a command for installing a package using the Command component.

```tsx
<Command>
  <code>yarn add @medusajs/ui</code>
</Command>
```

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

### DataTable Component Usage Example

Source: https://docs.medusajs.com/ui/components/data-table/index.html.md

This example demonstrates how to use the DataTable component with sample product data. It includes column definitions and the creation of a DataTable instance.

```tsx
import { createDataTableColumnHelper, useDataTable, DataTable, Heading } from "@medusajs/ui"

const products = [
  {
    id: "1",
    title: "Shirt",
    price: 10
  },
  {
    id: "2",
    title: "Pants",
    price: 20
  }
]

const columnHelper = createDataTableColumnHelper<typeof products[0]>()

const columns = [
  columnHelper.accessor("title", {
    header: "Title",
    enableSorting: true,
  }),
  columnHelper.accessor("price", {
    header: "Price",
    enableSorting: true,
  }),
]

export default function ProductTable () {
  const table = useDataTable({
    columns,
    data: products,
    getRowId: (product) => product.id,
    rowCount: products.length,
    isLoading: false,
  })
  
  return (
    <DataTable instance={table}>
	    <DataTable.Toolbar className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center">
	      <Heading>Products</Heading>
      </DataTable.Toolbar>
      <DataTable.Table />
    </DataTable>
  )
}
```

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

### Button as Link Example

Source: https://docs.medusajs.com/ui/components/button/index.html.md

Demonstrates using the Button component to render an anchor tag.

```APIDOC
## Button as Link Example

### Description
This example shows how to use the `asChild` prop to render the Button as a link.

### Code Example
```tsx
import { Button } from "@medusajs/ui"

export default function ButtonAsLink() {
  return (
    <Button asChild>
      <a href="https://medusajs.com" target="_blank" rel="noopener noreferrer">
        Open Medusa Website
      </a>
    </Button>
  )
}
```
```

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

### Button with Icon Example

Source: https://docs.medusajs.com/ui/components/button/index.html.md

Illustrates how to include an icon within a Button.

```APIDOC
## Button with Icon Example

### Description
This example shows how to integrate an icon alongside the button text.

### Code Example
```tsx
import { PlusMini } from "@medusajs/icons"
import { Button } from "@medusajs/ui"

export default function ButtonWithIcon() {
  return (
    <Button>
      Button <PlusMini />
    </Button>
  )
}
```
```

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

### Text Component Examples

Source: https://docs.medusajs.com/ui/components/text

Illustrates various ways to use the Text component with different styling options.

```APIDOC
## Text Component Examples

### Text Sizes

```tsx
import { Text } from "@medusajs/ui"

export default function TextSizes() {
  return (
    <div className="flex flex-col gap-y-2">
      <Text size="base">Base size</Text>
      <Text size="large">Large size</Text>
      <Text size="xlarge">XLarge size</Text>
    </div>
  )
}
```

### Text Weights

```tsx
import { Text } from "@medusajs/ui"

export default function TextWeights() {
  return (
    <div className="flex flex-col gap-y-2">
      <Text weight="regular">Regular weight</Text>
      <Text weight="plus">Plus weight</Text>
    </div>
  )
}
```

### Text Fonts

```tsx
import { Text } from "@medusajs/ui"

export default function TextFonts() {
  return (
    <div className="flex flex-col gap-y-2">
      <Text family="sans">Sans font</Text>
      <Text family="mono">Mono font</Text>
    </div>
  )
}
```

### Text Leading

```tsx
import { Text } from "@medusajs/ui"

export default function TextLeading() {
  return (
    <div className="flex flex-col gap-y-2">
      <Text leading="normal">Normal leading</Text>
      <Text leading="compact">Compact leading</Text>
    </div>
  )
}
```
```

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

### Button Variants Example

Source: https://docs.medusajs.com/ui/components/button/index.html.md

Illustrates how to use different variants of the Button component.

```APIDOC
## Button Variants Example

### Description
This example showcases the different visual styles available for the Button component.

### Code Example
```tsx
import { Button } from "@medusajs/ui"

export default function ButtonAllVariants() {
  return (
    <div className="flex gap-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="transparent">Transparent</Button>
      <Button variant="danger">Danger</Button>
    </div>
  )
}
```
```

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

### Container in a Layout Example

Source: https://docs.medusajs.com/ui/components/container

Demonstrates how to use multiple Container components within a layout structure, creating distinct sections. This example includes a sidebar and main content area.

```tsx
import { Container, Heading } from "@medusajs/ui"

export default function ContainerLayout() {
  return (
    <div className="flex h-full w-full">
      <div className="border-ui-border-base w-full max-w-[216px] border-r p-4">
        <Heading level="h3">Menubar</Heading>
      </div>
      <div className="flex w-full flex-col gap-y-2 px-8 pb-8 pt-6">
        <Container>
          <Heading>Section 1</Heading>
        </Container>
        <Container>
          <Heading>Section 2</Heading>
        </Container>
        <Container>
          <Heading>Section 3</Heading>
        </Container>
      </div>
    </div>
  )
}
```

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

### Basic Table Structure

Source: https://docs.medusajs.com/ui/components/table

A minimal example demonstrating the basic structure of the Table component.

```APIDOC
## Basic Table Structure

This example illustrates the fundamental structure of the `Table` component.

### Code Example

```tsx
import { Table } from "@medusajs/ui"

<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>#</Table.HeaderCell>
      <Table.HeaderCell>Customer</Table.HeaderCell>
      <Table.HeaderCell>Email</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>1</Table.Cell>
      <Table.Cell>Emil Larsson</Table.Cell>
      <Table.Cell>emil2738@gmail.com</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
```
```

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

### Icon Button Variants Example

Source: https://docs.medusajs.com/ui/components/icon-button

Demonstrates different variants of the Icon Button component.

```APIDOC
### Icon Button Variants

```tsx
import { IconButton } from "@medusajs/ui"
import { PlusMini } from "@medusajs/icons"

export default function IconButtonAllVariants() {
  return (
    <div className="flex gap-2">
      <IconButton variant="primary">
        <PlusMini />
      </IconButton>
      <IconButton variant="transparent">
        <PlusMini />
      </IconButton>
    </div>
  )
}
```
```

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

### Button with Icon Example

Source: https://docs.medusajs.com/ui/components/button

Demonstrates how to include an icon alongside the button text.

```tsx
import { PlusMini } from "@medusajs/icons"
import { Button } from "@medusajs/ui"

export default function ButtonWithIcon() {
  return (
    <Button>
      Button <PlusMini />
    </Button>
  )
}
```

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

### Small Select Component Example

Source: https://docs.medusajs.com/ui/components/select/index.html.md

Renders a Select component with a 'small' size variant. This example uses the same `currencies` data structure as the basic example.

```tsx
import { Select } from "@medusajs/ui"

export default function SelectSmall() {
  return (
    <div className="w-[256px]">
      <Select size="small">
        <Select.Trigger>
          <Select.Value placeholder="Select a currency" />
        </Select.Trigger>
        <Select.Content>
          {currencies.map((item) => (
            <Select.Item key={item.value} value={item.value}>
              {item.label}
            </Select.Item>
          ))}
        </Select.Content>
      </Select>
    </div>
  )
}

const currencies = [
  {
    value: "eur",
    label: "EUR",
  },
  {
    value: "usd",
    label: "USD",
  },
  {
    value: "dkk",
    label: "DKK",
  },
]
```

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

### Button Examples

Source: https://docs.medusajs.com/ui/components/button

Illustrates various ways to use the Button component, including different variants, sizes, loading states, and with icons.

```APIDOC
## Button Variants

### Description
Examples of different button variants.

### Request Example
```tsx
import { Button } from "@medusajs/ui"

export default function ButtonAllVariants() {
  return (
    <div className="flex gap-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="transparent">Transparent</Button>
      <Button variant="danger">Danger</Button>
    </div>
  )
}
```

## Button Sizes

### Description
Examples of different button sizes.

### Request Example
```tsx
import { Button } from "@medusajs/ui"

export default function ButtonAllSizes() {
  return (
    <div className="flex gap-4 items-center">
      <Button size="small">Small</Button>
      <Button size="base">Base</Button>
      <Button size="large">Large</Button>
      <Button size="xlarge">XLarge</Button>
    </div>
  )
}
```

## Button Loading State

### Description
Example of a button in a loading state.

### Request Example
```tsx
import { Button } from "@medusajs/ui"

export default function ButtonLoading() {
  return <Button isLoading={true}>Button</Button>
}
```

## Button with Icon

### Description
Example of a button with an embedded icon.

### Request Example
```tsx
import { PlusMini } from "@medusajs/icons"
import { Button } from "@medusajs/ui"

export default function ButtonWithIcon() {
  return (
    <Button>
      Button <PlusMini />
    </Button>
  )
}
```

## Button as Link

### Description
Example of using the Button component to render an anchor tag.

### Request Example
```tsx
import { Button } from "@medusajs/ui"

export default function ButtonAsLink() {
  return (
    <Button asChild>
      <a href="https://medusajs.com" target="_blank" rel="noopener noreferrer">
        Open Medusa Website
      </a>
    </Button>
  )
}
```
```

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

### Disabled Textarea Example

Source: https://docs.medusajs.com/ui/components/textarea/index.html.md

An example of a disabled Textarea component.

```APIDOC
## Disabled Textarea

### Description
This example shows how to render a Textarea component in a disabled state.

### Method
N/A (Component Example)

### Endpoint
N/A (Component Example)

### Request Body
N/A (Component Example)

### Request Example
```tsx
import { Textarea } from "@medusajs/ui"

export default function TextareaDisabled() {
  return (
    <Textarea
      disabled
      placeholder="Disabled textarea"
      aria-label="Disabled textarea"
    />
  )
}
```

### Response
N/A (Component Example)
```

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

### Disabled Textarea Example

Source: https://docs.medusajs.com/ui/components/textarea

Example of a disabled Textarea component.

```APIDOC
## Disabled Textarea Example

### Description
This example demonstrates how to render a disabled Textarea component.

### Method
N/A (Component Example)

### Endpoint
N/A (Component Example)

### Request Body
N/A (Component Example)

### Request Example
```tsx
import { Textarea } from "@medusajs/ui"

export default function TextareaDisabled() {
  return (
    <Textarea
      disabled
      placeholder="Disabled textarea"
      aria-label="Disabled textarea"
    />
  )
}
```

### Response
N/A (Component Example)
```

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

### Currency Input - Disabled Example

Source: https://docs.medusajs.com/ui/components/currency-input/index.html.md

Example of a disabled CurrencyInput component.

```APIDOC
### Disabled Currency Input

```tsx
import { CurrencyInput } from "@medusajs/ui"

export default function CurrencyInputDisabled() {
  return (
    <div className="max-w-[250px]">
      <CurrencyInput
        symbol="€"
        code="eur"
        disabled
        value={"100"}
        aria-label="Amount"
      />
    </div>
  )
}
```
```

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

### Controlled Textarea Example

Source: https://docs.medusajs.com/ui/components/textarea/index.html.md

An example of a controlled Textarea component where the value is managed by state.

```APIDOC
## Controlled Textarea

### Description
This example demonstrates how to manage the Textarea's value using React's `useState` hook.

### Method
N/A (Component Example)

### Endpoint
N/A (Component Example)

### Request Body
N/A (Component Example)

### Request Example
```tsx
import { useState } from "react"
import { Textarea } from "@medusajs/ui"

export default function TextareaControlled() {
  const [value, setValue] = useState("")
  return (
    <div className="flex flex-col gap-y-2">
      <Textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Write your feedback..."
        aria-label="Feedback"
      />
      <div className="text-ui-fg-muted txt-compact-small">
        {value.length} characters
      </div>
    </div>
  )
}
```

### Response
N/A (Component Example)
```

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

### Display Command Bar with Selected Items

Source: https://docs.medusajs.com/ui/components/command-bar/index.html.md

This example demonstrates how to conditionally display a Command Bar when items are selected. It includes checkboxes for item selection and shows how to manage the `open` state of the Command Bar.

```tsx
import { Checkbox, CommandBar, Label, Text } from "@medusajs/ui"
import * as React from "react"

export default function CommandBarDemo() {
  const [selected, setSelected] = React.useState<boolean>(false)

  return (
    <div className="flex justify-center gap-y-2 flex-col">
      <div className="flex items-center gap-x-2">
        <Checkbox
          checked={selected}
          onCheckedChange={(checked) =>
            setSelected(checked === true ? true : false)
          }
        />
        <Label>Item One</Label>
      </div>
      <div><Text size="small" className="text-ui-fg-muted">Check the box to view the command bar</Text></div>
      <CommandBar open={selected}>
        <CommandBar.Bar>
          <CommandBar.Value>1 selected</CommandBar.Value>
          <CommandBar.Seperator />
          <CommandBar.Command
            action={() => {
              alert("Delete")
            }}
            label="Delete"
            shortcut="d"
          />
          <CommandBar.Seperator />
          <CommandBar.Command
            action={() => {
              alert("Edit")
            }}
            label="Edit"
            shortcut="e"
          />
        </CommandBar.Bar>
      </CommandBar>
    </div>
  )
}
```