### Install Dependencies

Source: https://github.com/silk-hq/silk/blob/main/examples/css/README.md

Install project dependencies using npm, yarn, or pnpm. This is a standard step for Next.js projects.

```bash
npm install
# or
yarn install
# or
pnpm install
```

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

### Clone CSS Examples Directory

Source: https://github.com/silk-hq/silk/blob/main/examples/css/README.md

Use npx degit to quickly copy the CSS examples directory locally. This command downloads the specified directory into a new local folder.

```bash
npx degit silk-hq/silk/examples/css silk-examples-css
```

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

### Run Development Server

Source: https://github.com/silk-hq/silk/blob/main/examples/css/README.md

Start the Next.js development server using npm, yarn, or pnpm. Open http://localhost:3000 in your browser to view the application.

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

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

### Uncontrolled Sheet.Root Example

Source: https://context7.com/silk-hq/silk/llms.txt

Demonstrates the uncontrolled usage of Sheet.Root, which manages its own presented state. Requires a license key for production.

```tsx
import { Sheet } from "@silk-hq/components";

// Uncontrolled
<Sheet.Root license="commercial">
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Portal>
    <Sheet.View>
      <Sheet.Backdrop />
      <Sheet.Content>
        <Sheet.Handle action="dismiss" />
        <Sheet.Title>Hello</Sheet.Title>
        <Sheet.Description>Sheet content goes here.</Sheet.Description>
        <Sheet.Trigger action="dismiss">Close</Sheet.Trigger>
      </Sheet.Content>
    </Sheet.View>
  </Sheet.Portal>
</Sheet.Root>
```

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

### Controlled Sheet.Root Example

Source: https://context7.com/silk-hq/silk/llms.txt

Shows the controlled usage of Sheet.Root, where the presented state is managed externally via the 'presented' and 'onPresentedChange' props. A license key is required.

```tsx
import { Sheet } from "@silk-hq/components";

// Controlled
const [open, setOpen] = useState(false);
<Sheet.Root
  license="commercial"
  presented={open}
  onPresentedChange={setOpen}
  sheetRole="dialog"
>
  {/* ... */}
</Sheet.Root>
```

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

### Sheet Backdrop with Custom Opacity Animation

Source: https://context7.com/silk-hq/silk/llms.txt

Control the backdrop's opacity using travelAnimation. This example applies a custom curve that caps the opacity at 0.2.

```tsx
<Sheet.Backdrop
  travelAnimation={{
    opacity: ({ progress }) => Math.min(progress * 0.2, 0.2),
  }}
  themeColorDimming="auto"
/>
```

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

### Card-style Sheet Content with Scale Animation

Source: https://context7.com/silk-hq/silk/llms.txt

Apply travelAnimation to Sheet.Content for effects like scaling. This example scales the content in from 80% of its original size.

```tsx
<Sheet.Content
  travelAnimation={{ scale: [0.8, 1] }}
  className="card-content"
>
  {children}
</Sheet.Content>
```

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

### Sheet.View with Responsive Centered/Bottom Placement

Source: https://context7.com/silk-hq/silk/llms.txt

Sets up Sheet.View for responsive placement, appearing centered on large viewports and at the bottom on smaller ones. Utilizes 'useClientMediaQuery' for breakpoint detection.

```tsx
import { Sheet, type SheetViewProps } from "@silk-hq/components";

const largeViewport = useClientMediaQuery("(min-width: 650px)");
const placement = largeViewport ? "center" : "bottom";
const tracks: SheetViewProps["tracks"] = largeViewport ? ["top", "bottom"] : "bottom";

<Sheet.View
  contentPlacement={placement}
  tracks={tracks}
  nativeEdgeSwipePrevention={true}
>
  {/* ... */}
</Sheet.View>
```

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

### Sidebar Pattern with Sheet.Root

Source: https://context7.com/silk-hq/silk/llms.txt

Create a left-sliding sidebar drawer using Sheet.Root with `contentPlacement="left"`, `swipeOvershoot={false}`, and `sheetRole="dialog"`. Includes a visually hidden close trigger for accessibility.

```tsx
import { Sheet, VisuallyHidden } from "@silk-hq/components";

const SidebarExample = () => (
  <Sheet.Root license="commercial" sheetRole="dialog">
    <Sheet.Trigger>☰ Menu</Sheet.Trigger>
    <Sheet.Portal>
      <Sheet.View
        contentPlacement="left"
        swipeOvershoot={false}
        nativeEdgeSwipePrevention={true}
      >
        <Sheet.Backdrop />
        <Sheet.Content>
          <VisuallyHidden.Root>
            <Sheet.Title>Navigation Sidebar</Sheet.Title>
            <Sheet.Trigger action="dismiss">Close Navigation</Sheet.Trigger>
          </VisuallyHidden.Root>
          <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
          </nav>
        </Sheet.Content>
      </Sheet.View>
    </Sheet.Portal>
  </Sheet.Root>
);

```

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

### Responsive Layout with useClientMediaQuery Hook

Source: https://context7.com/silk-hq/silk/llms.txt

Use the useClientMediaQuery hook to dynamically adjust layout properties like contentPlacement and tracks based on CSS media queries. This hook re-evaluates on window resize.

```tsx
import { useClientMediaQuery } from "@silk-hq/components";

const MySheet = () => {
  const largeViewport = useClientMediaQuery("(min-width: 800px)");
  const contentPlacement = largeViewport ? "center" : "bottom";
  const tracks = largeViewport ? ["top", "bottom"] : "bottom";

  return (
    <Sheet.Root license="commercial">
      <Sheet.Trigger>Open</Sheet.Trigger>
      <Sheet.Portal>
        <Sheet.View contentPlacement={contentPlacement} tracks={tracks}>
          <Sheet.Backdrop themeColorDimming="auto" />
          <Sheet.Content>...</Sheet.Content>
        </Sheet.View>
      </Sheet.Portal>
    </Sheet.Root>
  );
};

```

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

### VisuallyHidden.Root for Accessibility

Source: https://context7.com/silk-hq/silk/llms.txt

Use VisuallyHidden.Root to hide content visually while keeping it accessible to assistive technologies. The `asChild` prop allows applying hidden styles directly to a child element.

```tsx
import { VisuallyHidden } from "@silk-hq/components";

// Wrap an element
<VisuallyHidden.Root>
  <Sheet.Title>Accessible label</Sheet.Title>
</VisuallyHidden.Root>

// Apply to child via asChild
<VisuallyHidden.Root asChild>
  <Sheet.Title className="my-title">Accessible label</Sheet.Title>
</VisuallyHidden.Root>
```

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

### Sheet.View with Spring Animation and Edge Swipe Prevention

Source: https://context7.com/silk-hq/silk/llms.txt

Configures Sheet.View for a bottom sheet with spring entrance animations, no overshoot, and native edge swipe prevention. Includes callbacks for travel status and progress.

```tsx
import { Sheet, type SheetViewProps } from "@silk-hq/components";

const springSettings = {
  easing: "spring" as const,
  stiffness: 480,
  damping: 45,
  mass: 1.5,
};

// Bottom sheet with spring entrance, no overshoot, edge-swipe prevention
<Sheet.View
  contentPlacement="bottom"
  tracks="bottom"
  swipeOvershoot={false}
  nativeEdgeSwipePrevention={true}
  enteringAnimationSettings={springSettings}
  onTravelStatusChange={(status) => {
    // "idleOutside" | "entering" | "idleInside" | "exiting"
    console.log("Travel status:", status);
  }}
  onTravel={({ progress }) => {
    // progress: 0 (fully outside) → 1 (fully presented)
    if (progress < 0.999) someRef.current?.focus(); // dismiss keyboard
  }}
>
  <Sheet.Backdrop themeColorDimming="auto" />
  <Sheet.Content>...</Sheet.Content>
</Sheet.View>
```

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

### Custom Stacking Animation for Nested Sheets

Source: https://context7.com/silk-hq/silk/llms.txt

Configure stackingAnimation on Sheet.Content for custom animations on nested sheets, such as translateX and scale.

```tsx
<Sheet.Content
  stackingAnimation={{
    translateX: ({ progress }: { progress: number }) =>
      progress <= 1 ? `${progress * -10}px` : `calc(-12.5px + 2.5px * ${progress})`,
    scale: [1, 0.933],
    transformOrigin: "0 50%",
  }}
>
  {children}
</Sheet.Content>
```

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

### Sheet.Root

Source: https://context7.com/silk-hq/silk/llms.txt

The root provider for a sheet instance. Manages presented state, license validation, stacking context, and accessibility role. Supports both controlled and uncontrolled usage.

```APIDOC
## Sheet.Root

### Description
The root provider for a sheet instance. Manages presented state, license validation, stacking context (`forComponent`), and accessibility role (`sheetRole`). Accepts controlled (`presented` / `onPresentedChange`) or uncontrolled usage.

### Usage

**Uncontrolled Example:**
```tsx
import { Sheet } from "@silk-hq/components";

<Sheet.Root license="commercial">
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Portal>
    <Sheet.View>
      <Sheet.Backdrop />
      <Sheet.Content>
        <Sheet.Handle action="dismiss" />
        <Sheet.Title>Hello</Sheet.Title>
        <Sheet.Description>Sheet content goes here.</Sheet.Description>
        <Sheet.Trigger action="dismiss">Close</Sheet.Trigger>
      </Sheet.Content>
    </Sheet.View>
  </Sheet.Portal>
</Sheet.Root>
```

**Controlled Example:**
```tsx
import { Sheet } from "@silk-hq/components";
import { useState } from "react";

const [open, setOpen] = useState(false);
<Sheet.Root
  license="commercial"
  presented={open}
  onPresentedChange={setOpen}
  sheetRole="dialog"
>
  {/* ... other sheet components ... */}
</Sheet.Root>
```

### Props
- **license** (string) - Required - Commercial license key for production use.
- **presented** (boolean) - Optional - Controls the presented state of the sheet (for controlled usage).
- **onPresentedChange** (function) - Optional - Callback function when the presented state changes (for controlled usage).
- **sheetRole** (string) - Optional - Accessibility role for the sheet (e.g., "dialog").
```

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

### Stacking-Aware Low-Opacity Backdrop

Source: https://context7.com/silk-hq/silk/llms.txt

Configure travelAnimation for Sheet.Backdrop to control opacity, useful for stacking sheets with a subtle dimming effect.

```tsx
<Sheet.Backdrop
  travelAnimation={{ opacity: [0, 0.2] }}
  themeColorDimming="auto"
/>
```

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

### Sheet Handle - Contextual Step/Dismiss Action

Source: https://context7.com/silk-hq/silk/llms.txt

Conditionally set the action prop on Sheet.Handle to 'dismiss' when the last detent is reached, or 'step' otherwise.

```tsx
<Sheet.Handle action={reachedLastDetent ? "dismiss" : "step"} />
```

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

### Sheet Trigger - Step Action

Source: https://context7.com/silk-hq/silk/llms.txt

Use action='step' on Sheet.Trigger to advance the sheet to its next detent state.

```tsx
<Sheet.Trigger action="step">Expand</Sheet.Trigger>
```

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

### Toast Pattern with Sheet.Root

Source: https://context7.com/silk-hq/silk/llms.txt

Implement an auto-dismissing toast notification using Sheet.Root in controlled mode. A useEffect timer dismisses the toast after 5 seconds of inactivity. Ensure `sheetRole=""` and `inertOutside={false}` are set for toast behavior.

```tsx
import { Sheet, useClientMediaQuery } from "@silk-hq/components";
import { useState, useEffect, useRef } from "react";

const ToastExample = () => {
  const [presented, setPresented] = useState(false);
  const [travelStatus, setTravelStatus] = useState("idleOutside");
  const [pointerOver, setPointerOver] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout>>();
  const largeViewport = useClientMediaQuery("(min-width: 1000px)");
  const placement = largeViewport ? "right" : "top";

  useEffect(() => {
    if (presented && travelStatus === "idleInside" && !pointerOver) {
      timer.current = setTimeout(() => setPresented(false), 5000);
    } else {
      clearTimeout(timer.current);
    }
    return () => clearTimeout(timer.current);
  }, [presented, travelStatus, pointerOver]);

  return (
    <>
      <button onClick={() => setPresented(true)}>Show Toast</button>
      <Sheet.Root
        license="commercial"
        presented={presented}
        onPresentedChange={setPresented}
        sheetRole=""
      >
        <Sheet.Portal>
          <div role="status" aria-live="polite">
            <Sheet.View
              contentPlacement={placement}
              inertOutside={false}
              onPresentAutoFocus={{ focus: false }}
              onDismissAutoFocus={{ focus: false }}
              onClickOutside={{ dismiss: false, stopOverlayPropagation: false }}
              onEscapeKeyDown={{ dismiss: false, stopOverlayPropagation: false }}
              onTravelStatusChange={setTravelStatus}
            >
              <Sheet.Content asChild>
                <Sheet.SpecialWrapper.Root>
                  <Sheet.SpecialWrapper.Content
                    onPointerEnter={() => setPointerOver(true)}
                    onPointerLeave={() => setPointerOver(false)}
                  >
                    <Sheet.Title>File saved</Sheet.Title>
                    <Sheet.Description>Your changes have been saved successfully.</Sheet.Description>
                  </Sheet.SpecialWrapper.Content>
                </Sheet.SpecialWrapper.Root>
              </Sheet.Content>
            </Sheet.View>
          </div>
        </Sheet.Portal>
      </Sheet.Root>
    </>
  );
};

```

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

### Basic Sheet Content with Bleeding Background

Source: https://context7.com/silk-hq/silk/llms.txt

Use Sheet.Content for the main panel. Include Sheet.BleedingBackground to extend the background color into safe area notches.

```tsx
<Sheet.Content className="my-content">
  <Sheet.BleedingBackground className="my-bleeding-bg" />
  <Sheet.Handle action="dismiss" />
  <Sheet.Title>Panel Title</Sheet.Title>
  <p>Body content</p>
</Sheet.Content>
```

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

### Sheet Portal - Custom Container

Source: https://context7.com/silk-hq/silk/llms.txt

Specify a custom DOM element for Sheet.Portal to render into using the 'container' prop, often managed with a ref.

```tsx
const containerRef = useRef<HTMLDivElement>(null);
<Sheet.Portal container={containerRef.current}>
  {/* ... */}
</Sheet.Portal>
```

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

### Sheet Trigger - Dismiss Action

Source: https://context7.com/silk-hq/silk/llms.txt

Set the action prop to 'dismiss' on Sheet.Trigger to create a button that closes the sheet.

```tsx
<Sheet.Trigger action="dismiss" className="close-btn">Got it</Sheet.Trigger>
```

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

### Sheet Backdrop with Auto Theme Color Dimming

Source: https://context7.com/silk-hq/silk/llms.txt

Use Sheet.Backdrop for the dimming overlay. 'auto' themeColorDimming enables native-style status bar dimming by reading the meta theme-color tag.

```tsx
<Sheet.Backdrop themeColorDimming="auto" />
```

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

### Sheet Title and Description - Visible

Source: https://context7.com/silk-hq/silk/llms.txt

Use Sheet.Title and Sheet.Description for accessible headings and descriptions within the sheet. They can be styled with standard CSS classes.

```tsx
import { Sheet, VisuallyHidden } from "@silk-hq/components";

// Visible title
<Sheet.Title className="sheet-title">Edit Product</Sheet.Title>
<Sheet.Description className="sheet-desc">Fill in the fields below.</Sheet.Description>
```

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

### Sheet-aware Scrollable Regions with Scroll Components

Source: https://context7.com/silk-hq/silk/llms.txt

Integrate Scrollable regions with Silk sheets using Scroll.Root, Scroll.View, and Scroll.Content. These components handle gesture coordination, safe-area insets, and keyboard dismissal.

```tsx
import { Scroll } from "@silk-hq/components";

// Vertical scroll inside a sheet with upward-swipe trap
<Scroll.Root>
  <Scroll.View
    scrollGestureTrap={{ yEnd: true }}
    scrollGesture={detentReached ? "auto" : false} // disable scroll until expanded
    safeArea="layout-viewport"
    onScrollStart={{ dismissKeyboard: true }}
  >
    <Scroll.Content>
      {items.map(item => <div key={item.id}>{item.name}</div>)}
    </Scroll.Content>
  </Scroll.View>
</Scroll.Root>
```

```tsx
// Horizontal scroll gallery (no native scrollbar)
<Scroll.Root asChild>
  <Scroll.View axis="x" nativeScrollbar={false}>
    <Scroll.Content>
      {images.map((_, i) => <div className="image-slide" key={i} />)}
    </Scroll.Content>
  </Scroll.View>
</Scroll.Root>
```

```tsx
// Scroll position drives sheet track switching (for tall content)
<Scroll.Root componentRef={scrollRef} asChild>
  <Scroll.View
    onScroll={({ progress }) => {
      setTrack(progress < 0.5 ? "bottom" : "top");
    }}
  >
    <Scroll.Content>{longContent}</Scroll.Content>
  </Scroll.View>
</Scroll.Root>
```

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

### Sheet.View

Source: https://context7.com/silk-hq/silk/llms.txt

The element that receives swipe gestures, controls content placement, tracks/detents, and manages animation settings. It fires various travel lifecycle callbacks.

```APIDOC
## Sheet.View

### Description
The element that receives swipe gestures, controls content placement direction, tracks/detents, animation settings, and fires travel lifecycle callbacks.

### Usage

**Bottom sheet with spring entrance:**
```tsx
import { Sheet, type SheetViewProps } from "@silk-hq/components";

const springSettings = {
  easing: "spring" as const,
  stiffness: 480,
  damping: 45,
  mass: 1.5,
};

<Sheet.View
  contentPlacement="bottom"
  tracks="bottom"
  swipeOvershoot={false}
  nativeEdgeSwipePrevention={true}
  enteringAnimationSettings={springSettings}
  onTravelStatusChange={(status) => {
    // "idleOutside" | "entering" | "idleInside" | "exiting"
    console.log("Travel status:", status);
  }}
  onTravel={({ progress }) => {
    // progress: 0 (fully outside) → 1 (fully presented)
    if (progress < 0.999) someRef.current?.focus(); // dismiss keyboard
  }}
>
  <Sheet.Backdrop themeColorDimming="auto" />
  <Sheet.Content>...</Sheet.Content>
</Sheet.View>
```

**Centered detached sheet with responsive placement:**
```tsx
import { Sheet, type SheetViewProps } from "@silk-hq/components";
import { useClientMediaQuery } from "@silk-hq/components"; // Assuming this hook is available

const largeViewport = useClientMediaQuery("(min-width: 650px)");
const placement = largeViewport ? "center" : "bottom";
const tracks: SheetViewProps["tracks"] = largeViewport ? ["top", "bottom"] : "bottom";

<Sheet.View
  contentPlacement={placement}
  tracks={tracks}
  nativeEdgeSwipePrevention={true}
>
  {/* ... */}
</Sheet.View>
```

### Props
- **contentPlacement** (string) - Optional - Defines the placement of the content (`"bottom"` | `"top"` | `"left"` | `"right"` | `"center"`).
- **tracks** (string | string[]) - Optional - Specifies the track(s) the sheet can move between.
- **detents** (array) - Optional - Defines the specific positions (heights/widths) the sheet can snap to.
- **swipeOvershoot** (boolean) - Optional - Enables or disables swipe overshoot behavior.
- **swipe** (boolean) - Optional - Enables or disables swipe gestures.
- **nativeEdgeSwipePrevention** (boolean) - Optional - Enables native edge swipe gesture prevention.
- **inertOutside** (boolean) - Optional - Controls whether content outside the sheet is inert.
- **onTravelStatusChange** (function) - Optional - Callback fired when the travel status changes.
- **onTravel** (function) - Optional - Callback fired during sheet travel, providing progress.
- **onTravelRangeChange** (function) - Optional - Callback fired when the travel range changes.
- **enteringAnimationSettings** (object) - Optional - Settings for the entering animation.
- **exitingAnimationSettings** (object) - Optional - Settings for the exiting animation.
```

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

### SheetStack.Root for Nested Sheets

Source: https://context7.com/silk-hq/silk/llms.txt

Use SheetStack.Root to coordinate stacking animations for multiple Sheet.Root instances. Associate inner Sheet.Root components with the nearest SheetStack using forComponent="closest".

```tsx
import { SheetStack, Sheet } from "@silk-hq/components";

<SheetStack.Root>
  <Sheet.Root license="commercial" forComponent="closest">
    <Sheet.Trigger>Open Profile</Sheet.Trigger>
    <Sheet.Portal>
      <Sheet.View contentPlacement="bottom">
        <Sheet.Backdrop />
        <Sheet.Content stackingAnimation={{ scale: [1, 0.933], translateY: ... }}>
          {/* nested sheet trigger inside */}
          <Sheet.Root license="commercial" forComponent="closest">
            <Sheet.Trigger>Open Related</Sheet.Trigger>
            <Sheet.Portal>
              <Sheet.View contentPlacement="bottom">
                <Sheet.Backdrop />
                <Sheet.Content>...</Sheet.Content>
              </Sheet.View>
            </Sheet.Portal>
          </Sheet.Root>
        </Sheet.Content>
      </Sheet.View>
    </Sheet.Portal>
  </Sheet.Root>
</SheetStack.Root>
```

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

### Sheet Portal - Default Usage

Source: https://context7.com/silk-hq/silk/llms.txt

Sheet.Portal renders sheet UI outside the current DOM tree, typically appended to document.body. It requires Sheet.View, Sheet.Backdrop, and Sheet.Content within it.

```tsx
<Sheet.Portal>
  <Sheet.View>
    <Sheet.Backdrop />
    <Sheet.Content>...</Sheet.Content>
  </Sheet.View>
</Sheet.Portal>
```

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

### Sheet Title - Visually Hidden for Accessibility

Source: https://context7.com/silk-hq/silk/llms.txt

Wrap Sheet.Title with VisuallyHidden.Root to make it accessible to screen readers but invisible on screen.

```tsx
import { Sheet, VisuallyHidden } from "@silk-hq/components";

// Visually hidden title (accessible but invisible)
<VisuallyHidden.Root asChild>
  <Sheet.Title>Sheet label for screen readers</Sheet.Title>
</VisuallyHidden.Root>
```

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

### Multi-stop Sheets with Sheet.View detents

Source: https://context7.com/silk-hq/silk/llms.txt

Create multi-stop sheets by passing CSS lengths or arrays to `detents`. Control the active detent with `activeDetent` and `onActiveDetentChange`. `swipeOvershoot={false}` prevents dragging past the last detent.

```tsx
const [activeDetent, setActiveDetent] = useState(0);

<Sheet.Root
  license="commercial"
  activeDetent={activeDetent}
  onActiveDetentChange={setActiveDetent}
>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Portal>
    <Sheet.View
      detents={activeDetent < 2 ? "66vh" : undefined} // undefined = full height
      swipeOvershoot={false}
      onTravelRangeChange={({ start }) => {
        if (start === 2) setReachedLastDetent(true); // 3rd detent reached
      }}
      onTravelStatusChange={(status) => {
        if (status === "idleOutside") setReachedLastDetent(false);
      }}
    >
      <Sheet.Backdrop themeColorDimming="auto" />
      <Sheet.Content>
        <Sheet.Handle action={reachedLastDetent ? "dismiss" : "step"} />
        {scrollableContent}
      </Sheet.Content>
    </Sheet.View>
  </Sheet.Portal>
</Sheet.Root>
```

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

### Sheet Handle - Dismiss Action

Source: https://context7.com/silk-hq/silk/llms.txt

Sheet.Handle provides a drag indicator and can also act as a trigger. Use action='dismiss' for closing the sheet.

```tsx
<Sheet.Handle action="dismiss" className="handle" />
```

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

### Sheet Trigger - Default Present Action

Source: https://context7.com/silk-hq/silk/llms.txt

Sheet.Trigger is a button to present or dismiss the sheet. The default action is 'present'.

```tsx
<Sheet.Trigger className="open-btn">Open Sheet</Sheet.Trigger>
```

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

### Sheet SpecialWrapper for Pointer Event Handling

Source: https://context7.com/silk-hq/silk/llms.txt

Sheet.SpecialWrapper is a composition helper for Sheet.Content when using 'asChild'. It allows overriding pointer events on child elements, like pausing auto-dismiss on hover.

```tsx
<Sheet.Content asChild>
  <Sheet.SpecialWrapper.Root>
    <Sheet.SpecialWrapper.Content
      onPointerEnter={() => setPaused(true)}
      onPointerLeave={() => setPaused(false)}
    >
      {children}
    </Sheet.SpecialWrapper.Content>
  </Sheet.SpecialWrapper.Root>
</Sheet.Content>
```

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

### Sheet Bleeding Background for Safe Area Fill

Source: https://context7.com/silk-hq/silk/llms.txt

Sheet.BleedingBackground is used within Sheet.Content to extend the background color into device safe areas, ensuring a seamless look.

```tsx
<Sheet.Content className="bottom-sheet-content">
  <Sheet.BleedingBackground className="bottom-sheet-bleed" />
  {/* rest of content */}
</Sheet.Content>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.