@cloudvoyant/helical-svelte 0.19.0

package/dist/questions/SingleChoiceQuestion.svelte

@@ -0,0 +1,141 @@
+<!-- libs/helical-svelte/src/questions/SingleChoiceQuestion.svelte -->
+<!-- Closely based on: diffbook Quiz, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import RadioGroup from '../radio-group/RadioGroup.svelte';
+  import RadioGroupItem from '../radio-group/RadioGroupItem.svelte';
+  import {
+    questionCardBase,
+    questionPromptBase,
+    questionGroupBase,
+    questionOptionBase,
+    questionOptionCorrectBase,
+    questionOptionIncorrectBase,
+    questionCheckButtonBase,
+    feedbackCorrectBase,
+    feedbackIncorrectBase,
+    feedbackExplanationBase,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    id: string;
+    prompt: string;
+    choices: string[];
+    correct: number;
+    explanation?: string;
+    quiz?: boolean;
+    submitted?: boolean;
+    onAnswerChange?: (state: { answered: boolean; correct: boolean }) => void;
+    onGraded?: (correct: boolean) => void;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    prompt,
+    choices,
+    correct,
+    explanation = undefined,
+    quiz = false,
+    submitted = false,
+    onAnswerChange,
+    onGraded,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let selected = $state<number | null>(null);
+  let result = $state<boolean | null>(null);
+
+  const displayResult = $derived(quiz ? (submitted ? selected === correct : null) : result);
+
+  function handleCheck() {
+    if (selected === null) return;
+    const isCorrect = selected === correct;
+    result = isCorrect;
+    onGraded?.(isCorrect);
+  }
+</script>
+
+<div class={cn(questionCardBase, className)} {...rest}>
+  <p class={questionPromptBase}>{prompt}</p>
+  <RadioGroup
+    orientation="vertical"
+    value={selected !== null ? String(selected) : null}
+    onValueChange={(details) => {
+      if (quiz ? submitted : result !== null) return;
+      selected = details.value != null ? Number(details.value) : null;
+      if (quiz) {
+        const has = selected !== null;
+        onAnswerChange?.({ answered: has, correct: has && selected === correct });
+      }
+    }}
+    disabled={quiz ? submitted : result !== null}
+    class={questionGroupBase}
+  >
+    {#each choices as choice, i (i)}
+      <RadioGroupItem
+        value={String(i)}
+        class={cn(
+          questionOptionBase,
+          displayResult !== null && i === correct && questionOptionCorrectBase,
+          displayResult !== null && i === selected && i !== correct && questionOptionIncorrectBase,
+        )}
+      >
+        {choice}
+      </RadioGroupItem>
+    {/each}
+  </RadioGroup>
+  {#if !quiz && result === null}
+    <Ark as="button" type="button" onclick={handleCheck} disabled={selected === null} class={questionCheckButtonBase}>
+      Check
+    </Ark>
+  {/if}
+  {#if displayResult !== null}
+    <div aria-live="polite" role="status" class="mt-3">
+      <div
+        class={cn(
+          'flex items-center gap-2 text-sm font-medium',
+          displayResult ? feedbackCorrectBase : feedbackIncorrectBase,
+        )}
+      >
+        {#if displayResult}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="size-4 shrink-0"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="m9 12 2 2 4-4"></path>
+          </svg>
+          <span>Correct</span>
+        {:else}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="size-4 shrink-0"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="m15 9-6 6"></path>
+            <path d="m9 9 6 6"></path>
+          </svg>
+          <span>Incorrect</span>
+        {/if}
+      </div>
+      {#if explanation}<p class={feedbackExplanationBase}>{explanation}</p>{/if}
+    </div>
+  {/if}
+</div>

package/dist/questions/SingleChoiceQuestion.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    id: string;
+    prompt: string;
+    choices: string[];
+    correct: number;
+    explanation?: string;
+    quiz?: boolean;
+    submitted?: boolean;
+    onAnswerChange?: (state: {
+        answered: boolean;
+        correct: boolean;
+    }) => void;
+    onGraded?: (correct: boolean) => void;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const SingleChoiceQuestion: import("svelte").Component<Props, {}, "">;
+type SingleChoiceQuestion = ReturnType<typeof SingleChoiceQuestion>;
+export default SingleChoiceQuestion;

package/dist/questions/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SingleChoiceQuestion } from './SingleChoiceQuestion.svelte';
+export { default as MultipleChoiceQuestion } from './MultipleChoiceQuestion.svelte';
+export { default as NumericQuestion } from './NumericQuestion.svelte';
+export { default as Quiz } from './Quiz.svelte';

package/dist/questions/index.js

@@ -0,0 +1,5 @@
+// libs/helical-svelte/src/questions/index.ts
+export { default as SingleChoiceQuestion } from './SingleChoiceQuestion.svelte';
+export { default as MultipleChoiceQuestion } from './MultipleChoiceQuestion.svelte';
+export { default as NumericQuestion } from './NumericQuestion.svelte';
+export { default as Quiz } from './Quiz.svelte';

package/dist/radio-group/RadioGroup.svelte

@@ -0,0 +1,16 @@
+<!-- libs/helical-svelte/src/radio-group/RadioGroup.svelte -->
+<!-- Closely based on: Shark UI radio group (@ark-ui/svelte/radio-group), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { RadioGroupRoot, type RadioGroupRootProps } from '@ark-ui/svelte/radio-group';
+  import { radioGroupRootBase, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = RadioGroupRootProps & { class?: string };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(radioGroupRootBase, className));
+</script>
+
+<RadioGroupRoot class={classes} {...rest}>
+  {@render children?.()}
+</RadioGroupRoot>

package/dist/radio-group/RadioGroup.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type RadioGroupRootProps } from '@ark-ui/svelte/radio-group';
+type Props = RadioGroupRootProps & {
+    class?: string;
+};
+declare const RadioGroup: import("svelte").Component<Props, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/radio-group/RadioGroupItem.svelte

@@ -0,0 +1,26 @@
+<!-- libs/helical-svelte/src/radio-group/RadioGroupItem.svelte -->
+<!-- Closely based on: Shark UI radio group (@ark-ui/svelte/radio-group), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import {
+    RadioGroupItem as ArkRadioGroupItem,
+    RadioGroupItemControl,
+    RadioGroupItemText,
+    RadioGroupItemHiddenInput,
+    type RadioGroupItemProps,
+  } from '@ark-ui/svelte/radio-group';
+  import { radioGroupItemControlBase, radioGroupItemTextBase, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = RadioGroupItemProps & { class?: string };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn('flex cursor-pointer items-center gap-2.5', className));
+</script>
+
+<ArkRadioGroupItem class={classes} {...rest}>
+  <RadioGroupItemControl class={radioGroupItemControlBase}>
+    <span class="size-1.5 rounded-full bg-current hidden [[data-state=checked]>&]:block"></span>
+  </RadioGroupItemControl>
+  <RadioGroupItemText class={radioGroupItemTextBase}>{@render children?.()}</RadioGroupItemText>
+  <RadioGroupItemHiddenInput />
+</ArkRadioGroupItem>

package/dist/radio-group/RadioGroupItem.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type RadioGroupItemProps } from '@ark-ui/svelte/radio-group';
+type Props = RadioGroupItemProps & {
+    class?: string;
+};
+declare const RadioGroupItem: import("svelte").Component<Props, {}, "">;
+type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
+export default RadioGroupItem;

package/dist/radio-group/index.d.ts

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

package/dist/radio-group/index.js

@@ -0,0 +1,3 @@
+// libs/helical-svelte/src/radio-group/index.ts
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as RadioGroupItem } from './RadioGroupItem.svelte';

package/dist/select/Select.svelte

@@ -0,0 +1,70 @@
+<!-- libs/helical-svelte/src/select/Select.svelte -->
+<!-- Closely based on: Shark UI select + native-select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<!-- Note: adapted to Ark UI v5 collection-based API (SelectRoot `collection` + SelectItem `item`). -->
+<script lang="ts">
+  import {
+    SelectRoot,
+    SelectHiddenSelect,
+    createListCollection,
+    type SelectRootProps,
+    type ListCollection,
+  } from '@ark-ui/svelte/select';
+  import type { SelectItemData } from '@cloudvoyant/helical-ui';
+  import SelectNative from './SelectNative.svelte';
+
+  type Props = Omit<SelectRootProps<SelectItemData>, 'collection'> & {
+    items?: SelectItemData[];
+    collection?: ListCollection<SelectItemData>;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+  };
+
+  let {
+    items,
+    collection,
+    size = 'md',
+    class: className = '',
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    invalid,
+    disabled,
+    name,
+    form,
+    required,
+    ...rest
+  }: Props = $props();
+
+  const resolvedCollection = $derived(collection ?? createListCollection({ items: items ?? [] }));
+
+  let isCoarse = $state(false);
+
+  $effect(() => {
+    const mql = window.matchMedia('(pointer: coarse)');
+    isCoarse = mql.matches;
+    const onChange = () => (isCoarse = mql.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  });
+</script>
+
+{#if isCoarse && items}
+  <SelectNative
+    {items}
+    {size}
+    value={value?.[0]}
+    defaultValue={defaultValue?.[0]}
+    onValueChange={(v) => onValueChange?.({ value: [v], items: [] })}
+    {invalid}
+    {disabled}
+    {name}
+    {form}
+    {required}
+  />
+{:else}
+  <SelectRoot collection={resolvedCollection} {value} {defaultValue} {onValueChange} {invalid} {disabled} {name} {form} {required} class={className} {...rest}>
+    {@render children?.()}
+    <SelectHiddenSelect />
+  </SelectRoot>
+{/if}

package/dist/select/Select.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type SelectRootProps, type ListCollection } from '@ark-ui/svelte/select';
+import type { SelectItemData } from '@cloudvoyant/helical-ui';
+type Props = Omit<SelectRootProps<SelectItemData>, 'collection'> & {
+    items?: SelectItemData[];
+    collection?: ListCollection<SelectItemData>;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/select/SelectClearTrigger.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/select/SelectClearTrigger.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SelectClearTrigger, type SelectClearTriggerProps } from '@ark-ui/svelte/select';
+  import { selectClearTriggerBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: SelectClearTriggerProps = $props();
+
+  const classes = $derived(cn(selectClearTriggerBase, className));
+</script>
+
+<SelectClearTrigger aria-label="Clear selection" class={classes} {...rest}>
+  {@render children?.()}
+</SelectClearTrigger>

package/dist/select/SelectClearTrigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SelectClearTrigger, type SelectClearTriggerProps } from '@ark-ui/svelte/select';
+declare const SelectClearTrigger: import("svelte").Component<SelectClearTriggerProps, {}, "">;
+type SelectClearTrigger = ReturnType<typeof SelectClearTrigger>;
+export default SelectClearTrigger;

package/dist/select/SelectContent.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/select/SelectContent.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Portal } from '@ark-ui/svelte/portal';
+  import { SelectPositioner, SelectContent, type SelectContentProps } from '@ark-ui/svelte/select';
+  import { selectContentBase, selectPositionerBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: SelectContentProps = $props();
+
+  const classes = $derived(cn(selectContentBase, className));
+</script>
+
+<Portal>
+  <SelectPositioner class={selectPositionerBase}>
+    <SelectContent class={classes} {...rest}>
+      {@render children?.()}
+    </SelectContent>
+  </SelectPositioner>
+</Portal>

package/dist/select/SelectContent.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SelectContent, type SelectContentProps } from '@ark-ui/svelte/select';
+declare const SelectContent: import("svelte").Component<SelectContentProps, {}, "">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

package/dist/select/SelectContext.svelte.d.ts

@@ -0,0 +1 @@
+export { useSelectContext as useSelect } from '@ark-ui/svelte/select';

package/dist/select/SelectContext.svelte.js

@@ -0,0 +1,3 @@
+// libs/helical-svelte/src/select/SelectContext.svelte.ts
+// Closely based on: @ark-ui/svelte/select useSelectContext, mirrored from @cloudvoyant/helical-react useSelect
+export { useSelectContext as useSelect } from '@ark-ui/svelte/select';

package/dist/select/SelectIndicator.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/select/SelectIndicator.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SelectIndicator, type SelectIndicatorProps } from '@ark-ui/svelte/select';
+  import { selectIndicatorBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: SelectIndicatorProps = $props();
+
+  const classes = $derived(cn(selectIndicatorBase, className));
+</script>
+
+<SelectIndicator class={classes} {...rest}>
+  {@render children?.()}
+</SelectIndicator>

package/dist/select/SelectIndicator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SelectIndicator, type SelectIndicatorProps } from '@ark-ui/svelte/select';
+declare const SelectIndicator: import("svelte").Component<SelectIndicatorProps, {}, "">;
+type SelectIndicator = ReturnType<typeof SelectIndicator>;
+export default SelectIndicator;

package/dist/select/SelectItem.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/select/SelectItem.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<!-- Note: adapted to Ark UI v5 — SelectItem takes `item` (the collection item). -->
+<script lang="ts">
+  import { SelectItem, type SelectItemProps } from '@ark-ui/svelte/select';
+  import { selectItemBase, cn } from '@cloudvoyant/helical-ui';
+  import type { SelectItemData } from '@cloudvoyant/helical-ui';
+
+  type Props = Omit<SelectItemProps, 'item'> & {
+    item: SelectItemData;
+    class?: string;
+  };
+
+  let { item, class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(selectItemBase, className));
+</script>
+
+<SelectItem {item} class={classes} {...rest}>
+  {@render children?.()}
+</SelectItem>

package/dist/select/SelectItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import { SelectItem, type SelectItemProps } from '@ark-ui/svelte/select';
+import type { SelectItemData } from '@cloudvoyant/helical-ui';
+type Props = Omit<SelectItemProps, 'item'> & {
+    item: SelectItemData;
+    class?: string;
+};
+declare const SelectItem: import("svelte").Component<Props, {}, "">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

package/dist/select/SelectItemGroup.svelte

@@ -0,0 +1,11 @@
+<!-- libs/helical-svelte/src/select/SelectItemGroup.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SelectItemGroup, type SelectItemGroupProps } from '@ark-ui/svelte/select';
+
+  let { class: className = '', children, ...rest }: SelectItemGroupProps = $props();
+</script>
+
+<SelectItemGroup class={className} {...rest}>
+  {@render children?.()}
+</SelectItemGroup>

package/dist/select/SelectItemGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SelectItemGroup, type SelectItemGroupProps } from '@ark-ui/svelte/select';
+declare const SelectItemGroup: import("svelte").Component<SelectItemGroupProps, {}, "">;
+type SelectItemGroup = ReturnType<typeof SelectItemGroup>;
+export default SelectItemGroup;

package/dist/select/SelectItemGroupLabel.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/select/SelectItemGroupLabel.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SelectItemGroupLabel, type SelectItemGroupLabelProps } from '@ark-ui/svelte/select';
+  import { selectItemGroupLabelBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: SelectItemGroupLabelProps = $props();
+
+  const classes = $derived(cn(selectItemGroupLabelBase, className));
+</script>
+
+<SelectItemGroupLabel class={classes} {...rest}>
+  {@render children?.()}
+</SelectItemGroupLabel>

package/dist/select/SelectItemGroupLabel.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SelectItemGroupLabel, type SelectItemGroupLabelProps } from '@ark-ui/svelte/select';
+declare const SelectItemGroupLabel: import("svelte").Component<SelectItemGroupLabelProps, {}, "">;
+type SelectItemGroupLabel = ReturnType<typeof SelectItemGroupLabel>;
+export default SelectItemGroupLabel;

package/dist/select/SelectItemIndicator.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/select/SelectItemIndicator.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SelectItemIndicator, type SelectItemIndicatorProps } from '@ark-ui/svelte/select';
+  import { selectItemIndicatorBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: SelectItemIndicatorProps = $props();
+
+  const classes = $derived(cn(selectItemIndicatorBase, className));
+</script>
+
+<SelectItemIndicator class={classes} {...rest}>
+  {@render children?.()}
+</SelectItemIndicator>

package/dist/select/SelectItemIndicator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SelectItemIndicator, type SelectItemIndicatorProps } from '@ark-ui/svelte/select';
+declare const SelectItemIndicator: import("svelte").Component<SelectItemIndicatorProps, {}, "">;
+type SelectItemIndicator = ReturnType<typeof SelectItemIndicator>;
+export default SelectItemIndicator;

package/dist/select/SelectItemText.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/select/SelectItemText.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SelectItemText, type SelectItemTextProps } from '@ark-ui/svelte/select';
+  import { selectItemTextBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: SelectItemTextProps = $props();
+
+  const classes = $derived(cn(selectItemTextBase, className));
+</script>
+
+<SelectItemText class={classes} {...rest}>
+  {@render children?.()}
+</SelectItemText>

package/dist/select/SelectItemText.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SelectItemText, type SelectItemTextProps } from '@ark-ui/svelte/select';
+declare const SelectItemText: import("svelte").Component<SelectItemTextProps, {}, "">;
+type SelectItemText = ReturnType<typeof SelectItemText>;
+export default SelectItemText;

package/dist/select/SelectNative.svelte

@@ -0,0 +1,73 @@
+<!-- libs/helical-svelte/src/select/SelectNative.svelte -->
+<!-- Closely based on: Shark UI native-select (@ark-ui/svelte/factory), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { nativeSelectVariants, nativeSelectWrapperBase, nativeSelectIconBase, cn } from '@cloudvoyant/helical-ui';
+  import type { SelectItemData } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLSelectAttributes } from 'svelte/elements';
+
+  type Props = Omit<HTMLSelectAttributes, 'value' | 'children' | 'size'> & {
+    items: SelectItemData[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+    icon?: Snippet;
+    class?: string;
+  };
+
+  let {
+    items = [],
+    value,
+    defaultValue,
+    onValueChange,
+    size = 'md',
+    invalid,
+    icon,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  const classes = $derived(nativeSelectVariants({ size }));
+  const wrapperClasses = $derived(cn(nativeSelectWrapperBase, className));
+
+  let current = $state(value ?? defaultValue ?? '');
+
+  $effect(() => {
+    if (value !== undefined) current = value;
+  });
+
+  function handleChange(event: Event) {
+    const next = (event.currentTarget as HTMLSelectElement).value;
+    current = next;
+    onValueChange?.(next);
+  }
+</script>
+
+<Ark as="div" class={wrapperClasses}>
+  <Ark
+    as="select"
+    class={classes}
+    value={current}
+    aria-invalid={invalid}
+    onchange={handleChange}
+    {...rest}
+  >
+    {#each items as item (item.value)}
+      <option value={item.value} disabled={item.disabled}>
+        {item.label}
+      </option>
+    {/each}
+  </Ark>
+  <Ark as="span" class={nativeSelectIconBase} aria-hidden>
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    {/if}
+  </Ark>
+</Ark>

package/dist/select/SelectNative.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { SelectItemData } from '@cloudvoyant/helical-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+type Props = Omit<HTMLSelectAttributes, 'value' | 'children' | 'size'> & {
+    items: SelectItemData[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+    icon?: Snippet;
+    class?: string;
+};
+declare const SelectNative: import("svelte").Component<Props, {}, "">;
+type SelectNative = ReturnType<typeof SelectNative>;
+export default SelectNative;

package/dist/select/SelectTrigger.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/select/SelectTrigger.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SelectTrigger, type SelectTriggerProps } from '@ark-ui/svelte/select';
+  import { inputVariants, selectTriggerBase, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = SelectTriggerProps & {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+  };
+
+  let { size = 'md', class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(inputVariants({ size }), selectTriggerBase, className));
+</script>
+
+<SelectTrigger class={classes} {...rest}>
+  {@render children?.()}
+</SelectTrigger>

package/dist/select/SelectTrigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import { SelectTrigger, type SelectTriggerProps } from '@ark-ui/svelte/select';
+type Props = SelectTriggerProps & {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const SelectTrigger: import("svelte").Component<Props, {}, "">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;