Hopper Design System

https://github.com/workleap/wl-hopper
Admin
Hopper is a design system that provides reusable components and patterns for building user...
Tokens:141,818
Snippets:540
Trust Score:9.7
License:Apache-2.0
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install and Build Hopper

Source: https://github.com/workleap/wl-hopper/blob/main/README.md

Steps to clone the wl-hopper repository, install dependencies using pnpm, and build the project.

```bash
git clone https://github.com/workleap/wl-hopper.git
cd wl-hopper
pnpm i
pnpm build
```

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

### Run Development Server

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/README.md

Commands to start the development server using npm, yarn, or pnpm. Assumes a Next.js project structure.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

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

### Simple Content Section Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Example configuration for a 'tutorials' route, using source content and flattening the directory structure.

```typescript
"tutorials": {
    build: {
        source: "content/tutorials",
        flatten: true
    }
}
```

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

### Merged Documentation File Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Example configuration for merging multiple markdown files into a single 'api/complete-guide.md' using a template.

```typescript
"api/complete-guide.md": {
    build: {
        template: "/content/ai-templates/api-guide.mdx",
        merge: [
            "/api/introduction.md",
            "/api/authentication.md", 
            "/api/endpoints/*.md"
        ]
    }
}
```

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

### Install Hopper for Other JavaScript/TypeScript Projects

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/overview/installation.mdx

Use Hopper seamlessly with other JavaScript or TypeScript-based setups, including various frameworks or libraries.

```JavaScript
import JsIcon from "./JSIcon.tsx"

// Example usage within a JavaScript/TypeScript project:
<CardLink href="../installation-path/javascript" type="secondary" title="Other Frameworks or Libraries" description="Use Hopper seamlessly with other JavaScript or TypeScript-based setups.">
    <JsIcon />
</CardLink>
```

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

### Complex Component Documentation Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Example configuration for a 'components/advanced' route, including source, exclusions, flattening, markdown options, and a custom serve base URL path.

```typescript
"components/advanced": {
    build: {
        source: "content/components/advanced",
        excludedPaths: ["internal"],
        flatten: true,
        markdown: {
            includeFrontMatterLinks: true,
            excludedSections: ["## Implementation Details"]
        }
    },
    serve: {
        baseUrlPath: "/components/advanced"
    }
}
```

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

### Hopper Project Scripts

Source: https://github.com/workleap/wl-hopper/blob/main/README.md

Common scripts for managing the Hopper Design System project, including starting the documentation server, running Storybook, executing tests, linting code, and finding types from react-aria.

```javascript
pnpm doc:start
pnpm doc:storybook
pnpm test
pnpm lint
pnpm find-types
```

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

### Basic Page Structure

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/README.md

Example of a Next.js page file that can be edited to see auto-updates in the browser.

```typescript
app/page.tsx
```

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

### Card Component Usage Examples

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/content/Card.mdx

Demonstrates various ways to use the Card component, including preview, variants, sections, and layout samples for migration.

```Example
<Example src="card/docs/preview" isOpen />
```

```Example
<Example src="card/docs/variant" />
```

```Example
<Example src="card/docs/sections" />
```

```Example
<Example src="card/docs/migration/default" />
```

```Example
<Example src="card/docs/migration/image" />
```

```Example
<Example src="card/docs/migration/illustration" />
```

```Example
<Example src="card/docs/migration/size" />
```

```Example
<Example src="card/docs/migration/button" />
```

```Example
<Example src="card/docs/migration/buttongroup" />
```

```Example
<Example src="card/docs/migration/orientation" />
```

```Example
<Example src="card/docs/migration/fluid" />
```

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

### Modal Usage Examples

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/overlays/Modal.mdx

Demonstrates various ways to use the Modal component, including default setup, with images, choice modals, header/footer configurations, button arrangements, dismissability control, controlled state management, custom triggers, and different size options.

```tsx
<Modal>
    <Heading>Default Modal</Heading>
    <Content>This is the default modal content.</Content>
</Modal>
```

```tsx
<Modal>
    <Image src="/path/to/image.png" />
    <Heading>Modal with Image</Heading>
    <Content>This modal includes a side banner image.</Content>
</Modal>
```

```tsx
<Modal>
    <Heading>Choice Modal</Heading>
    <Content>Please choose one of the following options:</Content>
    <Footer>
        <ButtonGroup>
            <Button variant="secondary">Option 1</Button>
            <Button variant="primary">Option 2</Button>
        </ButtonGroup>
    </Footer>
</Modal>
```

```tsx
<Modal>
    <Header>
        <Heading>Modal with Header</Heading>
        <a href="/info" target="_blank">More Info</a>
    </Header>
    <Content>This modal has additional information in the header.</Content>
</Modal>
```

```tsx
<Modal>
    <Heading>Modal with Footer</Heading>
    <Content>This modal displays step information in the footer.</Content>
    <Footer>Step 1/3</Footer>
</Modal>
```

```tsx
<Modal>
    <Heading>Modal with Single Button</Heading>
    <Content>Perform the primary action.</Content>
    <Footer>
        <Button variant="primary">Confirm</Button>
    </Footer>
</Modal>
```

```tsx
<Modal>
    <Heading>Modal with Button Group</Heading>
    <Content>Choose between primary, secondary, or tertiary actions.</Content>
    <Footer>
        <ButtonGroup>
            <Button variant="tertiary">Cancel</Button>
            <Button variant="secondary">Back</Button>
            <Button variant="primary">Submit</Button>
        </ButtonGroup>
    </Footer>
</Modal>
```

```tsx
<Modal isDismissable={false} isKeyboardDismissDisabled={true}>
    <Heading>Non-Dismissable Modal</Heading>
    <Content>You must use the provided button to close this modal.</Content>
    <Footer>
        <Button variant="primary" onClick={closeModal}>Close</Button>
    </Footer>
</Modal>
```

```tsx
const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(true)}>Open Controlled Modal</button>
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
    <Heading>Controlled Modal</Heading>
    <Content>The open state is managed externally.</Content>
    <Footer>
        <Button variant="primary" onClick={() => setIsOpen(false)}>Close</Button>
    </Footer>
</Modal>
```

```tsx
<Modal>
    <Heading>Custom Trigger Modal</Heading>
    <Content>This modal is triggered by a custom element.</Content>
    <Footer>
        <Button variant="primary">OK</Button>
    </Footer>
</Modal>

<button>Custom Trigger</button>
```

```tsx
<Modal size="small">
    <Heading>Small Modal</Heading>
    <Content>This modal has a small size.</Content>
</Modal>

<Modal size="medium">
    <Heading>Medium Modal</Heading>
    <Content>This modal has the default medium size.</Content>
</Modal>

<Modal size="large">
    <Heading>Large Modal</Heading>
    <Content>This modal has a large size for more content.</Content>
</Modal>

<Modal size="extra-large">
    <Heading>Extra Large Modal</Heading>
    <Content>This modal is extra large.</Content>
</Modal>

<Modal size="fullscreen">
    <Heading>Fullscreen Modal</Heading>
    <Content>This modal takes up the entire screen.</Content>
</Modal>

<Modal size="fullscreenTakeover">
    <Heading>Fullscreen Takeover Modal</Heading>
    <Content>This modal takes over the full screen, similar to fullscreen but with a different behavior.</Content>
</Modal>
```

```tsx
<Modal size={{ mobile: "small", desktop: "large" }}>
    <Heading>Responsive Size Modal</Heading>
    <Content>This modal adjusts its size based on the screen width.</Content>
</Modal>
```

```tsx
<Modal>
    <Heading slot="title">Custom Layout Modal</Heading>
    <Content>This modal uses a custom layout.</Content>
</Modal>

<Modal aria-label="Custom Modal">
    <Content>This modal has an aria-label for accessibility.</Content>
</Modal>
```

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

### Install Hopper for React Applications

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/overview/installation.mdx

This is the most common way to integrate Hopper into your React project. It leverages React components provided by the design system.

```React
import ReactIcon from "./ReactIcon.tsx"

// Example usage within a React component:
<CardLink href="../installation-path/react" title="React Applications" description="The most common way to integrate Hopper.">
    <ReactIcon />
</CardLink>
```

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

### Install and Build wl-hopper

Source: https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md

Commands to install dependencies, build tokens, and run Storybook for the wl-hopper project.

```bash
pnpm
pnpm build:tokens
pnpm storybook
```

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

### Markdown: Example Heading

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A simple markdown heading example.

```markdown
### Markdown
```

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

### Install Hopper SVG Icons Package

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/installation-path/javascript.mdx

Installs the Hopper SVG icons package, providing a library of SVG icons for use in your project.

```bash
npm install @hopper-ui/svg-icons
```

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

### Install Hopper Packages

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/installation-path/react.mdx

Installs Hopper UI components, icons, styled-system, and related peer dependencies for React applications.

```bash
npm install @hopper-ui/components @hopper-ui/icons @hopper-ui/styled-system react-aria react-aria-components
```

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

### Install Hopper Tokens Package

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/installation-path/javascript.mdx

Installs the Hopper tokens package for use in your project. This package provides design tokens as CSS variables.

```bash
npm install @hopper-ui/tokens
```

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

### Use Hopper Design Tokens

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/installation-path/javascript.mdx

Example of how to apply Hopper design tokens as CSS variables to style elements in your project.

```css
.my-class {
    background-color: var(--hop-primary-surface-weak);
}
```

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

### Dockerfile: Example RUN Command

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A Dockerfile snippet showing a RUN command to execute a bash script, sourcing environment variables.

```dockerfile
RUN /bin/bash -c 'source $HOME/.bashrc && \
echo $HOME'
```

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

### Hopper MCP Server Tools for AI Agents

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/ai-for-agents/mcp-server.mdx

This section details the tools exposed by the Hopper MCP Server for AI agents. These tools facilitate various design system-related tasks, from getting started and component information to accessing design tokens and performing migrations.

```APIDOC
Tools:

- get_started: Provides a guided workflow for using the Hopper Design System.

- get_components_list: Retrieves a complete list of all available components in the Hopper Design System.

- get_component_usage: Fetches comprehensive component documentation, including anatomy, structure, examples, dos and don'ts, and best practices.

- get_component_props: Retrieves detailed component API information as JSON, including properties, attributes, methods, and events.

- get_design_tokens: Accesses the design tokens used in the Hopper Design System.

- get_guide: Provides access to comprehensive guides and best practices for the Hopper Design System.

- migrate_from_orbiter_to_hopper: Assists agents in migrating pages from Orbiter to Hopper using Design Systems Migrations Tools and provided guides.
```

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

### JSON: package.json Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A standard package.json file for a Node.js project, detailing dependencies, scripts, and project metadata.

```json
{
    "name": "wl-hopper",
    "version": "0.0.0",
    "description": "",
    "keywords": [],
    "author": "",
    "private": true,
    "license": "Apache-2.0",
    "packageManager": "pnpm@8.3.1",
    "scripts": {
        "doc:start": "pnpm --filter=docs dev",
        "doc:storybook": "pnpm --filter=docs storybook",
        "doc:build": "pnpm --filter=docs build",
        "lint": "pnpm run \"/^lint:.*/\"",
        "lint:eslint": "eslint . --ext .js,.jsx,.ts,.tsx  --cache --cache-location node_modules/.cache/eslint",
        "lint:types": "pnpm -r lint:types",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
        "@netlify/plugin-nextjs": "^4.36.0",
        "@workleap/eslint-plugin": "^1.0.0",
        "@workleap/typescript-configs": "^1.0.0"
    }
}
```

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

### YAML: Docker Compose Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A sample YAML configuration for Docker Compose, specifying service images and commands.

```yaml
docker:
    - image: ubuntu:14.04
    - image: mongo:2.6.8
      command: [mongod, --smallfiles]
    - image: postgres:9.4.1
```

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

### Semantic Color Token Example (Light Mode)

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/tokens/overview/introduction.mdx

Shows a semantic color token for light mode, conveying design intent and context.

```JavaScript
const semanticColorTokenLight = {
    name: "hop-primary-surface-disabled",
    value: "#95b1ff"
};
```

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

### JSON Build Configuration

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Configures the build process for generating JSON output from source content, primarily intended for component properties.

```typescript
"route-key": {
    build: {
        type: "json",
        source: "content/source-folder"
    }
}
```

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

### Semantic Color Token Example (Dark Mode)

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/tokens/overview/introduction.mdx

Illustrates a semantic color token for dark mode, reflecting context-aware design intent.

```JavaScript
const semanticColorTokenDark = {
    name: "hop-primary-surface-disabled",
    value: "#2040c7"
};
```

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

### Build and Run Hopper MCP Server Locally

Source: https://github.com/workleap/wl-hopper/blob/main/apps/mcp-server/README.md

Instructions to build the AI documentation and start the MCP server for local development. Assumes a monorepo structure where the build command needs to be run from the repository root.

```bash
cd ../..
# Run from root folder to ensure React 19 is available
pnpm build:ai-docs
```

```bash
cd apps/mcp-server
pnpm dev
```

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

### Styled System Do's and Don'ts Examples

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/styled-system/overview/introduction.mdx

Illustrates best practices for using styled system props in Hopper components, contrasting correct usage with incorrect patterns.

```JavaScript
// Example of using styled system props correctly
<Component styleProp={designTokenValue} />

// Example of incorrect usage: using the standard React 'style' prop
<Component style={{ color: 'blue' }} />

// Example of using UNSAFE_ prefix for non-token values
<Component UNSAFE_padding="10px" />
```

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

### LinkButton with Icons

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/buttons/LinkButton.mdx

Provides examples of how to include icons within the LinkButton, both as start and end icons.

```tsx
<Example src="buttons/docs/link-button/icons" />
```

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

### Custom Link Transformation (TypeScript)

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Provides an example of a custom `replaceLinks` function in TypeScript to override default link transformations. This function allows for custom logic, such as appending '.html' instead of '.txt'.

```typescript
"route-key": {
    build: {
        source: "content/your-source-folder",
        markdown: {
            replaceLinks: (link: string) => {
                // Custom logic here
                if (link.startsWith('http')) return link;
                if (link.startsWith('#')) return link;
                return link + '.html'; // Use .html instead of .txt
            }
        }
    }
}
```

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

### ContextualHelp Component Usage

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/overlays/ContextualHelp.mdx

Demonstrates the basic usage of the ContextualHelp component, including its variants and sizes.

```jsx
<ContextualHelp />
```

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

### Select Component Migration Notes

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/pickers/Select.mdx

Provides notes and guidance for migrating the Select component.

```MigrateGuide
<MigrateGuide src="select/docs/migration-notes" />
```

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

### C#: Hello World Program

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A simple 'Hello World!' console application written in C#.

```csharp
using System;

namespace HelloWorld
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Hello World!");
    }
  }
}
```

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

### SCSS: Nested Rule Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

An example of nested CSS rules using SCSS syntax.

```scss
.sass {
  .test {
    background: red;
  }
}
```

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

### Hopper MCP Server Build and Development Scripts

Source: https://github.com/workleap/wl-hopper/blob/main/apps/mcp-server/README.md

Common pnpm scripts for building the Hopper MCP Server for production and starting the development server.

```bash
pnpm build
# Build for production
```

```bash
pnpm dev
# Start Netlify dev server
```

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

### PowerShell: Hello World Output

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A PowerShell command to display 'Hello World!' to the console.

```powershell
Write-Host “Hello World!”
```

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

### Install React-Aria Peer Dependency

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/concepts/internationalization.mdx

Hopper uses React-Aria for internationalization, which is a peer dependency. You must install `react-aria` in your application to enable localization features.

```bash
npm install react-aria
# or
yarn add react-aria
```

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

### C: Hello World Program

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A basic 'Hello, World!' program written in C, demonstrating standard input/output operations.

```c
#include <stdio.h>
int main() {
   // printf() displays the string inside quotation
   printf("Hello, World!");
   return 0;
}
```

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

### Install @hopper-ui/components with pnpm

Source: https://github.com/workleap/wl-hopper/blob/main/packages/components/README.md

Installs the @hopper-ui/components package using the pnpm package manager. This is a common step for integrating the Hopper design system into a project.

```shell
pnpm add @hopper-ui/components
```

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

### Install @hopper-ui/components with npm

Source: https://github.com/workleap/wl-hopper/blob/main/packages/components/README.md

Installs the @hopper-ui/components package using the npm package manager. This is the standard command for adding the Hopper design system to a Node.js project.

```shell
npm install @hopper-ui/components
```

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

### Install @hopper-ui/components with yarn

Source: https://github.com/workleap/wl-hopper/blob/main/packages/components/README.md

Installs the @hopper-ui/components package using the yarn package manager. This command is used to add the Hopper design system to a project's dependencies.

```shell
yarn add @hopper-ui/components
```

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

### Switch Component Usage Examples

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/forms/Switch.mdx

Demonstrates various ways to use the Switch component, including selected, no label, disabled, sizes, and with icons.

```tsx
<Example src="switch/docs/switch/preview" isOpen />
```

```tsx
<Example src="switch/docs/switch/selected" />
```

```tsx
<Example src="switch/docs/switch/nolabel" />
```

```tsx
<Example src="switch/docs/switch/disabled" />
```

```tsx
<Example src="switch/docs/switch/sizes" />
```

```tsx
<Example src="switch/docs/switch/icons" />
```

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

### Tooltip Usage Examples

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/overlays/Tooltip.mdx

Demonstrates various ways to use the Tooltip component, including basic triggers, different placements, disabled states, custom triggers, and controlled open states. Also shows usage within collection items.

```javascript
<Example src="tooltip/docs/preview" isOpen />
<Example src="tooltip/docs/trigger" />
<Example src="tooltip/docs/placement" />
<Example src="tooltip/docs/disabled" />
<Example src="tooltip/docs/custom-trigger" />
<Example src="tooltip/docs/disabled-trigger" />
<Example src="tooltip/docs/controlled" />
<Example src="tooltip/docs/groups" />
```

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

### Callout Component Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/guides/components.mdx

An example of a warning callout component, likely used to highlight important information or potential issues during development. It emphasizes restyling requirements and the importance of using Hopper tokens.

```HTML
<Callout variant="warning">
  Using this approach may require you to restyle the entire component, which is fine. At this stage, you're essentially creating something new! Just be sure to use [Hopper tokens](../../tokens/overview/introduction) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!
</Callout>
```

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

### Template-Based Build Configuration

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Configures the build process for merging multiple markdown files using a template. Supports glob patterns for file paths and options to maintain original directory levels.

```typescript
"route-key": {
    build: {
        template: "/content/ai-templates/your-template.mdx",
        merge: [
            "/path/to/file1.md",
            "/path/to/file2.md",
            "/folder/*.md" // glob patterns supported
        ],
        keepOriginalLeveling: true //if you like to keep the original levels
    }
}
```

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

### JavaScript: Show Line Numbers Starting from a Specific Line

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

Illustrates how to enable line numbers in JavaScript code, starting the count from a specified line number. Helpful for referencing code within a larger context.

```js
const levels = 3;
const weapons = 10;
```

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

### Example: Creating a Popover Triggered on Hover

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/guides/components.mdx

This example demonstrates how to create a custom button that triggers a popover on hover using React hooks like `useRef` and `useHover`. It utilizes `PopoverTrigger` and `Button` components, passing a ref to the button to track hover state.

```javascript
function MyCustomButtonPopoverTrigger({ children, ...rest }: PopoverTriggerProps) {
    const ref = useRef();
    const isHovered = useHover(ref);
    return (
        <PopoverTrigger {...rest} open={isHovered}>
            <Button ref={ref}>Hoverable Button</Button>
            {children}
        </PopoverTrigger>
    );
}
```

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

### Unknown Language Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A placeholder for code in an unrecognized or custom language.

```unknown
Hello world!
```

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

### Serve Configuration for Custom URL Mapping

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Provides optional configuration for custom URL path mapping for generated markdown files, ensuring correct resolution when file structures differ from URL paths.

```typescript
"route-key": {
    serve: {
        at: "/custom-path",
        filesInRoot?: boolean
    }
}
```

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

### Box Component Usage

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/building-blocks/Box.mdx

Demonstrates the basic usage of the Box component, highlighting its flexibility in rendering as different HTML elements and accepting styled system props for styling and layout.

```typescript
import { Box } from '@workleap/wl-hopper-components';

function App() {
  return (
    <Box
      as="section"
      padding="medium"
      backgroundColor="primary"
      borderRadius="large"
    >
      This is a Box component rendered as a section.
    </Box>
  );
}
```

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

### PHP: Echo Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

A basic PHP snippet that echoes a string with an HTML line break.

```php
<?php
  echo "Hello!<br>";
?>
```

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

### Component Development: Global CSS Selector

Source: https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md

Example of defining a unique GlobalCssSelector for a component in wl-hopper.

```typescript
export const GlobalIconCssSelector = "hop-Icon";
```

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

### LLMs.txt Overview

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/getting-started/ai-for-agents/llms.mdx

Provides access to different LLMs.txt files for the Hopper Design System, catering to various LLM context window needs.

```Markdown
- [llms.txt](/llms.txt): The main LLMs.txt file
- [llms-full.txt](/llms-full.txt): The complete documentation for Hopper

Separate docs are available if you have a limited context window:
- [llms-components.txt](/components/index.txt): All React components in Hopper
- [llms-styled-system.txt](/styled-system/index.txt): Styled system, design tokens, responsive styles, and theme customization
- [llms-tokens.txt](/tokens/index.txt): Comprehensive reference for semantic colors, typography, spacing, and other design tokens
```

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

### Component Development: Deconstructing Own Props

Source: https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md

Example of deconstructing the ownProps object to access component-specific props.

```typescript
const { children, style, className, slot, ...otherProps } = ownProps;
```

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

### ContextualHelp Component Props

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/overlays/ContextualHelp.mdx

Lists and describes the available props for the ContextualHelp component.

```APIDOC
ContextualHelp:
  Props:
    - isOpen: boolean - Controls the visibility of the contextual help.
    - variant: "default" | "" - Specifies the variant of the contextual help.
    - size: "" | "" - Specifies the size of the contextual help.
```

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

### AI Docs Configuration Structure

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Defines the basic structure for AI documentation configuration, including build root path, files folder, and routes.

```typescript
export const aiDocsConfig: AiDocsConfig = {
    buildRootPath: "dist",
    filesFolder: "ai-docs", 
    routes: {
        "route-key": {
            build: { /* build configuration */ },
            serve?: { /* optional serve configuration */ }
        }
    }
}
```

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

### Python: Type Checking Example

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/pages/playground-codeblock.mdx

Demonstrates checking the types of integer, float, and complex number variables in Python.

```python
x = 1
y = 2.8
z = 1j

print(type(x))
print(type(y))
print(type(z))
```

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

### Select Dropdown Item Description

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/pickers/Select.mdx

Illustrates how a select item within a dropdown can include a description.

```Example
<Example src="select/docs/select-dropdown/description" />
```

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

### Select Component Usage Examples

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/content/components/pickers/Select.mdx

Demonstrates various ways to use the Select component, including disabled states, error states, different sizes, labeling strategies, icon and text prefixes, fluid layout, custom value rendering, controlled state management, form integration, contextual help, auto menu width, menu placement, sections, footers, and item customization with avatars, counts, icons, and end icons.

```tsx
<Select disabled />
```

```tsx
<Select>
  <SelectItem disabled>Option</SelectItem>
</Select>
```

```tsx
<Select state="error" />
```

```tsx
<Select size="small" />
<Select size="medium" />
<Select size="large" />
```

```tsx
<Select aria-label="Select an option" />
```

```tsx
<Select><Icon slot="icon" />...</Select>
```

```tsx
<Select><Text slot="text">Prefix</Text>...</Select>
```

```tsx
<Select fluid />
```

```tsx
<Select renderValue={({ item }) => <><Avatar src={item.avatar} /> {item.label}</>} />
```

```tsx
const [value, setValue] = useState<string | undefined>(undefined);
<Select value={value} onChange={(_, newValue) => setValue(newValue)} />
```

```tsx
<form>
  <Select name="mySelect" />
  <button type="submit">Submit</button>
</form>
```

```tsx
<Select><ContextualHelp>Help text</ContextualHelp></Select>
```

```tsx
<Select autoMenuWidth />
```

```tsx
<Select direction="end" align="start" />
```

```tsx
<Select>
  <SelectSection><Header>Section Header</Header><SelectItem>Item 1</SelectItem></SelectSection>
</Select>
```

```tsx
<Select><div slot="footer">Footer Content</div></Select>
```

```tsx
<Select><SelectItem><Avatar src="/path/to/avatar.png" /> Item with Avatar</SelectItem></Select>
```

```tsx
<Select><SelectItem><Badge count={5} /> Item with Count</SelectItem></Select>
```

```tsx
<Select><SelectItem><Icon name="star" /> Item with Icon</SelectItem></Select>
```

```tsx
<Select><SelectItem><Icon slot="endIcon" name="info" /> Item with End Icon</SelectItem></Select>
```

```tsx
<Select loading />
```

```tsx
<Select loadOnScroll />
```

```tsx
<Select>
  <SelectSection>
    <Header>Dynamic Section</Header>
    <Collection items={dynamicItems} />
  </SelectSection>
</Select>
```

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

### Default Link Transformations (Markdown)

Source: https://github.com/workleap/wl-hopper/blob/main/apps/docs/ai-docs/CONTRIBUTING.md

Demonstrates how relative links are transformed by adding a '.txt' extension while preserving query parameters and hash fragments. Absolute and hash-only links remain unchanged.

```markdown
<!-- Original links -->
[Full URL](https://example.com/page)           → No change
[Hash link](#introduction)                     → No change  
[Relative link](../components/button)          → ../components/button.txt
[With hash](../guide#installation)            → ../guide.txt#installation
[With query](./api?version=2)                 → ./api.txt?version=2
```
Tokens:
Raw