kumo-svelte 0.1.0-beta.0

package/src/lib/components/input-group/InputGroup.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import {
+    INPUT_GROUP_HAS_CLASSES,
+    setInputGroupContext,
+    type FieldError,
+    type InputGroupFocusMode,
+    type InputGroupSize
+  } from './context';
+
+  const sizes: Record<InputGroupSize, string> = {
+    xs: 'h-6 text-xs rounded-sm',
+    sm: 'h-7 text-xs rounded-md',
+    base: 'h-9 text-base rounded-lg',
+    lg: 'h-11 text-base rounded-lg'
+  };
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    size?: InputGroupSize;
+    focusMode?: InputGroupFocusMode;
+    disabled?: boolean;
+    label?: string | Snippet;
+    labelTooltip?: string | Snippet;
+    description?: string;
+    error?: FieldError;
+    required?: boolean;
+    id?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    size = 'base',
+    focusMode = 'container',
+    disabled = false,
+    label,
+    labelTooltip,
+    description,
+    error,
+    required,
+    id,
+    ...rest
+  }: Props = $props();
+
+  const generatedId = `kumo-input-group-${Math.random().toString(36).slice(2)}`;
+  const inputId = $derived(id ?? generatedId);
+  const descriptionId = $derived(description ? `${inputId}-description` : undefined);
+  const errorId = $derived(error ? `${inputId}-error` : undefined);
+  const showError = $derived(typeof error === 'string' ? error : error?.message);
+  const hasField = $derived(Boolean(label || description || showError));
+
+  setInputGroupContext({
+    get size() {
+      return size;
+    },
+    get focusMode() {
+      return focusMode;
+    },
+    get disabled() {
+      return disabled;
+    },
+    get error() {
+      return error;
+    },
+    get inputId() {
+      return inputId;
+    },
+    get describedBy() {
+      return [descriptionId, errorId].filter(Boolean).join(' ') || undefined;
+    }
+  });
+</script>
+
+{#snippet control()}
+  <div
+    data-slot="input-group"
+    data-focus-mode={focusMode}
+    data-disabled={disabled ? '' : undefined}
+    role="group"
+    class={cn(
+      'relative w-full cursor-text text-kumo-default',
+      sizes[size],
+      'shadow-xs',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      focusMode === 'container'
+        ? [
+            'overflow-hidden bg-kumo-control ring ring-kumo-line',
+            'focus-within:ring-kumo-focus'
+          ]
+        : 'isolate overflow-visible bg-transparent ring-0 shadow-none',
+      'has-[input[aria-invalid=true]]:ring-kumo-danger',
+      'px-0',
+      'flex items-center gap-0',
+      'has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]',
+      'has-[[data-slot=input-group-suffix]]:[&_input]:max-w-full',
+      'has-[[data-slot=input-group-suffix]]:[&_input]:grow-0',
+      'has-[[data-slot=input-group-suffix]]:[&_input]:pr-0',
+      INPUT_GROUP_HAS_CLASSES[size],
+      '!mb-0',
+      className
+    )}
+    {...rest}
+  >
+    {#if label}
+      <label for={inputId} class="absolute inset-0 z-0 !mb-0 cursor-text" aria-hidden="true"></label>
+    {/if}
+    {@render children?.()}
+  </div>
+{/snippet}
+
+{#if hasField}
+  <div class="grid gap-2">
+    {#if label}
+      <label class="inline-flex items-center gap-1 text-base font-medium text-kumo-default" for={inputId}>
+        {#if typeof label === 'function'}{@render label()}{:else}{label}{/if}
+        {#if required}<span class="text-kumo-danger">*</span>{/if}
+        {#if required === false}<span class="font-normal text-kumo-subtle">(optional)</span>{/if}
+        {#if labelTooltip}
+          <span class="inline-flex text-kumo-muted" title={typeof labelTooltip === 'string' ? labelTooltip : undefined}>
+            {#if typeof labelTooltip === 'function'}<span class="sr-only">{@render labelTooltip()}</span>{/if}
+          </span>
+        {/if}
+      </label>
+    {/if}
+    {@render control()}
+    {#if showError}
+      <div id={errorId} class="text-sm leading-snug text-kumo-danger">{showError}</div>
+    {:else if description}
+      <div id={descriptionId} class="text-sm leading-snug text-kumo-subtle">{description}</div>
+    {/if}
+  </div>
+{:else}
+  {#if focusMode === 'container'}
+    <label class="!mb-0 block w-full">
+      {@render control()}
+    </label>
+  {:else}
+    {@render control()}
+  {/if}
+{/if}

package/src/lib/components/input-group/InputGroupAddon.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { getInputGroupContext, INPUT_GROUP_SIZE, setInputGroupAddonContext } from './context';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    align?: 'start' | 'end';
+    containsButton?: boolean;
+  }
+
+  let { children, class: className, align = 'start', containsButton = false }: Props = $props();
+
+  const context = getInputGroupContext();
+  const size = $derived(context?.size ?? 'base');
+  const tokens = $derived(INPUT_GROUP_SIZE[size]);
+
+  setInputGroupAddonContext(true);
+</script>
+
+<div
+  data-slot={align === 'start' ? 'input-group-addon-start' : 'input-group-addon-end'}
+  class={cn(
+    'relative z-[1] pointer-events-none flex shrink-0 items-center gap-1.5 text-kumo-subtle',
+    '*:pointer-events-auto',
+    tokens.fontSize,
+    align === 'start'
+      ? cn('-order-1 pr-0', containsButton ? tokens.addonButtonOuterStart : tokens.addonOuterStart)
+      : cn('order-1 pl-0', containsButton ? tokens.addonButtonOuterEnd : tokens.addonOuterEnd),
+    className
+  )}
+>
+  {@render children?.()}
+</div>

package/src/lib/components/input-group/InputGroupButton.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import { Button } from '$lib/components/button';
+  import { cn } from '$lib/utils/cn';
+  import { getInputGroupContext, INPUT_GROUP_SIZE, type InputGroupSize } from './context';
+
+  type Variant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'secondary-destructive' | 'outline';
+  type Shape = 'base' | 'square' | 'circle';
+
+  const compactButtonSize: Record<InputGroupSize, InputGroupSize> = {
+    xs: 'xs',
+    sm: 'xs',
+    base: 'sm',
+    lg: 'base'
+  };
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    icon?: Component;
+    variant?: Variant;
+    size?: InputGroupSize;
+    shape?: Shape;
+    disabled?: boolean;
+    tooltip?: string;
+    tooltipSide?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    icon: IconComponent,
+    variant = 'ghost',
+    size,
+    shape,
+    disabled,
+    tooltip,
+    tooltipSide,
+    ...rest
+  }: Props = $props();
+
+  const context = getInputGroupContext();
+  const groupSize = $derived(context?.size ?? 'base');
+  const isIndividual = $derived(context?.focusMode === 'individual' || context?.focusMode === 'hybrid');
+  const effectiveSize = $derived(size ?? (isIndividual ? groupSize : compactButtonSize[groupSize]));
+  const iconClass = $derived(INPUT_GROUP_SIZE[groupSize].iconSize);
+</script>
+
+<Button
+  type="button"
+  disabled={disabled ?? context?.disabled}
+  variant={variant}
+  size={effectiveSize}
+  shape={shape}
+  title={tooltip}
+  class={cn(
+    'pointer-events-auto',
+    isIndividual && [
+      'relative h-full! rounded-none ring-0 border border-kumo-line',
+      'first:rounded-l-[inherit] last:rounded-r-[inherit]',
+      'not-first:border-l-0',
+      'hover:z-[1]',
+      'focus:z-[2] focus:border-kumo-line focus:outline focus:-outline-offset-1',
+      'focus-visible:ring-2 focus-visible:ring-kumo-focus',
+      'disabled:bg-kumo-overlay disabled:text-kumo-inactive!'
+    ],
+    className
+  )}
+  {...rest}
+>
+  {#if IconComponent}
+    <IconComponent class={iconClass} />
+  {/if}
+  {@render children?.()}
+</Button>

package/src/lib/components/input-group/InputGroupInput.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { getInputGroupContext, INPUT_GROUP_SIZE } from './context';
+
+  interface Props {
+    class?: string;
+    value?: string | number;
+    onValueChange?: (value: string) => void;
+    oninput?: (event: Event) => void;
+    id?: string;
+    disabled?: boolean;
+    [key: string]: unknown;
+  }
+
+  let {
+    class: className,
+    value = $bindable(''),
+    onValueChange,
+    oninput,
+    id,
+    disabled,
+    ...rest
+  }: Props = $props();
+
+  const context = getInputGroupContext();
+  const size = $derived(context?.size ?? 'base');
+  const tokens = $derived(INPUT_GROUP_SIZE[size]);
+  const isIndividual = $derived(context?.focusMode === 'individual');
+  const inputId = $derived(id ?? context?.inputId);
+  const isDisabled = $derived(disabled ?? context?.disabled);
+  const hasError = $derived(Boolean(context?.error));
+  const describedBy = $derived(context?.describedBy);
+
+  function handleInput(event: Event) {
+    value = (event.currentTarget as HTMLInputElement).value;
+    onValueChange?.(String(value));
+    oninput?.(event);
+  }
+</script>
+
+<input
+  bind:value
+  id={inputId}
+  disabled={isDisabled}
+  aria-invalid={hasError || undefined}
+  aria-describedby={describedBy}
+  class={cn(
+    'flex h-full min-w-0 grow items-center rounded-none border-0 bg-transparent font-sans',
+    tokens.inputOuter,
+    'text-ellipsis text-kumo-default outline-none',
+    'placeholder:text-kumo-muted disabled:text-kumo-disabled',
+    isIndividual
+      ? [
+          'relative ring-0 border border-kumo-line',
+          'first:rounded-l-[inherit] last:rounded-r-[inherit]',
+          'not-first:border-l-0',
+          'hover:z-[1] hover:border-kumo-line',
+          'focus:z-[2] focus:border-kumo-line focus:outline focus:-outline-offset-1'
+        ]
+      : 'relative z-[1] ring-0! shadow-none focus:ring-0! focus:outline-none',
+    className
+  )}
+  oninput={handleInput}
+  {...rest}
+/>

package/src/lib/components/input-group/InputGroupSuffix.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { getInputGroupContext, INPUT_GROUP_SIZE } from './context';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+  }
+
+  let { children, class: className }: Props = $props();
+
+  const context = getInputGroupContext();
+  const size = $derived(context?.size ?? 'base');
+  const tokens = $derived(INPUT_GROUP_SIZE[size]);
+</script>
+
+<div
+  data-slot="input-group-suffix"
+  class={cn(
+    'pointer-events-none flex min-w-0 grow select-none items-center text-kumo-subtle',
+    tokens.fontSize,
+    tokens.suffixPad,
+    className
+  )}
+>
+  <span class="truncate">{@render children?.()}</span>
+</div>

package/src/lib/components/input-group/context.ts

@@ -0,0 +1,107 @@
+import { getContext, setContext } from 'svelte';
+
+export type InputGroupSize = 'xs' | 'sm' | 'base' | 'lg';
+export type InputGroupFocusMode = 'container' | 'individual' | 'hybrid';
+export type ErrorMatch = keyof ValidityState | true;
+export type FieldError = string | { message: string; match: ErrorMatch };
+
+export interface InputGroupSizeTokens {
+  inputOuter: string;
+  addonOuterStart: string;
+  addonOuterEnd: string;
+  addonButtonOuterStart: string;
+  addonButtonOuterEnd: string;
+  suffixPad: string;
+  fontSize: string;
+  iconSize: string;
+}
+
+export const INPUT_GROUP_SIZE: Record<InputGroupSize, InputGroupSizeTokens> = {
+  xs: {
+    inputOuter: 'px-1.5',
+    addonOuterStart: 'pl-1.5',
+    addonOuterEnd: 'pr-1.5',
+    addonButtonOuterStart: 'pl-1',
+    addonButtonOuterEnd: 'pr-1',
+    suffixPad: 'pr-1.5',
+    fontSize: 'text-xs',
+    iconSize: 'size-2.5'
+  },
+  sm: {
+    inputOuter: 'px-2',
+    addonOuterStart: 'pl-1.5',
+    addonOuterEnd: 'pr-1.5',
+    addonButtonOuterStart: 'pl-1',
+    addonButtonOuterEnd: 'pr-1',
+    suffixPad: 'pr-2',
+    fontSize: 'text-xs',
+    iconSize: 'size-3.5'
+  },
+  base: {
+    inputOuter: 'px-3',
+    addonOuterStart: 'pl-2',
+    addonOuterEnd: 'pr-2',
+    addonButtonOuterStart: 'pl-1',
+    addonButtonOuterEnd: 'pr-1',
+    suffixPad: 'pr-3',
+    fontSize: 'text-base',
+    iconSize: 'size-4.5'
+  },
+  lg: {
+    inputOuter: 'px-4',
+    addonOuterStart: 'pl-2.5',
+    addonOuterEnd: 'pr-2.5',
+    addonButtonOuterStart: 'pl-1.5',
+    addonButtonOuterEnd: 'pr-1.5',
+    suffixPad: 'pr-4',
+    fontSize: 'text-base',
+    iconSize: 'size-5'
+  }
+};
+
+export const INPUT_GROUP_HAS_CLASSES: Record<InputGroupSize, string> = {
+  xs: [
+    'has-[[data-slot=input-group-addon-start]]:[&_input]:pl-1',
+    'has-[[data-slot=input-group-addon-end]]:[&_input]:pr-1'
+  ].join(' '),
+  sm: [
+    'has-[[data-slot=input-group-addon-start]]:[&_input]:pl-1.5',
+    'has-[[data-slot=input-group-addon-end]]:[&_input]:pr-1.5'
+  ].join(' '),
+  base: [
+    'has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2',
+    'has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2'
+  ].join(' '),
+  lg: [
+    'has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2.5',
+    'has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2.5'
+  ].join(' ')
+};
+
+export interface InputGroupContextValue {
+  size: InputGroupSize;
+  focusMode: InputGroupFocusMode;
+  disabled: boolean;
+  error?: FieldError;
+  inputId: string;
+  describedBy?: string;
+}
+
+const INPUT_GROUP_CONTEXT = 'kumo-input-group';
+const INPUT_GROUP_ADDON_CONTEXT = 'kumo-input-group-addon';
+
+export function setInputGroupContext(context: InputGroupContextValue) {
+  setContext(INPUT_GROUP_CONTEXT, context);
+}
+
+export function getInputGroupContext() {
+  return getContext<InputGroupContextValue | undefined>(INPUT_GROUP_CONTEXT);
+}
+
+export function setInputGroupAddonContext(value: boolean) {
+  setContext(INPUT_GROUP_ADDON_CONTEXT, value);
+}
+
+export function getInputGroupAddonContext() {
+  return getContext<boolean | undefined>(INPUT_GROUP_ADDON_CONTEXT) ?? false;
+}

package/src/lib/components/input-group/index.ts

@@ -0,0 +1,28 @@
+import Root from './InputGroup.svelte';
+import Input from './InputGroupInput.svelte';
+import Addon from './InputGroupAddon.svelte';
+import Button from './InputGroupButton.svelte';
+import Suffix from './InputGroupSuffix.svelte';
+
+const InputGroup = Object.assign(Root, {
+  Root,
+  Input,
+  Addon,
+  Button,
+  Suffix
+}) as typeof Root & {
+  Root: typeof Root;
+  Input: typeof Input;
+  Addon: typeof Addon;
+  Button: typeof Button;
+  Suffix: typeof Suffix;
+};
+
+export {
+  InputGroup,
+  Input as InputGroupInput,
+  Addon as InputGroupAddon,
+  Button as InputGroupButton,
+  Suffix as InputGroupSuffix
+};
+export type { FieldError, InputGroupFocusMode, InputGroupSize } from './context';

package/src/lib/components/label/Label.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Info } from 'phosphor-svelte';
+  import { Button } from '$lib/components/button';
+  import { Tooltip } from '$lib/components/tooltip';
+  import { cn } from '$lib/utils/cn';
+
+  export const KUMO_LABEL_VARIANTS = {} as const;
+  export const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;
+
+  export interface KumoLabelVariantsProps {}
+
+  export function labelVariants(_props: KumoLabelVariantsProps = {}) {
+    return cn('m-0 text-base font-medium text-kumo-default');
+  }
+
+  export function labelContentVariants() {
+    return cn('inline-flex items-center gap-1');
+  }
+
+  interface Props extends KumoLabelVariantsProps {
+    children?: Snippet;
+    class?: string;
+    for?: string;
+    htmlFor?: string;
+    showOptional?: boolean;
+    tooltip?: string | Snippet;
+    asContent?: boolean;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    for: htmlForAlias,
+    htmlFor,
+    showOptional = false,
+    tooltip,
+    asContent = false,
+    ...rest
+  }: Props = $props();
+
+  const labelFor = $derived(htmlFor ?? htmlForAlias);
+</script>
+
+{#snippet content()}
+  {@render children?.()}
+  {#if showOptional}
+    <span class="font-normal text-kumo-subtle">(optional)</span>
+  {/if}
+  {#if tooltip}
+    {#snippet tooltipTrigger(props: Record<string, unknown>)}
+      <Button variant="ghost" size="xs" shape="square" aria-label="More information" {...props}>
+        <Info class="size-4" />
+      </Button>
+    {/snippet}
+    {#if typeof tooltip === 'string'}
+      <Tooltip content={tooltip} trigger={tooltipTrigger} />
+    {:else}
+      <Tooltip trigger={tooltipTrigger}>
+        {@render tooltip()}
+      </Tooltip>
+    {/if}
+  {/if}
+{/snippet}
+
+{#if asContent}
+  <span class={cn(labelContentVariants(), className)} {...rest}>
+    {@render content()}
+  </span>
+{:else}
+  <label class={cn(labelVariants(), labelContentVariants(), className)} for={labelFor} {...rest}>
+    {@render content()}
+  </label>
+{/if}

package/src/lib/components/label/index.ts

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

package/src/lib/components/layer-card/LayerCard.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  const LAYER_CARD_SURFACE_CLASSES =
+    'overflow-hidden rounded-lg bg-kumo-base shadow-xs ring ring-kumo-line';
+  const LAYER_CARD_LAYERED_ROOT_CLASSES =
+    'flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-hairline';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    as?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, as = 'div', ...rest }: Props = $props();
+
+  let sectionCount = $state(0);
+
+  setContext('kumo-layer-card', {
+    registerSection: () => {
+      sectionCount += 1;
+
+      return () => {
+        sectionCount -= 1;
+      };
+    }
+  });
+</script>
+
+<svelte:element
+  this={as}
+  class={cn(sectionCount > 0 ? LAYER_CARD_LAYERED_ROOT_CLASSES : LAYER_CARD_SURFACE_CLASSES, className)}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/src/lib/components/layer-card/LayerCardPrimary.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { getContext, onDestroy } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  const LAYER_CARD_PRIMARY_CLASSES =
+    'relative flex flex-col gap-2 overflow-hidden rounded-lg bg-kumo-base p-4 pr-3 text-inherit no-underline ring ring-kumo-fill';
+
+  interface LayerCardContext {
+    registerSection: () => () => void;
+  }
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+
+  const context = getContext<LayerCardContext | undefined>('kumo-layer-card');
+  const unregister = context?.registerSection();
+
+  onDestroy(() => {
+    unregister?.();
+  });
+</script>
+
+<div class={cn(LAYER_CARD_PRIMARY_CLASSES, className)} {...rest}>
+  {@render children?.()}
+</div>

package/src/lib/components/layer-card/LayerCardSecondary.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { getContext, onDestroy } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  const LAYER_CARD_SECONDARY_CLASSES =
+    '-my-2 flex items-center gap-2 bg-kumo-elevated p-4 text-base font-medium text-kumo-subtle';
+
+  interface LayerCardContext {
+    registerSection: () => () => void;
+  }
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+
+  const context = getContext<LayerCardContext | undefined>('kumo-layer-card');
+  const unregister = context?.registerSection();
+
+  onDestroy(() => {
+    unregister?.();
+  });
+</script>
+
+<div class={cn(LAYER_CARD_SECONDARY_CLASSES, className)} {...rest}>
+  {@render children?.()}
+</div>

package/src/lib/components/layer-card/index.ts

@@ -0,0 +1,14 @@
+import LayerCardRoot from './LayerCard.svelte';
+import LayerCardPrimary from './LayerCardPrimary.svelte';
+import LayerCardSecondary from './LayerCardSecondary.svelte';
+
+export const LayerCard = Object.assign(LayerCardRoot, {
+  Primary: LayerCardPrimary,
+  Secondary: LayerCardSecondary
+}) as typeof LayerCardRoot & {
+  Primary: typeof LayerCardPrimary;
+  Secondary: typeof LayerCardSecondary;
+};
+
+export { LayerCardPrimary, LayerCardSecondary };
+export default LayerCard;