===============
LIBRARY RULES
===============
From library maintainers:
- Use UZH DF design-system components whenever they are available for frontend tasks
- Use theme-based styling with Tailwind CSS

### Default Command Palette Example with Suggestions and Settings (TSX)

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Command.stories.mdx

A practical example of the `Command` component demonstrating a default setup with grouped suggestions and settings. It includes an input, empty state, and items with icons and keyboard shortcuts, showcasing common usage patterns.

```tsx
export const Default = () => {
  return (
    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Calendar className="size-4" />
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <Smile className="size-4" />
            <span>Search Emoji</span>
          </CommandItem>
          <CommandItem disabled>
            <Calculator className="size-4" />
            <span>Calculator</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <User className="size-4" />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCard className="size-4" />
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Settings className="size-4" />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}
```

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

### Default Pagination Component Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Pagination.stories.mdx

This example demonstrates the default rendering of the Pagination component, showcasing a standard setup with previous/next buttons, numbered page links, and an ellipsis indicator for skipped pages.

```tsx
export const Default = () => {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

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

### Basic Tabs Usage

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Tabs.stories.mdx

Example demonstrating the basic setup of the Tabs component with three distinct tab sections.

```tsx
import { useState } from 'react'
import { TabContent, Tabs } from './Tabs'

function ExampleTabs() {
  return (
    <Tabs
      defaultValue="overview"
      tabs={[
        { id: 'overview', value: 'overview', label: 'Overview' },
        { id: 'details', value: 'details', label: 'Details' },
        { id: 'settings', value: 'settings', label: 'Settings' }
      ]}>
      <TabContent value="overview">
        <h2>Overview Content</h2>
        <p>Summary information goes here.</p>
      </TabContent>

      <TabContent value="details">
        <h2>Detailed Information</h2>
        <p>More specific details about the item.</p>
      </TabContent>

      <TabContent value="settings">
        <h2>Settings Panel</h2>
        <p>Configure options here.</p>
      </TabContent>
    </Tabs>
  )
}
```

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

### Basic Modal Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Modal.stories.mdx

A simple example of a Modal component with only the essential props for opening and closing.

```jsx
export const Basic = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <Modal
      open={isOpen}
      trigger={<Button onClick={() => setIsOpen(true)}>Open Modal</Button>}
      onClose={() => setIsOpen(false)}
    >
      Consectetur enim adipisicing do culpa. Laborum laboris labore velit
      incididunt est do duis in cupidatat proident. Veniam quis ex dolore
      pariatur eu. Quis adipisicing aliqua et Lorem minim. Nostrud anim duis
      commodo nostrud deserunt adipisicing dolor officia amet non tempor tempor
      laboris. Nisi esse voluptate non enim aute nisi nostrud eiusmod laboris.
    </Modal>
  )
}
```

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

### Navigation Handler Examples

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/StepProgress.stories.mdx

Provides examples of different navigation handler functions for various scenarios like form wizards, quiz reviews, and linear process tracking.

```javascript
// Form wizard navigation
const handleStepClick = (step, item) => {
  if (step <= completedSteps) {
    setCurrentStep(step)
  } else {
    // Prevent navigation to incomplete steps
    showWarning('Please complete current step first')
  }
}

// Quiz review navigation
const handleQuizReview = (step, item) => {
  setCurrentStep(step)
  setReviewMode(true)
  loadQuestionData(item.id)
}

// Linear process with status tracking
const handleProcessStep = (step, item) => {
  updateStepStatus(currentStep, 'completed')
  setCurrentStep(step)
  logStepNavigation(step, item)
}
```

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

### Simple Table Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Table.stories.mdx

A basic example of rendering a Table component with predefined columns and data.

```jsx
import React from 'react';
import { Table } from './Table'; // Assuming Table component is in './Table'
import { UserNotification } from './UserNotification'; // Assuming UserNotification component is in './UserNotification'

const data = [
  { count: 10, answer: 'Yes', username: 'user1' },
  { count: 5, answer: 'No', username: 'user2' },
  { count: 15, answer: 'Maybe', username: 'user3' },
];

export const SimpleTable = () => (
  <div>
    <UserNotification
      type="info"
      message="When using the table component with custom transformers and / or formatters, be aware of the use of suitable generics to avoid type errors in your code (not supported by the markdown stories). All column names (as well as possible derived ones) and their corresponding data type have to be combine in one key-value object and passed to the table component as a generic. E.g. the Combined component illustrates how this can be accomplished"
      className={{ root: 'mb-4' }}
    />
    <Table
      columns={[
        { label: 'Count', accessor: 'count', sortable: true },
        { label: 'Answer', accessor: 'answer', sortable: true },
        { label: 'Username', accessor: 'username', sortable: false },
      ]}
      data={data}
      caption="Table with example data"
    />
  </div>
);
```

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

### Default ShadcnProgress Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/ShadcnProgress.stories.mdx

A basic example of the ShadcnProgress component, demonstrating an animated progress bar that transitions from 13% to 66%.

```tsx
import { useState, useEffect } from 'react'
import { ShadcnProgress } from './ShadcnProgress'

export const Default = () => {
  const [progress, setProgress] = useState(13)

useEffect(() => {
const timer = setTimeout(() => setProgress(66), 500)
return () => clearTimeout(timer)
}, [])

return <ShadcnProgress value={progress} className="w-[60%]" />
}
```

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

### Basic AlertDialog Usage Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/AlertDialog.stories.mdx

A basic example demonstrating the implementation of an AlertDialog component. It shows how to set up a trigger button, define the dialog's header, title, description, and footer with cancel and continue actions.

```tsx
export const Default = () => {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Show Dialog</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

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

### Default Dropdown Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Dropdown.stories.mdx

A basic example of the Dropdown component rendering simple clickable menu items.

```jsx
export const Default = () => {

return (

<div>
  <div>
    If items are given to the dropdown menu component, they are rendered as
    single elements. Any data passed via the groups attribute is ignored and not
    displayed.
  </div>
  <Dropdown
    trigger="Test Content"
    items={[
      {
        label: 'Element 1 long',
        onClick: () => alert('Element 1 clicked'),
      },
      {
        label: 'Element 2',
        onClick: () => alert('Element 2 clicked'),
      },
      {
        label: 'Element 3 short',
        onClick: () => alert('Element 3 clicked'),
      },
      {
        label: 'Element 4',
        onClick: () => alert('Element 4 clicked'),
      },
    ]}
  />
</div>
)
}

```

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

### Default ShadcnProgress Component Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/ShadcnProgress.stories.mdx

A basic example demonstrating the `ShadcnProgress` component with a simple animation that updates its value from 13% to 66% after a short delay. This showcases a common pattern for displaying initial loading states or partial progress.

```tsx
import { useState, useEffect } from 'react'
import { ShadcnProgress } from './ShadcnProgress'

export const Default = () => {
  const [progress, setProgress] = useState(13)

  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <ShadcnProgress value={progress} className="w-[60%]" />
}
```

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

### Default Collapsible Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Collapsible.stories.mdx

A simple example demonstrating the default usage of the Collapsible component with basic static and closed content.

```tsx
import React, { useState } from 'react';

// Assuming Collapsible component is imported
// import Collapsible from 'your-library';

export const Default = () => {
  const [open, setOpen] = useState(false)
  return (
    <Collapsible
      open={open}
      onChange={() => {
        setOpen(!open)
      }}
      staticContent="Static content"
      closedContent="Closed content"
    >
      Dynamic content
    </Collapsible>
  )
}
```

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

### Card Component Usage Examples

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Card.stories.mdx

Demonstrates various ways to use the Card component, from basic content display to more complex structures like product cards and login forms. Includes examples with CardHeader, CardContent, and CardFooter.

```tsx
import { Button } from './Button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from './ui/card'

// Basic content card
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description or subtitle</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Main content goes here...</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

// Simple card without header/footer
<Card>
  <CardContent>
    <h3>Simple Content</h3>
    <p>Just content with consistent padding.</p>
  </CardContent>
</Card>

// Product card example
<Card className="max-w-sm">
  <CardHeader>
    <CardTitle>Product Name</CardTitle>
    <CardDescription>$99.99</CardDescription>
  </CardHeader>
  <CardContent>
    <img src="product.jpg" alt="Product" className="w-full" />
  </CardContent>
  <CardFooter>
    <Button className="w-full">Add to Cart</Button>
  </CardFooter>
</Card>
```

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

### ShadcnMenubar Component Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/ShadcnMenubar.stories.mdx

This code snippet demonstrates the full implementation of the ShadcnMenubar component, showcasing various menu items, sub-menus, checkboxes, radio groups, and shortcuts. It serves as a practical example for integrating the component into an application.

```jsx
export const Default = () => {
  return (
    <ShadcnMenubar>
      <ShadcnMenubarMenu>
        <ShadcnMenubarTrigger>File</ShadcnMenubarTrigger>
        <ShadcnMenubarContent>
          <ShadcnMenubarItem>
            New Tab <ShadcnMenubarShortcut>⌘T</ShadcnMenubarShortcut>
          </ShadcnMenubarItem>
          <ShadcnMenubarItem>
            New Window <ShadcnMenubarShortcut>⌘N</ShadcnMenubarShortcut>
          </ShadcnMenubarItem>
          <ShadcnMenubarItem disabled>New Incognito Window</ShadcnMenubarItem>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarSub>
            <ShadcnMenubarSubTrigger>Share</ShadcnMenubarSubTrigger>
            <ShadcnMenubarSubContent>
              <ShadcnMenubarItem>Email link</ShadcnMenubarItem>
              <ShadcnMenubarItem>Messages</ShadcnMenubarItem>
              <ShadcnMenubarItem>Notes</ShadcnMenubarItem>
            </ShadcnMenubarSubContent>
          </ShadcnMenubarSub>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarItem>
            Print... <ShadcnMenubarShortcut>⌘P</ShadcnMenubarShortcut>
          </ShadcnMenubarItem>
        </ShadcnMenubarContent>
      </ShadcnMenubarMenu>
      <ShadcnMenubarMenu>
        <ShadcnMenubarTrigger>Edit</ShadcnMenubarTrigger>
        <ShadcnMenubarContent>
          <ShadcnMenubarItem>
            Undo <ShadcnMenubarShortcut>⌘Z</ShadcnMenubarShortcut>
          </ShadcnMenubarItem>
          <ShadcnMenubarItem>
            Redo <ShadcnMenubarShortcut>⇧⌘Z</ShadcnMenubarShortcut>
          </ShadcnMenubarItem>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarSub>
            <ShadcnMenubarSubTrigger>Find</ShadcnMenubarSubTrigger>
            <ShadcnMenubarSubContent>
              <ShadcnMenubarItem>Search the web</ShadcnMenubarItem>
              <ShadcnMenubarSeparator />
              <ShadcnMenubarItem>Find...</ShadcnMenubarItem>
              <ShadcnMenubarItem>Find Next</ShadcnMenubarItem>
              <ShadcnMenubarItem>Find Previous</ShadcnMenubarItem>
            </ShadcnMenubarSubContent>
          </ShadcnMenubarSub>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarItem>Cut</ShadcnMenubarItem>
          <ShadcnMenubarItem>Copy</ShadcnMenubarItem>
          <ShadcnMenubarItem>Paste</ShadcnMenubarItem>
        </ShadcnMenubarContent>
      </ShadcnMenubarMenu>
      <ShadcnMenubarMenu>
        <ShadcnMenubarTrigger>View</ShadcnMenubarTrigger>
        <ShadcnMenubarContent>
          <ShadcnMenubarCheckboxItem>
            Always Show Bookmarks Bar
          </ShadcnMenubarCheckboxItem>
          <ShadcnMenubarCheckboxItem checked>
            Always Show Full URLs
          </ShadcnMenubarCheckboxItem>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarItem inset>
            Reload <ShadcnMenubarShortcut>⌘R</ShadcnMenubarShortcut>
          </ShadcnMenubarItem>
          <ShadcnMenubarItem disabled inset>
            Force Reload <ShadcnMenubarShortcut>⇧⌘R</ShadcnMenubarShortcut>
          </ShadcnMenubarItem>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarItem inset>Toggle Fullscreen</ShadcnMenubarItem>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarItem inset>Hide Sidebar</ShadcnMenubarItem>
        </ShadcnMenubarContent>
      </ShadcnMenubarMenu>
      <ShadcnMenubarMenu>
        <ShadcnMenubarTrigger>Profiles</ShadcnMenubarTrigger>
        <ShadcnMenubarContent>
          <ShadcnMenubarRadioGroup value="benoit">
            <ShadcnMenubarRadioItem value="andy">Andy</ShadcnMenubarRadioItem>
            <ShadcnMenubarRadioItem value="benoit">
              Benoit
            </ShadcnMenubarRadioItem>
            <ShadcnMenubarRadioItem value="Luis">Luis</ShadcnMenubarRadioItem>
          </ShadcnMenubarRadioGroup>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarItem inset>Edit...</ShadcnMenubarItem>
          <ShadcnMenubarSeparator />
          <ShadcnMenubarItem inset>Add Profile...</ShadcnMenubarItem>
        </ShadcnMenubarContent>
      </ShadcnMenubarMenu>
    </ShadcnMenubar>
  )
}
```

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

### Default NavigationMenu Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/NavigationMenu.stories.mdx

A basic implementation of the NavigationMenu component, showcasing a primary navigation item 'Home' with a dropdown content area. This example demonstrates the core structure for creating navigation hierarchies.

```jsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

export const Default = () => {
  return (
    <NavigationMenu viewport={false}>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Home</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
              <li className="row-span-3">
                <NavigationMenuLink asChild>
                  <a
                    className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
                    href="/"
                  >
                    <div className="mt-4 mb-2 text-lg font-medium">
                      shadcn/ui
                    </div>
                    <p className="text-muted-foreground text-sm leading-tight">
                      Beautifully designed components built with Tailwind CSS.
                    </p>
                  </a>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink asChild>
                  <>
                    <div className="text-sm leading-none font-medium">
                      Introduction
                    </div>
                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
                      Re-usable components built using Radix UI and Tailwind
                      CSS.
                    </p>
                  </>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink asChild>
                  <>
                    <div className="text-sm leading-none font-medium">
                      Installation
                    </div>
                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
                      How to install dependencies and structure your app.
                    </p>
                  </>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink asChild>
                  <>
                    <div className="text-sm leading-none font-medium">
                      Typography
                    </div>
                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
                      Styles for headings, paragraphs, lists...etc
                    </p>
                  </>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
              {[ { title: 'Alert Dialog', /* ... */ } ]}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}
```

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

### Skeleton Component Usage Examples

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Skeleton.stories.mdx

Demonstrates various ways to use the Skeleton component for different content structures, including text lines, profile cards, general cards, and table rows. Each example shows how to apply CSS classes to define the shape, size, and animation of the placeholders.

```tsx
// Text line skeletons
<div className="space-y-2">
  <Skeleton className="h-4 w-[250px]" />
  <Skeleton className="h-4 w-[200px]" />
  <Skeleton className="h-4 w-[150px]" />
</div>

// Profile card skeleton
<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[120px]" />
    <Skeleton className="h-3 w-[80px]" />
  </div>
</div>

// Card skeleton
<div className="space-y-3">
  <Skeleton className="h-[200px] w-full rounded-xl" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-3/4" />
    <Skeleton className="h-4 w-1/2" />
  </div>
</div>

// Table row skeletons
<div className="space-y-2">
  {Array.from({ length: 5 }).map((_, i) => (
    <div key={i} className="flex items-center space-x-4">
      <Skeleton className="h-4 w-4 rounded" />
      <Skeleton className="h-4 flex-1" />
      <Skeleton className="h-4 w-[100px]" />
      <Skeleton className="h-4 w-[80px]" />
    </div>
  ))}
</div>
```

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

### FullScreen Modal Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Modal.stories.mdx

Illustrates how to render the Modal component in full-screen mode.

```react
import React, { useState } from 'react';
import Modal from './Modal';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open FullScreen Modal</button>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Full Screen Modal"
        fullScreen={true}
      >
        <p>This modal takes up the entire screen.</p>
      </Modal>
    </div>
  );
}

export default App;
```

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

### Default RadioGroup Story Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/RadioGroup.stories.mdx

A simple example demonstrating the `RadioGroup` component with three predefined options ('default', 'comfortable', 'compact') and associated labels. This snippet showcases the basic rendering and functionality of the component in a typical usage scenario.

```tsx
export const Default = () => {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center gap-3">
        <RadioGroupItem value="default" id="r1" />
        <ShadcnLabel htmlFor="r1">Default</ShadcnLabel>
      </div>
      <div className="flex items-center gap-3">
        <RadioGroupItem value="comfortable" id="r2" />
        <ShadcnLabel htmlFor="r2">Comfortable</ShadcnLabel>
      </div>
      <div className="flex items-center gap-3">
        <RadioGroupItem value="compact" id="r3" />
        <ShadcnLabel htmlFor="r3">Compact</ShadcnLabel>
      </div>
    </RadioGroup>
  )
}
```

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

### International Configuration

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/DatetimePicker.stories.mdx

Shows how to configure the DatetimePicker for international use by setting the locale, display format, and the starting day of the week. This example uses German locale and Monday as the start of the week.

```tsx
import React, { useState } from 'react';

// Assuming DatetimePicker component is imported from its module
// import DatetimePicker from './DatetimePicker'; 

function App() {
  const [meetingTime, setMeetingTime] = useState(undefined);

  return (
    <DatetimePicker
      value={meetingTime}
      onChange={setMeetingTime}
      locale="de-DE"
      displayFormat="DD.MM.YYYY HH:mm"
      weekStartsOn={1} // Monday
      showWeekNumber
      label="Termindatum"
    />
  );
}

export default App;
```

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

### Basic Step Progress Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/StepProgress.stories.mdx

Demonstrates the basic usage of the StepProgress component with numeric steps and click navigation.

```javascript
import React, { useState } from 'react';
import StepProgress from './StepProgress';

function App() {
  const [currentStep, setCurrentStep] = useState(0);

  return (
    <div>
      <h1>Multi-Step Process</h1>
      <StepProgress
        value={currentStep}
        max={10} // Total number of steps
        onItemClick={(step) => setCurrentStep(step)}
      />
      <p>Current Step: {currentStep + 1}</p>
    </div>
  );
}

export default App;
```

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

### Basic Workflow Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Workflow.stories.mdx

Demonstrates the basic usage of the Workflow component with clickable steps and active state management using React's useState hook.

```javascript
import { useState } from 'react'
import Workflow from './Workflow'
import {
  workflowItemsDescription,
  workflowTooltipItems,
  workflowItems,
} from './values'

export function Default() {
  const [activeIx, setActiveIx] = useState(0)
  return (
    <div className="w-full">
      <div>
        The workflow component always grows to 100% width of the parent
        container and splits the available space evenly between the number of
        passed items. If a description is passed, the height of the component
        adapts accordingly. Limited custom styling is available. The items can
        contain custom data, which is passed back to the onClick handler.
      </div>
      <Workflow
        items={workflowItems}
        onClick={(item, ix) => setActiveIx(ix)}
        activeIx={activeIx}
      />
    </div>
  )
}
```

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

### Basic Drawer Usage Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Drawer.stories.mdx

Demonstrates the basic implementation of the Drawer component, including a trigger button and content with header, description, and footer actions.

```tsx
<Drawer>
  <DrawerTrigger asChild>
    <Button>Settings</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
      <DrawerDescription>Adjust your preferences</DrawerDescription>
    </DrawerHeader>
    <div className="p-4 space-y-4">
      <div className="flex items-center justify-between">
        <span>Notifications</span>
        <Switch />
      </div>
      <div className="flex items-center justify-between">
        <span>Dark Mode</span>
        <Switch />
      </div>
    </div>
    <DrawerFooter>
      <Button>Save</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

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

### Link Component Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Navigation.stories.mdx

Demonstrates the usage of a 'link' component, including its label, click handler, optional badge, and associated CSS classes.

```javascript
{
  key: 'dropdown-menubar-item1',
  type: 'link',
  label: 'Item 1',
  onClick: () => alert('Item 1 clicked'),
  notification: true,
}
```

```javascript
{
  key: 'dropdown-menubar-item2',
  type: 'link',
  label: 'Item 2',
  onClick: () => alert('Item 2 clicked'),
  badge: 'Coming Soon',
  className: { badge: 'bg-orange-500 hover:bg-orange-600' },
}
```

```javascript
{
  key: 'dropdown-menubar-item3',
  type: 'link',
  label: 'Item 3',
  onClick: () => alert('Item 3 clicked'),
}
```

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

### Basic FormikTextareaField Usage

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/forms/FormikTextareaField.stories.mdx

Example of using the FormikTextareaField component within a Formik form for collecting user comments. It demonstrates basic setup with a name, label, and submission handling.

```jsx
import { Form, Formik } from 'formik';
import FormikTextareaField from './FormikTextareaField';

// ... inside your component

<Formik
  initialValues={{ comment: '' }}
  onSubmit={(values) => console.log(values)}
>
  <Form>
    <FormikTextareaField
      name="comment"
      label="Comments"
      placeholder="Enter your comments here..."
    />
    {/* Other form elements */}
    <button type="submit">Submit</button>
  </Form>
</Formik>
```

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

### Required Switch

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/forms/FormikSwitchField.stories.mdx

Illustrates how to make a Switch component mandatory using the 'required' prop. This example shows the basic setup for a required switch within a Formik form, including submission handling.

```jsx
export const Required = () => {
  return (
    <Formik
      initialValues={{
        switch: false,
      }}
      isInitialValid={false}
      onSubmit={(values) => {
        alert(`Switch value:  ${values.switch}`)
      }}
    >
      {({ values }) => {
        return (
          <div>
            <Form>
              <FormikSwitchField
                required
                name="switch"
                label={values.switch ? 'Checked' : 'Unchecked'}
              />
              <Button className={{ root: 'mt-2' }} type="submit">
                Submit
              </Button>
            </Form>
          </div>
        )
      }}
    </Formik>
  )
}
```

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

### Render Compact ShadcnTable Structure in TSX

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/ShadcnTable.stories.mdx

Shows a simple, compact `ShadcnTable` structure with a header and initial columns, suitable for displaying concise data sets. This example provides a minimal setup for a table.

```tsx
// Compact table
<ShadcnTable>
  <ShadcnTableHeader>
    <ShadcnTableRow>
      <ShadcnTableHead className="w-[100px]">ID</ShadcnTableHead>
      <ShadcnTableHead>Task</ShadcnTableHead>
```

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

### Basic Button Navigation Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Navigation.stories.mdx

Demonstrates how to use the Navigation component with basic button items, including setting labels, click handlers, and active states.

```tsx
import Navigation from './Navigation';

// Assuming 'navigate' is a function for routing
const MyNavigation = () => (
  <Navigation
    items={[
      {
        type: 'button',
        key: 'home',
        label: 'Home',
        onClick: () => navigate('/home'),
        active: true
      },
      {
        type: 'button',
        key: 'about',
        label: 'About',
        onClick: () => navigate('/about')
      }
    ]}
  />
);
```

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

### Event Scheduling with FormikDatetimePicker

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/forms/FormikDatetimePicker.stories.mdx

Demonstrates scheduling an event with start and end times, including validation to ensure the start time is in the future and the end time is after the start time.

```tsx
import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import FormikDatetimePicker from './FormikDatetimePicker'; // Assuming FormikDatetimePicker is in the same directory
import Button from './Button'; // Assuming Button component exists

const handleEventCreation = (values) => {
  console.log('Event created:', values);
};

const EventSchedulingForm = () => {
  return (
    <Formik
      initialValues={{
        eventStart: new Date(),
        eventEnd: new Date(Date.now() + 2 * 60 * 60 * 1000) // +2 hours
      }}
      validationSchema={Yup.object({
        eventStart: Yup.date()
          .required('Start time is required')
          .min(new Date(), 'Start time must be in the future'),
        eventEnd: Yup.date()
          .required('End time is required')
          .min(Yup.ref('eventStart'), 'End time must be after start time')
      })}
      onSubmit={handleEventCreation}
    >
      <Form>
        <FormikDatetimePicker
          name="eventStart"
          label="Event Start"
          required
          tooltip="Select the event start date and time"
          placeholder="Choose start datetime"
        />

        <FormikDatetimePicker
          name="eventEnd"
          label="Event End"
          required
          tooltip="Select the event end date and time"
          placeholder="Choose end datetime"
        />

        <Button type="submit">Create Event</Button>
      </Form>
    </Formik>
  );
};

export default EventSchedulingForm;
```

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

### Basic Sidebar Usage Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Sidebar.stories.mdx

Demonstrates a basic implementation of the Sidebar component with header, grouped navigation, and main content.

```tsx
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2 className="text-lg font-semibold">My App</h2>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton asChild>
                <a href="/dashboard">Dashboard</a>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton asChild isActive>
                <a href="/projects">Projects</a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
      <SidebarTrigger />
      <h1>Main Content</h1>
    </header>
    <main className="flex flex-1 flex-col gap-4 p-4">
    </main>
  </SidebarInset>
</SidebarProvider>
```

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

### Default Checkbox Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Checkbox.stories.mdx

A basic example of a Checkbox component with its state managed by `useState`.

```tsx
export const Default = () => {
  const [isChecked, setIsChecked] = useState(true)
  return (
    <Checkbox checked={isChecked} onCheck={() => setIsChecked(!isChecked)} />
  )
}
```

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

### CycleProgress Component Usage Examples

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/CycleProgress.stories.mdx

Demonstrates various ways to use the CycleProgress component, including basic usage, different size variants, custom colors, and integrating custom content.

```jsx
import CycleProgress from './CycleProgress';

// Basic progress indicator
<CycleProgress percentage={75}>
  75%
</CycleProgress>

// Small size variant
<CycleProgress percentage={45} size="sm" strokeWidthRem={0.2}>
  45%
</CycleProgress>

// Custom color and styling
<CycleProgress
  percentage={90}
  color="#4CAF50"
  strokeWidthRem={0.4}
>
  <div className="text-sm font-bold text-green-600">
    Complete
  </div>
</CycleProgress>

// Dashboard widget with icon
<CycleProgress percentage={60} color="#2196F3">
  <div className="flex flex-col items-center">
    <DownloadIcon className="w-4 h-4" />
    <span className="text-xs">60%</span>
  </div>
</CycleProgress>

// Custom size override for specific layouts
<CycleProgress
  percentage={80}
  overrideSize={120}
  className={{ root: 'h-32 w-32 text-xl font-bold' }}
  color="linear-gradient(45deg, #FF6B35, #F7931E)"
>
  <div>
    <div className="text-2xl">80</div>
    <div className="text-xs">Tasks</div>
  </div>
</CycleProgress>

// Loading state indicator
const [progress, setProgress] = useState(0)

<CycleProgress percentage={progress} color="#9C27B0">
  {progress < 100 ? (
    <div className="animate-spin">⟳</div>
  ) : (
    <div className="text-green-500">✓</div>
  )}
</CycleProgress>

// Score display
<CycleProgress
  percentage={85}
  color={85 >= 80 ? "#4CAF50" : 85 >= 60 ? "#FF9800" : "#F44336"}
>
  <div className="text-center">
    <div className="font-bold">{85}</div>
    <div className="text-xs">Score</div>
  </div>
</CycleProgress>
```

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

### Default Countdown Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Countdown.stories.mdx

A basic example demonstrating how to use the Countdown component with an expiration time.

```jsx
export const Default = () => {
  const time = new Date()
  time.setSeconds(time.getSeconds() + 40)

return <Countdown expiresAt={time} />
}
```

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

### FormikColorPicker - Default Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/forms/FormikColorPicker.stories.mdx

A basic example of using the FormikColorPicker with a single color field and a submit button.

```jsx
import {
  Formik
} from 'formik';
import {
  FormikColorPicker
} from './FormikColorPicker'; // Assuming path to component
import {
  Form
} from './Form'; // Assuming Form component exists

export const Default = () => (
  <div>
    <Formik
      initialValues={{
        color: '#FF0000',
      }}
      onSubmit={async (values, {
        resetForm
      }) => {
        alert(
          `Form submitted with color: ${values.color}. The form will be reset.`
        )
        resetForm()
      }}
    >
      {({ values }) => {
        return (
          <div>
            <Form>
              <FormikColorPicker
                name="color"
                submitText="Save"
                colorLabel="Color"
                className={{ root: 'mb-4' }}
              />
            </Form>
          </div>
        )
      }}
    </Former>
  </div>
)
```

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

### CycleProgress Component Examples

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/CycleProgress.stories.mdx

Demonstrates various ways to use the CycleProgress component, including default usage, small size, custom colors, and overriding default sizing.

```jsx
export function Default() {
  return <CycleProgress percentage={60}>60</CycleProgress>
}
```

```jsx
export function Small() {
  return (
    <CycleProgress percentage={60} size="sm" strokeWidthRem={0.2}>
      60
    </CycleProgress>
  )
}
```

```jsx
export function Colored() {
  return (
    <CycleProgress percentage={60} color="#FF0000">
      60
    </CycleProgress>
  )
}
```

```jsx
export function OverrideSize() {
  return (
    <div>
      Depending on the type of font that was chosen, it is possible that the
      text does not appear centered. In this case, it might be necessary to
      override the size, which is set manually. However, this is explicitely set
      as an override to only be used when necessary. Whenever an override is
      used, the className root will probably also have to be adapted accordingly
      <CycleProgress
        percentage={60}
        overrideSize={40}
        className={{ root: 'h-20 w-20 text-xl font-bold' }}
      >
        60
      </CycleProgress>
    </div>
  )
}
```

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

### Basic User Notification Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/UserNotification.stories.mdx

A simple example of the UserNotification component displaying an informational message.

```tsx
import UserNotification from './UserNotification';

// ... inside a React component
<UserNotification message="This is an informational message." />
```

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

### Header Component Usage Examples

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Header.stories.mdx

Demonstrates various ways to use the Header components, including basic usage, custom styling, testing attributes, and integration into document structure.

```tsx
import Header from './Header';

// Page title
<Header.H1>Welcome to Our Application</Header.H1>

// Section heading
<Header.H2>Getting Started</Header.H2>

// Subsection
<Header.H3>Installation Steps</Header.H3>

// Minor section
<Header.H4>Prerequisites</Header.H4>

// With custom styling
<Header.H1 className="text-center text-blue-600">
  Custom Styled Heading
</Header.H1>

// With testing attributes
<Header.H2
  id="main-section"
  data={{ 'data-cy': 'section-heading', 'data-testid': 'main-section' }}
>
  Testable Section Heading
</Header.H2>

// Document structure example
<article>
  <Header.H1>Article Title</Header.H1>
  <section>
    <Header.H2>Introduction</Header.H2>
    <p>Article introduction...</p>

    <Header.H3>Key Points</Header.H3>
    <p>Important information...</p>

    <Header.H4>Details</Header.H4>
    <p>Detailed explanation...</p>
  </section>

  <section>
    <Header.H2>Conclusion</Header.H2>
    <p>Final thoughts...</p>
  </section>
</article>

// Dynamic heading levels
const HeadingComponent = ({ level, children }) => {
  const HeadingTag = Header[`H${level}`]
  return <HeadingTag>{children}</HeadingTag>
}

<HeadingComponent level={2}>Dynamic Heading</HeadingComponent>

// With complex content
<Header.H2>
  <span className="text-gray-500">Section:</span>{" "}
  <span className="font-bold">User Management</span>
</Header.H2>

// Form section headers
<form>
  <Header.H3>Personal Information</Header.H3>
  <PersonalFields />

  <Header.H3>Contact Details</Header.H3>
  <ContactFields />

  <Header.H4>Preferences</Header.H4>
  <PreferenceFields />
</form>

// Navigation integration
<nav>
  <Header.H2 className="sr-only">Main Navigation</Header.H2>
  <NavigationItems />
</nav>
```

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

### Account Recovery PIN Example

Source: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/forms/FormikPinField.stories.mdx

Provides an example of using FormikPinField for account recovery, including a descriptive header and tooltip.

```tsx
import { Form, Formik } from 'formik';
import FormikPinField from './FormikPinField';

// Account recovery PIN
<Formik
  initialValues={{ recoveryPin: '' }}
  onSubmit={handleRecovery}
>
  <Form className="space-y-4">
    <div className="text-center">
      <h2 className="text-xl font-semibold">Account Recovery</h2>
      <p className="text-gray-600">Enter your recovery PIN</p>
    </div>

    <FormikPinField
      name="recoveryPin"
      length={6}
      label="Recovery PIN"
      required
      tooltip="The 6-digit PIN provided during account setup"
    />
  </Form>
</Formik>
```