Tag and TagGroup

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TagGlance(Component):
    template = """
      <c-CStack gap="lg">
        <c-CTagGroup label="Topics">
          <c-CTag value="css">CSS</c-CTag>
          <c-CTag value="html">HTML</c-CTag>
          <c-CTag value="accessibility">Accessibility</c-CTag>
        </c-CTagGroup>
        <c-CTagGroup label="Amenities" selection_mode="multiple" c-value="['wifi']">
          <c-CTag value="wifi">Wi-Fi</c-CTag>
          <c-CTag value="parking">Parking</c-CTag>
          <c-CTag value="pool">Pool</c-CTag>
        </c-CTagGroup>
      </c-CStack>
    """


preview = TagGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TagSelection(Component):
    template = """
      <div x-data="{chosen: ['quiet']}" class="citry-ui-demo-stack">
        <c-CTagGroup
          label="Workspace qualities"
          selection_mode="multiple"
          $c-props="{value: chosen, onValueChange: (value) => chosen = value}"
        >
          <c-CTag value="quiet">Quiet</c-CTag>
          <c-CTag value="bright">Bright</c-CTag>
          <c-CTag value="central">Central</c-CTag>
        </c-CTagGroup>
        <output x-text="chosen.join(', ')"></output>
      </div>
    """


preview = TagSelection()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TagRemoval(Component):
    template = """
      <div x-data="{last: 'None'}" class="citry-ui-demo-stack">
        <c-CTagGroup
          label="Project topics"
          removable
          $c-props="{onRemove: (values) => last = values.join(', ')}"
        >
          <c-CTag value="Design">Design</c-CTag>
          <c-CTag value="Research">Research</c-CTag>
          <c-CTag value="Delivery">Delivery</c-CTag>
        </c-CTagGroup>
        <output x-text="`Requested removal: ${last}`"></output>
      </div>
    """


preview = TagRemoval()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TagActions(Component):
    template = """
      <div x-data="{last: 'None'}" class="citry-ui-demo-stack">
        <c-CTagGroup
          label="Open view"
          actionable
          $c-props="{onAction: (value) => last = value}"
        >
          <c-CTag value="overview">Overview</c-CTag>
          <c-CTag value="activity">Activity</c-CTag>
          <c-CTag value="settings">Settings</c-CTag>
        </c-CTagGroup>
        <output x-text="`Last action: ${last}`"></output>
      </div>
    """


preview = TagActions()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TagContent(Component):
    template = """
      <div style="max-inline-size: 22rem">
        <c-CTagGroup label="People">
          <c-CTag value="ava">
            <c-fill name="start"><c-CAvatar alt="Ava" size="sm">A</c-CAvatar></c-fill>
            <c-fill name="default">Ava, accessibility research</c-fill>
          </c-CTag>
          <c-CTag value="leo">
            <c-fill name="start"><c-CAvatar alt="Leo" size="sm">L</c-CAvatar></c-fill>
            <c-fill name="default">Leo, design systems</c-fill>
          </c-CTag>
        </c-CTagGroup>
      </div>
    """


preview = TagContent()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TagVariants(Component):
    template = """
      <c-CStack gap="lg">
        <c-CTagGroup
          c-for="variant in ['soft', 'solid', 'outline']"
          c-label="variant"
          c-variant="variant"
          selection_mode="single"
          value="one"
        >
          <c-CTag value="one">Selected</c-CTag><c-CTag value="two">Available</c-CTag>
        </c-CTagGroup>
        <c-CTagGroup c-for="size in ['sm', 'md', 'lg']" c-label="size" c-size="size">
          <c-CTag value="sample">Sample</c-CTag>
        </c-CTagGroup>
      </c-CStack>
    """


preview = TagVariants()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TagCustomization(Component):
    css = """
      :where(.forest-tags) {
        --cui-tag-selected-background: #176b4d;
        --cui-tag-selected-foreground: #fff;
        --cui-tag-radius: 0.45rem;
      }
    """
    template = """
      <c-CTagGroup label="Forest filters" class_="forest-tags" selection_mode="multiple" c-value="['fern']">
        <c-CTag value="fern">Fern</c-CTag>
        <c-CTag value="moss">Moss</c-CTag>
        <c-CTag value="river">River</c-CTag>
      </c-CTagGroup>
    """


preview = TagCustomization()
preview  # noqa: B018