Sensitive Input

<script lang="ts">
  import { SensitiveInput } from "kumo-svelte/components/sensitive-input";
</script>

<div class="w-80">
  <SensitiveInput label="API Key" defaultValue="sk_live_abc123xyz789" />
</div>

<script lang="ts">
  import { SensitiveInput } from "kumo-svelte/components/sensitive-input";
  const sizes = ["xs", "sm", "base", "lg"] as const;
</script>

<div class="flex flex-col gap-4">
  {#each sizes as size}
    <div class="flex items-center gap-2">
      <span class="w-12 text-sm text-kumo-subtle">{size}</span>
      <SensitiveInput label={`${size} size`} {size} defaultValue="secret-api-key-123" />
    </div>
  {/each}
</div>

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { SensitiveInput } from "kumo-svelte/components/sensitive-input";
  let value = $state("my-secret-value");
</script>

<div class="flex w-80 flex-col gap-4">
  <SensitiveInput label="Controlled Secret" {value} onValueChange={(next) => (value = next)} />
  <div class="text-sm text-kumo-subtle">
    Current value: <code class="text-kumo-default">{value}</code>
  </div>
  <div class="flex gap-2">
    <Button onclick={() => (value = `new-secret-${Date.now()}`)} variant="primary" size="sm">Change value</Button>
    <Button onclick={() => (value = "")} variant="secondary" size="sm">Clear</Button>
  </div>
</div>

<script lang="ts">
  import { SensitiveInput } from "kumo-svelte/components/sensitive-input";
</script>

<div class="flex w-80 flex-col gap-4">
  <SensitiveInput label="Error State" variant="error" defaultValue="invalid-key" error="This API key is not valid" />
  <SensitiveInput label="Disabled" defaultValue="cannot-edit" disabled />
  <SensitiveInput label="Read-only" defaultValue="view-only-secret-key" readonly />
  <SensitiveInput
    label="With Description"
    defaultValue="my-secret-value"
    description="Keep this value secure and don't share it"
  />
</div>