<script lang="ts">
  import { Collapsible, Text } from '$lib';

  let isOpen = $state(true);
</script>

<div class="w-full">
  <Collapsible.Root bind:open={isOpen}>
    <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Kumo is Cloudflare's new design system.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Collapsible, Text } from '$lib';

  let isOpen = $state(false);
</script>

<div class="w-full">
  <Collapsible.Root bind:open={isOpen}>
    <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Kumo is Cloudflare's new design system.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Collapsible, Text } from '$lib';

  let open1 = $state(false);
  let open2 = $state(false);
  let open3 = $state(false);
</script>

<div class="w-full space-y-2">
  <Collapsible.Root bind:open={open1}>
    <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Kumo is Cloudflare's new design system.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>

  <Collapsible.Root bind:open={open2}>
    <Collapsible.DefaultTrigger>How do I use it?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Install the components and import them into your project.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>

  <Collapsible.Root bind:open={open3}>
    <Collapsible.DefaultTrigger>Is it open source?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Check the repository for license information.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Collapsible, Text } from '$lib';

  let isOpen = $state(false);
</script>

<div class="w-full">
  <Collapsible.Root bind:open={isOpen}>
    <Collapsible.Trigger
      class="group flex h-6.5 w-max shrink-0 items-center gap-1 rounded-md border-0 bg-kumo-base px-2 text-xs font-medium !text-kumo-default shadow-xs ring ring-kumo-hairline select-none not-disabled:hover:bg-kumo-tint focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand disabled:cursor-not-allowed disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 data-[state=open]:bg-kumo-base"
    >
      {isOpen ? 'Hide details' : 'Show details'}
    </Collapsible.Trigger>
    <Collapsible.Panel class="mt-3 rounded-lg bg-kumo-tint p-4">
      <Text>
        This panel uses custom styling instead of the default border-left accent.
      </Text>
    </Collapsible.Panel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Collapsible, Text } from '$lib';

  let activeIndex = $state<number | null>(0);

  const items = [
    {
      title: 'What is Kumo?',
      content: "Kumo is Cloudflare's new design system built on Base UI and Tailwind CSS v4."
    },
    {
      title: 'How do I install it?',
      content: 'Run `npm install @cloudflare/kumo` and import the components you need.'
    },
    {
      title: 'Is it accessible?',
      content: 'Yes! Kumo is built on Base UI which provides excellent accessibility out of the box.'
    }
  ];
</script>

<div class="w-full space-y-2">
  {#each items as item, i}
    <Collapsible.Root
      open={activeIndex === i}
      onOpenChange={(open) => (activeIndex = open ? i : null)}
    >
      <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>
      <Collapsible.DefaultPanel>
        <Text>{item.content}</Text>
      </Collapsible.DefaultPanel>
    </Collapsible.Root>
  {/each}
</div>