@tcn/ui-time-selector 1.0.0

package/dist/components/date_range_panel/date_range_panel.d.ts

@@ -0,0 +1,13 @@
+import { DateRangePanelPresenter } from './date_range_panel_presenter.js';
+export interface DateRangePanelOwnProps {
+    presenter: DateRangePanelPresenter;
+    focused: boolean;
+    startDateMin?: Date | null;
+    startDateMax?: Date | null;
+    endDateMin?: Date | null;
+    endDateMax?: Date | null;
+    onApply: () => void;
+}
+export type DateRangePanelProps = DateRangePanelOwnProps;
+export declare function DateRangePanel({ presenter, focused, startDateMin, startDateMax, endDateMin, endDateMax, onApply, }: DateRangePanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date_range_panel.d.ts.map

package/dist/components/date_range_panel/date_range_panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date_range_panel.d.ts","sourceRoot":"","sources":["../../../src/components/date_range_panel/date_range_panel.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAG1E,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,uBAAuB,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAC;AAEzD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,OAAO,GACR,EAAE,mBAAmB,2CAwDrB"}

package/dist/components/date_range_panel/date_range_panel.js

@@ -0,0 +1,71 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useSignalValue as l } from "@tcn/state";
+import { VStack as r, Spacer as y } from "@tcn/ui/stacks";
+import { BodyText as s } from "@tcn/ui/typography";
+import { DatePickerInput as d } from "@tcn/ui/inputs";
+import { Button as _ } from "@tcn/ui/actions";
+import { useRef as g, useEffect as P } from "react";
+import { IteratorIcon as x } from "@tcn/icons/iterator_icon.js";
+import '../../date_range_panel.css';const N = "_date-picker-panel_1e6c441", v = "_date-picker-panel-title_bc33101", w = "_date-picker-section_90f5c3a", S = "_date-picker-label_113ebb5", T = "_apply_05ed9af", a = { "date-picker-panel": N, "date-picker-panel-title": v, "date-picker-section": w, "date-picker-label": S, apply: T };
+function V({
+  presenter: t,
+  focused: o,
+  startDateMin: p,
+  startDateMax: m,
+  endDateMin: h,
+  endDateMax: k,
+  onApply: f
+}) {
+  const n = g(null), u = l(t.startDate.broadcast), b = l(t.endDate.broadcast), D = l(t.broadcasts.isApplyDisabled);
+  return P(() => {
+    o && n.current?.focus();
+  }, [o]), /* @__PURE__ */ i(r, { className: a["date-picker-panel"], height: "auto", children: [
+    /* @__PURE__ */ e(s, { className: a["date-picker-panel-title"], selectable: !1, children: "Absolute time range" }),
+    /* @__PURE__ */ i(r, { className: a["date-picker-section"], height: "auto", width: "auto", children: [
+      /* @__PURE__ */ e(s, { className: a["date-picker-label"], selectable: !1, children: "From" }),
+      /* @__PURE__ */ e(
+        d,
+        {
+          ref: n,
+          showTime: !0,
+          value: u,
+          onChange: (c) => t.setStartDate(c),
+          min: p ?? void 0,
+          max: m ?? void 0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i(r, { className: a["date-picker-section"], height: "auto", width: "auto", children: [
+      /* @__PURE__ */ e(s, { className: a["date-picker-label"], selectable: !1, children: "To" }),
+      /* @__PURE__ */ e(
+        d,
+        {
+          showTime: !0,
+          value: b,
+          onChange: (c) => t.setEndDate(c),
+          min: h ?? void 0,
+          max: k ?? void 0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i(
+      _,
+      {
+        size: "sm",
+        hierarchy: "primary",
+        disabled: D,
+        onClick: f,
+        className: a.apply,
+        children: [
+          "Apply time range",
+          /* @__PURE__ */ e(y, { width: "8px" }),
+          /* @__PURE__ */ e(x, { size: "sm" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  V as DateRangePanel
+};
+//# sourceMappingURL=date_range_panel.js.map

package/dist/components/date_range_panel/date_range_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date_range_panel.js","sources":["../../../src/components/date_range_panel/date_range_panel.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Spacer, VStack } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { DatePickerInput } from '@tcn/ui/inputs';\nimport { Button } from '@tcn/ui/actions';\nimport { useEffect, useRef } from 'react';\nimport { IteratorIcon } from '@tcn/icons/iterator_icon.js';\nimport { DateRangePanelPresenter } from './date_range_panel_presenter.js';\nimport styles from './date_range_panel.module.css';\n\nexport interface DateRangePanelOwnProps {\n  presenter: DateRangePanelPresenter;\n  focused: boolean;\n  startDateMin?: Date | null;\n  startDateMax?: Date | null;\n  endDateMin?: Date | null;\n  endDateMax?: Date | null;\n  onApply: () => void;\n}\n\nexport type DateRangePanelProps = DateRangePanelOwnProps;\n\nexport function DateRangePanel({\n  presenter,\n  focused,\n  startDateMin,\n  startDateMax,\n  endDateMin,\n  endDateMax,\n  onApply,\n}: DateRangePanelProps) {\n  const startDateRef = useRef<HTMLButtonElement>(null);\n\n  const startDate = useSignalValue(presenter.startDate.broadcast);\n  const endDate = useSignalValue(presenter.endDate.broadcast);\n  const isApplyDisabled = useSignalValue(presenter.broadcasts.isApplyDisabled);\n\n  useEffect(() => {\n    if (focused) {\n      startDateRef.current?.focus();\n    }\n  }, [focused]);\n\n  return (\n    <VStack className={styles['date-picker-panel']} height=\"auto\">\n      <BodyText className={styles['date-picker-panel-title']} selectable={false}>\n        Absolute time range\n      </BodyText>\n      <VStack className={styles['date-picker-section']} height=\"auto\" width=\"auto\">\n        <BodyText className={styles['date-picker-label']} selectable={false}>\n          From\n        </BodyText>\n        <DatePickerInput\n          ref={startDateRef}\n          showTime\n          value={startDate}\n          onChange={(date: Date | null) => presenter.setStartDate(date)}\n          min={startDateMin ?? undefined}\n          max={startDateMax ?? undefined}\n        />\n      </VStack>\n      <VStack className={styles['date-picker-section']} height=\"auto\" width=\"auto\">\n        <BodyText className={styles['date-picker-label']} selectable={false}>\n          To\n        </BodyText>\n        <DatePickerInput\n          showTime\n          value={endDate}\n          onChange={(date: Date | null) => presenter.setEndDate(date)}\n          min={endDateMin ?? undefined}\n          max={endDateMax ?? undefined}\n        />\n      </VStack>\n      <Button\n        size=\"sm\"\n        hierarchy=\"primary\"\n        disabled={isApplyDisabled}\n        onClick={onApply}\n        className={styles['apply']}\n      >\n        Apply time range\n        <Spacer width=\"8px\" />\n        <IteratorIcon size=\"sm\" />\n      </Button>\n    </VStack>\n  );\n}\n"],"names":["DateRangePanel","presenter","focused","startDateMin","startDateMax","endDateMin","endDateMax","onApply","startDateRef","useRef","startDate","useSignalValue","endDate","isApplyDisabled","useEffect","VStack","styles","jsx","BodyText","jsxs","DatePickerInput","date","Button","Spacer","IteratorIcon"],"mappings":";;;;;;;;;AAsBO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AACF,GAAwB;AACtB,QAAMC,IAAeC,EAA0B,IAAI,GAE7CC,IAAYC,EAAeV,EAAU,UAAU,SAAS,GACxDW,IAAUD,EAAeV,EAAU,QAAQ,SAAS,GACpDY,IAAkBF,EAAeV,EAAU,WAAW,eAAe;AAE3E,SAAAa,EAAU,MAAM;AACd,IAAIZ,KACFM,EAAa,SAAS,MAAA;AAAA,EAE1B,GAAG,CAACN,CAAO,CAAC,qBAGTa,GAAA,EAAO,WAAWC,EAAO,mBAAmB,GAAG,QAAO,QACrD,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAS,WAAWF,EAAO,yBAAyB,GAAG,YAAY,IAAO,UAAA,uBAE3E;AAAA,IACA,gBAAAG,EAACJ,KAAO,WAAWC,EAAO,qBAAqB,GAAG,QAAO,QAAO,OAAM,QACpE,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAS,WAAWF,EAAO,mBAAmB,GAAG,YAAY,IAAO,UAAA,QAErE;AAAA,MACA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,KAAKZ;AAAA,UACL,UAAQ;AAAA,UACR,OAAOE;AAAA,UACP,UAAU,CAACW,MAAsBpB,EAAU,aAAaoB,CAAI;AAAA,UAC5D,KAAKlB,KAAgB;AAAA,UACrB,KAAKC,KAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB,GACF;AAAA,IACA,gBAAAe,EAACJ,KAAO,WAAWC,EAAO,qBAAqB,GAAG,QAAO,QAAO,OAAM,QACpE,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAS,WAAWF,EAAO,mBAAmB,GAAG,YAAY,IAAO,UAAA,MAErE;AAAA,MACA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,UAAQ;AAAA,UACR,OAAOR;AAAA,UACP,UAAU,CAACS,MAAsBpB,EAAU,WAAWoB,CAAI;AAAA,UAC1D,KAAKhB,KAAc;AAAA,UACnB,KAAKC,KAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,GACF;AAAA,IACA,gBAAAa;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,UAAUT;AAAA,QACV,SAASN;AAAA,QACT,WAAWS,EAAO;AAAA,QACnB,UAAA;AAAA,UAAA;AAAA,UAEC,gBAAAC,EAACM,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,UACpB,gBAAAN,EAACO,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1B,GACF;AAEJ;"}

package/dist/components/date_range_panel/date_range_panel_presenter.d.ts

@@ -0,0 +1,14 @@
+import { Signal } from '@tcn/state';
+export declare class DateRangePanelPresenter {
+    readonly startDate: Signal<Date | null>;
+    readonly endDate: Signal<Date | null>;
+    private _isApplyDisabled;
+    readonly broadcasts: {
+        isApplyDisabled: Signal<boolean>['broadcast'];
+    };
+    constructor(startDate: Signal<Date | null>, endDate: Signal<Date | null>);
+    private _updateApplyDisabled;
+    setStartDate(date: Date | null): void;
+    setEndDate(date: Date | null): void;
+}
+//# sourceMappingURL=date_range_panel_presenter.d.ts.map

package/dist/components/date_range_panel/date_range_panel_presenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date_range_panel_presenter.d.ts","sourceRoot":"","sources":["../../../src/components/date_range_panel/date_range_panel_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,qBAAa,uBAAuB;IAQhC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IARvC,OAAO,CAAC,gBAAgB,CAA8B;IAEtD,QAAQ,CAAC,UAAU,EAAE;QACnB,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;KAC/C,CAAC;gBAGS,SAAS,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,EAC9B,OAAO,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IAQvC,OAAO,CAAC,oBAAoB;IAM5B,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAK9B,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;CAI7B"}

package/dist/components/date_range_panel/date_range_panel_presenter.js

@@ -0,0 +1,24 @@
+import { Signal as e } from "@tcn/state";
+class l {
+  constructor(t, s) {
+    this.startDate = t, this.endDate = s, this.broadcasts = {
+      isApplyDisabled: this._isApplyDisabled.broadcast
+    }, this._updateApplyDisabled();
+  }
+  _isApplyDisabled = new e(!1);
+  broadcasts;
+  _updateApplyDisabled() {
+    const t = this.startDate.get(), s = this.endDate.get();
+    this._isApplyDisabled.set(t == null || s == null || s <= t);
+  }
+  setStartDate(t) {
+    this.startDate.set(t), this._updateApplyDisabled();
+  }
+  setEndDate(t) {
+    this.endDate.set(t), this._updateApplyDisabled();
+  }
+}
+export {
+  l as DateRangePanelPresenter
+};
+//# sourceMappingURL=date_range_panel_presenter.js.map

package/dist/components/date_range_panel/date_range_panel_presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date_range_panel_presenter.js","sources":["../../../src/components/date_range_panel/date_range_panel_presenter.ts"],"sourcesContent":["import { Signal } from '@tcn/state';\n\nexport class DateRangePanelPresenter {\n  private _isApplyDisabled = new Signal<boolean>(false);\n\n  readonly broadcasts: {\n    isApplyDisabled: Signal<boolean>['broadcast'];\n  };\n\n  constructor(\n    readonly startDate: Signal<Date | null>,\n    readonly endDate: Signal<Date | null>\n  ) {\n    this.broadcasts = {\n      isApplyDisabled: this._isApplyDisabled.broadcast,\n    };\n    this._updateApplyDisabled();\n  }\n\n  private _updateApplyDisabled() {\n    const start = this.startDate.get();\n    const end = this.endDate.get();\n    this._isApplyDisabled.set(start == null || end == null || end <= start);\n  }\n\n  setStartDate(date: Date | null) {\n    this.startDate.set(date);\n    this._updateApplyDisabled();\n  }\n\n  setEndDate(date: Date | null) {\n    this.endDate.set(date);\n    this._updateApplyDisabled();\n  }\n}\n"],"names":["DateRangePanelPresenter","startDate","endDate","Signal","start","end","date"],"mappings":";AAEO,MAAMA,EAAwB;AAAA,EAOnC,YACWC,GACAC,GACT;AAFS,SAAA,YAAAD,GACA,KAAA,UAAAC,GAET,KAAK,aAAa;AAAA,MAChB,iBAAiB,KAAK,iBAAiB;AAAA,IAAA,GAEzC,KAAK,qBAAA;AAAA,EACP;AAAA,EAdQ,mBAAmB,IAAIC,EAAgB,EAAK;AAAA,EAE3C;AAAA,EAcD,uBAAuB;AAC7B,UAAMC,IAAQ,KAAK,UAAU,IAAA,GACvBC,IAAM,KAAK,QAAQ,IAAA;AACzB,SAAK,iBAAiB,IAAID,KAAS,QAAQC,KAAO,QAAQA,KAAOD,CAAK;AAAA,EACxE;AAAA,EAEA,aAAaE,GAAmB;AAC9B,SAAK,UAAU,IAAIA,CAAI,GACvB,KAAK,qBAAA;AAAA,EACP;AAAA,EAEA,WAAWA,GAAmB;AAC5B,SAAK,QAAQ,IAAIA,CAAI,GACrB,KAAK,qBAAA;AAAA,EACP;AACF;"}

package/dist/components/preset_panel/preset_panel.d.ts

@@ -0,0 +1,11 @@
+import { PresetItem } from '../utils.js';
+import { PresetPanelPresenter } from './preset_panel_presenter.js';
+export interface PresetPanelOwnProps {
+    presenter: PresetPanelPresenter;
+    selectedPreset: PresetItem | null;
+    focused: boolean;
+    onSelect: (item: PresetItem) => void;
+}
+export type PresetPanelProps = PresetPanelOwnProps;
+export declare function PresetPanel({ presenter, selectedPreset, focused, onSelect, }: PresetPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=preset_panel.d.ts.map

package/dist/components/preset_panel/preset_panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset_panel.d.ts","sourceRoot":"","sources":["../../../src/components/preset_panel/preset_panel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,oBAAoB,CAAC;IAChC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,CAAC;AAEnD,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,cAAc,EACd,OAAO,EACP,QAAQ,GACT,EAAE,gBAAgB,2CAkDlB"}

package/dist/components/preset_panel/preset_panel.js

@@ -0,0 +1,52 @@
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { useSignalValue as c } from "@tcn/state";
+import { VStack as f, HStack as I } from "@tcn/ui/stacks";
+import { BodyText as _ } from "@tcn/ui/typography";
+import { Input as x } from "@tcn/ui/inputs";
+import { useRef as m, useEffect as d } from "react";
+import '../../preset_panel.css';const k = "_presets-panel_7e3238f", y = "_preset-search_113ae3a", S = "_preset-list_191d980", w = "_preset-item_aa39cec", r = { "presets-panel": k, "preset-search": y, "preset-list": S, "preset-item": w };
+function C({
+  presenter: s,
+  selectedPreset: n,
+  focused: o,
+  onSelect: i
+}) {
+  const h = m(null), p = m(null), u = c(s.broadcasts.search), g = c(s.broadcasts.filteredItems), a = c(s.broadcasts.highlightedIndex);
+  return d(() => {
+    o && h.current?.focus();
+  }, [o]), d(() => {
+    const e = p.current;
+    if (e == null) return;
+    e.children[a]?.scrollIntoView({ block: "nearest" });
+  }, [a]), /* @__PURE__ */ b(f, { className: r["presets-panel"], height: "auto", children: [
+    /* @__PURE__ */ l(
+      x,
+      {
+        ref: h,
+        className: r["preset-search"],
+        value: u,
+        onChange: (e) => s.setSearch(e),
+        placeholder: "Search quick ranges",
+        onKeyDown: (e) => {
+          const t = s.handleKeyDown(e.key);
+          t.preventDefault && e.preventDefault(), t.selectedItem != null && i(t.selectedItem);
+        }
+      }
+    ),
+    /* @__PURE__ */ l(f, { ref: p, className: r["preset-list"], height: "290px", width: "100%", children: g.map((e, t) => /* @__PURE__ */ l(
+      I,
+      {
+        className: r["preset-item"],
+        "data-selected": n != null && e.label === n.label,
+        "data-highlighted": t === a,
+        onClick: () => i(e),
+        children: /* @__PURE__ */ l(_, { selectable: !1, children: e.label })
+      },
+      e.label
+    )) })
+  ] });
+}
+export {
+  C as PresetPanel
+};
+//# sourceMappingURL=preset_panel.js.map

package/dist/components/preset_panel/preset_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset_panel.js","sources":["../../../src/components/preset_panel/preset_panel.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { Input } from '@tcn/ui/inputs';\nimport { useEffect, useRef } from 'react';\nimport { type PresetItem } from '../utils.js';\nimport { PresetPanelPresenter } from './preset_panel_presenter.js';\nimport styles from './preset_panel.module.css';\n\nexport interface PresetPanelOwnProps {\n  presenter: PresetPanelPresenter;\n  selectedPreset: PresetItem | null;\n  focused: boolean;\n  onSelect: (item: PresetItem) => void;\n}\n\nexport type PresetPanelProps = PresetPanelOwnProps;\n\nexport function PresetPanel({\n  presenter,\n  selectedPreset,\n  focused,\n  onSelect,\n}: PresetPanelProps) {\n  const searchRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const search = useSignalValue(presenter.broadcasts.search);\n  const filteredItems = useSignalValue(presenter.broadcasts.filteredItems);\n  const highlightedIndex = useSignalValue(presenter.broadcasts.highlightedIndex);\n\n  useEffect(() => {\n    if (focused) {\n      searchRef.current?.focus();\n    }\n  }, [focused]);\n\n  useEffect(() => {\n    const list = listRef.current;\n    if (list == null) return;\n    const item = list.children[highlightedIndex] as HTMLElement | undefined;\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [highlightedIndex]);\n\n  return (\n    <VStack className={styles['presets-panel']} height=\"auto\">\n      <Input\n        ref={searchRef}\n        className={styles['preset-search']}\n        value={search}\n        onChange={v => presenter.setSearch(v)}\n        placeholder=\"Search quick ranges\"\n        onKeyDown={e => {\n          const result = presenter.handleKeyDown(e.key);\n          if (result.preventDefault) e.preventDefault();\n          if (result.selectedItem != null) onSelect(result.selectedItem);\n        }}\n      />\n      <VStack ref={listRef} className={styles['preset-list']} height=\"290px\" width=\"100%\">\n        {filteredItems.map((item, index) => (\n          <HStack\n            key={item.label}\n            className={styles['preset-item']}\n            data-selected={selectedPreset != null && item.label === selectedPreset.label}\n            data-highlighted={index === highlightedIndex}\n            onClick={() => onSelect(item)}\n          >\n            <BodyText selectable={false}>{item.label}</BodyText>\n          </HStack>\n        ))}\n      </VStack>\n    </VStack>\n  );\n}\n"],"names":["PresetPanel","presenter","selectedPreset","focused","onSelect","searchRef","useRef","listRef","search","useSignalValue","filteredItems","highlightedIndex","useEffect","list","VStack","styles","jsx","Input","v","result","item","index","HStack","BodyText"],"mappings":";;;;;;;AAkBO,SAASA,EAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AACF,GAAqB;AACnB,QAAMC,IAAYC,EAAyB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GAErCE,IAASC,EAAeR,EAAU,WAAW,MAAM,GACnDS,IAAgBD,EAAeR,EAAU,WAAW,aAAa,GACjEU,IAAmBF,EAAeR,EAAU,WAAW,gBAAgB;AAE7E,SAAAW,EAAU,MAAM;AACd,IAAIT,KACFE,EAAU,SAAS,MAAA;AAAA,EAEvB,GAAG,CAACF,CAAO,CAAC,GAEZS,EAAU,MAAM;AACd,UAAMC,IAAON,EAAQ;AACrB,QAAIM,KAAQ,KAAM;AAElB,IADaA,EAAK,SAASF,CAAgB,GACrC,eAAe,EAAE,OAAO,UAAA,CAAW;AAAA,EAC3C,GAAG,CAACA,CAAgB,CAAC,qBAGlBG,GAAA,EAAO,WAAWC,EAAO,eAAe,GAAG,QAAO,QACjD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKZ;AAAA,QACL,WAAWU,EAAO,eAAe;AAAA,QACjC,OAAOP;AAAA,QACP,UAAU,CAAAU,MAAKjB,EAAU,UAAUiB,CAAC;AAAA,QACpC,aAAY;AAAA,QACZ,WAAW,CAAA,MAAK;AACd,gBAAMC,IAASlB,EAAU,cAAc,EAAE,GAAG;AAC5C,UAAIkB,EAAO,kBAAgB,EAAE,eAAA,GACzBA,EAAO,gBAAgB,QAAMf,EAASe,EAAO,YAAY;AAAA,QAC/D;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEDL,GAAA,EAAO,KAAKP,GAAS,WAAWQ,EAAO,aAAa,GAAG,QAAO,SAAQ,OAAM,QAC1E,UAAAL,EAAc,IAAI,CAACU,GAAMC,MACxB,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,WAAWP,EAAO,aAAa;AAAA,QAC/B,iBAAeb,KAAkB,QAAQkB,EAAK,UAAUlB,EAAe;AAAA,QACvE,oBAAkBmB,MAAUV;AAAA,QAC5B,SAAS,MAAMP,EAASgB,CAAI;AAAA,QAE5B,UAAA,gBAAAJ,EAACO,GAAA,EAAS,YAAY,IAAQ,YAAK,MAAA,CAAM;AAAA,MAAA;AAAA,MANpCH,EAAK;AAAA,IAAA,CAQb,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/preset_panel/preset_panel_presenter.d.ts

@@ -0,0 +1,24 @@
+import { Signal, derive } from '@tcn/state';
+import { PresetItem } from '../utils.js';
+export declare class PresetPanelPresenter {
+    private readonly _items;
+    private _search;
+    private _highlightedIndex;
+    private _filteredItems;
+    readonly broadcasts: {
+        search: Signal<string>['broadcast'];
+        highlightedIndex: Signal<number>['broadcast'];
+        filteredItems: ReturnType<typeof derive<string, PresetItem[]>>['broadcast'];
+    };
+    constructor(_items: PresetItem[]);
+    setSearch(query: string): void;
+    moveHighlight(direction: 1 | -1): void;
+    getHighlightedItem(): PresetItem | null;
+    handleKeyDown(key: string): {
+        preventDefault: boolean;
+        selectedItem?: PresetItem;
+        escape?: boolean;
+    };
+    reset(): void;
+}
+//# sourceMappingURL=preset_panel_presenter.d.ts.map

package/dist/components/preset_panel/preset_panel_presenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset_panel_presenter.d.ts","sourceRoot":"","sources":["../../../src/components/preset_panel/preset_panel_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,qBAAa,oBAAoB;IAWnB,OAAO,CAAC,QAAQ,CAAC,MAAM;IAVnC,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,iBAAiB,CAAyB;IAClD,OAAO,CAAC,cAAc,CAAkD;IAExE,QAAQ,CAAC,UAAU,EAAE;QACnB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;QACpC,gBAAgB,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;QAC9C,aAAa,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;KAC7E,CAAC;gBAE2B,MAAM,EAAE,UAAU,EAAE;IAYjD,SAAS,CAAC,KAAK,EAAE,MAAM;IAKvB,aAAa,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC;IAO/B,kBAAkB,IAAI,UAAU,GAAG,IAAI;IAKvC,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG;QAC1B,cAAc,EAAE,OAAO,CAAC;QACxB,YAAY,CAAC,EAAE,UAAU,CAAC;QAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB;IAgBD,KAAK;CAIN"}

package/dist/components/preset_panel/preset_panel_presenter.js

@@ -0,0 +1,39 @@
+import { derive as h, Signal as i } from "@tcn/state";
+class n {
+  constructor(e) {
+    this._items = e, this._filteredItems = h(
+      this._search,
+      (t) => e.filter((s) => s.label.toLowerCase().includes(t.toLowerCase()))
+    ), this.broadcasts = {
+      search: this._search.broadcast,
+      highlightedIndex: this._highlightedIndex.broadcast,
+      filteredItems: this._filteredItems.broadcast
+    };
+  }
+  _search = new i("");
+  _highlightedIndex = new i(0);
+  _filteredItems;
+  broadcasts;
+  setSearch(e) {
+    this._search.set(e), this._highlightedIndex.set(0);
+  }
+  moveHighlight(e) {
+    const t = this._filteredItems.get().length;
+    if (t === 0) return;
+    const s = (this._highlightedIndex.get() + e + t) % t;
+    this._highlightedIndex.set(s);
+  }
+  getHighlightedItem() {
+    return this._filteredItems.get()[this._highlightedIndex.get()] ?? null;
+  }
+  handleKeyDown(e) {
+    return e === "ArrowDown" ? (this.moveHighlight(1), { preventDefault: !0 }) : e === "ArrowUp" ? (this.moveHighlight(-1), { preventDefault: !0 }) : e === "Enter" ? { preventDefault: !0, selectedItem: this.getHighlightedItem() ?? void 0 } : e === "Escape" ? { preventDefault: !1, escape: !0 } : { preventDefault: !1 };
+  }
+  reset() {
+    this._search.set(""), this._highlightedIndex.set(0);
+  }
+}
+export {
+  n as PresetPanelPresenter
+};
+//# sourceMappingURL=preset_panel_presenter.js.map

package/dist/components/preset_panel/preset_panel_presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset_panel_presenter.js","sources":["../../../src/components/preset_panel/preset_panel_presenter.ts"],"sourcesContent":["import { Signal, derive } from '@tcn/state';\nimport { type PresetItem } from '../utils.js';\n\nexport class PresetPanelPresenter {\n  private _search = new Signal<string>('');\n  private _highlightedIndex = new Signal<number>(0);\n  private _filteredItems: ReturnType<typeof derive<string, PresetItem[]>>;\n\n  readonly broadcasts: {\n    search: Signal<string>['broadcast'];\n    highlightedIndex: Signal<number>['broadcast'];\n    filteredItems: ReturnType<typeof derive<string, PresetItem[]>>['broadcast'];\n  };\n\n  constructor(private readonly _items: PresetItem[]) {\n    this._filteredItems = derive(this._search, search =>\n      _items.filter(item => item.label.toLowerCase().includes(search.toLowerCase()))\n    );\n\n    this.broadcasts = {\n      search: this._search.broadcast,\n      highlightedIndex: this._highlightedIndex.broadcast,\n      filteredItems: this._filteredItems.broadcast,\n    };\n  }\n\n  setSearch(query: string) {\n    this._search.set(query);\n    this._highlightedIndex.set(0);\n  }\n\n  moveHighlight(direction: 1 | -1) {\n    const count = this._filteredItems.get().length;\n    if (count === 0) return;\n    const next = (this._highlightedIndex.get() + direction + count) % count;\n    this._highlightedIndex.set(next);\n  }\n\n  getHighlightedItem(): PresetItem | null {\n    const items = this._filteredItems.get();\n    return items[this._highlightedIndex.get()] ?? null;\n  }\n\n  handleKeyDown(key: string): {\n    preventDefault: boolean;\n    selectedItem?: PresetItem;\n    escape?: boolean;\n  } {\n    if (key === 'ArrowDown') {\n      this.moveHighlight(1);\n      return { preventDefault: true };\n    } else if (key === 'ArrowUp') {\n      this.moveHighlight(-1);\n      return { preventDefault: true };\n    } else if (key === 'Enter') {\n      const item = this.getHighlightedItem();\n      return { preventDefault: true, selectedItem: item ?? undefined };\n    } else if (key === 'Escape') {\n      return { preventDefault: false, escape: true };\n    }\n    return { preventDefault: false };\n  }\n\n  reset() {\n    this._search.set('');\n    this._highlightedIndex.set(0);\n  }\n}\n"],"names":["PresetPanelPresenter","_items","derive","search","item","Signal","query","direction","count","next","key"],"mappings":";AAGO,MAAMA,EAAqB;AAAA,EAWhC,YAA6BC,GAAsB;AAAtB,SAAA,SAAAA,GAC3B,KAAK,iBAAiBC;AAAA,MAAO,KAAK;AAAA,MAAS,CAAAC,MACzCF,EAAO,OAAO,CAAAG,MAAQA,EAAK,MAAM,YAAA,EAAc,SAASD,EAAO,YAAA,CAAa,CAAC;AAAA,IAAA,GAG/E,KAAK,aAAa;AAAA,MAChB,QAAQ,KAAK,QAAQ;AAAA,MACrB,kBAAkB,KAAK,kBAAkB;AAAA,MACzC,eAAe,KAAK,eAAe;AAAA,IAAA;AAAA,EAEvC;AAAA,EApBQ,UAAU,IAAIE,EAAe,EAAE;AAAA,EAC/B,oBAAoB,IAAIA,EAAe,CAAC;AAAA,EACxC;AAAA,EAEC;AAAA,EAkBT,UAAUC,GAAe;AACvB,SAAK,QAAQ,IAAIA,CAAK,GACtB,KAAK,kBAAkB,IAAI,CAAC;AAAA,EAC9B;AAAA,EAEA,cAAcC,GAAmB;AAC/B,UAAMC,IAAQ,KAAK,eAAe,IAAA,EAAM;AACxC,QAAIA,MAAU,EAAG;AACjB,UAAMC,KAAQ,KAAK,kBAAkB,QAAQF,IAAYC,KAASA;AAClE,SAAK,kBAAkB,IAAIC,CAAI;AAAA,EACjC;AAAA,EAEA,qBAAwC;AAEtC,WADc,KAAK,eAAe,IAAA,EACrB,KAAK,kBAAkB,IAAA,CAAK,KAAK;AAAA,EAChD;AAAA,EAEA,cAAcC,GAIZ;AACA,WAAIA,MAAQ,eACV,KAAK,cAAc,CAAC,GACb,EAAE,gBAAgB,GAAA,KAChBA,MAAQ,aACjB,KAAK,cAAc,EAAE,GACd,EAAE,gBAAgB,GAAA,KAChBA,MAAQ,UAEV,EAAE,gBAAgB,IAAM,cADlB,KAAK,mBAAA,KACmC,OAAA,IAC5CA,MAAQ,WACV,EAAE,gBAAgB,IAAO,QAAQ,GAAA,IAEnC,EAAE,gBAAgB,GAAA;AAAA,EAC3B;AAAA,EAEA,QAAQ;AACN,SAAK,QAAQ,IAAI,EAAE,GACnB,KAAK,kBAAkB,IAAI,CAAC;AAAA,EAC9B;AACF;"}

package/dist/components/time_selector/time_selector.d.ts

@@ -0,0 +1,12 @@
+export interface TimeSelectorOwnProps {
+    onChange?: (start: Date, end: Date) => void;
+    onTimezoneChange?: (timezone: string) => void;
+    startDateMin?: Date | null;
+    startDateMax?: Date | null;
+    endDateMin?: Date | null;
+    endDateMax?: Date | null;
+    timezones?: string[];
+}
+export type TimeSelectorProps = TimeSelectorOwnProps;
+export declare function TimeSelector({ onChange, onTimezoneChange, startDateMin, startDateMax, endDateMin, endDateMax, timezones, }: TimeSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=time_selector.d.ts.map

package/dist/components/time_selector/time_selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time_selector.d.ts","sourceRoot":"","sources":["../../../src/components/time_selector/time_selector.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC5C,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAErD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,2CAoEnB"}

package/dist/components/time_selector/time_selector.js

@@ -0,0 +1,105 @@
+import { jsxs as r, Fragment as v, jsx as t } from "react/jsx-runtime";
+import { useSignalValue as o } from "@tcn/state";
+import { ElementPopper as S } from "@tcn/ui/overlay";
+import { HStack as p, VStack as _ } from "@tcn/ui/stacks";
+import { BodyText as m } from "@tcn/ui/typography";
+import { useState as x, useRef as A } from "react";
+import { TimeSelectorPresenter as R } from "./time_selector_presenter.js";
+import { PresetPanel as T } from "../preset_panel/preset_panel.js";
+import { DateRangePanel as k } from "../date_range_panel/date_range_panel.js";
+import { TimezoneFooter as w } from "../timezone_footer/timezone_footer.js";
+import '../../time_selector.css';const z = "_trigger-abbreviation_8e22c20", F = "_trigger_1096f0b", V = "_popper-content_9403264", a = { "trigger-abbreviation": z, trigger: F, "popper-content": V };
+function q({
+  onChange: l,
+  onTimezoneChange: d,
+  startDateMin: g,
+  startDateMax: f,
+  endDateMin: b,
+  endDateMax: h,
+  timezones: u
+}) {
+  const [e] = x(() => new R()), c = A(null), n = o(e.broadcasts.isOpen), s = o(e.broadcasts.selectedPreset), P = o(e.broadcasts.displayValue), y = o(
+    e.timezoneFooterPresenter.broadcasts.timezoneAbbreviation
+  );
+  return /* @__PURE__ */ r(v, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: c,
+        className: a.trigger,
+        onClick: () => e.toggleOpen(),
+        children: /* @__PURE__ */ r(p, { height: "auto", width: "auto", gap: "4px", children: [
+          /* @__PURE__ */ r(m, { selectable: !1, children: [
+            P,
+            ","
+          ] }),
+          /* @__PURE__ */ t(
+            m,
+            {
+              selectable: !1,
+              style: { fontWeight: 700 },
+              className: a["trigger-abbreviation"],
+              children: y
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ t(
+      S,
+      {
+        anchorElement: c,
+        open: n,
+        onDismissal: () => e.close(),
+        dismissals: [],
+        children: /* @__PURE__ */ r(
+          _,
+          {
+            className: a["popper-content"],
+            height: "auto",
+            onKeyDown: (i) => {
+              i.key === "Escape" && e.close();
+            },
+            children: [
+              /* @__PURE__ */ r(p, { height: "auto", width: "100%", vAlign: "start", children: [
+                /* @__PURE__ */ t(
+                  k,
+                  {
+                    presenter: e.dateRangePanelPresenter,
+                    focused: n && s == null,
+                    startDateMin: g,
+                    startDateMax: f,
+                    endDateMin: b,
+                    endDateMax: h,
+                    onApply: () => e.applyTimeRange(l)
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  T,
+                  {
+                    presenter: e.presetPanelPresenter,
+                    selectedPreset: s,
+                    focused: n && s != null,
+                    onSelect: (i) => e.handlePresetSelect(i, l)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t(
+                w,
+                {
+                  presenter: e.timezoneFooterPresenter,
+                  timezones: u,
+                  onTimezoneChange: d
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  q as TimeSelector
+};
+//# sourceMappingURL=time_selector.js.map

package/dist/components/time_selector/time_selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time_selector.js","sources":["../../../src/components/time_selector/time_selector.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { ElementPopper } from '@tcn/ui/overlay';\nimport { HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { useRef, useState } from 'react';\nimport { TimeSelectorPresenter } from './time_selector_presenter.js';\nimport { PresetPanel } from '../preset_panel/preset_panel.js';\nimport { DateRangePanel } from '../date_range_panel/date_range_panel.js';\nimport { TimezoneFooter } from '../timezone_footer/timezone_footer.js';\nimport styles from './time_selector.module.css';\n\nexport interface TimeSelectorOwnProps {\n  onChange?: (start: Date, end: Date) => void;\n  onTimezoneChange?: (timezone: string) => void;\n  startDateMin?: Date | null;\n  startDateMax?: Date | null;\n  endDateMin?: Date | null;\n  endDateMax?: Date | null;\n  timezones?: string[];\n}\n\nexport type TimeSelectorProps = TimeSelectorOwnProps;\n\nexport function TimeSelector({\n  onChange,\n  onTimezoneChange,\n  startDateMin,\n  startDateMax,\n  endDateMin,\n  endDateMax,\n  timezones,\n}: TimeSelectorProps) {\n  const [presenter] = useState(() => new TimeSelectorPresenter());\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  const isOpen = useSignalValue(presenter.broadcasts.isOpen);\n  const selectedPreset = useSignalValue(presenter.broadcasts.selectedPreset);\n  const displayValue = useSignalValue(presenter.broadcasts.displayValue);\n  const displayAbbreviation = useSignalValue(\n    presenter.timezoneFooterPresenter.broadcasts.timezoneAbbreviation\n  );\n\n  return (\n    <>\n      <div\n        ref={anchorRef}\n        className={styles.trigger}\n        onClick={() => presenter.toggleOpen()}\n      >\n        <HStack height=\"auto\" width=\"auto\" gap=\"4px\">\n          <BodyText selectable={false}>{displayValue},</BodyText>\n          <BodyText\n            selectable={false}\n            style={{ fontWeight: 700 }}\n            className={styles['trigger-abbreviation']}\n          >\n            {displayAbbreviation}\n          </BodyText>\n        </HStack>\n      </div>\n      <ElementPopper\n        anchorElement={anchorRef}\n        open={isOpen}\n        onDismissal={() => presenter.close()}\n        dismissals={[]}\n      >\n        <VStack\n          className={styles['popper-content']}\n          height=\"auto\"\n          onKeyDown={e => {\n            if (e.key === 'Escape') presenter.close();\n          }}\n        >\n          <HStack height=\"auto\" width=\"100%\" vAlign=\"start\">\n            <DateRangePanel\n              presenter={presenter.dateRangePanelPresenter}\n              focused={isOpen && selectedPreset == null}\n              startDateMin={startDateMin}\n              startDateMax={startDateMax}\n              endDateMin={endDateMin}\n              endDateMax={endDateMax}\n              onApply={() => presenter.applyTimeRange(onChange)}\n            />\n            <PresetPanel\n              presenter={presenter.presetPanelPresenter}\n              selectedPreset={selectedPreset}\n              focused={isOpen && selectedPreset != null}\n              onSelect={item => presenter.handlePresetSelect(item, onChange)}\n            />\n          </HStack>\n          <TimezoneFooter\n            presenter={presenter.timezoneFooterPresenter}\n            timezones={timezones}\n            onTimezoneChange={onTimezoneChange}\n          />\n        </VStack>\n      </ElementPopper>\n    </>\n  );\n}\n"],"names":["TimeSelector","onChange","onTimezoneChange","startDateMin","startDateMax","endDateMin","endDateMax","timezones","presenter","useState","TimeSelectorPresenter","anchorRef","useRef","isOpen","useSignalValue","selectedPreset","displayValue","displayAbbreviation","jsxs","Fragment","jsx","styles","HStack","BodyText","ElementPopper","VStack","e","DateRangePanel","PresetPanel","item","TimezoneFooter"],"mappings":";;;;;;;;;;;AAuBO,SAASA,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAM,CAACC,CAAS,IAAIC,EAAS,MAAM,IAAIC,GAAuB,GACxDC,IAAYC,EAAuB,IAAI,GAEvCC,IAASC,EAAeN,EAAU,WAAW,MAAM,GACnDO,IAAiBD,EAAeN,EAAU,WAAW,cAAc,GACnEQ,IAAeF,EAAeN,EAAU,WAAW,YAAY,GAC/DS,IAAsBH;AAAA,IAC1BN,EAAU,wBAAwB,WAAW;AAAA,EAAA;AAG/C,SACE,gBAAAU,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,WAAWU,EAAO;AAAA,QAClB,SAAS,MAAMb,EAAU,WAAA;AAAA,QAEzB,4BAACc,GAAA,EAAO,QAAO,QAAO,OAAM,QAAO,KAAI,OACrC,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAA,EAAS,YAAY,IAAQ,UAAA;AAAA,YAAAP;AAAA,YAAa;AAAA,UAAA,GAAC;AAAA,UAC5C,gBAAAI;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,OAAO,EAAE,YAAY,IAAA;AAAA,cACrB,WAAWF,EAAO,sBAAsB;AAAA,cAEvC,UAAAJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,eAAeb;AAAA,QACf,MAAME;AAAA,QACN,aAAa,MAAML,EAAU,MAAA;AAAA,QAC7B,YAAY,CAAA;AAAA,QAEZ,UAAA,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,WAAWJ,EAAO,gBAAgB;AAAA,YAClC,QAAO;AAAA,YACP,WAAW,CAAAK,MAAK;AACd,cAAIA,EAAE,QAAQ,YAAUlB,EAAU,MAAA;AAAA,YACpC;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAU,EAACI,KAAO,QAAO,QAAO,OAAM,QAAO,QAAO,SACxC,UAAA;AAAA,gBAAA,gBAAAF;AAAA,kBAACO;AAAA,kBAAA;AAAA,oBACC,WAAWnB,EAAU;AAAA,oBACrB,SAASK,KAAUE,KAAkB;AAAA,oBACrC,cAAAZ;AAAA,oBACA,cAAAC;AAAA,oBACA,YAAAC;AAAA,oBACA,YAAAC;AAAA,oBACA,SAAS,MAAME,EAAU,eAAeP,CAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAElD,gBAAAmB;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,WAAWpB,EAAU;AAAA,oBACrB,gBAAAO;AAAA,oBACA,SAASF,KAAUE,KAAkB;AAAA,oBACrC,UAAU,CAAAc,MAAQrB,EAAU,mBAAmBqB,GAAM5B,CAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC/D,GACF;AAAA,cACA,gBAAAmB;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBACC,WAAWtB,EAAU;AAAA,kBACrB,WAAAD;AAAA,kBACA,kBAAAL;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/time_selector/time_selector_presenter.d.ts

@@ -0,0 +1,28 @@
+import { Signal } from '@tcn/state';
+import { PresetItem } from '../utils.js';
+import { PresetPanelPresenter } from '../preset_panel/preset_panel_presenter.js';
+import { DateRangePanelPresenter } from '../date_range_panel/date_range_panel_presenter.js';
+import { TimezoneFooterPresenter } from '../timezone_footer/timezone_footer_presenter.js';
+export type { PresetItem };
+export declare const PRESET_ITEMS: PresetItem[];
+export declare class TimeSelectorPresenter {
+    private _isOpen;
+    private _selectedPreset;
+    private _displayValue;
+    private _startDate;
+    private _endDate;
+    readonly presetPanelPresenter: PresetPanelPresenter;
+    readonly dateRangePanelPresenter: DateRangePanelPresenter;
+    readonly timezoneFooterPresenter: TimezoneFooterPresenter;
+    readonly broadcasts: {
+        isOpen: Signal<boolean>['broadcast'];
+        selectedPreset: Signal<PresetItem | null>['broadcast'];
+        displayValue: Signal<string>['broadcast'];
+    };
+    constructor();
+    handlePresetSelect(item: PresetItem, onChange?: (start: Date, end: Date) => void): void;
+    applyTimeRange(onChange?: (start: Date, end: Date) => void): void;
+    toggleOpen(): void;
+    close(): void;
+}
+//# sourceMappingURL=time_selector_presenter.d.ts.map

package/dist/components/time_selector/time_selector_presenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time_selector_presenter.d.ts","sourceRoot":"","sources":["../../../src/components/time_selector/time_selector_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,uBAAuB,EAAE,MAAM,mDAAmD,CAAC;AAC5F,OAAO,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AAE1F,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,eAAO,MAAM,YAAY,EAAE,UAAU,EAYpC,CAAC;AAEF,qBAAa,qBAAqB;IAChC,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,eAAe,CAAkD;IACzE,OAAO,CAAC,aAAa,CAAiB;IACtC,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,QAAQ,CAAsB;IAEtC,QAAQ,CAAC,oBAAoB,EAAE,oBAAoB,CAAC;IACpD,QAAQ,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;IAC1D,QAAQ,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;IAE1D,QAAQ,CAAC,UAAU,EAAE;QACnB,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;QACrC,cAAc,EAAE,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;QACvD,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;KAC3C,CAAC;;IA4BF,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI;IAchF,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI;IAkB1D,UAAU;IAQV,KAAK;CAIN"}

package/dist/components/time_selector/time_selector_presenter.js

@@ -0,0 +1,66 @@
+import { Signal as n } from "@tcn/state";
+import { datesFromPreset as o, shiftForDisplay as i, unshiftFromDisplay as h, formatDate as m } from "../utils.js";
+import { PresetPanelPresenter as c } from "../preset_panel/preset_panel_presenter.js";
+import { DateRangePanelPresenter as p } from "../date_range_panel/date_range_panel_presenter.js";
+import { TimezoneFooterPresenter as P } from "../timezone_footer/timezone_footer_presenter.js";
+const l = [
+  { label: "Last 5 mins", minutes: 5 },
+  { label: "Last 15 mins", minutes: 15 },
+  { label: "Last 30 mins", minutes: 30 },
+  { label: "Last 1 hour", minutes: 60 },
+  { label: "Last 3 hours", minutes: 180 },
+  { label: "Last 6 hours", minutes: 360 },
+  { label: "Last 12 hours", minutes: 720 },
+  { label: "Last 24 hours", minutes: 1440 },
+  { label: "Last 2 days", minutes: 2880 },
+  { label: "Last 7 days", minutes: 10080 },
+  { label: "Last 30 days", minutes: 43200 }
+];
+class g {
+  _isOpen = new n(!1);
+  _selectedPreset = new n(l[0]);
+  _displayValue;
+  _startDate;
+  _endDate;
+  presetPanelPresenter;
+  dateRangePanelPresenter;
+  timezoneFooterPresenter;
+  broadcasts;
+  constructor() {
+    const e = Intl.DateTimeFormat().resolvedOptions().timeZone, { start: s, end: t } = o(l[0]);
+    this._startDate = new n(i(s, e)), this._endDate = new n(i(t, e)), this.presetPanelPresenter = new c(l), this.dateRangePanelPresenter = new p(
+      this._startDate,
+      this._endDate
+    ), this.timezoneFooterPresenter = new P(
+      this._startDate,
+      this._endDate
+    ), this._displayValue = new n(l[0].label), this.broadcasts = {
+      isOpen: this._isOpen.broadcast,
+      selectedPreset: this._selectedPreset.broadcast,
+      displayValue: this._displayValue.broadcast
+    };
+  }
+  handlePresetSelect(e, s) {
+    this._selectedPreset.set(e);
+    const { start: t, end: a } = o(e), r = this.timezoneFooterPresenter.getTimezone();
+    this._startDate.set(i(t, r)), this._endDate.set(i(a, r)), this._displayValue.set(e.label), s?.(t, a), this.close();
+  }
+  applyTimeRange(e) {
+    const s = this._startDate.get(), t = this._endDate.get();
+    if (s != null && t != null) {
+      const a = this.timezoneFooterPresenter.getTimezone(), r = h(s, a), d = h(t, a);
+      this._selectedPreset.set(null), this._displayValue.set(`${m(s)} to ${m(t)}`), e?.(r, d), this.close();
+    }
+  }
+  toggleOpen() {
+    this._isOpen.get() ? this.close() : this._isOpen.set(!0);
+  }
+  close() {
+    this._isOpen.set(!1), this.presetPanelPresenter.reset();
+  }
+}
+export {
+  l as PRESET_ITEMS,
+  g as TimeSelectorPresenter
+};
+//# sourceMappingURL=time_selector_presenter.js.map

package/dist/components/time_selector/time_selector_presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time_selector_presenter.js","sources":["../../../src/components/time_selector/time_selector_presenter.ts"],"sourcesContent":["import { Signal } from '@tcn/state';\nimport {\n  formatDate,\n  datesFromPreset,\n  shiftForDisplay,\n  unshiftFromDisplay,\n  type PresetItem,\n} from '../utils.js';\nimport { PresetPanelPresenter } from '../preset_panel/preset_panel_presenter.js';\nimport { DateRangePanelPresenter } from '../date_range_panel/date_range_panel_presenter.js';\nimport { TimezoneFooterPresenter } from '../timezone_footer/timezone_footer_presenter.js';\n\nexport type { PresetItem };\n\nexport const PRESET_ITEMS: PresetItem[] = [\n  { label: 'Last 5 mins', minutes: 5 },\n  { label: 'Last 15 mins', minutes: 15 },\n  { label: 'Last 30 mins', minutes: 30 },\n  { label: 'Last 1 hour', minutes: 60 },\n  { label: 'Last 3 hours', minutes: 180 },\n  { label: 'Last 6 hours', minutes: 360 },\n  { label: 'Last 12 hours', minutes: 720 },\n  { label: 'Last 24 hours', minutes: 1440 },\n  { label: 'Last 2 days', minutes: 2880 },\n  { label: 'Last 7 days', minutes: 10080 },\n  { label: 'Last 30 days', minutes: 43200 },\n];\n\nexport class TimeSelectorPresenter {\n  private _isOpen = new Signal<boolean>(false);\n  private _selectedPreset = new Signal<PresetItem | null>(PRESET_ITEMS[0]);\n  private _displayValue: Signal<string>;\n  private _startDate: Signal<Date | null>;\n  private _endDate: Signal<Date | null>;\n\n  readonly presetPanelPresenter: PresetPanelPresenter;\n  readonly dateRangePanelPresenter: DateRangePanelPresenter;\n  readonly timezoneFooterPresenter: TimezoneFooterPresenter;\n\n  readonly broadcasts: {\n    isOpen: Signal<boolean>['broadcast'];\n    selectedPreset: Signal<PresetItem | null>['broadcast'];\n    displayValue: Signal<string>['broadcast'];\n  };\n\n  constructor() {\n    const browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    const { start, end } = datesFromPreset(PRESET_ITEMS[0]);\n\n    this._startDate = new Signal<Date | null>(shiftForDisplay(start, browserTz));\n    this._endDate = new Signal<Date | null>(shiftForDisplay(end, browserTz));\n\n    this.presetPanelPresenter = new PresetPanelPresenter(PRESET_ITEMS);\n    this.dateRangePanelPresenter = new DateRangePanelPresenter(\n      this._startDate,\n      this._endDate\n    );\n    this.timezoneFooterPresenter = new TimezoneFooterPresenter(\n      this._startDate,\n      this._endDate\n    );\n\n    this._displayValue = new Signal<string>(PRESET_ITEMS[0].label);\n\n    this.broadcasts = {\n      isOpen: this._isOpen.broadcast,\n      selectedPreset: this._selectedPreset.broadcast,\n      displayValue: this._displayValue.broadcast,\n    };\n  }\n\n  handlePresetSelect(item: PresetItem, onChange?: (start: Date, end: Date) => void) {\n    this._selectedPreset.set(item);\n\n    const { start, end } = datesFromPreset(item);\n    const tz = this.timezoneFooterPresenter.getTimezone();\n\n    this._startDate.set(shiftForDisplay(start, tz));\n    this._endDate.set(shiftForDisplay(end, tz));\n\n    this._displayValue.set(item.label);\n    onChange?.(start, end);\n    this.close();\n  }\n\n  applyTimeRange(onChange?: (start: Date, end: Date) => void) {\n    const displayStart = this._startDate.get();\n    const displayEnd = this._endDate.get();\n\n    if (displayStart != null && displayEnd != null) {\n      const tz = this.timezoneFooterPresenter.getTimezone();\n      const realStart = unshiftFromDisplay(displayStart, tz);\n      const realEnd = unshiftFromDisplay(displayEnd, tz);\n\n      this._selectedPreset.set(null);\n      this._displayValue.set(`${formatDate(displayStart)} to ${formatDate(displayEnd)}`);\n\n      onChange?.(realStart, realEnd);\n\n      this.close();\n    }\n  }\n\n  toggleOpen() {\n    if (this._isOpen.get()) {\n      this.close();\n    } else {\n      this._isOpen.set(true);\n    }\n  }\n\n  close() {\n    this._isOpen.set(false);\n    this.presetPanelPresenter.reset();\n  }\n}\n"],"names":["PRESET_ITEMS","TimeSelectorPresenter","Signal","browserTz","start","end","datesFromPreset","shiftForDisplay","PresetPanelPresenter","DateRangePanelPresenter","TimezoneFooterPresenter","item","onChange","tz","displayStart","displayEnd","realStart","unshiftFromDisplay","realEnd","formatDate"],"mappings":";;;;;AAcO,MAAMA,IAA6B;AAAA,EACxC,EAAE,OAAO,eAAe,SAAS,EAAA;AAAA,EACjC,EAAE,OAAO,gBAAgB,SAAS,GAAA;AAAA,EAClC,EAAE,OAAO,gBAAgB,SAAS,GAAA;AAAA,EAClC,EAAE,OAAO,eAAe,SAAS,GAAA;AAAA,EACjC,EAAE,OAAO,gBAAgB,SAAS,IAAA;AAAA,EAClC,EAAE,OAAO,gBAAgB,SAAS,IAAA;AAAA,EAClC,EAAE,OAAO,iBAAiB,SAAS,IAAA;AAAA,EACnC,EAAE,OAAO,iBAAiB,SAAS,KAAA;AAAA,EACnC,EAAE,OAAO,eAAe,SAAS,KAAA;AAAA,EACjC,EAAE,OAAO,eAAe,SAAS,MAAA;AAAA,EACjC,EAAE,OAAO,gBAAgB,SAAS,MAAA;AACpC;AAEO,MAAMC,EAAsB;AAAA,EACzB,UAAU,IAAIC,EAAgB,EAAK;AAAA,EACnC,kBAAkB,IAAIA,EAA0BF,EAAa,CAAC,CAAC;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EAEC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAMT,cAAc;AACZ,UAAMG,IAAY,KAAK,eAAA,EAAiB,kBAAkB,UACpD,EAAE,OAAAC,GAAO,KAAAC,EAAA,IAAQC,EAAgBN,EAAa,CAAC,CAAC;AAEtD,SAAK,aAAa,IAAIE,EAAoBK,EAAgBH,GAAOD,CAAS,CAAC,GAC3E,KAAK,WAAW,IAAID,EAAoBK,EAAgBF,GAAKF,CAAS,CAAC,GAEvE,KAAK,uBAAuB,IAAIK,EAAqBR,CAAY,GACjE,KAAK,0BAA0B,IAAIS;AAAA,MACjC,KAAK;AAAA,MACL,KAAK;AAAA,IAAA,GAEP,KAAK,0BAA0B,IAAIC;AAAA,MACjC,KAAK;AAAA,MACL,KAAK;AAAA,IAAA,GAGP,KAAK,gBAAgB,IAAIR,EAAeF,EAAa,CAAC,EAAE,KAAK,GAE7D,KAAK,aAAa;AAAA,MAChB,QAAQ,KAAK,QAAQ;AAAA,MACrB,gBAAgB,KAAK,gBAAgB;AAAA,MACrC,cAAc,KAAK,cAAc;AAAA,IAAA;AAAA,EAErC;AAAA,EAEA,mBAAmBW,GAAkBC,GAA6C;AAChF,SAAK,gBAAgB,IAAID,CAAI;AAE7B,UAAM,EAAE,OAAAP,GAAO,KAAAC,MAAQC,EAAgBK,CAAI,GACrCE,IAAK,KAAK,wBAAwB,YAAA;AAExC,SAAK,WAAW,IAAIN,EAAgBH,GAAOS,CAAE,CAAC,GAC9C,KAAK,SAAS,IAAIN,EAAgBF,GAAKQ,CAAE,CAAC,GAE1C,KAAK,cAAc,IAAIF,EAAK,KAAK,GACjCC,IAAWR,GAAOC,CAAG,GACrB,KAAK,MAAA;AAAA,EACP;AAAA,EAEA,eAAeO,GAA6C;AAC1D,UAAME,IAAe,KAAK,WAAW,IAAA,GAC/BC,IAAa,KAAK,SAAS,IAAA;AAEjC,QAAID,KAAgB,QAAQC,KAAc,MAAM;AAC9C,YAAMF,IAAK,KAAK,wBAAwB,YAAA,GAClCG,IAAYC,EAAmBH,GAAcD,CAAE,GAC/CK,IAAUD,EAAmBF,GAAYF,CAAE;AAEjD,WAAK,gBAAgB,IAAI,IAAI,GAC7B,KAAK,cAAc,IAAI,GAAGM,EAAWL,CAAY,CAAC,OAAOK,EAAWJ,CAAU,CAAC,EAAE,GAEjFH,IAAWI,GAAWE,CAAO,GAE7B,KAAK,MAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEA,aAAa;AACX,IAAI,KAAK,QAAQ,QACf,KAAK,MAAA,IAEL,KAAK,QAAQ,IAAI,EAAI;AAAA,EAEzB;AAAA,EAEA,QAAQ;AACN,SAAK,QAAQ,IAAI,EAAK,GACtB,KAAK,qBAAqB,MAAA;AAAA,EAC5B;AACF;"}

package/dist/components/timezone_footer/timezone_footer.d.ts

@@ -0,0 +1,9 @@
+import { TimezoneFooterPresenter } from './timezone_footer_presenter.js';
+export interface TimezoneFooterOwnProps {
+    presenter: TimezoneFooterPresenter;
+    timezones?: string[];
+    onTimezoneChange?: (tz: string) => void;
+}
+export type TimezoneFooterProps = TimezoneFooterOwnProps;
+export declare function TimezoneFooter({ presenter, timezones, onTimezoneChange, }: TimezoneFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=timezone_footer.d.ts.map

package/dist/components/timezone_footer/timezone_footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone_footer.d.ts","sourceRoot":"","sources":["../../../src/components/timezone_footer/timezone_footer.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAUzE,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,uBAAuB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAC;AAEzD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,SAAS,EACT,gBAAgB,GACjB,EAAE,mBAAmB,2CAyErB"}