===============
LIBRARY RULES
===============
From library maintainers:
- Use Svelte 5 runes ($props, $state, $derived, $effect) for reactivity
- Import enums from '@requify/requify-design-system' for type-safe variants and sizes
- Always use TypeScript strict mode with comprehensive type definitions
- Follow existing component patterns for consistency
- Use CSS custom properties for theming, never hardcode colors
- Ensure all interactive elements are keyboard accessible
- Provide proper ARIA attributes for screen readers
- Use snippets for flexible content composition
- Test components in both light and dark modes
- Wrap bits-ui primitives with custom styling and theming
- Follow WCAG AA/AAA accessibility guidelines
- Use cn() utility for merging Tailwind classes
- Bind values with $bindable() for two-way data flow

### DropdownDivider Installation and Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Shows the Svelte installation for DropdownDivider and an example demonstrating its use as a visual separator between dropdown items.

```svelte
<script>
	import { DropdownDivider, DropdownItem } from 'requify-design-system';
</script>

<DropdownItem>Action 1</DropdownItem>
<DropdownDivider />
<DropdownItem>Action 2</DropdownItem>
```

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

### DropdownLink Installation and Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Explains the Svelte installation for DropdownLink and shows an example of creating clickable links within a dropdown menu.

```svelte
<script>
	import { DropdownLink } from 'requify-design-system';
</script>

<DropdownLink href="/settings">Settings</DropdownLink>
<DropdownLink href="/profile">Profile</DropdownLink>
```

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

### DropdownItem Installation and Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Provides the Svelte installation code for DropdownItem and an example of its usage with click handlers and custom classes.

```svelte
<script>
	import { DropdownItem } from 'requify-design-system';
</script>

<DropdownItem onclick={handleEdit}>Edit</DropdownItem>
<DropdownItem onclick={handleDelete} class="text-error-600">Delete</DropdownItem>
```

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

### DropdownHeader Installation and Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Details the Svelte installation for DropdownHeader and provides an example of its usage to group related dropdown items under a section title.

```svelte
<script>
	import { DropdownHeader, DropdownItem } from 'requify-design-system';
</script>

<DropdownHeader>Actions</DropdownHeader>
<DropdownItem>Edit</DropdownItem>
<DropdownItem>Delete</DropdownItem>
```

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

### Dropdown: Installation Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Shows the necessary import statements for using the Dropdown component and its related sub-components (DropdownItem, DropdownDivider, DropdownHeader, DropdownLink) from the 'requify-design-system' library in Svelte.

```svelte
<script>
	import {
		Dropdown,
		DropdownItem,
		DropdownDivider,
		DropdownHeader,
		DropdownLink
	} from 'requify-design-system';
</script>
```

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

### Setup Tailwind CSS and Typography Plugin

Source: https://github.com/requify-app/requify-design-system/blob/main/README.md

Installs Tailwind CSS and the @tailwindcss/typography plugin, essential for styling and component rendering. This step is crucial for the design system's functionality.

```bash
npm install -D tailwindcss @tailwindcss/typography
```

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

### Implement Keyboard Accessibility with Shortcuts (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

Shows how to ensure keyboard accessibility by adding keyboard shortcuts. This example uses Svelte's `onMount` lifecycle function to add a global keydown event listener that triggers a modal when '⌘K' or 'Ctrl+K' is pressed.

```svelte
<!-- Add keyboard shortcuts -->
<script lang="ts">
	import { onMount } from 'svelte';

	onMount(() => {
		const handleShortcut = (e: KeyboardEvent) => {
			if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
				e.preventDefault();
				openModal();
			}
		};
		window.addEventListener('keydown', handleShortcut);
		return () => window.removeEventListener('keydown', handleShortcut);
	});
</script>

<!-- Good - Keyboard accessible -->
<Button onclick={handleAction}>Click or press Enter</Button>

<p class="text-sm text-gray-500">Press ⌘K to open</p>
```

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

### Create Responsive Design with Size Variants (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

Demonstrates how to implement responsive design by using different size variants for components based on screen size. This example applies different sizes to a button using Tailwind CSS utility classes that target specific breakpoints (md, lg).

```svelte
<script lang="ts">
	import { Button } from '@requify/requify-design-system';
	import { ButtonVariant, ComponentSize } from '@requify/requify-design-system';
</script>

<!-- Responsive button sizes -->
<Button variant={ButtonVariant.PRIMARY} size={ComponentSize.SM} class="md:size-MD lg:size-LG">
	Responsive Button
</Button>
```

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

### Input Component Basic Usage and Sizing Examples

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/foundation.md

Demonstrates the basic usage of the Input component and how to apply different size variants (XS, SM, MD, LG, XL). These examples require no external dependencies beyond the Input component itself.

```svelte
<Label for="name">Name</Label>
<Input id="name" placeholder="Enter your name" bind:value={name} />
```

```svelte
<Input size={ComponentSize.XS} placeholder="Extra small" />
<Input size={ComponentSize.SM} placeholder="Small" />
<Input size={ComponentSize.MD} placeholder="Medium" />
<Input size={ComponentSize.LG} placeholder="Large" />
<Input size={ComponentSize.XL} placeholder="Extra large" />
```

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

### Requify Design System Development Commands

Source: https://github.com/requify-app/requify-design-system/blob/main/README.md

Provides essential commands for developing with the Requify Design System, including installing dependencies, starting the development server, building for production, type checking, and formatting code.

```bash
# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build

# Type check
bun run check

# Format code
bun run format
```

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

### Accordion Component Basic Setup (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Illustrates the fundamental setup for using the Accordion component in Svelte. It shows how to import and use `Accordion` and `AccordionItem` components, demonstrating a collapsible content panel structure.

```svelte
<script>
	import { Accordion, AccordionItem } from 'requify-design-system';
</script>
```

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

### Popover Installation

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Illustrates the basic import statement required to use the Popover component within a Svelte application. This setup is necessary before utilizing the Popover's functionality.

```svelte
<script>
	import { Popover } from 'requify-design-system';
</script>
```

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

### Svelte Theme Switching Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

A Svelte component demonstrating how to dynamically switch between themes ('light', 'dark', 'brand') by updating a state variable and setting a data attribute on the document's root element.

```svelte
<script lang="ts">
	import { setContext } from 'svelte';

	let theme = $state<'light' | 'dark' | 'brand'>('light');

	function setTheme(newTheme: typeof theme) {
		theme = newTheme;
		document.documentElement.setAttribute('data-theme', newTheme);
	}
</script>

<button onclick={() => setTheme('dark')}>Dark Theme</button>
<button onclick={() => setTheme('brand')}>Brand Theme</button>

```

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

### TableHead Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

A basic Svelte example demonstrating the usage of the TableHead component with TableHeadCell children.

```svelte
<TableHead>
	<TableHeadCell>Name</TableHeadCell>
	<TableHeadCell>Email</TableHeadCell>
</TableHead>
```

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

### Example Svelte Component Using Requify Components

Source: https://github.com/requify-app/requify-design-system/blob/main/README.md

Shows a practical example of using Requify Design System components like Card, Label, Input, and Button within a Svelte component. It demonstrates binding input values and setting component variants and sizes.

```svelte
<script lang="ts">
	import { Button, Card, Input, Label } from 'requify-design-system';
	import { ButtonVariant, ComponentSize } from 'requify-design-system';

	let inputValue = '';
</script>

<Card variant="default">
	<h3>Example Card</h3>
	<p>This is a sample card component.</p>
	<Label for="input">Enter text:</Label>
	<Input id="input" bind:value={inputValue} placeholder="Type something..." />
	<Button variant={ButtonVariant.PRIMARY} size={ComponentSize.MD}>Submit</Button>
</Card>
```

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

### Install Table Component - Svelte

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Demonstrates how to import and use the Table component and its related sub-components from the 'requify-design-system' package in a Svelte application. This is the initial setup for utilizing the table component.

```svelte
<script>
	import {
		Table,
		TableHead,
		TableBody,
		TableBodyRow,
		TableBodyCell,
		TableHeadCell
	} from 'requify-design-system';
</script>
```

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

### SidebarItem Installation - Svelte

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Shows how to install and import the `SidebarItem` component from the 'requify-design-system' package.

```svelte
<script>
	import { SidebarItem } from 'requify-design-system';
</script>
```

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

### StepIndicator Basic Installation

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Shows how to import and install the StepIndicator component from the requify-design-system package for use in multi-step workflows.

```svelte
<script>
	import { StepIndicator } from 'requify-design-system';
</script>
```

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

### Install Requify Search Component

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/forms.md

Demonstrates how to import and use the Search component from the 'requify-design-system' package in a Svelte application. This is the initial setup required before utilizing the component's features.

```svelte
<script>
	import { Search } from 'requify-design-system';
</script>
```

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

### Basic Table Example - Svelte

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Provides a fundamental example of the Table component in Svelte, showcasing how to structure table headers and body with data. This illustrates the basic rendering of tabular data.

```svelte
<Table>
	<TableHead>
		<TableHeadCell>Name</TableHeadCell>
		<TableHeadCell>Email</TableHeadCell>
		<TableHeadCell>Status</TableHeadCell>
	</TableHead>
	<TableBody>
		<TableBodyRow>
			<TableBodyCell>John Doe</TableBodyCell>
			<TableBodyCell>john@example.com</TableBodyCell>
			<TableBodyCell>Active</TableBodyCell>
		</TableBodyRow>
		<TableBodyRow>
			<TableBodyCell>Jane Smith</TableBodyCell>
			<TableBodyCell>jane@example.com</TableBodyCell>
			<TableBodyCell>Active</TableBodyCell>
		</TableBodyRow>
	</TableBody>
</Table>
```

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

### TableHeadCell Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

A basic Svelte example demonstrating the usage of the TableHeadCell component for table headers.

```svelte
<TableHeadCell>Name</TableHeadCell>
```

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

### Implement Navigation with Sidebar, SidebarGroup, SidebarItem, SidebarDropdown Svelte Components

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

This Svelte component example showcases the implementation of a sidebar navigation menu using components from '@requify/requify-design-system'. It demonstrates structuring navigation into groups, individual items with icons, and dropdown menus for hierarchical organization.

```svelte
<script lang="ts">
	import {
		Sidebar,
		SidebarGroup,
		SidebarItem,
		SidebarDropdown
	} from '@requify/requify-design-system';
</script>

<Sidebar activeUrl="/dashboard">
	<SidebarGroup title="Main Navigation">
		<SidebarItem href="/dashboard">
			{#snippet icon()}
				<Home class="h-5 w-5" />
			{/snippet}
			Dashboard
		</SidebarItem>
		<SidebarItem href="/analytics">
			{#snippet icon()}
				<BarChart class="h-5 w-5" />
			{/snippet}
			Analytics
		</SidebarItem>
		<SidebarItem href="/settings">
			{#snippet icon()}
				<Settings class="h-5 w-5" />
			{/snippet}
			Settings
		</SidebarItem>
	</SidebarGroup>

	<SidebarGroup title="Projects">
		<SidebarItem href="/projects/website">
			{#snippet icon()}
				<Globe class="h-5 w-5" />
			{/snippet}
			Website
		</SidebarItem>
		<SidebarItem href="/projects/mobile-app">
			{#snippet icon()}
				<Smartphone class="h-5 w-5" />
			{/snippet}
			Mobile App
		</SidebarItem>
	</SidebarGroup>

	<SidebarDropdown title="More">
		<SidebarItem href="/documentation">Documentation</SidebarItem>
		<SidebarItem href="/support">Support</SidebarItem>
		<SidebarItem href="/help">Help Center</SidebarItem>
	</SidebarDropdown>
</Sidebar>
```

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

### Sidebar Installation - Svelte

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Demonstrates how to install and import the Sidebar component and its related sub-components from the 'requify-design-system' package.

```svelte
<script>
	import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdown } from 'requify-design-system';
</script>
```

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

### Listgroup Component Examples (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Illustrates how to use the Listgroup and ListgroupItem components in Svelte for organizing lists of content. Examples cover basic list creation, applying custom styling, incorporating icons, and showing an active list item state.

```svelte
<script>
	import { Listgroup, ListgroupItem } from 'requify-design-system';
	function select(item) {
		console.log('Selected:', item);
	}
</script>

<Listgroup>
	<ListgroupItem onclick={() => select('item1')}>Item 1</ListgroupItem>
	<ListgroupItem onclick={() => select('item2')}>Item 2</ListgroupItem>
	<ListgroupItem onclick={() => select('item3')}>Item 3</ListgroupItem>
</Listgroup>
```

```svelte
<script>
	import { Listgroup, ListgroupItem } from 'requify-design-system';
</script>

<Listgroup class="shadow-lg">
	<ListgroupItem>Item 1</ListgroupItem>
	<ListgroupItem>Item 2</ListgroupItem>
</Listgroup>
```

```svelte
<script>
	import { Listgroup, ListgroupItem } from 'requify-design-system';
	import User from './User.svelte'; // Assuming User icon component
	import Settings from './Settings.svelte'; // Assuming Settings icon component

	function goToProfile() {
		console.log('Go to profile');
	}
	function goToSettings() {
		console.log('Go to settings');
	}
</script>

<Listgroup>
	<ListgroupItem onclick={goToProfile}>
		<User class="mr-2 h-4 w-4" />
		Profile
	</ListgroupItem>
	<ListgroupItem onclick={goToSettings}>
		<Settings class="mr-2 h-4 w-4" />
		Settings
	</ListgroupItem>
</Listgroup>
```

```svelte
<script>
	import { Listgroup, ListgroupItem } from 'requify-design-system';
</script>

<Listgroup>
	<ListgroupItem class="bg-primary-50 text-primary-700">Active Item</ListgroupItem>
	<ListgroupItem>Other Item</ListgroupItem>
</Listgroup>
```

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

### Product Card Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/foundation.md

An example of a Card component used to display product information, including an image, name, and price. It utilizes the `hoverable` prop for an interactive effect.

```svelte
<Card variant="elevated" hoverable>
	<img src="/product.jpg" alt="Product" class="mb-4 rounded-lg" />
	<h4>Product Name</h4>
	<p class="text-primary-600 text-lg font-bold">$99.99</p>
</Card>
```

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

### Install Requify Design System Package

Source: https://github.com/requify-app/requify-design-system/blob/main/README.md

Installs the Requify Design System package using npm, yarn, or bun. This is the first step to integrating the design system into your project.

```bash
npm install @requify/requify-design-system
# or
yarn add @requify/requify-design-system
# or
bun add @requify/requify-design-system
```

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

### Blockquote Component Examples (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/typography.md

Demonstrates the Blockquote component for displaying quoted text. Includes examples of a basic blockquote and a blockquote with a citation, showcasing proper semantic markup and styling for testimonials or highlighted text.

```svelte
<script>
	import { Blockquote } from 'requify-design-system';
</script>
```

```svelte
<Blockquote>This is a quoted text block for testimonials or citations.</Blockquote>
```

```svelte
<Blockquote>
	<P>"Design is not just what it looks like and feels like. Design is how it works."</P>
	<cite class="mt-2 block text-sm text-gray-600">— Steve Jobs</cite>
</Blockquote>
```

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

### ListgroupItem Installation and Basic Usage

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Provides instructions for installing the ListgroupItem component from the requify-design-system package and demonstrates its basic usage with a click handler.

```svelte
<script>
	import { ListgroupItem } from 'requify-design-system';
</script>

<ListgroupItem onclick={handleClick}>Item</ListgroupItem>
```

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

### TableBodyRow Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

A Svelte example demonstrating the TableBodyRow component with an 'onclick' handler and TableBodyCell children.

```svelte
<TableBodyRow onclick={viewRow}>
	<TableBodyCell>Data</TableBodyCell>
</TableBodyRow>
```

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

### Button Installation - Svelte

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/foundation.md

Demonstrates how to import the Button component and its associated types from the 'requify-design-system' package.

```svelte
<script>
	import { Button, ButtonVariant, ComponentSize } from 'requify-design-system';
</script>
```

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

### TabsList Component Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Demonstrates the basic usage of the TabsList component within a Tabs structure.

```svelte
<Tabs>
	<TabsList>
		<TabsTrigger value="tab1">Tab 1</TabsTrigger>
		<TabsTrigger value="tab2">Tab 2</TabsTrigger>
	</TabsList>
	<TabsContent value="tab1">Content</TabsContent>
</Tabs>
```

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

### TabsContent Component Installation and Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

The TabsContent component displays the content for a specific tab. It needs to be imported and used with a 'value' prop that matches the corresponding TabsTrigger. The 'children' prop holds the content to be displayed when the tab is active. Additional CSS classes can be applied using the 'class' prop.

```svelte
<script>
	import { TabsContent } from 'requify-design-system';
</script>

<TabsContent value="profile">
	<h3>Profile Settings</h3>
	<p>Configure your profile preferences</p>
</TabsContent>
```

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

### Progressbar Installation (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Instructions for installing the Progressbar component in a Svelte project. It requires importing 'Progressbar', 'ProgressbarVariant', and 'ComponentSize' from 'requify-design-system'.

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
</script>
```

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

### Install Select Component - Svelte

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/forms.md

Demonstrates how to import and install the Select component from the 'requify-design-system' library in a Svelte project. This is the initial step before using the component in your application.

```svelte
<script>
	import { Select } from 'requify-design-system';
</script>
```

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

### StepIndicator Basic 3-Step Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

A fundamental example of the StepIndicator component, displaying a basic 3-step process with labels and setting the current step.

```svelte
<StepIndicator currentStep={1} steps={['Step 1', 'Step 2', 'Step 3']} />
```

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

### CloseButton Basic Usage and Integration Examples (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/foundation.md

Provides examples of using the CloseButton component. This includes basic integration with an `onclick` handler, use within a Modal header, and custom positioning using absolute CSS.

```svelte
<script>
	import { CloseButton } from 'requify-design-system';
</script>

<CloseButton onclick={handleClose} />
```

```svelte
<script>
	import { Modal, CloseButton } from 'requify-design-system';

	isOpen: boolean;
</script>

<Modal bind:open={isOpen} title="Settings">
	<!-- Modal content -->
</Modal>
```

```svelte
<script>
	import { CloseButton } from 'requify-design-system';
</script>

<div class="relative">
	<Card>
		<p>Content</p>
	</Card>
	<CloseButton class="absolute top-2 right-2" onclick={handleClose} />
</div>
```

```svelte
<script>
	import { Alert, CloseButton } from 'requify-design-system';
</script>

<Alert dismissible onDismiss={handleDismiss}>
	<p>This is an alert with a close button</p>
</Alert>
```

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

### TableBody Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

A Svelte example showcasing the TableBody component containing TableBodyRow and TableBodyCell components.

```svelte
<TableBody>
	<TableBodyRow>
		<TableBodyCell>John</TableBodyCell>
		<TableBodyCell>Doe</TableBodyCell>
	</TableBodyRow>
</TableBody>
```

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

### AccordionItem: Basic Usage Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Provides a simple example of how to use the AccordionItem component. It requires a 'value' and 'title' prop, and its content is placed between the opening and closing tags.

```svelte
<AccordionItem value="faq1" title="Question?">
	<p>Answer goes here</p>
</AccordionItem>
```

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

### Warning Message Alert Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Presents an example of the Alert component used for warning messages, employing the 'warning' variant to alert users of potential issues.

```svelte
<Alert variant={AlertVariant.WARNING}>
	<p>Your session will expire in 5 minutes</p>
</Alert>
```

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

### Success Message Alert Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Provides a specific example of using the Alert component for success messages. It utilizes the 'success' variant for clear visual feedback.

```svelte
<Alert variant={AlertVariant.SUCCESS}>
	<p>Profile updated successfully!</p>
</Alert>
```

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

### TabsList Component Installation

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Shows how to import the TabsList component from the requify-design-system.

```svelte
<script>
	import { TabsList } from 'requify-design-system';
</script>
```

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

### Tooltip with All Sides Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Provides examples of the Tooltip component placed on all four sides ('top', 'right', 'bottom', 'left') relative to the trigger button. This showcases the versatility of the 'side' prop.

```svelte
<Tooltip content="Top" side="top">
	<Button>Top</Button>
</Tooltip>

<Tooltip content="Right" side="right">
	<Button>Right</Button>
</Tooltip>

<Tooltip content="Bottom" side="bottom">
	<Button>Bottom</Button>
</Tooltip>

<Tooltip content="Left" side="left">
	<Button>Left</Button>
</Tooltip>
```

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

### Accordion: Rich Content Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Demonstrates using the Accordion component with complex content inside its panels. This example shows the inclusion of form elements like Input, Switch, and Select within an AccordionItem.

```svelte
<Accordion>
	<AccordionItem value="settings1" title="General Settings">
		<div class="space-y-4">
			<Input placeholder="App name" />
			<Switch>Dark mode</Switch>
			<Select options={languageOptions} />
		</div>
	</AccordionItem>
</Accordion>
```

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

### Form Helper Component Examples

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/other.md

Demonstrates the usage of the Helper component specifically within form contexts. Examples include basic form helpers, validation feedback, format hints, character counts, and multiple helpers. It's designed to work with other form components like Label, Input, and Textarea.

```svelte
<script>
	let message = $state('');
</script>

<Label for="email">Email</Label>
<Input id="email" />
<Helper>Enter your work email address</Helper>

<Label for="password">Password</Label>
<Input id="password" />
<Helper color="error">Password must be at least 8 characters</Helper>

<Label for="phone">Phone</Label>
<Input id="phone" />
<Helper>Format: (555) 123-4567</Helper>

<Label for="message">Message</Label>
<Textarea id="message" bind:value={message} />
<Helper>{message.length}/500 characters</Helper>

<div class="space-y-2">
	<Helper>Enter your full name</Helper>
	<Helper color="warning">This will be visible on your profile</Helper>
</div>
```

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

### Breadcrumb Component Installation and Examples (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

The Breadcrumb component provides a hierarchical navigation trail. It accepts BreadcrumbItem components as children and can be styled with additional CSS classes. Examples demonstrate basic usage, integration with icons, placement within page headers, and dynamic generation.

```svelte
<script>
	import { Breadcrumb, BreadcrumbItem } from 'requify-design-system';
</script>

<Breadcrumb>
	<BreadcrumbItem href="/">Home</BreadcrumbItem>
	<BreadcrumbItem href="/products">Products</BreadcrumbItem>
	<BreadcrumbItem href="/products/laptops">Laptops</BreadcrumbItem>
	<BreadcrumbItem>MacBook Pro</BreadcrumbItem>
</Breadcrumb>
```

```svelte
<script>
	import { Breadcrumb, BreadcrumbItem } from 'requify-design-system';
	import { Home } from 'lucide-svelte'; // Assuming lucide-svelte for icons
</script>

<Breadcrumb>
	<BreadcrumbItem href="/">
		<Home class="h-4 w-4" />
	</BreadcrumbItem>
	<BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
</Breadcrumb>
```

```svelte
<script>
	import { Breadcrumb, BreadcrumbItem } from 'requify-design-system';
	import { Card } from 'requify-design-system'; // Assuming Card component exists
</script>

<Card>
	<h1 class="text-2xl font-bold">MacBook Pro</h1>
	<Breadcrumb class="mt-2">
		<BreadcrumbItem href="/">Home</BreadcrumbItem>
		<BreadcrumbItem href="/products">Products</BreadcrumbItem>
		<BreadcrumbItem>MacBook Pro</BreadcrumbItem>
	</Breadcrumb>
</Card>
```

```svelte
<script>
	import { Breadcrumb, BreadcrumbItem } from 'requify-design-system';

	const breadcrumbs = $derived([
		{ label: 'Home', href: '/' },
		{ label: 'Category', href: '/category' },
		{ label: currentProduct.name } // Assuming currentProduct is defined elsewhere
	]);
</script>

<Breadcrumb>
	{#each breadcrumbs as crumb, i}
		{#if i < breadcrumbs.length - 1}
			<BreadcrumbItem href={crumb.href}>{crumb.label}</BreadcrumbItem>
		{:else}
			<BreadcrumbItem>{crumb.label}</BreadcrumbItem>
		{/if}
	{/each}
</Breadcrumb>
```

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

### Basic Spinner Usage

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/foundation.md

A simple example of rendering the Spinner component with its default settings.

```svelte
<Spinner />
```

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

### DateRangePicker Component Installation (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/forms.md

Illustrates how to import the DateRangePicker component from 'requify-design-system' in Svelte. This component is used for selecting a start and end date for a range.

```svelte
<script>
	import { DateRangePicker } from 'requify-design-system';
</script>
```

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

### Toast Component Installation (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Imports the Toast component and its variant enum from the 'requify-design-system' library. This setup is necessary for displaying toast notifications in Svelte applications.

```svelte
<script>
	import { Toast, ToastVariant } from 'requify-design-system';
</script>
```

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

### Tabs Component Installation

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Shows how to import the necessary components for the Tabs interface from the requify-design-system.

```svelte
<script>
	import { Tabs, TabsList, TabsTrigger, TabsContent } from 'requify-design-system';
</script>
```

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

### Spinner Installation

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/foundation.md

Basic Svelte script to import and use the Spinner component from the requify-design-system library.

```svelte
<script>
	import { Spinner } from 'requify-design-system';
</script>
```

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

### Install Textarea Component (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/foundation.md

Shows how to import the Textarea component from the 'requify-design-system' package into a Svelte application.

```svelte
<script>
	import { Textarea } from 'requify-design-system';
</script>
```

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

### Svelte Onboarding Flow with Step Indicator

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Demonstrates a multi-step onboarding process using Svelte. It manages the current step and provides navigation controls. Dependencies include StepIndicator, Card, and Input components.

```svelte
<script>
	let currentStep = $state(1);

	function nextStep() {
		if (currentStep < 4) {
			currentStep++;
		}
	}

	function prevStep() {
		if (currentStep > 1) {
			currentStep--;
		}
	}
</script>

<StepIndicator {currentStep} steps={['Account', 'Profile', 'Preferences', 'Complete']} />

<div class="mt-8">
	{#if currentStep === 1}
		<Card>
			<h3>Create Account</h3>
			<Input placeholder="Email" />
			<Button onclick={nextStep}>Next</Button>
		</Card>
	{:else if currentStep === 2}
		<Card>
			<h3>Profile Setup</h3>
			<Input placeholder="Name" />
			<div class="flex gap-2">
				<Button variant={ButtonVariant.OUTLINE} onclick={prevStep}>Back</Button>
				<Button onclick={nextStep}>Next</Button>
			</div>
		</Card>
	{/if}
</div>
```

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

### Basic Tooltip Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Demonstrates the basic usage of the Tooltip component by wrapping a Button with a simple content string. This is the most straightforward way to add a tooltip.

```svelte
<Tooltip content="This is a tooltip">
	<Button>Hover me</Button>
</Tooltip>
```

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

### DateRangePicker Basic Usage (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/forms.md

A fundamental example of the DateRangePicker component in Svelte, using `bind:start` and `bind:end` to manage the selected date range. This is suitable for simple booking or filtering scenarios.

```svelte
<DateRangePicker bind:start={startDate} bind:end={endDate} />
```

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

### Drawer Usage Examples in Svelte

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Demonstrates various ways to use the Drawer component, including different placements (left, right, bottom, top), backdrop visibility control, custom transitions, and integrating complex content.

```svelte
<script>
	let showDrawer = $state(false);
</script>

<Button onclick={() => (showDrawer = true)}>Open Menu</Button>

<Drawer bind:open={showDrawer} placement="left">
	<h2>Settings</h2>
	<div class="mt-4 space-y-2">
		<SidebarItem href="/profile">Profile</SidebarItem>
		<SidebarItem href="/account">Account</SidebarItem>
	</div>
</Drawer>
```

```svelte
<Drawer bind:open={showDrawer} placement="right" backdrop>
	<Button onclick={() => (showDrawer = false)}>Close</Button>
	<p>Right drawer content</p>
</Drawer>
```

```svelte
<Drawer bind:open={showSheet} placement="bottom">
	<h3>Select Option</h3>
	<div class="mt-4 space-y-2">
		<Button variant={ButtonVariant.OUTLINE} onclick={selectOption(1)}>Option 1</Button>
		<Button variant={ButtonVariant.OUTLINE} onclick={selectOption(2)}>Option 2</Button>
	</div>
</Drawer>
```

```svelte
<Drawer bind:open={showDrawer} placement="right" backdrop={false}>
	<p>Drawer without backdrop</p>
</Drawer>
```

```svelte
<Drawer bind:open={showDrawer} placement="left" transitionParams={{ duration: 400 }}>
	<p>Slow fade drawer</p>
</Drawer>
```

```svelte
<Drawer bind:open={showDrawer} placement="top">
	<div class="p-4">
		<h3>Top Notification</h3>
		<p>Important message</p>
		<Button onclick={() => (showDrawer = false)}>Dismiss</Button>
	</div>
</Drawer>
```

```svelte
<Drawer bind:open={showDrawer} placement="right">
	<div class="space-y-6">
		<div>
			<h3 class="font-semibold">Filters</h3>
			<p class="text-sm text-gray-600">Refine your search</p>
		</div>

		<div class="space-y-3">
			<Label>Category</Label>
			<Select options={categories} />
		</div>

		<div class="space-y-3">
			<Label>Price Range</Label>
			<Input type="number" placeholder="Min" />
			<Input type="number" placeholder="Max" />
		</div>

		<Button variant={ButtonVariant.PRIMARY} onclick={applyFilters}>Apply Filters</Button>
	</div>
</Drawer>
```

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

### Input Component Installation

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/foundation.md

Shows how to import the Input component and related types like `ComponentSize` from the 'requify-design-system' library. The Input component is designed for single-line text entry.

```svelte
<script>
	import { Input, ComponentSize } from 'requify-design-system';
</script>
```

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

### Group Buttons with ButtonGroup Svelte Component

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

This Svelte component example shows how to group related buttons using the ButtonGroup component. It imports Button and ButtonGroup from '@requify/requify-design-system' and demonstrates the usage of ButtonVariant for styling.

```svelte
<script lang="ts">
	import { Button, ButtonGroup } from '@requify/requify-design-system';
	import { ButtonVariant } from '@requify/requify-design-system';
</script>

<ButtonGroup>
	<Button variant={ButtonVariant.OUTLINE}>Cancel</Button>
	<Button variant={ButtonVariant.PRIMARY}>Confirm</Button>
</ButtonGroup>
```

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

### Multiple Indicators Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Demonstrates the usage of multiple indicators with different icons, variants, and sizes. This shows how to combine `Button`, `Indicator`, `Bell`, and `Mail` components for distinct notifications. Assumes `Button`, `Indicator`, `Bell`, and `Mail` components are available.

```svelte
<div class="relative">
	<Button icon>
		{#snippet icon()}
			<Bell class="h-4 w-4" />
		{/snippet}
	</Button>
	<Indicator variant="error" placement="top-right" size="lg" />
</div>

<div class="relative">
	<Button icon>
		{#snippet icon()}
			<Mail class="h-4 w-4" />
		{/snippet}
	</Button>
	<Indicator variant="warning" placement="top-right" size="md" />
</div>
```

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

### Basic Popover Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Demonstrates the fundamental usage of the Popover component. It requires a trigger element (a Button in this case) and content to display when the popover is open.

```svelte
<script>
	let showPopover = $state(false);
</script>

<Popover bind:open={showPopover}>
	{#snippet trigger()}
		<Button>Click to open</Button>
	{/snippet}
	<div>
		<h3>Popover Title</h3>
		<p>Popover content</p>
	</div>
</Popover>
```

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

### Svelte Dark Mode Toggle Example

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

A Svelte component that provides a manual toggle for dark mode. It manages a boolean state for dark mode, updates the `dark` class on the `documentElement`, and checks the system preference on component mount.

```svelte
<script lang="ts">
	import { onMount } from 'svelte';

	let isDarkMode = $state(false);

	function toggleDarkMode() {
		isDarkMode = !isDarkMode;
		document.documentElement.classList.toggle('dark', isDarkMode);
	}

	// Check system preference on mount
	onMount(() => {
		isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
		document.documentElement.classList.toggle('dark', isDarkMode);
	});
</script>

<button onclick={toggleDarkMode}>
	{isDarkMode ? '☀️ Light' : '🌙 Dark'}
</button>

```

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

### Migrate from Tailwind Classes to Requify Button (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

Provides a migration example showing how to replace custom Tailwind CSS classes for a button with the equivalent Requify Design System `Button` component. This simplifies styling and ensures consistency with the design system.

```svelte
<!-- Before -->
<button class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Click me</button>

<!-- After -->
<Button variant={ButtonVariant.PRIMARY}>Click me</Button>
```

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

### Using Snippets for Icons in Buttons (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

Demonstrates how to leverage Svelte's snippet feature to embed icons within buttons, enhancing their visual appeal and functionality. This example shows the integration of Lucide Svelte icons with Requify's Button component for search and save actions.

```svelte
<script lang="ts">
	import { Button } from '@requify/requify-design-system';
	import { Search, Save } from '@lucide/svelte';
</script>

<!-- Search button with icon -->
<Button variant={ButtonVariant.PRIMARY}>
	{#snippet icon()}
		<Search class="h-4 w-4" />
	{/snippet}
	Search
</Button>

<!-- Save button with icon -->
<Button variant={ButtonVariant.SUCCESS}>
	{#snippet icon()}
		<Save class="h-4 w-4" />
	{/snippet}
	Save Changes
</Button>
```

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

### Basic Alert Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/feedback.md

Demonstrates the basic usage of the Alert component in Svelte. It displays a simple informational alert with content provided as children.

```svelte
<Alert>
	<p>This is an informational alert</p>
</Alert>
```

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

### Create Modals with Forms using Modal, Input, Label, Button Svelte Components

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

This Svelte component example demonstrates how to create a modal dialog with form elements using components from '@requify/requify-design-system'. It includes a title input, a description textarea, and action buttons for cancellation and creation, all managed within a Modal component.

```svelte
<script lang="ts">
	import { Modal, Input, Label, Button } from '@requify/requify-design-system';
	import { ModalSize, ButtonVariant } from '@requify/requify-design-system';

	let isOpen = $state(false);
	let title = $state('');
	let description = $state('');
</script>

<Modal bind:open={isOpen} size={ModalSize.LG} title="Create Post">
	<div class="space-y-4">
		<div>
			<Label for="post-title" required>Title</Label>
			<Input id="post-title" bind:value={title} placeholder="Enter post title" />
		</div>

		<div>
			<Label for="post-description" required>Description</Label>
			<Textarea id="post-description" bind:value={description} placeholder="What's on your mind?" />
		</div>
	</div>

	{#snippet footer()}
		<div class="flex justify-end gap-3">
			<Button variant={ButtonVariant.OUTLINE} onclick={() => (isOpen = false)}>Cancel</Button>
			<Button variant={ButtonVariant.PRIMARY} onclick={handleCreate}>Create Post</Button>
		</div>
	{/snippet}
</Modal>
```

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

### Paragraph Component Examples (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/typography.md

Demonstrates the usage of the Paragraph component (P) in Svelte, illustrating different text sizes ('xs' to 'xl') and font weights ('normal' to 'bold'). It covers basic usage and various stylistic options.

```svelte
<P>This is a standard paragraph with base size and weight.</P>
```

```svelte
<P size="xs">This is extra small text for captions.</P>
<P size="sm">This is smaller text for secondary content.</P>
<P size="base">This is base text for paragraphs.</P>
<P size="lg">This is larger text for emphasis.</P>
<P size="xl">This is extra large text for important content.</P>
```

```svelte
<P weight="bold">This is bold text for emphasis.</P>
```

```svelte
<P weight="normal">Normal weight</P>
<P weight="medium">Medium weight</P>
<P weight="semibold">Semibold weight</P>
<P weight="bold">Bold weight</P>
```

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

### Build Forms with Card, Input, Label, Button, Helper Svelte Components

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/usage-guides.md

This Svelte component example illustrates building a complex form structure using various components from '@requify/requify-design-system'. It includes input fields for name, email, and password, along with labels, helper text, and action buttons, all within a Card component.

```svelte
<script lang="ts">
	import { Card, Input, Label, Button, Helper } from '@requify/requify-design-system';
	import { ButtonVariant } from '@requify/requify-design-system';

	let name = $state('');
	let email = $state('');
	let password = $state('');
</script>

<Card variant="default">
	<form onsubmit={handleSubmit}>
		<!-- Name field -->
		<div class="mb-4">
			<Label for="name" required>Name</Label>
			<Input id="name" bind:value={name} placeholder="John Doe" />
			<Helper text="Your full name as it appears on official documents" />
		</div>

		<!-- Email field -->
		<div class="mb-4">
			<Label for="email" required>Email</Label>
			<Input
				id="email"
				type="email"
				bind:value={email}
				placeholder="john@example.com"
				error={emailError} />
			{#if emailError}
				<Helper text={emailError} error />
			{/if}
		</div>

		<!-- Password field with icon -->
		<div class="mb-6">
			<Label for="password" required>Password</Label>
			<Input id="password" type="password" bind:value={password} placeholder="••••••••••">
				{#snippet left()}
					<Lock class="h-4 w-4" />
				{/snippet}
			</Input>
		</div>

		<!-- Action buttons -->
		<div class="flex justify-end gap-3">
			<Button variant={ButtonVariant.OUTLINE} onclick={() => (window.location.href = '/login')}>
				Back to Login
			</Button>
			<Button variant={ButtonVariant.PRIMARY} type="submit">Create Account</Button>
		</div>
	</form>
</Card>
```

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

### Progressbar Component Examples (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Demonstrates various ways to use the Progressbar component in Svelte, including basic usage, color variants, size options, label positioning, custom sizing, and dynamic progress updates for scenarios like uploads and form completion. It also mentions accessibility best practices.

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
</script>

<Progressbar progress={50} />
```

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
</script>

<Progressbar progress={75} color={ProgressbarVariant.PRIMARY} />
<Progressbar progress={75} color={ProgressbarVariant.SECONDARY} />
<Progressbar progress={75} color={ProgressbarVariant.SUCCESS} />
<Progressbar progress={75} color={ProgressbarVariant.ERROR} />
<Progressbar progress={75} color={ProgressbarVariant.WARNING} />
<Progressbar progress={75} color={ProgressbarVariant.INFO} />
```

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
</script>

<Progressbar progress={30} size={ComponentSize.XS} />
<Progressbar progress={30} size={ComponentSize.SM} />
<Progressbar progress={30} size={ComponentSize.MD} />
<Progressbar progress={30} size={ComponentSize.LG} />
<Progressbar progress={30} size={ComponentSize.XL} />
```

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
</script>

<Progressbar progress={60} size={ComponentSize.SM} labelOutside />
```

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
</script>

<Progressbar progress={60} size={ComponentSize.LG} labelInside />
```

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
</script>

<Progressbar progress={90} color={ProgressbarVariant.ERROR} labelOutside />
```

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
</script>

<Progressbar progress={45} size="h-1" />
```

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
	let uploadProgress = $state(0);

	function simulateUpload() {
		const interval = setInterval(() => {
			uploadProgress += 10;
			if (uploadProgress >= 100) {
				clearInterval(interval);
			}
		}, 200);
	}
</script>

<Progressbar progress={uploadProgress} labelOutside color={ProgressbarVariant.PRIMARY} />
<p class="mt-1 text-sm text-gray-600">{uploadProgress}% complete</p>
```

```svelte
<script>
	import { Progressbar, ProgressbarVariant, ComponentSize } from 'requify-design-system';
	// Assume completedFields and totalFields are defined elsewhere
	let completedFields = 5;
	let totalFields = 10;
	let formProgress = $derived((completedFields / totalFields) * 100);
</script>

<Progressbar progress={formProgress} labelOutside color={ProgressbarVariant.SUCCESS} />
<p class="mt-1 text-sm text-gray-600">
	{completedFields} of {totalFields} fields completed
</p>
```

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

### SidebarDropdown Installation - Svelte

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/navigation.md

Demonstrates the installation and import of the `SidebarDropdown` component from the 'requify-design-system' package.

```svelte
<script>
	import { SidebarDropdown } from 'requify-design-system';
</script>
```

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

### Table with Pagination Example (Svelte)

Source: https://github.com/requify-app/requify-design-system/blob/main/src/docs/components/data-display.md

Shows a Svelte Table integrated with a Card and Pagination component. It requires 'Pagination', 'Card', and 'Table' components from 'requify-design-system'. The 'pages', 'goToPrevious', and 'goToNext' variables need to be defined in the script.

```svelte
<Card>
	<Table hoverable>
		<TableHead>
			<TableHeadCell>Name</TableHeadCell>
			<TableHeadCell>Email</TableHeadCell>
		</TableHead>
		<TableBody>
			<!-- Rows -->
		</TableBody>
	</Table>
	<div class="mt-4 flex justify-center">
		<Pagination {pages} previous={goToPrevious} next={goToNext} />
	</div>
</Card>
```