@svgrid/grid 1.2.23 → 1.2.25

package/src/createTabs.svelte.ts

@@ -0,0 +1,129 @@
+/**
+ * createTabs - the HEADLESS core behind <SvTabs>, in the same spirit as
+ * `createSvGrid` for the grid: a runes-based state machine (roving arrow-key
+ * focus, automatic/manual activation, full WAI-ARIA wiring) exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles, no DOM
+ * assumptions - render it however you like.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createTabs } from '@svgrid/grid'
+ *   let value = $state('a')
+ *   const t = createTabs({ tabs: () => tabs, value: () => value, onChange: (id) => (value = id) })
+ * </script>
+ * <div {...t.tablistProps()}>
+ *   {#each tabs as tab}
+ *     <button {...t.tabProps(tab.id)}>{tab.label}</button>
+ *   {/each}
+ * </div>
+ * <div {...t.panelProps(t.activeId)}>...</div>
+ * ```
+ *
+ * The styled <SvTabs> is just one renderer over this core. DOM focus movement is
+ * a render concern, so the component watches `focusTick`/`focusId` and calls
+ * `.focus()` itself; the core only decides *which* tab should take focus.
+ */
+export type TabItem = { id: string; label: string; disabled?: boolean }
+
+export type TabsOrientation = 'horizontal' | 'vertical'
+export type TabsActivation = 'automatic' | 'manual'
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type TabsConfig = {
+  tabs: () => ReadonlyArray<TabItem>
+  value: () => string | undefined
+  onChange?: (id: string) => void
+  orientation?: () => TabsOrientation
+  activation?: () => TabsActivation
+  ariaLabel?: () => string | undefined
+}
+
+let uid = 0
+
+export function createTabs(config: TabsConfig) {
+  const id = `sv-tabs-${uid++}`
+  const tabs = () => config.tabs()
+  const orientation = () => config.orientation?.() ?? 'horizontal'
+  const activation = () => config.activation?.() ?? 'automatic'
+
+  const enabled = $derived(tabs().filter((t) => !t.disabled))
+  const active = $derived(config.value() ?? tabs().find((t) => !t.disabled)?.id ?? tabs()[0]?.id ?? '')
+
+  // Roving focus target. `focusTick` bumps on every keyboard move so the styled
+  // renderer can move real DOM focus without stealing it on mount.
+  let focusId = $state('')
+  let focusTick = $state(0)
+  const requestFocus = (tid: string) => { focusId = tid; focusTick++ }
+
+  const tabId = (tid: string) => `${id}-tab-${tid}`
+  const panelId = (tid: string) => `${id}-panel-${tid}`
+
+  function select(tid: string) {
+    const t = tabs().find((x) => x.id === tid)
+    if (!t || t.disabled) return
+    config.onChange?.(tid)
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    const list = enabled
+    if (!list.length) return
+    const idx = list.findIndex((t) => t.id === active)
+    const fwd = orientation() === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+    const back = orientation() === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+    let next: string | null = null
+    if (e.key === fwd) next = list[(idx + 1) % list.length]?.id ?? null
+    else if (e.key === back) next = list[(idx - 1 + list.length) % list.length]?.id ?? null
+    else if (e.key === 'Home') next = list[0]?.id ?? null
+    else if (e.key === 'End') next = list.at(-1)?.id ?? null
+    else if ((e.key === 'Enter' || e.key === ' ') && activation() === 'manual') { e.preventDefault(); select(active); return }
+    else return
+    if (next) {
+      e.preventDefault()
+      requestFocus(next)
+      if (activation() === 'automatic') select(next)
+    }
+  }
+
+  return {
+    /** Currently selected tab id (falls back to the first enabled tab). */
+    get activeId() { return active },
+    /** Tab id that should hold DOM focus after the latest keyboard move. */
+    get focusId() { return focusId },
+    /** Monotonic counter; changes only on keyboard navigation. */
+    get focusTick() { return focusTick },
+    isActive: (tid: string) => tid === active,
+    select,
+    onKeydown,
+    /** Spread onto the tablist container element. */
+    tablistProps: () => ({
+      role: 'tablist' as const,
+      'aria-orientation': orientation(),
+      'aria-label': config.ariaLabel?.(),
+    }),
+    /** Spread onto the tab button for `tid`. */
+    tabProps: (tid: string) => {
+      const t = tabs().find((x) => x.id === tid)
+      const isActive = tid === active
+      return {
+        role: 'tab' as const,
+        id: tabId(tid),
+        'data-tab': tid,
+        'aria-selected': isActive,
+        'aria-controls': panelId(tid),
+        tabindex: isActive ? 0 : -1,
+        disabled: t?.disabled,
+        onclick: () => select(tid),
+        onkeydown: onKeydown,
+      }
+    },
+    /** Spread onto the tabpanel element for `tid` (usually the active id). */
+    panelProps: (tid: string) => ({
+      role: 'tabpanel' as const,
+      id: panelId(tid),
+      'aria-labelledby': tabId(tid),
+      tabindex: 0,
+    }),
+  }
+}
+
+export type Tabs = ReturnType<typeof createTabs>

package/src/createTagsInput.svelte.ts

@@ -0,0 +1,98 @@
+/**
+ * createTagsInput - the HEADLESS core behind <SvTagsInput>: an editable
+ * token/chips field (type + Enter/comma to add, Backspace to remove the last,
+ * per-chip remove). Owns the draft text + add/remove behavior + keyboard,
+ * exposed as **prop-getters** you spread onto YOUR OWN markup. No styles/DOM.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createTagsInput } from '@svgrid/grid'
+ *   let tags = $state<string[]>([])
+ *   const ti = createTagsInput({ value: () => tags, onChange: (t) => (tags = t) })
+ * </script>
+ * <div {...ti.rootProps()}>
+ *   {#each ti.tags as tag, i (tag + i)}
+ *     <span {...ti.tagProps(i)}>{tag}<button {...ti.removeProps(i)}>x</button></span>
+ *   {/each}
+ *   <input {...ti.inputProps()} />
+ * </div>
+ * ```
+ */
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type TagsInputConfig = {
+  value: () => string[]
+  onChange?: (tags: string[]) => void
+  disabled?: () => boolean
+  /** Reject duplicate tags. Default true. */
+  unique?: () => boolean
+  max?: () => number
+  ariaLabel?: () => string | undefined
+}
+
+export function createTagsInput(config: TagsInputConfig) {
+  const disabled = () => config.disabled?.() ?? false
+  const unique = () => config.unique?.() ?? true
+  const max = () => config.max?.() ?? Infinity
+  const tags = () => config.value()
+
+  let draft = $state('')
+
+  function add(raw: string) {
+    const tag = raw.trim()
+    if (!tag || disabled()) return
+    if (tags().length >= max()) return
+    if (unique() && tags().includes(tag)) { draft = ''; return }
+    config.onChange?.([...tags(), tag])
+    draft = ''
+  }
+  function removeAt(i: number) {
+    if (disabled()) return
+    config.onChange?.(tags().filter((_, idx) => idx !== i))
+  }
+  function setDraft(v: string) { draft = v }
+  function onInput(e: Event) { draft = (e.currentTarget as HTMLInputElement).value }
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled()) return
+    if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); add(draft) }
+    else if (e.key === 'Backspace' && draft === '' && tags().length) { removeAt(tags().length - 1) }
+  }
+  function onBlur() { add(draft) }
+
+  return {
+    /** Current tags (controlled value). */
+    get tags() { return tags() },
+    /** Current draft text in the input. */
+    get draft() { return draft },
+    add,
+    removeAt,
+    setDraft,
+    /** Spread onto the container element. */
+    rootProps: () => ({
+      role: 'group' as const,
+      'aria-label': config.ariaLabel?.(),
+    }),
+    /** Spread onto the text <input>. */
+    inputProps: () => ({
+      type: 'text' as const,
+      value: draft,
+      disabled: disabled(),
+      'aria-label': config.ariaLabel?.() ?? 'Add tag',
+      oninput: onInput,
+      onkeydown: onKeydown,
+      onblur: onBlur,
+    }),
+    /** Spread onto the chip wrapper at `index`. */
+    tagProps: (index: number) => ({
+      'data-idx': index,
+    }),
+    /** Spread onto a chip's remove <button> at `index`. */
+    removeProps: (index: number) => ({
+      type: 'button' as const,
+      'aria-label': `Remove ${tags()[index] ?? ''}`,
+      onclick: () => removeAt(index),
+    }),
+  }
+}
+
+export type TagsInput = ReturnType<typeof createTagsInput>

package/src/createTimePicker.svelte.ts

@@ -0,0 +1,289 @@
+/**
+ * createTimePicker - the HEADLESS core behind <SvTimePicker>: a runes-based
+ * state machine for an analog clock-dial time picker (12/24-hour, minute
+ * snapping, hour->minute auto-switch, keyboard) plus the pure dial geometry
+ * (tick coordinates + hand endpoint) and **prop-getters** you spread onto YOUR
+ * OWN markup. The DOM-bound pieces - pointer capture + `getBoundingClientRect`
+ * hit-testing - stay in the styled component; this core exposes `SIZE`/`C` and a
+ * pure `pointerSelect(angle, dist)` so the component only has to convert an event
+ * into an angle.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createTimePicker } from '@svgrid/grid'
+ *   let value = $state<Date | null>(new Date())
+ *   const tp = createTimePicker({ value: () => value, onChange: (d) => (value = d) })
+ * </script>
+ * <button {...tp.segProps('hour')}>{tp.displayHour}</button>:<button {...tp.segProps('minute')}>{tp.mm}</button>
+ * ```
+ */
+export type TimeValue = Date | string | number | null
+
+export type TimeSelection = 'hour' | 'minute'
+export type TimeFormat = '12-hour' | '24-hour'
+
+/** A clock-face number and its computed position on the dial. */
+export type DialTick = { label: string; x: number; y: number; value: number; ring: 'outer' | 'inner' }
+
+/** Reactive inputs are getters; callbacks are closures. */
+export type TimePickerConfig = {
+  /** Date, "HH:MM[:SS]" string, or epoch ms. */
+  value: () => TimeValue
+  /** Fires with a Date (today's date carrying the picked time). */
+  onChange?: (value: Date) => void
+  format?: () => TimeFormat
+  minuteInterval?: () => number
+  /** After picking an hour, jump the dial to minutes. Default true. */
+  autoSwitchToMinutes?: () => boolean
+  disabled?: () => boolean
+  readonly?: () => boolean
+  /** Which dial opens first. */
+  selection?: () => TimeSelection
+}
+
+// --- Dial geometry (pure) -----------------------------------------------------
+const SIZE = 240
+const C = SIZE / 2
+const OUTER = C - 22
+const INNER = C - 58
+
+function pointAt(angleDeg: number, r: number) {
+  const rad = ((angleDeg - 90) * Math.PI) / 180
+  return { x: C + r * Math.cos(rad), y: C + r * Math.sin(rad) }
+}
+
+/** Parse a time value to { h, m }, falling back to "now" (pure). */
+export function parseTimeValue(v: TimeValue): { h: number; m: number } {
+  if (v == null) { const n = new Date(); return { h: n.getHours(), m: n.getMinutes() } }
+  if (typeof v === 'string') {
+    const mt = v.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?/)
+    if (mt) return { h: Math.min(23, +mt[1]!), m: Math.min(59, +mt[2]!) }
+    const d = new Date(v)
+    if (!isNaN(d.getTime())) return { h: d.getHours(), m: d.getMinutes() }
+    const n = new Date(); return { h: n.getHours(), m: n.getMinutes() }
+  }
+  const d = new Date(v)
+  return { h: d.getHours(), m: d.getMinutes() }
+}
+
+export function createTimePicker(config: TimePickerConfig) {
+  const format = () => config.format?.() ?? '24-hour'
+  const minuteInterval = () => config.minuteInterval?.() ?? 1
+  const autoSwitchToMinutes = () => config.autoSwitchToMinutes?.() ?? true
+  const isDisabled = () => config.disabled?.() ?? false
+  const isReadonly = () => config.readonly?.() ?? false
+
+  const is12 = $derived(format() === '12-hour')
+  const isInteractive = $derived(!isDisabled() && !isReadonly())
+
+  let hours = $state(0)
+  let minutes = $state(0)
+  let sel = $state<TimeSelection>('hour')
+  let seeded = false
+  let lastKey = '￿'
+  $effect(() => {
+    const { h, m } = parseTimeValue(config.value())
+    const key = `${h}:${m}`
+    if (key !== lastKey) {
+      lastKey = key
+      hours = h
+      minutes = m
+      if (!seeded) { seeded = true; sel = config.selection?.() ?? 'hour' }
+    }
+  })
+
+  const displayHour = $derived(is12 ? (hours % 12 === 0 ? 12 : hours % 12) : hours)
+  const isPm = $derived(hours >= 12)
+  const mm = $derived(String(minutes).padStart(2, '0'))
+
+  const hourTicks = $derived.by<DialTick[]>(() => {
+    const ticks: DialTick[] = []
+    if (is12) {
+      for (let i = 0; i < 12; i++) {
+        const h = i === 0 ? 12 : i
+        const p = pointAt(i * 30, OUTER)
+        ticks.push({ label: String(h), x: p.x, y: p.y, value: h, ring: 'outer' })
+      }
+    } else {
+      for (let i = 0; i < 12; i++) {
+        const outer = pointAt(i * 30, OUTER) // 12..23
+        const inner = pointAt(i * 30, INNER) // 00..11
+        const ho = i + 12
+        const hi = i
+        ticks.push({ label: String(ho).padStart(2, '0'), x: outer.x, y: outer.y, value: ho, ring: 'outer' })
+        ticks.push({ label: hi === 0 ? '00' : String(hi).padStart(2, '0'), x: inner.x, y: inner.y, value: hi, ring: 'inner' })
+      }
+    }
+    return ticks
+  })
+
+  const minuteTicks = $derived.by<DialTick[]>(() =>
+    Array.from({ length: 12 }, (_, i) => {
+      const v = i * 5
+      const p = pointAt(i * 30, OUTER)
+      return { label: String(v).padStart(2, '0'), x: p.x, y: p.y, value: v, ring: 'outer' as const }
+    }),
+  )
+
+  // Hand endpoint for the current selection.
+  const handAngle = $derived(
+    sel === 'hour' ? (is12 ? (displayHour % 12) * 30 : (hours % 12) * 30) : minutes * 6,
+  )
+  const handRadius = $derived(sel === 'hour' && !is12 && hours % 12 === hours && hours < 12 ? INNER : OUTER)
+  const handEnd = $derived(pointAt(handAngle, handRadius))
+
+  // --- Emit + mutators -------------------------------------------------------
+  function emit() {
+    const d = new Date()
+    d.setHours(hours, minutes, 0, 0)
+    config.onChange?.(d)
+  }
+
+  const snap = (m: number) => {
+    const step = Math.max(1, Math.floor(minuteInterval()))
+    return (Math.round(m / step) * step) % 60
+  }
+
+  function setSelection(s: TimeSelection) { sel = s }
+
+  function setMinute(m: number) {
+    minutes = snap(m)
+    lastKey = `${hours}:${minutes}`
+    emit()
+  }
+
+  function setAmPm(pm: boolean) {
+    if (pm === isPm) return
+    hours = pm ? (hours % 12) + 12 : hours % 12
+    lastKey = `${hours}:${minutes}`
+    emit()
+  }
+
+  /** Apply a dial angle (0..360, 12 o'clock = 0) + distance from center. The
+   *  styled component converts a pointer event into these via the DOM rect. */
+  function pointerSelect(angle: number, dist: number) {
+    if (!isInteractive) return
+    if (sel === 'hour') {
+      const idx = Math.round(angle / 30) % 12
+      if (is12) {
+        const h = idx === 0 ? 12 : idx
+        const base = h % 12
+        hours = isPm ? base + 12 : base
+      } else {
+        const inner = dist < (OUTER + INNER) / 2
+        hours = inner ? idx : idx + 12
+      }
+      lastKey = `${hours}:${minutes}`
+      emit()
+    } else {
+      const m = Math.round(angle / 6) % 60
+      setMinute(m)
+    }
+  }
+
+  /** Called on pointer-up: auto-advance hour -> minute when configured. */
+  function endPointer() {
+    if (sel === 'hour' && autoSwitchToMinutes()) sel = 'minute'
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (!isInteractive) return
+    const step = sel === 'minute' ? Math.max(1, Math.floor(minuteInterval())) : 1
+    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+      e.preventDefault()
+      if (sel === 'hour') { hours = (hours + 1) % 24 } else { minutes = (minutes + step) % 60 }
+      lastKey = `${hours}:${minutes}`; emit()
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+      e.preventDefault()
+      if (sel === 'hour') { hours = (hours + 23) % 24 } else { minutes = (minutes - step + 60) % 60 }
+      lastKey = `${hours}:${minutes}`; emit()
+    } else if (e.key === 'Tab' && !e.shiftKey && sel === 'hour') {
+      sel = 'minute'
+    }
+  }
+
+  function now() {
+    const n = new Date()
+    hours = n.getHours(); minutes = n.getMinutes()
+    lastKey = `${hours}:${minutes}`
+    emit()
+  }
+
+  function isActiveHour(t: DialTick): boolean {
+    if (is12) return t.value === displayHour
+    return t.value === hours
+  }
+
+  return {
+    // Dial geometry constants (the component needs these to map a pointer event
+    // to an angle without re-deriving the layout).
+    SIZE,
+    C,
+
+    // --- Reactive state -------------------------------------------------------
+    get hours() { return hours },
+    get minutes() { return minutes },
+    get selection() { return sel },
+    get is12() { return is12 },
+    get isInteractive() { return isInteractive },
+    get displayHour() { return displayHour },
+    get isPm() { return isPm },
+    get mm() { return mm },
+    get hourTicks() { return hourTicks },
+    get minuteTicks() { return minuteTicks },
+    get handEnd() { return handEnd },
+
+    // --- Derived helpers ------------------------------------------------------
+    isActiveHour,
+
+    // --- Actions --------------------------------------------------------------
+    setSelection,
+    setMinute,
+    setAmPm,
+    pointerSelect,
+    endPointer,
+    onKeydown,
+    now,
+
+    // --- Prop-getters ---------------------------------------------------------
+    /** The hour / minute segment button in the header. */
+    segProps(which: TimeSelection) {
+      return {
+        type: 'button' as const,
+        disabled: isDisabled(),
+        onclick: () => setSelection(which),
+      }
+    },
+    /** An AM / PM toggle button (12-hour mode). */
+    ampmProps(pm: boolean) {
+      return {
+        type: 'button' as const,
+        disabled: isDisabled(),
+        onclick: () => setAmPm(pm),
+      }
+    },
+    /** The clock dial: ARIA slider semantics + keyboard. Pointer capture stays in
+     *  the component (it needs the DOM element). */
+    dialProps() {
+      return {
+        role: 'slider' as const,
+        tabindex: isDisabled() ? -1 : 0,
+        'aria-label': sel === 'hour' ? 'Hour' : 'Minute',
+        'aria-valuenow': sel === 'hour' ? hours : minutes,
+        'aria-valuemin': 0,
+        'aria-valuemax': sel === 'hour' ? 23 : 59,
+        onkeydown: onKeydown,
+      }
+    },
+    /** The Now footer button. */
+    nowProps() {
+      return {
+        type: 'button' as const,
+        disabled: isDisabled(),
+        onclick: now,
+      }
+    },
+  }
+}
+
+export type TimePicker = ReturnType<typeof createTimePicker>

package/src/createToggle.svelte.ts

@@ -0,0 +1,69 @@
+/**
+ * createToggle - the HEADLESS core behind <SvToggleButton>, in the same spirit
+ * as `createSvGrid`: a tiny controlled state machine (a single pressed on/off
+ * bit + ARIA) exposed as **prop-getters** you spread onto YOUR OWN markup. No
+ * styles, no DOM assumptions.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createToggle } from '@svgrid/grid'
+ *   let pressed = $state(false)
+ *   const t = createToggle({ pressed: () => pressed, onChange: (v) => (pressed = v) })
+ * </script>
+ * <button {...t.buttonProps()}>Bold</button>
+ * ```
+ *
+ * The styled <SvToggleButton> is just one renderer over this core.
+ */
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes
+ *  (the same controlled pattern used across the SvGrid UI kit). */
+export type ToggleConfig = {
+  pressed: () => boolean
+  onChange?: (pressed: boolean) => void
+  disabled?: () => boolean
+  ariaLabel?: () => string | undefined
+}
+
+export type ToggleButtonProps = {
+  type: 'button'
+  'aria-pressed': boolean
+  'aria-label': string | undefined
+  disabled: boolean
+  'data-pressed': '' | undefined
+  onclick: () => void
+}
+
+export type Toggle = {
+  /** Current pressed state. */
+  readonly pressed: boolean
+  readonly disabled: boolean
+  /** Flip pressed (no-op when disabled). */
+  toggle: () => void
+  /** Spread onto the button element. */
+  buttonProps: () => ToggleButtonProps
+}
+
+export function createToggle(config: ToggleConfig): Toggle {
+  const pressed = () => config.pressed()
+  const disabled = () => config.disabled?.() ?? false
+
+  function toggle() {
+    if (disabled()) return
+    config.onChange?.(!pressed())
+  }
+
+  return {
+    get pressed() { return pressed() },
+    get disabled() { return disabled() },
+    toggle,
+    buttonProps: () => ({
+      type: 'button',
+      'aria-pressed': pressed(),
+      'aria-label': config.ariaLabel?.(),
+      disabled: disabled(),
+      'data-pressed': pressed() ? '' : undefined,
+      onclick: toggle,
+    }),
+  }
+}