Skeleton

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SkeletonGlance(Component):
    template = """
      <section class="skeleton-glance" aria-label="Loading field note" aria-busy="true">
        <c-CSkeleton height="8rem" animation="wave" />
        <c-CGroup c-gap="'sm'">
          <c-CSkeleton kind="circle" width="2.75rem" />
          <c-CSkeleton kind="text" c-lines="3" />
        </c-CGroup>
      </section>
    """
    css = """
      :where(.skeleton-glance) {
        display: grid;
        max-inline-size: 24rem;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid light-dark(#b8cbb9, #425947);
        border-radius: 0.9rem;
      }
    """


preview = SkeletonGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SkeletonPrimitives(Component):
    template = """
      <div class="skeleton-primitives" aria-label="Loading archive specimens" aria-busy="true">
        <c-CSkeleton width="10rem" height="5rem" />
        <c-CSkeleton kind="circle" width="3rem" />
        <c-CSkeleton kind="text" width="12rem" />
      </div>
    """
    css = """
      :where(.skeleton-primitives) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
      }
    """


preview = SkeletonPrimitives()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SkeletonText(Component):
    template = """
      <div class="skeleton-text" aria-label="Loading fern description" aria-busy="true">
        <c-CSkeleton kind="text" height="1.15rem" width="55%" />
        <c-CSkeleton kind="text" c-lines="4" last_line_width="38%" />
      </div>
    """
    css = """
      :where(.skeleton-text) {
        display: grid;
        max-inline-size: 30rem;
        gap: 1rem;
      }
    """


preview = SkeletonText()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SkeletonCard(Component):
    template = """
      <c-CCard c-attrs="{'aria-label': 'Loading moonfern field note', 'aria-busy': 'true'}">
        <c-fill name="media"><c-CSkeleton height="9rem" /></c-fill>
        <c-fill name="default">
          <c-CStack c-gap="'sm'">
            <c-CSkeleton kind="text" height="1.2rem" width="48%" />
            <c-CSkeleton kind="text" c-lines="3" />
          </c-CStack>
        </c-fill>
      </c-CCard>
    """


preview = SkeletonCard()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SkeletonList(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <div class="skeleton-list" aria-label="Loading specimen index" aria-busy="true">
        <c-for each="item in items">
          <c-CGroup #c-key="item" c-gap="'sm'" c-align="'center'">
            <c-CSkeleton kind="circle" width="2.5rem" />
            <c-CSkeleton kind="text" c-lines="2" c-last_line_width="f'{45 + item * 8}%'" />
            <c-CSkeleton width="3.5rem" height="1.5rem" />
          </c-CGroup>
        </c-for>
      </div>
    """

    def template_data(
        self,
        kwargs: Kwargs,  # noqa: ARG002
        slots: Slots,  # noqa: ARG002
    ) -> dict[str, object]:
        return {"items": (0, 1, 2)}

    css = """
      :where(.skeleton-list) {
        display: grid;
        max-inline-size: 30rem;
        gap: 1rem;
      }

      :where(.skeleton-list [data-citry-ui-part="group"] > :nth-child(2)) {
        flex: 1 1 auto;
      }
    """


preview = SkeletonList()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SkeletonMotion(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <div class="skeleton-motion" aria-label="Loading archive shelves" aria-busy="true">
        <c-for each="motion in motions">
          <div><span>{{ motion }}</span><c-CSkeleton c-animation="motion" height="2.5rem" /></div>
        </c-for>
      </div>
    """

    def template_data(
        self,
        kwargs: Kwargs,  # noqa: ARG002
        slots: Slots,  # noqa: ARG002
    ) -> dict[str, object]:
        return {"motions": ("pulse", "wave", "none")}

    css = """
      :where(.skeleton-motion) {
        display: grid;
        gap: 0.75rem;
      }

      :where(.skeleton-motion > div) {
        display: grid;
        grid-template-columns: 4rem 1fr;
        align-items: center;
        gap: 0.75rem;
        font: 0.75rem ui-sans-serif, system-ui, sans-serif;
      }
    """


preview = SkeletonMotion()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SkeletonCustomization(Component):
    template = """
      <div class="skeleton-lichen" aria-label="Loading lichen plates" aria-busy="true">
        <c-CSkeleton height="5rem" animation="wave" />
        <c-CSkeleton kind="text" c-lines="3" />
      </div>
    """
    css = """
      :where(.skeleton-lichen) {
        --cui-skeleton-background: light-dark(#c9dfc8, #36513c);
        --cui-skeleton-highlight: light-dark(rgb(255 255 255 / 70%), rgb(190 239 200 / 28%));
        --cui-skeleton-radius: 1rem;
        display: grid;
        max-inline-size: 24rem;
        gap: 1rem;
      }
    """


preview = SkeletonCustomization()
preview  # noqa: B018