# `PhiaUi.Components.OverlaySurface`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/surface/overlay_surface.ex#L1)

Overlay surface components for PhiaUI — 6 components for scrims, image overlays,
gradient overlays, spotlights, and bottom sheets.

Uses `Phoenix.LiveView.JS` for bottom sheet open/close animations (no custom JS hook).

## Components
- `scrim/1` — fixed-position dark/light overlay
- `image_scrim/1` — directional gradient scrim over images
- `gradient_overlay/1` — absolute positioned gradient overlay
- `spotlight_overlay/1` — radial vignette / spotlight effect
- `bottom_sheet/1` — slide-up bottom sheet panel
- `bottom_sheet_trigger/1` — click wrapper to open a bottom sheet

# `bottom_sheet`

Slide-up bottom sheet panel controlled via JS.open_bottom_sheet/1 and
JS.close_bottom_sheet/1 helper functions.

## Examples

    <.bottom_sheet id="settings-sheet">
      <:header>Settings</:header>
      <p>Sheet content here</p>
      <:footer>
        <button phx-click={close_bottom_sheet("settings-sheet")}>Close</button>
      </:footer>
    </.bottom_sheet>

    <.bottom_sheet_trigger for="settings-sheet">
      <button>Open Sheet</button>
    </.bottom_sheet_trigger>

## Attributes

* `id` (`:string`) (required)
* `modal` (`:boolean`) - Defaults to `true`.
* `class` (`:string`) - Defaults to `nil`.
## Slots

* `inner_block` (required)
* `header`
* `footer`

# `bottom_sheet_trigger`

Click wrapper that opens the target bottom sheet.

## Examples

    <.bottom_sheet_trigger for="settings-sheet">
      <button>Open Settings</button>
    </.bottom_sheet_trigger>

## Attributes

* `for` (`:string`) (required)
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `close_bottom_sheet`

Returns a JS command to close the bottom sheet with the given id.

# `gradient_overlay`

Absolute positioned gradient overlay with configurable direction and colors.

## Examples

    <div class="relative">
      <img src="/bg.jpg" />
      <.gradient_overlay direction="t" from_color="from-primary/80" to_color="to-transparent">
        <p class="text-white">Top gradient</p>
      </.gradient_overlay>
    </div>

## Attributes

* `direction` (`:string`) - Defaults to `"b"`. Must be one of `"t"`, `"b"`, `"l"`, `"r"`, `"tr"`, `"tl"`, `"br"`, or `"bl"`.
* `from_color` (`:string`) - Defaults to `"from-black/60"`.
* `to_color` (`:string`) - Defaults to `"to-transparent"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `image_scrim`

Directional gradient scrim for image overlays. Place inside a `relative` parent.

## Examples

    <div class="relative">
      <img src="/photo.jpg" />
      <.image_scrim direction="bottom" intensity="lg">
        <h2 class="text-white">Caption</h2>
      </.image_scrim>
    </div>

## Attributes

* `direction` (`:string`) - Defaults to `"bottom"`. Must be one of `"top"`, `"bottom"`, `"left"`, `"right"`, or `"all"`.
* `intensity` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, `"lg"`, or `"full"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `open_bottom_sheet`

Returns a JS command to open the bottom sheet with the given id.

# `scrim`

Fixed-position full-screen scrim overlay.

## Examples

    <.scrim color="dark" opacity="md" />

    <.scrim blur>
      <p class="text-white">Content on top of scrim</p>
    </.scrim>

## Attributes

* `color` (`:string`) - Defaults to `"dark"`. Must be one of `"dark"`, or `"light"`.
* `opacity` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `blur` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `spotlight_overlay`

Radial vignette / spotlight overlay — dark edges, bright center.

## Examples

    <div class="relative">
      <.spotlight_overlay size="lg" position="center" />
    </div>

## Attributes

* `size` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `position` (`:string`) - Defaults to `"center"`. Must be one of `"center"`, `"top"`, or `"bottom"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

---

*Consult [api-reference.md](api-reference.md) for complete listing*