@warkypublic/svelix 0.1.0

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlCalendar.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+  import { WEEKDAY_LABELS, type CalendarCell } from './DateTimeCtrl.utils';
+
+  interface Props {
+    cells: CalendarCell[];
+    isDateSelectable?: (isoDate: string) => boolean;
+    monthLabel: string;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onSelect?: (isoDate: string) => void;
+    selectedIso?: string;
+  }
+
+  let {
+    cells,
+    isDateSelectable,
+    monthLabel,
+    onNext,
+    onPrev,
+    onSelect,
+    selectedIso,
+  }: Props = $props();
+
+  function isCellDisabled(cell: CalendarCell): boolean {
+    if (!cell.inCurrentMonth) {
+      return true;
+    }
+
+    if (!isDateSelectable) {
+      return false;
+    }
+
+    return !isDateSelectable(cell.isoDate);
+  }
+
+  function focusFirstAvailable(): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const first = cells.find((cell) => !isCellDisabled(cell));
+    if (!first) {
+      return;
+    }
+
+    const target = document.querySelector<HTMLButtonElement>(`button[data-iso="${first.isoDate}"]`);
+    target?.focus();
+  }
+
+  function focusFromIndex(startIndex: number, step: number): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    let index = startIndex + step;
+    while (index >= 0 && index < cells.length) {
+      const nextCell = cells[index];
+      if (!isCellDisabled(nextCell)) {
+        const target = document.querySelector<HTMLButtonElement>(
+          `button[data-iso="${nextCell.isoDate}"]`,
+        );
+        target?.focus();
+        return;
+      }
+      index += step;
+    }
+  }
+
+  function handleDayKeydown(event: KeyboardEvent, index: number, cell: CalendarCell): void {
+    if (isCellDisabled(cell)) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onSelect?.(cell.isoDate);
+      return;
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      focusFromIndex(index, 1);
+      return;
+    }
+
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      focusFromIndex(index, -1);
+      return;
+    }
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      focusFromIndex(index, 7);
+      return;
+    }
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      focusFromIndex(index, -7);
+      return;
+    }
+
+    if (event.key === 'Home') {
+      event.preventDefault();
+      focusFirstAvailable();
+      return;
+    }
+
+    if (event.altKey && event.key === 'PageUp') {
+      event.preventDefault();
+      for (let i = 0; i < 12; i += 1) {
+        onPrev?.();
+      }
+      return;
+    }
+
+    if (event.altKey && event.key === 'PageDown') {
+      event.preventDefault();
+      for (let i = 0; i < 12; i += 1) {
+        onNext?.();
+      }
+      return;
+    }
+
+    if (event.key === 'PageUp') {
+      event.preventDefault();
+      onPrev?.();
+      return;
+    }
+
+    if (event.key === 'PageDown') {
+      event.preventDefault();
+      onNext?.();
+    }
+  }
+</script>
+
+<div class="w-full min-w-[16.5rem] max-w-[22rem] rounded border border-surface-300-700 bg-surface-100-900 p-2">
+  <div class="mb-2 flex items-center justify-between">
+    <button
+      type="button"
+      class="btn btn-sm preset-tonal-surface-500"
+      aria-label="Previous month"
+      onclick={() => onPrev?.()}
+    >
+      ◀
+    </button>
+    <p class="text-sm font-semibold" aria-live="polite" aria-atomic="true">{monthLabel}</p>
+    <button
+      type="button"
+      class="btn btn-sm preset-tonal-surface-500"
+      aria-label="Next month"
+      onclick={() => onNext?.()}
+    >
+      ▶
+    </button>
+  </div>
+
+  <div class="mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium text-surface-500-400-token">
+    {#each WEEKDAY_LABELS as weekday}
+      <div>{weekday}</div>
+    {/each}
+  </div>
+
+  <div class="grid min-h-[15.5rem] grid-cols-7 gap-1" role="grid" aria-label={`Calendar month ${monthLabel}`}>
+    {#each cells as cell, i (cell.isoDate)}
+      {@const disabled = isCellDisabled(cell)}
+      {@const selected = selectedIso === cell.isoDate}
+      <button
+        type="button"
+        data-iso={cell.isoDate}
+        data-calendar-day="true"
+        role="gridcell"
+        class="h-8 rounded px-1 py-1 text-sm transition-colors sm:h-9"
+        class:text-surface-500-400-token={!cell.inCurrentMonth}
+        class:opacity-40={disabled}
+        class:hover:bg-surface-200-800={!disabled && !selected}
+        class:ring-1={cell.isToday && !selected}
+        class:ring-primary-500={cell.isToday && !selected}
+        class:bg-primary-500={selected}
+        class:text-white={selected}
+        aria-selected={selected}
+        disabled={disabled}
+        aria-label={`Select ${cell.isoDate}`}
+        onclick={() => onSelect?.(cell.isoDate)}
+        onkeydown={(event) => handleDayKeydown(event, i, cell)}
+      >
+        {cell.day}
+      </button>
+    {/each}
+  </div>
+</div>

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlCalendar.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type CalendarCell } from './DateTimeCtrl.utils';
+interface Props {
+    cells: CalendarCell[];
+    isDateSelectable?: (isoDate: string) => boolean;
+    monthLabel: string;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onSelect?: (isoDate: string) => void;
+    selectedIso?: string;
+}
+declare const DateTimeCtrlCalendar: import("svelte").Component<Props, {}, "">;
+type DateTimeCtrlCalendar = ReturnType<typeof DateTimeCtrlCalendar>;
+export default DateTimeCtrlCalendar;

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlPickerPanel.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import DateTimeCtrlCalendar from './DateTimeCtrlCalendar.svelte';
+  import DateTimeCtrlTimeFields from './DateTimeCtrlTimeFields.svelte';
+  import type { CalendarCell } from './DateTimeCtrl.utils';
+
+  interface Props {
+    amLabel?: string;
+    calendarCells?: CalendarCell[];
+    calendarMonthLabel?: string;
+    hour?: number;
+    hoursStep?: number;
+    isDateSelectable?: (isoDate: string) => boolean;
+    maxDate?: string;
+    maxTime?: string;
+    minDate?: string;
+    minTime?: string;
+    minute?: number;
+    minutesStep?: number;
+    onNow?: () => void;
+    onClose?: () => void;
+    onSelectCalendarDate?: (isoDate: string) => void;
+    onShiftMonth?: (delta: number) => void;
+    onTimeChange?: (value: { hour: number; minute: number; second: number }) => void;
+    pmLabel?: string;
+    presets?: Array<string | { label: string; value: string }>;
+    second?: number;
+    secondsStep?: number;
+    selectedDateIso?: string;
+    showDatePicker?: boolean;
+    showTimePicker?: boolean;
+    use12Hour?: boolean;
+    withTimeDropdown?: boolean;
+  }
+
+  let {
+    amLabel = 'AM',
+    calendarCells = [],
+    calendarMonthLabel = '',
+    hour = 0,
+    hoursStep = 1,
+    isDateSelectable,
+    maxDate,
+    maxTime,
+    minDate,
+    minTime,
+    minute = 0,
+    minutesStep = 1,
+    onNow,
+    onClose,
+    onSelectCalendarDate,
+    onShiftMonth,
+    onTimeChange,
+    pmLabel = 'PM',
+    presets = [],
+    second = 0,
+    secondsStep = 1,
+    selectedDateIso,
+    showDatePicker = false,
+    showTimePicker = false,
+    use12Hour = false,
+    withTimeDropdown = false,
+  }: Props = $props();
+</script>
+
+<div class="flex flex-col gap-3">
+  {#if showDatePicker}
+    <DateTimeCtrlCalendar
+      cells={calendarCells}
+      monthLabel={calendarMonthLabel}
+      {isDateSelectable}
+      selectedIso={selectedDateIso}
+      onPrev={() => onShiftMonth?.(-1)}
+      onNext={() => onShiftMonth?.(1)}
+      onSelect={onSelectCalendarDate}
+    />
+
+    {#if minDate || maxDate}
+      <p class="text-xs text-surface-500-400-token">
+        Allowed date: <code>{minDate ?? 'any'}</code> to <code>{maxDate ?? 'any'}</code>
+      </p>
+    {/if}
+  {/if}
+
+  {#if showTimePicker}
+    <DateTimeCtrlTimeFields
+      {hour}
+      {minute}
+      {second}
+      {minTime}
+      {maxTime}
+      {use12Hour}
+      withDropdown={withTimeDropdown}
+      {hoursStep}
+      {minutesStep}
+      {secondsStep}
+      {amLabel}
+      {pmLabel}
+      {presets}
+      onChange={onTimeChange}
+    />
+  {/if}
+
+  <div class="flex items-center justify-between gap-2">
+    <button
+      type="button"
+      class="btn btn-sm preset-filled-primary-500"
+      onclick={() => onNow?.()}
+    >
+      Now
+    </button>
+    <button
+      type="button"
+      class="btn btn-sm preset-tonal-surface-500"
+      onclick={() => onClose?.()}
+    >
+      Close
+    </button>
+  </div>
+</div>

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlPickerPanel.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { CalendarCell } from './DateTimeCtrl.utils';
+interface Props {
+    amLabel?: string;
+    calendarCells?: CalendarCell[];
+    calendarMonthLabel?: string;
+    hour?: number;
+    hoursStep?: number;
+    isDateSelectable?: (isoDate: string) => boolean;
+    maxDate?: string;
+    maxTime?: string;
+    minDate?: string;
+    minTime?: string;
+    minute?: number;
+    minutesStep?: number;
+    onNow?: () => void;
+    onClose?: () => void;
+    onSelectCalendarDate?: (isoDate: string) => void;
+    onShiftMonth?: (delta: number) => void;
+    onTimeChange?: (value: {
+        hour: number;
+        minute: number;
+        second: number;
+    }) => void;
+    pmLabel?: string;
+    presets?: Array<string | {
+        label: string;
+        value: string;
+    }>;
+    second?: number;
+    secondsStep?: number;
+    selectedDateIso?: string;
+    showDatePicker?: boolean;
+    showTimePicker?: boolean;
+    use12Hour?: boolean;
+    withTimeDropdown?: boolean;
+}
+declare const DateTimeCtrlPickerPanel: import("svelte").Component<Props, {}, "">;
+type DateTimeCtrlPickerPanel = ReturnType<typeof DateTimeCtrlPickerPanel>;
+export default DateTimeCtrlPickerPanel;

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrlTimeFields.svelte

@@ -0,0 +1,343 @@
+<script lang="ts">
+  interface TimePresetOption {
+    label: string;
+    value: string;
+  }
+
+  interface Props {
+    amLabel?: string;
+    hour?: number;
+    hoursStep?: number;
+    maxTime?: string;
+    minTime?: string;
+    minute?: number;
+    minutesStep?: number;
+    onChange?: (value: { hour: number; minute: number; second: number }) => void;
+    pmLabel?: string;
+    presets?: Array<string | TimePresetOption>;
+    second?: number;
+    secondsStep?: number;
+    use12Hour?: boolean;
+    withDropdown?: boolean;
+  }
+
+  let {
+    amLabel = 'AM',
+    hour = 0,
+    hoursStep = 1,
+    maxTime,
+    minTime,
+    minute = 0,
+    minutesStep = 1,
+    onChange,
+    pmLabel = 'PM',
+    presets = [],
+    second = 0,
+    secondsStep = 1,
+    use12Hour = false,
+    withDropdown = false,
+  }: Props = $props();
+
+  let h = $state('0');
+  let m = $state('0');
+  let s = $state('0');
+  let meridian = $state<'am' | 'pm'>('am');
+
+  const safeHoursStep = $derived(Math.max(1, Math.trunc(hoursStep || 1)));
+  const safeMinutesStep = $derived(Math.max(1, Math.trunc(minutesStep || 1)));
+  const safeSecondsStep = $derived(Math.max(1, Math.trunc(secondsStep || 1)));
+
+  const hourOptions = $derived.by(() => {
+    const options: number[] = [];
+    if (use12Hour) {
+      for (let i = 1; i <= 12; i += safeHoursStep) {
+        options.push(i);
+      }
+      if (!options.includes(12)) {
+        options.push(12);
+      }
+      return options;
+    }
+
+    for (let i = 0; i <= 23; i += safeHoursStep) {
+      options.push(i);
+    }
+    if (!options.includes(23)) {
+      options.push(23);
+    }
+
+    return options;
+  });
+
+  const minuteOptions = $derived.by(() => {
+    const options: number[] = [];
+    for (let i = 0; i <= 59; i += safeMinutesStep) {
+      options.push(i);
+    }
+    if (!options.includes(59)) {
+      options.push(59);
+    }
+    return options;
+  });
+
+  const secondOptions = $derived.by(() => {
+    const options: number[] = [];
+    for (let i = 0; i <= 59; i += safeSecondsStep) {
+      options.push(i);
+    }
+    if (!options.includes(59)) {
+      options.push(59);
+    }
+    return options;
+  });
+
+  const normalizedPresets = $derived.by(() => {
+    return presets
+      .map((preset) => {
+        if (typeof preset === 'string') {
+          return { label: preset, value: preset };
+        }
+
+        return preset;
+      })
+      .filter((preset) => preset.value && preset.value.trim() !== '');
+  });
+
+  function pad2(value: number): string {
+    return String(value).padStart(2, '0');
+  }
+
+  function clamp(value: number, min: number, max: number): number {
+    return Math.max(min, Math.min(max, value));
+  }
+
+  function to12Hour(inputHour: number): { displayHour: number; meridian: 'am' | 'pm' } {
+    const isPm = inputHour >= 12;
+    const displayHour = inputHour % 12 === 0 ? 12 : inputHour % 12;
+    return { displayHour, meridian: isPm ? 'pm' : 'am' };
+  }
+
+  function from12Hour(displayHour: number, nextMeridian: 'am' | 'pm'): number {
+    const normalized = clamp(displayHour, 1, 12) % 12;
+    if (nextMeridian === 'pm') {
+      return normalized + 12;
+    }
+    return normalized;
+  }
+
+  function parsePreset(value: string): { hour: number; minute: number; second: number } | null {
+    const matched = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(value.trim());
+    if (!matched) {
+      return null;
+    }
+
+    const parsedHour = Number(matched[1]);
+    const parsedMinute = Number(matched[2]);
+    const parsedSecond = Number(matched[3] ?? '0');
+
+    if (
+      !Number.isInteger(parsedHour) ||
+      !Number.isInteger(parsedMinute) ||
+      !Number.isInteger(parsedSecond) ||
+      parsedHour < 0 ||
+      parsedHour > 23 ||
+      parsedMinute < 0 ||
+      parsedMinute > 59 ||
+      parsedSecond < 0 ||
+      parsedSecond > 59
+    ) {
+      return null;
+    }
+
+    return {
+      hour: parsedHour,
+      minute: parsedMinute,
+      second: parsedSecond,
+    };
+  }
+
+  function emit(): void {
+    const parsedHour = Number(h);
+    const parsedMinute = Number(m);
+    const parsedSecond = Number(s);
+
+    if (
+      !Number.isFinite(parsedHour) ||
+      !Number.isFinite(parsedMinute) ||
+      !Number.isFinite(parsedSecond)
+    ) {
+      return;
+    }
+
+    const minuteValue = clamp(Math.trunc(parsedMinute), 0, 59);
+    const secondValue = clamp(Math.trunc(parsedSecond), 0, 59);
+
+    let hourValue = clamp(Math.trunc(parsedHour), 0, 23);
+    if (use12Hour) {
+      hourValue = from12Hour(parsedHour, meridian);
+    }
+
+    onChange?.({
+      hour: hourValue,
+      minute: minuteValue,
+      second: secondValue,
+    });
+  }
+
+  function applyPreset(preset: string): void {
+    const parsed = parsePreset(preset);
+    if (!parsed) {
+      return;
+    }
+
+    if (use12Hour) {
+      const converted = to12Hour(parsed.hour);
+      h = String(converted.displayHour);
+      meridian = converted.meridian;
+    } else {
+      h = String(parsed.hour);
+    }
+
+    m = String(parsed.minute);
+    s = String(parsed.second);
+    emit();
+  }
+
+  $effect(() => {
+    if (use12Hour) {
+      const converted = to12Hour(hour);
+      h = String(converted.displayHour);
+      meridian = converted.meridian;
+    } else {
+      h = String(hour);
+    }
+
+    m = String(minute);
+    s = String(second);
+  });
+</script>
+
+<div class="rounded border border-surface-300-700 bg-surface-100-900 p-2">
+  {#if withDropdown}
+    <div class="grid grid-cols-4 gap-2">
+      <label class="flex flex-col gap-1">
+        <span class="text-xs text-surface-500-400-token">Hour</span>
+        <select class="select" bind:value={h} onchange={emit}>
+          {#each hourOptions as option}
+            <option value={String(option)}>{pad2(option)}</option>
+          {/each}
+        </select>
+      </label>
+
+      <label class="flex flex-col gap-1">
+        <span class="text-xs text-surface-500-400-token">Minute</span>
+        <select class="select" bind:value={m} onchange={emit}>
+          {#each minuteOptions as option}
+            <option value={String(option)}>{pad2(option)}</option>
+          {/each}
+        </select>
+      </label>
+
+      <label class="flex flex-col gap-1">
+        <span class="text-xs text-surface-500-400-token">Second</span>
+        <select class="select" bind:value={s} onchange={emit}>
+          {#each secondOptions as option}
+            <option value={String(option)}>{pad2(option)}</option>
+          {/each}
+        </select>
+      </label>
+
+      {#if use12Hour}
+        <label class="flex flex-col gap-1">
+          <span class="text-xs text-surface-500-400-token">Period</span>
+          <select
+            class="select"
+            bind:value={meridian}
+            onchange={emit}
+            aria-label="AM PM selector"
+          >
+            <option value="am">{amLabel}</option>
+            <option value="pm">{pmLabel}</option>
+          </select>
+        </label>
+      {/if}
+    </div>
+  {:else}
+    <div class="grid grid-cols-4 gap-2">
+      <label class="flex flex-col gap-1">
+        <span class="text-xs text-surface-500-400-token">Hour</span>
+        <input
+          class="input"
+          type="number"
+          min={use12Hour ? '1' : '0'}
+          max={use12Hour ? '12' : '23'}
+          step={String(safeHoursStep)}
+          bind:value={h}
+          oninput={emit}
+        />
+      </label>
+
+      <label class="flex flex-col gap-1">
+        <span class="text-xs text-surface-500-400-token">Minute</span>
+        <input
+          class="input"
+          type="number"
+          min="0"
+          max="59"
+          step={String(safeMinutesStep)}
+          bind:value={m}
+          oninput={emit}
+        />
+      </label>
+
+      <label class="flex flex-col gap-1">
+        <span class="text-xs text-surface-500-400-token">Second</span>
+        <input
+          class="input"
+          type="number"
+          min="0"
+          max="59"
+          step={String(safeSecondsStep)}
+          bind:value={s}
+          oninput={emit}
+        />
+      </label>
+
+      {#if use12Hour}
+        <label class="flex flex-col gap-1">
+          <span class="text-xs text-surface-500-400-token">Period</span>
+          <select
+            class="select"
+            bind:value={meridian}
+            onchange={emit}
+            aria-label="AM PM selector"
+          >
+            <option value="am">{amLabel}</option>
+            <option value="pm">{pmLabel}</option>
+          </select>
+        </label>
+      {/if}
+    </div>
+  {/if}
+
+  {#if normalizedPresets.length > 0}
+    <div class="mt-3 flex flex-wrap gap-2">
+      {#each normalizedPresets as preset (preset.value)}
+        <button
+          type="button"
+          class="btn btn-sm preset-tonal-surface-500"
+          onclick={() => applyPreset(preset.value)}
+          title={`Apply ${preset.label}`}
+        >
+          {preset.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+
+  {#if minTime || maxTime}
+    <p class="mt-2 text-xs text-surface-500-400-token">
+      Allowed time: <code>{minTime ?? '00:00:00'}</code> to <code>{maxTime ?? '23:59:59'}</code>
+    </p>
+  {/if}
+</div>