@kalyx/react 0.2.0

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 (127) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/LICENSE +21 -0
  3. package/README.md +88 -0
  4. package/dist/components/DatePicker/Calendar.d.ts +23 -0
  5. package/dist/components/DatePicker/Calendar.d.ts.map +1 -0
  6. package/dist/components/DatePicker/Calendar.js +127 -0
  7. package/dist/components/DatePicker/Calendar.js.map +1 -0
  8. package/dist/components/DatePicker/Input.d.ts +7 -0
  9. package/dist/components/DatePicker/Input.d.ts.map +1 -0
  10. package/dist/components/DatePicker/Input.js +73 -0
  11. package/dist/components/DatePicker/Input.js.map +1 -0
  12. package/dist/components/DatePicker/MonthGrid.d.ts +34 -0
  13. package/dist/components/DatePicker/MonthGrid.d.ts.map +1 -0
  14. package/dist/components/DatePicker/MonthGrid.js +54 -0
  15. package/dist/components/DatePicker/MonthGrid.js.map +1 -0
  16. package/dist/components/DatePicker/Popover.d.ts +6 -0
  17. package/dist/components/DatePicker/Popover.d.ts.map +1 -0
  18. package/dist/components/DatePicker/Popover.js +72 -0
  19. package/dist/components/DatePicker/Popover.js.map +1 -0
  20. package/dist/components/DatePicker/Root.d.ts +46 -0
  21. package/dist/components/DatePicker/Root.d.ts.map +1 -0
  22. package/dist/components/DatePicker/Root.js +90 -0
  23. package/dist/components/DatePicker/Root.js.map +1 -0
  24. package/dist/components/DatePicker/Trigger.d.ts +6 -0
  25. package/dist/components/DatePicker/Trigger.d.ts.map +1 -0
  26. package/dist/components/DatePicker/Trigger.js +21 -0
  27. package/dist/components/DatePicker/Trigger.js.map +1 -0
  28. package/dist/components/DatePicker/YearGrid.d.ts +29 -0
  29. package/dist/components/DatePicker/YearGrid.d.ts.map +1 -0
  30. package/dist/components/DatePicker/YearGrid.js +53 -0
  31. package/dist/components/DatePicker/YearGrid.js.map +1 -0
  32. package/dist/components/DatePicker/index.d.ts +48 -0
  33. package/dist/components/DatePicker/index.d.ts.map +1 -0
  34. package/dist/components/DatePicker/index.js +42 -0
  35. package/dist/components/DatePicker/index.js.map +1 -0
  36. package/dist/components/DateTimePicker/Input.d.ts +12 -0
  37. package/dist/components/DateTimePicker/Input.d.ts.map +1 -0
  38. package/dist/components/DateTimePicker/Input.js +41 -0
  39. package/dist/components/DateTimePicker/Input.js.map +1 -0
  40. package/dist/components/DateTimePicker/Root.d.ts +60 -0
  41. package/dist/components/DateTimePicker/Root.d.ts.map +1 -0
  42. package/dist/components/DateTimePicker/Root.js +140 -0
  43. package/dist/components/DateTimePicker/Root.js.map +1 -0
  44. package/dist/components/DateTimePicker/index.d.ts +55 -0
  45. package/dist/components/DateTimePicker/index.d.ts.map +1 -0
  46. package/dist/components/DateTimePicker/index.js +55 -0
  47. package/dist/components/DateTimePicker/index.js.map +1 -0
  48. package/dist/components/RangePicker/Calendar.d.ts +24 -0
  49. package/dist/components/RangePicker/Calendar.d.ts.map +1 -0
  50. package/dist/components/RangePicker/Calendar.js +134 -0
  51. package/dist/components/RangePicker/Calendar.js.map +1 -0
  52. package/dist/components/RangePicker/Input.d.ts +14 -0
  53. package/dist/components/RangePicker/Input.d.ts.map +1 -0
  54. package/dist/components/RangePicker/Input.js +38 -0
  55. package/dist/components/RangePicker/Input.js.map +1 -0
  56. package/dist/components/RangePicker/Popover.d.ts +6 -0
  57. package/dist/components/RangePicker/Popover.d.ts.map +1 -0
  58. package/dist/components/RangePicker/Popover.js +71 -0
  59. package/dist/components/RangePicker/Popover.js.map +1 -0
  60. package/dist/components/RangePicker/Presets.d.ts +49 -0
  61. package/dist/components/RangePicker/Presets.d.ts.map +1 -0
  62. package/dist/components/RangePicker/Presets.js +117 -0
  63. package/dist/components/RangePicker/Presets.js.map +1 -0
  64. package/dist/components/RangePicker/Root.d.ts +40 -0
  65. package/dist/components/RangePicker/Root.d.ts.map +1 -0
  66. package/dist/components/RangePicker/Root.js +138 -0
  67. package/dist/components/RangePicker/Root.js.map +1 -0
  68. package/dist/components/RangePicker/index.d.ts +48 -0
  69. package/dist/components/RangePicker/index.d.ts.map +1 -0
  70. package/dist/components/RangePicker/index.js +43 -0
  71. package/dist/components/RangePicker/index.js.map +1 -0
  72. package/dist/components/TimePicker/AmPmToggle.d.ts +15 -0
  73. package/dist/components/TimePicker/AmPmToggle.d.ts.map +1 -0
  74. package/dist/components/TimePicker/AmPmToggle.js +29 -0
  75. package/dist/components/TimePicker/AmPmToggle.js.map +1 -0
  76. package/dist/components/TimePicker/HourList.d.ts +18 -0
  77. package/dist/components/TimePicker/HourList.d.ts.map +1 -0
  78. package/dist/components/TimePicker/HourList.js +71 -0
  79. package/dist/components/TimePicker/HourList.js.map +1 -0
  80. package/dist/components/TimePicker/Input.d.ts +9 -0
  81. package/dist/components/TimePicker/Input.d.ts.map +1 -0
  82. package/dist/components/TimePicker/Input.js +37 -0
  83. package/dist/components/TimePicker/Input.js.map +1 -0
  84. package/dist/components/TimePicker/MinuteList.d.ts +15 -0
  85. package/dist/components/TimePicker/MinuteList.d.ts.map +1 -0
  86. package/dist/components/TimePicker/MinuteList.js +62 -0
  87. package/dist/components/TimePicker/MinuteList.js.map +1 -0
  88. package/dist/components/TimePicker/Root.d.ts +38 -0
  89. package/dist/components/TimePicker/Root.d.ts.map +1 -0
  90. package/dist/components/TimePicker/Root.js +40 -0
  91. package/dist/components/TimePicker/Root.js.map +1 -0
  92. package/dist/components/TimePicker/index.d.ts +32 -0
  93. package/dist/components/TimePicker/index.d.ts.map +1 -0
  94. package/dist/components/TimePicker/index.js +27 -0
  95. package/dist/components/TimePicker/index.js.map +1 -0
  96. package/dist/context/DatePickerContext.d.ts +49 -0
  97. package/dist/context/DatePickerContext.d.ts.map +1 -0
  98. package/dist/context/DatePickerContext.js +18 -0
  99. package/dist/context/DatePickerContext.js.map +1 -0
  100. package/dist/context/RangePickerContext.d.ts +53 -0
  101. package/dist/context/RangePickerContext.d.ts.map +1 -0
  102. package/dist/context/RangePickerContext.js +18 -0
  103. package/dist/context/RangePickerContext.js.map +1 -0
  104. package/dist/context/TimePickerContext.d.ts +29 -0
  105. package/dist/context/TimePickerContext.d.ts.map +1 -0
  106. package/dist/context/TimePickerContext.js +18 -0
  107. package/dist/context/TimePickerContext.js.map +1 -0
  108. package/dist/hooks/useDatePicker.d.ts +63 -0
  109. package/dist/hooks/useDatePicker.d.ts.map +1 -0
  110. package/dist/hooks/useDatePicker.js +82 -0
  111. package/dist/hooks/useDatePicker.js.map +1 -0
  112. package/dist/hooks/useRangePicker.d.ts +67 -0
  113. package/dist/hooks/useRangePicker.d.ts.map +1 -0
  114. package/dist/hooks/useRangePicker.js +116 -0
  115. package/dist/hooks/useRangePicker.js.map +1 -0
  116. package/dist/hooks/useTimePicker.d.ts +63 -0
  117. package/dist/hooks/useTimePicker.d.ts.map +1 -0
  118. package/dist/hooks/useTimePicker.js +69 -0
  119. package/dist/hooks/useTimePicker.js.map +1 -0
  120. package/dist/index.cjs +2150 -0
  121. package/dist/index.cjs.map +1 -0
  122. package/dist/index.d.cts +744 -0
  123. package/dist/index.d.ts +17 -0
  124. package/dist/index.d.ts.map +1 -0
  125. package/dist/index.js +13 -0
  126. package/dist/index.js.map +1 -0
  127. package/package.json +67 -0
@@ -0,0 +1,116 @@
1
+ import { useCallback, useId, useRef, useState } from 'react';
2
+ import { DateFnsAdapter, getCalendarDays } from '@kalyx/core';
3
+ const EMPTY_RANGE = { start: null, end: null };
4
+ /**
5
+ * RangePicker 상태 관리 Hook.
6
+ * 컴포넌트 없이 완전 커스텀 UI를 만들 때 사용한다.
7
+ *
8
+ * @example
9
+ * ```tsx
10
+ * function MyRangePicker() {
11
+ * const { value, calendar, selectDate, selectingTarget } = useRangePicker({
12
+ * onChange: (range) => console.log(range.start, range.end),
13
+ * });
14
+ * // selectingTarget === 'start' → 시작일 선택 대기
15
+ * // selectingTarget === 'end' → 종료일 선택 대기
16
+ * }
17
+ * ```
18
+ */
19
+ export function useRangePicker(options = {}) {
20
+ const { value: controlledValue, defaultValue, onChange, disabled = [], weekStartsOn = 0, adapter = DateFnsAdapter, } = options;
21
+ const pickerId = useId();
22
+ const isControlled = useRef(controlledValue !== undefined).current;
23
+ const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? EMPTY_RANGE);
24
+ const currentValue = isControlled ? (controlledValue ?? EMPTY_RANGE) : uncontrolledValue;
25
+ const [isOpen, setIsOpen] = useState(false);
26
+ const [selectingTarget, setSelectingTarget] = useState('start');
27
+ const [hoverDate, setHoverDate] = useState(null);
28
+ const [viewMonth, setViewMonth] = useState(currentValue.start ?? adapter.today());
29
+ const [focusedDate, setFocusedDate] = useState(currentValue.start ?? adapter.today());
30
+ const setRange = useCallback((range) => {
31
+ if (!isControlled) {
32
+ setUncontrolledValue(range);
33
+ }
34
+ onChange?.(range);
35
+ }, [isControlled, onChange]);
36
+ const selectDate = useCallback((iso) => {
37
+ if (selectingTarget === 'start') {
38
+ setRange({ start: iso, end: null });
39
+ setSelectingTarget('end');
40
+ setHoverDate(null);
41
+ }
42
+ else {
43
+ const start = currentValue.start;
44
+ if (!start) {
45
+ setRange({ start: iso, end: null });
46
+ setSelectingTarget('end');
47
+ return;
48
+ }
49
+ const newRange = adapter.isBefore(iso, start)
50
+ ? { start: iso, end: start }
51
+ : { start, end: iso };
52
+ setRange(newRange);
53
+ setSelectingTarget('start');
54
+ setHoverDate(null);
55
+ setIsOpen(false);
56
+ }
57
+ }, [selectingTarget, currentValue.start, adapter, setRange]);
58
+ const open = useCallback(() => {
59
+ setIsOpen(true);
60
+ const target = currentValue.start ?? adapter.today();
61
+ setViewMonth(target);
62
+ setFocusedDate(target);
63
+ if (currentValue.start && currentValue.end) {
64
+ setSelectingTarget('start');
65
+ }
66
+ }, [currentValue, adapter]);
67
+ const close = useCallback(() => {
68
+ setIsOpen(false);
69
+ setHoverDate(null);
70
+ }, []);
71
+ const toggle = useCallback(() => {
72
+ if (isOpen)
73
+ close();
74
+ else
75
+ open();
76
+ }, [isOpen, open, close]);
77
+ const previousMonth = useCallback(() => {
78
+ const newMonth = adapter.addMonths(viewMonth, -1);
79
+ setViewMonth(newMonth);
80
+ setFocusedDate(adapter.startOfMonth(newMonth));
81
+ }, [adapter, viewMonth]);
82
+ const nextMonth = useCallback(() => {
83
+ const newMonth = adapter.addMonths(viewMonth, 1);
84
+ setViewMonth(newMonth);
85
+ setFocusedDate(adapter.startOfMonth(newMonth));
86
+ }, [adapter, viewMonth]);
87
+ const calendar = getCalendarDays(viewMonth, adapter, {
88
+ weekStartsOn,
89
+ focusedDate,
90
+ disabled,
91
+ range: currentValue,
92
+ rangeHover: hoverDate,
93
+ });
94
+ return {
95
+ value: currentValue,
96
+ selectingTarget,
97
+ selectDate,
98
+ setRange,
99
+ isOpen,
100
+ open,
101
+ close,
102
+ toggle,
103
+ hoverDate,
104
+ setHoverDate,
105
+ viewMonth,
106
+ setViewMonth,
107
+ calendar,
108
+ focusedDate,
109
+ setFocusedDate,
110
+ previousMonth,
111
+ nextMonth,
112
+ pickerId,
113
+ adapter,
114
+ };
115
+ }
116
+ //# sourceMappingURL=useRangePicker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useRangePicker.js","sourceRoot":"","sources":["../../src/hooks/useRangePicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAW9D,MAAM,WAAW,GAAc,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;AAoD1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,cAAc,CAAC,UAAiC,EAAE;IAChE,MAAM,EACJ,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,cAAc,GACzB,GAAG,OAAO,CAAC;IAEZ,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,MAAM,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC,OAAO,CAAC;IAEnE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CACxD,YAAY,IAAI,WAAW,CAC5B,CAAC;IAEF,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,eAAe,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAEzF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAuB,OAAO,CAAC,CAAC;IACtF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAuB,IAAI,CAAC,CAAC;IACvE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CACxC,YAAY,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,EAAE,CACtC,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAC5C,YAAY,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,EAAE,CACtC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,GAAkB,EAAE,EAAE;QACrB,IAAI,eAAe,KAAK,OAAO,EAAE,CAAC;YAChC,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;YACpC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC1B,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;gBACpC,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,MAAM,QAAQ,GAAc,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC;gBACtD,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE;gBAC5B,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;YAExB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,kBAAkB,CAAC,OAAO,CAAC,CAAC;YAC5B,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EACD,CAAC,eAAe,EAAE,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CACzD,CAAC;IAEF,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;QACrD,YAAY,CAAC,MAAM,CAAC,CAAC;QACrB,cAAc,CAAC,MAAM,CAAC,CAAC;QACvB,IAAI,YAAY,CAAC,KAAK,IAAI,YAAY,CAAC,GAAG,EAAE,CAAC;YAC3C,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,IAAI,MAAM;YAAE,KAAK,EAAE,CAAC;;YACf,IAAI,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1B,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QAClD,YAAY,CAAC,QAAQ,CAAC,CAAC;QACvB,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QACjD,YAAY,CAAC,QAAQ,CAAC,CAAC;QACvB,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,MAAM,QAAQ,GAAG,eAAe,CAAC,SAAS,EAAE,OAAO,EAAE;QACnD,YAAY;QACZ,WAAW;QACX,QAAQ;QACR,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,SAAS;KACtB,CAAC,CAAC;IAEH,OAAO;QACL,KAAK,EAAE,YAAY;QACnB,eAAe;QACf,UAAU;QACV,QAAQ;QACR,MAAM;QACN,IAAI;QACJ,KAAK;QACL,MAAM;QACN,SAAS;QACT,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,QAAQ;QACR,WAAW;QACX,cAAc;QACd,aAAa;QACb,SAAS;QACT,QAAQ;QACR,OAAO;KACR,CAAC;AACJ,CAAC"}
@@ -0,0 +1,63 @@
1
+ import type { ISODateString, TimeValue } from '@kalyx/core';
2
+ import type { TimePickerFormat } from '../context/TimePickerContext.js';
3
+ export interface UseTimePickerOptions {
4
+ /** 선택된 시간 (제어 모드) */
5
+ value?: ISODateString | null;
6
+ /** 초기 시간 (비제어 모드) */
7
+ defaultValue?: ISODateString;
8
+ /** 시간 변경 콜백 */
9
+ onChange?: (value: ISODateString | null) => void;
10
+ /** 12/24시간제 */
11
+ format?: TimePickerFormat;
12
+ /** 분 step */
13
+ step?: number;
14
+ /** 초 표시 */
15
+ withSeconds?: boolean;
16
+ }
17
+ export interface UseTimePickerReturn {
18
+ /** 현재 ISO datetime 값 */
19
+ value: ISODateString | null;
20
+ /** 현재 시간 (TimeValue) */
21
+ currentTime: TimeValue;
22
+ /** 시간 부분 변경 */
23
+ setTime: (partial: Partial<TimeValue>) => void;
24
+ /** 시(hour) 직접 설정 (12h 모드면 1-12, 24h 모드면 0-23) */
25
+ setHour: (hour: number) => void;
26
+ /** 분 설정 */
27
+ setMinute: (minute: number) => void;
28
+ /** 초 설정 */
29
+ setSecond: (second: number) => void;
30
+ /** AM/PM 변경 (12h 모드 전용) */
31
+ setPeriod: (period: 'AM' | 'PM') => void;
32
+ /** 사용 가능한 시 리스트 */
33
+ availableHours: number[];
34
+ /** 사용 가능한 분 리스트 (step 적용) */
35
+ availableMinutes: number[];
36
+ /** 12/24h 모드 */
37
+ format: TimePickerFormat;
38
+ /** 현재 표시용 시 (12h 모드면 1-12) */
39
+ displayHour: number;
40
+ /** 현재 AM/PM (12h 모드 전용, 24h면 null) */
41
+ period: 'AM' | 'PM' | null;
42
+ /** 고유 ID */
43
+ pickerId: string;
44
+ }
45
+ /**
46
+ * TimePicker 상태 관리 Hook.
47
+ * 컴포넌트 없이 완전 커스텀 UI를 구현할 때 사용한다.
48
+ *
49
+ * @example
50
+ * ```tsx
51
+ * function MyTimePicker() {
52
+ * const {
53
+ * currentTime, displayHour, period,
54
+ * availableHours, availableMinutes,
55
+ * setHour, setMinute, setPeriod,
56
+ * } = useTimePicker({ format: '12h', step: 15 });
57
+ * // displayHour = 1-12, period = "AM" | "PM"
58
+ * // availableMinutes = [0, 15, 30, 45]
59
+ * }
60
+ * ```
61
+ */
62
+ export declare function useTimePicker(options?: UseTimePickerOptions): UseTimePickerReturn;
63
+ //# sourceMappingURL=useTimePicker.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTimePicker.d.ts","sourceRoot":"","sources":["../../src/hooks/useTimePicker.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAExE,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,qBAAqB;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,eAAe;IACf,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,aAAa;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,wBAAwB;IACxB,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,wBAAwB;IACxB,WAAW,EAAE,SAAS,CAAC;IACvB,eAAe;IACf,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IAC/C,iDAAiD;IACjD,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,WAAW;IACX,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW;IACX,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,2BAA2B;IAC3B,SAAS,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,mBAAmB;IACnB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,gBAAgB;IAChB,MAAM,EAAE,gBAAgB,CAAC;IACzB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY;IACZ,QAAQ,EAAE,MAAM,CAAC;CAClB;AASD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAAC,OAAO,GAAE,oBAAyB,GAAG,mBAAmB,CA6ErF"}
@@ -0,0 +1,69 @@
1
+ import { useCallback, useId, useMemo, useRef, useState } from 'react';
2
+ import { generateHours, generateMinutes, getTime, setTime as setTimeOnIso, to12Hour, to24Hour, } from '@kalyx/core';
3
+ function getDefaultIso() {
4
+ const now = new Date();
5
+ return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())).toISOString();
6
+ }
7
+ /**
8
+ * TimePicker 상태 관리 Hook.
9
+ * 컴포넌트 없이 완전 커스텀 UI를 구현할 때 사용한다.
10
+ *
11
+ * @example
12
+ * ```tsx
13
+ * function MyTimePicker() {
14
+ * const {
15
+ * currentTime, displayHour, period,
16
+ * availableHours, availableMinutes,
17
+ * setHour, setMinute, setPeriod,
18
+ * } = useTimePicker({ format: '12h', step: 15 });
19
+ * // displayHour = 1-12, period = "AM" | "PM"
20
+ * // availableMinutes = [0, 15, 30, 45]
21
+ * }
22
+ * ```
23
+ */
24
+ export function useTimePicker(options = {}) {
25
+ const { value: controlledValue, defaultValue, onChange, format = '24h', step = 1, } = options;
26
+ const pickerId = useId();
27
+ const isControlled = useRef(controlledValue !== undefined).current;
28
+ const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? null);
29
+ const currentValue = isControlled ? (controlledValue ?? null) : uncontrolledValue;
30
+ const baseIso = currentValue ?? getDefaultIso();
31
+ const currentTime = useMemo(() => getTime(baseIso), [baseIso]);
32
+ const setTime = useCallback((partial) => {
33
+ const newIso = setTimeOnIso(baseIso, partial);
34
+ if (!isControlled) {
35
+ setUncontrolledValue(newIso);
36
+ }
37
+ onChange?.(newIso);
38
+ }, [baseIso, isControlled, onChange]);
39
+ const period = format === '12h' ? to12Hour(currentTime.hours).period : null;
40
+ const displayHour = format === '12h' ? to12Hour(currentTime.hours).hours12 : currentTime.hours;
41
+ const setHour = useCallback((hour) => {
42
+ const hours24 = format === '12h' && period ? to24Hour(hour, period) : hour;
43
+ setTime({ hours: hours24 });
44
+ }, [format, period, setTime]);
45
+ const setMinute = useCallback((minute) => setTime({ minutes: minute }), [setTime]);
46
+ const setSecond = useCallback((second) => setTime({ seconds: second }), [setTime]);
47
+ const setPeriod = useCallback((newPeriod) => {
48
+ if (format !== '12h')
49
+ return;
50
+ const newHours24 = to24Hour(displayHour, newPeriod);
51
+ setTime({ hours: newHours24 });
52
+ }, [format, displayHour, setTime]);
53
+ return {
54
+ value: currentValue,
55
+ currentTime,
56
+ setTime,
57
+ setHour,
58
+ setMinute,
59
+ setSecond,
60
+ setPeriod,
61
+ availableHours: generateHours(format),
62
+ availableMinutes: generateMinutes(step),
63
+ format,
64
+ displayHour,
65
+ period,
66
+ pickerId,
67
+ };
68
+ }
69
+ //# sourceMappingURL=useTimePicker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTimePicker.js","sourceRoot":"","sources":["../../src/hooks/useTimePicker.ts"],"names":[],"mappings":"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"}