@dotss/tictoccroc 0.12.1 → 0.13.0

package/dist/TimePicker-eObMuz3A.js

@@ -0,0 +1,128 @@
+import { formatTimeLabel as e, getEndTimeColumn as t, getStartTimeColumn as n, isNextDayTime as r, shouldResetEndTime as i } from "./shared/components/TimePicker/TimePicker.utils.mjs";
+import { forwardRef as a, useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { ChainPicker as u, Flexbox as d, Label as f, Typography as p } from "@dotss/ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import g from "@emotion/styled";
+//#region shared/components/TimePicker/TimePicker.styles.ts
+var _ = g.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: e } }) => e.content(7)}px;
+  width: 100%;
+  padding: ${({ theme: { spacing: e } }) => e.content(2)}px 0;
+`, v = g.div`
+  position: absolute;
+  width: 100%;
+  height: 54px;
+  background: ${({ theme: e }) => e.palette.background.primary};
+  border-radius: 12px;
+`;
+//#endregion
+//#region shared/components/TimePicker/TimePicker.tsx
+function y(t, n, i) {
+	let a = i && r(t.value), { period: o, time: s, ariaText: c } = e(t.label, a);
+	return /* @__PURE__ */ h(d, {
+		gap: 1,
+		alignItems: "center",
+		justifyContent: "center",
+		"aria-label": c,
+		inlineCSS: i ? { width: "117px" } : { width: "82px" },
+		children: [
+			a && /* @__PURE__ */ m(f, {
+				size: "xSmall",
+				variant: n ? "solid" : "outlined",
+				color: "yellow",
+				"aria-hidden": !0,
+				children: "다음 날"
+			}),
+			/* @__PURE__ */ m(p, {
+				tag: "span",
+				variant: n ? "h5M" : "b5M",
+				children: o
+			}),
+			/* @__PURE__ */ m(p, {
+				tag: "span",
+				variant: n ? "h2M" : "h4M",
+				children: s
+			})
+		]
+	});
+}
+var b = a(function({ onChange: e, onChangeStartTime: r, onChangeEndTime: a, startTime: d = 9, endTime: f = 12, range: g = [0, 24], step: b = 1, maxDuration: x, startTimeChainPickerProps: S, endTimeChainPickerProps: C, timePickerHighlightProps: w, renderStartTimeLabel: T, renderEndTimeLabel: E, inlineCSS: D, ...O }, k) {
+	let [A, j] = l(d), [M, N] = l(f), P = c(n(g, b, x)), F = c(t(d, g, b, x)), I = o((e, t) => y(e, t, !1), []), L = o((e, t) => y(e, t, x !== void 0), [x]), R = (e) => {
+		j(e), F.current = t(e, g, b, x), i(e, f, b, x) && N(F.current[0].value);
+	}, z = (e) => {
+		N(e);
+	};
+	return s(() => {
+		F.current = t(d, g, b, x);
+	}, [
+		d,
+		f,
+		g,
+		b,
+		x
+	]), s(() => {
+		j(d);
+	}, [d]), s(() => {
+		i(d, f, b, x) ? N(F.current[0].value) : N(f);
+	}, [
+		d,
+		f,
+		b,
+		x
+	]), s(() => {
+		e(A, M);
+	}, [A, M]), s(() => {
+		r?.(A);
+	}, [A]), s(() => {
+		a?.(M);
+	}, [M]), /* @__PURE__ */ h(_, {
+		ref: k,
+		css: D,
+		role: "group",
+		"aria-label": "시간 선택",
+		...O,
+		children: [
+			/* @__PURE__ */ m(v, {
+				...w,
+				"aria-hidden": !0
+			}),
+			/* @__PURE__ */ m(u, {
+				column: P.current,
+				value: d,
+				onChange: R,
+				renderLabel: T || I,
+				"aria-label": "시작 시간 선택",
+				inlineCSS: {
+					"& > li": { padding: 0 },
+					...S?.inlineCSS
+				},
+				...S
+			}),
+			/* @__PURE__ */ m(p, {
+				variant: "h5M",
+				color: "grey.50",
+				"aria-hidden": !0,
+				inlineCSS: { zIndex: 1 },
+				children: "부터"
+			}),
+			/* @__PURE__ */ m(u, {
+				column: F.current,
+				value: f,
+				onChange: z,
+				renderLabel: E || L,
+				"aria-label": "종료 시간 선택",
+				inlineCSS: {
+					"& > li": { padding: 0 },
+					...C?.inlineCSS
+				},
+				...C
+			})
+		]
+	});
+});
+//#endregion
+export { b as t };

package/dist/shared/components/TimePicker/TimePicker.d.ts

@@ -1,10 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { ChainPicker } from '@dotss/ui';
+import { ChainPickerItem, ChainPicker } from '@dotss/ui';
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
-export interface TimePickerItem {
-    label: string;
-    value: number;
-}
+export type TimePickerItem = ChainPickerItem;
 export interface TimePickerProps extends Omit<FlexboxProps, 'onChange'> {
     onChange: (startTime: number, endTime: number) => void;
     onChangeStartTime?: (startTime: number) => void;
@@ -13,6 +10,22 @@ export interface TimePickerProps extends Omit<FlexboxProps, 'onChange'> {
     endTime?: number;
     step?: number;
     range?: [number, number];
+    /**
+     * 시작부터 종료까지 고를 수 있는 최대 시간(시간 단위)이다.
+     * 이 값을 지정하면 종료가 자정을 넘을 수 있다.
+     * 종료 열은 `start + step`부터 `start + maxDuration`까지이고 `range[1]`은 쓰지 않는다.
+     * 시작 열은 `range[1] - 0.5`까지다.
+     *
+     * 24 이상인 종료 값은 다음 날 시각이고(28은 다음 날 04:00), `onChange`와
+     * `onChangeEndTime`에도 그대로 넘어간다.
+     *
+     * `step` 이상 24 이하여야 한다. `step`보다 작으면 종료 열이 비어 오류가 나고,
+     * 24보다 크면 같은 시각이 두 번 나올 수 있다.
+     *
+     * 시작 열은 마운트할 때 한 번만 만든다. 마운트 뒤 `maxDuration`, `range`, `step`이
+     * 바뀔 수 있으면 `key`로 다시 마운트한다.
+     */
+    maxDuration?: number;
     startTimeChainPickerProps?: Omit<Parameters<typeof ChainPicker>[0], 'column' | 'value' | 'onChange' | 'renderLabel'>;
     endTimeChainPickerProps?: Omit<Parameters<typeof ChainPicker>[0], 'column' | 'value' | 'onChange' | 'renderLabel'>;
     timePickerHighlightProps?: HTMLAttributes<HTMLDivElement>;

package/dist/shared/components/TimePicker/TimePicker.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../../../TimePicker-BwACyeBR.js";
+import { t as e } from "../../../TimePicker-eObMuz3A.js";
 export { e as default };

package/dist/shared/components/TimePicker/TimePicker.utils.d.ts

@@ -0,0 +1,11 @@
+import { ChainPickerItem } from '@dotss/ui';
+export declare const NEXT_DAY_LABEL = "\uB2E4\uC74C \uB0A0";
+export declare function getStartTimeColumn(range: [number, number], step: number, maxDuration?: number): ChainPickerItem[];
+export declare function getEndTimeColumn(startTime: number, range: [number, number], step: number, maxDuration?: number): ChainPickerItem[];
+export declare function shouldResetEndTime(startTime: number, endTime: number, step: number, maxDuration?: number): boolean;
+export declare function isNextDayTime(value: number): boolean;
+export declare function formatTimeLabel(label: string, isNextDay: boolean): {
+    period: string;
+    time: string;
+    ariaText: string;
+};

package/dist/shared/components/TimePicker/TimePicker.utils.mjs

@@ -0,0 +1,38 @@
+import e from "../../utils/getTimeRange/index.mjs";
+//#region shared/components/TimePicker/TimePicker.utils.ts
+var t = .5, n = 24, r = "다음 날";
+function i(r, i, a) {
+	let o = a === void 0 ? r[1] - i : r[1] - t;
+	return e(0, n, {
+		minTime: r[0],
+		maxTime: o
+	});
+}
+function a(t, r, i, a) {
+	return a === void 0 ? e(0, n, {
+		minTime: t + i > r[1] ? r[1] : t + i,
+		maxTime: r[1]
+	}) : e(0, n * 2, {
+		minTime: t + i,
+		maxTime: t + a
+	}).map((e) => ({
+		...e,
+		ariaValueText: c(e.label, s(e.value)).ariaText
+	}));
+}
+function o(e, n, r, i) {
+	return i === void 0 ? e >= n - t : n < e + r || n > e + i;
+}
+function s(e) {
+	return e >= n;
+}
+function c(e, t) {
+	let [n, i] = e.split(":").map(Number), a = n >= 12 ? "오후" : "오전", o = n % 12 || 12;
+	return {
+		period: a,
+		time: `${o}:${i.toString().padStart(2, "0")}`,
+		ariaText: `${t ? `${r} ` : ""}${a} ${o}시 ${i}분`
+	};
+}
+//#endregion
+export { r as NEXT_DAY_LABEL, c as formatTimeLabel, a as getEndTimeColumn, i as getStartTimeColumn, s as isNextDayTime, o as shouldResetEndTime };

package/dist/shared/components/TimePicker/TimePicker.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/components/TimePicker/index.mjs

@@ -1,4 +1,4 @@
-import { t as e } from "../../../TimePicker-BwACyeBR.js";
+import { t as e } from "../../../TimePicker-eObMuz3A.js";
 //#region shared/components/TimePicker/index.ts
 var t = e;
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",

package/dist/TimePicker-BwACyeBR.js

@@ -1,120 +0,0 @@
-import e from "./shared/utils/getTimeRange/index.mjs";
-import { forwardRef as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
-import { ChainPicker as o, Flexbox as s, Typography as c } from "@dotss/ui";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "@emotion/styled";
-//#region shared/components/TimePicker/TimePicker.styles.ts
-var f = d.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${({ theme: { spacing: e } }) => e.content(7)}px;
-  width: 100%;
-  padding: ${({ theme: { spacing: e } }) => e.content(2)}px 0;
-`, p = d.div`
-  position: absolute;
-  width: 100%;
-  height: 54px;
-  background: ${({ theme: e }) => e.palette.background.primary};
-  border-radius: 12px;
-`, m = t(function({ onChange: t, onChangeStartTime: d, onChangeEndTime: m, startTime: h = 9, endTime: g = 12, range: _ = [0, 24], step: v = 1, startTimeChainPickerProps: y, endTimeChainPickerProps: b, timePickerHighlightProps: x, renderStartTimeLabel: S, renderEndTimeLabel: C, inlineCSS: w, ...T }, E) {
-	let [D, O] = a(h), [k, A] = a(g), j = i(e(0, 24, {
-		minTime: _[0],
-		maxTime: _[1] - v
-	})), M = i(e(0, 24, {
-		minTime: h + v,
-		maxTime: _[1]
-	})), N = n((e, t) => {
-		let [n, r] = e.label.split(":").map(Number), i = n >= 12, a = n % 12 || 12, o = i ? "오후" : "오전";
-		return /* @__PURE__ */ u(s, {
-			gap: 1,
-			alignItems: "center",
-			justifyContent: "center",
-			"aria-label": `${o} ${a}시 ${r}분`,
-			inlineCSS: { width: "82px" },
-			children: [/* @__PURE__ */ l(c, {
-				tag: "span",
-				variant: t ? "h5M" : "b5M",
-				children: o
-			}), /* @__PURE__ */ l(c, {
-				tag: "span",
-				variant: t ? "h2M" : "h4M",
-				children: `${a}:${r.toString().padStart(2, "0")}`
-			})]
-		});
-	}, []), P = (t) => {
-		O(t), M.current = e(0, 24, {
-			minTime: t + v > _[1] ? _[1] : t + v,
-			maxTime: _[1]
-		}), t >= g - .5 && A(M.current[0].value);
-	}, F = (e) => {
-		A(e);
-	};
-	return r(() => {
-		M.current = e(0, 24, {
-			minTime: h + v > _[1] ? _[1] : h + v,
-			maxTime: _[1]
-		});
-	}, [
-		h,
-		g,
-		_,
-		v
-	]), r(() => {
-		O(h);
-	}, [h]), r(() => {
-		h >= g - .5 ? A(M.current[0].value) : A(g);
-	}, [h, g]), r(() => {
-		t(D, k);
-	}, [D, k]), r(() => {
-		d?.(D);
-	}, [D]), r(() => {
-		m?.(k);
-	}, [k]), /* @__PURE__ */ u(f, {
-		ref: E,
-		css: w,
-		role: "group",
-		"aria-label": "시간 선택",
-		...T,
-		children: [
-			/* @__PURE__ */ l(p, {
-				...x,
-				"aria-hidden": !0
-			}),
-			/* @__PURE__ */ l(o, {
-				column: j.current,
-				value: h,
-				onChange: P,
-				renderLabel: S || N,
-				"aria-label": "시작 시간 선택",
-				inlineCSS: {
-					"& > li": { padding: 0 },
-					...y?.inlineCSS
-				},
-				...y
-			}),
-			/* @__PURE__ */ l(c, {
-				variant: "h5M",
-				color: "grey.50",
-				"aria-hidden": !0,
-				inlineCSS: { zIndex: 1 },
-				children: "부터"
-			}),
-			/* @__PURE__ */ l(o, {
-				column: M.current,
-				value: g,
-				onChange: F,
-				renderLabel: C || N,
-				"aria-label": "종료 시간 선택",
-				inlineCSS: {
-					"& > li": { padding: 0 },
-					...b?.inlineCSS
-				},
-				...b
-			})
-		]
-	});
-});
-//#endregion
-export { m as t };