@aiaiai-pt/design-system 0.4.3 → 0.5.0

package/components/DateTimePicker.svelte

@@ -0,0 +1,275 @@
+<!--
+  @component DateTimePicker
+
+  Date + time selection. Composes DatePicker with styled hour/minute selects.
+  Values displayed in Berkeley Mono (data font).
+  Consumes --datepicker-* and --input-* tokens from components.css.
+
+  @example Basic
+  <DateTimePicker label="SCHEDULED AT" bind:value={scheduledAt} />
+
+  @example With constraints
+  <DateTimePicker label="MEETING" min={new Date()} displayFormat="dd/MM/yyyy HH:mm" />
+-->
+<script module>
+  let _datetimepickerUid = 0;
+</script>
+
+<script>
+  import { format } from 'date-fns';
+  import { enUS } from 'date-fns/locale';
+  import DatePicker from './DatePicker.svelte';
+
+  /**
+   * @typedef {'sm' | 'md' | 'lg'} Size
+   */
+
+  let {
+    /** @type {Date | null} */
+    value = $bindable(null),
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    placeholder = 'Select date and time',
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {string | undefined} */
+    error = undefined,
+    /** @type {Size} */
+    size = 'md',
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {boolean} */
+    readonly = false,
+    /** @type {Date | undefined} */
+    min = undefined,
+    /** @type {Date | undefined} */
+    max = undefined,
+    /** @type {string} */
+    displayFormat = 'dd/MM/yyyy HH:mm',
+    /** @type {import('date-fns').Locale} */
+    locale = enUS,
+    /** @type {number} */
+    minuteStep = 5,
+    /** @type {((date: Date) => void) | undefined} */
+    onchange = undefined,
+    /** @type {string | undefined} */
+    id = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const fallbackId = `datetimepicker-${_datetimepickerUid++}`;
+  const pickerId = $derived(id ?? fallbackId);
+  const hintId = $derived(`${pickerId}-hint`);
+  const hasHint = $derived(!!error || !!help);
+
+  // Split value into date and time parts
+  let selectedDate = $state(value ? new Date(value) : null);
+  let hours = $state(value ? value.getHours() : 9);
+  let minutes = $state(value ? value.getMinutes() : 0);
+
+  // Generate minute options based on step
+  const minuteOptions = $derived(
+    Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep)
+  );
+
+  /** @param {Date} date */
+  function handleDateChange(date) {
+    selectedDate = date;
+    syncValue(date, hours, minutes);
+  }
+
+  /** @param {Event} e */
+  function handleHourChange(e) {
+    const h = Number(/** @type {HTMLSelectElement} */ (e.target).value);
+    hours = h;
+    if (selectedDate) syncValue(selectedDate, h, minutes);
+  }
+
+  /** @param {Event} e */
+  function handleMinuteChange(e) {
+    const m = Number(/** @type {HTMLSelectElement} */ (e.target).value);
+    minutes = m;
+    if (selectedDate) syncValue(selectedDate, hours, m);
+  }
+
+  /** @param {Date} date @param {number} h @param {number} m */
+  function syncValue(date, h, m) {
+    const merged = new Date(date);
+    merged.setHours(h, m, 0, 0);
+    value = merged;
+    onchange?.(merged);
+  }
+
+  // Sync when value changes externally
+  $effect(() => {
+    if (value) {
+      selectedDate = new Date(value);
+      hours = value.getHours();
+      minutes = value.getMinutes();
+    }
+  });
+</script>
+
+<div class="datetimepicker {className}" {...rest}>
+  {#if label}
+    <label class="datetimepicker-label" for={pickerId}>{label}</label>
+  {/if}
+
+  <div class="datetimepicker-row">
+    <div class="datetimepicker-date">
+      <DatePicker
+        bind:value={selectedDate}
+        placeholder={value ? undefined : placeholder}
+        {size}
+        {disabled}
+        {readonly}
+        {min}
+        {max}
+        {locale}
+        onchange={handleDateChange}
+        id={pickerId}
+      />
+    </div>
+
+    <div class="datetimepicker-time">
+      <select
+        class="datetimepicker-select datetimepicker-select-{size}"
+        class:datetimepicker-select-error={!!error}
+        value={hours}
+        {disabled}
+        onchange={handleHourChange}
+        aria-label="Hour"
+      >
+        {#each Array.from({ length: 24 }, (_, i) => i) as h}
+          <option value={h}>{String(h).padStart(2, '0')}</option>
+        {/each}
+      </select>
+      <span class="datetimepicker-colon" aria-hidden="true">:</span>
+      <select
+        class="datetimepicker-select datetimepicker-select-{size}"
+        class:datetimepicker-select-error={!!error}
+        value={minutes}
+        {disabled}
+        onchange={handleMinuteChange}
+        aria-label="Minute"
+      >
+        {#each minuteOptions as m}
+          <option value={m}>{String(m).padStart(2, '0')}</option>
+        {/each}
+      </select>
+    </div>
+  </div>
+
+  {#if error}
+    <span id={hintId} class="datetimepicker-error-text" role="alert">{error}</span>
+  {:else if help}
+    <span id={hintId} class="datetimepicker-help">{help}</span>
+  {/if}
+</div>
+
+<style>
+  .datetimepicker {
+    display: flex;
+    flex-direction: column;
+    gap: var(--input-label-gap);
+    width: 100%;
+  }
+
+  .datetimepicker-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .datetimepicker-row {
+    display: flex;
+    gap: var(--space-xs);
+    align-items: stretch;
+  }
+
+  .datetimepicker-date {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .datetimepicker-time {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    flex-shrink: 0;
+  }
+
+  .datetimepicker-colon {
+    font-family: var(--input-font);
+    font-size: var(--input-font-size);
+    color: var(--color-text-secondary);
+    padding: 0 var(--space-2xs);
+    user-select: none;
+  }
+
+  .datetimepicker-select {
+    font-family: var(--input-font);
+    font-size: var(--input-font-size);
+    border: var(--input-border);
+    border-radius: var(--input-radius);
+    background: var(--input-bg);
+    color: var(--input-text);
+    cursor: pointer;
+    transition: border var(--input-transition);
+    appearance: none;
+    -webkit-appearance: none;
+    text-align: center;
+    width: 3.2em;
+  }
+
+  .datetimepicker-select-sm {
+    height: var(--input-sm-height);
+    padding: 0 var(--space-xs);
+  }
+
+  .datetimepicker-select-md {
+    height: var(--input-md-height);
+    padding: 0 var(--space-xs);
+  }
+
+  .datetimepicker-select-lg {
+    height: var(--input-lg-height);
+    padding: 0 var(--space-sm);
+  }
+
+  .datetimepicker-select:focus {
+    outline: none;
+    border: var(--input-border-focus);
+  }
+
+  .datetimepicker-select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .datetimepicker-select-error {
+    border-color: var(--input-error-border-color);
+  }
+
+  .datetimepicker-help {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-help-color);
+  }
+
+  .datetimepicker-error-text {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-error-text);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .datetimepicker-select {
+      transition: none;
+    }
+  }
+</style>

package/components/DateTimePicker.svelte.d.ts

@@ -0,0 +1,55 @@
+export default DateTimePicker;
+type DateTimePicker = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * DateTimePicker
+ *
+ * Date + time selection. Composes DatePicker with a time input.
+ * Values displayed in Berkeley Mono (data font).
+ * Consumes --datepicker-* and --input-* tokens from components.css.
+ *
+ * @example Basic
+ * <DateTimePicker label="SCHEDULED AT" bind:value={scheduledAt} />
+ *
+ * @example With constraints
+ * <DateTimePicker label="MEETING" min={new Date()} displayFormat="dd/MM/yyyy HH:mm" />
+ */
+declare const DateTimePicker: import("svelte").Component<{
+    value?: any;
+    label?: any;
+    placeholder?: string;
+    help?: any;
+    error?: any;
+    size?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    min?: any;
+    max?: any;
+    displayFormat?: string;
+    locale?: typeof enUS;
+    minuteStep?: number;
+    onchange?: any;
+    id?: any;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: any;
+    label?: any;
+    placeholder?: string;
+    help?: any;
+    error?: any;
+    size?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    min?: any;
+    max?: any;
+    displayFormat?: string;
+    locale?: typeof enUS;
+    minuteStep?: number;
+    onchange?: any;
+    id?: any;
+    class?: string;
+} & Record<string, any>;
+import { enUS } from 'date-fns/locale';

package/components/FilterPanel.svelte

@@ -36,7 +36,6 @@
 </script>
 
 <script>
-  import Select from './Select.svelte';
   import Combobox from './Combobox.svelte';
 
   let {
@@ -95,13 +94,23 @@
   {#each filters as filter (filter.key)}
     <div class="filter-field">
       {#if filter.type === 'select' && filter.options}
-        <Select
-          size="sm"
-          label={filter.label}
-          value={value[filter.key] ?? ''}
-          options={[{ value: '', label: 'All' }, ...filter.options]}
-          onchange={(val) => setFilter(filter.key, val)}
-        />
+        <label class="filter-field-label" for="filter-{filter.key}">{filter.label}</label>
+        <div class="filter-select-wrap">
+          <select
+            id="filter-{filter.key}"
+            class="filter-select filter-select-sm"
+            value={value[filter.key] ?? ''}
+            onchange={(e) => setFilter(filter.key, /** @type {HTMLSelectElement} */ (e.currentTarget).value)}
+          >
+            <option value="">All</option>
+            {#each filter.options as opt (opt.value)}
+              <option value={opt.value}>{opt.label}</option>
+            {/each}
+          </select>
+          <span class="filter-select-chevron" aria-hidden="true">
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 4.5L6 8l3.5-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </span>
+        </div>
       {:else if filter.type === 'boolean'}
         {@const opts = filter.options ?? [{ value: 'true', label: 'Yes' }, { value: 'false', label: 'No' }]}
         <span class="filter-field-label">{filter.label}</span>
@@ -152,6 +161,42 @@
     flex-wrap: wrap;
   }
 
+  .filter-select-wrap {
+    position: relative;
+  }
+
+  .filter-select {
+    font-family: var(--input-font);
+    font-size: var(--input-font-size);
+    border: var(--input-border);
+    border-radius: var(--input-radius);
+    background: var(--input-bg);
+    color: var(--input-text);
+    width: 100%;
+    appearance: none;
+    padding-right: var(--space-xl);
+  }
+
+  .filter-select-sm {
+    height: var(--input-sm-height);
+    padding: 0 var(--input-sm-padding-x);
+  }
+
+  .filter-select:focus {
+    outline: none;
+    border: var(--input-border-focus);
+  }
+
+  .filter-select-chevron {
+    position: absolute;
+    right: var(--space-sm);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--input-placeholder);
+    display: flex;
+  }
+
   .filter-field {
     display: flex;
     flex-direction: column;

package/components/MapCluster.svelte

@@ -0,0 +1,220 @@
+<!--
+  @component MapCluster
+
+  Map with clustered markers, hover tooltips, and click-to-select.
+  OpenLayers with built-in Cluster source and OL Overlay for tooltips.
+  Styles cached via shared style factory for render performance.
+  Consumes --map-* tokens from components.css.
+
+  @example
+  <MapCluster
+    markers={[{ id: '1', lon: -9.14, lat: 38.74, label: 'HQ' }]}
+    onclick={(marker) => goto(`/equipment/${marker.id}`)}
+  />
+-->
+<script>
+  import { fromLonLat } from 'ol/proj.js';
+  import { createTileLayer, createMapStyles, watchTheme, renderMapError } from './map-utils.js';
+
+  let {
+    /** @type {{ id: string, lon: number, lat: number, label?: string, [key: string]: any }[]} */
+    markers = [],
+    /** @type {[number, number]} — initial center [lon, lat] */
+    center = [0, 0],
+    /** @type {number} */
+    zoom = 6,
+    /** @type {number} — cluster distance in pixels */
+    distance = 40,
+    /** @type {import('./map-utils.js').TileSourceConfig} */
+    tileSource = { type: 'osm' },
+    /** @type {((marker: { id: string, lon: number, lat: number, label?: string }) => void) | undefined} */
+    onclick = undefined,
+    /** @type {string} */
+    height = '100%',
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  /** @type {HTMLElement | undefined} */
+  let container = $state();
+
+  $effect(() => {
+    if (!container) return;
+
+    let disposed = false;
+    /** @type {import('ol/Map.js').default | undefined} */
+    let map;
+    /** @type {(() => void) | undefined} */
+    let disposeTheme;
+
+    (async () => { try {
+      const [
+        { default: OlMap },
+        { default: View },
+        { default: VectorLayer },
+        { default: VectorSource },
+        { default: Cluster },
+        { default: Feature },
+        { default: Point },
+        { default: Overlay },
+      ] = await Promise.all([
+        import('ol/Map.js'),
+        import('ol/View.js'),
+        import('ol/layer/Vector.js'),
+        import('ol/source/Vector.js'),
+        import('ol/source/Cluster.js'),
+        import('ol/Feature.js'),
+        import('ol/geom/Point.js'),
+        import('ol/Overlay.js'),
+      ]);
+
+      if (disposed) return;
+
+      const [tileLayer, styles] = await Promise.all([
+        createTileLayer(tileSource),
+        createMapStyles(container),
+      ]);
+      if (disposed) return;
+
+      const features = markers.map(m => {
+        const f = new Feature({ geometry: new Point(fromLonLat([m.lon, m.lat])) });
+        f.set('markerData', m);
+        return f;
+      });
+
+      const vectorSource = new VectorSource({ features });
+      const clusterSource = new Cluster({ distance, source: vectorSource });
+
+      const clusterLayer = new VectorLayer({
+        source: clusterSource,
+        style: (feature) => {
+          const size = feature.get('features')?.length ?? 1;
+          return styles.cluster(size);
+        },
+      });
+
+      // Tooltip overlay
+      const tooltipEl = document.createElement('div');
+      tooltipEl.style.cssText = `
+        background: var(--map-popup-bg, #fff);
+        border: var(--map-popup-border, 1px solid #ddd);
+        border-radius: var(--map-popup-radius, 4px);
+        padding: var(--map-popup-padding, 8px);
+        box-shadow: var(--map-popup-shadow, 0 2px 8px rgba(0,0,0,0.15));
+        font-family: var(--type-body-sm-font, sans-serif);
+        font-size: var(--type-body-sm-size, 13px);
+        color: var(--color-text, #2c2825);
+        pointer-events: none;
+        white-space: nowrap;
+      `;
+      tooltipEl.style.display = 'none';
+      container.appendChild(tooltipEl);
+
+      const tooltipOverlay = new Overlay({
+        element: tooltipEl,
+        positioning: 'bottom-center',
+        offset: [0, -12],
+      });
+
+      const viewCenter = markers.length > 0
+        ? fromLonLat([
+            markers.reduce((s, m) => s + m.lon, 0) / markers.length,
+            markers.reduce((s, m) => s + m.lat, 0) / markers.length,
+          ])
+        : fromLonLat(center);
+
+      map = new OlMap({
+        target: container,
+        layers: [tileLayer, clusterLayer],
+        overlays: [tooltipOverlay],
+        view: new View({
+          center: viewCenter,
+          zoom,
+        }),
+      });
+
+      // Hover: show tooltip
+      map.on('pointermove', (evt) => {
+        const feature = map?.forEachFeatureAtPixel(evt.pixel, f => f);
+        if (!feature) {
+          tooltipEl.style.display = 'none';
+          if (container) container.style.cursor = '';
+          return;
+        }
+
+        const clustered = feature.get('features');
+        if (container) container.style.cursor = 'pointer';
+
+        if (clustered?.length === 1) {
+          const data = clustered[0].get('markerData');
+          if (data?.label) {
+            tooltipEl.textContent = data.label;
+            tooltipEl.style.display = 'block';
+            tooltipOverlay.setPosition(feature.getGeometry()?.getCoordinates());
+          }
+        } else {
+          tooltipEl.textContent = `${clustered?.length ?? 0} items`;
+          tooltipEl.style.display = 'block';
+          tooltipOverlay.setPosition(feature.getGeometry()?.getCoordinates());
+        }
+      });
+
+      // Click handler
+      if (onclick) {
+        map.on('click', (evt) => {
+          const feature = map?.forEachFeatureAtPixel(evt.pixel, f => f);
+          if (!feature) return;
+
+          const clustered = feature.get('features');
+          if (clustered?.length === 1) {
+            const data = clustered[0].get('markerData');
+            if (data) onclick(data);
+          } else if (clustered?.length > 1) {
+            const view = map?.getView();
+            const currentZoom = view?.getZoom() ?? zoom;
+            view?.animate({
+              center: feature.getGeometry()?.getCoordinates(),
+              zoom: currentZoom + 2,
+              duration: 300,
+            });
+          }
+        });
+      }
+
+      disposeTheme = watchTheme(() => {
+        styles.refresh();
+        clusterSource.changed();
+      });
+    } catch (err) { renderMapError(container, 'MapCluster', /** @type {Error} */ (err)); } })();
+
+    return () => {
+      disposed = true;
+      disposeTheme?.();
+      map?.setTarget(undefined);
+    };
+  });
+</script>
+
+<div
+  bind:this={container}
+  class="map-cluster {className}"
+  style:height
+  role="application"
+  aria-label="Map with clustered markers"
+  {...rest}
+></div>
+
+<style>
+  .map-cluster {
+    width: 100%;
+    border: var(--map-border);
+    border-radius: var(--map-radius);
+    overflow: hidden;
+    position: relative;
+  }
+
+  .map-cluster :global(.ol-viewport) {
+    border-radius: inherit;
+  }
+</style>

package/components/MapCluster.svelte.d.ts

@@ -0,0 +1,39 @@
+export default MapCluster;
+type MapCluster = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MapCluster
+ *
+ * Map with clustered markers, hover tooltips, and click-to-select.
+ * OpenLayers with built-in Cluster source and OL Overlay for tooltips.
+ * Styles cached via shared style factory for render performance.
+ * Consumes --map-* tokens from components.css.
+ *
+ * @example
+ * <MapCluster
+ *   markers={[{ id: '1', lon: -9.14, lat: 38.74, label: 'HQ' }]}
+ *   onclick={(marker) => goto(`/equipment/${marker.id}`)}
+ * />
+ */
+declare const MapCluster: import("svelte").Component<{
+    markers?: any[];
+    center?: any[];
+    zoom?: number;
+    distance?: number;
+    tileSource?: Record<string, any>;
+    onclick?: any;
+    height?: string;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    markers?: any[];
+    center?: any[];
+    zoom?: number;
+    distance?: number;
+    tileSource?: Record<string, any>;
+    onclick?: any;
+    height?: string;
+    class?: string;
+} & Record<string, any>;