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

================
CODE SNIPPETS
================
TITLE: Default Command Palette Example with Suggestions and Settings (TSX)
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>
  )
}
```

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

TITLE: Default Pagination Component Example
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>
  )
}
```

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

TITLE: Basic Tabs Usage
DESCRIPTION: Example demonstrating the basic setup of the Tabs component with three distinct tab sections.

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

LANGUAGE: tsx
CODE:
```
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>
  )
}
```

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

TITLE: Basic Modal Example
DESCRIPTION: A simple example of a Modal component with only the essential props for opening and closing.

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

LANGUAGE: jsx
CODE:
```
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>
  )
}
```

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

TITLE: Navigation Handler Examples
DESCRIPTION: Provides examples of different navigation handler functions for various scenarios like form wizards, quiz reviews, and linear process tracking.

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

LANGUAGE: javascript
CODE:
```
// 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)
}
```

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

TITLE: Account Recovery PIN Example
DESCRIPTION: Provides an example of using FormikPinField for account recovery, including a descriptive header and tooltip.

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

LANGUAGE: tsx
CODE:
```
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>
```

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

TITLE: Basic AlertDialog Usage Example
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>
  )
}
```

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

TITLE: Simple Table Example
DESCRIPTION: A basic example of rendering a Table component with predefined columns and data.

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

LANGUAGE: jsx
CODE:
```
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>
);
```

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

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

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

LANGUAGE: tsx
CODE:
```
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%]" />
}
```

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

TITLE: Basic Step Progress Example
DESCRIPTION: Demonstrates the basic usage of the StepProgress component with numeric steps and click navigation.

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

LANGUAGE: javascript
CODE:
```
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;
```

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

TITLE: Default Dropdown Example
DESCRIPTION: A basic example of the Dropdown component rendering simple clickable menu items.

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

LANGUAGE: jsx
CODE:
```
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>
)
}

```

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

TITLE: Default ShadcnProgress Component Example
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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%]" />
}
```

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

TITLE: Default Collapsible Example
DESCRIPTION: A simple example demonstrating the default usage of the Collapsible component with basic static and closed content.

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

LANGUAGE: tsx
CODE:
```
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>
  )
}
```

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

TITLE: ATM-Style PIN Entry Example
DESCRIPTION: Shows an example of an ATM-style PIN entry using FormikPinField with custom styling and validation.

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

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

// ATM-style PIN entry
<Formik
  initialValues={{ atmPin: '' }}
  validationSchema={pinValidationSchema} // Assuming pinValidationSchema is defined elsewhere
  onSubmit={handleATMAccess}
>
  <Form>
    <FormikPinField
      name="atmPin"
      length={4}
      label="ATM PIN"
      required
      tooltip="Enter your 4-digit ATM PIN"
      className={{
        field: 'max-w-xs mx-auto',
        input: 'text-center font-mono text-lg'
      }}
    />
  </Form>
</Formik>
```

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

TITLE: Card Component Usage Examples
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>
```

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

TITLE: ShadcnMenubar Component Example
DESCRIPTION: 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.

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

LANGUAGE: jsx
CODE:
```
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>
  )
}
```

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

TITLE: FormikColorPicker - Default Example
DESCRIPTION: A basic example of using the FormikColorPicker with a single color field and a submit button.

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

LANGUAGE: jsx
CODE:
```
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>
)
```

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

TITLE: Default NavigationMenu Example
DESCRIPTION: 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.

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

LANGUAGE: jsx
CODE:
```
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>
  )
}
```

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

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

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

LANGUAGE: javascript
CODE:
```
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>
  )
}
```

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

TITLE: Link Component Example
DESCRIPTION: Demonstrates the usage of a 'link' component, including its label, click handler, optional badge, and associated CSS classes.

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

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

LANGUAGE: javascript
CODE:
```
{
  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' },
}
```

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

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

TITLE: Basic Drawer Usage Example
DESCRIPTION: Demonstrates the basic implementation of the Drawer component, including a trigger button and content with header, description, and footer actions.

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

LANGUAGE: tsx
CODE:
```
<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>
```

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

TITLE: Skeleton Component Usage Examples
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
// 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>
```

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

TITLE: FullScreen Modal Example
DESCRIPTION: Illustrates how to render the Modal component in full-screen mode.

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

LANGUAGE: react
CODE:
```
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;
```

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

TITLE: Basic Sidebar Usage Example
DESCRIPTION: Demonstrates a basic implementation of the Sidebar component with header, grouped navigation, and main content.

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

LANGUAGE: tsx
CODE:
```
<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>
```

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

TITLE: Default Countdown Example
DESCRIPTION: A basic example demonstrating how to use the Countdown component with an expiration time.

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

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

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

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

TITLE: Default RadioGroup Story Example
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>
  )
}
```

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

TITLE: Basic PIN Entry Form Example
DESCRIPTION: Demonstrates a simple Formik form with the FormikPinField component for basic PIN entry and submission.

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

LANGUAGE: tsx
CODE:
```
import { Form, Formik } from 'formik';
import Button from '../Button';
import FormikPinField from './FormikPinField';

// Basic PIN entry form
<Formik
  initialValues={{ pin: '' }}
  onSubmit={(values) => console.log(values)}
>
  <Form>
    <FormikPinField
      name="pin"
      length={6}
      label="Security PIN"
      required
    />
    <Button type="submit">Verify PIN</Button>
  </Form>
</Formik>
```

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

TITLE: Basic Action Menu Example
DESCRIPTION: Demonstrates the basic usage of the Dropdown component to create an action menu with clickable items.

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

LANGUAGE: tsx
CODE:
```
import Dropdown from './Dropdown';

// Assuming handleEdit and handleDelete are defined elsewhere
const handleEdit = () => console.log('Edit clicked');
const handleDelete = () => console.log('Delete clicked');

<Dropdown
  trigger="Actions"
  items={[
    { label: "Edit", onClick: handleEdit },
    { label: "Delete", onClick: handleDelete },
  ]} />
```

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

TITLE: Collapsible with Buttons Example
DESCRIPTION: An example showcasing the Collapsible component with string-based primary and secondary buttons, including their respective click handlers.

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

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

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

export const Buttons = () => {
  const [open, setOpen] = useState(false)
  return (
    <Collapsible
      open={open}
      onChange={() => {
        setOpen(!open)
      }}
      staticContent="Static content"
      closedContent="Closed content"
      primary="Primary"
      secondary="Secondary"
      onPrimaryClick={() => alert('Primary button was pushed')}
      onSecondaryClick={() => alert('Secondary button was clicked')}
    >
      Dynamic content
    </Collapsible>
  )
}
```

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

TITLE: Basic Button Navigation Example
DESCRIPTION: Demonstrates how to use the Navigation component with basic button items, including setting labels, click handlers, and active states.

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

LANGUAGE: tsx
CODE:
```
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')
      }
    ]}
  />
);
```

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

TITLE: Default Toggle Example
DESCRIPTION: A basic example of the Toggle component used for bold text formatting, featuring a 'Bold' icon from 'lucide-react'.

SOURCE: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Toggle.stories.mdx#_snippet_1

LANGUAGE: react
CODE:
```
import { Bold } from 'lucide-react'
import { Toggle } from './Toggle'

export const Default = () => {
  return (
    <Toggle aria-label="Toggle italic">
      <Bold className="h-4 w-4" />
    </Toggle>
  )
}
```

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

TITLE: Quick Info Hover Card Example
DESCRIPTION: An example of using HoverCard with custom delays to display a quick informational tip.

SOURCE: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/HoverCard.stories.mdx#_snippet_3

LANGUAGE: tsx
CODE:
```
import { Button } from './Button'
import { HoverCard, HoverCardContent, HoverCardTrigger } from './HoverCard'

// Quick info hover card
<HoverCard openDelay={500} closeDelay={100}>
  <HoverCardTrigger asChild>
    <Button variant="ghost" size="sm">
      ℹ️ Info
    </Button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="text-sm">
      <strong>Pro Tip:</strong> You can use keyboard shortcuts to navigate faster.
    </div>
  </HoverCardContent>
</HoverCard>
```

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

TITLE: Tooltip Component API Documentation
DESCRIPTION: API documentation for the Tooltip component, detailing its props, structure, and usage examples.

SOURCE: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/Tooltip.stories.mdx#_snippet_0

LANGUAGE: APIDOC
CODE:
```
Tooltip Component API Documentation:

Overview:
  Enhanced contextual information overlay component built on Shadcn UI primitives with custom styling, delay control, flexible content support, and comprehensive accessibility features.

Dependencies:
  - Shadcn UI Tooltip primitives for behavior and accessibility
  - React node support for custom content rendering
  - CSS styling system for tooltip appearance and arrow
  - Positioning system for tooltip placement
  - Testing attribute support for trigger and content

Available Stories:
  - Default: Basic tooltip with string content
  - MultiLine: Tooltip on text content with wrapping
  - Styled: Custom styling for tooltip and arrow colors
  - Children: React node content with custom components
  - Delay: Custom delay timing before tooltip appears

Props (Tooltip component):
  - id?: string - HTML id attribute for the tooltip
  - data?: Record<string, string> - Data attributes for trigger testing (e.g. data-test or data-cy)
  - dataContent?: Record<string, string> - Data attributes for tooltip content testing (e.g. data-test or data-cy)
  - tooltip: string | React.ReactNode - Content to display in the tooltip
  - delay?: number - Delay in milliseconds before tooltip appears
  - children: React.ReactNode - Element that triggers the tooltip
  - className?: Record<string, string> - Styling overrides for tooltip and arrow (e.g., { tooltip: 'bg-green-600 text-white font-semibold', arrow: 'fill-green-600' })

Component Structure:
  - Trigger element (children) with hover/focus detection
  - Tooltip overlay positioned relative to trigger
  - Arrow pointing to trigger element
  - Automatic positioning based on available space
  - Keyboard and mouse interaction support

Usage Examples:

  // Basic tooltip with string content
  <Tooltip tooltip="This is helpful information">
    <Button>Hover me</Button>
  </Tooltip>

  // Icon with explanatory tooltip
  <Tooltip tooltip="Search through all documents in your library">
    <FontAwesomeIcon icon={faSearch} className="cursor-pointer" />
  </Tooltip>

  // Complex content with React nodes
  <Tooltip
    tooltip={
      <div>
        <strong>Pro Tip:</strong>
        <p>Use Ctrl+K to open the search quickly</p>
      </div>
    }
  >
    <SearchInput />
  </Tooltip>

  // Custom delay for different UX needs
  <Tooltip
    tooltip="This appears after 2 seconds"
    delay={2000}
  >
    <QuestionMarkIcon />
  </Tooltip>

  // Custom styled tooltip
  <Tooltip
    tooltip="Success message"
    className={{
      tooltip: 'bg-green-600 text-white font-semibold',
      arrow: 'fill-green-600'
    }}
  >
    <SuccessIcon />
  </Tooltip>

  // Form field help
  <div className="flex items-center gap-2">
    <label htmlFor="password">Password</label>
    <Tooltip tooltip="Password must be at least 8 characters with uppercase, lowercase, and numbers">
      <FontAwesomeIcon
        icon={faInfoCircle}
        className="text-gray-400 cursor-help"
      />
    </Tooltip>
  </div>
  <input
    id="password"
    type="password"
    placeholder="Enter password"
  />

  // Disabled button explanation
  <Tooltip
    tooltip={
      !hasPermission
        ? "You don't have permission to perform this action"
        : "Feature temporarily unavailable"
    }
  >
    <Button disabled={!hasPermission || !featureEnabled}>
      Protected Action
    </Button>
  </Tooltip>

  // Navigation item descriptions
  <nav>
    {menuItems.map(item => (
      <Tooltip key={item.id} tooltip={item.description}>
        <NavLink to={item.path}>

```

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

TITLE: Default Label Component Example
DESCRIPTION: A basic example of the `Label` component, demonstrating its default rendering with a simple text label.

SOURCE: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/forms/Label.stories.mdx#_snippet_13

LANGUAGE: jsx
CODE:
```
export const Default = () => {
  return <Label label="Labels cannot be selected with double click" />
}
```

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

TITLE: NotificationBadgeWrapper Default Example
DESCRIPTION: A basic example demonstrating the default usage of the NotificationBadgeWrapper component with a count and a custom child div. It illustrates the component's role as a wrapper for displaying badges.

SOURCE: https://github.com/uzh-bf/design-system/blob/main/packages/design-system/src/NotificationBadgeWrapper.stories.mdx#_snippet_8

LANGUAGE: jsx
CODE:
```
export const Default = () => {
  return (
    <div>
      Please note: This component is meant as a wrapper component that can be
      used to display a notification badge on top of its child component.
      Various positioning and styling options are available, while still hiding
      as much of the logic as possible.
      <NotificationBadgeWrapper count={4} className={{ root: 'w-32' }}>
        <div className="border-uzh-grey-80 flex h-10 w-32 flex-col justify-center rounded-md border border-solid">
          Content DIV
        </div>
      </NotificationBadgeWrapper>
    </div>
  )
}
```

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

TITLE: Sidebar with Search and Documentation Example
DESCRIPTION: Illustrates a Sidebar implementation featuring a search input within the header for documentation navigation.

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

LANGUAGE: tsx
CODE:
```
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <div className="space-y-2">
        <h2 className="text-lg font-semibold">Documentation</h2>
        <SidebarGroup className="py-0">
          <SidebarGroupContent className="relative">
            <SidebarInput
              placeholder="Search docs..."
              className="pl-8"
            />
            <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          </SidebarGroupContent>
        </SidebarGroup>
      </div>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>

```

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

TITLE: Default Card Example with Login Form
DESCRIPTION: A complete example of the Card component used to create a login form. It includes a header with a title and description, input fields for email and password, and footer buttons for login actions.

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

LANGUAGE: tsx
CODE:
```
import { Button } from './Button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from './ui/card'
import { Input } from './ui/input'
import { Label } from './ui/label'

export const Default = () => {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Login to your account</CardTitle>
        <CardDescription>
          Enter your email below to login to your account
        </CardDescription>
        <Button>Sign Up</Button>
      </CardHeader>
      <CardContent>
        <form>
          <div className="flex flex-col gap-6">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="m@example.com"
                required
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="password">Password</Label>
                <a
                  href="#"
                  className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                >
                  Forgot your password?
                </a>
              </div>
              <Input id="password" type="password" required />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex-col gap-2">
        <Button type="submit" className={{ root: 'w-full' }}>
          Login
        </Button>
        <Button variant="outline" className={{ root: 'w-full' }}>
          Login with Google
        </Button>
      </CardFooter>
    </Card>
  )
}
```