@tcn/ui-time-selector 1.0.0

package/dist/components/timezone_footer/timezone_footer.js

@@ -0,0 +1,78 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useSignalValue as i } from "@tcn/state";
+import { VStack as _, HStack as u, Spacer as b } from "@tcn/ui/stacks";
+import { BodyText as c } from "@tcn/ui/typography";
+import { Select as v, Option as S } from "@tcn/ui/inputs";
+import { Button as w } from "@tcn/ui/actions";
+import { useMemo as y } from "react";
+import { ChevronDownIcon as T } from "@tcn/icons/chevron_down_icon.js";
+import { ChevronUpIcon as C } from "@tcn/icons/chevron_up_icon.js";
+import { getTimezoneOffsetMinutes as N, formatUTCOffset as x, getTimezoneAbbreviation as M } from "../utils.js";
+import '../../timezone_footer.css';const k = "_utc-footer_5c1fa0d", A = "_utc-label_0f42c44", B = "_utc-offset_8a037cb", I = "_timezone-settings-button_cd0743e", L = "_timezone-select_0f93d05", V = "_timezone-option-offset_89f4289", s = { "utc-footer": k, "utc-label": A, "utc-offset": B, "timezone-settings-button": I, "timezone-select": L, "timezone-option-offset": V };
+function K({
+  presenter: o,
+  timezones: m,
+  onTimezoneChange: d
+}) {
+  const h = i(o.broadcasts.timezone), f = i(o.broadcasts.isSelectOpen), z = i(o.broadcasts.timezoneAbbreviation), p = i(o.broadcasts.timezoneLabel), g = i(o.broadcasts.utcOffset), O = y(() => {
+    const e = m ?? Intl.supportedValuesOf("timeZone"), r = /* @__PURE__ */ new Date();
+    return e.map((n) => {
+      const a = N(n, r);
+      return {
+        iana: n,
+        abbreviation: M(n, r),
+        utcOffset: x(a),
+        offsetMinutes: a
+      };
+    }).sort((n, a) => a.offsetMinutes - n.offsetMinutes);
+  }, [m]);
+  return /* @__PURE__ */ l(_, { className: s["utc-footer"], height: "auto", width: "100%", children: [
+    /* @__PURE__ */ l(u, { height: "auto", width: "100%", children: [
+      /* @__PURE__ */ t(c, { className: s["utc-label"], selectable: !1, size: "md", children: p }),
+      /* @__PURE__ */ t(b, {}),
+      /* @__PURE__ */ t(c, { selectable: !1, size: "md", className: s["utc-offset"], children: g }),
+      /* @__PURE__ */ l(
+        w,
+        {
+          size: "sm",
+          hierarchy: "secondary",
+          className: s["timezone-settings-button"],
+          onClick: () => o.toggleSelect(),
+          children: [
+            "Change time settings",
+            f ? /* @__PURE__ */ t(C, { size: "sm" }) : /* @__PURE__ */ t(T, { size: "sm" })
+          ]
+        }
+      )
+    ] }),
+    f && /* @__PURE__ */ t(
+      v,
+      {
+        value: h,
+        onChange: (e) => o.setTimezone(e, d),
+        hierarchy: "secondary",
+        className: s["timezone-select"],
+        size: "sm",
+        children: O.map((e) => /* @__PURE__ */ t(
+          S,
+          {
+            value: e.iana,
+            label: z,
+            keywords: [e.iana, e.abbreviation],
+            children: /* @__PURE__ */ l(u, { height: "auto", width: "100%", gap: "8px", children: [
+              /* @__PURE__ */ t(c, { selectable: !1, children: e.iana }),
+              /* @__PURE__ */ t(b, {}),
+              /* @__PURE__ */ t(c, { selectable: !1, children: e.abbreviation }),
+              /* @__PURE__ */ t(c, { className: s["timezone-option-offset"], selectable: !1, children: e.utcOffset })
+            ] })
+          },
+          e.iana
+        ))
+      }
+    )
+  ] });
+}
+export {
+  K as TimezoneFooter
+};
+//# sourceMappingURL=timezone_footer.js.map

package/dist/components/timezone_footer/timezone_footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone_footer.js","sources":["../../../src/components/timezone_footer/timezone_footer.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { HStack, Spacer, VStack } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { Option, Select } from '@tcn/ui/inputs';\nimport { Button } from '@tcn/ui/actions';\nimport { useMemo } from 'react';\nimport { ChevronDownIcon } from '@tcn/icons/chevron_down_icon.js';\nimport { ChevronUpIcon } from '@tcn/icons/chevron_up_icon.js';\nimport {\n  formatUTCOffset,\n  getTimezoneAbbreviation,\n  getTimezoneOffsetMinutes,\n} from '../utils.js';\nimport { TimezoneFooterPresenter } from './timezone_footer_presenter.js';\nimport styles from './timezone_footer.module.css';\n\ninterface TimezoneOption {\n  iana: string;\n  abbreviation: string;\n  utcOffset: string;\n  offsetMinutes: number;\n}\n\nexport interface TimezoneFooterOwnProps {\n  presenter: TimezoneFooterPresenter;\n  timezones?: string[];\n  onTimezoneChange?: (tz: string) => void;\n}\n\nexport type TimezoneFooterProps = TimezoneFooterOwnProps;\n\nexport function TimezoneFooter({\n  presenter,\n  timezones,\n  onTimezoneChange,\n}: TimezoneFooterProps) {\n  const selectedTimezone = useSignalValue(presenter.broadcasts.timezone);\n  const isSelectOpen = useSignalValue(presenter.broadcasts.isSelectOpen);\n  const timezoneAbbreviation = useSignalValue(presenter.broadcasts.timezoneAbbreviation);\n  const timezoneLabel = useSignalValue(presenter.broadcasts.timezoneLabel);\n  const utcOffset = useSignalValue(presenter.broadcasts.utcOffset);\n\n  const timezoneOptions = useMemo<TimezoneOption[]>(() => {\n    const ianas: string[] =\n      timezones ?? ((Intl as any).supportedValuesOf('timeZone') as string[]);\n    const now = new Date();\n    return ianas\n      .map(iana => {\n        const offsetMinutes = getTimezoneOffsetMinutes(iana, now);\n        return {\n          iana,\n          abbreviation: getTimezoneAbbreviation(iana, now),\n          utcOffset: formatUTCOffset(offsetMinutes),\n          offsetMinutes,\n        };\n      })\n      .sort((a, b) => b.offsetMinutes - a.offsetMinutes);\n  }, [timezones]);\n\n  return (\n    <VStack className={styles['utc-footer']} height=\"auto\" width=\"100%\">\n      <HStack height=\"auto\" width=\"100%\">\n        <BodyText className={styles['utc-label']} selectable={false} size=\"md\">\n          {timezoneLabel}\n        </BodyText>\n        <Spacer />\n        <BodyText selectable={false} size=\"md\" className={styles['utc-offset']}>\n          {utcOffset}\n        </BodyText>\n        <Button\n          size=\"sm\"\n          hierarchy=\"secondary\"\n          className={styles['timezone-settings-button']}\n          onClick={() => presenter.toggleSelect()}\n        >\n          Change time settings\n          {isSelectOpen ? <ChevronUpIcon size=\"sm\" /> : <ChevronDownIcon size=\"sm\" />}\n        </Button>\n      </HStack>\n      {isSelectOpen && (\n        <Select\n          value={selectedTimezone}\n          onChange={tz => presenter.setTimezone(tz, onTimezoneChange)}\n          hierarchy=\"secondary\"\n          className={styles['timezone-select']}\n          size=\"sm\"\n        >\n          {timezoneOptions.map(tz => (\n            <Option\n              key={tz.iana}\n              value={tz.iana}\n              label={timezoneAbbreviation}\n              keywords={[tz.iana, tz.abbreviation]}\n            >\n              <HStack height=\"auto\" width=\"100%\" gap=\"8px\">\n                <BodyText selectable={false}>{tz.iana}</BodyText>\n                <Spacer />\n                <BodyText selectable={false}>{tz.abbreviation}</BodyText>\n                <BodyText className={styles['timezone-option-offset']} selectable={false}>\n                  {tz.utcOffset}\n                </BodyText>\n              </HStack>\n            </Option>\n          ))}\n        </Select>\n      )}\n    </VStack>\n  );\n}\n"],"names":["TimezoneFooter","presenter","timezones","onTimezoneChange","selectedTimezone","useSignalValue","isSelectOpen","timezoneAbbreviation","timezoneLabel","utcOffset","timezoneOptions","useMemo","ianas","now","iana","offsetMinutes","getTimezoneOffsetMinutes","getTimezoneAbbreviation","formatUTCOffset","a","b","jsxs","VStack","styles","HStack","jsx","BodyText","Spacer","Button","ChevronUpIcon","ChevronDownIcon","Select","tz","Option"],"mappings":";;;;;;;;;;;AA+BO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AACF,GAAwB;AACtB,QAAMC,IAAmBC,EAAeJ,EAAU,WAAW,QAAQ,GAC/DK,IAAeD,EAAeJ,EAAU,WAAW,YAAY,GAC/DM,IAAuBF,EAAeJ,EAAU,WAAW,oBAAoB,GAC/EO,IAAgBH,EAAeJ,EAAU,WAAW,aAAa,GACjEQ,IAAYJ,EAAeJ,EAAU,WAAW,SAAS,GAEzDS,IAAkBC,EAA0B,MAAM;AACtD,UAAMC,IACJV,KAAe,KAAa,kBAAkB,UAAU,GACpDW,wBAAU,KAAA;AAChB,WAAOD,EACJ,IAAI,CAAAE,MAAQ;AACX,YAAMC,IAAgBC,EAAyBF,GAAMD,CAAG;AACxD,aAAO;AAAA,QACL,MAAAC;AAAA,QACA,cAAcG,EAAwBH,GAAMD,CAAG;AAAA,QAC/C,WAAWK,EAAgBH,CAAa;AAAA,QACxC,eAAAA;AAAA,MAAA;AAAA,IAEJ,CAAC,EACA,KAAK,CAACI,GAAGC,MAAMA,EAAE,gBAAgBD,EAAE,aAAa;AAAA,EACrD,GAAG,CAACjB,CAAS,CAAC;AAEd,SACE,gBAAAmB,EAACC,KAAO,WAAWC,EAAO,YAAY,GAAG,QAAO,QAAO,OAAM,QAC3D,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAO,QAAO,QAAO,OAAM,QAC1B,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAS,WAAWH,EAAO,WAAW,GAAG,YAAY,IAAO,MAAK,MAC/D,UAAAf,EAAA,CACH;AAAA,wBACCmB,GAAA,EAAO;AAAA,MACR,gBAAAF,EAACC,GAAA,EAAS,YAAY,IAAO,MAAK,MAAK,WAAWH,EAAO,YAAY,GAClE,UAAAd,EAAA,CACH;AAAA,MACA,gBAAAY;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,WAAWL,EAAO,0BAA0B;AAAA,UAC5C,SAAS,MAAMtB,EAAU,aAAA;AAAA,UAC1B,UAAA;AAAA,YAAA;AAAA,YAEEK,sBAAgBuB,GAAA,EAAc,MAAK,MAAK,IAAK,gBAAAJ,EAACK,GAAA,EAAgB,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3E,GACF;AAAA,IACCxB,KACC,gBAAAmB;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,OAAO3B;AAAA,QACP,UAAU,CAAA4B,MAAM/B,EAAU,YAAY+B,GAAI7B,CAAgB;AAAA,QAC1D,WAAU;AAAA,QACV,WAAWoB,EAAO,iBAAiB;AAAA,QACnC,MAAK;AAAA,QAEJ,UAAAb,EAAgB,IAAI,CAAAsB,MACnB,gBAAAP;AAAA,UAACQ;AAAA,UAAA;AAAA,YAEC,OAAOD,EAAG;AAAA,YACV,OAAOzB;AAAA,YACP,UAAU,CAACyB,EAAG,MAAMA,EAAG,YAAY;AAAA,YAEnC,4BAACR,GAAA,EAAO,QAAO,QAAO,OAAM,QAAO,KAAI,OACrC,UAAA;AAAA,cAAA,gBAAAC,EAACC,GAAA,EAAS,YAAY,IAAQ,UAAAM,EAAG,MAAK;AAAA,gCACrCL,GAAA,EAAO;AAAA,cACR,gBAAAF,EAACC,GAAA,EAAS,YAAY,IAAQ,YAAG,cAAa;AAAA,cAC9C,gBAAAD,EAACC,KAAS,WAAWH,EAAO,wBAAwB,GAAG,YAAY,IAChE,UAAAS,EAAG,UAAA,CACN;AAAA,YAAA,EAAA,CACF;AAAA,UAAA;AAAA,UAZKA,EAAG;AAAA,QAAA,CAcX;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

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

@@ -0,0 +1,23 @@
+import { Signal, derive } from '@tcn/state';
+export declare class TimezoneFooterPresenter {
+    private readonly _startDate;
+    private readonly _endDate;
+    private _timezone;
+    private _isSelectOpen;
+    private _timezoneAbbreviation;
+    private _timezoneLabel;
+    private _utcOffset;
+    readonly broadcasts: {
+        timezone: Signal<string>['broadcast'];
+        isSelectOpen: Signal<boolean>['broadcast'];
+        timezoneAbbreviation: ReturnType<typeof derive<string, string>>['broadcast'];
+        timezoneLabel: ReturnType<typeof derive<string, string>>['broadcast'];
+        utcOffset: ReturnType<typeof derive<string, string>>['broadcast'];
+    };
+    constructor(_startDate: Signal<Date | null>, _endDate: Signal<Date | null>);
+    getTimezone(): string;
+    getAbbreviation(): string;
+    toggleSelect(): void;
+    setTimezone(iana: string, onTimezoneChange?: (tz: string) => void): void;
+}
+//# sourceMappingURL=timezone_footer_presenter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timezone_footer_presenter.d.ts","sourceRoot":"","sources":["../../../src/components/timezone_footer/timezone_footer_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAS5C,qBAAa,uBAAuB;IAgBhC,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAhB3B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,aAAa,CAA8B;IACnD,OAAO,CAAC,qBAAqB,CAA4C;IACzE,OAAO,CAAC,cAAc,CAA4C;IAClE,OAAO,CAAC,UAAU,CAA4C;IAE9D,QAAQ,CAAC,UAAU,EAAE;QACnB,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;QACtC,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;QAC3C,oBAAoB,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;QAC7E,aAAa,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;QACtE,SAAS,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;KACnE,CAAC;gBAGiB,UAAU,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,EAC/B,QAAQ,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IAyBhD,WAAW,IAAI,MAAM;IAIrB,eAAe,IAAI,MAAM;IAIzB,YAAY;IAIZ,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;CAmBlE"}

package/dist/components/timezone_footer/timezone_footer_presenter.js

@@ -0,0 +1,56 @@
+import { Signal as a, derive as o } from "@tcn/state";
+import { getTimezoneAbbreviation as m, formatUTCOffset as h, getTimezoneOffsetMinutes as l, unshiftFromDisplay as _, shiftForDisplay as c } from "../utils.js";
+class d {
+  constructor(t, s) {
+    this._startDate = t, this._endDate = s;
+    const i = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    this._timezone = new a(i), this._timezoneAbbreviation = o(
+      this._timezone,
+      (e) => m(e, /* @__PURE__ */ new Date())
+    ), this._timezoneLabel = o(
+      this._timezone,
+      (e) => `${e}, ${m(e, /* @__PURE__ */ new Date())}`
+    ), this._utcOffset = o(
+      this._timezone,
+      (e) => h(l(e, /* @__PURE__ */ new Date()))
+    ), this.broadcasts = {
+      timezone: this._timezone.broadcast,
+      isSelectOpen: this._isSelectOpen.broadcast,
+      timezoneAbbreviation: this._timezoneAbbreviation.broadcast,
+      timezoneLabel: this._timezoneLabel.broadcast,
+      utcOffset: this._utcOffset.broadcast
+    };
+  }
+  _timezone;
+  _isSelectOpen = new a(!1);
+  _timezoneAbbreviation;
+  _timezoneLabel;
+  _utcOffset;
+  broadcasts;
+  getTimezone() {
+    return this._timezone.get();
+  }
+  getAbbreviation() {
+    return this._timezoneAbbreviation.get();
+  }
+  toggleSelect() {
+    this._isSelectOpen.set(!this._isSelectOpen.get());
+  }
+  setTimezone(t, s) {
+    const i = this._timezone.get(), e = this._startDate.get();
+    if (e != null) {
+      const n = _(e, i);
+      this._startDate.set(c(n, t));
+    }
+    const r = this._endDate.get();
+    if (r != null) {
+      const n = _(r, i);
+      this._endDate.set(c(n, t));
+    }
+    this._timezone.set(t), this._isSelectOpen.set(!1), s?.(t);
+  }
+}
+export {
+  d as TimezoneFooterPresenter
+};
+//# sourceMappingURL=timezone_footer_presenter.js.map

package/dist/components/timezone_footer/timezone_footer_presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone_footer_presenter.js","sources":["../../../src/components/timezone_footer/timezone_footer_presenter.ts"],"sourcesContent":["import { Signal, derive } from '@tcn/state';\nimport {\n  formatUTCOffset,\n  getTimezoneAbbreviation,\n  getTimezoneOffsetMinutes,\n  shiftForDisplay,\n  unshiftFromDisplay,\n} from '../utils.js';\n\nexport class TimezoneFooterPresenter {\n  private _timezone: Signal<string>;\n  private _isSelectOpen = new Signal<boolean>(false);\n  private _timezoneAbbreviation: ReturnType<typeof derive<string, string>>;\n  private _timezoneLabel: ReturnType<typeof derive<string, string>>;\n  private _utcOffset: ReturnType<typeof derive<string, string>>;\n\n  readonly broadcasts: {\n    timezone: Signal<string>['broadcast'];\n    isSelectOpen: Signal<boolean>['broadcast'];\n    timezoneAbbreviation: ReturnType<typeof derive<string, string>>['broadcast'];\n    timezoneLabel: ReturnType<typeof derive<string, string>>['broadcast'];\n    utcOffset: ReturnType<typeof derive<string, string>>['broadcast'];\n  };\n\n  constructor(\n    private readonly _startDate: Signal<Date | null>,\n    private readonly _endDate: Signal<Date | null>\n  ) {\n    const browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    this._timezone = new Signal<string>(browserTz);\n\n    this._timezoneAbbreviation = derive(this._timezone, tz =>\n      getTimezoneAbbreviation(tz, new Date())\n    );\n    this._timezoneLabel = derive(\n      this._timezone,\n      tz => `${tz}, ${getTimezoneAbbreviation(tz, new Date())}`\n    );\n    this._utcOffset = derive(this._timezone, tz =>\n      formatUTCOffset(getTimezoneOffsetMinutes(tz, new Date()))\n    );\n\n    this.broadcasts = {\n      timezone: this._timezone.broadcast,\n      isSelectOpen: this._isSelectOpen.broadcast,\n      timezoneAbbreviation: this._timezoneAbbreviation.broadcast,\n      timezoneLabel: this._timezoneLabel.broadcast,\n      utcOffset: this._utcOffset.broadcast,\n    };\n  }\n\n  getTimezone(): string {\n    return this._timezone.get();\n  }\n\n  getAbbreviation(): string {\n    return this._timezoneAbbreviation.get();\n  }\n\n  toggleSelect() {\n    this._isSelectOpen.set(!this._isSelectOpen.get());\n  }\n\n  setTimezone(iana: string, onTimezoneChange?: (tz: string) => void) {\n    const oldTz = this._timezone.get();\n\n    const currentStart = this._startDate.get();\n    if (currentStart != null) {\n      const realStart = unshiftFromDisplay(currentStart, oldTz);\n      this._startDate.set(shiftForDisplay(realStart, iana));\n    }\n\n    const currentEnd = this._endDate.get();\n    if (currentEnd != null) {\n      const realEnd = unshiftFromDisplay(currentEnd, oldTz);\n      this._endDate.set(shiftForDisplay(realEnd, iana));\n    }\n\n    this._timezone.set(iana);\n    this._isSelectOpen.set(false);\n    onTimezoneChange?.(iana);\n  }\n}\n"],"names":["TimezoneFooterPresenter","_startDate","_endDate","browserTz","Signal","derive","tz","getTimezoneAbbreviation","formatUTCOffset","getTimezoneOffsetMinutes","iana","onTimezoneChange","oldTz","currentStart","realStart","unshiftFromDisplay","shiftForDisplay","currentEnd","realEnd"],"mappings":";;AASO,MAAMA,EAAwB;AAAA,EAenC,YACmBC,GACAC,GACjB;AAFiB,SAAA,aAAAD,GACA,KAAA,WAAAC;AAEjB,UAAMC,IAAY,KAAK,eAAA,EAAiB,kBAAkB;AAC1D,SAAK,YAAY,IAAIC,EAAeD,CAAS,GAE7C,KAAK,wBAAwBE;AAAA,MAAO,KAAK;AAAA,MAAW,CAAAC,MAClDC,EAAwBD,GAAI,oBAAI,MAAM;AAAA,IAAA,GAExC,KAAK,iBAAiBD;AAAA,MACpB,KAAK;AAAA,MACL,CAAAC,MAAM,GAAGA,CAAE,KAAKC,EAAwBD,GAAI,oBAAI,KAAA,CAAM,CAAC;AAAA,IAAA,GAEzD,KAAK,aAAaD;AAAA,MAAO,KAAK;AAAA,MAAW,OACvCG,EAAgBC,EAAyBH,GAAI,oBAAI,KAAA,CAAM,CAAC;AAAA,IAAA,GAG1D,KAAK,aAAa;AAAA,MAChB,UAAU,KAAK,UAAU;AAAA,MACzB,cAAc,KAAK,cAAc;AAAA,MACjC,sBAAsB,KAAK,sBAAsB;AAAA,MACjD,eAAe,KAAK,eAAe;AAAA,MACnC,WAAW,KAAK,WAAW;AAAA,IAAA;AAAA,EAE/B;AAAA,EAvCQ;AAAA,EACA,gBAAgB,IAAIF,EAAgB,EAAK;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EAEC;AAAA,EAmCT,cAAsB;AACpB,WAAO,KAAK,UAAU,IAAA;AAAA,EACxB;AAAA,EAEA,kBAA0B;AACxB,WAAO,KAAK,sBAAsB,IAAA;AAAA,EACpC;AAAA,EAEA,eAAe;AACb,SAAK,cAAc,IAAI,CAAC,KAAK,cAAc,KAAK;AAAA,EAClD;AAAA,EAEA,YAAYM,GAAcC,GAAyC;AACjE,UAAMC,IAAQ,KAAK,UAAU,IAAA,GAEvBC,IAAe,KAAK,WAAW,IAAA;AACrC,QAAIA,KAAgB,MAAM;AACxB,YAAMC,IAAYC,EAAmBF,GAAcD,CAAK;AACxD,WAAK,WAAW,IAAII,EAAgBF,GAAWJ,CAAI,CAAC;AAAA,IACtD;AAEA,UAAMO,IAAa,KAAK,SAAS,IAAA;AACjC,QAAIA,KAAc,MAAM;AACtB,YAAMC,IAAUH,EAAmBE,GAAYL,CAAK;AACpD,WAAK,SAAS,IAAII,EAAgBE,GAASR,CAAI,CAAC;AAAA,IAClD;AAEA,SAAK,UAAU,IAAIA,CAAI,GACvB,KAAK,cAAc,IAAI,EAAK,GAC5BC,IAAmBD,CAAI;AAAA,EACzB;AACF;"}

package/dist/components/utils.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Returns the timezone offset in minutes using the same sign convention as
+ * Date.getTimezoneOffset(): positive = behind UTC (e.g. CDT/UTC-5 → +300),
+ * negative = ahead of UTC (e.g. CEST/UTC+2 → -120).
+ */
+export declare function getTimezoneOffsetMinutes(iana: string, date: Date): number;
+/** Returns the short timezone abbreviation, e.g. "CDT", "CEST", "UTC". */
+export declare function getTimezoneAbbreviation(iana: string, date: Date): string;
+/**
+ * Formats an offset (in getTimezoneOffset sign convention) as "UTC+HH:MM" or "UTC-HH:MM".
+ * Positive offsetMinutes (behind UTC) → negative sign in display (e.g. +300 → "UTC-05:00").
+ */
+export declare function formatUTCOffset(offsetMinutes: number): string;
+/**
+ * Shifts a real UTC moment so that DatePickerInput (which always renders in the
+ * browser's local timezone) visually displays the wall-clock time of `targetIana`.
+ */
+export declare function shiftForDisplay(date: Date, targetIana: string): Date;
+/**
+ * Reverses shiftForDisplay: given a display date (shifted), recovers the real UTC moment.
+ */
+export declare function unshiftFromDisplay(displayDate: Date, targetIana: string): Date;
+export declare function formatDate(date: Date): string;
+export interface PresetItem {
+    label: string;
+    minutes: number;
+}
+export declare function datesFromPreset(item: PresetItem): {
+    start: Date;
+    end: Date;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/components/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAuBzE;AAED,0EAA0E;AAC1E,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAMxE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAQ7D;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAKpE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAK9E;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAS7C;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,GAAG;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,CAI5E"}

package/dist/components/utils.js

@@ -0,0 +1,62 @@
+function i(t, n) {
+  const o = new Intl.DateTimeFormat("en-US", {
+    timeZone: t,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: !1
+  }).formatToParts(n), e = (a) => parseInt(o.find((m) => m.type === a)?.value ?? "0", 10), r = e("hour") % 24, s = Date.UTC(
+    e("year"),
+    e("month") - 1,
+    e("day"),
+    r,
+    e("minute"),
+    e("second")
+  );
+  return Math.round((n.getTime() - s) / 6e4);
+}
+function f(t, n) {
+  return new Intl.DateTimeFormat("en-US", {
+    timeZone: t,
+    timeZoneName: "short"
+  }).formatToParts(n).find((e) => e.type === "timeZoneName")?.value ?? t;
+}
+function u(t) {
+  const n = t <= 0 ? "+" : "-", o = Math.abs(t), e = Math.floor(o / 60).toString().padStart(2, "0"), r = (o % 60).toString().padStart(2, "0");
+  return `UTC${n}${e}:${r}`;
+}
+function c(t, n) {
+  const o = t.getTimezoneOffset(), e = i(n, t), r = (o - e) * 6e4;
+  return new Date(t.getTime() + r);
+}
+function g(t, n) {
+  const o = t.getTimezoneOffset(), e = i(n, t), r = (o - e) * 6e4;
+  return new Date(t.getTime() - r);
+}
+function h(t) {
+  return t.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: !1
+  });
+}
+function T(t) {
+  const n = /* @__PURE__ */ new Date();
+  return { start: new Date(n.getTime() - t.minutes * 60 * 1e3), end: n };
+}
+export {
+  T as datesFromPreset,
+  h as formatDate,
+  u as formatUTCOffset,
+  f as getTimezoneAbbreviation,
+  i as getTimezoneOffsetMinutes,
+  c as shiftForDisplay,
+  g as unshiftFromDisplay
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/components/utils.ts"],"sourcesContent":["/**\n * Returns the timezone offset in minutes using the same sign convention as\n * Date.getTimezoneOffset(): positive = behind UTC (e.g. CDT/UTC-5 → +300),\n * negative = ahead of UTC (e.g. CEST/UTC+2 → -120).\n */\nexport function getTimezoneOffsetMinutes(iana: string, date: Date): number {\n  const parts = new Intl.DateTimeFormat('en-US', {\n    timeZone: iana,\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false,\n  }).formatToParts(date);\n  const get = (type: string) =>\n    parseInt(parts.find(p => p.type === type)?.value ?? '0', 10);\n  const hour = get('hour') % 24; // handle 24 → 0\n  const tzMs = Date.UTC(\n    get('year'),\n    get('month') - 1,\n    get('day'),\n    hour,\n    get('minute'),\n    get('second')\n  );\n  return Math.round((date.getTime() - tzMs) / 60000);\n}\n\n/** Returns the short timezone abbreviation, e.g. \"CDT\", \"CEST\", \"UTC\". */\nexport function getTimezoneAbbreviation(iana: string, date: Date): string {\n  const parts = new Intl.DateTimeFormat('en-US', {\n    timeZone: iana,\n    timeZoneName: 'short',\n  }).formatToParts(date);\n  return parts.find(p => p.type === 'timeZoneName')?.value ?? iana;\n}\n\n/**\n * Formats an offset (in getTimezoneOffset sign convention) as \"UTC+HH:MM\" or \"UTC-HH:MM\".\n * Positive offsetMinutes (behind UTC) → negative sign in display (e.g. +300 → \"UTC-05:00\").\n */\nexport function formatUTCOffset(offsetMinutes: number): string {\n  const sign = offsetMinutes <= 0 ? '+' : '-';\n  const abs = Math.abs(offsetMinutes);\n  const hours = Math.floor(abs / 60)\n    .toString()\n    .padStart(2, '0');\n  const mins = (abs % 60).toString().padStart(2, '0');\n  return `UTC${sign}${hours}:${mins}`;\n}\n\n/**\n * Shifts a real UTC moment so that DatePickerInput (which always renders in the\n * browser's local timezone) visually displays the wall-clock time of `targetIana`.\n */\nexport function shiftForDisplay(date: Date, targetIana: string): Date {\n  const browserOffsetMin = date.getTimezoneOffset();\n  const targetOffsetMin = getTimezoneOffsetMinutes(targetIana, date);\n  const shiftMs = (browserOffsetMin - targetOffsetMin) * 60000;\n  return new Date(date.getTime() + shiftMs);\n}\n\n/**\n * Reverses shiftForDisplay: given a display date (shifted), recovers the real UTC moment.\n */\nexport function unshiftFromDisplay(displayDate: Date, targetIana: string): Date {\n  const browserOffsetMin = displayDate.getTimezoneOffset();\n  const targetOffsetMin = getTimezoneOffsetMinutes(targetIana, displayDate);\n  const shiftMs = (browserOffsetMin - targetOffsetMin) * 60000;\n  return new Date(displayDate.getTime() - shiftMs);\n}\n\nexport function formatDate(date: Date): string {\n  return date.toLocaleString('en-US', {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: false,\n  });\n}\n\nexport interface PresetItem {\n  label: string;\n  minutes: number;\n}\n\nexport function datesFromPreset(item: PresetItem): { start: Date; end: Date } {\n  const end = new Date();\n  const start = new Date(end.getTime() - item.minutes * 60 * 1000);\n  return { start, end };\n}\n"],"names":["getTimezoneOffsetMinutes","iana","date","parts","get","type","p","hour","tzMs","getTimezoneAbbreviation","formatUTCOffset","offsetMinutes","sign","abs","hours","mins","shiftForDisplay","targetIana","browserOffsetMin","targetOffsetMin","shiftMs","unshiftFromDisplay","displayDate","formatDate","datesFromPreset","item","end"],"mappings":"AAKO,SAASA,EAAyBC,GAAcC,GAAoB;AACzE,QAAMC,IAAQ,IAAI,KAAK,eAAe,SAAS;AAAA,IAC7C,UAAUF;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACT,EAAE,cAAcC,CAAI,GACfE,IAAM,CAACC,MACX,SAASF,EAAM,KAAK,CAAAG,MAAKA,EAAE,SAASD,CAAI,GAAG,SAAS,KAAK,EAAE,GACvDE,IAAOH,EAAI,MAAM,IAAI,IACrBI,IAAO,KAAK;AAAA,IAChBJ,EAAI,MAAM;AAAA,IACVA,EAAI,OAAO,IAAI;AAAA,IACfA,EAAI,KAAK;AAAA,IACTG;AAAA,IACAH,EAAI,QAAQ;AAAA,IACZA,EAAI,QAAQ;AAAA,EAAA;AAEd,SAAO,KAAK,OAAOF,EAAK,QAAA,IAAYM,KAAQ,GAAK;AACnD;AAGO,SAASC,EAAwBR,GAAcC,GAAoB;AAKxE,SAJc,IAAI,KAAK,eAAe,SAAS;AAAA,IAC7C,UAAUD;AAAA,IACV,cAAc;AAAA,EAAA,CACf,EAAE,cAAcC,CAAI,EACR,KAAK,CAAAI,MAAKA,EAAE,SAAS,cAAc,GAAG,SAASL;AAC9D;AAMO,SAASS,EAAgBC,GAA+B;AAC7D,QAAMC,IAAOD,KAAiB,IAAI,MAAM,KAClCE,IAAM,KAAK,IAAIF,CAAa,GAC5BG,IAAQ,KAAK,MAAMD,IAAM,EAAE,EAC9B,WACA,SAAS,GAAG,GAAG,GACZE,KAAQF,IAAM,IAAI,WAAW,SAAS,GAAG,GAAG;AAClD,SAAO,MAAMD,CAAI,GAAGE,CAAK,IAAIC,CAAI;AACnC;AAMO,SAASC,EAAgBd,GAAYe,GAA0B;AACpE,QAAMC,IAAmBhB,EAAK,kBAAA,GACxBiB,IAAkBnB,EAAyBiB,GAAYf,CAAI,GAC3DkB,KAAWF,IAAmBC,KAAmB;AACvD,SAAO,IAAI,KAAKjB,EAAK,QAAA,IAAYkB,CAAO;AAC1C;AAKO,SAASC,EAAmBC,GAAmBL,GAA0B;AAC9E,QAAMC,IAAmBI,EAAY,kBAAA,GAC/BH,IAAkBnB,EAAyBiB,GAAYK,CAAW,GAClEF,KAAWF,IAAmBC,KAAmB;AACvD,SAAO,IAAI,KAAKG,EAAY,QAAA,IAAYF,CAAO;AACjD;AAEO,SAASG,EAAWrB,GAAoB;AAC7C,SAAOA,EAAK,eAAe,SAAS;AAAA,IAClC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACT;AACH;AAOO,SAASsB,EAAgBC,GAA8C;AAC5E,QAAMC,wBAAU,KAAA;AAEhB,SAAO,EAAE,OADK,IAAI,KAAKA,EAAI,YAAYD,EAAK,UAAU,KAAK,GAAI,GAC/C,KAAAC,EAAA;AAClB;"}

package/dist/date_range_panel.css

@@ -0,0 +1 @@
+._date-picker-panel_1e6c441{border-right:1px solid var(--tcn-color-border, #d1d5db);padding:8px;gap:8px;flex:1;align-items:flex-start;justify-content:flex-start;align-self:stretch}._date-picker-panel-title_bc33101{font-weight:600;color:var(--tcn-color-text-primary, #111827);width:100%}._date-picker-section_90f5c3a{gap:4px;width:100%}._date-picker-label_113ebb5{font-weight:500;color:var(--tcn-color-text-secondary, #6b7280);display:flex;width:100%}._apply_05ed9af{margin-top:16px}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { TimeSelector } from './components/time_selector/time_selector.js';
+export type { TimeSelectorProps, TimeSelectorOwnProps, } from './components/time_selector/time_selector.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,YAAY,EACV,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,6CAA6C,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+import { TimeSelector as r } from "./components/time_selector/time_selector.js";
+export {
+  r as TimeSelector
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/preset_panel.css

@@ -0,0 +1 @@
+._presets-panel_7e3238f{flex:1;padding:8px;gap:0}._preset-search_113ae3a{margin-bottom:8px}._preset-list_191d980{overflow-x:hidden;overflow-y:auto;gap:2px}._preset-item_aa39cec{width:100%;padding:6px 8px;margin-left:6px;border-radius:4px;cursor:pointer}._preset-item_aa39cec:hover{background:var(--tcn-color-surface-hover, #f3f4f6)}._preset-item_aa39cec[data-selected=true]{background:var(--tcn-color-surface-selected, #eff6ff)}._preset-item_aa39cec[data-highlighted=true]{background:var(--tcn-color-surface-hover, #e5e7eb)}

package/dist/time_selector.css

@@ -0,0 +1 @@
+._trigger-abbreviation_8e22c20{color:var(--ergo-primary, #2563eb)}._trigger_1096f0b{display:inline-flex;align-items:center;border:1px solid var(--tcn-color-border, #d1d5db);border-radius:4px;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none}._trigger_1096f0b:hover{border-color:var(--tcn-color-border-hover, #9ca3af)}._popper-content_9403264{background:var(--tcn-color-surface-primary, #ffffff);border:1px solid var(--tcn-color-border, #d1d5db);border-radius:6px;box-shadow:0 4px 16px #0000001f;overflow:hidden;align-items:flex-start;width:400px}

package/dist/timezone_footer.css

@@ -0,0 +1 @@
+._utc-footer_5c1fa0d{border-top:1px solid var(--tcn-color-border, #d1d5db);padding:8px 12px;gap:8px}._utc-label_0f42c44{color:var(--tcn-color-text-secondary, #6b7280)}._utc-offset_8a037cb{padding-right:4px}._timezone-settings-button_cd0743e{flex-shrink:0}._timezone-select_0f93d05{width:100%}._timezone-option-offset_89f4289{color:var(--tcn-color-text-secondary, #6b7280);min-width:80px;text-align:right;padding-right:4px}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@tcn/ui-time-selector",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React time selector component",
+  "author": "TCN",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "access": "public",
+  "blackcatConfig": {
+    "storybook": {
+      "publish": true,
+      "title": "UI Time Selector",
+      "port": 6301
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types",
+    "tsconfig.json"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "@bc-monorepo/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@tcn/icons": "2.4.0",
+    "@tcn/state": "1.3.4"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@tcn/ui": "^0.18.1"
+  },
+  "devDependencies": {
+    "@types/react-color": "^3.0.13",
+    "@tcn/ui": "0.18.1"
+  },
+  "scripts": {
+    "start": "pnpm storybook",
+    "build": "vite build",
+    "clean": "rm -rf dist storybook-static",
+    "clean:all": "pnpm clean && rm -rf node_modules",
+    "check:all": "concurrently 'pnpm check:types' 'pnpm run biome check .'",
+    "check:types": "tsc --project tsconfig.typecheck.json --noEmit",
+    "check:format": "pnpm run biome format .",
+    "check:lint": "pnpm run biome lint .",
+    "check:imports": "pnpm run biome check --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
+    "fix:all": "pnpm run biome check --write",
+    "fix:format": "pnpm run biome format --write",
+    "fix:lint": "pnpm run biome lint --write",
+    "fix:imports": "pnpm run biome check --write --unsafe --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
+    "publish:dry-run": "pnpm build && pnpm publish --dry-run --force --no-git-checks",
+    "biome": "pnpm exec biome",
+    "storybook": "bash ../../scripts/ensure-blackcat-addon-built.sh && storybook dev",
+    "storybook:silent": "storybook dev --no-open --disable-telemetry --quiet",
+    "storybook:build": "storybook build"
+  }
+}

package/src/__stories__/time_selector.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta } from '@storybook/react-vite';
+import { useState } from 'react';
+import { TimeSelector } from '../components/time_selector/time_selector.js';
+
+const meta: Meta<typeof TimeSelector> = {
+  title: 'TimeSelector',
+  component: TimeSelector,
+};
+
+export default meta;
+
+function twoWeeksAgo(): Date {
+  const d = new Date();
+  d.setDate(d.getDate() - 14);
+  return d;
+}
+
+export function WithTwoWeekStartLimit() {
+  const [start, setStart] = useState<Date | null>(null);
+  const [end, setEnd] = useState<Date | null>(null);
+  const [timezone, setTimezone] = useState<string | null>(null);
+
+  return (
+    <div
+      style={{ position: 'relative', minHeight: '100vh', padding: '16px', width: '100%' }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <TimeSelector
+          startDateMin={twoWeeksAgo()}
+          onChange={(s, e) => {
+            setStart(s);
+            setEnd(e);
+          }}
+          onTimezoneChange={tz => setTimezone(tz)}
+        />
+      </div>
+      {start != null && end != null && (
+        <div
+          style={{
+            fontSize: '13px',
+            lineHeight: '1.6',
+            marginTop: '8px',
+          }}
+        >
+          <div>
+            <strong>Start:</strong> {start.toISOString()}
+          </div>
+          <div>
+            <strong>End:</strong> {end.toISOString()}
+          </div>
+          <div>
+            <strong>Timezone:</strong> {timezone ?? '—'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Basic() {
+  const [start, setStart] = useState<Date | null>(null);
+  const [end, setEnd] = useState<Date | null>(null);
+  const [timezone, setTimezone] = useState<string | null>(null);
+
+  return (
+    <div
+      style={{ position: 'relative', minHeight: '100vh', padding: '16px', width: '100%' }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <TimeSelector
+          onChange={(s, e) => {
+            setStart(s);
+            setEnd(e);
+          }}
+          onTimezoneChange={tz => setTimezone(tz)}
+        />
+      </div>
+      {start != null && end != null && (
+        <div
+          style={{
+            fontSize: '13px',
+            lineHeight: '1.6',
+            marginTop: '8px',
+          }}
+        >
+          <div>
+            <strong>Start:</strong> {start.toISOString()}
+          </div>
+          <div>
+            <strong>End:</strong> {end.toISOString()}
+          </div>
+          <div>
+            <strong>Timezone:</strong> {timezone ?? '—'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/date_range_panel/date_range_panel.module.css

@@ -0,0 +1,31 @@
+.date-picker-panel {
+  border-right: 1px solid var(--tcn-color-border, #d1d5db);
+  padding: 8px;
+  gap: 8px;
+  flex: 1;
+  align-items: flex-start;
+  justify-content: flex-start;
+  align-self: stretch;
+}
+
+.date-picker-panel-title {
+  font-weight: 600;
+  color: var(--tcn-color-text-primary, #111827);
+  width: 100%;
+}
+
+.date-picker-section {
+  gap: 4px;
+  width: 100%;
+}
+
+.date-picker-label {
+  font-weight: 500;
+  color: var(--tcn-color-text-secondary, #6b7280);
+  display: flex;
+  width: 100%;
+}
+
+.apply {
+  margin-top: 16px;
+}

package/src/components/date_range_panel/date_range_panel.tsx

@@ -0,0 +1,87 @@
+import { useSignalValue } from '@tcn/state';
+import { Spacer, VStack } from '@tcn/ui/stacks';
+import { BodyText } from '@tcn/ui/typography';
+import { DatePickerInput } from '@tcn/ui/inputs';
+import { Button } from '@tcn/ui/actions';
+import { useEffect, useRef } from 'react';
+import { IteratorIcon } from '@tcn/icons/iterator_icon.js';
+import { DateRangePanelPresenter } from './date_range_panel_presenter.js';
+import styles from './date_range_panel.module.css';
+
+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 function DateRangePanel({
+  presenter,
+  focused,
+  startDateMin,
+  startDateMax,
+  endDateMin,
+  endDateMax,
+  onApply,
+}: DateRangePanelProps) {
+  const startDateRef = useRef<HTMLButtonElement>(null);
+
+  const startDate = useSignalValue(presenter.startDate.broadcast);
+  const endDate = useSignalValue(presenter.endDate.broadcast);
+  const isApplyDisabled = useSignalValue(presenter.broadcasts.isApplyDisabled);
+
+  useEffect(() => {
+    if (focused) {
+      startDateRef.current?.focus();
+    }
+  }, [focused]);
+
+  return (
+    <VStack className={styles['date-picker-panel']} height="auto">
+      <BodyText className={styles['date-picker-panel-title']} selectable={false}>
+        Absolute time range
+      </BodyText>
+      <VStack className={styles['date-picker-section']} height="auto" width="auto">
+        <BodyText className={styles['date-picker-label']} selectable={false}>
+          From
+        </BodyText>
+        <DatePickerInput
+          ref={startDateRef}
+          showTime
+          value={startDate}
+          onChange={(date: Date | null) => presenter.setStartDate(date)}
+          min={startDateMin ?? undefined}
+          max={startDateMax ?? undefined}
+        />
+      </VStack>
+      <VStack className={styles['date-picker-section']} height="auto" width="auto">
+        <BodyText className={styles['date-picker-label']} selectable={false}>
+          To
+        </BodyText>
+        <DatePickerInput
+          showTime
+          value={endDate}
+          onChange={(date: Date | null) => presenter.setEndDate(date)}
+          min={endDateMin ?? undefined}
+          max={endDateMax ?? undefined}
+        />
+      </VStack>
+      <Button
+        size="sm"
+        hierarchy="primary"
+        disabled={isApplyDisabled}
+        onClick={onApply}
+        className={styles['apply']}
+      >
+        Apply time range
+        <Spacer width="8px" />
+        <IteratorIcon size="sm" />
+      </Button>
+    </VStack>
+  );
+}