Toast

from typing import Any

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToastAtAGlance(Component):
    template = """
      <section class="toast-sampler">
        <p>These initial messages demonstrate presentation intent separately from urgency.</p>
        <c-CToastRegion c-items="items" c-duration_ms="0" c-limit="5" />
      </section>
    """

    def template_data(self, kwargs: Any, slots: Any) -> dict[str, object]:  # noqa: ARG002
        return {
            "items": tuple(
                citry_ui.CToastMessage(id=intent, title=title, intent=intent)
                for intent, title in (
                    ("neutral", "Draft retained"),
                    ("info", "Sync started"),
                    ("success", "Field note saved"),
                    ("warn", "Connection is slow"),
                    ("error", "Upload failed"),
                )
            )
        }

    css = ":where(.toast-sampler) { min-block-size:20rem; padding:1rem; }"


preview = ToastAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ReactiveToastQueue(Component):
    template = """
      <section class="toast-example" x-data="{notices: [], next: 1}">
        <c-CButton @click="notices = [...notices, {
          id: `note-${next}`, title: `Observation ${next++} queued`, intent: 'info'
        }]">Add notification</c-CButton>
        <c-CToastRegion $c-props="{
          items: notices,
          onDismiss: id => notices = notices.filter(item => item.id !== id),
        }" />
      </section>
    """
    css = ":where(.toast-example) { min-block-size:16rem; padding:1rem; }"


preview = ReactiveToastQueue()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToastReplacement(Component):
    template = """
      <section class="toast-example" x-data="{progress: 20}">
        <c-CButton @click="progress = Math.min(100, progress + 20)">Advance upload</c-CButton>
        <c-CToastRegion c-duration_ms="0" $c-props="{items: [{
          id: 'upload', title: `Upload ${progress}% complete`, description: 'Aurora Ridge photos'
        }]}" />
      </section>
    """
    css = ":where(.toast-example) { min-block-size:16rem; padding:1rem; }"


preview = ToastReplacement()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TimedToast(Component):
    template = """
      <section class="toast-example" x-data="{items: []}">
        <c-CButton @click="items = [{id: crypto.randomUUID(), title: 'Hover or focus to pause'}]">
          Start timed Toast
        </c-CButton>
        <c-CToastRegion c-duration_ms="4000" $c-props="{
          items,
          onDismiss: id => items = items.filter(item => item.id !== id),
        }" />
      </section>
    """
    css = ":where(.toast-example) { min-block-size:16rem; padding:1rem; }"


preview = TimedToast()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class PersistentToastAction(Component):
    template = """
      <section class="toast-example" x-data="{items: [], result: 'No action yet'}">
        <c-CButton @click="items = [{
          id: 'offline', title: 'Working offline', actionLabel: 'Retry',
          closeOnAction: false, durationMs: 0, intent: 'warn'
        }]">Show persistent action</c-CButton>
        <output x-text="result"></output>
        <c-CToastRegion $c-props="{
          items,
          onAction: () => result = 'Retry requested',
          onDismiss: id => items = items.filter(item => item.id !== id),
        }" />
      </section>
    """
    css = ":where(.toast-example) { display:grid; gap:.75rem; min-block-size:16rem; padding:1rem; }"


preview = PersistentToastAction()
preview  # noqa: B018

from typing import Any

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToastVisibleLimit(Component):
    template = """
      <section class="toast-example">
        <p>Dismiss a visible message to promote the queued third item.</p>
        <c-CToastRegion c-items="items" c-limit="2" c-duration_ms="0" />
      </section>
    """

    def template_data(self, kwargs: Any, slots: Any) -> dict[str, object]:  # noqa: ARG002
        return {
            "items": tuple(
                citry_ui.CToastMessage(id=f"queue-{index}", title=f"Queue item {index}") for index in range(1, 4)
            )
        }

    css = ":where(.toast-example) { min-block-size:16rem; padding:1rem; }"


preview = ToastVisibleLimit()
preview  # noqa: B018

from typing import Any

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToastFocusAccess(Component):
    template = """
      <section class="toast-example">
        <p>Focus this page, then press F6 to enter the notification and F6 again to return.</p>
        <c-CButton>Focus before F6</c-CButton>
        <c-CToastRegion c-items="items" c-duration_ms="0" />
      </section>
    """

    def template_data(self, kwargs: Any, slots: Any) -> dict[str, object]:  # noqa: ARG002
        return {"items": (citry_ui.CToastMessage(id="f6", title="F6 reaches this message"),)}

    css = ":where(.toast-example) { min-block-size:16rem; padding:1rem; }"


preview = ToastFocusAccess()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToastModalPause(Component):
    template = """
      <section class="toast-example" x-data="{items: [{id:'global', title:'Global queue waits', durationMs:0}]}">
        <c-CDialog>
          <c-fill name="activator" data="{ activator_attrs }">
            <c-CButton c-attrs="activator_attrs">Open modal task</c-CButton>
          </c-fill>
          <c-fill name="title">Modal-local feedback</c-fill>
          <c-fill name="default">
            <c-CAlert intent="info">Use Alert for immediate feedback inside this task.</c-CAlert>
          </c-fill>
        </c-CDialog>
        <c-CToastRegion $c-props="{items}" />
      </section>
    """
    css = ":where(.toast-example) { min-block-size:16rem; padding:1rem; }"


preview = ToastModalPause()
preview  # noqa: B018

from typing import Any

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToastPlacementRtl(Component):
    template = """
      <section class="toast-example" dir="rtl">
        <p>Logical start follows this RTL context.</p>
        <c-CToastRegion c-items="items" placement="block-end-start" c-duration_ms="0" />
      </section>
    """

    def template_data(self, kwargs: Any, slots: Any) -> dict[str, object]:  # noqa: ARG002
        return {"items": (citry_ui.CToastMessage(id="rtl", title="Logical start placement"),)}

    css = ":where(.toast-example) { min-block-size:16rem; padding:1rem; }"


preview = ToastPlacementRtl()
preview  # noqa: B018

from typing import Any

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomizedToast(Component):
    template = """
      <section class="toast-theme">
        <c-CToastRegion class_="polar-toast" c-items="items" c-duration_ms="0" />
      </section>
    """

    def template_data(self, kwargs: Any, slots: Any) -> dict[str, object]:  # noqa: ARG002
        return {
            "items": (
                citry_ui.CToastMessage(
                    id="polar",
                    title="Polar archive synchronized",
                    description="A scheme-aware brand adaptation.",
                    intent="success",
                ),
            )
        }

    css = """
      :where(.toast-theme) { color-scheme:light dark; min-block-size:16rem; padding:1rem; }
      :where(.polar-toast) {
        --cui-toast-background: light-dark(#eef8fb, #102a34);
        --cui-toast-foreground: light-dark(#17343e, #e6f7fb);
        --cui-toast-border-color: light-dark(#76b7c7, #5ea5b6);
        --cui-toast-radius: 1.25rem;
      }
    """


preview = CustomizedToast()
preview  # noqa: B018