)
}
```
-### Disabled
+### Controlled Switch
+
+```tsx
+import { useState } from "react"
+import { Label, Switch } from "@medusajs/ui"
+
+export default function SwitchControlled() {
+ const [checked, setChecked] = useState(false)
+
+ return (
+
+ )
+}
+
+```
+
+### Disabled Switch
```tsx
import { Label, Switch } from "@medusajs/ui"
@@ -94493,50 +95387,14 @@ export default function SwitchDisabled() {
```
-### Checked
-
-```tsx
-import { Label, Switch } from "@medusajs/ui"
-
-export default function SwitchChecked() {
- return (
-
- )
-}
-
-```
-
-### Checked Disabled
-
-```tsx
-import { Label, Switch } from "@medusajs/ui"
-
-export default function SwitchCheckedDisabled() {
- return (
-
- )
-}
-
-```
-
# Table
-A Table component for displaying data.
+A component that displays data in a structured table format.
-If you're looking to add a table in your Medusa Admin Extensions with features like pagination and filters, refer to the [DataTable](https://docs.medusajs.com/components/data-table/index.html.md) component instead.
+In this guide, you'll learn how to use the Table component.
+
+If you're looking to add a table to your Medusa Admin customizations with advanced features like filters, search, sorting, and bulk actions, refer to the [DataTable](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/ui/app/components/data-table/index.html.md) component instead.
```tsx
import { Table } from "@medusajs/ui"
@@ -94636,8 +95494,6 @@ export default function TableDemo() {
## Usage
-***
-
```tsx
import { Table } from "@medusajs/ui"
```
@@ -94661,10 +95517,10 @@ import { Table } from "@medusajs/ui"
```
-## API Reference
-
***
+## API Reference
+
### Table Props
This component is based on the table element and its various children:
@@ -94703,10 +95559,10 @@ This component is based on the \`div\` element and supports all of its props
- nextPage: (signature) A function that handles navigating to the next page.
This function should handle retrieving data for the next page.
-## Examples
-
***
+## Examples
+
### Table with Pagination
```tsx
@@ -94851,14 +95707,16 @@ export default function TableDemo() {
# Tabs
-A set of layered content panels, known as tabs, that display content one panel at a time
+A component that displays tabbed content.
+
+In this guide, you'll learn how to use the Tabs component.
```tsx
import { Tabs, Text } from "@medusajs/ui"
export default function TabsDemo() {
return (
-
)
}
@@ -94908,8 +95770,6 @@ export default function TabsDemo() {
## Usage
-***
-
```tsx
import { Tabs } from "@medusajs/ui"
```
@@ -94927,10 +95787,10 @@ import { Tabs } from "@medusajs/ui"
```
-## API Reference
-
***
+## API Reference
+
### Tabs Props
This component is based on the \[Radix UI Tabs]\(https://radix-ui.com/primitives/docs/components/tabs) primitves
@@ -94943,10 +95803,175 @@ This component is based on the \[Radix UI Tabs]\(https://radix-ui.com/primitives
Mainly so arrow navigation is done accordingly (left & right vs. up & down)
- value: (string) The value for the selected tab, if controlled
+***
+
+## Examples
+
+### Controlled Tabs
+
+```tsx
+import { Tabs, Text } from "@medusajs/ui"
+import { useState } from "react"
+
+export default function TabsControlled() {
+ const [value, setValue] = useState("general")
+ return (
+
+ )
+}
+
+```
+
+### Tabs with a Disabled Tab
+
+```tsx
+import { Tabs, Text } from "@medusajs/ui"
+
+export default function TabsDisabled() {
+ return (
+
+ )
+}
+
+```
+
+### Tabs with Icons
+
+```tsx
+import { Tabs, Text } from "@medusajs/ui"
+import { TruckFast, CreditCard, InformationCircle } from "@medusajs/icons"
+
+export default function TabsIcons() {
+ return (
+
+ )
+}
+
+```
+
+### Vertical Tabs
+
+The `orientation` prop doesn't change the layout of the tabs, but it allows you to navigate between the tabs using the up and down arrow keys. You'll need to manually style the tabs vertically.
+
+```tsx
+import { Tabs, Text } from "@medusajs/ui"
+
+export default function TabsVertical() {
+ return (
+
+ )
+}
+
+```
+
# Text
-Displays basic text.
+A component that displays text using the typography styles from Medusa's design system.
+
+In this guide, you'll learn how to use the Text component.
```tsx
import { Text } from "@medusajs/ui"
@@ -94959,8 +95984,6 @@ export default function TextDemo() {
## Usage
-***
-
```tsx
import { Text } from "@medusajs/ui"
```
@@ -94969,10 +95992,10 @@ import { Text } from "@medusajs/ui"
```
-## API Reference
-
***
+## API Reference
+
### Text Props
This component is based on the \`p\` element and supports all of its props
@@ -94985,51 +96008,69 @@ This component is based on the \`p\` element and supports all of its props
- family: (union) The text's font family. Default: "sans"
- leading: (union) The text's line height. Default: "normal"
-## Examples
-
***
-### All variations
+## Examples
+
+### Text Sizes
```tsx
import { Text } from "@medusajs/ui"
-export default function TextExamples() {
+export default function TextSizes() {
return (
-
-
- Base Size, Regular Weight, Sans-Serif
-
-
- Base Size, Plus Weight, Sans-Serif
-
-
- Large Size, Regular Weight, Sans-Serif
-
-
- Large Size, Plus Weight, Sans-Serif
-
-
- XLarge Size, Regular Weight, Sans-Serif
-
-
- XLarge Size, Plus Weight, Sans-Serif
-
-
- Base Size, Regular Weight, Mono
-
-
- Large Size, Regular Weight, Mono
-
-
- Large Size, Plus Weight, Mono
-
-
- XLarge Size, Regular Weight, Mono
-
-
- XLarge Size, Plus Weight, Mono
-
+
+ Base size
+ Large size
+ XLarge size
+
+ )
+}
+
+```
+
+### Text Weights
+
+```tsx
+import { Text } from "@medusajs/ui"
+
+export default function TextWeights() {
+ return (
+
+ Regular weight
+ Plus weight
+
+ )
+}
+
+```
+
+### Text Fonts
+
+```tsx
+import { Text } from "@medusajs/ui"
+
+export default function TextFonts() {
+ return (
+
+ Sans font
+ Mono font
+
+ )
+}
+
+```
+
+### Text Leading
+
+```tsx
+import { Text } from "@medusajs/ui"
+
+export default function TextLeading() {
+ return (
+
+ Normal leading
+ Compact leading
)
}
@@ -95039,7 +96080,9 @@ export default function TextExamples() {
# Textarea
-Displays a form textarea.
+A component that displays a textarea field using Medusa's design system.
+
+In this guide, you'll learn how to use the Textarea component.
```tsx
import { Textarea } from "@medusajs/ui"
@@ -95052,8 +96095,6 @@ export default function TextAreaDemo() {
## Usage
-***
-
```tsx
import { Textarea } from "@medusajs/ui"
```
@@ -95062,19 +96103,70 @@ import { Textarea } from "@medusajs/ui"
```
-## API Reference
-
***
+## API Reference
+
### Textarea Props
This component is based on the \`textarea\` element and supports all of its props
-# Toast
+***
-A succinct message that is displayed temporarily.
+## Examples
+
+### Controlled Textarea
+
+```tsx
+import { useState } from "react"
+import { Textarea } from "@medusajs/ui"
+
+export default function TextareaControlled() {
+ const [value, setValue] = useState("")
+ return (
+
+