Calendar

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';

  let value = $state(today(getLocalTimeZone()));
</script>

<Calendar bind:value />

<Calendar variant="solid" />
<Calendar variant="outline" />
<Calendar variant="soft" />
<Calendar variant="subtle" />

<Calendar size="xs" />
<Calendar size="sm" />
<Calendar size="md" />
<Calendar size="lg" />
<Calendar size="xl" />

<Calendar color="primary" />
<Calendar color="secondary" />
<Calendar color="tertiary" />
<Calendar color="success" />
<Calendar color="warning" />
<Calendar color="error" />
<Calendar color="info" />
<Calendar color="surface" />

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import type { DateValue } from '@internationalized/date';

  let values = $state<DateValue[]>([]);
</script>

<Calendar type="multiple" bind:value={values} />

<Calendar numberOfMonths={2} />

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';

  const now = today(getLocalTimeZone());
</script>

<Calendar
  minValue={now}
  maxValue={now.add({ days: 14 })}
/>

<Calendar weekNumbers />

<script lang="ts">
  import { Calendar, Popover, Button } from 'sv5ui';
  import type { DateValue } from '@internationalized/date';

  let value = $state<DateValue | undefined>(undefined);
  let open = $state(false);
  let display = $derived(value ? value.toString() : '');
</script>

<Popover bind:open>
  <Button
    variant="outline"
    color="surface"
    leadingIcon="lucide:calendar"
    label={display || 'Pick a date'}
  />
  {#snippet content()}
    <div class="p-3">
      <Calendar
        bind:value
        onValueChange={() => open = false}
        size="sm"
      />
    </div>
  {/snippet}
</Popover>