@cognite/aura 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/DESIGN.md +1651 -7
  2. package/README.md +45 -3
  3. package/dist/components/index.d.ts +4 -2
  4. package/dist/components/index.js +58 -325
  5. package/dist/components/ui/core/accordion/accordion.js +79 -114
  6. package/dist/components/ui/core/action-toolbar/action-toolbar.js +108 -176
  7. package/dist/components/ui/core/alert/alert.js +158 -206
  8. package/dist/components/ui/core/avatar/avatar.js +64 -90
  9. package/dist/components/ui/core/badge/badge.js +73 -108
  10. package/dist/components/ui/core/banner/banner.js +146 -215
  11. package/dist/components/ui/core/breadcrumb/breadcrumb.js +105 -200
  12. package/dist/components/ui/core/button/button.js +47 -52
  13. package/dist/components/ui/core/button-group/button-group.js +40 -79
  14. package/dist/components/ui/core/card/card.js +102 -185
  15. package/dist/components/ui/core/chart/chart.js +116 -206
  16. package/dist/components/ui/core/chart/index.js +2 -8
  17. package/dist/components/ui/core/checkbox/checkbox.js +67 -132
  18. package/dist/components/ui/core/checkbox/checkbox.metadata.js +7 -7
  19. package/dist/components/ui/core/code-block/code-block.d.ts +1 -1
  20. package/dist/components/ui/core/code-block/code-block.js +179 -267
  21. package/dist/components/ui/core/collapsible/collapsible.js +29 -49
  22. package/dist/components/ui/core/combobox/combobox.js +41 -0
  23. package/dist/components/ui/core/command/command.js +85 -150
  24. package/dist/components/ui/core/count/count.js +21 -32
  25. package/dist/components/ui/core/date-time-pickers/date-picker/date-picker.js +60 -83
  26. package/dist/components/ui/core/date-time-pickers/date-picker/types.d.ts +1 -2
  27. package/dist/components/ui/core/date-time-pickers/date-picker/use-date-picker.js +36 -62
  28. package/dist/components/ui/core/date-time-pickers/date-range-picker/date-range-picker.js +63 -98
  29. package/dist/components/ui/core/date-time-pickers/date-range-picker/types.d.ts +1 -2
  30. package/dist/components/ui/core/date-time-pickers/date-range-picker/use-date-range-picker.js +60 -81
  31. package/dist/components/ui/core/date-time-pickers/date-time-range-picker/date-time-range-picker.js +118 -189
  32. package/dist/components/ui/core/date-time-pickers/date-time-range-picker/types.d.ts +1 -2
  33. package/dist/components/ui/core/date-time-pickers/date-time-range-picker/use-date-time-range-picker.js +104 -158
  34. package/dist/components/ui/core/date-time-pickers/index.d.ts +2 -0
  35. package/dist/components/ui/core/date-time-pickers/index.js +5 -8
  36. package/dist/components/ui/core/date-time-pickers/shared/am-pm-scroll/am-pm-scroll.js +42 -56
  37. package/dist/components/ui/core/date-time-pickers/shared/calendar/calendar.js +66 -117
  38. package/dist/components/ui/core/date-time-pickers/shared/calendar-header/calendar-header.js +63 -93
  39. package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.d.ts +1 -1
  40. package/dist/components/ui/core/date-time-pickers/shared/date-time-input/date-time-input.js +64 -98
  41. package/dist/components/ui/core/date-time-pickers/shared/date-time-input/range-input-display.js +38 -67
  42. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.d.ts +0 -2
  43. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-popover-state.js +23 -39
  44. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-date-state.js +52 -62
  45. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.js +18 -18
  46. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.js +24 -31
  47. package/dist/components/ui/core/date-time-pickers/shared/hooks/use-time-state.js +24 -33
  48. package/dist/components/ui/core/date-time-pickers/shared/scroll-cell-classes.js +4 -7
  49. package/dist/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.js +17 -31
  50. package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/index.d.ts +2 -0
  51. package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.d.ts +19 -0
  52. package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.js +41 -0
  53. package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.js +33 -50
  54. package/dist/components/ui/core/date-time-pickers/time-picker/index.d.ts +3 -0
  55. package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.d.ts +16 -0
  56. package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.js +79 -0
  57. package/dist/components/ui/core/date-time-pickers/time-picker/types.d.ts +23 -0
  58. package/dist/components/ui/core/date-time-pickers/time-picker/use-time-picker.d.ts +3 -0
  59. package/dist/components/ui/core/date-time-pickers/time-picker/use-time-picker.js +42 -0
  60. package/dist/components/ui/core/date-time-pickers/utils/calendar-utils.js +39 -52
  61. package/dist/components/ui/core/date-time-pickers/utils/time-utils.js +7 -15
  62. package/dist/components/ui/core/dialog/dialog.js +82 -155
  63. package/dist/components/ui/core/dropdown-menu/dropdown-menu.d.ts +19 -17
  64. package/dist/components/ui/core/dropdown-menu/dropdown-menu.js +150 -250
  65. package/dist/components/ui/core/empty-state/empty-state.context.js +5 -8
  66. package/dist/components/ui/core/empty-state/empty-state.js +86 -138
  67. package/dist/components/ui/core/helper-text/helper-text.js +37 -65
  68. package/dist/components/ui/core/hover-card/hover-card.js +54 -80
  69. package/dist/components/ui/core/inline-citation/inline-citation.js +98 -181
  70. package/dist/components/ui/core/input/input.js +12 -27
  71. package/dist/components/ui/core/input-group/input-group.js +76 -173
  72. package/dist/components/ui/core/kbd/kbd.js +20 -36
  73. package/dist/components/ui/core/label/label.js +26 -43
  74. package/dist/components/ui/core/loader/loader.js +80 -117
  75. package/dist/components/ui/core/message/message-response-default-streamdown-controls.js +12 -12
  76. package/dist/components/ui/core/message/message.d.ts +2 -2
  77. package/dist/components/ui/core/message/message.js +316 -542
  78. package/dist/components/ui/core/pagination/pagination-size-context.js +5 -6
  79. package/dist/components/ui/core/pagination/pagination-teleport.js +86 -106
  80. package/dist/components/ui/core/pagination/pagination-teleport.utils.js +6 -6
  81. package/dist/components/ui/core/pagination/pagination.js +231 -334
  82. package/dist/components/ui/core/popover/popover.js +90 -157
  83. package/dist/components/ui/core/progress/progress.js +36 -61
  84. package/dist/components/ui/core/prompt-input/prompt-input.js +274 -413
  85. package/dist/components/ui/core/radio-group/radio-group.js +58 -113
  86. package/dist/components/ui/core/reasoning/reasoning.js +55 -86
  87. package/dist/components/ui/core/scroll-area/scroll-area.js +41 -71
  88. package/dist/components/ui/core/search/search.js +77 -99
  89. package/dist/components/ui/core/segmented-control/segmented-control.js +110 -167
  90. package/dist/components/ui/core/select/select.js +168 -293
  91. package/dist/components/ui/core/separator/separator.js +13 -23
  92. package/dist/components/ui/core/shimmer/shimmer.d.ts +2 -4
  93. package/dist/components/ui/core/shimmer/shimmer.js +40 -107
  94. package/dist/components/ui/core/skeleton/skeleton.js +13 -18
  95. package/dist/components/ui/core/sonner-toast/sonner-toast.js +54 -47
  96. package/dist/components/ui/core/sources/sources.d.ts +5 -1
  97. package/dist/components/ui/core/sources/sources.js +58 -79
  98. package/dist/components/ui/core/switch/switch.js +62 -0
  99. package/dist/components/ui/core/tabs/tabs.js +149 -223
  100. package/dist/components/ui/core/tabs/tabs.utils.js +6 -8
  101. package/dist/components/ui/core/textarea/textarea.js +13 -27
  102. package/dist/components/ui/core/toggle/toggle.js +55 -74
  103. package/dist/components/ui/core/tool/tool.js +127 -163
  104. package/dist/components/ui/core/tooltip/tooltip.js +47 -86
  105. package/dist/components/ui/core/topbar/topbar.js +106 -190
  106. package/dist/eslint/index.js +5 -10
  107. package/dist/eslint/no-overriding-styles.js +178 -237
  108. package/dist/icons/index.d.ts +1 -0
  109. package/dist/icons/index.js +1 -0
  110. package/dist/lib/highlight-code.d.ts +9 -0
  111. package/dist/lib/highlight-code.js +42 -0
  112. package/dist/lib/portal-container-context.js +8 -9
  113. package/dist/lib/style-scope.js +6 -6
  114. package/dist/lib/use-controllable-state.js +21 -30
  115. package/dist/lib/utils.d.ts +0 -2
  116. package/dist/lib/utils.js +32 -112
  117. package/dist/styles.css +1 -1
  118. package/dist/styles.source.css +23 -0
  119. package/package.json +23 -7
  120. package/dist/components/ui/core/date-time-pickers/shared/constants.js +0 -14
@@ -1,19 +1,19 @@
1
- import { useState as o, useCallback as e } from "react";
2
- const p = () => {
3
- const [s, t] = o("start"), a = e(() => {
4
- t("end");
5
- }, []), n = e(() => {
6
- t("start");
7
- }, []), r = e(() => {
8
- t("start");
9
- }, []);
10
- return {
11
- step: s,
12
- handleNext: a,
13
- handleBack: n,
14
- resetStep: r
15
- };
16
- };
17
- export {
18
- p as useRangeStepManager
1
+ import { useCallback as e, useState as t } from "react";
2
+ //#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-range-step-manager.ts
3
+ var n = () => {
4
+ let [n, r] = t("start");
5
+ return {
6
+ step: n,
7
+ handleNext: e(() => {
8
+ r("end");
9
+ }, []),
10
+ handleBack: e(() => {
11
+ r("start");
12
+ }, []),
13
+ resetStep: e(() => {
14
+ r("start");
15
+ }, [])
16
+ };
19
17
  };
18
+ //#endregion
19
+ export { n as useRangeStepManager };
@@ -1,32 +1,25 @@
1
- import { useState as l, useRef as i } from "react";
2
- const g = ({
3
- value: e,
4
- defaultDate: a,
5
- mapDate: r,
6
- onDateSelected: D
7
- }) => {
8
- const [p, h] = l(e), [u, o] = l(
9
- () => e ?? a
10
- ), n = i({ tempDate: e }), s = (t) => {
11
- n.current.tempDate = t, h(t);
12
- };
13
- return {
14
- tempDate: p,
15
- displayedMonth: u,
16
- stateRef: n,
17
- handleDateClick: (t) => {
18
- const c = r ? r(t) : t;
19
- s(c), D?.(c);
20
- },
21
- handleMonthChange: (t) => {
22
- o(t);
23
- },
24
- clearDate: () => n.current.tempDate === null ? !1 : (s(null), !0),
25
- resetDate: (t) => {
26
- s(t), o(t ?? a);
27
- }
28
- };
29
- };
30
- export {
31
- g as useSingleDateState
1
+ import { useRef as e, useState as t } from "react";
2
+ //#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.ts
3
+ var n = ({ value: n, defaultDate: r, mapDate: i, onDateSelected: a }) => {
4
+ let [o, s] = t(n), [c, l] = t(() => n ?? r), u = e({ tempDate: n }), d = (e) => {
5
+ u.current.tempDate = e, s(e);
6
+ };
7
+ return {
8
+ tempDate: o,
9
+ displayedMonth: c,
10
+ stateRef: u,
11
+ handleDateClick: (e) => {
12
+ let t = i ? i(e) : e;
13
+ d(t), a?.(t);
14
+ },
15
+ handleMonthChange: (e) => {
16
+ l(e);
17
+ },
18
+ clearDate: () => u.current.tempDate === null ? !1 : (d(null), !0),
19
+ resetDate: (e) => {
20
+ d(e), l(e ?? r);
21
+ }
22
+ };
32
23
  };
24
+ //#endregion
25
+ export { n as useSingleDateState };
@@ -1,34 +1,25 @@
1
- import { useState as r, useMemo as C, useCallback as M } from "react";
2
- import { getAmPmFromHour as m, convert12HourTo24Hour as P, convert24HourTo12Hour as T } from "../../utils/time-utils.js";
3
- import { DEFAULT_START_HOUR as U, DEFAULT_MINUTE as f } from "../constants.js";
4
- const S = ({
5
- initialHour: s = U,
6
- initialMinute: a = f,
7
- timeFormat: o = "24h"
8
- } = {}) => {
9
- const l = o === "12h" ? T(s) : s, [e, u] = r(l), [p, h] = r(a), [t, c] = r(
10
- () => m(s)
11
- ), A = C(
12
- () => o === "12h" ? P(e, t) : e,
13
- [e, t, o]
14
- ), H = M(
15
- (n, d) => {
16
- const g = o === "12h" ? T(n) : n;
17
- u(g), h(d), c(m(n));
18
- },
19
- [o]
20
- );
21
- return {
22
- hour: e,
23
- minute: p,
24
- amPm: t,
25
- hour24: A,
26
- handleHourChange: u,
27
- handleMinuteChange: h,
28
- handleAmPmChange: c,
29
- resetTime: H
30
- };
31
- };
32
- export {
33
- S as useTimeState
1
+ import { convert12HourTo24Hour as e, convert24HourTo12Hour as t, getAmPmFromHour as n } from "../../utils/time-utils.js";
2
+ import { useCallback as r, useMemo as i, useState as a } from "react";
3
+ //#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-time-state.ts
4
+ var o = ({ initialHour: o = 9, initialMinute: s = 0, timeFormat: c = "24h" } = {}) => {
5
+ let [l, u] = a(c === "12h" ? t(o) : o), [d, f] = a(s), [p, m] = a(() => n(o));
6
+ return {
7
+ hour: l,
8
+ minute: d,
9
+ amPm: p,
10
+ hour24: i(() => c === "12h" ? e(l, p) : l, [
11
+ l,
12
+ p,
13
+ c
14
+ ]),
15
+ handleHourChange: u,
16
+ handleMinuteChange: f,
17
+ handleAmPmChange: m,
18
+ resetTime: r((e, r) => {
19
+ let i = c === "12h" ? t(e) : e;
20
+ u(i), f(r), m(n(e));
21
+ }, [c])
22
+ };
34
23
  };
24
+ //#endregion
25
+ export { o as useTimeState };
@@ -1,7 +1,4 @@
1
- const r = "overflow-y-auto flex flex-col items-center py-2 w-9 h-72 shrink-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", o = "w-9 h-9 flex items-center justify-center rounded-lg cursor-pointer text-sm font-medium leading-[18px] tracking-normal select-none transition-colors duration-150 shrink-0", e = "bg-primary-background text-foreground-on-primary hover:bg-primary-background", n = "text-secondary-foreground hover:bg-accent-background";
2
- export {
3
- r as SCROLL_CONTAINER_CLASSES,
4
- o as SCROLL_ITEM_BASE_CLASSES,
5
- e as SCROLL_ITEM_SELECTED_CLASSES,
6
- n as SCROLL_ITEM_UNSELECTED_CLASSES
7
- };
1
+ //#region libs/aura/src/components/ui/core/date-time-pickers/shared/scroll-cell-classes.ts
2
+ var e = "overflow-y-auto flex flex-col items-center py-2 w-9 h-72 shrink-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", t = "w-9 h-9 flex items-center justify-center rounded-lg cursor-pointer text-sm font-medium leading-[18px] tracking-normal select-none transition-colors duration-150 shrink-0", n = "bg-primary-background text-foreground-on-primary hover:bg-primary-background", r = "text-secondary-foreground hover:bg-accent-background";
3
+ //#endregion
4
+ export { e as SCROLL_CONTAINER_CLASSES, t as SCROLL_ITEM_BASE_CLASSES, n as SCROLL_ITEM_SELECTED_CLASSES, r as SCROLL_ITEM_UNSELECTED_CLASSES };
@@ -1,31 +1,17 @@
1
- import { jsx as l } from "react/jsx-runtime";
2
- import { cn as t } from "../../../../../../lib/utils.js";
3
- import { Button as n } from "../../../button/button.js";
4
- const i = [], m = ({
5
- shortcuts: r = i,
6
- onShortcutClick: a,
7
- className: o
8
- }) => r.length === 0 ? null : /* @__PURE__ */ l(
9
- "div",
10
- {
11
- "data-slot": "shortcuts-panel",
12
- className: t(
13
- "flex flex-col gap-1 p-3 border-r border-border min-w-[150px]",
14
- o
15
- ),
16
- children: r.map((e) => /* @__PURE__ */ l(
17
- n,
18
- {
19
- variant: "ghost",
20
- size: "default",
21
- className: "w-full justify-start text-secondary-foreground",
22
- onClick: () => a(e.getValue()),
23
- children: e.label
24
- },
25
- e.id ?? e.label
26
- ))
27
- }
28
- );
29
- export {
30
- m as ShortcutsPanel
31
- };
1
+ import { cn as e } from "../../../../../../lib/utils.js";
2
+ import { Button as t } from "../../../button/button.js";
3
+ import { jsx as n } from "react/jsx-runtime";
4
+ //#region libs/aura/src/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.tsx
5
+ var r = [], i = ({ shortcuts: i = r, onShortcutClick: a, className: o }) => i.length === 0 ? null : /* @__PURE__ */ n("div", {
6
+ "data-slot": "shortcuts-panel",
7
+ className: e("flex flex-col gap-1 p-3 border-r border-border min-w-[150px]", o),
8
+ children: i.map((e) => /* @__PURE__ */ n(t, {
9
+ variant: "ghost",
10
+ size: "default",
11
+ className: "w-full justify-start text-secondary-foreground",
12
+ onClick: () => a(e.getValue()),
13
+ children: e.label
14
+ }, e.id ?? e.label))
15
+ });
16
+ //#endregion
17
+ export { i as ShortcutsPanel };
@@ -0,0 +1,2 @@
1
+ export { TimePickerPanel } from './time-picker-panel';
2
+ export type { TimePickerPanelProps } from './time-picker-panel';
@@ -0,0 +1,19 @@
1
+ import { FC } from 'react';
2
+ type TimePickerPanelBaseProps = {
3
+ hour: number;
4
+ minute: number;
5
+ onHourChange: (hour: number) => void;
6
+ onMinuteChange: (minute: number) => void;
7
+ className?: string;
8
+ };
9
+ export type TimePickerPanelProps = TimePickerPanelBaseProps & ({
10
+ timeFormat: '12h';
11
+ amPm: 'AM' | 'PM';
12
+ onAmPmChange: (amPm: 'AM' | 'PM') => void;
13
+ } | {
14
+ timeFormat?: '24h';
15
+ amPm?: undefined;
16
+ onAmPmChange?: undefined;
17
+ });
18
+ export declare const TimePickerPanel: FC<TimePickerPanelProps>;
19
+ export {};
@@ -0,0 +1,41 @@
1
+ import { cn as e } from "../../../../../../lib/utils.js";
2
+ import { AmPmScroll as t } from "../am-pm-scroll/am-pm-scroll.js";
3
+ import { TimePickerScroll as n } from "../time-picker-scroll/time-picker-scroll.js";
4
+ import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
5
+ //#region libs/aura/src/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.tsx
6
+ var o = (o) => {
7
+ let { hour: s, minute: c, onHourChange: l, onMinuteChange: u, className: d } = o, f = o.timeFormat ?? "24h";
8
+ return /* @__PURE__ */ a("div", {
9
+ "data-slot": "time-picker-panel",
10
+ className: e("flex items-stretch", d),
11
+ children: [
12
+ /* @__PURE__ */ i("div", {
13
+ className: "px-3",
14
+ children: /* @__PURE__ */ i(n, {
15
+ value: s,
16
+ onChange: l,
17
+ type: "hour",
18
+ timeFormat: f
19
+ })
20
+ }),
21
+ /* @__PURE__ */ i("div", { className: "w-px bg-border shrink-0 self-stretch" }),
22
+ /* @__PURE__ */ i("div", {
23
+ className: "px-3",
24
+ children: /* @__PURE__ */ i(n, {
25
+ value: c,
26
+ onChange: u,
27
+ type: "minute"
28
+ })
29
+ }),
30
+ o.timeFormat === "12h" && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: "w-px bg-border shrink-0 self-stretch" }), /* @__PURE__ */ i("div", {
31
+ className: "px-3",
32
+ children: /* @__PURE__ */ i(t, {
33
+ value: o.amPm,
34
+ onChange: o.onAmPmChange
35
+ })
36
+ })] })
37
+ ]
38
+ });
39
+ };
40
+ //#endregion
41
+ export { o as TimePickerPanel };
@@ -1,52 +1,35 @@
1
+ import { cn as e } from "../../../../../../lib/utils.js";
2
+ import { SCROLL_CONTAINER_CLASSES as t, SCROLL_ITEM_BASE_CLASSES as n, SCROLL_ITEM_SELECTED_CLASSES as r, SCROLL_ITEM_UNSELECTED_CLASSES as i } from "../scroll-cell-classes.js";
3
+ import { generateHours as a, generateMinutes as o } from "../../utils/time-utils.js";
4
+ import { useEffect as s, useRef as c } from "react";
1
5
  import { jsx as l } from "react/jsx-runtime";
2
- import { useRef as f, useEffect as p } from "react";
3
- import { cn as E } from "../../../../../../lib/utils.js";
4
- import { generateHours as C, generateMinutes as d } from "../../utils/time-utils.js";
5
- import { MIDNIGHT_HOUR as h, HOURS_IN_12H as s } from "../constants.js";
6
- import { SCROLL_ITEM_SELECTED_CLASSES as u, SCROLL_ITEM_UNSELECTED_CLASSES as R, SCROLL_ITEM_BASE_CLASSES as T, SCROLL_CONTAINER_CLASSES as a } from "../scroll-cell-classes.js";
7
- const M = ({
8
- value: r,
9
- onChange: m,
10
- type: c,
11
- timeFormat: i = "24h",
12
- className: L
13
- }) => {
14
- const e = f(null), n = f(null), _ = c === "hour" ? C(i) : d(), S = r === null ? null : c === "hour" && i === "12h" ? r === h ? s : r > s ? r - s : r : r;
15
- return p(() => {
16
- if (r !== null && n.current && e.current) {
17
- const o = e.current, t = n.current;
18
- o.scrollTo({
19
- top: t.offsetTop - o.offsetHeight / 2 + t.offsetHeight / 2,
20
- behavior: "smooth"
21
- });
22
- }
23
- }, [r]), /* @__PURE__ */ l(
24
- "div",
25
- {
26
- "data-slot": "time-picker-scroll",
27
- ref: e,
28
- className: E(a, L),
29
- children: _.map((o) => {
30
- const t = S !== null && o === S;
31
- return /* @__PURE__ */ l(
32
- "div",
33
- {
34
- ref: t ? n : void 0,
35
- className: E(
36
- T,
37
- t ? u : R
38
- ),
39
- onClick: () => m(o),
40
- role: "option",
41
- "aria-selected": t,
42
- children: o.toString().padStart(2, "0")
43
- },
44
- o
45
- );
46
- })
47
- }
48
- );
49
- };
50
- export {
51
- M as TimePickerScroll
6
+ //#region libs/aura/src/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.tsx
7
+ var u = ({ value: u, onChange: d, type: f, timeFormat: p = "24h", className: m }) => {
8
+ let h = c(null), g = c(null), _ = f === "hour" ? a(p) : o(), v = u === null ? null : f === "hour" && p === "12h" ? u === 0 ? 12 : u > 12 ? u - 12 : u : u;
9
+ return s(() => {
10
+ if (u !== null && g.current && h.current) {
11
+ let e = h.current, t = g.current;
12
+ e.scrollTo({
13
+ top: t.offsetTop - e.offsetHeight / 2 + t.offsetHeight / 2,
14
+ behavior: "smooth"
15
+ });
16
+ }
17
+ }, [u]), /* @__PURE__ */ l("div", {
18
+ "data-slot": "time-picker-scroll",
19
+ ref: h,
20
+ className: e(t, m),
21
+ children: _.map((t) => {
22
+ let a = v !== null && t === v;
23
+ return /* @__PURE__ */ l("div", {
24
+ ref: a ? g : void 0,
25
+ className: e(n, a ? r : i),
26
+ onClick: () => d(t),
27
+ role: "option",
28
+ "aria-selected": a,
29
+ children: t.toString().padStart(2, "0")
30
+ }, t);
31
+ })
32
+ });
52
33
  };
34
+ //#endregion
35
+ export { u as TimePickerScroll };
@@ -0,0 +1,3 @@
1
+ export { TimePicker } from './time-picker';
2
+ export type { TimePickerProps, ShortcutItem } from './time-picker';
3
+ export type { UseTimePickerProps, UseTimePickerReturn } from './types';
@@ -0,0 +1,16 @@
1
+ import { FC } from 'react';
2
+ import { Dayjs } from 'dayjs';
3
+ import { ShortcutItem } from '../shared/shortcuts-panel/shortcuts-panel';
4
+ import { TimeFormat } from '../utils/format-utils';
5
+ export type { ShortcutItem };
6
+ export interface TimePickerProps {
7
+ value: Dayjs | null;
8
+ onChange: (time: Dayjs | null) => void;
9
+ timeFormat?: TimeFormat;
10
+ format?: string;
11
+ placeholder?: string;
12
+ shortcuts?: ShortcutItem[];
13
+ defaultDate?: Dayjs;
14
+ className?: string;
15
+ }
16
+ export declare const TimePicker: FC<TimePickerProps>;
@@ -0,0 +1,79 @@
1
+ import { cn as e } from "../../../../../lib/utils.js";
2
+ import { Button as t } from "../../button/button.js";
3
+ import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../../popover/popover.js";
4
+ import { DateTimeInput as a } from "../shared/date-time-input/date-time-input.js";
5
+ import { ShortcutsPanel as o } from "../shared/shortcuts-panel/shortcuts-panel.js";
6
+ import { TimePickerPanel as s } from "../shared/time-picker-panel/time-picker-panel.js";
7
+ import { useTimePicker as c } from "./use-time-picker.js";
8
+ import { jsx as l, jsxs as u } from "react/jsx-runtime";
9
+ //#region libs/aura/src/components/ui/core/date-time-pickers/time-picker/time-picker.tsx
10
+ var d = ({ value: d, onChange: f, timeFormat: p = "24h", format: m, placeholder: h, shortcuts: g, defaultDate: _, className: v }) => {
11
+ let y = m ?? (p === "12h" ? "h:mm A" : "HH:mm"), { isOpen: b, hour: x, minute: S, amPm: C, displayValue: w, handleOpenChange: T, handleApply: E, handleHourChange: D, handleMinuteChange: O, handleAmPmChange: k, handleApplyShortcut: A, inputRef: j, popoverRef: M } = c({
12
+ value: d,
13
+ onChange: f,
14
+ timeFormat: p,
15
+ defaultDate: _
16
+ });
17
+ return /* @__PURE__ */ l("div", {
18
+ "data-slot": "time-picker",
19
+ className: e("relative w-full", v),
20
+ children: /* @__PURE__ */ u(n, {
21
+ open: b,
22
+ onOpenChange: T,
23
+ children: [/* @__PURE__ */ l(i, {
24
+ render: /* @__PURE__ */ l("div", {
25
+ ref: j,
26
+ className: "w-full"
27
+ }),
28
+ children: /* @__PURE__ */ l(a, {
29
+ value: w,
30
+ format: y,
31
+ placeholder: h,
32
+ isOpen: b,
33
+ variant: "time",
34
+ ariaLabel: "Time picker"
35
+ })
36
+ }), /* @__PURE__ */ l(r, {
37
+ ref: M,
38
+ className: "rounded-xl w-auto p-0",
39
+ side: "bottom",
40
+ align: "start",
41
+ children: /* @__PURE__ */ u("div", {
42
+ "data-slot": "time-picker-content",
43
+ className: "flex flex-col",
44
+ children: [/* @__PURE__ */ u("div", {
45
+ className: "flex flex-row",
46
+ children: [g && g.length > 0 && /* @__PURE__ */ l(o, {
47
+ shortcuts: g,
48
+ onShortcutClick: A
49
+ }), p === "12h" ? /* @__PURE__ */ l(s, {
50
+ hour: x,
51
+ minute: S,
52
+ amPm: C,
53
+ timeFormat: "12h",
54
+ onHourChange: D,
55
+ onMinuteChange: O,
56
+ onAmPmChange: k
57
+ }) : /* @__PURE__ */ l(s, {
58
+ hour: x,
59
+ minute: S,
60
+ timeFormat: "24h",
61
+ onHourChange: D,
62
+ onMinuteChange: O
63
+ })]
64
+ }), /* @__PURE__ */ l("div", {
65
+ className: "flex p-2 border-t border-border",
66
+ children: /* @__PURE__ */ l(t, {
67
+ variant: "secondary",
68
+ className: "w-full",
69
+ onClick: E,
70
+ children: "Apply"
71
+ })
72
+ })]
73
+ })
74
+ })]
75
+ })
76
+ });
77
+ };
78
+ //#endregion
79
+ export { d as TimePicker };
@@ -0,0 +1,23 @@
1
+ import { Dayjs } from 'dayjs';
2
+ import { TimeFormat } from '../utils/format-utils';
3
+ export interface UseTimePickerProps {
4
+ value: Dayjs | null;
5
+ onChange: (time: Dayjs | null) => void;
6
+ timeFormat?: TimeFormat;
7
+ defaultDate?: Dayjs;
8
+ }
9
+ export interface UseTimePickerReturn {
10
+ isOpen: boolean;
11
+ hour: number;
12
+ minute: number;
13
+ amPm: 'AM' | 'PM';
14
+ displayValue: Dayjs | null;
15
+ handleOpenChange: (open: boolean) => void;
16
+ handleApply: () => void;
17
+ handleHourChange: (hour: number) => void;
18
+ handleMinuteChange: (minute: number) => void;
19
+ handleAmPmChange: (amPm: 'AM' | 'PM') => void;
20
+ handleApplyShortcut: (shortcutValue: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => void;
21
+ inputRef: React.RefObject<HTMLDivElement>;
22
+ popoverRef: React.RefObject<HTMLDivElement>;
23
+ }
@@ -0,0 +1,3 @@
1
+ import { UseTimePickerProps, UseTimePickerReturn } from './types';
2
+ export type { UseTimePickerProps, UseTimePickerReturn };
3
+ export declare const useTimePicker: ({ value, onChange, timeFormat, defaultDate, }: UseTimePickerProps) => UseTimePickerReturn;
@@ -0,0 +1,42 @@
1
+ import { usePopoverState as e } from "../shared/hooks/use-popover-state.js";
2
+ import { useTimeState as t } from "../shared/hooks/use-time-state.js";
3
+ import { useCallback as n, useEffect as r, useRef as i } from "react";
4
+ import a from "dayjs";
5
+ //#region libs/aura/src/components/ui/core/date-time-pickers/time-picker/use-time-picker.ts
6
+ var o = ({ value: o, onChange: s, timeFormat: c = "24h", defaultDate: l = a() }) => {
7
+ let u = i(() => {}), { isOpen: d, setIsOpen: f, popoverRef: p, inputRef: m } = e({ onBackspace: n(() => u.current(), []) }), { hour: h, minute: g, amPm: _, hour24: v, handleHourChange: y, handleMinuteChange: b, handleAmPmChange: x, resetTime: S } = t({
8
+ initialHour: o?.hour() ?? 9,
9
+ initialMinute: o?.minute() ?? 0,
10
+ timeFormat: c
11
+ }), C = o ?? l, w = (e) => e.hour(v).minute(g).second(0).millisecond(0), T = (e) => C.hour(e.hour()).minute(e.minute()).second(0).millisecond(0), E = d ? w(C) : o, D = () => {
12
+ S(o?.hour() ?? 9, o?.minute() ?? 0);
13
+ }, O = () => {
14
+ o !== null && (s(null), D());
15
+ };
16
+ return r(() => {
17
+ u.current = O;
18
+ }), {
19
+ isOpen: d,
20
+ hour: h,
21
+ minute: g,
22
+ amPm: _,
23
+ displayValue: E,
24
+ handleOpenChange: (e) => {
25
+ D(), f(e);
26
+ },
27
+ handleApply: () => {
28
+ s(w(C)), f(!1);
29
+ },
30
+ handleHourChange: y,
31
+ handleMinuteChange: b,
32
+ handleAmPmChange: x,
33
+ handleApplyShortcut: (e) => {
34
+ let t = Array.isArray(e) ? e[0] : e;
35
+ s(t ? T(t) : null), f(!1);
36
+ },
37
+ inputRef: m,
38
+ popoverRef: p
39
+ };
40
+ };
41
+ //#endregion
42
+ export { o as useTimePicker };
@@ -1,52 +1,39 @@
1
- import r from "dayjs";
2
- import c from "dayjs/plugin/isBetween.js";
3
- import d from "dayjs/plugin/isSameOrBefore.js";
4
- import m from "dayjs/plugin/weekOfYear.js";
5
- import { DAYS_IN_WEEK as u } from "../shared/constants.js";
6
- r.extend(c);
7
- r.extend(d);
8
- r.extend(m);
9
- function p(e, t) {
10
- const n = e, a = n.startOf("month").startOf("week"), i = n.endOf("month").endOf("week"), f = [];
11
- let s = a;
12
- for (; s.isSameOrBefore(i, "day"); )
13
- f.push(s), s = s.add(1, "day");
14
- return f;
15
- }
16
- function g(e, t, n) {
17
- return !t || !n || !e.isValid() || !t.isValid() || !n.isValid() || t.isAfter(n, "day") ? !1 : e.isBetween(t, n, "day", "[]");
18
- }
19
- function b(e, t) {
20
- return e.month() !== t.month();
21
- }
22
- function M(e, t) {
23
- return e.isSame(r(), "day");
24
- }
25
- function S(e, t) {
26
- const a = r().startOf("week");
27
- return Array.from({ length: u }, (l, i) => a.add(i, "day").format("dd"));
28
- }
29
- function y(e) {
30
- return e.week();
31
- }
32
- function W(e) {
33
- const t = [];
34
- for (let n = 0; n < e.length; n += u) {
35
- const o = e[n];
36
- o && t.push(y(o));
37
- }
38
- return t;
39
- }
40
- function N(e, t) {
41
- return !e || !t ? !1 : e.isSame(t, "day");
42
- }
43
- export {
44
- p as getCalendarDays,
45
- y as getWeekNumber,
46
- W as getWeekNumbers,
47
- S as getWeekdayNames,
48
- g as isDateInRange,
49
- b as isOutsideMonth,
50
- N as isSameDay,
51
- M as isToday
52
- };
1
+ import e from "dayjs";
2
+ import t from "dayjs/plugin/isBetween.js";
3
+ import n from "dayjs/plugin/isSameOrBefore.js";
4
+ import r from "dayjs/plugin/weekOfYear.js";
5
+ e.extend(t), e.extend(n), e.extend(r);
6
+ function i(e, t) {
7
+ let n = t ? e.locale(t) : e, r = n.startOf("month").startOf("week"), i = n.endOf("month").endOf("week"), a = [], o = r;
8
+ for (; o.isSameOrBefore(i, "day");) a.push(o), o = o.add(1, "day");
9
+ return a;
10
+ }
11
+ function a(e, t, n) {
12
+ return !t || !n || !e.isValid() || !t.isValid() || !n.isValid() || t.isAfter(n, "day") ? !1 : e.isBetween(t, n, "day", "[]");
13
+ }
14
+ function o(e, t) {
15
+ return e.month() !== t.month();
16
+ }
17
+ function s(t, n) {
18
+ return t.isSame(n ?? e(), "day");
19
+ }
20
+ function c(t, n) {
21
+ let r = n || e(), i = (t ? r.locale(t) : r).startOf("week");
22
+ return Array.from({ length: 7 }, (e, t) => i.add(t, "day").format("dd"));
23
+ }
24
+ function l(e) {
25
+ return e.week();
26
+ }
27
+ function u(e) {
28
+ let t = [];
29
+ for (let n = 0; n < e.length; n += 7) {
30
+ let r = e[n];
31
+ r && t.push(l(r));
32
+ }
33
+ return t;
34
+ }
35
+ function d(e, t) {
36
+ return !e || !t ? !1 : e.isSame(t, "day");
37
+ }
38
+ //#endregion
39
+ export { i as getCalendarDays, l as getWeekNumber, u as getWeekNumbers, c as getWeekdayNames, a as isDateInRange, o as isOutsideMonth, d as isSameDay, s as isToday };