#Select

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Select feedback="neutral" items={items} />
  <Select feedback="primary" items={items} />
  <Select feedback="success" items={items} />
  <Select feedback="danger" items={items} />
  <Select feedback="warning" items={items} />
</div>

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Select feedback="neutral" {items} />
  <Select feedback="primary" {items} />
  <Select feedback="success" {items} />
  <Select feedback="danger" {items} />
  <Select feedback="warning" {items} />
</div>

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Select size="sm" items={items} />
  <Select size="md" items={items} />
  <Select size="lg" items={items} />
</div>

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Select size="sm" {items} />
  <Select size="md" {items} />
  <Select size="lg" {items} />
</div>

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Select
    items={items}
    passThrough={{
      root: { style: { borderRadius: "full" } },
    }}
  />
  <Select
    items={items}
    passThrough={{
      select: { style: { fontStyle: "italic" } },
    }}
  />
</div>

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Select
    {items}
    passThrough={{
      root: { style: { borderRadius: "full" } },
    }}
  />
  <Select
    {items}
    passThrough={{
      select: { style: { fontStyle: "italic" } },
    }}
  />
</div>