HoverCard

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class HoverCardAtAGlance(Component):
    template = """
      <p>Meet
        <c-CHoverCard>
          <c-fill name="activator" data="{ activator_attrs }">
            <a href="#maya" c-bind="activator_attrs">Maya Chen</a>
          </c-fill>
          <c-fill name="default">
            <c-CStack gap="sm">
              <c-CAvatar>MC</c-CAvatar>
              <strong>Maya Chen</strong>
              <span>Field researcher · 18 shared observations</span>
            </c-CStack>
          </c-fill>
        </c-CHoverCard>
      </p>
    """


preview = HoverCardAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DocumentHoverCard(Component):
    template = """
      <c-CHoverCard placement="top-start">
        <c-fill name="activator" data="{ activator_attrs }">
          <a href="#survey" c-bind="activator_attrs">Northern reef survey</a>
        </c-fill>
        <c-fill name="default">
          <c-CStack gap="sm">
            <strong>Northern reef survey</strong>
            <span>Updated today · 42 observations</span>
            <c-CProgress c-value="68" label="Review progress" />
          </c-CStack>
        </c-fill>
      </c-CHoverCard>
    """


preview = DocumentHoverCard()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledHoverCard(Component):
    template = """
      <div x-data>
        <c-CHoverCard $c-props="{open:$store.hoverExample.open,onOpenChange:(next)=>$store.hoverExample.open=next}">
          <c-fill name="activator" data="{ activator_attrs }">
            <a href="#atlas" c-bind="activator_attrs">Atlas workspace</a>
          </c-fill>
          <c-fill name="default"><strong>Atlas</strong><p>12 collaborators · Active now</p></c-fill>
        </c-CHoverCard>
        <c-CButton variant="outline" @click="$store.hoverExample.open=!$store.hoverExample.open">Toggle preview</c-CButton>
      </div>
    """
    js = "Alpine.store('hoverExample',{open:false});"


preview = ControlledHoverCard()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class HoverCardDelays(Component):
    template = """
      <c-CGroup>
        <c-CHoverCard c-delay="0" c-close_delay="0">
          <c-fill name="activator" data="{ activator_attrs }"><a href="#instant" c-bind="activator_attrs">Instant</a></c-fill>
          <c-fill name="default">No opening or closing delay.</c-fill>
        </c-CHoverCard>
        <c-CHoverCard c-delay="900" c-close_delay="500">
          <c-fill name="activator" data="{ activator_attrs }"><a href="#deliberate" c-bind="activator_attrs">Deliberate</a></c-fill>
          <c-fill name="default">A slower, forgiving preview.</c-fill>
        </c-CHoverCard>
      </c-CGroup>
    """


preview = HoverCardDelays()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class HoverCardPlacements(Component):
    template = """
      <c-CGroup style="padding-block:8rem">
        <c-CHoverCard placement="top-start">
          <c-fill name="activator" data="{ activator_attrs }"><a href="#top" c-bind="activator_attrs">Top start</a></c-fill>
          <c-fill name="default">Collision-aware top preview.</c-fill>
        </c-CHoverCard>
        <c-CHoverCard placement="bottom-end">
          <c-fill name="activator" data="{ activator_attrs }"><a href="#bottom" c-bind="activator_attrs">Bottom end</a></c-fill>
          <c-fill name="default">Collision-aware bottom preview.</c-fill>
        </c-CHoverCard>
      </c-CGroup>
    """


preview = HoverCardPlacements()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class HoverCardSizes(Component):
    template = """
      <c-CGroup>
        <c-CHoverCard size="sm">
          <c-fill name="activator" data="{ activator_attrs }"><a href="#small" c-bind="activator_attrs">Small</a></c-fill>
          <c-fill name="default">A compact preview card.</c-fill>
        </c-CHoverCard>
        <c-CHoverCard size="lg" c-arrow="False">
          <c-fill name="activator" data="{ activator_attrs }"><a href="#large" c-bind="activator_attrs">Large without arrow</a></c-fill>
          <c-fill name="default">A generous preview without a pointer arrow.</c-fill>
        </c-CHoverCard>
      </c-CGroup>
    """


preview = HoverCardSizes()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class HoverCardThemes(Component):
    template = """
      <c-CGroup>
        <div style="color-scheme:light;background:Canvas;color:CanvasText;padding:2rem">
          <c-CHoverCard>
            <c-fill name="activator" data="{ activator_attrs }"><a href="#day" c-bind="activator_attrs">Day profile</a></c-fill>
            <c-fill name="default"><strong>Light scheme</strong><p>Follows its anchor context.</p></c-fill>
          </c-CHoverCard>
        </div>
        <div style="color-scheme:dark;background:Canvas;color:CanvasText;padding:2rem">
          <c-CHoverCard>
            <c-fill name="activator" data="{ activator_attrs }"><a href="#night" c-bind="activator_attrs">Night profile</a></c-fill>
            <c-fill name="default"><strong>Dark scheme</strong><p>Follows its anchor context.</p></c-fill>
          </c-CHoverCard>
        </div>
      </c-CGroup>
    """


preview = HoverCardThemes()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomizedHoverCard(Component):
    template = """
      <c-CHoverCard
        style="--cui-hover-card-background:#fff8eb;--cui-hover-card-foreground:#7a2e0e;
               --cui-hover-card-border-color:#f79009;--cui-hover-card-radius:1.25rem"
      >
        <c-fill name="activator" data="{ activator_attrs }"><a href="#coral" c-bind="activator_attrs">Coral study</a></c-fill>
        <c-fill name="default"><strong>Coral study</strong><p>Warm brand adaptation.</p></c-fill>
      </c-CHoverCard>
    """


preview = CustomizedHoverCard()
preview  # noqa: B018