@reitwagen/design-components 0.6.0 → 0.6.2

package/dist/components/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,qBAAqB,EAQtB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,KAAK,uBAAuB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAIF,eAAO,MAAM,cAAc,+BAS1B,CAAC;AAEF,QAAA,MAAM,mBAAmB,oFAAwC,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAC7D,aAAa,GACb,YAAY,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACzC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,iBAAS,eAAe,CAAC,EACvB,EAAE,EAAE,MAAM,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAyDtB;kBAjEQ,eAAe;;;AAqExB,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,qBAAqB,EAQtB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,KAAK,uBAAuB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAIF,eAAO,MAAM,cAAc,+BAS1B,CAAC;AAEF,QAAA,MAAM,mBAAmB,oFAAwC,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAC7D,aAAa,GACb,YAAY,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACzC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,iBAAS,eAAe,CAAC,EACvB,EAAE,EAAE,MAAM,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAyDtB;kBAjEQ,eAAe;;;AAqExB,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

package/dist/components/FormControl/FormControl.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const class_variance_authority_1 = require("class-variance-authority");
 const style_1 = require("../../utils/style");
-const Input_1 = require("../Input");
+const TextInput_1 = require("../TextInput/TextInput");
 const FormControlLabel_1 = require("./FormControlLabel");
 const FormControlValidation_1 = require("./FormControlValidation");
 const FormControlContext = (0, react_1.createContext)(null);
@@ -48,7 +48,7 @@ function FormControlBase({ id: idProp, required = false, disabled = false, error
             case FormControlLabel_1.FormControlLabel:
                 labelSlot = child;
                 break;
-            case Input_1.Input: {
+            case TextInput_1.TextInput: {
                 const inputChild = child;
                 inputSlot = (0, react_1.cloneElement)(inputChild, {
                     id,

package/dist/components/FormControl/FormControl.stories.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultipleInputTypes = exports.VisuallyHiddenLabel = exports.RequiredWithError = exports.WithError = exports.Disabled = exports.Required = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FormControl_1 = require("./FormControl");
-const Input_1 = require("../Input");
+const TextInput_1 = require("../TextInput");
 const meta = {
     title: "Components/FormControl",
     component: FormControl_1.FormControl,
@@ -12,7 +12,7 @@ const meta = {
         docs: {
             description: {
                 component: `
-Input 컴포넌트에 Label, Validation 등을 제공하는 래퍼 컴포넌트입니다.
+컴포넌트에 Label, Validation 등을 제공하는 래퍼 컴포넌트입니다.
         `,
             },
         },
@@ -47,29 +47,29 @@ Input 컴포넌트에 Label, Validation 등을 제공하는 래퍼 컴포넌트
 };
 exports.default = meta;
 exports.Default = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" })] }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "email", placeholder: "example@baree.net" })] }) })),
 };
 exports.Required = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" })] }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "email", placeholder: "example@baree.net" })] }) })),
 };
 exports.Disabled = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { disabled: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" })] }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { disabled: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "email", placeholder: "example@baree.net" })] }) })),
 };
 exports.WithError = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { error: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" }), (0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Validation, { children: "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4" })] }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { error: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "email", placeholder: "example@baree.net" }), (0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Validation, { children: "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4" })] }) })),
 };
 /**
  * 필수 입력이면서 에러 상태인 필드입니다.
  */
 exports.RequiredWithError = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, error: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uBE44\uBC00\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "password", placeholder: "8\uC790 \uC774\uC0C1 \uC785\uB825" }), (0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Validation, { children: "\uBE44\uBC00\uBC88\uD638\uB294 \uCD5C\uC18C 8\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" })] }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, error: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uBE44\uBC00\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "password", placeholder: "8\uC790 \uC774\uC0C1 \uC785\uB825" }), (0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Validation, { children: "\uBE44\uBC00\uBC88\uD638\uB294 \uCD5C\uC18C 8\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" })] }) })),
 };
 /**
  * 시각적으로 숨겨진 라벨입니다. 접근성은 유지됩니다.
  */
 exports.VisuallyHiddenLabel = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { visuallyHidden: true, children: "\uAC80\uC0C9" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "search", placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694" })] }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:w-80", children: (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { visuallyHidden: true, children: "\uAC80\uC0C9" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "search", placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694" })] }) })),
 };
 exports.MultipleInputTypes = {
-    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:space-y-6 ui:w-80", children: [(0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", placeholder: "example@baree.net" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uBE44\uBC00\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "password", placeholder: "8\uC790 \uC774\uC0C1 \uC785\uB825" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC804\uD654\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "tel", placeholder: "010-1234-5678" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uB0A0\uC9DC" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { type: "date" })] })] })),
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:space-y-6 ui:w-80", children: [(0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC774\uBA54\uC77C" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "email", placeholder: "example@baree.net" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { required: true, ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uBE44\uBC00\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "password", placeholder: "8\uC790 \uC774\uC0C1 \uC785\uB825" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uC804\uD654\uBC88\uD638" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "tel", placeholder: "010-1234-5678" })] }), (0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ...props, children: [(0, jsx_runtime_1.jsx)(FormControl_1.FormControl.Label, { children: "\uB0A0\uC9DC" }), (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { type: "date" })] })] })),
 };

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithRef } from "react";
+import { VariantProps } from "class-variance-authority";
+import { inputVariants } from "./TextInput.styles";
+export type TextInputProps = ComponentPropsWithRef<"input"> & VariantProps<typeof inputVariants> & {
+    /**
+     * 클리어 버튼이 표시되는 조건
+     * - 'never': 표시 안 함
+     * - 'while-editing': 입력값이 있으면서 포커스가 있을 때만 표시 (기본값)
+     * - 'always': 항상 표시
+     */
+    clearButtonMode?: "always" | "while-editing" | "never";
+    /**
+     * 입력값의 단위 (예: "km", "원", "%")
+     * 입력 필드 오른쪽에 표시됩니다.
+     */
+    unit?: string;
+};
+/**
+ * `TextInput`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
+ * @see [RDS Storybook: TextInput](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-textinput--docs)
+ * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
+ * @example
+ * ```tsx
+ * // 독립적으로 사용
+ * <TextInput
+ *   placeholder="이메일을 입력하세요"
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ *
+ * // FormControl과 함께 사용
+ * <FormControl required>
+ *   <FormControl.Label>이메일</FormControl.Label>
+ *   <TextInput type="email" />
+ * </FormControl>
+ *
+ * // 단위와 함께 사용
+ * <TextInput
+ *   type="number"
+ *   unit="km"
+ *   placeholder="거리를 입력하세요"
+ * />
+ * ```
+ */
+export declare function TextInput({ variant, disabled, className, clearButtonMode, unit, value: controlledValue, onChange, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TextInput {
+    var displayName: string;
+}
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EAKtB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQnD,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACzD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,OAAO,CAAC;IACvD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,eAAiC,EACjC,IAAI,EACJ,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CA6GhB;yBAtHe,SAAS"}

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,98 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = TextInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = require("../../utils/style");
+const TextInput_styles_1 = require("./TextInput.styles");
+const Icons_1 = require("../Icons");
+const SPACING = {
+    GAP_BETWEEN_ELEMENTS: 12,
+    RIGHT_PADDING: 16,
+};
+/**
+ * `TextInput`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
+ * @see [RDS Storybook: TextInput](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-textinput--docs)
+ * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
+ * @example
+ * ```tsx
+ * // 독립적으로 사용
+ * <TextInput
+ *   placeholder="이메일을 입력하세요"
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ *
+ * // FormControl과 함께 사용
+ * <FormControl required>
+ *   <FormControl.Label>이메일</FormControl.Label>
+ *   <TextInput type="email" />
+ * </FormControl>
+ *
+ * // 단위와 함께 사용
+ * <TextInput
+ *   type="number"
+ *   unit="km"
+ *   placeholder="거리를 입력하세요"
+ * />
+ * ```
+ */
+function TextInput({ variant, disabled, className, clearButtonMode = "while-editing", unit, value: controlledValue, onChange, ...props }) {
+    const [internalValue, setInternalValue] = (0, react_1.useState)("");
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [rightContentWidth, setRightContentWidth] = (0, react_1.useState)(0);
+    const unitRef = (0, react_1.useRef)(null);
+    const clearButtonRef = (0, react_1.useRef)(null);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const isShowClearButton = clearButtonMode === "always" ||
+        (clearButtonMode === "while-editing" &&
+            String(value).length > 0 &&
+            isFocused);
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        props.onBlur?.(e);
+    };
+    const handleChange = (e) => {
+        if (!isControlled) {
+            setInternalValue(e.target.value);
+        }
+        onChange?.(e);
+    };
+    const handleClear = () => {
+        const syntheticEvent = {
+            target: { value: "" },
+            currentTarget: { value: "" },
+        };
+        if (!isControlled) {
+            setInternalValue("");
+        }
+        onChange?.(syntheticEvent);
+    };
+    (0, react_1.useEffect)(() => {
+        let totalWidth = 0;
+        if (unit && unitRef.current) {
+            totalWidth += unitRef.current.offsetWidth;
+        }
+        if (isShowClearButton && clearButtonRef.current) {
+            if (totalWidth > 0) {
+                totalWidth += SPACING.GAP_BETWEEN_ELEMENTS;
+            }
+            totalWidth += clearButtonRef.current.offsetWidth;
+        }
+        if (totalWidth > 0) {
+            totalWidth += SPACING.RIGHT_PADDING;
+        }
+        setRightContentWidth(totalWidth);
+    }, [unit, isShowClearButton]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "ui:relative ui:flex-1 ui:flex ui:items-center", children: [(0, jsx_runtime_1.jsx)("input", { disabled: disabled, value: value, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, style: {
+                    paddingRight: rightContentWidth > 0
+                        ? `${rightContentWidth + SPACING.GAP_BETWEEN_ELEMENTS}px`
+                        : undefined,
+                }, className: (0, style_1.cn)((0, TextInput_styles_1.inputVariants)({ variant, disabled, className })), ...props }), (0, jsx_runtime_1.jsxs)("div", { className: "ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:flex ui:items-center ui:gap-3", children: [unit && ((0, jsx_runtime_1.jsx)("span", { ref: unitRef, className: "ui:text-gray-500 ui:text-body4 ui:select-none ui:pointer-events-none", children: unit })), isShowClearButton && ((0, jsx_runtime_1.jsx)("button", { ref: clearButtonRef, type: "button", onClick: handleClear, disabled: disabled, onMouseDown: (e) => e.preventDefault(), className: "ui:cursor-pointer disabled:ui:cursor-not-allowed disabled:ui:opacity-50", "aria-label": "Clear input", children: (0, jsx_runtime_1.jsx)(Icons_1.IconCloseCircle, { className: "ui:text-gray-400" }) }))] })] }));
+}
+TextInput.displayName = "TextInput";

package/dist/components/{Input/Input.stories.d.ts → TextInput/TextInput.stories.d.ts}

@@ -1,8 +1,8 @@
 import type { StoryObj } from "@storybook/react";
-import { Input } from "./Input";
+import { TextInput } from "./TextInput";
 declare const meta: {
     title: string;
-    component: typeof Input;
+    component: typeof TextInput;
     tags: string[];
     parameters: {
         layout: string;
@@ -25,10 +25,23 @@ declare const meta: {
             };
             options: string[];
         };
+        clearButtonMode: {
+            control: {
+                type: "radio";
+            };
+            options: string[];
+        };
+        unit: {
+            control: {
+                type: "text";
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Error: Story;
-//# sourceMappingURL=Input.stories.d.ts.map
+export declare const Unit: Story;
+export declare const DefaultWithClearButton: Story;
+//# sourceMappingURL=TextInput.stories.d.ts.map

package/dist/components/TextInput/TextInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA2BnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAyBlB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA+BpC,CAAC"}

package/dist/components/TextInput/TextInput.stories.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultWithClearButton = exports.Unit = exports.Error = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextInput_1 = require("./TextInput");
+const meta = {
+    title: "Components/TextInput",
+    component: TextInput_1.TextInput,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+TextInput은 한 줄의 텍스트 값을 설정하는데 사용됩니다.
+
+## <b>TextInput guide</b>
+
+입력 필드는 텍스트의 길이를 고려하여 적절한 크기로 제공하며, 플레이스홀더를 레이블이나 도움말의 대체 수단으로 사용하지 않도록 합니다.
+`,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: "radio" },
+            options: ["default"],
+        },
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        clearButtonMode: {
+            control: { type: "radio" },
+            options: ["never", "always", "while-editing"],
+        },
+        unit: {
+            control: { type: "text" },
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ...props }), props.children] })),
+    args: {
+        placeholder: "placeholder",
+        variant: "default",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.Error = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ...props, variant: "error" }), props.children] })),
+    args: {
+        placeholder: "placeholder",
+        variant: "error",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.Unit = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: ``,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ...props, unit: "km" }), props.children] })),
+    args: {
+        placeholder: "주행거리를 입력하세요",
+        variant: "default",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.DefaultWithClearButton = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { clearButtonMode: "while-editing", ...props }), props.children] })),
+    args: {
+        clearButtonMode: "while-editing",
+        placeholder: "placeholder",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        clearButtonMode: {
+            control: { type: "radio" },
+            options: ["never", "always", "while-editing"],
+        },
+    },
+};

package/dist/components/{Input/Input.styles.d.ts → TextInput/TextInput.styles.d.ts}

@@ -2,4 +2,4 @@ export declare const inputVariants: (props?: ({
     variant?: "default" | "error" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-//# sourceMappingURL=Input.styles.d.ts.map
+//# sourceMappingURL=TextInput.styles.d.ts.map

package/dist/components/TextInput/TextInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;8EAmBzB,CAAC"}

package/dist/components/{Input/Input.styles.js → TextInput/TextInput.styles.js}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.inputVariants = void 0;
 const class_variance_authority_1 = require("class-variance-authority");
-exports.inputVariants = (0, class_variance_authority_1.cva)("ui:h-[50px] ui:bg-white ui:px-4 ui:rounded-[16px] ui:w-full ui:border ui:text-body4 ui:transition-colors ui:outline-none", {
+exports.inputVariants = (0, class_variance_authority_1.cva)("ui:h-[50px] ui:bg-white ui:px-4 ui:rounded-2xl ui:w-full ui:border ui:text-body4 ui:transition-colors ui:outline-none", {
     variants: {
         variant: {
             default: "ui:border-gray-100 ui:text-gray-800 ui:placeholder:text-body4 ui:placeholder:text-gray-500 ui:focus:bg-gray-50 ui:focus:border-gray-200",

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

@@ -0,0 +1,2 @@
+export { TextInput } from "./TextInput";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TextInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/TextInput/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+var TextInput_1 = require("./TextInput");
+Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return TextInput_1.TextInput; } });

package/dist/index.css

@@ -29,6 +29,7 @@
     --ui-color-gray-900: #04041b;
     --ui-color-white: #ffffff;
     --ui-spacing: 0.25rem;
+    --ui-radius-2xl: 1rem;
     --ui-default-transition-duration: 150ms;
     --ui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --ui-default-font-family: var(--ui-font-sans);
@@ -282,6 +283,18 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .ui\:absolute {
+    position: absolute;
+  }
+  .ui\:relative {
+    position: relative;
+  }
+  .ui\:top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  .ui\:right-4 {
+    right: calc(var(--ui-spacing) * 4);
+  }
   .ui\:my-3 {
     margin-block: calc(var(--ui-spacing) * 3);
   }
@@ -374,6 +387,10 @@
     --tw-translate-x: calc(var(--ui-spacing) * 6);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .ui\:-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .ui\:cursor-default {
     cursor: default;
   }
@@ -423,6 +440,9 @@
       margin-block-end: calc(calc(var(--ui-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .ui\:rounded-2xl {
+    border-radius: var(--ui-radius-2xl);
+  }
   .ui\:rounded-\[8px\] {
     border-radius: 8px;
   }
@@ -435,9 +455,6 @@
   .ui\:rounded-\[14px\] {
     border-radius: 14px;
   }
-  .ui\:rounded-\[16px\] {
-    border-radius: 16px;
-  }
   .ui\:rounded-full {
     border-radius: calc(infinity * 1px);
   }

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export * from "./components/Toggle";
 export * from "./components/Checkbox";
 export * from "./components/Radio";
 export * from "./components/RadioGroup";
-export * from "./components/Input";
+export * from "./components/TextInput";
 export * from "./components/FormControl";
 export * from "./components/Icons";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -21,7 +21,7 @@ __exportStar(require("./components/Toggle"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/Radio"), exports);
 __exportStar(require("./components/RadioGroup"), exports);
-__exportStar(require("./components/Input"), exports);
+__exportStar(require("./components/TextInput"), exports);
 __exportStar(require("./components/FormControl"), exports);
 /* --------------------------------- ICONS ---------------------------------- */
 __exportStar(require("./components/Icons"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reitwagen/design-components",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "sideEffects": [
     "**/*.css"
   ],

package/dist/components/Input/Input.d.ts

@@ -1,28 +0,0 @@
-import { ComponentPropsWithRef } from "react";
-import { VariantProps } from "class-variance-authority";
-import { inputVariants } from "./Input.styles";
-export type InputProps = ComponentPropsWithRef<"input"> & VariantProps<typeof inputVariants>;
-/**
- * `Input`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
- * @see [RDS Storybook: Input](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-input--docs)
- * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
- * @example
- * ```tsx
- * // 독립적으로 사용
- * <Input
- *   placeholder="이메일을 입력하세요"
- *   onChange={(e) => setEmail(e.target.value)}
- * />
- *
- * // FormControl과 함께 사용
- * <FormControl required>
- *   <FormControl.Label>이메일</FormControl.Label>
- *   <Input type="email" />
- * </FormControl>
- * ```
- */
-export declare function Input({ variant, disabled, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Input {
-    var displayName: string;
-}
-//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input/Input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACrD,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAQ3E;yBARe,KAAK"}

package/dist/components/Input/Input.js

@@ -1,30 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = Input;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("../../utils/style");
-const Input_styles_1 = require("./Input.styles");
-/**
- * `Input`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
- * @see [RDS Storybook: Input](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-input--docs)
- * @see [RDS Storybook: FormControl](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-formcontrol--docs)
- * @example
- * ```tsx
- * // 독립적으로 사용
- * <Input
- *   placeholder="이메일을 입력하세요"
- *   onChange={(e) => setEmail(e.target.value)}
- * />
- *
- * // FormControl과 함께 사용
- * <FormControl required>
- *   <FormControl.Label>이메일</FormControl.Label>
- *   <Input type="email" />
- * </FormControl>
- * ```
- */
-function Input({ variant, disabled, className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("input", { disabled: disabled, className: (0, style_1.cn)((0, Input_styles_1.inputVariants)({ variant, disabled, className })), ...props }));
-}
-Input.displayName = "Input";

package/dist/components/Input/Input.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA2BnB,CAAC"}

package/dist/components/Input/Input.stories.js

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Error = exports.Default = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Input_1 = require("./Input");
-const meta = {
-    title: "Components/Input",
-    component: Input_1.Input,
-    tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            description: {
-                component: `
-Input은 한 줄의 텍스트 값을 설정하는데 사용됩니다.
-
-## <b>Input guide</b>
-
-입력 필드는 텍스트의 길이를 고려하여 적절한 크기로 제공하며, 플레이스홀더를 레이블이나 도움말의 대체 수단으로 사용하지 않도록 합니다.
-`,
-            },
-        },
-    },
-    argTypes: {
-        variant: {
-            control: { type: "radio" },
-            options: ["default"],
-        },
-        disabled: {
-            control: { type: "boolean" },
-            options: ["true", "false"],
-        },
-    },
-};
-exports.default = meta;
-exports.Default = {
-    parameters: {
-        layout: "centered",
-        docs: {
-            description: {
-                story: `
-
-`,
-            },
-        },
-    },
-    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { ...props }), props.children] })),
-    args: {
-        placeholder: "placeholder",
-        variant: "default",
-    },
-    argTypes: {
-        disabled: {
-            control: { type: "boolean" },
-            options: ["true", "false"],
-        },
-    },
-};
-exports.Error = {
-    parameters: {
-        layout: "centered",
-        docs: {
-            description: {
-                story: `
-
-`,
-            },
-        },
-    },
-    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { ...props, variant: "error" }), props.children] })),
-    args: {
-        placeholder: "placeholder",
-        variant: "error",
-    },
-    argTypes: {
-        disabled: {
-            control: { type: "boolean" },
-            options: ["true", "false"],
-        },
-    },
-};

package/dist/components/Input/Input.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;8EAmBzB,CAAC"}

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

@@ -1,2 +0,0 @@
-export { Input } from "./Input";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Input/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Input/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-var Input_1 = require("./Input");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });