Popover

The anchored-panel mechanics behind Select, Menu, and Date Picker: positioning, edge flipping, and dismissal.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Button, Popover, Text } from "@aile.sh/elia";

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <Popover
      open={open}
      onClose={() => setOpen(false)}
      align="start"
      panelClassName="w-60 rounded-card bg-surface p-3 shadow-overlay"
      anchor={
        <Button variant="secondary" onClick={() => setOpen(!open)}>
          Deployment
        </Button>
      }
    >
      <Text variant="caption">
        The panel flips to the other side when it would run past the
        edge of the viewport. Escape and clicking outside close it.
      </Text>
    </Popover>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia