@aiaiai-pt/design-system 0.4.4 → 0.5.1

package/components/MapPopup.svelte

@@ -0,0 +1,101 @@
+<!--
+  @component MapPopup
+
+  Tooltip/popup anchored to a map coordinate via OL Overlay.
+  Styled with DS card tokens. Used internally by map components
+  but can be composed directly for custom popups.
+  Consumes --map-popup-* tokens from components.css.
+
+  @example Inside MapCluster
+  <MapCluster {markers} let:popup>
+    <MapPopup>{popup.label}</MapPopup>
+  </MapCluster>
+-->
+<script>
+  let {
+    /** @type {boolean} */
+    visible = false,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    /** @type {(() => void) | undefined} */
+    onclose = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+</script>
+
+{#if visible}
+  <div class="map-popup {className}" {...rest}>
+    <div class="map-popup-content">
+      {#if children}{@render children()}{/if}
+    </div>
+    {#if onclose}
+      <button class="map-popup-close" onclick={onclose} aria-label="Close">
+        <svg viewBox="0 0 256 256" aria-hidden="true">
+          <line x1="80" y1="80" x2="176" y2="176" stroke="currentColor" stroke-width="16" stroke-linecap="round" />
+          <line x1="176" y1="80" x2="80" y2="176" stroke="currentColor" stroke-width="16" stroke-linecap="round" />
+        </svg>
+      </button>
+    {/if}
+    <div class="map-popup-arrow" aria-hidden="true"></div>
+  </div>
+{/if}
+
+<style>
+  .map-popup {
+    position: relative;
+    background: var(--map-popup-bg);
+    border: var(--map-popup-border);
+    border-radius: var(--map-popup-radius);
+    box-shadow: var(--map-popup-shadow);
+    padding: var(--map-popup-padding);
+    max-width: var(--map-popup-max-width);
+    width: max-content;
+  }
+
+  .map-popup-content {
+    font-family: var(--type-body-sm-font);
+    font-size: var(--type-body-sm-size);
+    color: var(--color-text);
+    line-height: var(--type-body-sm-line-height);
+  }
+
+  .map-popup-close {
+    position: absolute;
+    top: var(--space-2xs);
+    right: var(--space-2xs);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+  }
+
+  .map-popup-close:hover {
+    background: var(--color-surface-secondary);
+    color: var(--color-text);
+  }
+
+  .map-popup-close svg {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+  }
+
+  .map-popup-arrow {
+    position: absolute;
+    bottom: calc(-1 * var(--map-popup-arrow-size));
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: var(--map-popup-arrow-size) solid transparent;
+    border-right: var(--map-popup-arrow-size) solid transparent;
+    border-top: var(--map-popup-arrow-size) solid var(--map-popup-bg);
+  }
+</style>

package/components/MapPopup.svelte.d.ts

@@ -0,0 +1,30 @@
+export default MapPopup;
+type MapPopup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MapPopup
+ *
+ * Tooltip/popup anchored to a map coordinate via OL Overlay.
+ * Styled with DS card tokens. Used internally by map components
+ * but can be composed directly for custom popups.
+ * Consumes --map-popup-* tokens from components.css.
+ *
+ * @example Inside MapCluster
+ * <MapCluster {markers} let:popup>
+ *   <MapPopup>{popup.label}</MapPopup>
+ * </MapCluster>
+ */
+declare const MapPopup: import("svelte").Component<{
+    visible?: boolean;
+    children?: any;
+    onclose?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    visible?: boolean;
+    children?: any;
+    onclose?: any;
+    class?: string;
+} & Record<string, any>;

package/components/Select.svelte

@@ -55,11 +55,9 @@
   const hintId = $derived(`${selectId}-hint`);
   const hasHint = $derived(!!error || !!help);
 
-  let mounted = false;
-  $effect(() => {
-    if (!mounted) { mounted = true; return; }
+  function handleChange() {
     if (onchange && value !== undefined) onchange(value);
-  });
+  }
 </script>
 
 <div class="input-group {className}">
@@ -76,6 +74,7 @@
       aria-describedby={hasHint ? hintId : undefined}
       {disabled}
       bind:value
+      onchange={handleChange}
       {...rest}
     >
       {#if placeholder}

package/components/StatCard.svelte

@@ -0,0 +1,195 @@
+<!--
+  @component StatCard
+
+  KPI card with large value, label, optional trend indicator and icon.
+  Consumes --stat-* tokens from components.css.
+
+  @example Basic
+  <StatCard label="TOTAL EQUIPMENT" value="1,247" />
+
+  @example With trend
+  <StatCard label="ACTIVE" value="892" trend={12.4} trendLabel="vs last month" />
+
+  @example With icon
+  <StatCard label="OVERDUE" value="23" variant="error">
+    {#snippet icon()}<PhWarning size={24} />{/snippet}
+  </StatCard>
+-->
+<script>
+  import Skeleton from './Skeleton.svelte';
+
+  /**
+   * @typedef {'neutral' | 'success' | 'warning' | 'error' | 'info'} Variant
+   */
+
+  let {
+    /** @type {string} */
+    value = '',
+    /** @type {string} */
+    label = '',
+    /** @type {Variant} */
+    variant = 'neutral',
+    /** @type {number | undefined} — percentage change; positive = up, negative = down, 0 = neutral */
+    trend = undefined,
+    /** @type {string | undefined} */
+    trendLabel = undefined,
+    /** @type {boolean} */
+    loading = false,
+    /** @type {import('svelte').Snippet | undefined} */
+    icon = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const trendDirection = $derived(
+    trend === undefined ? 'none'
+    : trend > 0 ? 'up'
+    : trend < 0 ? 'down'
+    : 'neutral'
+  );
+
+  const trendText = $derived(
+    trend === undefined ? ''
+    : `${trend > 0 ? '+' : ''}${trend.toFixed(1)}%`
+  );
+</script>
+
+<div class="stat stat-{variant} {className}" {...rest}>
+  {#if loading}
+    <div class="stat-loading">
+      <Skeleton width="60%" height="36px" />
+      <Skeleton width="80%" height="12px" />
+    </div>
+  {:else}
+    <div class="stat-content">
+      <div class="stat-main">
+        <span class="stat-label">{label}</span>
+        <span class="stat-value">{value}</span>
+        {#if trend !== undefined}
+          <span class="stat-trend stat-trend-{trendDirection}">
+            {#if trendDirection === 'up'}
+              <svg class="stat-trend-icon" viewBox="0 0 256 256" aria-hidden="true">
+                <polyline points="64,192 128,128 192,192" fill="none" stroke="currentColor" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" />
+                <line x1="128" y1="128" x2="128" y2="224" stroke="currentColor" stroke-width="24" stroke-linecap="round" />
+              </svg>
+            {:else if trendDirection === 'down'}
+              <svg class="stat-trend-icon" viewBox="0 0 256 256" aria-hidden="true">
+                <polyline points="64,64 128,128 192,64" fill="none" stroke="currentColor" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" />
+                <line x1="128" y1="32" x2="128" y2="128" stroke="currentColor" stroke-width="24" stroke-linecap="round" />
+              </svg>
+            {:else}
+              <svg class="stat-trend-icon" viewBox="0 0 256 256" aria-hidden="true">
+                <line x1="40" y1="128" x2="216" y2="128" stroke="currentColor" stroke-width="24" stroke-linecap="round" />
+              </svg>
+            {/if}
+            <span>{trendText}</span>
+            {#if trendLabel}
+              <span class="stat-trend-label">{trendLabel}</span>
+            {/if}
+          </span>
+        {/if}
+      </div>
+      {#if icon}
+        <span class="stat-icon" aria-hidden="true">
+          {@render icon()}
+        </span>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .stat {
+    display: flex;
+    padding: var(--stat-padding);
+    border: var(--stat-border);
+    border-radius: var(--stat-radius);
+    background: var(--stat-bg);
+    min-width: 0;
+  }
+
+  .stat-loading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    width: 100%;
+  }
+
+  .stat-content {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-md);
+    width: 100%;
+  }
+
+  .stat-main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+    min-width: 0;
+  }
+
+  .stat-label {
+    font-family: var(--stat-label-font);
+    font-size: var(--stat-label-size);
+    letter-spacing: var(--stat-label-tracking);
+    color: var(--stat-label-color);
+  }
+
+  .stat-value {
+    font-family: var(--stat-value-font);
+    font-size: var(--stat-value-size);
+    font-weight: var(--stat-value-weight);
+    letter-spacing: var(--stat-value-tracking);
+    color: var(--color-text);
+    line-height: 1;
+  }
+
+  /* ─── Variant accent on value ─── */
+  .stat-success .stat-value { color: var(--color-success); }
+  .stat-warning .stat-value { color: var(--color-warning); }
+  .stat-error .stat-value { color: var(--color-destructive); }
+  .stat-info .stat-value { color: var(--color-info); }
+
+  /* ─── Trend ─── */
+  .stat-trend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    font-family: var(--stat-trend-font);
+    font-size: var(--stat-trend-size);
+    margin-top: var(--space-2xs);
+  }
+
+  .stat-trend-up { color: var(--stat-trend-up-color); }
+  .stat-trend-down { color: var(--stat-trend-down-color); }
+  .stat-trend-neutral { color: var(--stat-trend-neutral-color); }
+
+  .stat-trend-icon {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+    flex-shrink: 0;
+  }
+
+  .stat-trend-label {
+    color: var(--color-text-muted);
+  }
+
+  /* ─── Icon ─── */
+  .stat-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--stat-icon-size);
+    height: var(--stat-icon-size);
+    color: var(--stat-icon-color);
+    flex-shrink: 0;
+  }
+
+  .stat-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/components/StatCard.svelte.d.ts

@@ -0,0 +1,42 @@
+export default StatCard;
+type StatCard = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * StatCard
+ *
+ * KPI card with large value, label, optional trend indicator and icon.
+ * Consumes --stat-* tokens from components.css.
+ *
+ * @example Basic
+ * <StatCard label="TOTAL EQUIPMENT" value="1,247" />
+ *
+ * @example With trend
+ * <StatCard label="ACTIVE" value="892" trend={12.4} trendLabel="vs last month" />
+ *
+ * @example With icon
+ * <StatCard label="OVERDUE" value="23" variant="error">
+ *   {#snippet icon()}<PhWarning size={24} />{/snippet}
+ * </StatCard>
+ */
+declare const StatCard: import("svelte").Component<{
+    value?: string;
+    label?: string;
+    variant?: string;
+    trend?: any;
+    trendLabel?: any;
+    loading?: boolean;
+    icon?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    value?: string;
+    label?: string;
+    variant?: string;
+    trend?: any;
+    trendLabel?: any;
+    loading?: boolean;
+    icon?: any;
+    class?: string;
+} & Record<string, any>;

package/components/StatGrid.svelte

@@ -0,0 +1,39 @@
+<!--
+  @component StatGrid
+
+  Responsive grid for StatCard components. Wraps CardGrid with
+  stat-appropriate defaults (4 columns, stat-grid gap).
+
+  @example
+  <StatGrid>
+    <StatCard label="TOTAL" value="1,247" />
+    <StatCard label="ACTIVE" value="892" variant="success" />
+    <StatCard label="OVERDUE" value="23" variant="error" />
+    <StatCard label="SCHEDULED" value="156" variant="info" />
+  </StatGrid>
+-->
+<script>
+  import CardGrid from './CardGrid.svelte';
+
+  let {
+    /** @type {'2' | '3' | '4'} */
+    columns = '4',
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+</script>
+
+<CardGrid {columns} class="stat-grid {className}" {...rest}>
+  {#if children}
+    {@render children()}
+  {/if}
+</CardGrid>
+
+<style>
+  :global(.stat-grid) {
+    gap: var(--stat-grid-gap);
+  }
+</style>

package/components/StatGrid.svelte.d.ts

@@ -0,0 +1,29 @@
+export default StatGrid;
+type StatGrid = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * StatGrid
+ *
+ * Responsive grid for StatCard components. Wraps CardGrid with
+ * stat-appropriate defaults (4 columns, stat-grid gap).
+ *
+ * @example
+ * <StatGrid>
+ *   <StatCard label="TOTAL" value="1,247" />
+ *   <StatCard label="ACTIVE" value="892" variant="success" />
+ *   <StatCard label="OVERDUE" value="23" variant="error" />
+ *   <StatCard label="SCHEDULED" value="156" variant="info" />
+ * </StatGrid>
+ */
+declare const StatGrid: import("svelte").Component<{
+    columns?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    columns?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/index.d.ts

@@ -50,3 +50,15 @@ export { default as LogViewer } from "./LogViewer.svelte";
 export { default as DataTable } from "./DataTable.svelte";
 export { default as Pagination } from "./Pagination.svelte";
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export { default as DatePicker } from "./DatePicker.svelte";
+export { default as DateTimePicker } from "./DateTimePicker.svelte";
+export { default as DateRangePicker } from "./DateRangePicker.svelte";
+export { default as FilterPanel } from "./FilterPanel.svelte";
+export { default as StatCard } from "./StatCard.svelte";
+export { default as StatGrid } from "./StatGrid.svelte";
+export { default as MapDisplay } from "./MapDisplay.svelte";
+export { default as MapPicker } from "./MapPicker.svelte";
+export { default as MapCluster } from "./MapCluster.svelte";
+export { default as MapHeatmap } from "./MapHeatmap.svelte";
+export { default as MapPopup } from "./MapPopup.svelte";
+export { default as Calendar } from "./Calendar.svelte";

package/components/index.js

@@ -44,6 +44,9 @@ export { default as MenuSeparator } from "./MenuSeparator.svelte";
 
 // Form controls — composite
 export { default as Combobox } from "./Combobox.svelte";
+export { default as DatePicker } from "./DatePicker.svelte";
+export { default as DateTimePicker } from "./DateTimePicker.svelte";
+export { default as DateRangePicker } from "./DateRangePicker.svelte";
 
 // Search
 export { default as SearchInput } from "./SearchInput.svelte";
@@ -82,3 +85,17 @@ export { default as LogViewer } from "./LogViewer.svelte";
 export { default as DataTable } from "./DataTable.svelte";
 export { default as Pagination } from "./Pagination.svelte";
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
+
+// Stats
+export { default as StatCard } from "./StatCard.svelte";
+export { default as StatGrid } from "./StatGrid.svelte";
+
+// Maps (OpenLayers)
+export { default as MapDisplay } from "./MapDisplay.svelte";
+export { default as MapPicker } from "./MapPicker.svelte";
+export { default as MapCluster } from "./MapCluster.svelte";
+export { default as MapHeatmap } from "./MapHeatmap.svelte";
+export { default as MapPopup } from "./MapPopup.svelte";
+
+// Scheduling
+export { default as Calendar } from "./Calendar.svelte";

package/components/map-utils.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Shared utilities for map components.
+ * Not exported from index.js — internal to map components only.
+ */
+/**
+ * @typedef {{ type: 'osm' }} OsmSource
+ * @typedef {{ type: 'xyz', url: string, attributions?: string, maxZoom?: number }} XyzSource
+ * @typedef {{ type: 'stadia', layer: string, retina?: boolean, apiKey?: string }} StadiaSource
+ * @typedef {OsmSource | XyzSource | StadiaSource} TileSourceConfig
+ */
+/**
+ * Creates an OL tile layer from a config object.
+ *
+ * @param {TileSourceConfig} config
+ * @returns {Promise<import('ol/layer/Tile.js').default>}
+ */
+export function createTileLayer(config: TileSourceConfig): Promise<import("ol/layer/Tile.js").default>;
+/**
+ * @typedef {object} MapStyles
+ * @property {import('ol/style/Style.js').default} marker
+ * @property {import('ol/style/Style.js').default} polygon
+ * @property {(size: number) => import('ol/style/Style.js').default} cluster
+ * @property {() => void} refresh — re-read CSS tokens, mutate styles in place
+ */
+/**
+ * Creates OL styles from DS tokens. Returns mutable style objects
+ * with a refresh() method that re-reads CSS vars and updates the
+ * styles in place — call after theme change, then source.changed().
+ *
+ * @param {Element} el
+ * @returns {Promise<MapStyles>}
+ */
+export function createMapStyles(el: Element): Promise<MapStyles>;
+/**
+ * Watches for theme changes (data-theme attribute, class changes on <html>,
+ * OS prefers-color-scheme). Calls onchange when a theme switch is detected.
+ * Returns a dispose function.
+ *
+ * @param {() => void} onchange
+ * @returns {() => void} dispose
+ */
+export function watchTheme(onchange: () => void): () => void;
+/**
+ * Renders a visible error state inside a map container.
+ *
+ * @param {HTMLElement} el
+ * @param {string} component
+ * @param {Error} error
+ */
+export function renderMapError(el: HTMLElement, component: string, error: Error): void;
+/**
+ * @param {Element} el
+ * @param {string} prop
+ * @param {string} fallback
+ * @returns {string}
+ */
+export function cssVar(el: Element, prop: string, fallback: string): string;
+/**
+ * Resolves a CSS custom property to a pixel number via probe element.
+ *
+ * @param {Element} el
+ * @param {string} prop
+ * @param {number} fallback
+ * @returns {number}
+ */
+export function cssPx(el: Element, prop: string, fallback: number): number;
+/**
+ * Reads heatmap gradient stops from CSS custom properties.
+ * Resolves color-mix() and other CSS color expressions to concrete
+ * rgb values that OL's canvas gradient can consume.
+ *
+ * @param {Element} el
+ * @returns {string[]}
+ */
+export function getHeatmapGradient(el: Element): string[];
+export type OsmSource = {
+    type: "osm";
+};
+export type XyzSource = {
+    type: "xyz";
+    url: string;
+    attributions?: string;
+    maxZoom?: number;
+};
+export type StadiaSource = {
+    type: "stadia";
+    layer: string;
+    retina?: boolean;
+    apiKey?: string;
+};
+export type TileSourceConfig = OsmSource | XyzSource | StadiaSource;
+export type MapStyles = {
+    marker: import("ol/style/Style.js").default;
+    polygon: import("ol/style/Style.js").default;
+    cluster: (size: number) => import("ol/style/Style.js").default;
+    /**
+     * — re-read CSS tokens, mutate styles in place
+     */
+    refresh: () => void;
+};