@adia-ai/web-components 0.6.32 → 0.6.34

package/components/date-range-picker/date-range-picker.a2ui.json

@@ -0,0 +1,300 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/DateRangePicker.json",
+  "title": "DateRangePicker",
+  "description": "Compound form primitive for selecting a start + end date pair with optional named preset shortcuts (\"Today\", \"Last 7 days\", \"This month\", ...). Default presentation is a trigger button showing the formatted range; on activation a popover opens with two synchronized calendar panes + a preset side rail. Composes <calendar-picker-ui> twice; emits {from, to} ISO 8601 dates. Optional comparison-range mode emits a secondary range for analytics surfaces.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Required for validation when inside a `<form>`.",
+      "type": "boolean",
+      "default": false
+    },
+    "compareValue": {
+      "description": "Comparison range when `[comparison]` is set. Same `{from, to}` shape as `value`.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
+    "comparison": {
+      "description": "Enable comparison-range mode. Renders a second preset cluster and emits a secondary range under `<name>-compare`.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "DateRangePicker"
+    },
+    "disabled": {
+      "description": "Block all interaction. Trigger remains rendered but does not open the popover.",
+      "type": "boolean",
+      "default": false
+    },
+    "format": {
+      "description": "Trigger button date format. `short`: `Jan 1, 2026`; `long`: `January 1, 2026`; `iso`: `2026-01-01`.",
+      "type": "string",
+      "enum": [
+        "short",
+        "long",
+        "iso"
+      ],
+      "default": "short"
+    },
+    "max": {
+      "description": "Latest selectable ISO date (inclusive). Days after are disabled in both panes.",
+      "type": "string",
+      "default": ""
+    },
+    "min": {
+      "description": "Earliest selectable ISO date (inclusive). Days before are disabled in both panes.",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Form field name for form data submission. The selected range serializes as JSON `{\"from\":\"...\",\"to\":\"...\"}` under this key.",
+      "type": "string",
+      "default": ""
+    },
+    "noPresets": {
+      "description": "Hide the preset side rail.",
+      "type": "boolean",
+      "default": false
+    },
+    "open": {
+      "description": "Whether the popover is currently open.",
+      "type": "boolean",
+      "default": false
+    },
+    "placeholder": {
+      "description": "Text shown in the trigger when the value is empty.",
+      "type": "string",
+      "default": "Select range"
+    },
+    "readonly": {
+      "description": "Block edits; allow keyboard navigation for screen-reader inspection.",
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "description": "Selected range as `{from, to}` ISO 8601 dates. Null when empty. Emitted on commit.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"DateRangePicker\", \"value\": {\"from\": \"2026-01-01\", \"to\": \"2026-01-31\"}}\n",
+        "why": "`value` is a string, not an object. The contract is `{from, to}` ISO 8601 dates.\n",
+        "wrong": "{\"component\": \"DateRangePicker\", \"value\": \"2026-01-01 to 2026-01-31\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"DateRangePicker\", \"value\": {\"from\": \"2026-01-01\", \"to\": \"2026-12-31\"}}\n",
+        "why": "Reversed range — `to < from`. This fires `invalid` and never commits.\n",
+        "wrong": "{\"component\": \"DateRangePicker\", \"value\": {\"from\": \"2026-12-31\", \"to\": \"2026-01-01\"}}\n"
+      },
+      {
+        "fix": "Use <date-range-picker-ui>.\n",
+        "why": "This is the pattern the primitive replaces. Reinvents linked-pane behavior,\nmisses preset rail, has no a11y range-announcement.\n",
+        "wrong": "Two adjacent <calendar-picker-ui> instances + JS synchronization.\n"
+      }
+    ],
+    "category": "input",
+    "composes": [
+      "calendar-grid-ui",
+      "button-ui",
+      "popover-ui",
+      "text-ui",
+      "divider-ui"
+    ],
+    "events": {
+      "change": {
+        "description": "Fired when the range commits (both `from` AND `to` selected, OR a preset clicked).",
+        "detail": {
+          "compareValue": "object",
+          "presetLabel": "string",
+          "value": "object"
+        }
+      },
+      "close": {
+        "description": "Popover closed (without commit, or after commit).",
+        "detail": {
+          "reason": "string"
+        }
+      },
+      "input": {
+        "description": "Fired during selection — e.g. user clicked `from` but has not yet picked `to`.",
+        "detail": {
+          "value": "object"
+        }
+      },
+      "invalid": {
+        "description": "A constraint failed (out of range, end < start).",
+        "detail": {
+          "reason": "string",
+          "value": "object"
+        }
+      },
+      "open": {
+        "description": "Popover opened (user clicked the trigger or pressed Enter / Space).",
+        "detail": {
+          "trigger": "string"
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Form-field-wrapped picker with default presets.",
+        "a2ui": "[\n  {\n    \"id\": \"field\",\n    \"component\": \"Field\",\n    \"label\": \"Report period\",\n    \"children\": [\"dr\"]\n  },\n  {\n    \"id\": \"dr\",\n    \"component\": \"DateRangePicker\",\n    \"name\": \"report-period\",\n    \"min\": \"2026-01-01\",\n    \"max\": \"2026-12-31\"\n  }\n]\n",
+        "name": "canonical"
+      },
+      {
+        "description": "Analytics-surface picker with comparison range enabled.",
+        "a2ui": "[\n  {\n    \"id\": \"dr\",\n    \"component\": \"DateRangePicker\",\n    \"name\": \"period\",\n    \"comparison\": true,\n    \"value\": {\"from\": \"2026-05-01\", \"to\": \"2026-05-31\"},\n    \"compareValue\": {\"from\": \"2026-04-01\", \"to\": \"2026-04-30\"}\n  }\n]\n",
+        "name": "comparison"
+      },
+      {
+        "description": "Custom-only picker with the preset rail hidden.",
+        "a2ui": "[\n  {\n    \"id\": \"dr\",\n    \"component\": \"DateRangePicker\",\n    \"name\": \"period\",\n    \"noPresets\": true\n  }\n]\n",
+        "name": "no-presets"
+      }
+    ],
+    "keywords": [
+      "daterangepicker",
+      "date-range-picker",
+      "date-range",
+      "range",
+      "daterange",
+      "period",
+      "reporting-period"
+    ],
+    "name": "UIDateRangePicker",
+    "related": [
+      "calendar-picker",
+      "popover",
+      "field",
+      "button"
+    ],
+    "slots": {
+      "footer": {
+        "description": "Optional footer area below the calendars (e.g., \"Apply\" / \"Cancel\" buttons for explicit-commit flows)."
+      },
+      "presets": {
+        "description": "Custom preset content replacing the default preset rail."
+      },
+      "trigger": {
+        "description": "Custom trigger replacement. When omitted, a default `<button-ui>` is stamped."
+      }
+    },
+    "states": [
+      {
+        "description": "Closed, no pending selection.",
+        "name": "idle"
+      },
+      {
+        "description": "Popover open, user has not yet clicked a start date.",
+        "attribute": "open",
+        "name": "open-pending-from"
+      },
+      {
+        "description": "Start clicked, awaiting end click; hover preview active.",
+        "attribute": "open",
+        "name": "open-pending-to"
+      },
+      {
+        "description": "Both ends clicked, awaiting Apply (only in explicit-commit mode with `footer` slot).",
+        "attribute": "open",
+        "name": "open-committed"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Read-only; trigger keyboard-focusable but popover does not open.",
+        "attribute": "readonly",
+        "name": "readonly"
+      }
+    ],
+    "status": "experimental",
+    "synonyms": {
+      "period": [
+        "date-range",
+        "range",
+        "reporting-period"
+      ],
+      "range": [
+        "date-range",
+        "period",
+        "report-period"
+      ],
+      "tags": [
+        "DateRangePicker",
+        "DateRange",
+        "DateRangeInput"
+      ]
+    },
+    "tag": "date-range-picker-ui",
+    "tokens": {
+      "--date-range-picker-bg": {
+        "description": "Host background.",
+        "default": "var(--a-bg)"
+      },
+      "--date-range-picker-popover-bg": {
+        "description": "Popover background.",
+        "default": "var(--a-bg-subtle)"
+      },
+      "--date-range-picker-popover-border": {
+        "description": "Popover border color.",
+        "default": "var(--a-border-subtle)"
+      },
+      "--date-range-picker-popover-radius": {
+        "description": "Popover border radius.",
+        "default": "var(--a-radius-lg)"
+      },
+      "--date-range-picker-popover-shadow": {
+        "description": "Popover box shadow.",
+        "default": "var(--a-shadow-lg)"
+      },
+      "--date-range-picker-preset-bg": {
+        "description": "Preset row background (idle).",
+        "default": "transparent"
+      },
+      "--date-range-picker-preset-bg-hover": {
+        "description": "Preset row background on hover.",
+        "default": "var(--a-bg-hover)"
+      },
+      "--date-range-picker-preview-bg": {
+        "description": "In-range preview background (between from and pending to).",
+        "default": "var(--a-accent-muted)"
+      },
+      "--date-range-picker-px": {
+        "description": "Horizontal popover padding.",
+        "default": "var(--a-space-3)"
+      },
+      "--date-range-picker-py": {
+        "description": "Vertical popover padding.",
+        "default": "var(--a-space-2)"
+      },
+      "--date-range-picker-selected-bg": {
+        "description": "Selected day-cell background (cascaded into the inner calendar via --calendar-picker-day-bg-selected).",
+        "default": "var(--a-accent)"
+      },
+      "--date-range-picker-selected-fg": {
+        "description": "Selected day-cell foreground.",
+        "default": "var(--a-accent-fg)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/date-range-picker/date-range-picker.css

@@ -0,0 +1,178 @@
+/* ============================================================
+   date-range-picker — two-block @scope per ADR-0003.
+   Block 1 (TOKENS): :where(:scope) — token defaults.
+   Block 2 (BASE): :scope + descendant selectors.
+   Popover surfaces live OUTSIDE @scope because the Popover API
+   lifts them into the top layer; custom-property inheritance
+   still cascades from the host so --date-range-picker-* tokens
+   reach the popover.
+   ============================================================ */
+
+@scope (date-range-picker-ui) {
+  /* ── Block 1 — TOKENS ── */
+  :where(:scope) {
+    --date-range-picker-bg-default:               var(--a-bg);
+    --date-range-picker-fg-default:               var(--a-fg);
+
+    /* Popover surface */
+    --date-range-picker-popover-bg-default:       var(--a-bg-subtle);
+    --date-range-picker-popover-border-default:   var(--a-border-subtle);
+    --date-range-picker-popover-radius-default:   var(--a-radius-lg);
+    --date-range-picker-popover-shadow-default:   var(--a-shadow-lg);
+    --date-range-picker-popover-padding-default:  var(--a-space-3);
+    --date-range-picker-popover-gap-default:      var(--a-space-3);
+
+    /* Preset rail */
+    --date-range-picker-preset-bg-default:        transparent;
+    --date-range-picker-preset-bg-hover-default:  var(--a-bg-hover);
+    --date-range-picker-preset-min-width-default: 10em;
+    --date-range-picker-preset-gap-default:       var(--a-space-1);
+
+    /* Selected / preview day cells (cascade into calendar) */
+    --date-range-picker-selected-bg-default:      var(--a-accent);
+    --date-range-picker-selected-fg-default:      var(--a-accent-fg);
+    --date-range-picker-preview-bg-default:       var(--a-accent-muted);
+
+    /* Trigger */
+    --date-range-picker-trigger-min-width-default: 14em;
+
+    /* Padding */
+    --date-range-picker-px-default:               var(--a-space-3);
+    --date-range-picker-py-default:               var(--a-space-2);
+
+    /* Motion */
+    --date-range-picker-duration-default:         var(--a-duration-fast);
+    --date-range-picker-easing-default:           var(--a-easing);
+  }
+
+  /* ── Block 2 — BASE ── */
+  :scope {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    background: var(--date-range-picker-bg, var(--date-range-picker-bg-default));
+    color: var(--date-range-picker-fg, var(--date-range-picker-fg-default));
+    font-size: var(--a-ui-size);
+  }
+
+  /* Default trigger sizing — composes button-ui's surface; just
+     stretches the min-width so the formatted-range label fits. */
+  :scope > [slot="trigger"] {
+    min-width: var(--date-range-picker-trigger-min-width, var(--date-range-picker-trigger-min-width-default));
+  }
+
+  /* States */
+  :scope[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  :scope[readonly] > [slot="trigger"] {
+    cursor: default;
+  }
+}
+
+/* ============================================================
+   Popover surface — outside @scope (lifted to top layer).
+   Custom properties inherit from the host so
+   --date-range-picker-* tokens are available here.
+   ============================================================ */
+
+/* §FB-Wave1-QA — `display: grid` MUST be guarded by `:popover-open` so the
+   popover honors the UA `popover` `display: none` while closed. Without
+   the guard, the popover renders in normal flow on first paint. Mirrors
+   the popover-ui pattern that uses `:not(:popover-open) { display: none }`. */
+date-range-picker-ui [slot="popover"] {
+  margin: 0;
+  padding: var(--date-range-picker-py, var(--date-range-picker-py-default)) var(--date-range-picker-px, var(--date-range-picker-px-default));
+  border: 1px solid var(--date-range-picker-popover-border, var(--date-range-picker-popover-border-default));
+  border-radius: var(--date-range-picker-popover-radius, var(--date-range-picker-popover-radius-default));
+  background: var(--date-range-picker-popover-bg, var(--date-range-picker-popover-bg-default));
+  box-shadow: var(--date-range-picker-popover-shadow, var(--date-range-picker-popover-shadow-default));
+  color: var(--a-fg);
+  /* Anchor-positioning fallback — popover.css and anchor.js handle
+     placement; layout here just sets the grid. */
+  inset: auto;
+  /* Fade + lift in on first paint via @starting-style. */
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    opacity var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
+    translate var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
+}
+
+date-range-picker-ui [slot="popover"]:popover-open {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--date-range-picker-popover-gap, var(--date-range-picker-popover-gap-default));
+}
+
+date-range-picker-ui [slot="popover"]:popover-open {
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  date-range-picker-ui [slot="popover"] { transition: none; }
+}
+
+/* Preset rail — single-column flex of button-ui buttons. */
+date-range-picker-ui [data-preset-rail],
+date-range-picker-ui [slot="presets"] {
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--date-range-picker-preset-gap, var(--date-range-picker-preset-gap-default));
+  min-width: var(--date-range-picker-preset-min-width, var(--date-range-picker-preset-min-width-default));
+}
+
+/* When [no-presets] is set OR no preset rail exists, collapse the
+   grid to a single column. */
+date-range-picker-ui[no-presets] [slot="popover"],
+date-range-picker-ui [slot="popover"]:not(:has([data-preset-rail])):not(:has([slot="presets"])) {
+  grid-template-columns: 1fr;
+}
+
+date-range-picker-ui [data-preset-rail] button-ui {
+  justify-content: flex-start;
+}
+
+/* Calendar area — horizontal layout of two calendar panes. */
+date-range-picker-ui [data-calendar-area] {
+  grid-column: 2;
+  display: flex;
+  gap: var(--a-space-3);
+  align-items: flex-start;
+}
+
+date-range-picker-ui [data-calendar-area] calendar-grid-ui {
+  flex: 0 0 auto;
+}
+
+/* Cascade range-aware tokens into the inner calendar panes so the
+   linked-range coloring uses the date-range-picker palette.
+   §FB-Wave1-QA — now consumes calendar-grid-ui tokens (the extracted
+   substrate primitive). */
+date-range-picker-ui calendar-grid-ui {
+  --calendar-grid-day-bg-selected: var(--date-range-picker-selected-bg, var(--date-range-picker-selected-bg-default));
+  --calendar-grid-day-fg-selected: var(--date-range-picker-selected-fg, var(--date-range-picker-selected-fg-default));
+  --calendar-grid-day-bg-hover:    var(--date-range-picker-preview-bg, var(--date-range-picker-preview-bg-default));
+}
+
+/* Comparison mode — split preset rail visual via the divider. */
+date-range-picker-ui[comparison] [data-preset-rail] [data-preset-divider] {
+  margin-block: var(--a-space-1);
+}
+
+/* Footer area (author-supplied [slot="footer"]) — spans both columns
+   under the calendar area. */
+date-range-picker-ui [slot="footer"] {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--a-space-2);
+  padding-block-start: var(--a-space-2);
+  border-block-start: 1px solid var(--a-border-subtle);
+}

package/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,82 @@
+/**
+ * `<date-range-picker-ui>` — Compound form primitive for selecting a start + end date pair with optional named preset shortcuts ("Today", "Last 7 days", "This month", ...). Default presentation is a trigger button showing the formatted range; on activation a popover opens with two synchronized calendar panes + a preset side rail. Composes <calendar-picker-ui> twice; emits {from, to} ISO 8601 dates. Optional comparison-range mode emits a secondary range for analytics surfaces.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/date-range-picker
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export interface DateRangePickerChangeEventDetail {
+  compareValue: string;
+  presetLabel: string;
+  value: string;
+}
+
+export type DateRangePickerChangeEvent = CustomEvent<DateRangePickerChangeEventDetail>;
+export interface DateRangePickerCloseEventDetail {
+  reason: string;
+}
+
+export type DateRangePickerCloseEvent = CustomEvent<DateRangePickerCloseEventDetail>;
+export interface DateRangePickerInputEventDetail {
+  value: string;
+}
+
+export type DateRangePickerInputEvent = CustomEvent<DateRangePickerInputEventDetail>;
+export interface DateRangePickerInvalidEventDetail {
+  reason: string;
+  value: string;
+}
+
+export type DateRangePickerInvalidEvent = CustomEvent<DateRangePickerInvalidEventDetail>;
+export interface DateRangePickerOpenEventDetail {
+  trigger: string;
+}
+
+export type DateRangePickerOpenEvent = CustomEvent<DateRangePickerOpenEventDetail>;
+
+export class UIDateRangePicker extends UIElement {
+  /** Required for validation when inside a `<form>`. */
+  required: boolean;
+  /** Comparison range when `[comparison]` is set. Same `{from, to}` shape as `value`. */
+  compareValue: string;
+  /** Enable comparison-range mode. Renders a second preset cluster and emits a secondary range under `<name>-compare`. */
+  comparison: boolean;
+  /** Block all interaction. Trigger remains rendered but does not open the popover. */
+  disabled: boolean;
+  /** Trigger button date format. `short`: `Jan 1, 2026`; `long`: `January 1, 2026`; `iso`: `2026-01-01`. */
+  format: 'short' | 'long' | 'iso';
+  /** Latest selectable ISO date (inclusive). Days after are disabled in both panes. */
+  max: string;
+  /** Earliest selectable ISO date (inclusive). Days before are disabled in both panes. */
+  min: string;
+  /** Form field name for form data submission. The selected range serializes as JSON `{"from":"...","to":"..."}` under this key. */
+  name: string;
+  /** Hide the preset side rail. */
+  noPresets: boolean;
+  /** Whether the popover is currently open. */
+  open: boolean;
+  /** Text shown in the trigger when the value is empty. */
+  placeholder: string;
+  /** Block edits; allow keyboard navigation for screen-reader inspection. */
+  readonly: boolean;
+  /** Selected range as `{from, to}` ISO 8601 dates. Null when empty. Emitted on commit. */
+  value: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIDateRangePicker, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: DateRangePickerChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'close', listener: (ev: DateRangePickerCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: DateRangePickerInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'invalid', listener: (ev: DateRangePickerInvalidEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'open', listener: (ev: DateRangePickerOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/date-range-picker/date-range-picker.examples.md

@@ -0,0 +1,37 @@
+# date-range-picker — Examples
+
+## Canonical
+
+```html
+<field-ui label="Report period">
+  <date-range-picker-ui
+    name="report-period"
+    min="2026-01-01"
+    max="2026-12-31">
+  </date-range-picker-ui>
+</field-ui>
+```
+
+## Comparison mode
+
+```html
+<date-range-picker-ui
+  name="period"
+  comparison
+  value='{"from":"2026-05-01","to":"2026-05-31"}'
+  compare-value='{"from":"2026-04-01","to":"2026-04-30"}'>
+</date-range-picker-ui>
+```
+
+## Custom presets
+
+```html
+<date-range-picker-ui id="dr" name="period"></date-range-picker-ui>
+<script>
+  document.getElementById('dr').presets = [
+    { label: 'Q1', range: { from: '2026-01-01', to: '2026-03-31' } },
+    { label: 'Q2', range: { from: '2026-04-01', to: '2026-06-30' } },
+    { label: 'YTD', range: { from: '2026-01-01', to: '2026-05-24' } },
+  ];
+</script>
+```

package/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,17 @@
+/**
+ * `<date-range-picker-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIDateRangePicker } from '@adia-ai/web-components/components/date-range-picker/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIDateRangePicker } from './class.js';
+
+defineIfFree('date-range-picker-ui', UIDateRangePicker);
+
+export { UIDateRangePicker };