@reitwagen/design-components 0.6.1 → 0.6.2

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

@@ -4,11 +4,16 @@ import { inputVariants } from "./TextInput.styles";
 export type TextInputProps = ComponentPropsWithRef<"input"> & VariantProps<typeof inputVariants> & {
     /**
      * 클리어 버튼이 표시되는 조건
-     * - 'never': 표시 안 함 (기본값)
-     * - 'while-editing': 입력값이 있을 때만 표시
+     * - 'never': 표시 안 함
+     * - 'while-editing': 입력값이 있으면서 포커스가 있을 때만 표시 (기본값)
      * - 'always': 항상 표시
      */
     clearButtonMode?: "always" | "while-editing" | "never";
+    /**
+     * 입력값의 단위 (예: "km", "원", "%")
+     * 입력 필드 오른쪽에 표시됩니다.
+     */
+    unit?: string;
 };
 /**
  * `TextInput`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
@@ -27,9 +32,16 @@ export type TextInputProps = ComponentPropsWithRef<"input"> & VariantProps<typeo
  *   <FormControl.Label>이메일</FormControl.Label>
  *   <TextInput type="email" />
  * </FormControl>
+ *
+ * // 단위와 함께 사용
+ * <TextInput
+ *   type="number"
+ *   unit="km"
+ *   placeholder="거리를 입력하세요"
+ * />
  * ```
  */
-export declare function TextInput({ variant, disabled, className, clearButtonMode, value: controlledValue, onChange, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+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;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,qBAAqB,EAAY,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,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;CACxD,CAAC;AAEJ;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,eAAyB,EACzB,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CAqDhB;yBA7De,SAAS"}
+{"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

@@ -7,6 +7,10 @@ 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)
@@ -24,14 +28,35 @@ const Icons_1 = require("../Icons");
  *   <FormControl.Label>이메일</FormControl.Label>
  *   <TextInput type="email" />
  * </FormControl>
+ *
+ * // 단위와 함께 사용
+ * <TextInput
+ *   type="number"
+ *   unit="km"
+ *   placeholder="거리를 입력하세요"
+ * />
  * ```
  */
-function TextInput({ variant, disabled, className, clearButtonMode = "never", value: controlledValue, onChange, ...props }) {
+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);
+        (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);
@@ -48,6 +73,26 @@ function TextInput({ variant, disabled, className, clearButtonMode = "never", va
         }
         onChange?.(syntheticEvent);
     };
-    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, onChange: handleChange, className: (0, style_1.cn)((0, TextInput_styles_1.inputVariants)({ variant, disabled, className }), isShowClearButton && "ui:pr-[52px]"), ...props }), isShowClearButton && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, disabled: disabled, className: "ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 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" }) }))] }));
+    (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/TextInput/TextInput.stories.d.ts

@@ -31,11 +31,17 @@ declare const meta: {
             };
             options: string[];
         };
+        unit: {
+            control: {
+                type: "text";
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Error: Story;
+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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCwB,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,sBAAsB,EAAE,KA+BpC,CAAC"}
+{"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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultWithClearButton = exports.Error = exports.Default = void 0;
+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 = {
@@ -34,6 +34,9 @@ TextInput은 한 줄의 텍스트 값을 설정하는데 사용됩니다.
             control: { type: "radio" },
             options: ["never", "always", "while-editing"],
         },
+        unit: {
+            control: { type: "text" },
+        },
     },
 };
 exports.default = meta;
@@ -83,6 +86,27 @@ exports.Error = {
         },
     },
 };
+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",

package/dist/index.css

@@ -559,9 +559,6 @@
   .ui\:py-\[14px\] {
     padding-block: 14px;
   }
-  .ui\:pr-\[52px\] {
-    padding-right: 52px;
-  }
   .ui\:text-body1 {
     font-size: var(--ui-text-body1);
     line-height: var(--tw-leading, var(--ui-text-body1--line-height));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reitwagen/design-components",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "sideEffects": [
     "**/*.css"
   ],
@@ -50,8 +50,8 @@
     "ts-node": "^10.9.2",
     "typescript": "5.9.2",
     "@reitwagen/eslint-config": "0.0.0",
-    "@reitwagen/typescript-config": "0.0.0",
-    "@reitwagen/tailwind-config": "0.0.0"
+    "@reitwagen/tailwind-config": "0.0.0",
+    "@reitwagen/typescript-config": "0.0.0"
   },
   "dependencies": {
     "axios": "^1.13.2",