### Install Apps SDK UI package

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Installation.mdx

Install the library using npm.

```bash
npm install @openai/apps-sdk-ui
```

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

### Switch Component Examples

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Switch/Switch.mdx

Explore various examples of the Switch component with different configurations.

```APIDOC
## Switch Component Examples

### With label

#### Description
You can add a label to the component by using the `label` prop. The label will automatically connect to the switch with `id`.

### Label position

#### Description
Set `labelPosition="start"` to place the label on the left side of the switch control.

### Default checked

#### Description
Initialize the switch with `defaultChecked` when you don't need to control its state. You can then use the `name` prop to read the value later on.

### Controlled

#### Description
Pass `checked` and `onCheckedChange` to manage the state in a controlled manner.

### Disabled

#### Description
Use `disabled` to prevent the user from toggling the control.
```

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

### Implement TransitionGroup with CSS

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/TransitionGroup.mdx

Example showing JSX usage with corresponding CSS transition states.

```jsx
// JSX
<TransitionGroup className={s.Example} enterDuration={2000} exitDuration={1000}>
  {show && <Square key="s" />}
</TransitionGroup>

// CSS
.Example {
  &[data-entering] {
    opacity: 0;
  }

  &[data-exiting] {
    opacity: 1;
  }

  &[data-entering-active],
  &[data-exiting][data-interrupted] {
    opacity: 1;
    box-shadow: 0 0 0 5px green;
    transition: opacity 2s ease, box-shadow 2s ease;
  }

  &[data-exiting-active],
  &[data-entering][data-interrupted] {
    opacity: 0;
    box-shadow: 0 0 0 5px red;
    transition: opacity 1s ease, box-shadow 1s ease;
  }
}
```

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

### SelectControl with Start Icon

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SelectControl/SelectControl.mdx

Demonstrates how to add a starting icon to the SelectControl using the `StartIcon` prop. Sizing, spacing, and coloring are handled automatically.

```jsx
<Canvas of={SelectControlStories.StartIcon} />
```

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

### Avatar Examples

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Avatar/Avatar.mdx

Demonstrates various ways to use the Avatar component with different props and configurations.

```APIDOC
## Examples

### Text

For text-based avatars, a single initial is displayed based on the `name` prop passed to the component.

<Canvas of={AvatarStories.Text} />

### Image

To display an image avatar, provide an absolute URL to the image with `imageUrl`. Images will have a soft fade entrance once loaded, or fallback to a text display if the image fail to load.
<Canvas of={AvatarStories.Image} />

### Icon

To display an icon avatar, provide an icon to render to the `Icon` prop. The `name` prop is not used in this case, and can be omitted.
<Canvas of={AvatarStories.Icon} source={{code:`<Avatar
  Icon={Robot}
  size={48}
/>`}} />

### Overflow count

To display an overflow avatar, provide a number to the `overflowCount` prop. The number will be automatically formatted and scaled to fit.
<Canvas of={AvatarStories.Overflow} />

### Sizing

To size the avatar, pass a `number` to the `size` property, which will set the width and height in pixels. Text and icon avatars will scale their sizes dynamically based on this value.
<Canvas of={AvatarStories.Sizing} />
<div className="canvas-controls-only">
<Controls of={AvatarStories.Sizing}/>
</div>


### Colors & variants

You can stylize the display of the avatar using the `color` and `variant` props.
<Canvas of={AvatarStories.Colors} sourceState="none" />

### Roundness

By default, avatars are fully rounded. You can override this by passing a Tailwind rounding class to `className`.

<Canvas of={AvatarStories.Rounding} />


### Interactive

Avatars can be used as interactive elements by passing an `onClick` handler. The avatar will automatically apply semantic and visual interaction styles.
<Canvas of={AvatarStories.Interactive} source={{code:`<Avatar
  name="Will"
  size={48}
  onClick={saySup}
/>`}} />
```

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

### Badge Examples

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Badge/Badge.mdx

Demonstrates various configurations of the Badge component, including color, size, pill shape, and integration with icons and loading indicators.

```jsx
<Badge color="success" size="lg">Successful</Badge>
```

```jsx
<Badge size="lg" className="gap-1.5"><LoadingIndicator /> In progress</Badge>
```

```jsx
<Badge color="danger" size="lg">Failed</Badge>
```

```jsx
<Badge color="warning" size="lg" pill><Beta /> Beta</Badge>
```

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

### Create a reservation card component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Installation.mdx

Example of building a UI component using library components and Tailwind utility classes.

```tsx
import { Badge } from "@openai/apps-sdk-ui/components/Badge"
import { Button } from "@openai/apps-sdk-ui/components/Button"
import {
  Calendar,
  Invoice,
  Maps,
  Members,
  Phone,
} from "@openai/apps-sdk-ui/components/Icon"

export function ReservationCard() {
  return (
    <div className="w-full max-w-sm rounded-2xl border border-default bg-surface shadow-lg p-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-secondary text-sm">
            Reservation
          </p>
          <h2 className="mt-1 heading-lg">La Luna Bistro</h2>
        </div>
        <Badge color="success">Confirmed</Badge>
      </div>
      <div>
        <dl className="mt-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-sm">
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Calendar className="size-4" />
            Date
          </dt>
          <dd className="text-right">Apr 12 · 7:30 PM</dd>
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Members className="size-4" />
            Guests
          </dt>
          <dd className="text-right">Party of 2</dd>
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Invoice className="size-4" />
            Reference
          </dt>
          <dd className="text-right uppercase">4F9Q2K</dd>
        </dl>
      </div>
      <div className="mt-4 grid gap-3 border-t border-subtle pt-4 sm:grid-cols-2">
        <Button variant="soft" color="secondary" block>
          <Phone />
          Call
        </Button>
        <Button color="primary" block>
          <Maps />
          Directions
        </Button>
      </div>
    </div>
  )
}
```

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

### SelectControl Optical Alignment

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SelectControl/SelectControl.mdx

Demonstrates how to use the `opticallyAlign` prop with either 'start' or 'end' to adjust the control's gutter for optical alignment.

```jsx
<Canvas of={SelectControlStories.OpticalAlignment} sourceState="none" />
```

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

### Import Tooltip Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Tooltip/Tooltip.mdx

Import the Tooltip component from the @openai/apps-sdk-ui library. This is the basic setup required to use the component.

```jsx
import { Tooltip } from "@openai/apps-sdk-ui/components/Tooltip";
```

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

### Popover Natural Sizing Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Popover/Popover.mdx

Demonstrates how to size a popover using width, minWidth, or maxWidth properties. Defaults to minWidth of 300px.

```jsx
<Canvas of={PopoverStories.NaturalSizing} />
```

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

### SelectControl Start Icon

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SelectControl/SelectControl.mdx

How to add a start icon to the SelectControl using the `StartIcon` component.

```APIDOC
## Start icon

### Description
Use `StartIcon` to display an icon in the control. Sizing, spacing, and coloring are handled automatically.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A
```

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

### Basic Fade Animation Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/Animate.mdx

Demonstrates a simple fade-in/fade-out transition using default ease timing functions. This is suitable for components that do not affect layout.

```jsx
<Animate className="w-[200px] h-[200px]">
  {visible && <Square key="s" />}
</Animate>
```

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

### Switch Component - Base Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Switch/Switch.mdx

This is the base usage of the Switch component. It renders a simple toggle switch.

```jsx
<Canvas of={SwitchStories.Base} />
```

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

### EmptyMessage No Results Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/EmptyMessage/EmptyMessage.mdx

Demonstrates a simplified EmptyMessage by omitting the title and using only an icon and description. This showcases the composability and optional nature of its parts.

```jsx
<Canvas of={EmptyMessageStories.Empty} layout="padded" />
```

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

### Input with Start Adornment

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Input/Input.mdx

Add content like icons to the beginning of the input using the `startAdornment` prop. Fine-tune spacing with `gutterSize` or negative margins on the adornment. The `gap` prop on the container controls spacing between the adornment and input.

```jsx
<Canvas of={InputStories.StartAdornment} />
```

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

### Implement persistent theme store

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Dark mode.mdx

A full example using Zustand to manage persistent theme state, including system preference detection and localStorage integration.

```tsx
import { applyDocumentTheme } from "@openai/apps-sdk-ui/theme"
import { create } from "zustand"
import { createJSONStorage, persist } from "zustand/middleware"

export type Theme = "light" | "dark" | "system"
type ThemeState = {
  theme: Theme
}

const INITIAL_STATE: ThemeState = {
  theme: "system",
}

const store = create(
  persist(() => INITIAL_STATE, {
    name: "oai:user:theme",
    storage: createJSONStorage(() => localStorage),
  }),
)

// Apply when store is created / updated
store.subscribe((state) => applyDocumentTheme(resolveTheme(state.theme)))

// Apply when system theme changes
window
  .matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", () => applyDocumentTheme(resolveTheme(store.getState().theme)))

function getSystemTheme(): "light" | "dark" {
  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"
}

function resolveTheme(theme?: Theme): "light" | "dark" {
  if (theme == null || theme === "system") {
    return getSystemTheme()
  }

  return theme
}

export function setTheme(theme: Theme) {
  store.setState({ theme })
}

export function useSelectedTheme() {
  return store((state) => state.theme)
}

export function useCurrentTheme() {
  return store((state) => resolveTheme(state.theme))
}
```

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

### Import Switch Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Switch/Switch.mdx

Import the Switch component from the OpenAI Apps SDK UI library. This is the basic setup required to use the component.

```jsx
import { Switch } from "@openai/apps-sdk-ui/components/Switch";
```

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

### Switch Component with Label on Start

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Switch/Switch.mdx

Position the label to the left of the switch control by setting `labelPosition="start"`.

```jsx
<Canvas of={SwitchStories.LabelPositionStart} />
```

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

### Popover Open on Hover Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Popover/Popover.mdx

Use the showOnHover prop to create popovers that appear on hover and focus events. Use sparingly and with clear intention.

```jsx
<Canvas of={PopoverStories.Hover} />
```

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

### Import SelectControl Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SelectControl/SelectControl.mdx

Import the SelectControl component for use in your application. Ensure you have the @openai/apps-sdk-ui library installed.

```jsx
import { SelectControl } from "@openai/apps-sdk-ui/components/SelectControl";
```

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

### Import Select Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Select/Select.mdx

Import the Select component from the OpenAI Apps SDK UI library. This is the basic setup required to use the component.

```jsx
import { Select } from "@openai/apps-sdk-ui/components/Select";
```

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

### Animate a horizontal list

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/AnimateLayoutGroup.mdx

Example of animating a horizontal list by setting the dimension property to width.

```jsx

<>
  <Square className="px-2" />
  <AnimateLayoutGroup dimension="width">
    {list.map(({ id }) => (
      <div key={id} className="px-2">
        <PrimarySquare onClick={() => handleRemove(id)} />
      </div>
    ))}
  </AnimateLayoutGroup>
  <Square className="px-2" />
<>

```

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

### Animate Height Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/AnimateLayout.mdx

Demonstrates animating the height of a component as it enters and exits the DOM. Ensure surrounding elements do not interfere with height calculations.

```jsx
<>
  <Line className="w-full h-12" />
  <AnimateLayout transitionClassName="pt-4">
    {show && <PrimaryLine key="s" className="w-full h-[80px]" />}
  </AnimateLayout>
  <Line className="w-full h-12 mt-4" /> 
</>
```

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

### Slider with Marks Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Slider/Slider.mdx

Configure Slider marks by passing an array of objects to the `marks` prop. Each object should contain a `value` and a `label`. Responsive behaviors are handled automatically.

```jsx
<Slider
    value={value}
    onChange={() => {}}
    label="Passing grade"
    min={1}
    max={3}
    step={1}
    marks={[
        { value: 1, label: "Inaccurate" },
        { value: 2, label: "Some inaccuracies" },
        { value: 3, label: "Accurate" },
    ]}
    trackColor="#61C454"
    rangeColor="#EF4146"
/>
```

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

### SlotTransitionGroup Basic Usage with CSS

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/SlotTransitionGroup.mdx

Example demonstrating the basic usage of SlotTransitionGroup with custom CSS for transition states. Ensure children have stable keys for correct tracking.

```jsx
<SlotTransitionGroup enterDuration={2000} exitDuration={1000}>
  {show && <Square key="s" className={s.Example} />}
</SlotTransitionGroup>
```

```css
.Example {
  &[data-entering] {
    opacity: 0;
  }

  &[data-exiting] {
    opacity: 1;
  }

  &[data-entering-active],
  &[data-exiting][data-interrupted] {
    opacity: 1;
    box-shadow: 0 0 0 5px green;
    transition: opacity 2s ease, box-shadow 2s ease;
  }

  &[data-exiting-active],
  &[data-entering][data-interrupted] {
    opacity: 0;
    box-shadow: 0 0 0 5px red;
    transition: opacity 1s ease, box-shadow 1s ease;
  }
}
```

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

### Get document theme

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Dark mode.mdx

Use this helper to read the current view state from the root element.

```tsx
import { getDocumentTheme } from "@openai/apps-sdk-ui/theme"

const currentTheme = getDocumentTheme() // "light" or "dark"
```

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

### Import CodeBlock Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Import the CodeBlock component for use in your React application. Ensure you have the @openai/apps-sdk-ui package installed.

```jsx
import { CodeBlock } from "@openai/apps-sdk-ui/components/CodeBlock";
```

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

### SelectControl Variants Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SelectControl/SelectControl.mdx

Demonstrates different visual styles for the SelectControl using the `variant` prop. Available styles are similar to Button and Input components.

```jsx
<Canvas of={SelectControlStories.Variants} sourceState="none" />
```

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

### Animate a vertical list

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/AnimateLayoutGroup.mdx

Example of animating a vertical list of components with custom entry, exit, and layout transition properties.

```jsx

<>
  <Line className="py-2" />
  <AnimateLayoutGroup
    initial={{ y: -10, opacity: 0, blur: 0 }}
    enter={{ y: 0, delay: 150, duration: 600 }}
    exit={{ scale: 0.8, blur: 10, duration: 500 }}
    layoutEnter={{ duration: 400, timingFunction: "ease" }}
    layoutExit={{ delay: 150 }}
  >
    {list.map(({ id }) => (
      <div key={id} className="py-2">
        <PrimaryLine onClick={() => handleRemove(id)} />
      </div>
    ))}
  </AnimateLayoutGroup>
  <Line className="py-2" />
<>

```

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

### Animate Width Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/AnimateLayout.mdx

Animate the width of a component by passing dimension="width". Ensure consistent height and use transitionClassName for layout adjustments.

```jsx
<div className="flex">
  <Square className="w-[200px] h-[200px]" />
  <AnimateLayout
    dimension="width"
    transitionClassName="pl-6"
    enter={{ delay: 200 }}
    layoutExit={{ delay: 75 }}
  >
    {show && <PrimarySquare key="s" className="w-[200px] h-[200px]" />}
  </AnimateLayout>
  <Square className="w-[200px] h-[200px] ml-6" />
</div>
```

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

### Build a Reservation Card Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/README.md

Example of a reservation card component using Apps SDK UI components and Tailwind classes. It displays reservation details and action buttons.

```tsx
import { Badge } from "@openai/apps-sdk-ui/components/Badge"
import { Button } from "@openai/apps-sdk-ui/components/Button"
import { Calendar, Invoice, Maps, Members, Phone } from "@openai/apps-sdk-ui/components/Icon"

export function ReservationCard() {
  return (
    <div className="w-full max-w-sm rounded-2xl border border-default bg-surface shadow-lg p-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-secondary text-sm">Reservation</p>
          <h2 className="mt-1 heading-lg">La Luna Bistro</h2>
        </div>
        <Badge color="success">Confirmed</Badge>
      </div>
      <div>
        <dl className="mt-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-sm">
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Calendar className="size-4" />
            Date
          </dt>
          <dd className="text-right">Apr 12 · 7:30 PM</dd>
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Members className="size-4" />
            Guests
          </dt>
          <dd className="text-right">Party of 2</dd>
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Invoice className="size-4" />
            Reference
          </dt>
          <dd className="text-right uppercase">4F9Q2K</dd>
        </dl>
      </div>
      <div className="mt-4 grid gap-3 border-t border-subtle pt-4 sm:grid-cols-2">
        <Button variant="soft" color="secondary" block>
          <Phone />
          Call
        </Button>
        <Button color="primary" block>
          <Maps />
          Directions
        </Button>
      </div>
    </div>
  )
}
```

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

### Optical Alignment

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Input/Input.mdx

Use the `opticallyAlign` prop with either "start" or "end" to offset the input's gutter for optical alignment adjustments.

```jsx
<Canvas of={InputStories.OpticalAlignment} sourceState="none" />
```

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

### Conditionally Enabled Tooltip Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Tooltip/Tooltip.mdx

Demonstrates how to conditionally disable a tooltip by passing null content. This is useful when a tooltip should only appear under certain conditions, such as when a component is not disabled.

```jsx
<Tooltip
  content={disabled ? "This action is disabled for reasons" : null}
>
  <Button color="primary" size="lg" disabled={disabled}>
    Sample button
  </Button>
</Tooltip>
```

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

### Cross Fade Animation Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/Animate.mdx

Creates cross-fade effects between components, suitable for icon animations or page transitions. It uses 'enter' and 'exit' properties with specified delays and durations.

```jsx
<Button size="2xl" iconSize="xl" variant="soft" onClick={handleClick}>
  <Animate
    className="w-[var(--button-icon-size)] h-[var(--button-icon-size)]"
    enter={{ scale: 1, delay: 150, duration: 400 }}
    exit={{ scale: 0.6, duration: 150 }}>
    {copied ? <Check key="copied" /> : <Copy key="copy" />}
  </Animate>
</Button>
```

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

### RadioGroup Direction Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/RadioGroup/RadioGroup.mdx

Control the layout of radio items using the `direction` prop. Options include 'column' (default) or 'row'. An appropriate gap is automatically applied.

```jsx
<Canvas of={RadioGroupStories.Direction} />
```

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

### Initialize Apps SDK UI Documentation Page

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Introduction.mdx

Imports necessary Storybook blocks and custom components for the overview page.

```typescript
import { linkTo } from "@storybook/addon-links"
import { Subtitle, Title, Meta, Unstyled } from "@storybook/blocks"
import { Card } from "@storybookComponents/Card"
import { HideTableOfContents } from "@storybookComponents/HideTableOfContents"
import { Terminal, Cube, Documentation, GridAlt } from "./components/Icon"
```

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

### SegmentedControl Example with Theming

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SegmentedControl/SegmentedControl.mdx

Demonstrates how to use the SegmentedControl component to manage theme selection (light, dark, system). It utilizes React's useState hook to manage the selected theme.

```jsx
import { DarkMode, LightMode, SystemMode } from "../Icon";
import { SegmentedControl } from "./";
import { useState } from 'react';

export const Example = () => {
    const [theme, setTheme] = useState("light");

    return (
        <SegmentedControl
            value={theme}
            onChange={(nextTheme) => setTheme(nextTheme)}
            aria-label="Seleect theme mode"
            gutterSize='sm'
        >
            <SegmentedControl.Option value="light" aria-label="Light mode">
                <LightMode />
            </SegmentedControl.Option>
            <SegmentedControl.Option value="dark" aria-label="Dark mode">
                <DarkMode />
            </SegmentedControl.Option>
            <SegmentedControl.Option value="system" aria-label="System mode">
                <SystemMode />
            </SegmentedControl.Option>
        </SegmentedControl>
    );
};
```

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

### Initialize application with styles

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Installation.mdx

Import the global stylesheet before rendering any components to ensure proper style application.

```tsx
// Must be imported first to ensure Tailwind layers and style foundations are defined before any potential component styles
import "./main.css"

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { App } from "./App"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
```

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

### Render Documentation Layout

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Introduction.mdx

Uses Storybook blocks and custom components to structure the introduction page.

```jsx
<HideTableOfContents />

<Meta title="Overview/Introduction" />

<Title>Apps SDK UI</Title>
<Subtitle>Design system for building high quality apps in ChatGPT</Subtitle>
```

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

### Menu Sizing Options

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Menu/Menu.mdx

Demonstrates different ways to size the menu. Use 'auto' for natural content fitting, fixed values for a set size, or minWidth for a minimum size that can grow.

```javascript
minWidth="auto"
```

```javascript
width="200px"
minWidth="200px"
```

```javascript
minWidth="150px"
```

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

### Highlight Go Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `go` language prop for highlighting Go code.

```jsx
<CodeBlock language="go">{codeSnippet}</CodeBlock>
```

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

### Highlight Dockerfile Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `docker` language prop for highlighting Dockerfiles.

```jsx
<CodeBlock language="docker">{codeSnippet}</CodeBlock>
```

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

### SegmentedControl Scrollable Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SegmentedControl/SegmentedControl.mdx

Demonstrates how to enable scrolling for the SegmentedControl by wrapping it in a flex wrapper. When scrollable, the selected option is automatically scrolled into view.

```jsx
<Canvas of={SegmentedControlStories.Scrollable} />
```

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

### Highlight SQL Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `sql` language prop for highlighting SQL queries.

```jsx
<CodeBlock language="sql">{codeSnippet}</CodeBlock>
```

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

### Configure AppsSDKUIProvider

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Button/ButtonLink.mdx

Set up the global router integration by wrapping the application in the AppsSDKUIProvider and defining the LinkComponent.

```tsx
// In the root of your App
import {AppsSDKUIProvider} from "@openai/apps-sdk-ui/components/AppsSDKUIProvider"
import {Link} from "react-router"

// Set up types 
declare global {
  interface AppsSDKUIConfig {
    LinkComponent: typeof Link
  }
}

// Wrap your app in AppsSDKUIProvider and pass in your router's Link component.
export function App() {
  return (
    <AppsSDKUIProvider linkComponent={Link}>
      {/* other providers... */}
    </AppsSDKUIProvider>
  )
}

// elsewhere - everything just works!
<ButtonLink to={{ pathname: "/help" }} prefetch="intent">
  Get Help
</ButtonLink>
```

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

### Highlight TOML Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `toml` language prop for highlighting TOML configuration files.

```jsx
<CodeBlock language="toml">{codeSnippet}</CodeBlock>
```

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

### Highlight C Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `c` language prop for highlighting C code.

```jsx
<CodeBlock language="c">{codeSnippet}</CodeBlock>
```

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

### Slider with Tooltip Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Slider/Slider.mdx

Add a tooltip to the Slider's label by providing JSX content for the label prop. This allows for richer information display.

```jsx
  <Slider
    label=(
        <Tooltip content="More details about this field">
            <TriggerDecorator>Example field</TriggerDecorator>
        </Tooltip>
    )
    max={2000}
    min={0}
    onChange={() => {}}
    resetValue={1000}
    step={10}
    unit="ms"
    value={1000}
  />
```

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

### Highlight PHP Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `php` language prop for highlighting PHP code.

```jsx
<CodeBlock language="php">{codeSnippet}</CodeBlock>
```

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

### Highlight C-like Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `clike` language prop for highlighting C-like syntax, including C, C++, and Java.

```jsx
<CodeBlock language="clike">{codeSnippet}</CodeBlock>
```

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

### CodeBlock Component Usage

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Demonstrates the basic usage of the CodeBlock component for displaying syntax-highlighted code snippets.

```APIDOC
## CodeBlock Component Usage

### Description
This section shows how to import and use the `CodeBlock` component to display code snippets with syntax highlighting.

### Method
Import and render the `CodeBlock` component.

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **language** (string) - Required - The programming language for syntax highlighting (e.g., 'javascript', 'python').
- **children** (ReactNode) - Required - The code snippet to display.

### Request Example
```jsx
import { CodeBlock } from "@openai/apps-sdk-ui/components/CodeBlock";

const codeSnippet = 'console.log("Hello, world!");';

return (
  <CodeBlock language="javascript">{codeSnippet}</CodeBlock>
);
```

### Response
N/A (Component Rendering)
```

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

### Configure global styles

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Installation.mdx

Add foundation styles and Tailwind layers to your global CSS file.

```css
@import "tailwindcss";
@import "@openai/apps-sdk-ui/css";
/* Required for Tailwind to find class references in Apps SDK UI components. */
@source "../node_modules/@openai/apps-sdk-ui";

/* The rest of your application CSS */
```

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

### EmptyMessage Error State Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/EmptyMessage/EmptyMessage.mdx

Use the `color` property to indicate an error state with the EmptyMessage. This helps in visually distinguishing different message intents.

```jsx
<Canvas of={EmptyMessageStories.Error} layout="padded" />
```

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

### Enable Initial Mount Transitions

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/SlotTransitionGroup.mdx

By default, initial transitions are prevented. Pass `preventInitialTransition={false}` to enable transitions for children when the group first mounts.

```jsx
<SlotTransitionGroup preventInitialTransition={false}>{show && <Sample key="s" />}</SlotTransitionGroup>
```

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

### Highlight YAML Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `yaml` language prop for highlighting YAML files.

```jsx
<CodeBlock language="yaml">{codeSnippet}</CodeBlock>
```

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

### Menu Component Usage

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Menu/Menu.mdx

Demonstrates how to import and use the Menu component in your React application.

```APIDOC
## Usage

```jsx
import { Menu } from "@openai/apps-sdk-ui/components/Menu"
```

> **Note:** Menu prevents `Tab` presses from advancing focus. Because of this, `Menu` isn't suitable for generic popover use-cases &ndash; use <span className="link" onClick={linkTo('components-popover')}>Popover</span> instead.
```

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

### Configure your Router

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/TextLink/TextLink.mdx

Configure the TextLink component to work with your application's router.

```APIDOC
## Configure your Router

### Provider

```tsx
// In the root of your App
import {AppsSDKUIProvider} from "@openai/apps-sdk-ui/components/AppsSDKUIProvider"
import {Link} from "react-router"

// Set up types 
declare global {
  interface AppsSDKUIConfig {
    LinkComponent: typeof Link
  }
}

// Wrap your app in AppsSDKUIProvider and pass in your router's Link component.
export function App() {
  return (
    <AppsSDKUIProvider linkComponent={Link}>
      {/* other providers... */}
    </AppsSDKUIProvider>
  )
}

// elsewhere - everything just works!
<TextLink to={{ pathname: "/help" }} prefetch="intent">
  Get Help
</TextLink>
```

### Component-level
You can also pass your Link component to the `as` prop.

```tsx
import {Link} from "next/link"

<TextLink as={Link} href="/dashboard">
  View Dashboard
</TextLink>
```
```

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

### Highlight Diff Output

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `diff` language prop for highlighting diff outputs.

```jsx
<CodeBlock language="diff">{codeSnippet}</CodeBlock>
```

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

### Enable Initial Mount Transitions

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/TransitionGroup.mdx

Use the preventInitialTransition prop to allow children to animate when the group is first mounted.

```jsx
<TransitionGroup preventInitialTransition={false}>{show && <Sample key="s" />}</TransitionGroup>
```

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

### Highlight Kotlin Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `kotlin` language prop for highlighting Kotlin code.

```jsx
<CodeBlock language="kotlin">{codeSnippet}</CodeBlock>
```

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

### Popover Controller Usage Example

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Popover/Popover.mdx

Utilize the usePopoverController hook within Popover.Content to access close() and shake() methods for imperative control. The shake() method is called for invalid submissions, and close() is called after async operations.

```jsx
<Canvas of={PopoverStories.Controller} />
```

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

### Import Storybook Components for Color Documentation

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Colors.mdx

Imports necessary components from Storybook for rendering color documentation, including titles, subtitles, and a color palette display.

```javascript
import { Subtitle, Title, Meta } from "@storybook/blocks";
import { Colors } from "@storybookComponents/Colors";
import { HideTableOfContents } from "@storybookComponents/HideTableOfContents"
```

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

### Highlight Java Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `java` language prop for highlighting Java code.

```jsx
<CodeBlock language="java">{codeSnippet}</CodeBlock>
```

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

### Custom CodeBlock Composition

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Illustrates how to create custom code blocks by composing `CodeBlockBase` with other elements like headers and custom copy buttons.

```APIDOC
## Custom CodeBlock Composition

### Description
This section explains how to build custom code block layouts using `CodeBlockBase`, `CodeBlockBase.Code`, and `CodeBlockBase.CopyButton`.

### Method
Compose `CodeBlockBase` components to create custom layouts.

### Endpoint
N/A (Component Composition)

### Parameters
#### Props for `CodeBlockBase`
- **children** (ReactNode) - Required - Content of the code block.

#### Props for `CodeBlockBase.Code`
- **language** (string) - Required - The programming language for syntax highlighting.
- **children** (ReactNode) - Required - The code snippet to display.

#### Props for `CodeBlockBase.CopyButton`
- **copyValue** (string) - Required - The value to be copied to the clipboard.
- Other props like `variant`, `color`, `size`, `uniform`, `className` can be passed.

### Request Example
```jsx
import { CodeBlockBase } from "@openai/apps-sdk-ui/components/CodeBlock";
import { CopyButton } from "@openai/apps-sdk-ui/components/CopyButton"; // Assuming CopyButton is available

const codeSnippet = 'const x: number = 10;';

return (
  <CodeBlockBase>
    <div className="flex items-center justify-between bg-(--alpha-02) border-b border-b-(--alpha-06) px-4 py-1">
      <span className="text-sm font-semibold text-secondary">typescript</span>
      <CopyButton
        variant="ghost"
        color="secondary"
        size="md"
        uniform
        copyValue={codeSnippet}
        className="-mr-2"
      />
    </div>
    <CodeBlockBase.Code language="typescript">
      {codeSnippet}
    </CodeBlockBase.Code>
  </CodeBlockBase>
);
```

### Response
N/A (Component Rendering)
```

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

### Import TransitionGroup

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/TransitionGroup.mdx

Import the component from the apps-sdk-ui package.

```jsx
import { TransitionGroup } from "@openai/apps-sdk-ui/components/Transition"
```

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

### Highlight Markup (HTML/XML)

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `markup` language prop to highlight HTML and XML code.

```jsx
<CodeBlock language="markup">{codeSnippet}</CodeBlock>
```

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

### Basic CodeBlock Usage

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Render a basic code snippet with syntax highlighting. Specify the language for correct highlighting. The content is passed as children.

```jsx
const codeSnippet = '...'

return (
  <CodeBlock language="javascript">{codeSnippet}</CodeBlock>
)
```

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

### Configure Router with AppsSDKUIProvider

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/TextLink/TextLink.mdx

Wrap your application in AppsSDKUIProvider and pass your router's Link component to configure routing for TextLink. This ensures that TextLink uses your application's routing mechanism.

```tsx
import {AppsSDKUIProvider} from "@openai/apps-sdk-ui/components/AppsSDKUIProvider"
import {Link} from "react-router"

// Set up types 
declare global {
  interface AppsSDKUIConfig {
    LinkComponent: typeof Link
  }
}

// Wrap your app in AppsSDKUIProvider and pass in your router's Link component.
export function App() {
  return (
    <AppsSDKUIProvider linkComponent={Link}>
      {/* other providers... */}
    </AppsSDKUIProvider>
  )
}

// elsewhere - everything just works!
<TextLink to={{ pathname: "/help" }} prefetch="intent">
  Get Help
</TextLink>
```

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

### Tooltip Component Usage

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Tooltip/Tooltip.mdx

Documentation for the Tooltip component interface and usage patterns.

```APIDOC
## Tooltip Component

### Description
A component used to display brief and informative hover text. It can be used with any trigger element.

### Usage
```jsx
import { Tooltip } from "@openai/apps-sdk-ui/components/Tooltip";
```

### Parameters
- **content** (ReactNode) - Optional - The content to display inside the tooltip. If null, the tooltip is disabled.
- **children** (ReactNode) - Required - The element that triggers the tooltip on hover.

### Examples
#### Conditionally enabled
```jsx
<Tooltip
  content={disabled ? "This action is disabled for reasons" : null}
>
  <Button color="primary" size="lg" disabled={disabled}>
    Sample button
  </Button>
</Tooltip>
```
```

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

### Import Input Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Input/Input.mdx

Import the Input component from the SDK UI library. This is a prerequisite for using the component in your application.

```jsx
import { Input } from "@openai/apps-sdk-ui/components/Input";
```

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

### Display Page Title

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Typography.mdx

Renders the main title for the documentation page.

```javascript
<Title>Typography</Title>
```

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

### Highlight Ruby Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `ruby` language prop for highlighting Ruby code.

```jsx
<CodeBlock language="ruby">{codeSnippet}</CodeBlock>
```

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

### Menu.Content Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Menu/Menu.mdx

Renders the dynamic content for the menu. This component is mounted only while the menu is open.

```APIDOC
<h3 id="menu-content" data-heading-label="Content">`Menu.Content`</h3>

Renders the dynamic content for the menu. `Menu.Content` is mounted only while the menu is open.

<ArgTypes of={Menu.Content} />
```

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

### Menu Root Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Menu/Menu.mdx

Reference for the root Menu component.

```APIDOC
## Reference

<h3 id="menu-root" data-heading-label="Root">`Menu`</h3>

<ArgTypes of={Menu} />
```

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

### Import Storybook Components

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Typography.mdx

Imports necessary components from Storybook for documentation and UI elements.

```javascript
import { Subtitle, Title, Meta, Canvas, Unstyled } from "@storybook/blocks"
import { CustomTable, Value } from "@storybookComponents/CustomTable"
import { ArrowRight } from "./components/Icon"
import { TextLink } from "./components/TextLink"
import { NextPrev } from "@storybookComponents/NextPrev"
import { linkTo } from "@storybook/addon-links"
import * as TypographyStories from "./Typography.stories"
```

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

### Highlight CSS Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `css` language prop for highlighting CSS styles.

```jsx
<CodeBlock language="css">{codeSnippet}</CodeBlock>
```

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

### Highlight Python Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `python` language prop to highlight Python code snippets.

```jsx
<CodeBlock language="python">{codeSnippet}</CodeBlock>
```

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

### Import Alert Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Alert/Alert.mdx

Import the Alert component from the library to begin using it in your application.

```jsx
import { Alert } from "@openai/apps-sdk-ui/components/Alert";
```

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

### Highlight SCSS Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `scss` language prop for highlighting SCSS styles.

```jsx
<CodeBlock language="scss">{codeSnippet}</CodeBlock>
```

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

### Theme Management Utilities

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Dark mode.mdx

Functions and hooks provided by @openai/apps-sdk-ui/theme to interact with the document theme state.

```APIDOC
## applyDocumentTheme

### Description
Applies a given view state ('light' or 'dark') to the root html element.

### Parameters
- **theme** (string) - Required - The theme to apply ('light' or 'dark').

### Request Example
import { applyDocumentTheme } from "@openai/apps-sdk-ui/theme";
applyDocumentTheme("dark");

## getDocumentTheme

### Description
Reads the current view state applied to the root element.

### Response
- **return** (string) - Returns 'light' or 'dark'.

### Response Example
const currentTheme = getDocumentTheme();

## useDocumentTheme

### Description
Hook for reading the latest view state on the root element. It listens to attribute changes on the html element via a MutationObserver.

### Response
- **return** (string) - Returns the live theme value ('light' or 'dark').

### Response Example
const currentTheme = useDocumentTheme();
```

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

### Import AnimateLayout Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/AnimateLayout.mdx

Import the AnimateLayout component from the @openai/apps-sdk-ui library.

```jsx
import { AnimateLayout } from "@openai/apps-sdk-ui/components/Transition"
```

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

### Import CopyTooltip Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Tooltip/CopyTooltip.mdx

Import the CopyTooltip component from the OpenAI Apps SDK UI library for use in your application.

```jsx
import { CopyTooltip } from "@openai/apps-sdk-ui/components/Tooltip";
```

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

### SelectControl Block Display

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SelectControl/SelectControl.mdx

Explains how to create full-width SelectControls using the `block` prop.

```jsx
<Canvas of={SelectControlStories.Block} />
```

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

### Import Animate Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/Animate.mdx

Import the Animate component from the @openai/apps-sdk-ui library.

```jsx
import { Animate } from "@openai/apps-sdk-ui/components/Transition"
```

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

### Import Popover Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Popover/Popover.mdx

Import the Popover component from the @openai/apps-sdk-ui library for use in your application.

```jsx
import { Popover } from "@openai/apps-sdk-ui/components/Popover";
```

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

### Highlight Bash Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `bash` language prop for highlighting shell scripts.

```jsx
<CodeBlock language="bash">{codeSnippet}</CodeBlock>
```

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

### SelectControl Usage

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/SelectControl/SelectControl.mdx

Import and basic usage of the SelectControl component.

```APIDOC
## Usage

### Description
Import and basic usage of the SelectControl component.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
```jsx
import { SelectControl } from "@openai/apps-sdk-ui/components/SelectControl";
```

### Response
N/A
```

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

### Import Badge Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Badge/Badge.mdx

Import the Badge component from the SDK UI library. This is the primary import for using the Badge.

```jsx
import { Badge } from "@openai/apps-sdk-ui/components/Badge";
```

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

### Import Markdown Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Markdown/Markdown.mdx

Import the Markdown component from the SDK UI library to use it in your application.

```jsx
import { Markdown } from "@openai/apps-sdk-ui/components/Markdown"
```

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

### Apply document theme

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Dark mode.mdx

Use this helper to apply a specific view state to the root element.

```tsx
import { applyDocumentTheme } from "@openai/apps-sdk-ui/theme"

applyDocumentTheme("dark")
```

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

### Popover Component API

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Popover/Popover.mdx

Documentation for the Popover component, its sub-components, and the usePopoverController hook.

```APIDOC
## Popover Component

### Description
A generic floating UI utility for contextual actions.

### Usage
```jsx
import { Popover } from "@openai/apps-sdk-ui/components/Popover";
```

## Popover.Trigger

### Description
Renders the element that toggles the popover. The trigger should be the user's point of interaction for revealing the popup.

## usePopoverController()

### Description
A hook accessible from components within `Popover.Content` to control the popover state.

### Methods
- **close()** - Closes the popover imperatively.
- **shake()** - Triggers a shake animation, typically used for validation errors.
```

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

### Apply Typography via Tailwind Classes

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Typography.mdx

Use heading and text utility classes to apply standardized sizing, weight, and line-height to elements.

```jsx

<h5 className="text-secondary mb-1">Get started</h5>
<h2 className="heading-xl mb-3">Building your first app</h2>
<p className="text-md">
  Inline cards in Apps SDK UI keep copy short and actionable. Provide just enough
  context for the task, then pair it with a clear next step.
</p>

```

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

### Highlight JSON Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `json` language prop for highlighting JSON data structures.

```jsx
<CodeBlock language="json">{codeSnippet}</CodeBlock>
```

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

### Apply responsive Tailwind utility classes

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Responsive design.mdx

Use standard Tailwind responsive prefixes to apply styles at specific breakpoints and above.

```tsx
<div className="flex flex-col lg:flex-row"></div>
```

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

### Continuous Transitions with Initial State

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Transition/Animate.mdx

Differentiates entrance and exit transitions by using the 'initial' property. This allows for distinct animations on component entry and exit, useful for emphasized entrances or subtle exits.

```jsx
<Animate
  className="w-[200px] h-[200px]"
  initial={{ x: 120, skewX: 30 }}
  enter={{ duration: 800 }}
  exit={{ x: -120, skewX: -8, duration: 500 }}>
  {visible && <Square key="s" />}
</Animate>
```

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

### DateRangePicker with Shortcuts

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/DateRangePicker/DateRangePicker.mdx

Provide predefined date range shortcuts to the DateRangePicker using the `shortcuts` prop. This allows users to quickly select common date ranges like 'Last 7 days' or 'This month'.

```jsx
<DateRangePicker shortcuts={[
  { label: 'Last 7 days', start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), end: new Date() },
  { label: 'This month', start: new Date(new Date().setDate(1)), end: new Date() },
]} />
```

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

### Import Avatar Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Avatar/Avatar.mdx

Standard import path for the Avatar component.

```jsx
import { Avatar } from "@openai/apps-sdk-ui/components/Avatar";
```

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

### Highlight JSON with Comments (JSONC)

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `jsonc` language prop to highlight JSON data that includes comments.

```jsx
<CodeBlock language="jsonc">{codeSnippet}</CodeBlock>
```

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

### Import TextLink Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/TextLink/TextLink.mdx

Import the TextLink component from the SDK UI library.

```jsx
import { TextLink } from "@openai/apps-sdk-ui/components/TextLink"
```

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

### Checkbox Component Usage

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Checkbox/Checkbox.mdx

Documentation for the Checkbox component, including import path and property definitions.

```APIDOC
## Checkbox Component

### Description
A toggle control component used for selecting between on and off states.

### Import
```jsx
import { Checkbox } from "@openai/apps-sdk-ui/components/Checkbox";
```

### Properties
- **checked** (boolean | 'indeterminate') - Optional - Defines the state of the checkbox. Use 'indeterminate' for partially selected states.

### Examples
#### Base Usage
<Canvas of={CheckboxStories.Base} />

#### Indeterminate State
Use `checked="indeterminate"` to indicate that the checkbox is partially selected.
<Canvas of={CheckboxStories.Indeterminate} />
```

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

### DatePicker Component Usage

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/DatePicker/DatePicker.mdx

Documentation for the DatePicker component properties and usage patterns.

```APIDOC
## DatePicker Component

### Description
A component for selecting a single date using an interactive calendar interface.

### Usage
```jsx
import { DatePicker } from "@openai/apps-sdk-ui/components/DatePicker";
```

### Properties
- **min** (Date) - Optional - The minimum selectable date.
- **max** (Date) - Optional - The maximum selectable date.
- **triggerShowIcon** (boolean) - Optional - Whether to display the calendar icon in the trigger. Defaults to true.
- **disabled** (boolean) - Optional - If true, prevents user interaction with the component.
```

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

### Importing Icons

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/Icons.mdx

Use this import statement to access specific icons from the library.

```jsx
import { IconName } from "@openai/apps-sdk-ui/components/Icon"
```

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

### Import Menu Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Menu/Menu.mdx

Import the Menu component from the library to use it in your application.

```jsx
import { Menu } from "@openai/apps-sdk-ui/components/Menu"
```

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

### Highlight Markdown Code

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/CodeBlock/CodeBlock.mdx

Use the `markdown` language prop for highlighting Markdown text.

```jsx
<CodeBlock language="markdown">{codeSnippet}</CodeBlock>
```

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

### Import RadioGroup Component

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/RadioGroup/RadioGroup.mdx

Import the RadioGroup component from its module. This is typically the first step before using it in your application.

```jsx
import { RadioGroup } from "@/components/ui/RadioGroup";
```

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

### Import ButtonLink

Source: https://github.com/openai/apps-sdk-ui/blob/main/src/components/Button/ButtonLink.mdx

Import the ButtonLink component from the library.

```jsx
import { ButtonLink } from "@openai/apps-sdk-ui/components/Button";
```