@dotss/tictoccroc 0.4.2 → 0.6.0

package/dist/Calendar-BOLCHnjh.js

@@ -0,0 +1,97 @@
+import e from "./shared/utils/getDateRange/index.mjs";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@emotion/styled";
+import a from "@dotss/ui/DatePicker";
+//#region shared/components/Calendar/Calendar.styles.ts
+var o = i.div`
+  display: flex;
+  flex-direction: column;
+`, s = i.div`
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ theme: { spacing: e } }) => e.content(4)}px;
+  background-color: ${({ theme: { palette: { grey: e } } }) => e.white};
+  border-bottom: 1px solid
+    ${({ theme: { palette: { grey: e } } }) => e[10]};
+  z-index: 1;
+
+  & > span {
+    margin: 9.5px 0;
+    flex-grow: 1;
+    text-align: center;
+    ${({ theme: { palette: { grey: e }, typography: { b4M: t } } }) => ({
+	fontSize: t.size,
+	fontWeight: t.weight,
+	lineHeight: t.lineHeight,
+	letterSpacing: t.letterSpacing,
+	color: e[50]
+})};
+  }
+`, c = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: { spacing: e } }) => e.content(6)}px;
+  padding: ${({ theme: { spacing: e } }) => e.content(5)}px
+    ${({ theme: { spacing: e } }) => e.content(4)}px;
+`, l = t(function({ startDate: t, endDate: i, onChange: l, value: u, weekHeadInlineCSS: d, datePickerProps: f, inlineCSS: p, ...m }, h) {
+	let g = e(t, i, { format: "YYYY-MM" }).map((e) => new Date(e.value));
+	return /* @__PURE__ */ r(o, {
+		ref: h,
+		role: "group",
+		"aria-label": "날짜 선택",
+		...m,
+		css: p,
+		children: [/* @__PURE__ */ r(s, {
+			css: d,
+			role: "row",
+			children: [
+				/* @__PURE__ */ n("span", {
+					role: "columnheader",
+					"aria-label": "일요일",
+					children: "일"
+				}),
+				/* @__PURE__ */ n("span", {
+					role: "columnheader",
+					"aria-label": "월요일",
+					children: "월"
+				}),
+				/* @__PURE__ */ n("span", {
+					role: "columnheader",
+					"aria-label": "화요일",
+					children: "화"
+				}),
+				/* @__PURE__ */ n("span", {
+					role: "columnheader",
+					"aria-label": "수요일",
+					children: "수"
+				}),
+				/* @__PURE__ */ n("span", {
+					role: "columnheader",
+					"aria-label": "목요일",
+					children: "목"
+				}),
+				/* @__PURE__ */ n("span", {
+					role: "columnheader",
+					"aria-label": "금요일",
+					children: "금"
+				}),
+				/* @__PURE__ */ n("span", {
+					role: "columnheader",
+					"aria-label": "토요일",
+					children: "토"
+				})
+			]
+		}), /* @__PURE__ */ n(c, { children: g.map((e) => /* @__PURE__ */ n(a, {
+			...f,
+			date: e,
+			onChange: l,
+			value: u,
+			"aria-label": `${e.getFullYear()}년 ${e.getMonth() + 1}월 달력`
+		}, `calendar-date-picker-${e.getFullYear()}-${e.getMonth()}`)) })]
+	});
+});
+//#endregion
+export { l as t };

package/dist/TimePicker-BwACyeBR.js

@@ -0,0 +1,120 @@
+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 };