From 02c4c315f87ba195a0d68778984e90a2f99c0e9a Mon Sep 17 00:00:00 2001 From: Xavier Saliniere Date: Wed, 24 Dec 2025 07:53:08 -0500 Subject: [PATCH 1/3] feat: set a tailwind prefix (lsd) to prevent conflicts where this UI lib is used --- src/__cosmos__/code-block.tsx | 4 +- src/__cosmos__/code-example.tsx | 2 +- src/__cosmos__/fixtures/Accordion.fixture.tsx | 36 +-- .../fixtures/AlertDialog.fixture.tsx | 30 +-- .../fixtures/Autocomplete.fixture.tsx | 205 +++++++++--------- src/__cosmos__/fixtures/Badge.fixture.tsx | 52 ++--- src/__cosmos__/fixtures/Button.fixture.tsx | 58 ++--- .../fixtures/ButtonGroup.fixture.tsx | 64 +++--- src/__cosmos__/fixtures/Card.fixture.tsx | 48 ++-- src/__cosmos__/fixtures/Checkbox.fixture.tsx | 100 +++++---- src/__cosmos__/fixtures/Command.fixture.tsx | 28 +-- src/__cosmos__/fixtures/Dialog.fixture.tsx | 32 +-- src/__cosmos__/fixtures/Input.fixture.tsx | 92 ++++---- src/__cosmos__/fixtures/Label.fixture.tsx | 108 ++++----- src/__cosmos__/fixtures/Popover.fixture.tsx | 108 ++++----- src/__cosmos__/fixtures/Progress.fixture.tsx | 79 +++---- .../fixtures/ScrollArea.fixture.tsx | 112 +++++----- src/__cosmos__/fixtures/Select.fixture.tsx | 173 ++++++++------- src/__cosmos__/fixtures/Separator.fixture.tsx | 80 +++---- src/__cosmos__/fixtures/Sheet.fixture.tsx | 120 +++++----- src/__cosmos__/fixtures/Sidebar.fixture.tsx | 34 +-- src/__cosmos__/fixtures/Sonner.fixture.tsx | 60 ++--- src/__cosmos__/fixtures/Switch.fixture.tsx | 70 +++--- src/__cosmos__/fixtures/Tabs.fixture.tsx | 52 +++-- src/__cosmos__/fixtures/Toggle.fixture.tsx | 100 +++++---- .../fixtures/ToggleGroup.fixture.tsx | 128 +++++------ .../fixtures/Typography.fixture.tsx | 82 +++---- src/__cosmos__/font-toggle.tsx | 4 +- src/__cosmos__/theme-toggle.tsx | 4 +- src/components/ui/accordion.tsx | 12 +- src/components/ui/alert-dialog.tsx | 18 +- src/components/ui/autocomplete.tsx | 90 ++++---- src/components/ui/badge.tsx | 11 +- src/components/ui/button-group.tsx | 10 +- src/components/ui/button.tsx | 28 +-- src/components/ui/card.tsx | 14 +- src/components/ui/checkbox.tsx | 6 +- src/components/ui/command.tsx | 29 +-- src/components/ui/dialog.tsx | 22 +- src/components/ui/input.tsx | 45 ++-- src/components/ui/label.tsx | 12 +- src/components/ui/popover.tsx | 2 +- src/components/ui/progress.tsx | 12 +- src/components/ui/scroll-area.tsx | 12 +- src/components/ui/select.tsx | 33 +-- src/components/ui/separator.tsx | 2 +- src/components/ui/sheet.tsx | 29 +-- src/components/ui/sidebar.tsx | 155 +++++++------ src/components/ui/skeleton.tsx | 5 +- src/components/ui/sonner.tsx | 2 +- src/components/ui/switch.tsx | 4 +- src/components/ui/tabs.tsx | 24 +- src/components/ui/toggle-group.tsx | 7 +- src/components/ui/toggle.tsx | 8 +- src/components/ui/tooltip.tsx | 4 +- src/components/ui/typography.tsx | 42 ++-- src/style.css | 6 +- 57 files changed, 1445 insertions(+), 1264 deletions(-) diff --git a/src/__cosmos__/code-block.tsx b/src/__cosmos__/code-block.tsx index c0185ff..64ff09a 100644 --- a/src/__cosmos__/code-block.tsx +++ b/src/__cosmos__/code-block.tsx @@ -9,12 +9,12 @@ export function CodeBlock({ className, code, ...props }: CodeBlockProps) { return ( 
-      {code}
+      {code}
); } diff --git a/src/__cosmos__/code-example.tsx b/src/__cosmos__/code-example.tsx index 506aa25..b8882da 100644 --- a/src/__cosmos__/code-example.tsx +++ b/src/__cosmos__/code-example.tsx @@ -15,7 +15,7 @@ interface CodeExampleProps { export function CodeExample({ title, children, code }: CodeExampleProps) { return ( -
+
{children}
diff --git a/src/__cosmos__/fixtures/Accordion.fixture.tsx b/src/__cosmos__/fixtures/Accordion.fixture.tsx index ab8eac9..53fa008 100644 --- a/src/__cosmos__/fixtures/Accordion.fixture.tsx +++ b/src/__cosmos__/fixtures/Accordion.fixture.tsx @@ -8,14 +8,18 @@ import { CodeExample } from '../code-example'; export default function AccordionFixture() { return ( -
-

Accordion Component

+
+

+ Accordion Component +

-
-

Ethereum Basics

+
+

+ Ethereum Basics +

+ code={` What is Ethereum? @@ -46,7 +50,7 @@ export default function AccordionFixture() { `} > - + What is Ethereum? @@ -79,11 +83,13 @@ export default function AccordionFixture() {
-
-

Ethereum Technology

+
+

+ Ethereum Technology +

+ code={` What is the Ethereum Virtual Machine (EVM)? @@ -117,7 +123,7 @@ export default function AccordionFixture() { `} > - + What is the Ethereum Virtual Machine (EVM)? @@ -153,11 +159,13 @@ export default function AccordionFixture() {
-
-

Ethereum Ecosystem

+
+

+ Ethereum Ecosystem +

+ code={` What are dApps? @@ -189,7 +197,7 @@ export default function AccordionFixture() { `} > - + What are dApps? diff --git a/src/__cosmos__/fixtures/AlertDialog.fixture.tsx b/src/__cosmos__/fixtures/AlertDialog.fixture.tsx index 96a844d..d6f300f 100644 --- a/src/__cosmos__/fixtures/AlertDialog.fixture.tsx +++ b/src/__cosmos__/fixtures/AlertDialog.fixture.tsx @@ -21,22 +21,24 @@ export default function AlertDialogFixture() { const [showConfirmDialog, setShowConfirmDialog] = useState(false); return ( -
-
+
+
-
-

Alert Dialog Component

-

+

+

Alert Dialog Component

+

A modal dialog that interrupts the user with important content and expects a response.

-
-

Using AlertDialogTrigger

+
+

+ Using AlertDialogTrigger +

@@ -79,11 +81,13 @@ export default function AlertDialogFixture() {
-
-

Using Boolean State Control

+
+

+ Using Boolean State Control +

+ code={`
@@ -130,7 +134,7 @@ export default function AlertDialogFixture() { Cancel - + Delete @@ -154,7 +158,7 @@ export default function AlertDialogFixture() { `} > -
+
@@ -202,7 +206,7 @@ export default function AlertDialogFixture() { Cancel - + Delete diff --git a/src/__cosmos__/fixtures/Autocomplete.fixture.tsx b/src/__cosmos__/fixtures/Autocomplete.fixture.tsx index ab6dc97..6192499 100644 --- a/src/__cosmos__/fixtures/Autocomplete.fixture.tsx +++ b/src/__cosmos__/fixtures/Autocomplete.fixture.tsx @@ -1,6 +1,7 @@ import { SearchIcon } from 'lucide-react'; import { useState } from 'react'; import { Autocomplete } from '@/components/ui/autocomplete'; +import { Button } from '@/components/ui/button'; import { CodeExample } from '../code-example'; import { FontToggle } from '../font-toggle'; import { ThemeToggle } from '../theme-toggle'; @@ -15,26 +16,26 @@ const frameworks = [ ]; export default () => ( -
-
+
+
-
-

Autocomplete Component

-

+

+

Autocomplete Component

+

An autocomplete component that allows users to select from a list of options.

-
-
-

Sizes

+
+
+

Sizes

+ code={`
(
`} > -
+
(
-
-

Variants

+
+

Variants

+ code={`
(
`} > -
+
(
-
-

With Icon

+
+

With Icon

+ code={`
-

With Search Icon

+

With Search Icon

} + icon={} />
-

With Clear Icon

+

With Clear Icon

} + icon={} defaultValue="react" />
`} > -
+
-

With Search Icon

+

+ With Search Icon +

} + icon={ + + } />
-

With Clear Icon

+

+ With Clear Icon +

} + icon={ + + } defaultValue="react" />
@@ -180,8 +189,8 @@ export default () => (
-
-

Error State

+
+

Error State

(
-
-

Disabled State

+
+

Disabled State

(
-
-

With Value Change Handler

+
+

+ With Value Change Handler +

(
-
-

Clearable Prop

+
+

Clearable Prop

+ code={`
-

+

Not Clearable (default)

( />
-

Clearable

+

Clearable

(
`} > -
+
-

+

Not Clearable (default)

( />
-

Clearable

+

+ Clearable +

(
-
-

Async Options

+
+

Async Options

( }} />`} > -
+
-

With Async Loading

+

+ With Async Loading +

(
-
-

External Loading State

+
+

+ External Loading State +

( }; return ( -
+
( isLoading={isLoading} loadingText="Please wait..." /> - -

+ +

Loading state: {isLoading ? 'Loading' : 'Not loading'}

); }`} > -
+
-

+

With Controlled Loading State

@@ -402,8 +419,8 @@ export default () => (
-
-

Controlled Component

+
+

Controlled Component

( }; return ( -
+
( onValueChange={setSelectedValue} clearable /> -
- - - +
-

+

Selected value: {selectedValue || 'None'}

); }`} > -
+
-

+

With External State Control

@@ -483,7 +500,7 @@ function ControlledAutocompleteExample() { }; return ( -
+
-
- - - + +
-

+

Selected value: {selectedValue || 'None'}

@@ -530,7 +543,7 @@ function ExternalLoadingExample() { }; return ( -
+
- -

+ +

Loading state: {isLoading ? 'Loading' : 'Not loading'}

diff --git a/src/__cosmos__/fixtures/Badge.fixture.tsx b/src/__cosmos__/fixtures/Badge.fixture.tsx index 0743a8a..7232bac 100644 --- a/src/__cosmos__/fixtures/Badge.fixture.tsx +++ b/src/__cosmos__/fixtures/Badge.fixture.tsx @@ -5,57 +5,59 @@ import { ThemeToggle } from '../theme-toggle'; export default function BadgeFixture() { return ( -
-
+
+
-
-

Badge Component

-

+

+

Badge Component

+

A badge component that displays small pieces of information.

-
-

Variants

+
+

Variants

+ code={`
Filled Outlined
`} > -
+
Filled Outlined
-
-

Sizes

+
+

Sizes

+ code={`
Default Size Small Size
`} > -
+
Default Size Small Size
-
-

Variant and Size Combinations

+
+

+ Variant and Size Combinations +

-
+ code={`
+
Filled Default @@ -63,7 +65,7 @@ export default function BadgeFixture() { Outlined Default
-
+
Filled Small @@ -73,8 +75,8 @@ export default function BadgeFixture() {
`} > -
-
+
+
Filled Default @@ -82,7 +84,7 @@ export default function BadgeFixture() { Outlined Default
-
+
Filled Small @@ -94,18 +96,18 @@ export default function BadgeFixture() {
-
-

Long Text

+
+

Long Text

+ code={`
This is a badge with very long text that should truncate This is a small badge with long text
`} > -
+
This is a badge with very long text that should truncate diff --git a/src/__cosmos__/fixtures/Button.fixture.tsx b/src/__cosmos__/fixtures/Button.fixture.tsx index 01236c0..ff41c7e 100644 --- a/src/__cosmos__/fixtures/Button.fixture.tsx +++ b/src/__cosmos__/fixtures/Button.fixture.tsx @@ -6,46 +6,46 @@ import { ThemeToggle } from '../theme-toggle'; export default function ButtonFixture() { return ( -
-
+
+
-
-

Button Component

-

+

+

Button Component

+

A button component that allows users to perform actions.

-
-

Variants

+
+

Variants

+ code={`
`} > -
+
-
-

Sizes

+
+

Sizes

+ code={`
`} > -
+
@@ -53,27 +53,27 @@ export default function ButtonFixture() {
-
-

States

+
+

States

+ code={`
`} > -
+
-
-

All Combinations

+
+

All Combinations

+ code={`
`} > -
+
-
-

Icon Buttons

+
+

Icon Buttons

+ code={`
@@ -132,7 +132,7 @@ export default function ButtonFixture() {
`} > -
+
@@ -143,11 +143,11 @@ export default function ButtonFixture() {
-
-

Icon Button Sizes

+
+

Icon Button Sizes

+ code={`
@@ -162,7 +162,7 @@ export default function ButtonFixture() {
`} > -
+
diff --git a/src/__cosmos__/fixtures/ButtonGroup.fixture.tsx b/src/__cosmos__/fixtures/ButtonGroup.fixture.tsx index 0eaeb03..980c00d 100644 --- a/src/__cosmos__/fixtures/ButtonGroup.fixture.tsx +++ b/src/__cosmos__/fixtures/ButtonGroup.fixture.tsx @@ -10,22 +10,22 @@ import { ThemeToggle } from '../theme-toggle'; export default function ButtonGroupFixture() { return ( -
-
+
+
-
-

Button Group Component

-

+

+

Button Group Component

+

A button group component that groups related buttons together with proper visual separation.

-
-

Primary Actions

+
+

Primary Actions

@@ -40,8 +40,8 @@ export default function ButtonGroupFixture() {
-
-

Secondary Actions

+
+

Secondary Actions

@@ -58,8 +58,8 @@ export default function ButtonGroupFixture() {
-
-

Navigation

+
+

Navigation

@@ -76,8 +76,8 @@ export default function ButtonGroupFixture() {
-
-

Vertical Menu

+
+

Vertical Menu

@@ -94,8 +94,8 @@ export default function ButtonGroupFixture() {
-
-

Export Options

+
+

Export Options

@@ -116,13 +116,13 @@ export default function ButtonGroupFixture() {
-
-

Button Sizes

+
+

Button Sizes

+ code={`
-

Small Buttons

+

Small Buttons

-

Default Buttons

+

Default Buttons

@@ -146,7 +146,7 @@ export default function ButtonGroupFixture() {
-

Large Buttons

+

Large Buttons

`} > -
+
-

Small Buttons

+

+ Small Buttons +

-

Default Buttons

+

+ Default Buttons +

@@ -184,7 +188,9 @@ export default function ButtonGroupFixture() {
-

Large Buttons

+

+ Large Buttons +

-
-

With Disabled State

+
+

With Disabled State

@@ -218,8 +224,8 @@ export default function ButtonGroupFixture() {
-
-

Text Editor Actions

+
+

Text Editor Actions

diff --git a/src/__cosmos__/fixtures/Card.fixture.tsx b/src/__cosmos__/fixtures/Card.fixture.tsx index 26803ba..9888e8d 100644 --- a/src/__cosmos__/fixtures/Card.fixture.tsx +++ b/src/__cosmos__/fixtures/Card.fixture.tsx @@ -14,40 +14,42 @@ import { ThemeToggle } from '../theme-toggle'; export default function CardFixture() { return ( -
-
+
+
-
-

Card Component

-

+

+

Card Component

+

A card component that displays content in a contained box with optional header, footer, and actions.

-
-

Basic Card

+
+

Basic Card

- +

This is a basic card with only content.

 `} > - +

This is a basic card with only content.
-
-

Card with Header and Title

+
+

+ Card with Header and Title +

@@ -72,8 +74,8 @@ export default function CardFixture() {
-
-

+
+

Card with Header, Content, and Footer

-
-

Card with Action

+
+

Card with Action

@@ -146,11 +148,11 @@ export default function CardFixture() {
-
-

Card Examples

+
+

Card Examples

+ code={`
User Profile @@ -159,7 +161,7 @@ export default function CardFixture() { -
+

Name: John Doe

@@ -187,7 +189,7 @@ export default function CardFixture() { -
+

Progress: 75%

@@ -202,7 +204,7 @@ export default function CardFixture() {
`} > -
+
User Profile @@ -211,7 +213,7 @@ export default function CardFixture() { -
+

Name: John Doe

@@ -239,7 +241,7 @@ export default function CardFixture() { -
+

Progress: 75%

diff --git a/src/__cosmos__/fixtures/Checkbox.fixture.tsx b/src/__cosmos__/fixtures/Checkbox.fixture.tsx index 15572f7..8a1e693 100644 --- a/src/__cosmos__/fixtures/Checkbox.fixture.tsx +++ b/src/__cosmos__/fixtures/Checkbox.fixture.tsx @@ -20,30 +20,32 @@ export default function CheckboxFixture() { const businessId = useId(); return ( -
-
+
+
-
-

Checkbox Component

-

+

+

Checkbox Component

+

A checkbox component that allows users to select one or more options from a set.

-

Default Checkbox

+

+ Default Checkbox +

+ code={`
`} > -
+
-

Controlled Checkbox

+

+ Controlled Checkbox +

+
-
+
-

Checked by Default

+

+ Checked by Default +

+ code={`
`} > -
+
@@ -103,26 +109,28 @@ export default function CheckboxFixture() {
-

Disabled State

+

+ Disabled State +

-
+ code={`
+
-
+
`} > -
-
+
+
-
+
@@ -131,15 +139,17 @@ export default function CheckboxFixture() {
-

Multiple Checkboxes

+

+ Multiple Checkboxes +

-
+
+
-
+
-
+
@@ -159,8 +169,8 @@ export default function CheckboxFixture() { ); }`} > -
-
+
+
-
+
-
+
@@ -183,39 +193,43 @@ export default function CheckboxFixture() {
-

Checkbox Group

+

+ Checkbox Group +

-

Select your interests:

-
-
+ code={`
+

Select your interests:

+
+
-
+
-
+
`} > -
-

Select your interests:

-
-
+
+

+ Select your interests: +

+
+
-
+
-
+
diff --git a/src/__cosmos__/fixtures/Command.fixture.tsx b/src/__cosmos__/fixtures/Command.fixture.tsx index 296741a..5fdd112 100644 --- a/src/__cosmos__/fixtures/Command.fixture.tsx +++ b/src/__cosmos__/fixtures/Command.fixture.tsx @@ -17,22 +17,22 @@ import { ThemeToggle } from '../theme-toggle'; export default function CommandFixture() { return ( -
-
+
+
-
-

Command Component

-

+

+

Command Component

+

A command component that provides a searchable command palette interface with grouped items and keyboard shortcuts.

-
-

Basic Command

+
+

Basic Command

@@ -53,7 +53,7 @@ export default function CommandFixture() { `} > - + No results found. @@ -73,8 +73,10 @@ export default function CommandFixture() {
-
-

Command with Shortcuts

+
+

+ Command with Shortcuts +

@@ -105,7 +107,7 @@ export default function CommandFixture() { `} > - + No results found. @@ -135,8 +137,8 @@ export default function CommandFixture() {
-
-

Command Dialog

+
+

Command Dialog

-
+
+
-
-

Dialog Component

-

+

+

Dialog Component

+

A dialog component that displays content in a modal overlay with optional header, footer, and actions.

-
-

Using DialogTrigger

+
+

Using DialogTrigger

@@ -83,11 +83,13 @@ export default function DialogFixture() {
-
-

Using Boolean State Control

+
+

+ Using Boolean State Control +

+ code={`
@@ -144,14 +146,14 @@ export default function DialogFixture() { {/* Form Dialog */} - + Edit Profile Make changes to your profile here. Click save when you're done. -
+
@@ -164,7 +166,7 @@ export default function DialogFixture() {
`} > -
+
@@ -218,7 +220,7 @@ export default function DialogFixture() { - + Edit Profile @@ -226,7 +228,7 @@ export default function DialogFixture() { done. -
+
diff --git a/src/__cosmos__/fixtures/Input.fixture.tsx b/src/__cosmos__/fixtures/Input.fixture.tsx index 6e82e29..966b377 100644 --- a/src/__cosmos__/fixtures/Input.fixture.tsx +++ b/src/__cosmos__/fixtures/Input.fixture.tsx @@ -8,42 +8,44 @@ export default function InputFixture() { const [value, setValue] = useState(''); return ( -
-
+
+
-
-

Input Component

-

+

+

Input Component

+

An input component that allows users to enter text data with labels and supporting text.

-

Variants

+

Variants

+ code={`
-

Underlined (Default)

+

Underlined (Default)

-

Outlined

+

Outlined

`} > -
+
-

Underlined (Default)

+

+ Underlined (Default) +

-

Outlined

+

Outlined

@@ -51,35 +53,37 @@ export default function InputFixture() {
-

Sizes

+

Sizes

+ code={`
-

Large (Default)

+

Large (Default)

-

Medium

+

Medium

-

Small

+

Small

`} > -
+
-

Large (Default)

+

+ Large (Default) +

-

Medium

+

Medium

-

Small

+

Small

@@ -87,10 +91,10 @@ export default function InputFixture() {
-

With Labels

+

With Labels

+ code={`
`} > -
+
-

With Supporting Text

+

+ With Supporting Text +

+ code={`
`} > -
+
-

Controlled Input

+

+ Controlled Input +

+
-
+
-

States

+

States

+ code={`
-

Normal

+

Normal

-

Disabled

+

Disabled

-

Error

+

Error

`} > -
+
-

Normal

+

Normal

-

Disabled

+

Disabled

-

Error

+

Error

-

Input Types

+

Input Types

+ code={`
`} > -
+
-
+
+
-
-

Label Component

-

+

+

Label Component

+

A label component that provides text labels for form controls and other UI elements.

-

Default Label

+

+ Default Label +

+ code={`
`} > -
+
@@ -50,17 +52,19 @@ export default function LabelFixture() {
-

Label Variants

+

+ Label Variants +

-
+ code={`
+
-
+
`} > -
-
+
+
-
+
-

Label Sizes

+

Label Sizes

-
+ code={`
+
-
+
-
+
`} > -
-
+
+
-
+
-
+
-

Label with Checkbox

+

+ Label with Checkbox +

-
+ code={`
+
-
+
-
+
-
`} > -
-
+
+
-
+
-
+
-
@@ -178,17 +184,19 @@ export default function LabelFixture() {
-

Label Combinations

+

+ Label Combinations +

-
+ code={`
+
-
+
`} > -
-
+
+
-
+
-

Disabled State

+

+ Disabled State +

-
+ code={`
+
-
`} > -
-
+
+
-
diff --git a/src/__cosmos__/fixtures/Popover.fixture.tsx b/src/__cosmos__/fixtures/Popover.fixture.tsx index 50a6a0a..53fa569 100644 --- a/src/__cosmos__/fixtures/Popover.fixture.tsx +++ b/src/__cosmos__/fixtures/Popover.fixture.tsx @@ -1,10 +1,8 @@ -import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Popover, - PopoverAnchor, PopoverContent, PopoverTrigger, } from '@/components/ui/popover'; @@ -14,22 +12,22 @@ import { ThemeToggle } from '../theme-toggle'; export default function PopoverFixture() { return ( -
-
+
+
-
-

Popover Component

-

+

+

Popover Component

+

A popover component that displays content in a floating overlay positioned relative to a trigger element.

-
-

Basic Popover

+
+

Basic Popover

@@ -37,9 +35,9 @@ export default function PopoverFixture() { -
-

Dimensions

-

+

+

Dimensions

+

Set the dimensions for the layer.

@@ -51,9 +49,9 @@ export default function PopoverFixture() { -
-

Dimensions

-

+

+

Dimensions

+

Set the dimensions for the layer.

@@ -62,49 +60,49 @@ export default function PopoverFixture() {
-
-

Popover with Form

+
+

Popover with Form

- -
-
-

Settings

-

+ +

+
+

Settings

+

Make changes to your settings here.

-
-
+
+
-
+
-
+
-
+
@@ -116,30 +114,42 @@ export default function PopoverFixture() { - -
-
-

Settings

-

+ +

+
+

Settings

+

Make changes to your settings here.

-
-
+
+
- +
-
+
- +
-
+
- +
-
+
- +
@@ -148,11 +158,11 @@ export default function PopoverFixture() {
-
-

Popover Examples

+
+

Popover Examples

+ code={`
@@ -190,7 +200,7 @@ export default function PopoverFixture() {
`} > -
+
diff --git a/src/__cosmos__/fixtures/Progress.fixture.tsx b/src/__cosmos__/fixtures/Progress.fixture.tsx index 07e7fd7..f193c87 100644 --- a/src/__cosmos__/fixtures/Progress.fixture.tsx +++ b/src/__cosmos__/fixtures/Progress.fixture.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { Button } from '@/components/ui/button'; import { Progress } from '@/components/ui/progress'; import { CodeExample } from '../code-example'; import { FontToggle } from '../font-toggle'; @@ -8,31 +9,31 @@ export default function ProgressFixture() { const [progress, setProgress] = useState(30); return ( -
-
+
+
-
-

Progress Component

-

+

+

Progress Component

+

A progress component that displays the completion status of a task.

-
-

Basic Progress

+
+

Basic Progress

+ code={`
`} > -
+
@@ -41,80 +42,82 @@ export default function ProgressFixture() {
-
-

Interactive Demo

+
+

Interactive Demo

-
- + {progress}% - +
); }`} > -
-
- + {progress}% - +
-
-

Indeterminate Progress

+
+

+ Indeterminate Progress +

+ code={`
`} > -
-
+
+

Normal Speed (default):

-
+

Slow Speed:

-
+

Fast Speed:

diff --git a/src/__cosmos__/fixtures/ScrollArea.fixture.tsx b/src/__cosmos__/fixtures/ScrollArea.fixture.tsx index 876dde5..1314d35 100644 --- a/src/__cosmos__/fixtures/ScrollArea.fixture.tsx +++ b/src/__cosmos__/fixtures/ScrollArea.fixture.tsx @@ -30,30 +30,30 @@ const sections = Array.from({ length: 5 }, (_, i) => ({ export default function ScrollAreaFixture() { return ( -
-
+
+
-
-

Scroll Area Component

-

+

+

Scroll Area Component

+

A scroll area component that allows users to scroll through content that exceeds the container size.

-
-

Vertical Scroll

+
+

Vertical Scroll

-
+ code={` +
Scrollable Content -
+
{verticalItems.map((item) => ( -
+
{item.label}
))} @@ -61,12 +61,12 @@ export default function ScrollAreaFixture() {
`} > - -
+ +
Scrollable Content -
+
{verticalItems.map((item) => ( -
+
{item.label}
))} @@ -76,16 +76,16 @@ export default function ScrollAreaFixture() {
-
-

Horizontal Scroll

+
+

Horizontal Scroll

-
+ code={` +
Horizontal Content -
+
{horizontalItems.map((item) => ( -
+
{item.label}
))} @@ -94,12 +94,15 @@ export default function ScrollAreaFixture() { `} > - -
+ +
Horizontal Content -
+
{horizontalItems.map((item) => ( -
+
{item.label}
))} @@ -110,16 +113,16 @@ export default function ScrollAreaFixture() {
-
-

Both Scrollbars

+
+

Both Scrollbars

-
+ code={` +
Grid Content -
+
{gridItems.map((item) => ( -
+
{item.label}
))} @@ -128,12 +131,15 @@ export default function ScrollAreaFixture() { `} > - -
+ +
Grid Content -
+
{gridItems.map((item) => ( -
+
{item.label}
))} @@ -144,24 +150,24 @@ export default function ScrollAreaFixture() {
-
-

Nested Scroll Areas

+
+

Nested Scroll Areas

-
+ code={` +
Outer Container -
+
{sections.map((section) => ( -
+
{section.label} - -
-
+ +
+
{section.nestedItems.map((nestedItem) => (
{nestedItem.label}
@@ -175,20 +181,20 @@ export default function ScrollAreaFixture() {
`} > - -
+ +
Outer Container -
+
{sections.map((section) => ( -
+
{section.label} - -
-
+ +
+
{section.nestedItems.map((nestedItem) => (
{nestedItem.label}
diff --git a/src/__cosmos__/fixtures/Select.fixture.tsx b/src/__cosmos__/fixtures/Select.fixture.tsx index 0d86fd5..1b382be 100644 --- a/src/__cosmos__/fixtures/Select.fixture.tsx +++ b/src/__cosmos__/fixtures/Select.fixture.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { Button } from '@/components/ui/button'; import { Select, SelectContent, @@ -32,28 +33,28 @@ const languages = [ ]; export default () => ( -
-
+
+
-
-

Select Component

-

+

+

Select Component

+

A select component that allows users to select from a list of options.

-
-
-

Basic Usage

+
+
+

Basic Usage

+ code={`
- + @@ -87,10 +88,10 @@ export default () => (
`} > -
+
- + @@ -126,15 +127,15 @@ export default () => (
-
-

Sizes

+
+

Sizes

+ code={`
-

Default Size

+

Default Size

-

Small Size

+

Small Size

- + @@ -180,9 +183,11 @@ export default () => (
-

Small Size

+

+ Small Size +

- + @@ -231,10 +238,10 @@ export default () => (
`} > -
+
- + @@ -283,7 +290,7 @@ export default () => (
- + @@ -314,7 +321,7 @@ export default () => (
console.log('Selected:', value)}> - + @@ -351,12 +360,12 @@ export default () => (
`} > -
+
- + @@ -401,39 +410,39 @@ export default () => ( ))} -
- - - +
-

+

Selected value: {selectedValue || 'None'}

); }`} > -
+
-

+

With External State Control

@@ -457,9 +466,9 @@ function ControlledSelectExample() { }; return ( -
+
-
- - - + +
-

+

Selected value: {selectedValue || 'None'}

diff --git a/src/__cosmos__/fixtures/Separator.fixture.tsx b/src/__cosmos__/fixtures/Separator.fixture.tsx index e9732a8..6e9458e 100644 --- a/src/__cosmos__/fixtures/Separator.fixture.tsx +++ b/src/__cosmos__/fixtures/Separator.fixture.tsx @@ -8,51 +8,51 @@ import { ThemeToggle } from '../theme-toggle'; export default function SeparatorFixture() { return ( -
-
+
+
-
-

Separator Component

-

+

+

Separator Component

+

A separator component that visually divides content with a horizontal or vertical line.

-
-

Horizontal Separator

+
+

Horizontal Separator

+ code={`
-

Section 1

-

+

Section 1

+

Content for the first section goes here.

-

Section 2

-

+

Section 2

+

Content for the second section goes here.

`} > -
+
-

Section 1

-

+

Section 1

+

Content for the first section goes here.

-

Section 2

-

+

Section 2

+

Content for the second section goes here.

@@ -60,32 +60,32 @@ export default function SeparatorFixture() {
-
-

Separator in Cards

+
+

Separator in Cards

Account Settings - -
-

Profile Information

-

+ +

+

Profile Information

+

Update your profile information and email address.

-
-

Password

-

+

+

Password

+

Change your password to keep your account secure.

-
-

Notifications

-

+

+

Notifications

+

Manage your notification preferences.

@@ -96,24 +96,26 @@ export default function SeparatorFixture() { Account Settings - -
-

Profile Information

-

+ +

+

+ Profile Information +

+

Update your profile information and email address.

-
-

Password

-

+

+

Password

+

Change your password to keep your account secure.

-
-

Notifications

-

+

+

Notifications

+

Manage your notification preferences.

diff --git a/src/__cosmos__/fixtures/Sheet.fixture.tsx b/src/__cosmos__/fixtures/Sheet.fixture.tsx index 66afb48..6cfcb41 100644 --- a/src/__cosmos__/fixtures/Sheet.fixture.tsx +++ b/src/__cosmos__/fixtures/Sheet.fixture.tsx @@ -22,22 +22,22 @@ export default function SheetFixture() { const [name, setName] = useState(''); return ( -
-
+
+
-
-

Sheet Component

-

+

+

Sheet Component

+

A sheet component that slides in from the side of the screen to display additional content.

-
-

Basic Sheet

+
+

Basic Sheet

@@ -51,7 +51,7 @@ export default function SheetFixture() { This is a description of the sheet content. -
+

Sheet content goes here.

@@ -73,7 +73,7 @@ export default function SheetFixture() { This is a description of the sheet content. -
+

Sheet content goes here.

@@ -86,11 +86,11 @@ export default function SheetFixture() {
-
-

Sheet Positions

+
+

Sheet Positions

+ code={`
@@ -99,7 +99,7 @@ export default function SheetFixture() { Top Sheet -
+

This sheet slides in from the top.

@@ -113,7 +113,7 @@ export default function SheetFixture() { Right Sheet -
+

This sheet slides in from the right.

@@ -127,7 +127,7 @@ export default function SheetFixture() { Bottom Sheet -
+

This sheet slides in from the bottom.

@@ -141,14 +141,14 @@ export default function SheetFixture() { Left Sheet -
+

This sheet slides in from the left.

`} > -
+
@@ -157,7 +157,7 @@ export default function SheetFixture() { Top Sheet -
+

This sheet slides in from the top.

@@ -171,7 +171,7 @@ export default function SheetFixture() { Right Sheet -
+

This sheet slides in from the right.

@@ -185,7 +185,7 @@ export default function SheetFixture() { Bottom Sheet -
+

This sheet slides in from the bottom.

@@ -199,7 +199,7 @@ export default function SheetFixture() { Left Sheet -
+

This sheet slides in from the left.

@@ -208,8 +208,8 @@ export default function SheetFixture() {
-
-

Sheet with Form

+
+

Sheet with Form

@@ -223,16 +223,16 @@ export default function SheetFixture() { Make changes to your profile here. Click save when you're done. -
-
-