dialkit 1.0.0 → 1.1.0

package/dist/svelte/components/Panel.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import { DialStore } from 'dialkit/store';
+  import type { DialValue, PanelConfig, Preset } from 'dialkit/store';
+  import Folder from './Folder.svelte';
+  import PresetManager from './PresetManager.svelte';
+  import ControlRenderer from './ControlRenderer.svelte';
+
+  let { panel, defaultOpen = true, inline = false } = $props<{ panel: PanelConfig; defaultOpen?: boolean; inline?: boolean }>();
+
+  let copied = $state(false);
+  let isPanelOpen = $state(defaultOpen);
+  let values = $state<Record<string, DialValue>>(DialStore.getValues(panel.id));
+  let presets = $state<Preset[]>(DialStore.getPresets(panel.id));
+  let activePresetId = $state<string | null>(DialStore.getActivePresetId(panel.id));
+
+  const addScale = new Spring(1, { stiffness: 0.25, damping: 0.7 });
+  const copyScale = new Spring(1, { stiffness: 0.25, damping: 0.7 });
+  const clipboardOpacity = new Spring(1, { stiffness: 0.25, damping: 0.7 });
+  const clipboardScale = new Spring(1, { stiffness: 0.2, damping: 0.6 });
+  const checkOpacity = new Spring(0, { stiffness: 0.25, damping: 0.7 });
+  const checkScale = new Spring(0.5, { stiffness: 0.2, damping: 0.6 });
+
+  let copyTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    const unsub = DialStore.subscribe(panel.id, () => {
+      values = DialStore.getValues(panel.id);
+      presets = DialStore.getPresets(panel.id);
+      activePresetId = DialStore.getActivePresetId(panel.id);
+    });
+
+    return () => {
+      unsub();
+      if (copyTimeout) clearTimeout(copyTimeout);
+    };
+  });
+
+  $effect(() => {
+    if (copied) {
+      clipboardOpacity.set(0);
+      clipboardScale.set(0.5);
+      checkOpacity.set(1);
+      checkScale.set(1);
+      return;
+    }
+
+    clipboardOpacity.set(1);
+    clipboardScale.set(1);
+    checkOpacity.set(0);
+    checkScale.set(0.5);
+  });
+
+  const handleAddPreset = () => {
+    const nextNum = presets.length + 2;
+    DialStore.savePreset(panel.id, `Version ${nextNum}`);
+  };
+
+  const handleCopy = async () => {
+    const jsonStr = JSON.stringify(values, null, 2);
+    const instruction = `Update the createDialKit configuration for "${panel.name}" with these values:\n\n\`\`\`json\n${jsonStr}\n\`\`\`\n\nApply these values as the new defaults in the createDialKit call.`;
+
+    await navigator.clipboard.writeText(instruction);
+    copied = true;
+
+    if (copyTimeout) clearTimeout(copyTimeout);
+    copyTimeout = setTimeout(() => {
+      copied = false;
+    }, 1500);
+  };
+</script>
+
+<div class="dialkit-panel-wrapper">
+  <Folder title={panel.name} {defaultOpen} isRoot={true} {inline} onOpenChange={(open) => (isPanelOpen = open)}>
+    {#snippet toolbar()}
+      <button
+        class="dialkit-toolbar-add"
+        onclick={handleAddPreset}
+        onpointerdown={() => addScale.set(0.9)}
+        onpointerup={() => addScale.set(1)}
+        onpointercancel={() => addScale.set(1)}
+        onpointerleave={() => addScale.set(1)}
+        title="Add preset"
+        style:transform={`scale(${addScale.current})`}
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M4 6H20" />
+          <path d="M4 12H10" />
+          <path d="M15 15L21 15" />
+          <path d="M18 12V18" />
+          <path d="M4 18H10" />
+        </svg>
+      </button>
+
+      <PresetManager panelId={panel.id} {presets} {activePresetId} />
+
+      <button
+        class="dialkit-toolbar-copy"
+        onclick={handleCopy}
+        onpointerdown={() => copyScale.set(0.95)}
+        onpointerup={() => copyScale.set(1)}
+        onpointercancel={() => copyScale.set(1)}
+        onpointerleave={() => copyScale.set(1)}
+        title="Copy parameters"
+        style:transform={`scale(${copyScale.current})`}
+      >
+        <span class="dialkit-toolbar-copy-icon-wrap">
+          <svg
+            class="dialkit-toolbar-copy-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            style:opacity={clipboardOpacity.current}
+            style:transform={`scale(${clipboardScale.current})`}
+            style:filter={`blur(${(1 - clipboardOpacity.current) * 4}px)`}
+          >
+            <path d="M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+            <path d="M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z" fill="currentColor"/>
+            <path d="M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+
+          <svg
+            class="dialkit-toolbar-copy-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            style:opacity={checkOpacity.current}
+            style:transform={`scale(${checkScale.current})`}
+            style:filter={`blur(${(1 - checkOpacity.current) * 4}px)`}
+          >
+            <path d="M5 12.75L10 19L19 5" />
+          </svg>
+        </span>
+        Copy
+      </button>
+    {/snippet}
+
+    {#each panel.controls as control (control.path)}
+      <ControlRenderer panelId={panel.id} {control} {values} />
+    {/each}
+  </Folder>
+</div>

package/dist/svelte/components/Panel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PanelConfig } from 'dialkit/store';
+type $$ComponentProps = {
+    panel: PanelConfig;
+    defaultOpen?: boolean;
+    inline?: boolean;
+};
+declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;
+//# sourceMappingURL=Panel.svelte.d.ts.map

package/dist/svelte/components/Panel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Panel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAa,WAAW,EAAU,MAAM,eAAe,CAAC;AAKnE,KAAK,gBAAgB,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAgHzF,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/svelte/components/PresetManager.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import Portal from '../Portal.svelte';
+  import { DialStore } from 'dialkit/store';
+  import type { Preset } from 'dialkit/store';
+  import { dropdownTransition } from './transitions';
+
+  let { panelId, presets, activePresetId } = $props<{
+    panelId: string;
+    presets: Preset[];
+    activePresetId: string | null;
+  }>();
+
+  let isOpen = $state(false);
+  let pos = $state({ top: 0, left: 0, width: 0 });
+  let portalTarget = $state<HTMLElement | null>(null);
+  let triggerRef: HTMLButtonElement | undefined;
+  let dropdownRef: HTMLDivElement | undefined;
+
+  const chevronRotation = new Spring(0, { stiffness: 0.2, damping: 0.6 });
+  const chevronOpacity = new Spring(0.25, { stiffness: 0.2, damping: 0.6 });
+
+  const hasPresets = $derived(presets.length > 0);
+  const activePreset = $derived(presets.find((p: Preset) => p.id === activePresetId));
+
+  const updatePos = () => {
+    const rect = triggerRef?.getBoundingClientRect();
+    if (!rect) return;
+    pos = { top: rect.bottom + 4, left: rect.left, width: rect.width };
+  };
+
+  const openDropdown = () => {
+    if (!hasPresets) return;
+    updatePos();
+    isOpen = true;
+  };
+
+  const closeDropdown = () => {
+    isOpen = false;
+  };
+
+  $effect(() => {
+    if (typeof document === 'undefined' || !triggerRef) return;
+    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+  });
+
+  $effect(() => {
+    chevronRotation.set(isOpen ? 180 : 0);
+    chevronOpacity.set(hasPresets ? 0.6 : 0.25);
+  });
+
+  $effect(() => {
+    if (!isOpen || typeof window === 'undefined') return;
+
+    const handleViewportChange = () => updatePos();
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (triggerRef?.contains(target) || dropdownRef?.contains(target)) return;
+      closeDropdown();
+    };
+
+    updatePos();
+    document.addEventListener('mousedown', handler);
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      window.removeEventListener('resize', handleViewportChange);
+      window.removeEventListener('scroll', handleViewportChange, true);
+    };
+  });
+
+  const handleSelect = (presetId: string | null) => {
+    if (presetId) DialStore.loadPreset(panelId, presetId);
+    else DialStore.clearActivePreset(panelId);
+    closeDropdown();
+  };
+
+  const handleDelete = (e: MouseEvent, presetId: string) => {
+    e.stopPropagation();
+    DialStore.deletePreset(panelId, presetId);
+  };
+</script>
+
+<div class="dialkit-preset-manager">
+  <button
+    bind:this={triggerRef}
+    class="dialkit-preset-trigger"
+    onclick={() => (isOpen ? closeDropdown() : openDropdown())}
+    data-open={String(isOpen)}
+    data-has-preset={String(!!activePreset)}
+    data-disabled={String(!hasPresets)}
+  >
+    <span class="dialkit-preset-label">
+      {activePreset ? activePreset.name : 'Version 1'}
+    </span>
+    <svg
+      class="dialkit-select-chevron"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      style:transform={`rotate(${chevronRotation.current}deg)`}
+      style:opacity={chevronOpacity.current}
+    >
+      <path d="M6 9.5L12 15.5L18 9.5" />
+    </svg>
+  </button>
+
+  {#if portalTarget}
+    <Portal target={portalTarget}>
+      {#if isOpen}
+        <div
+          bind:this={dropdownRef}
+          class="dialkit-root dialkit-preset-dropdown"
+          style={`position:fixed;top:${pos.top}px;left:${pos.left}px;min-width:${pos.width}px;`}
+          transition:dropdownTransition={{ above: false }}
+        >
+          <div
+            class="dialkit-preset-item"
+            data-active={String(!activePresetId)}
+            onclick={() => handleSelect(null)}
+          >
+            <span class="dialkit-preset-name">Version 1</span>
+          </div>
+
+          {#each presets as preset (preset.id)}
+            <div
+              class="dialkit-preset-item"
+              data-active={String(preset.id === activePresetId)}
+              onclick={() => handleSelect(preset.id)}
+            >
+              <span class="dialkit-preset-name">{preset.name}</span>
+              <button
+                class="dialkit-preset-delete"
+                onclick={(e) => handleDelete(e, preset.id)}
+                title="Delete preset"
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5" />
+                  <path d="M10 11V16" />
+                  <path d="M14 11V16" />
+                  <path d="M3.5 6H20.5" />
+                  <path d="M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621" />
+                </svg>
+              </button>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </Portal>
+  {/if}
+</div>

package/dist/svelte/components/PresetManager.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Preset } from 'dialkit/store';
+type $$ComponentProps = {
+    panelId: string;
+    presets: Preset[];
+    activePresetId: string | null;
+};
+declare const PresetManager: import("svelte").Component<$$ComponentProps, {}, "">;
+type PresetManager = ReturnType<typeof PresetManager>;
+export default PresetManager;
+//# sourceMappingURL=PresetManager.svelte.d.ts.map

package/dist/svelte/components/PresetManager.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PresetManager.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAG3C,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC;AA0HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/SegmentedControl.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+
+  export interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label: string;
+  }
+
+  let { options, value, onChange } = $props<{
+    options: SegmentedControlOption[];
+    value: string;
+    onChange: (value: string) => void;
+  }>();
+
+  let containerRef: HTMLDivElement | undefined;
+  const buttonRefs = new Map<string, HTMLButtonElement>();
+  let pillReady = $state(false);
+  let hasAnimated = false;
+
+  const pillLeft = new Spring(0, { stiffness: 0.2, damping: 0.6 });
+  const pillWidth = new Spring(0, { stiffness: 0.2, damping: 0.6 });
+
+  const buttonRef = (node: HTMLButtonElement, key: string) => {
+    buttonRefs.set(key, node);
+    return {
+      destroy() {
+        buttonRefs.delete(key);
+      },
+    };
+  };
+
+  const measurePill = () => {
+    const button = buttonRefs.get(value);
+    if (!button || !containerRef) return null;
+    const containerRect = containerRef.getBoundingClientRect();
+    const buttonRect = button.getBoundingClientRect();
+
+    return {
+      left: buttonRect.left - containerRect.left,
+      width: buttonRect.width,
+    };
+  };
+
+  const updatePill = (shouldAnimate: boolean) => {
+    const next = measurePill();
+    if (!next) return;
+
+    if (!pillReady) {
+      pillLeft.set(next.left, { instant: true });
+      pillWidth.set(next.width, { instant: true });
+      pillReady = true;
+      return;
+    }
+
+    if (!shouldAnimate || !hasAnimated) {
+      pillLeft.set(next.left, { instant: true });
+      pillWidth.set(next.width, { instant: true });
+      return;
+    }
+
+    pillLeft.set(next.left);
+    pillWidth.set(next.width);
+  };
+
+  $effect(() => {
+    value;
+    if (!pillReady) return;
+    updatePill(true);
+  });
+
+  $effect(() => {
+    if (!containerRef || typeof ResizeObserver === 'undefined') return;
+
+    requestAnimationFrame(() => {
+      updatePill(false);
+      hasAnimated = true;
+    });
+
+    const ro = new ResizeObserver(() => updatePill(false));
+    ro.observe(containerRef);
+
+    return () => {
+      ro.disconnect();
+    };
+  });
+</script>
+
+<div bind:this={containerRef} class="dialkit-segmented">
+  <div
+    class="dialkit-segmented-pill"
+    style:left={`${pillLeft.current}px`}
+    style:width={`${pillWidth.current}px`}
+    style:visibility={pillReady ? 'visible' : 'hidden'}
+  />
+
+  {#each options as option (option.value)}
+    <button
+      use:buttonRef={option.value}
+      onclick={() => onChange(option.value)}
+      class="dialkit-segmented-button"
+      data-active={String(value === option.value)}
+    >
+      {option.label}
+    </button>
+  {/each}
+</div>

package/dist/svelte/components/SegmentedControl.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label: string;
+}
+type $$ComponentProps = {
+    options: SegmentedControlOption[];
+    value: string;
+    onChange: (value: string) => void;
+};
+declare const SegmentedControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.svelte.d.ts.map

package/dist/svelte/components/SegmentedControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAME,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AACF,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA4FJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/SelectControl.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import Portal from '../Portal.svelte';
+  import { dropdownTransition } from './transitions';
+
+  type SelectOption = string | { value: string; label: string };
+
+  let { label, value, options, onChange } = $props<{
+    label: string;
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+  }>();
+
+  let isOpen = $state(false);
+  let pos = $state<{ top: number; left: number; width: number; above: boolean } | null>(null);
+  let portalTarget = $state<HTMLElement | null>(null);
+  let triggerRef: HTMLButtonElement | undefined;
+  let dropdownRef: HTMLDivElement | undefined;
+
+  const chevronRotation = new Spring(0, { stiffness: 0.2, damping: 0.6 });
+
+  const toTitleCase = (s: string) => s.replace(/\b\w/g, (c) => c.toUpperCase());
+
+  const normalized = $derived(
+    options.map((opt: SelectOption) =>
+      typeof opt === 'string' ? { value: opt, label: toTitleCase(opt) } : opt
+    )
+  );
+
+  const selectedOption = $derived(normalized.find((o: { value: string; label: string }) => o.value === value));
+
+  const updatePos = () => {
+    if (!triggerRef || typeof window === 'undefined') return;
+    const rect = triggerRef.getBoundingClientRect();
+    const dropdownHeight = 8 + normalized.length * 36;
+    const spaceBelow = window.innerHeight - rect.bottom - 4;
+    const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
+
+    pos = {
+      top: above ? rect.top - 4 : rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      above,
+    };
+  };
+
+  const openDropdown = () => {
+    updatePos();
+    isOpen = true;
+  };
+
+  const closeDropdown = () => {
+    isOpen = false;
+  };
+
+  const dropdownStyle = $derived.by(() => {
+    if (!pos || typeof window === 'undefined') return '';
+
+    if (pos.above) {
+      return `position:fixed;left:${pos.left}px;width:${pos.width}px;bottom:${window.innerHeight - pos.top}px;transform-origin:bottom;`;
+    }
+
+    return `position:fixed;left:${pos.left}px;width:${pos.width}px;top:${pos.top}px;transform-origin:top;`;
+  });
+
+  $effect(() => {
+    if (typeof document === 'undefined' || !triggerRef) return;
+
+    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+  });
+
+  $effect(() => {
+    chevronRotation.set(isOpen ? 180 : 0);
+  });
+
+  $effect(() => {
+    if (!isOpen || typeof window === 'undefined') return;
+
+    const handleViewportChange = () => updatePos();
+
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (triggerRef?.contains(target) || dropdownRef?.contains(target)) return;
+      closeDropdown();
+    };
+
+    updatePos();
+    document.addEventListener('mousedown', handleClick);
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      window.removeEventListener('resize', handleViewportChange);
+      window.removeEventListener('scroll', handleViewportChange, true);
+    };
+  });
+</script>
+
+<div class="dialkit-select-row">
+  <button
+    bind:this={triggerRef}
+    class="dialkit-select-trigger"
+    onclick={() => (isOpen ? closeDropdown() : openDropdown())}
+    data-open={String(isOpen)}
+  >
+    <span class="dialkit-select-label">{label}</span>
+    <div class="dialkit-select-right">
+      <span class="dialkit-select-value">{selectedOption?.label ?? value}</span>
+      <svg
+        class="dialkit-select-chevron"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        style:transform={`rotate(${chevronRotation.current}deg)`}
+      >
+        <path d="M6 9.5L12 15.5L18 9.5" />
+      </svg>
+    </div>
+  </button>
+
+  {#if portalTarget}
+    <Portal target={portalTarget}>
+      {#if isOpen && pos}
+        <div
+          bind:this={dropdownRef}
+          class="dialkit-select-dropdown"
+          style={dropdownStyle}
+          transition:dropdownTransition={{ above: pos.above }}
+        >
+          {#each normalized as option (option.value)}
+            <button
+              class="dialkit-select-option"
+              data-selected={String(option.value === value)}
+              onclick={() => {
+                onChange(option.value);
+                closeDropdown();
+              }}
+            >
+              {option.label}
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </Portal>
+  {/if}
+</div>

package/dist/svelte/components/SelectControl.svelte.d.ts

@@ -0,0 +1,14 @@
+type SelectOption = string | {
+    value: string;
+    label: string;
+};
+type $$ComponentProps = {
+    label: string;
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+};
+declare const SelectControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectControl = ReturnType<typeof SelectControl>;
+export default SelectControl;
+//# sourceMappingURL=SelectControl.svelte.d.ts.map

package/dist/svelte/components/SelectControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SelectControl.svelte.ts"],"names":[],"mappings":"AAQE,KAAK,YAAY,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAC/D,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA8HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}