@seed-design/react 2.5.1 → 3.0.0

package/lib/components/Chip/index.js

@@ -1,3 +1,3 @@
-import { ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRoot, ChipSuffixIcon } from "./Chip.js";
+import { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipSuffixIcon, ChipToggle } from "./Chip.js";
 import { Chip_namespace_exports } from "./Chip.namespace.js";
-export { Chip_namespace_exports as Chip, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRoot, ChipSuffixIcon };
+export { Chip_namespace_exports as Chip, ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipSuffixIcon, ChipToggle };

package/lib/components/ChipTabs/ChipTabs.cjs

@@ -2,12 +2,12 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_createSlotRecipeContext = require("../../utils/createSlotRecipeContext.cjs");
 const require_withScaleFeedback = require("../../utils/withScaleFeedback.cjs");
-let _seed_design_react_tabs = require("@seed-design/react-tabs");
 let clsx = require("clsx");
 clsx = require_runtime.__toESM(clsx);
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _seed_design_css_recipes_chip_tabs = require("@seed-design/css/recipes/chip-tabs");
+let _seed_design_react_tabs = require("@seed-design/react-tabs");
 //#region src/components/ChipTabs/ChipTabs.tsx
 var { ClassNamesProvider, withContext } = require_createSlotRecipeContext.createSlotRecipeContext(_seed_design_css_recipes_chip_tabs.chipTabs);
 var ChipTabsRoot = (0, react.forwardRef)(({ className, ...props }, ref) => {

package/lib/components/ChipTabs/ChipTabs.js

@@ -1,11 +1,11 @@
 "use client";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext.js";
 import { withScaleFeedback } from "../../utils/withScaleFeedback.js";
-import { Tabs } from "@seed-design/react-tabs";
 import clsx$1 from "clsx";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { chipTabs } from "@seed-design/css/recipes/chip-tabs";
+import { Tabs } from "@seed-design/react-tabs";
 //#region src/components/ChipTabs/ChipTabs.tsx
 var { ClassNamesProvider, withContext } = createSlotRecipeContext(chipTabs);
 var ChipTabsRoot = forwardRef(({ className, ...props }, ref) => {

package/lib/components/DatePicker/DatePicker.cjs

@@ -1,58 +1,39 @@
 "use client";
 "use client";
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
-const require_styled = require("../../utils/styled.cjs");
 const require_Icon = require("../Icon/Icon.cjs");
 const require_ActionButton = require("../ActionButton/ActionButton.cjs");
-const require_WheelPicker = require("../private/WheelPicker.cjs");
+const require_Box = require("../Box/Box.cjs");
 let _seed_design_react_primitive = require("@seed-design/react-primitive");
 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 _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
 let _seed_design_dom_utils = require("@seed-design/dom-utils");
 let _seed_design_css_recipes_date_picker = require("@seed-design/css/recipes/date-picker");
 let _seed_design_react_date_picker = require("@seed-design/react-date-picker");
+let _seed_design_react_popover = require("@seed-design/react-popover");
 //#region src/components/DatePicker/DatePicker.tsx
-var WHEEL_ITEM_SIZE = 44;
-var WHEEL_VISIBLE_ITEM_COUNT = 7;
+var MONTH_WHEEL_ITEM_SIZE = 44;
+var MONTH_WHEEL_VISIBLE_ITEM_COUNT = 7;
+var MONTH_WHEEL_SCROLL_FOG_SIZE = 102;
+var WEEK_WHEEL_POPOVER_GUTTER = 4;
 function getContinuousSpacerStyle(height) {
 	return { "--seed-date-picker-continuous-spacer-height": `${height}px` };
 }
-var NavigationChevronIcon = react.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__ */ (0, react_jsx_runtime.jsx)("svg", {
-		ref,
-		...props,
-		viewBox: "8 8 24 24",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			fillRule: "evenodd",
-			clipRule: "evenodd",
-			d: path,
-			fill: "currentColor"
-		})
-	});
-});
-NavigationChevronIcon.displayName = "NavigationChevronIcon";
-var HeaderChevronIcon = react.forwardRef(({ expanded, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-	ref,
-	...props,
-	viewBox: "0 0 20 20",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.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 composeRefs(...refs) {
+	return (value) => {
+		for (const ref of refs) if (typeof ref === "function") ref(value);
+		else if (ref) ref.current = value;
+	};
+}
+var DatePickerContext = react.createContext(null);
+function useDatePickerContext() {
+	const context = react.useContext(DatePickerContext);
+	if (!context) throw new Error("DatePicker compound components must be used within DatePicker.Root");
+	return context;
+}
 function WeekdayRow({ api, classNames, semantic = true }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
 		role: semantic ? "row" : void 0,
@@ -129,22 +110,27 @@ function MonthView({ api, classNames, month, renderDateCellContent, renderDateCe
 		]
 	});
 }
-function NavigationButton({ direction, className, ...props }) {
+function NavigationButton({ icon, className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionButton.ActionButton, {
 		...props,
 		variant: "ghost",
 		size: "medium",
 		layout: "iconOnly",
 		className,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { svg: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationChevronIcon, { direction }) })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { svg: icon })
 	});
 }
-function Header({ api, classNames }) {
-	const previousDirection = api.isRtl ? "right" : "left";
-	const nextDirection = api.isRtl ? "left" : "right";
+var DatePickerHeader = react.forwardRef(({ leftIcon, rightIcon, headerIcon }, ref) => {
+	const { api, classNames } = useDatePickerContext();
+	const popover = (0, _seed_design_react_popover.usePopoverContext)();
+	if (api.visibleRange === "continuous" || api.visibleRange === "twoMonths") return null;
+	const previousIcon = api.isRtl ? rightIcon : leftIcon;
+	const nextIcon = api.isRtl ? leftIcon : rightIcon;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.div, {
+		ref,
 		className: classNames.header,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.button, {
+			ref: popover.refs.anchor,
 			...api.monthYearButtonProps,
 			id: `${api.rootProps.id}-header-label`,
 			className: classNames.headerLabel,
@@ -152,24 +138,26 @@ function Header({ api, classNames }) {
 				"data-date-picker-header-label": "",
 				children: api.headerLabel
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.span, {
+				"data-expanded": api.isWheelOpen ? "" : void 0,
 				className: classNames.headerChevron,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { svg: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderChevronIcon, { expanded: api.isWheelOpen }) })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { svg: headerIcon })
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.div, {
 			className: classNames.navigation,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationButton, {
 				...api.previousButtonProps,
-				direction: previousDirection,
+				icon: previousIcon,
 				className: classNames.navigationButton
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationButton, {
 				...api.nextButtonProps,
-				direction: nextDirection,
+				icon: nextIcon,
 				className: classNames.navigationButton
 			})]
 		})]
 	});
-}
-function TwoMonthHeader({ api, classNames, label, labelId, position }) {
+});
+DatePickerHeader.displayName = "DatePickerHeader";
+function TwoMonthHeader({ api, classNames, label, labelId, position, leftIcon, rightIcon }) {
 	const isFirst = position === "first";
 	const direction = api.isRtl ? isFirst ? "right" : "left" : isFirst ? "left" : "right";
 	const buttonProps = isFirst ? api.previousButtonProps : api.nextButtonProps;
@@ -181,171 +169,185 @@ function TwoMonthHeader({ api, classNames, label, labelId, position }) {
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationButton, {
 			...buttonProps,
-			direction,
+			icon: direction === "left" ? leftIcon : rightIcon,
 			"data-placement": isFirst ? "start" : "end",
 			className: classNames.twoMonthNavigationButton
 		})]
 	});
 }
-function WheelView({ api, classNames }) {
+var DatePickerWheel = react.forwardRef(({ children }, ref) => {
+	const { api, classNames } = useDatePickerContext();
+	if (!api.isWheelOpen || api.visibleRange === "twoMonths" || api.visibleRange === "continuous") return null;
+	const columns = [{
+		id: "year",
+		"aria-label": api.ariaLabels.yearWheel,
+		className: classNames.yearColumn,
+		options: api.wheel.yearOptions,
+		value: api.wheel.yearValue,
+		onValueChange: api.wheel.onYearValueChange,
+		loop: false
+	}, {
+		id: "month",
+		"aria-label": api.ariaLabels.monthWheel,
+		className: classNames.monthColumn,
+		options: api.wheel.monthOptions,
+		value: api.wheel.monthValue,
+		onValueChange: api.wheel.onMonthValueChange,
+		loop: true
+	}];
+	const sharedRootProps = {
+		...api.wheelProps,
+		disabled: api.disabled,
+		readOnly: api.readOnly,
+		"aria-label": api.headerLabel,
+		className: classNames.wheelView
+	};
+	if (api.visibleRange === "week") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_popover.Popover.Positioner, {
+		className: classNames.wheelPositioner,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_popover.Popover.Content, {
+			ref,
+			"aria-labelledby": `${api.rootProps.id}-header-label`,
+			className: classNames.wheelPopover,
+			children: children({
+				rootProps: {
+					...sharedRootProps,
+					size: "small"
+				},
+				columns
+			})
+		})
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
+		ref,
 		className: classNames.wheelContainer,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_WheelPicker.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__ */ (0, react_jsx_runtime.jsx)(require_WheelPicker.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__ */ (0, react_jsx_runtime.jsx)(require_WheelPicker.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
-			})]
+		children: children({
+			rootProps: {
+				...sharedRootProps,
+				size: "medium",
+				itemSize: MONTH_WHEEL_ITEM_SIZE,
+				visibleItemCount: MONTH_WHEEL_VISIBLE_ITEM_COUNT,
+				scrollFogSize: MONTH_WHEEL_SCROLL_FOG_SIZE
+			},
+			columns
 		})
 	});
-}
-var DatePickerImplementation = react.forwardRef((props, forwardedRef) => {
+});
+DatePickerWheel.displayName = "DatePickerWheel";
+var DatePickerCalendar = react.forwardRef(({ leftIcon, rightIcon }, ref) => {
+	const { api, classNames, renderDateCellContent, renderDateCellSupplement } = useDatePickerContext();
+	if (api.visibleRange === "continuous") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.div, {
+		ref: composeRefs(ref, api.refs.continuousScroll),
+		...api.continuousScrollProps,
+		"data-date-picker-continuous-scroll": "",
+		className: classNames.continuousScroll,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WeekdayRow, {
+			api,
+			classNames,
+			semantic: false
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.div, {
+			className: classNames.continuousContent,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
+					"aria-hidden": "true",
+					"data-date-picker-continuous-spacer": "",
+					className: classNames.continuousSpacer,
+					style: getContinuousSpacerStyle(api.virtual.topHeight)
+				}),
+				api.months.map((month) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthView, {
+					api,
+					classNames,
+					month,
+					renderDateCellContent,
+					renderDateCellSupplement,
+					showWeekdays: false,
+					showMonthLabel: true,
+					monthRef: api.refs.continuousMonth(month.key)
+				}, month.key)),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
+					"aria-hidden": "true",
+					"data-date-picker-continuous-spacer": "",
+					className: classNames.continuousSpacer,
+					style: getContinuousSpacerStyle(api.virtual.bottomHeight)
+				})
+			]
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
+		ref,
+		"data-wheel-open": api.isWheelOpen && api.visibleRange === "month" ? "" : void 0,
+		"aria-hidden": api.isWheelOpen && api.visibleRange === "month" ? true : void 0,
+		className: classNames.months,
+		children: api.months.map((month, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthView, {
+			api,
+			classNames,
+			month,
+			renderDateCellContent,
+			renderDateCellSupplement,
+			showWeekdays: true,
+			showMonthLabel: false,
+			renderHeader: api.visibleRange === "twoMonths" ? (labelId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TwoMonthHeader, {
+				api,
+				classNames,
+				label: month.label,
+				labelId,
+				position: index === 0 ? "first" : "last",
+				leftIcon,
+				rightIcon
+			}) : void 0
+		}, month.key))
+	});
+});
+DatePickerCalendar.displayName = "DatePickerCalendar";
+var DatePickerRoot = react.forwardRef((props, forwardedRef) => {
 	const api = (0, _seed_design_react_date_picker.useDatePicker)(props);
 	const [variantProps, otherProps] = _seed_design_css_recipes_date_picker.datePicker.splitVariantProps(props);
 	const classNames = (0, _seed_design_css_recipes_date_picker.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, monthRange: _monthRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, rangeStartReadOnly: _rangeStartReadOnly, ariaLabels: _ariaLabels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...styleAndRootProps } = otherProps;
-	const { style: styleProps, restProps: rootProps } = require_styled.useStyleProps(styleAndRootProps);
-	const rootRef = react.useRef(null);
+	const { children, 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, monthRange: _monthRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, rangeStartReadOnly: _rangeStartReadOnly, ariaLabels: _ariaLabels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, height, minHeight, maxHeight, ...rootProps } = otherProps;
 	const hasContinuousSizeConstraint = props.height !== void 0 || props.minHeight !== void 0 || props.maxHeight !== void 0;
 	react.useEffect(() => {
 		if (process.env.NODE_ENV === "production" || api.visibleRange !== "continuous") return;
-		if (!hasContinuousSizeConstraint) console.warn("ContinuousDatePicker: height, minHeight 또는 maxHeight가 필요합니다.");
+		if (!hasContinuousSizeConstraint) console.warn("DatePicker.Root: continuous에서는 height, minHeight 또는 maxHeight가 필요합니다.");
 	}, [api.visibleRange, hasContinuousSizeConstraint]);
 	react.useImperativeHandle(actionsRef, () => api.actions, [api.actions]);
 	const rootAriaLabel = ariaLabelledby ? ariaLabel : ariaLabel ?? api.ariaLabels.root;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.div, {
-		ref: (0, _radix_ui_react_compose_refs.composeRefs)(forwardedRef, rootRef, api.refs.root),
-		...(0, _seed_design_dom_utils.mergeProps)(api.rootProps, rootProps),
-		"aria-label": rootAriaLabel,
-		"aria-labelledby": ariaLabelledby,
-		className: (0, clsx.default)(classNames.root, className),
-		style: styleProps,
-		children: [api.visibleRange === "continuous" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.div, {
-			ref: api.refs.continuousScroll,
-			...api.continuousScrollProps,
-			"data-date-picker-continuous-scroll": "",
-			className: classNames.continuousScroll,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WeekdayRow, {
-				api,
-				classNames,
-				semantic: false
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.div, {
-				className: classNames.continuousContent,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
-						"aria-hidden": "true",
-						"data-date-picker-continuous-spacer": "",
-						className: classNames.continuousSpacer,
-						style: getContinuousSpacerStyle(api.virtual.topHeight)
-					}),
-					api.months.map((month) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthView, {
-						api,
-						classNames,
-						month,
-						renderDateCellContent,
-						renderDateCellSupplement,
-						showWeekdays: false,
-						showMonthLabel: true,
-						monthRef: api.refs.continuousMonth(month.key)
-					}, month.key)),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
-						"aria-hidden": "true",
-						"data-date-picker-continuous-spacer": "",
-						className: classNames.continuousSpacer,
-						style: getContinuousSpacerStyle(api.virtual.bottomHeight)
-					})
-				]
-			})]
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			api.visibleRange !== "twoMonths" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
-				api,
-				classNames
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.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__ */ (0, react_jsx_runtime.jsx)(MonthView, {
-					api,
-					classNames,
-					month,
-					renderDateCellContent,
-					renderDateCellSupplement,
-					showWeekdays: true,
-					showMonthLabel: false,
-					renderHeader: api.visibleRange === "twoMonths" ? (labelId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TwoMonthHeader, {
-						api,
-						classNames,
-						label: month.label,
-						labelId,
-						position: index === 0 ? "first" : "last"
-					}) : void 0
-				}, month.key))
-			}),
-			api.isWheelOpen && api.visibleRange !== "twoMonths" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WheelView, {
-				api,
-				classNames
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerContext.Provider, {
+		value: {
+			api,
+			classNames,
+			renderDateCellContent,
+			renderDateCellSupplement
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_popover.Popover.Root, {
+			open: api.visibleRange === "week" && api.isWheelOpen,
+			onOpenChange: (open) => {
+				if (!open) api.closeWheel();
+			},
+			placement: "bottom-start",
+			gutter: WEEK_WHEEL_POPOVER_GUTTER,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+				ref: composeRefs(forwardedRef, api.refs.root),
+				...(0, _seed_design_dom_utils.mergeProps)(api.rootProps, rootProps),
+				"aria-label": rootAriaLabel,
+				"aria-labelledby": ariaLabelledby,
+				className: (0, clsx.default)(classNames.root, className),
+				height,
+				minHeight,
+				maxHeight,
+				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.span, {
+					...api.liveRegionProps,
+					className: classNames.liveRegion,
+					children: api.headerLabel
+				})]
 			})
-		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.span, {
-			...api.liveRegionProps,
-			className: classNames.liveRegion,
-			children: api.headerLabel
-		})]
+		})
 	});
 });
-DatePickerImplementation.displayName = "DatePickerImplementation";
-var DatePicker = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerImplementation, {
-	ref,
-	...props,
-	visibleRange: "month"
-}));
-DatePicker.displayName = "DatePicker";
-var TwoMonthDatePicker = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerImplementation, {
-	ref,
-	...props,
-	visibleRange: "twoMonths"
-}));
-TwoMonthDatePicker.displayName = "TwoMonthDatePicker";
-var WeekDatePicker = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerImplementation, {
-	ref,
-	...props,
-	visibleRange: "week"
-}));
-WeekDatePicker.displayName = "WeekDatePicker";
-var ContinuousDatePicker = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerImplementation, {
-	ref,
-	...props,
-	visibleRange: "continuous"
-}));
-ContinuousDatePicker.displayName = "ContinuousDatePicker";
+DatePickerRoot.displayName = "DatePickerRoot";
 //#endregion
-exports.ContinuousDatePicker = ContinuousDatePicker;
-exports.DatePicker = DatePicker;
-exports.TwoMonthDatePicker = TwoMonthDatePicker;
-exports.WeekDatePicker = WeekDatePicker;
+exports.DatePickerCalendar = DatePickerCalendar;
+exports.DatePickerHeader = DatePickerHeader;
+exports.DatePickerRoot = DatePickerRoot;
+exports.DatePickerWheel = DatePickerWheel;

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

@@ -1,8 +1,8 @@
-import { DatePickerActions, DatePickerCellState, DatePickerMonthRange, UseDatePickerProps } from '@seed-design/react-date-picker';
+import { DatePickerActions, DatePickerCellState, DatePickerMonthRange, DatePickerVisibleRange, UseDatePickerProps } from '@seed-design/react-date-picker';
 import { PrimitiveProps } from '@seed-design/react-primitive';
-import { StyleProps } from '../../utils/styled';
+import { BoxProps } from '../Box/Box';
 import * as React from "react";
-type DatePickerRootProps = PrimitiveProps & Pick<StyleProps, "height" | "minHeight" | "maxHeight"> & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange" | "onValueChange">;
+type DatePickerRootElementProps = PrimitiveProps & Pick<BoxProps, "height" | "minHeight" | "maxHeight"> & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange" | "onValueChange">;
 export interface DatePickerCellContentRenderProps extends DatePickerCellState {
 }
 type DatePickerBehaviorProps = UseDatePickerProps extends infer Props ? Props extends UseDatePickerProps ? Omit<Props, "visibleRange" | "monthRange"> : never : never;
@@ -21,25 +21,54 @@ type DatePickerCellCustomization = {
     renderDateCellContent?: (props: DatePickerCellContentRenderProps) => React.ReactNode;
     renderDateCellSupplement?: never;
 };
-type DatePickerSharedProps = DatePickerBehaviorProps & DatePickerRootProps & {
+export type DatePickerRootProps = DatePickerBehaviorProps & DatePickerRootElementProps & DatePickerCellCustomization & {
+    /** Date Picker가 표시할 달력 레이아웃입니다. */
+    visibleRange: DatePickerVisibleRange;
+    /** Continuous 레이아웃에서 노출하고 이동할 수 있는 월 범위입니다. */
+    monthRange?: DatePickerMonthRange;
     /** 날짜 이동과 포커스 action을 받는 ref입니다. */
     actionsRef?: React.Ref<DatePickerActions>;
-} & DatePickerCellCustomization;
-type ContinuousSizeConstraint = (Required<Pick<StyleProps, "height">> & Pick<StyleProps, "minHeight" | "maxHeight">) | (Required<Pick<StyleProps, "minHeight">> & Pick<StyleProps, "height" | "maxHeight">) | (Required<Pick<StyleProps, "maxHeight">> & Pick<StyleProps, "height" | "minHeight">);
-export type DatePickerProps = DatePickerSharedProps;
-export type TwoMonthDatePickerProps = DatePickerSharedProps;
-export type WeekDatePickerProps = DatePickerSharedProps;
-type DatePickerPropsWithoutSize<Props = DatePickerSharedProps> = Props extends DatePickerSharedProps ? Omit<Props, "height" | "minHeight" | "maxHeight"> : never;
-export type ContinuousDatePickerProps = DatePickerPropsWithoutSize & ContinuousSizeConstraint & {
-    /**
-     * 노출하고 이동할 수 있는 월 범위입니다. 양끝 월을 포함합니다.
-     * 생략하면 `yearRange.start`의 1월부터 `yearRange.end`의 12월까지 노출합니다.
-     */
-    monthRange?: DatePickerMonthRange;
+    children?: React.ReactNode;
 };
-export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerSharedProps & React.RefAttributes<HTMLDivElement>>;
-export declare const TwoMonthDatePicker: React.ForwardRefExoticComponent<DatePickerSharedProps & React.RefAttributes<HTMLDivElement>>;
-export declare const WeekDatePicker: React.ForwardRefExoticComponent<DatePickerSharedProps & React.RefAttributes<HTMLDivElement>>;
-export declare const ContinuousDatePicker: React.ForwardRefExoticComponent<ContinuousDatePickerProps & React.RefAttributes<HTMLDivElement>>;
-export type { DatePickerActions, DatePickerAriaLabels, DatePickerConstraint, DatePickerConstraintContext, DatePickerDate, DatePickerMonthRange, DatePickerMultipleProps, DatePickerRangeProps, DatePickerRangeValue, DatePickerSelectionMode, DatePickerSingleProps, DatePickerValue, DatePickerYearMonth, } from '@seed-design/react-date-picker';
+export interface DatePickerHeaderProps {
+    leftIcon: React.ReactNode;
+    rightIcon: React.ReactNode;
+    headerIcon: React.ReactNode;
+}
+export declare const DatePickerHeader: React.ForwardRefExoticComponent<DatePickerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface DatePickerWheelColumn {
+    id: "year" | "month";
+    "aria-label": string;
+    className: string;
+    options: readonly {
+        value: string;
+        label: React.ReactNode;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    loop: boolean;
+}
+export interface DatePickerWheelRenderProps {
+    rootProps: React.HTMLAttributes<HTMLDivElement> & {
+        /** Month는 `medium`, Week popover는 `small` 크기를 사용합니다. */
+        size: "small" | "medium";
+        itemSize?: number;
+        visibleItemCount?: number;
+        disabled: boolean;
+        readOnly: boolean;
+        scrollFogSize?: number;
+    };
+    columns: readonly DatePickerWheelColumn[];
+}
+export interface DatePickerWheelProps {
+    children: (props: DatePickerWheelRenderProps) => React.ReactNode;
+}
+export declare const DatePickerWheel: React.ForwardRefExoticComponent<DatePickerWheelProps & React.RefAttributes<HTMLDivElement>>;
+export interface DatePickerCalendarProps {
+    leftIcon: React.ReactNode;
+    rightIcon: React.ReactNode;
+}
+export declare const DatePickerCalendar: React.ForwardRefExoticComponent<DatePickerCalendarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePickerRoot: React.ForwardRefExoticComponent<DatePickerRootProps & React.RefAttributes<HTMLDivElement>>;
+export type { DatePickerActions } from '@seed-design/react-date-picker';
 //# sourceMappingURL=DatePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}