@seed-design/react 2.1.1 → 2.2.1

package/lib/components/DatePicker/DatePicker.js

@@ -0,0 +1,345 @@
+"use client";
+"use client";
+import { useStyleProps } from "../../utils/styled.js";
+import { Icon } from "../Icon/Icon.js";
+import { ActionButton } from "../ActionButton/ActionButton.js";
+import { InternalWheelPickerColumn, InternalWheelPickerRoot } from "../private/WheelPicker.js";
+import { Primitive } from "@seed-design/react-primitive";
+import clsx$1 from "clsx";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@seed-design/dom-utils";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { datePicker } from "@seed-design/css/recipes/date-picker";
+import { useDatePicker } from "@seed-design/react-date-picker";
+//#region src/components/DatePicker/DatePicker.tsx
+var WHEEL_ITEM_SIZE = 44;
+var WHEEL_VISIBLE_ITEM_COUNT = 7;
+function getContinuousSpacerStyle(height) {
+	return { "--seed-date-picker-continuous-spacer-height": `${height}px` };
+}
+var NavigationChevronIcon = React$1.forwardRef(({ direction, ...props }, ref) => {
+	const path = direction === "left" ? "M22.7931 13.0704C23.0788 13.3703 23.0672 13.8451 22.7673 14.1307L16.5875 20.0166L22.7672 25.9017C23.0672 26.1873 23.0788 26.6621 22.7931 26.962C22.5075 27.262 22.0327 27.2736 21.7328 26.9879L14.9828 20.5598C14.8341 20.4182 14.75 20.2219 14.75 20.0167C14.75 19.8114 14.8341 19.6151 14.9827 19.4736L21.7327 13.0446C22.0327 12.7589 22.5074 12.7704 22.7931 13.0704Z" : "M17.2069 13.0704C16.9212 13.3703 16.9328 13.8451 17.2327 14.1307L23.4125 20.0166L17.2328 25.9017C16.9328 26.1873 16.9212 26.6621 17.2069 26.962C17.4925 27.262 17.9673 27.2736 18.2672 26.9879L25.0172 20.5598C25.1659 20.4182 25.25 20.2219 25.25 20.0167C25.25 19.8114 25.1659 19.6151 25.0173 19.4736L18.2673 13.0446C17.9673 12.7589 17.4926 12.7704 17.2069 13.0704Z";
+	return /* @__PURE__ */ jsx("svg", {
+		ref,
+		...props,
+		viewBox: "8 8 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: path,
+			fill: "currentColor"
+		})
+	});
+});
+NavigationChevronIcon.displayName = "NavigationChevronIcon";
+var HeaderChevronIcon = React$1.forwardRef(({ expanded, ...props }, ref) => /* @__PURE__ */ jsx("svg", {
+	ref,
+	...props,
+	viewBox: "0 0 20 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M5.2453 7.74286C5.57141 7.4181 6.09905 7.41919 6.42381 7.7453L9.98736 11.3237L13.5808 7.77134C13.9081 7.44778 14.4357 7.45081 14.7593 7.77812C15.0829 8.10542 15.0798 8.63305 14.7525 8.95661L10.5686 13.0926C10.2422 13.4154 9.7162 13.4133 9.39228 13.088L5.24286 8.92137C4.9181 8.59526 4.91919 8.06762 5.2453 7.74286Z",
+		fill: "currentColor",
+		transform: expanded ? "rotate(180 10 10)" : void 0
+	})
+}));
+HeaderChevronIcon.displayName = "HeaderChevronIcon";
+function WeekdayRow({ api, classNames, semantic = true }) {
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		role: semantic ? "row" : void 0,
+		"aria-hidden": semantic ? void 0 : true,
+		className: classNames.weekdayRow,
+		children: api.weekdayLabels.map((weekday) => /* @__PURE__ */ jsx(Primitive.div, {
+			role: semantic ? "columnheader" : void 0,
+			"aria-label": semantic ? weekday.long : void 0,
+			className: classNames.weekday,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: weekday.short
+			})
+		}, weekday.key))
+	});
+}
+function DateCellView({ cell, classNames, renderDateCellContent, renderDateCellSupplement }) {
+	if (cell === null) return /* @__PURE__ */ jsx(Primitive.div, {
+		role: "gridcell",
+		className: classNames.emptyCell
+	});
+	const { cellProps, buttonProps, key: _key, ...renderProps } = cell;
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		...cellProps,
+		className: classNames.dateCell,
+		children: /* @__PURE__ */ jsx(Primitive.button, {
+			...buttonProps,
+			className: classNames.dateButton,
+			children: /* @__PURE__ */ jsx(Primitive.span, {
+				className: classNames.dateContent,
+				children: renderDateCellContent ? renderDateCellContent(renderProps) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Primitive.span, {
+					"data-date-picker-day": "",
+					children: cell.formattedDay
+				}), renderDateCellSupplement?.(renderProps)] })
+			})
+		})
+	});
+}
+function MonthView({ api, classNames, month, renderDateCellContent, renderDateCellSupplement, showWeekdays, showMonthLabel, renderHeader, monthRef }) {
+	const labelId = `${api.rootProps.id}-${month.key}-label`;
+	const headerLabelId = `${api.rootProps.id}-header-label`;
+	return /* @__PURE__ */ jsxs(Primitive.div, {
+		ref: monthRef,
+		className: classNames.month,
+		children: [
+			renderHeader?.(labelId),
+			showMonthLabel ? /* @__PURE__ */ jsx(Primitive.div, {
+				id: labelId,
+				className: classNames.monthLabel,
+				children: month.label
+			}) : /* @__PURE__ */ jsx(Primitive.span, {
+				id: labelId,
+				className: classNames.liveRegion,
+				children: month.label
+			}),
+			/* @__PURE__ */ jsxs(Primitive.div, {
+				...api.gridProps,
+				"aria-labelledby": showMonthLabel || renderHeader ? labelId : api.visibleRange === "month" ? headerLabelId : labelId,
+				className: classNames.grid,
+				children: [showWeekdays && /* @__PURE__ */ jsx(WeekdayRow, {
+					api,
+					classNames
+				}), month.weeks.map((week) => /* @__PURE__ */ jsx(Primitive.div, {
+					role: "row",
+					className: classNames.weekRow,
+					children: week.cells.map((cell, index) => /* @__PURE__ */ jsx(DateCellView, {
+						cell,
+						classNames,
+						renderDateCellContent,
+						renderDateCellSupplement
+					}, cell?.key ?? `${week.key}-empty-${index}`))
+				}, week.key))]
+			})
+		]
+	});
+}
+function NavigationButton({ direction, className, ...props }) {
+	return /* @__PURE__ */ jsx(ActionButton, {
+		...props,
+		variant: "ghost",
+		size: "medium",
+		layout: "iconOnly",
+		className,
+		children: /* @__PURE__ */ jsx(Icon, { svg: /* @__PURE__ */ jsx(NavigationChevronIcon, { direction }) })
+	});
+}
+function Header({ api, classNames }) {
+	const previousDirection = api.isRtl ? "right" : "left";
+	const nextDirection = api.isRtl ? "left" : "right";
+	return /* @__PURE__ */ jsxs(Primitive.div, {
+		className: classNames.header,
+		children: [/* @__PURE__ */ jsxs(Primitive.button, {
+			...api.monthYearButtonProps,
+			id: `${api.rootProps.id}-header-label`,
+			className: classNames.headerLabel,
+			children: [/* @__PURE__ */ jsx(Primitive.span, {
+				"data-date-picker-header-label": "",
+				children: api.headerLabel
+			}), /* @__PURE__ */ jsx(Primitive.span, {
+				className: classNames.headerChevron,
+				children: /* @__PURE__ */ jsx(Icon, { svg: /* @__PURE__ */ jsx(HeaderChevronIcon, { expanded: api.isWheelOpen }) })
+			})]
+		}), /* @__PURE__ */ jsxs(Primitive.div, {
+			className: classNames.navigation,
+			children: [/* @__PURE__ */ jsx(NavigationButton, {
+				...api.previousButtonProps,
+				direction: previousDirection,
+				className: classNames.navigationButton
+			}), /* @__PURE__ */ jsx(NavigationButton, {
+				...api.nextButtonProps,
+				direction: nextDirection,
+				className: classNames.navigationButton
+			})]
+		})]
+	});
+}
+function TwoMonthHeader({ api, classNames, label, labelId, position }) {
+	const isFirst = position === "first";
+	const direction = api.isRtl ? isFirst ? "right" : "left" : isFirst ? "left" : "right";
+	const buttonProps = isFirst ? api.previousButtonProps : api.nextButtonProps;
+	return /* @__PURE__ */ jsxs(Primitive.div, {
+		className: classNames.twoMonthHeader,
+		children: [/* @__PURE__ */ jsx(Primitive.div, {
+			id: labelId,
+			className: classNames.twoMonthLabel,
+			children: label
+		}), /* @__PURE__ */ jsx(NavigationButton, {
+			...buttonProps,
+			direction,
+			"data-placement": isFirst ? "start" : "end",
+			className: classNames.twoMonthNavigationButton
+		})]
+	});
+}
+function WheelView({ api, classNames }) {
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		className: classNames.wheelContainer,
+		children: /* @__PURE__ */ jsxs(InternalWheelPickerRoot, {
+			...api.wheelProps,
+			itemSize: WHEEL_ITEM_SIZE,
+			visibleItemCount: WHEEL_VISIBLE_ITEM_COUNT,
+			disabled: api.disabled,
+			readOnly: api.readOnly,
+			"aria-label": api.headerLabel,
+			className: classNames.wheelView,
+			columnsClassName: classNames.wheelColumns,
+			scrollFogClassName: classNames.wheelScrollFog,
+			selectionIndicatorClassName: classNames.wheelSelectionIndicator,
+			fogSize: 102,
+			children: [/* @__PURE__ */ jsx(InternalWheelPickerColumn, {
+				"aria-label": api.ariaLabels.yearWheel,
+				className: classNames.yearColumn,
+				itemClassName: classNames.wheelItem,
+				options: api.wheel.yearOptions,
+				value: api.wheel.yearValue,
+				onValueChange: api.wheel.onYearValueChange,
+				loop: false
+			}), /* @__PURE__ */ jsx(InternalWheelPickerColumn, {
+				"aria-label": api.ariaLabels.monthWheel,
+				className: classNames.monthColumn,
+				itemClassName: classNames.wheelItem,
+				options: api.wheel.monthOptions,
+				value: api.wheel.monthValue,
+				onValueChange: api.wheel.onMonthValueChange,
+				loop: true
+			})]
+		})
+	});
+}
+var DatePickerImplementation = React$1.forwardRef((props, forwardedRef) => {
+	const api = useDatePicker(props);
+	const [variantProps, otherProps] = datePicker.splitVariantProps(props);
+	const classNames = datePicker({
+		...variantProps,
+		visibleRange: api.visibleRange
+	});
+	const { renderDateCellContent, renderDateCellSupplement, actionsRef, selectionMode: _selectionMode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, viewDate: _viewDate, defaultViewDate: _defaultViewDate, onViewDateChange: _onViewDateChange, today: _today, locale: _locale, weekStartsOn: _weekStartsOn, yearRange: _yearRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, ariaLabels: _ariaLabels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...styleAndRootProps } = otherProps;
+	const { style: styleProps, restProps: rootProps } = useStyleProps(styleAndRootProps);
+	const rootRef = React$1.useRef(null);
+	const hasContinuousSizeConstraint = props.height !== void 0 || props.minHeight !== void 0 || props.maxHeight !== void 0;
+	React$1.useEffect(() => {
+		if (process.env.NODE_ENV === "production" || api.visibleRange !== "continuous") return;
+		if (!hasContinuousSizeConstraint) console.warn("ContinuousDatePicker: height, minHeight 또는 maxHeight가 필요합니다.");
+	}, [api.visibleRange, hasContinuousSizeConstraint]);
+	React$1.useImperativeHandle(actionsRef, () => api.actions, [api.actions]);
+	const rootAriaLabel = ariaLabelledby ? ariaLabel : ariaLabel ?? api.ariaLabels.root;
+	return /* @__PURE__ */ jsxs(Primitive.div, {
+		ref: composeRefs(forwardedRef, rootRef, api.refs.root),
+		...mergeProps(api.rootProps, rootProps),
+		"aria-label": rootAriaLabel,
+		"aria-labelledby": ariaLabelledby,
+		className: clsx$1(classNames.root, className),
+		style: styleProps,
+		children: [api.visibleRange === "continuous" ? /* @__PURE__ */ jsxs(Primitive.div, {
+			ref: api.refs.continuousScroll,
+			...api.continuousScrollProps,
+			"data-date-picker-continuous-scroll": "",
+			className: classNames.continuousScroll,
+			children: [/* @__PURE__ */ jsx(WeekdayRow, {
+				api,
+				classNames,
+				semantic: false
+			}), /* @__PURE__ */ jsxs(Primitive.div, {
+				className: classNames.continuousContent,
+				children: [
+					/* @__PURE__ */ jsx(Primitive.div, {
+						"aria-hidden": "true",
+						"data-date-picker-continuous-spacer": "",
+						className: classNames.continuousSpacer,
+						style: getContinuousSpacerStyle(api.virtual.topHeight)
+					}),
+					api.months.map((month) => /* @__PURE__ */ jsx(MonthView, {
+						api,
+						classNames,
+						month,
+						renderDateCellContent,
+						renderDateCellSupplement,
+						showWeekdays: false,
+						showMonthLabel: true,
+						monthRef: api.refs.continuousMonth(month.key)
+					}, month.key)),
+					/* @__PURE__ */ jsx(Primitive.div, {
+						"aria-hidden": "true",
+						"data-date-picker-continuous-spacer": "",
+						className: classNames.continuousSpacer,
+						style: getContinuousSpacerStyle(api.virtual.bottomHeight)
+					})
+				]
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			api.visibleRange !== "twoMonths" && /* @__PURE__ */ jsx(Header, {
+				api,
+				classNames
+			}),
+			/* @__PURE__ */ jsx(Primitive.div, {
+				"data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths" ? "" : void 0,
+				"aria-hidden": api.isWheelOpen && api.visibleRange !== "twoMonths" ? true : void 0,
+				className: classNames.months,
+				children: api.months.map((month, index) => /* @__PURE__ */ jsx(MonthView, {
+					api,
+					classNames,
+					month,
+					renderDateCellContent,
+					renderDateCellSupplement,
+					showWeekdays: true,
+					showMonthLabel: false,
+					renderHeader: api.visibleRange === "twoMonths" ? (labelId) => /* @__PURE__ */ jsx(TwoMonthHeader, {
+						api,
+						classNames,
+						label: month.label,
+						labelId,
+						position: index === 0 ? "first" : "last"
+					}) : void 0
+				}, month.key))
+			}),
+			api.isWheelOpen && api.visibleRange !== "twoMonths" && /* @__PURE__ */ jsx(WheelView, {
+				api,
+				classNames
+			})
+		] }), /* @__PURE__ */ jsx(Primitive.span, {
+			...api.liveRegionProps,
+			className: classNames.liveRegion,
+			children: api.headerLabel
+		})]
+	});
+});
+DatePickerImplementation.displayName = "DatePickerImplementation";
+var DatePicker = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(DatePickerImplementation, {
+	ref,
+	...props,
+	visibleRange: "month"
+}));
+DatePicker.displayName = "DatePicker";
+var TwoMonthDatePicker = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(DatePickerImplementation, {
+	ref,
+	...props,
+	visibleRange: "twoMonths"
+}));
+TwoMonthDatePicker.displayName = "TwoMonthDatePicker";
+var WeekDatePicker = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(DatePickerImplementation, {
+	ref,
+	...props,
+	visibleRange: "week"
+}));
+WeekDatePicker.displayName = "WeekDatePicker";
+var ContinuousDatePicker = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(DatePickerImplementation, {
+	ref,
+	...props,
+	visibleRange: "continuous"
+}));
+ContinuousDatePicker.displayName = "ContinuousDatePicker";
+//#endregion
+export { ContinuousDatePicker, DatePicker, TwoMonthDatePicker, WeekDatePicker };

package/lib/components/DatePicker/DatePicker.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DatePicker.test.d.ts.map

package/lib/components/DatePicker/DatePicker.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.test.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.test.tsx"],"names":[],"mappings":""}

package/lib/components/DatePicker/index.cjs

@@ -0,0 +1,62 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_DatePicker = require("./DatePicker.cjs");
+let _seed_design_react_date_picker = require("@seed-design/react-date-picker");
+exports.ContinuousDatePicker = require_DatePicker.ContinuousDatePicker;
+exports.DatePicker = require_DatePicker.DatePicker;
+exports.TwoMonthDatePicker = require_DatePicker.TwoMonthDatePicker;
+exports.WeekDatePicker = require_DatePicker.WeekDatePicker;
+Object.defineProperty(exports, "compareDates", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.compareDates;
+	}
+});
+Object.defineProperty(exports, "dateKey", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.dateKey;
+	}
+});
+Object.defineProperty(exports, "dateOnOrAfter", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.dateOnOrAfter;
+	}
+});
+Object.defineProperty(exports, "dateOnOrBefore", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.dateOnOrBefore;
+	}
+});
+Object.defineProperty(exports, "excludeDates", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.excludeDates;
+	}
+});
+Object.defineProperty(exports, "isSameDate", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.isSameDate;
+	}
+});
+Object.defineProperty(exports, "maxSelectionCount", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.maxSelectionCount;
+	}
+});
+Object.defineProperty(exports, "rangeDayCountAtLeast", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.rangeDayCountAtLeast;
+	}
+});
+Object.defineProperty(exports, "rangeDayCountAtMost", {
+	enumerable: true,
+	get: function() {
+		return _seed_design_react_date_picker.rangeDayCountAtMost;
+	}
+});

package/lib/components/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export { ContinuousDatePicker, DatePicker, TwoMonthDatePicker, WeekDatePicker, type ContinuousDatePickerProps, type DatePickerActions, type DatePickerAriaLabels, type DatePickerCellContentRenderProps, type DatePickerConstraint, type DatePickerConstraintContext, type DatePickerDate, type DatePickerMultipleProps, type DatePickerProps, type DatePickerRangeProps, type DatePickerRangeValue, type DatePickerSelectionMode, type DatePickerSingleProps, type DatePickerValue, type TwoMonthDatePickerProps, type WeekDatePickerProps, } from './DatePicker';
+export { compareDates, dateKey, dateOnOrAfter, dateOnOrBefore, excludeDates, isSameDate, maxSelectionCount, rangeDayCountAtLeast, rangeDayCountAtMost, } from '@seed-design/react-date-picker';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,gCAAgC,EACrC,KAAK,oBAAoB,EACzB,KAAK,2BAA2B,EAChC,KAAK,cAAc,EACnB,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,YAAY,EACZ,OAAO,EACP,aAAa,EACb,cAAc,EACd,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,gCAAgC,CAAC"}

package/lib/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+import { ContinuousDatePicker, DatePicker, TwoMonthDatePicker, WeekDatePicker } from "./DatePicker.js";
+import { compareDates, dateKey, dateOnOrAfter, dateOnOrBefore, excludeDates, isSameDate, maxSelectionCount, rangeDayCountAtLeast, rangeDayCountAtMost } from "@seed-design/react-date-picker";
+export { ContinuousDatePicker, DatePicker, TwoMonthDatePicker, WeekDatePicker, compareDates, dateKey, dateOnOrAfter, dateOnOrBefore, excludeDates, isSameDate, maxSelectionCount, rangeDayCountAtLeast, rangeDayCountAtMost };

package/lib/components/QuantityPicker/QuantityPicker.d.ts

@@ -2,7 +2,19 @@ import { PrimitiveProps } from '@seed-design/react-primitive';
 import { QuantityPicker as QuantityPickerPrimitive } from '@seed-design/react-quantity-picker';
 import { QuantityPickerVariantProps } from '@seed-design/css/recipes/quantity-picker';
 import * as React from "react";
-export type QuantityPickerRootProps = QuantityPickerVariantProps & QuantityPickerPrimitive.RootProps;
+export type QuantityPickerRootProps = Omit<QuantityPickerVariantProps, "size" | "layout"> & QuantityPickerPrimitive.RootProps & {
+    /**
+     * 컴포넌트의 크기입니다.
+     * @default "medium"
+     */
+    size?: QuantityPickerVariantProps["size"];
+    /**
+     * 컴포넌트가 부모 Flex 레이아웃의 여유 공간을 채울지 지정합니다.
+     * @since 2.2.0
+     * @default "hug"
+     */
+    layout?: QuantityPickerVariantProps["layout"];
+};
 export declare const QuantityPickerRoot: React.ForwardRefExoticComponent<QuantityPickerRootProps & React.RefAttributes<HTMLDivElement>>;
 interface QuantityPickerButtonProps extends PrimitiveProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "type"> {
     icon?: React.ReactNode;

package/lib/components/QuantityPicker/QuantityPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityPicker.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/QuantityPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,cAAc,IAAI,uBAAuB,EAE1C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkE/B,MAAM,MAAM,uBAAuB,GAAG,0BAA0B,GAC9D,uBAAuB,CAAC,SAAS,CAAC;AAEpC,eAAO,MAAM,kBAAkB,gGAkC9B,CAAC;AAGF,UAAU,yBACR,SAAQ,cAAc,EACpB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,kCACf,SAAQ,IAAI,CAAC,uBAAuB,CAAC,oBAAoB,EAAE,UAAU,CAAC,EACpE,yBAAyB;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,6BAA6B,8GAsBxC,CAAC;AAGH,MAAM,WAAW,+BACf,SAAQ,uBAAuB,CAAC,iBAAiB;CAAG;AAEtD,eAAO,MAAM,0BAA0B,6JAuBtC,CAAC;AAGF,MAAM,WAAW,kCACf,SAAQ,IAAI,CAAC,uBAAuB,CAAC,oBAAoB,EAAE,UAAU,CAAC,EACpE,yBAAyB;CAAG;AAEhC,eAAO,MAAM,6BAA6B,8GAkBxC,CAAC;AAGH,MAAM,WAAW,8BAA+B,SAAQ,uBAAuB,CAAC,gBAAgB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,mHAAsC,CAAC"}
+{"version":3,"file":"QuantityPicker.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/QuantityPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,cAAc,IAAI,uBAAuB,EAE1C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkE/B,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,0BAA0B,EAAE,MAAM,GAAG,QAAQ,CAAC,GACvF,uBAAuB,CAAC,SAAS,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAC1C;;;;OAIG;IACH,MAAM,CAAC,EAAE,0BAA0B,CAAC,QAAQ,CAAC,CAAC;CAC/C,CAAC;AAEJ,eAAO,MAAM,kBAAkB,gGAkC9B,CAAC;AAGF,UAAU,yBACR,SAAQ,cAAc,EACpB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,kCACf,SAAQ,IAAI,CAAC,uBAAuB,CAAC,oBAAoB,EAAE,UAAU,CAAC,EACpE,yBAAyB;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,6BAA6B,8GAsBxC,CAAC;AAGH,MAAM,WAAW,+BACf,SAAQ,uBAAuB,CAAC,iBAAiB;CAAG;AAEtD,eAAO,MAAM,0BAA0B,6JAuBtC,CAAC;AAGF,MAAM,WAAW,kCACf,SAAQ,IAAI,CAAC,uBAAuB,CAAC,oBAAoB,EAAE,UAAU,CAAC,EACpE,yBAAyB;CAAG;AAEhC,eAAO,MAAM,6BAA6B,8GAkBxC,CAAC;AAGH,MAAM,WAAW,8BAA+B,SAAQ,uBAAuB,CAAC,gBAAgB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,mHAAsC,CAAC"}

package/lib/components/TimePicker/TimePicker.cjs

@@ -0,0 +1,97 @@
+"use client";
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_WheelPicker = require("../private/WheelPicker.cjs");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _seed_design_css_recipes_time_picker = require("@seed-design/css/recipes/time-picker");
+let _seed_design_react_time_picker = require("@seed-design/react-time-picker");
+//#region src/components/TimePicker/TimePicker.tsx
+var ITEM_SIZE = 44;
+var VISIBLE_ITEM_COUNT = 5;
+var DEFAULT_ARIA_LABELS = {
+	ko: {
+		root: "시간 선택",
+		period: "오전/오후",
+		hour: "시",
+		minute: "분"
+	},
+	en: {
+		root: "Select time",
+		period: "AM/PM",
+		hour: "Hour",
+		minute: "Minute"
+	},
+	ja: {
+		root: "時刻を選択",
+		period: "午前/午後",
+		hour: "時",
+		minute: "分"
+	}
+};
+function getDefaultAriaLabels(locale) {
+	const [canonicalLocale = "ko-KR"] = Intl.getCanonicalLocales(locale ?? "ko-KR");
+	const language = new Intl.Locale(canonicalLocale).language;
+	if (language === "ko") return DEFAULT_ARIA_LABELS.ko;
+	if (language === "ja") return DEFAULT_ARIA_LABELS.ja;
+	return DEFAULT_ARIA_LABELS.en;
+}
+var classNames = (0, _seed_design_css_recipes_time_picker.timePicker)();
+var columnClassNames = {
+	period: classNames.periodColumn,
+	hour: classNames.hourColumn,
+	minute: classNames.minuteColumn
+};
+/**
+* 휠을 스크롤하여 오전·오후, 시, 분을 선택하는 12시간제 시간 선택 컴포넌트입니다.
+*
+* 값은 오전·오후를 별도 필드로 나누지 않고 24시간 형식의 `TimePickerValue`로 주고받습니다.
+*/
+var TimePicker = react.forwardRef(({ value, defaultValue, onValueChange, minuteStep, locale, disabled, periodAriaLabel, hourAriaLabel, minuteAriaLabel, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }, ref) => {
+	const api = (0, _seed_design_react_time_picker.useTimePicker)({
+		value,
+		defaultValue,
+		onValueChange,
+		minuteStep,
+		locale,
+		disabled
+	});
+	const defaultAriaLabels = getDefaultAriaLabels(locale);
+	const ariaLabels = {
+		period: periodAriaLabel ?? defaultAriaLabels.period,
+		hour: hourAriaLabel ?? defaultAriaLabels.hour,
+		minute: minuteAriaLabel ?? defaultAriaLabels.minute
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WheelPicker.InternalWheelPickerRoot, {
+		ref,
+		itemSize: ITEM_SIZE,
+		visibleItemCount: VISIBLE_ITEM_COUNT,
+		disabled,
+		"aria-label": ariaLabelledby ? ariaLabel : ariaLabel ?? defaultAriaLabels.root,
+		"aria-labelledby": ariaLabelledby,
+		className: (0, clsx.default)(classNames.root, className),
+		columnsClassName: classNames.columns,
+		scrollFogClassName: classNames.scrollFog,
+		selectionIndicatorClassName: classNames.selectionIndicator,
+		...props,
+		children: api.columnOrder.map((type) => {
+			const column = api.columns[type];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WheelPicker.InternalWheelPickerColumn, {
+				"aria-label": ariaLabels[type],
+				className: columnClassNames[type],
+				itemClassName: classNames.item,
+				options: column.options,
+				value: column.value,
+				onValueChange: column.onValueChange,
+				loop: column.loop,
+				valueChangeBehavior: type === "period" ? "smooth" : "auto"
+			}, type);
+		})
+	});
+});
+TimePicker.displayName = "TimePicker";
+//#endregion
+exports.TimePicker = TimePicker;

package/lib/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,28 @@
+import { UseTimePickerProps } from '@seed-design/react-time-picker';
+import { InternalWheelPickerRootProps } from '../private/WheelPicker';
+import * as React from "react";
+export interface TimePickerProps extends UseTimePickerProps, Omit<InternalWheelPickerRootProps, keyof UseTimePickerProps | "asChild" | "children" | "columnsClassName" | "fogSize" | "itemSize" | "readOnly" | "scrollFogClassName" | "selectionIndicatorClassName" | "visibleItemCount"> {
+    /**
+     * 오전·오후 컬럼의 접근성 이름입니다.
+     * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
+     */
+    periodAriaLabel?: string;
+    /**
+     * 시 컬럼의 접근성 이름입니다.
+     * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
+     */
+    hourAriaLabel?: string;
+    /**
+     * 분 컬럼의 접근성 이름입니다.
+     * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
+     */
+    minuteAriaLabel?: string;
+}
+/**
+ * 휠을 스크롤하여 오전·오후, 시, 분을 선택하는 12시간제 시간 선택 컴포넌트입니다.
+ *
+ * 값은 오전·오후를 별도 필드로 나누지 않고 24시간 형식의 `TimePickerValue`로 주고받습니다.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
+export type { MinuteStep, TimePickerValue } from '@seed-design/react-time-picker';
+//# sourceMappingURL=TimePicker.d.ts.map

package/lib/components/TimePicker/TimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAExF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,4BAA4B,EAClC,MAAM,wBAAwB,CAAC;AA0ChC,MAAM,WAAW,eACf,SAAQ,kBAAkB,EACxB,IAAI,CACF,4BAA4B,EAC1B,MAAM,kBAAkB,GACxB,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,UAAU,GACV,UAAU,GACV,oBAAoB,GACpB,6BAA6B,GAC7B,kBAAkB,CACrB;IACH;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,wFAoEtB,CAAC;AAGF,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC"}