@x-plat/design-system 0.8.3 → 0.10.0

package/dist/components/DatePicker/index.cjs

@@ -38,7 +38,7 @@ __export(DatePicker_exports, {
 module.exports = __toCommonJS(DatePicker_exports);
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -180,22 +180,41 @@ var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
 );
 var SuccessIcon_default = SuccessIcon;
 
-// src/components/Input/InputValidations.tsx
+// src/components/FieldMessage/FieldMessage.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var InputValidations = (props) => {
-  const { message, status = "default" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorIcon_default, {})
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "message", children: message })
+var ICON = {
+  default: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoIcon_default, {}),
+  success: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InfoIcon_default, {}),
+  error: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var FieldMessage_default = FieldMessage;
+var Field = (props) => {
+  const { validations, children } = props;
+  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldMessage, { validations })
   ] });
 };
-InputValidations.displayName = "InputValidations";
-var InputValidations_default = InputValidations;
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
 
 // src/components/Input/reg.ts
 var numberAndCommaReg = /^[0-9,]+$/;
@@ -233,7 +252,6 @@ var handleTelBackspace = (prevValue, currValue) => {
 
 // src/components/Input/Input.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var import_react2 = require("react");
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -322,27 +340,22 @@ var Input = import_react.default.forwardRef((props, ref) => {
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
-              onChange: handleChange
+              onChange: handleChange,
+              "aria-invalid": hasError(validations) || void 0
             }
           ),
           suffix && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react2.createElement)(
-      InputValidations_default,
-      {
-        ...validation,
-        key: `${validation.message}_${idx}`
-      }
-    )) })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldMessage_default, { validations })
   ] });
 });
 Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 
 // src/tokens/svg/form/CloseEyeIcon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -412,10 +425,10 @@ var OpenEyeIcon_default = OpenEyeIcon;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var PasswordInput = import_react3.default.forwardRef(
+var PasswordInput = import_react2.default.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = import_react3.default.useState(false);
+    const [isView, setIsView] = import_react2.default.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
@@ -433,16 +446,16 @@ var PasswordInput = import_react3.default.forwardRef(
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/Modal/Modal.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react4.default.useState(false);
-  const [visible, setVisible] = import_react4.default.useState(false);
-  const [settled, setSettled] = import_react4.default.useState(false);
-  import_react4.default.useEffect(() => {
+  const [mounted, setMounted] = import_react3.default.useState(false);
+  const [visible, setVisible] = import_react3.default.useState(false);
+  const [settled, setSettled] = import_react3.default.useState(false);
+  import_react3.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -1396,15 +1409,15 @@ var import_jsx_runtime298 = require("react/jsx-runtime");
 var import_jsx_runtime299 = require("react/jsx-runtime");
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // src/components/Calendar/useCalendar.ts
-var import_react5 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 var useCalendar = (initialYear, initialMonth) => {
   const today = /* @__PURE__ */ new Date();
-  const [year, setYear] = import_react5.default.useState(initialYear ?? today.getFullYear());
-  const [month, setMonth] = import_react5.default.useState(initialMonth ?? today.getMonth());
-  const days = import_react5.default.useMemo(() => {
+  const [year, setYear] = import_react4.default.useState(initialYear ?? today.getFullYear());
+  const [month, setMonth] = import_react4.default.useState(initialMonth ?? today.getMonth());
+  const days = import_react4.default.useMemo(() => {
     const firstDay = new Date(year, month, 1);
     const lastDay = new Date(year, month + 1, 0);
     const startDayOfWeek = firstDay.getDay();
@@ -1447,7 +1460,7 @@ var useCalendar = (initialYear, initialMonth) => {
     }
     return result;
   }, [year, month]);
-  const goToPrevMonth = import_react5.default.useCallback(() => {
+  const goToPrevMonth = import_react4.default.useCallback(() => {
     setMonth((prev) => {
       if (prev === 0) {
         setYear((y) => y - 1);
@@ -1456,7 +1469,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev - 1;
     });
   }, []);
-  const goToNextMonth = import_react5.default.useCallback(() => {
+  const goToNextMonth = import_react4.default.useCallback(() => {
     setMonth((prev) => {
       if (prev === 11) {
         setYear((y) => y + 1);
@@ -1465,7 +1478,7 @@ var useCalendar = (initialYear, initialMonth) => {
       return prev + 1;
     });
   }, []);
-  const goToToday = import_react5.default.useCallback(() => {
+  const goToToday = import_react4.default.useCallback(() => {
     setYear(today.getFullYear());
     setMonth(today.getMonth());
   }, []);
@@ -1500,7 +1513,7 @@ var MONTH_LABELS = {
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_jsx_runtime300 = require("react/jsx-runtime");
-var DayCell = import_react6.default.memo(
+var DayCell = import_react5.default.memo(
   ({
     day,
     disabled,
@@ -1552,26 +1565,26 @@ var SingleDatePicker = (props) => {
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = import_react6.default.useState("days");
-  const [yearRangeStart, setYearRangeStart] = import_react6.default.useState(
+  const [pickerMode, setPickerMode] = import_react5.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react5.default.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = import_react6.default.useMemo(
+  const minTime = import_react5.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = import_react6.default.useMemo(
+  const maxTime = import_react5.default.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = import_react6.default.useMemo(() => {
+  const highlightSet = import_react5.default.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = import_react6.default.useCallback(
+  const handleSelect = import_react5.default.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -1700,8 +1713,8 @@ var formatDate = (date) => {
 };
 var InputDatePicker = (props) => {
   const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
-  const [isOpen, setIsOpen] = import_react7.default.useState(false);
-  const [tempDate, setTempDate] = import_react7.default.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = import_react6.default.useState(false);
+  const [tempDate, setTempDate] = import_react6.default.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -1750,18 +1763,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 
 // src/components/Tab/Tab.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var import_jsx_runtime302 = require("react/jsx-runtime");
-var TabItem = import_react8.default.forwardRef((props, ref) => {
+var TabItem = import_react7.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
     "div",
@@ -1779,22 +1792,23 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 var import_jsx_runtime303 = require("react/jsx-runtime");
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type, size = "md" } = props;
-  const [underlineStyle, setUnderlineStyle] = import_react9.default.useState({
+  const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
+  const shape = variant ?? type ?? "default";
+  const [underlineStyle, setUnderlineStyle] = import_react8.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react9.default.useRef([]);
+  const itemRefs = import_react8.default.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react9.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
       TabItem_default,
       {
@@ -1807,7 +1821,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+    shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -1833,7 +1847,7 @@ var RangePicker = (props) => {
     maxDate,
     locale = "ko"
   } = props;
-  const [activeTab, setActiveTab] = import_react10.default.useState("start");
+  const [activeTab, setActiveTab] = import_react9.default.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -1918,7 +1932,7 @@ var RangePicker_default = RangePicker;
 var import_jsx_runtime305 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react11.default.useState(false);
+  const [isOpen, setIsOpen] = import_react10.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -1927,7 +1941,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react11.default.cloneElement(component, { onClick: handleClick }),
+    import_react10.default.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(

package/dist/components/DatePicker/index.css

@@ -105,6 +105,44 @@
   outline-offset: 2px;
 }
 
+/* src/components/FieldMessage/fieldMessage.scss */
+.lib-xplat-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-field-message-wrap {
+  display: flex;
+  gap: var(--spacing-space-2);
+  margin-left: var(--spacing-space-1);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message {
+  display: flex;
+  gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  align-items: center;
+  user-select: none;
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.default {
+  color: var(--semantic-icon-secondary);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.success {
+  color: var(--semantic-text-success);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.warning {
+  color: var(--semantic-text-warning);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.error {
+  color: var(--semantic-text-error);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message > .icon {
+  font-size: var(--semantic-typo-label-2-m-size);
+}
+
 /* src/components/Input/input.scss */
 .lib-xplat-input-wrap {
   display: flex;
@@ -187,37 +225,6 @@
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper.pointer {
   cursor: pointer;
 }
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap {
-  display: flex;
-  gap: var(--spacing-space-2);
-  margin-left: var(--spacing-space-1);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
-  display: flex;
-  gap: var(--spacing-space-1);
-  font-family: var(--semantic-typo-caption-2-r-font);
-  font-size: var(--semantic-typo-caption-2-r-size);
-  line-height: var(--semantic-typo-caption-2-r-lh);
-  font-weight: var(--semantic-typo-caption-2-r-weight);
-  letter-spacing: var(--semantic-typo-caption-2-r-ls);
-  align-items: center;
-  user-select: none;
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: var(--semantic-icon-secondary);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
-  color: var(--semantic-text-success);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.warning {
-  color: var(--semantic-text-warning);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.error {
-  color: var(--semantic-text-error);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
-  font-size: var(--semantic-typo-label-2-m-size);
-}
 
 /* src/components/Modal/modal.scss */
 .lib-xplat-modal {

package/dist/components/DatePicker/index.js

@@ -141,22 +141,41 @@ var SuccessIcon = () => /* @__PURE__ */ jsx4(
 );
 var SuccessIcon_default = SuccessIcon;
 
-// src/components/Input/InputValidations.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var InputValidations = (props) => {
-  const { message, status = "default" } = props;
-  return /* @__PURE__ */ jsxs3("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ jsxs3("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ jsx5(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ jsx5(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ jsx5(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ jsx5(ErrorIcon_default, {})
-    ] }),
-    /* @__PURE__ */ jsx5("div", { className: "message", children: message })
+// src/components/FieldMessage/FieldMessage.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ICON = {
+  default: /* @__PURE__ */ jsx5(InfoIcon_default, {}),
+  success: /* @__PURE__ */ jsx5(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ jsx5(InfoIcon_default, {}),
+  error: /* @__PURE__ */ jsx5(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ jsx5("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ jsx5("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var FieldMessage_default = FieldMessage;
+var Field = (props) => {
+  const { validations, children } = props;
+  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx5(Fragment, { children });
+  return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ jsx5(FieldMessage, { validations })
   ] });
 };
-InputValidations.displayName = "InputValidations";
-var InputValidations_default = InputValidations;
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
 
 // src/components/Input/reg.ts
 var numberAndCommaReg = /^[0-9,]+$/;
@@ -194,7 +213,6 @@ var handleTelBackspace = (prevValue, currValue) => {
 
 // src/components/Input/Input.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-import { createElement } from "react";
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -283,20 +301,15 @@ var Input = React.forwardRef((props, ref) => {
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
-              onChange: handleChange
+              onChange: handleChange,
+              "aria-invalid": hasError(validations) || void 0
             }
           ),
           suffix && /* @__PURE__ */ jsx6("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ jsx6("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
-      InputValidations_default,
-      {
-        ...validation,
-        key: `${validation.message}_${idx}`
-      }
-    )) })
+    /* @__PURE__ */ jsx6(FieldMessage_default, { validations })
   ] });
 });
 Input.displayName = "Input";
@@ -1460,7 +1473,7 @@ var MONTH_LABELS = {
 };
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-import { Fragment, jsx as jsx300, jsxs as jsxs191 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx300, jsxs as jsxs191 } from "react/jsx-runtime";
 var DayCell = React5.memo(
   ({
     day,
@@ -1603,7 +1616,7 @@ var SingleDatePicker = (props) => {
             },
             i
           )) }),
-          pickerMode === "days" && /* @__PURE__ */ jsxs191(Fragment, { children: [
+          pickerMode === "days" && /* @__PURE__ */ jsxs191(Fragment2, { children: [
             /* @__PURE__ */ jsx300("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx300(
               "div",
               {
@@ -1740,7 +1753,8 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 import { jsx as jsx303, jsxs as jsxs193 } from "react/jsx-runtime";
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type, size = "md" } = props;
+  const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
+  const shape = variant ?? type ?? "default";
   const [underlineStyle, setUnderlineStyle] = React8.useState({
     left: 0,
     width: 0
@@ -1755,7 +1769,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs193("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ jsxs193("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ jsx303(
       TabItem_default,
       {
@@ -1768,7 +1782,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx303(
+    shape === "toggle" && /* @__PURE__ */ jsx303(
       "div",
       {
         className: "tab-toggle-underline",

package/dist/components/Drawer/index.d.cts

@@ -6,6 +6,7 @@ interface DrawerProps {
     isOpen: boolean;
     onClose: () => void;
     placement?: DrawerPlacement;
+    /** 패널 너비 */
     size?: DrawerSize;
     title?: React.ReactNode;
     children?: React.ReactNode;

package/dist/components/Drawer/index.d.ts

@@ -6,6 +6,7 @@ interface DrawerProps {
     isOpen: boolean;
     onClose: () => void;
     placement?: DrawerPlacement;
+    /** 패널 너비 */
     size?: DrawerSize;
     title?: React.ReactNode;
     children?: React.ReactNode;