kumo-svelte 0.1.0-beta.0

package/dist/components/checkbox/Checkbox.svelte

@@ -0,0 +1,107 @@
+<script module lang="ts">
+  export type CheckboxVariant = 'default' | 'error';
+
+  export function checkboxVariantClasses(variant: CheckboxVariant = 'default') {
+    return variant === 'error' ? 'ring-kumo-danger' : 'ring-kumo-hairline';
+  }
+
+  export const checkboxControlClasses =
+    'relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-[state=checked]:bg-kumo-contrast data-[state=checked]:ring-kumo-contrast data-[state=indeterminate]:bg-kumo-contrast data-[state=indeterminate]:ring-kumo-contrast';
+
+  export const checkboxInteractiveClasses =
+    'hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand';
+</script>
+
+<script lang="ts">
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+  import { Check, Minus } from 'phosphor-svelte';
+  import { cn } from '../../utils/cn';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    label?: string;
+    labelTooltip?: Snippet;
+    controlFirst?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    disabled = false,
+    variant = 'default',
+    label,
+    labelTooltip,
+    controlFirst = true,
+    required,
+    name,
+    value,
+    id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    onCheckedChange,
+    onIndeterminateChange,
+    ...rest
+  }: Props = $props();
+
+  let visibleLabel = $derived(label ?? (children ? undefined : undefined));
+  let controlLabel = $derived(ariaLabel ?? visibleLabel ?? undefined);
+</script>
+
+{#snippet control()}
+  <CheckboxPrimitive.Root
+    bind:checked
+    bind:indeterminate
+    {disabled}
+    {name}
+    {value}
+    {id}
+    aria-label={controlLabel}
+    aria-labelledby={ariaLabelledBy}
+    {onCheckedChange}
+    {onIndeterminateChange}
+    class={cn(
+      checkboxControlClasses,
+      checkboxVariantClasses(variant),
+      !disabled && checkboxInteractiveClasses,
+      disabled && 'cursor-not-allowed opacity-50',
+      className
+    )}
+    {...rest}
+  >
+    {#if indeterminate}
+      <Minus class="h-3 w-3 text-kumo-inverse" weight="bold" aria-hidden="true" />
+    {:else if checked}
+      <Check class="h-3 w-3 text-kumo-inverse" weight="bold" aria-hidden="true" />
+    {/if}
+  </CheckboxPrimitive.Root>
+{/snippet}
+
+{#if label || children}
+  <label class={cn('!m-0 !min-h-0 !text-base inline-flex items-center gap-2', controlFirst ? 'flex-row' : 'flex-row-reverse justify-end', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
+    {@render control()}
+    <span class="inline-flex items-center gap-1 text-base font-medium text-kumo-default">
+      {#if label}{label}{:else}{@render children?.()}{/if}
+      {#if required === false}<span class="text-kumo-subtle">(optional)</span>{/if}
+      {#if labelTooltip}{@render labelTooltip()}{/if}
+    </span>
+  </label>
+{:else}
+  {@render control()}
+{/if}

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,28 @@
+export type CheckboxVariant = 'default' | 'error';
+export declare function checkboxVariantClasses(variant?: CheckboxVariant): "ring-kumo-danger" | "ring-kumo-hairline";
+export declare const checkboxControlClasses = "relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-[state=checked]:bg-kumo-contrast data-[state=checked]:ring-kumo-contrast data-[state=indeterminate]:bg-kumo-contrast data-[state=indeterminate]:ring-kumo-contrast";
+export declare const checkboxInteractiveClasses = "hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand";
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    class?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    label?: string;
+    labelTooltip?: Snippet;
+    controlFirst?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+    [key: string]: unknown;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/checkbox/CheckboxGroup.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+  import { setContext } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    legend?: string;
+    description?: string | Snippet;
+    error?: string;
+    value?: string[];
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    controlFirst?: boolean;
+    class?: string;
+    onValueChange?: (value: string[]) => void;
+  }
+
+  let {
+    children,
+    legend,
+    description,
+    error,
+    value = $bindable([]),
+    disabled = false,
+    required,
+    name,
+    controlFirst = true,
+    class: className,
+    onValueChange
+  }: Props = $props();
+
+  setContext('kumo-checkbox-group', { get controlFirst() { return controlFirst; } });
+</script>
+
+<CheckboxPrimitive.Group bind:value {disabled} {required} {name} {onValueChange}>
+  <fieldset class={cn('flex flex-col gap-4', className)} {disabled}>
+    {#if legend}
+      <legend class="text-base font-medium text-kumo-default">{legend}</legend>
+    {/if}
+    <div class="flex flex-col gap-2">
+      {@render children?.()}
+    </div>
+    {#if error}
+      <p class="text-sm text-kumo-danger">{error}</p>
+    {:else if description}
+      <p class="text-sm text-kumo-subtle">
+        {#if typeof description === 'string'}{description}{:else}{@render description()}{/if}
+      </p>
+    {/if}
+  </fieldset>
+</CheckboxPrimitive.Group>

package/dist/components/checkbox/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    legend?: string;
+    description?: string | Snippet;
+    error?: string;
+    value?: string[];
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    controlFirst?: boolean;
+    class?: string;
+    onValueChange?: (value: string[]) => void;
+}
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "value">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;

package/dist/components/checkbox/CheckboxItem.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+  import { Check, Minus } from 'phosphor-svelte';
+  import { getContext } from 'svelte';
+  import {
+    checkboxControlClasses,
+    checkboxInteractiveClasses,
+    checkboxVariantClasses,
+    type CheckboxVariant
+  } from './Checkbox.svelte';
+  import { cn } from '../../utils/cn';
+
+  interface CheckboxGroupContext {
+    readonly controlFirst: boolean;
+  }
+
+  interface Props {
+    class?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    label: string;
+    value?: string;
+    name?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+  }
+
+  let {
+    class: className,
+    checked = $bindable(),
+    indeterminate = $bindable(false),
+    disabled = false,
+    variant = 'default',
+    label,
+    value,
+    name,
+    onCheckedChange,
+    onIndeterminateChange
+  }: Props = $props();
+
+  const group = getContext<CheckboxGroupContext | undefined>('kumo-checkbox-group');
+</script>
+
+<label
+  class={cn(
+    'm-0 relative inline-flex items-center gap-2',
+    !(group?.controlFirst ?? true) && 'flex-row-reverse justify-end',
+    disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+    className
+  )}
+>
+  <CheckboxPrimitive.Root
+    bind:checked
+    bind:indeterminate
+    {value}
+    {name}
+    {disabled}
+    {onCheckedChange}
+    {onIndeterminateChange}
+    class={cn(
+      'peer',
+      checkboxControlClasses,
+      checkboxVariantClasses(variant),
+      !disabled && checkboxInteractiveClasses
+    )}
+  >
+    {#if indeterminate}
+      <Minus class="h-3 w-3 text-kumo-inverse" weight="bold" aria-hidden="true" />
+    {:else if checked}
+      <Check class="h-3 w-3 text-kumo-inverse" weight="bold" aria-hidden="true" />
+    {/if}
+  </CheckboxPrimitive.Root>
+  <span class="text-base text-kumo-default">{label}</span>
+</label>

package/dist/components/checkbox/CheckboxItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type CheckboxVariant } from './Checkbox.svelte';
+interface Props {
+    class?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    label: string;
+    value?: string;
+    name?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+}
+declare const CheckboxItem: import("svelte").Component<Props, {}, "checked" | "indeterminate">;
+type CheckboxItem = ReturnType<typeof CheckboxItem>;
+export default CheckboxItem;

package/dist/components/checkbox/CheckboxLegend.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+  }
+
+  let { children, class: className }: Props = $props();
+</script>
+
+<legend class={cn('text-base font-medium text-kumo-default', className)}>
+  {@render children?.()}
+</legend>

package/dist/components/checkbox/CheckboxLegend.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    class?: string;
+}
+declare const CheckboxLegend: import("svelte").Component<Props, {}, "">;
+type CheckboxLegend = ReturnType<typeof CheckboxLegend>;
+export default CheckboxLegend;

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,12 @@
+import Root from './Checkbox.svelte';
+import Group from './CheckboxGroup.svelte';
+import Item from './CheckboxItem.svelte';
+import Legend from './CheckboxLegend.svelte';
+declare const Checkbox: typeof Root & {
+    Root: typeof Root;
+    Group: typeof Group;
+    Item: typeof Item;
+    Legend: typeof Legend;
+};
+export { Checkbox, Group as CheckboxGroup, Item as CheckboxItem, Legend as CheckboxLegend };
+export type { CheckboxVariant } from './Checkbox.svelte';

package/dist/components/checkbox/index.js

@@ -0,0 +1,11 @@
+import Root from './Checkbox.svelte';
+import Group from './CheckboxGroup.svelte';
+import Item from './CheckboxItem.svelte';
+import Legend from './CheckboxLegend.svelte';
+const Checkbox = Object.assign(Root, {
+    Root,
+    Group,
+    Item,
+    Legend
+});
+export { Checkbox, Group as CheckboxGroup, Item as CheckboxItem, Legend as CheckboxLegend };

package/dist/components/clipboard-text/ClipboardText.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import { Check, Copy } from 'phosphor-svelte';
+  import { Button } from '../button';
+  import { Tooltip } from '../tooltip';
+  import { cn } from '../../utils/cn';
+
+  export const KUMO_CLIPBOARD_TEXT_VARIANTS = {
+    size: {
+      sm: {
+        classes: 'text-xs',
+        buttonSize: 'sm',
+        description: 'Small clipboard text for compact UIs'
+      },
+      base: {
+        classes: 'text-sm',
+        buttonSize: 'base',
+        description: 'Default clipboard text size'
+      },
+      lg: {
+        classes: 'text-sm',
+        buttonSize: 'lg',
+        description: 'Large clipboard text for prominent display'
+      }
+    }
+  } as const;
+
+  export const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {
+    size: 'lg'
+  } as const;
+
+  type ClipboardTextSize = keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;
+  type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+
+  const inputSizes = {
+    sm: 'h-6.5 gap-1 rounded-md px-2',
+    base: 'h-9 gap-1.5 rounded-lg px-3',
+    lg: 'h-10 gap-2 rounded-lg px-4'
+  } as const;
+
+  const clipboardTextAnimations = {
+    initial: 'pointer-events-none absolute inset-0 flex translate-y-full items-center justify-center opacity-0',
+    animate: 'translate-y-0 opacity-100',
+    end: 'pointer-events-none absolute inset-0 flex -translate-y-full items-center justify-center opacity-0'
+  } as const;
+
+  interface Props {
+    class?: string;
+    text?: string;
+    value?: string;
+    textToCopy?: string;
+    size?: ClipboardTextSize;
+    onCopy?: () => void;
+    tooltip?: {
+      text?: string;
+      copiedText?: string;
+      side?: TooltipSide;
+    };
+    labels?: {
+      copyAction?: string;
+    };
+    [key: string]: unknown;
+  }
+
+  let {
+    class: className,
+    text,
+    value,
+    textToCopy,
+    size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,
+    onCopy,
+    tooltip,
+    labels = {},
+    ...rest
+  }: Props = $props();
+
+  let copied = $state(false);
+  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const sizeConfig = $derived(KUMO_CLIPBOARD_TEXT_VARIANTS.size[size] ?? KUMO_CLIPBOARD_TEXT_VARIANTS.size.lg);
+  const tooltipText = $derived(tooltip?.text ?? 'Copy');
+  const copiedText = $derived(tooltip?.copiedText ?? 'Copied');
+  const tooltipSide = $derived(tooltip?.side ?? 'top');
+  const copyAction = $derived(labels.copyAction ?? 'Copy to clipboard');
+  const displayText = $derived(text ?? value ?? '');
+
+  export function clipboardTextVariants({ size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size }: { size?: ClipboardTextSize } = {}) {
+    const resolvedSize = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size] ?? KUMO_CLIPBOARD_TEXT_VARIANTS.size.lg;
+
+    return cn(
+      'flex items-center overflow-hidden bg-kumo-base px-0 font-mono',
+      resolvedSize.classes
+    );
+  }
+
+  async function writeClipboard(value: string) {
+    if (
+      typeof navigator !== 'undefined' &&
+      navigator.clipboard &&
+      typeof navigator.clipboard.writeText === 'function'
+    ) {
+      await navigator.clipboard.writeText(value);
+      return;
+    }
+
+    if (typeof document === 'undefined') return;
+
+    const textarea = document.createElement('textarea');
+    textarea.value = value;
+    textarea.setAttribute('readonly', '');
+    textarea.style.position = 'absolute';
+    textarea.style.left = '-9999px';
+    document.body.appendChild(textarea);
+
+    const selection = document.getSelection();
+    const previousRange = selection?.rangeCount ? selection.getRangeAt(0) : null;
+    textarea.select();
+
+    try {
+      document.execCommand('copy');
+    } finally {
+      document.body.removeChild(textarea);
+      if (previousRange) {
+        selection?.removeAllRanges();
+        selection?.addRange(previousRange);
+      }
+    }
+  }
+
+  async function copyToClipboard() {
+    try {
+      await writeClipboard(textToCopy ?? displayText);
+      copied = true;
+      onCopy?.();
+
+      if (resetTimer) clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => {
+        copied = false;
+      }, 1500);
+    } catch (error) {
+      console.warn('Clipboard copy failed', error);
+    }
+  }
+</script>
+
+{#snippet copyButton()}
+  <Button
+    size={sizeConfig.buttonSize}
+    variant="ghost"
+    class={cn(
+      'relative isolate overflow-hidden rounded-l-none rounded-r-[inherit] border-l! border-kumo-line! px-3 transition-all duration-200',
+      'focus:ring-inset focus:ring-kumo-focus/50',
+      'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand'
+    )}
+    aria-label={copyAction}
+    onclick={copyToClipboard}
+  >
+    <span
+      class={cn(
+        'flex items-center gap-1 transition-all duration-200',
+        copied ? clipboardTextAnimations.animate : clipboardTextAnimations.initial
+      )}
+    >
+      <Check class="size-4" aria-hidden="true" />
+    </span>
+    <span
+      class={cn(
+        'flex items-center justify-center transition-all duration-200',
+        copied ? clipboardTextAnimations.end : clipboardTextAnimations.animate
+      )}
+    >
+      <Copy class="size-4" aria-hidden="true" />
+    </span>
+  </Button>
+{/snippet}
+
+<div
+  class={cn(
+    'border-0 text-kumo-default ring ring-kumo-line outline-none focus:outline-none',
+    inputSizes[size],
+    clipboardTextVariants({ size }),
+    className
+  )}
+  {...rest}
+>
+  <span class="grow truncate ps-4 pe-2">{displayText}</span>
+  {#if tooltip}
+    <div class="relative">
+      <Tooltip side={tooltipSide} content={tooltipText} disabled={copied} trigger={copyButton} />
+      {#if copied}
+        <div
+          class={cn(
+            'pointer-events-none absolute z-50 flex origin-(--bits-floating-transform-origin) flex-col rounded-md bg-kumo-base px-3 py-1.5 font-sans text-xs text-kumo-default',
+            'shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill',
+            tooltipSide === 'top' && 'bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2',
+            tooltipSide === 'bottom' && 'top-[calc(100%+8px)] left-1/2 -translate-x-1/2',
+            tooltipSide === 'left' && 'top-1/2 right-[calc(100%+8px)] -translate-y-1/2',
+            tooltipSide === 'right' && 'top-1/2 left-[calc(100%+8px)] -translate-y-1/2'
+          )}
+        >
+          {copiedText}
+        </div>
+      {/if}
+    </div>
+  {:else}
+    {@render copyButton()}
+  {/if}
+  <span class="sr-only" aria-live="polite">{copied ? copiedText : ''}</span>
+</div>

package/dist/components/clipboard-text/ClipboardText.svelte.d.ts

@@ -0,0 +1,45 @@
+declare const ClipboardText: import("svelte").Component<{
+    [key: string]: unknown;
+    class?: string;
+    text?: string;
+    value?: string;
+    textToCopy?: string;
+    size?: "base" | "sm" | "lg";
+    onCopy?: () => void;
+    tooltip?: {
+        text?: string;
+        copiedText?: string;
+        side?: "top" | "bottom" | "left" | "right";
+    };
+    labels?: {
+        copyAction?: string;
+    };
+}, {
+    KUMO_CLIPBOARD_TEXT_VARIANTS: {
+        readonly size: {
+            readonly sm: {
+                readonly classes: "text-xs";
+                readonly buttonSize: "sm";
+                readonly description: "Small clipboard text for compact UIs";
+            };
+            readonly base: {
+                readonly classes: "text-sm";
+                readonly buttonSize: "base";
+                readonly description: "Default clipboard text size";
+            };
+            readonly lg: {
+                readonly classes: "text-sm";
+                readonly buttonSize: "lg";
+                readonly description: "Large clipboard text for prominent display";
+            };
+        };
+    };
+    KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS: {
+        readonly size: "lg";
+    };
+    clipboardTextVariants: ({ size }?: {
+        size?: "base" | "sm" | "lg";
+    }) => string;
+}, "">;
+type ClipboardText = ReturnType<typeof ClipboardText>;
+export default ClipboardText;

package/dist/components/clipboard-text/index.d.ts

@@ -0,0 +1 @@
+export { default as ClipboardText } from './ClipboardText.svelte';

package/dist/components/clipboard-text/index.js

@@ -0,0 +1 @@
+export { default as ClipboardText } from './ClipboardText.svelte';