@tipp/ui 2.2.6 → 2.2.8

package/dist/molecules/time-select.js

@@ -8,51 +8,58 @@ import "../chunk-2BPFXK4L.js";
 import "../chunk-NWJSLIQ3.js";
 import "../chunk-HBF6IIVZ.js";
 import "../chunk-2OMSNCRH.js";
+import "../chunk-OYM4XCHQ.js";
+import "../chunk-YJ7ZFOYL.js";
+import "../chunk-5ZITU5L7.js";
 import "../chunk-5XYPLDI5.js";
 import "../chunk-6NPTJBFE.js";
 import "../chunk-EEKOTWBE.js";
+import "../chunk-MUPK4L3U.js";
+import "../chunk-MUNMDHRF.js";
+import "../chunk-TVDKGMBI.js";
 import "../chunk-X2GMDZ7M.js";
 import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
-import "../chunk-OYM4XCHQ.js";
-import "../chunk-YJ7ZFOYL.js";
-import "../chunk-5ZITU5L7.js";
+import "../chunk-JIJLOKVN.js";
+import "../chunk-YYINCYQ2.js";
+import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
-import "../chunk-MUPK4L3U.js";
-import "../chunk-MUNMDHRF.js";
-import "../chunk-TVDKGMBI.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-O3T3TM3V.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-DHZVOXFM.js";
-import "../chunk-JIJLOKVN.js";
-import "../chunk-KIHAUDN6.js";
-import "../chunk-5AVBYDPB.js";
+import "../chunk-VTJZMOSP.js";
+import "../chunk-DIE6CIJQ.js";
+import "../chunk-BESTU2AY.js";
+import "../chunk-RHHS5DZL.js";
+import "../chunk-645GPOW2.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-U7N2PWMO.js";
+import "../chunk-636THO2G.js";
+import "../chunk-HF6GNDPV.js";
 import "../chunk-D4U2MCJG.js";
 import "../chunk-Y4U24VXI.js";
 import "../chunk-3NUQAVE6.js";
 import "../chunk-PT57HCAI.js";
 import "../chunk-2DZ2Y3JI.js";
 import "../chunk-ZOPYFDLO.js";
-import "../chunk-EGEQY3KT.js";
-import "../chunk-O3T3TM3V.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-RP2RGCAW.js";
+import "../chunk-MIMJ7LON.js";
 import "../chunk-W7X7KSJP.js";
 import "../chunk-VYCYVN3L.js";
 import "../chunk-OHMOP5PV.js";
 import "../chunk-NFDQJVFA.js";
 import "../chunk-Q37G2GS6.js";
-import "../chunk-VTJZMOSP.js";
-import "../chunk-5PMXVDI3.js";
-import "../chunk-BESTU2AY.js";
-import "../chunk-WHNYKU4S.js";
-import "../chunk-645GPOW2.js";
-import "../chunk-HYITAA4J.js";
-import "../chunk-U7N2PWMO.js";
-import "../chunk-R75DVJ6N.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-K36TPMKL.js";
+import "../chunk-U3BQT7ZO.js";
 import "../chunk-YGL6SWKN.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-Z34HR7RE.js";
@@ -62,9 +69,6 @@ import "../chunk-25HMMI7R.js";
 import "../chunk-TSXRCXC6.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
-import "../chunk-B6XJN6EC.js";
-import "../chunk-RP2RGCAW.js";
-import "../chunk-MIMJ7LON.js";
 import "../chunk-V5XKNSCK.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-2O45FRFQ.js";
@@ -82,9 +86,6 @@ import "../chunk-J2I3R3OV.js";
 import "../chunk-QO6KO6MN.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
-import "../chunk-FU5BNFCO.js";
-import "../chunk-K36TPMKL.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   TimeSelect

package/dist/utils/convert-icon-button-size.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/convert-icon-button-size.ts
+var convert_icon_button_size_exports = {};
+__export(convert_icon_button_size_exports, {
+  convertSize: () => convertSize,
+  convertSizeResponse: () => convertSizeResponse,
+  convertSizeStr: () => convertSizeStr
+});
+module.exports = __toCommonJS(convert_icon_button_size_exports);
+var convertSizeStr = (size) => {
+  switch (size) {
+    case "small":
+      return "1";
+    case "medium":
+      return "2";
+    case "large":
+      return "4";
+    default:
+      return "2";
+  }
+};
+var convertSizeResponse = (size) => {
+  if (typeof size === "string" || typeof size === "undefined") {
+    return convertSizeStr(size);
+  }
+  const radixSize = {};
+  let key = "initial";
+  for (key in size) {
+    radixSize[key] = convertSizeStr(size[key]);
+  }
+  return radixSize;
+};
+var convertSize = (size) => {
+  if (typeof size === "string") {
+    return convertSizeStr(size);
+  }
+  return convertSizeResponse(size);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  convertSize,
+  convertSizeResponse,
+  convertSizeStr
+});
+//# sourceMappingURL=convert-icon-button-size.cjs.map

package/dist/utils/convert-icon-button-size.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/convert-icon-button-size.ts"],"sourcesContent":["import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '4';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,IAAM,iBAAiB,CAC5B,SAC0B;AAC1B,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,sBAAsB,CACjC,SAC6B;AAC7B,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,aAAa;AAC3D,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,QAAM,YAAsC,CAAC;AAC7C,MAAI,MAAkB;AACtB,OAAK,OAAO,MAAM;AAChB,cAAU,GAAG,IAAI,eAAe,KAAK,GAAG,CAAC;AAAA,EAC3C;AACA,SAAO;AACT;AAEO,IAAM,cAAc,CACzB,SAC6B;AAC7B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,SAAO,oBAAoB,IAAI;AACjC;","names":[]}

package/dist/utils/convert-icon-button-size.d.cts

@@ -0,0 +1,9 @@
+import { ButtonProps as ButtonProps$1 } from '@radix-ui/themes';
+import { ButtonProps } from '../atoms/button.type.cjs';
+import '@radix-ui/themes/props';
+
+declare const convertSizeStr: (size: ButtonProps["size"]) => "1" | "2" | "3" | "4";
+declare const convertSizeResponse: (size: ButtonProps["size"]) => ButtonProps$1["size"];
+declare const convertSize: (size: ButtonProps["size"]) => ButtonProps$1["size"];
+
+export { convertSize, convertSizeResponse, convertSizeStr };

package/dist/utils/convert-icon-button-size.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps as ButtonProps$1 } from '@radix-ui/themes';
+import { ButtonProps } from '../atoms/button.type.js';
+import '@radix-ui/themes/props';
+
+declare const convertSizeStr: (size: ButtonProps["size"]) => "1" | "2" | "3" | "4";
+declare const convertSizeResponse: (size: ButtonProps["size"]) => ButtonProps$1["size"];
+declare const convertSize: (size: ButtonProps["size"]) => ButtonProps$1["size"];
+
+export { convertSize, convertSizeResponse, convertSizeStr };

package/dist/utils/convert-icon-button-size.js

@@ -0,0 +1,12 @@
+import {
+  convertSize,
+  convertSizeResponse,
+  convertSizeStr
+} from "../chunk-HF6GNDPV.js";
+import "../chunk-CRTRMMJ7.js";
+export {
+  convertSize,
+  convertSizeResponse,
+  convertSizeStr
+};
+//# sourceMappingURL=convert-icon-button-size.js.map

package/dist/utils/convert-icon-button-size.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "private": false,
   "type": "module",
   "exports": {
@@ -57,6 +57,7 @@
     "ts-jest": "^29.2.2",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
+    "typescript": "^5.0.0",
     "@tipp/eslint-config": "1.1.2",
     "@tipp/typescript-config": "1.0.1"
   },

package/src/atoms/auto-sizing-input.tsx

@@ -1,8 +1,11 @@
 import type { DetailedHTMLProps } from 'react';
+import type { Responsive } from '@radix-ui/themes/props';
+import { Box } from '@radix-ui/themes';
 import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -15,78 +18,152 @@ export interface AutoSizingInputProps
   value?: string;
   onChangeValue?: (value: string) => void;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  maxWidth?: Responsive<string>;
+  minWidth?: Responsive<string>;
 }
 
+// Canvas를 이용한 텍스트 너비 측정 훅
+const useTextWidth = (text: string, font: string): number => {
+  const [textWidth, setTextWidth] = useState(0);
+
+  useEffect(() => {
+    if (!text) {
+      setTextWidth(0);
+      return;
+    }
+
+    // 클라이언트 사이드에서만 실행
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) {
+      setTextWidth(0);
+      return;
+    }
+
+    context.font = font;
+    const width = Math.ceil(context.measureText(text).width);
+    setTextWidth(width);
+  }, [text, font]);
+
+  return textWidth;
+};
+
+const getFontString = (element: HTMLElement | null): string => {
+  if (!element) return '14px sans-serif'; // 기본값
+  
+  // SSR 환경에서는 window가 없으므로 기본값 반환
+  if (typeof window === 'undefined') return '14px sans-serif';
+
+  const computedStyle = window.getComputedStyle(element);
+  const fontSize = computedStyle.fontSize || '14px';
+  const fontFamily = computedStyle.fontFamily || 'sans-serif';
+  const fontWeight = computedStyle.fontWeight || 'normal';
+  const fontStyle = computedStyle.fontStyle || 'normal';
+
+  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+};
+
 export const AutoSizingInput = forwardRef<
   HTMLInputElement,
   AutoSizingInputProps
 >(
   (
-    { value: _value, onChangeValue, onChange, ...rest },
+    {
+      value: externalValue,
+      onChangeValue,
+      onChange,
+      maxWidth,
+      minWidth,
+      ...rest
+    },
     ref
   ): React.ReactNode => {
-    const [value, setValue] = useState(_value);
-    const [width, setWidth] = useState(0);
-    const span = useRef<HTMLSpanElement>(null);
+    const isControlled = externalValue !== undefined;
+    const [internalValue, setInternalValue] = useState(externalValue || '');
+    const value = isControlled ? externalValue : internalValue;
+
     const defaultRef = useRef<HTMLInputElement>(null);
     const inputRef = ref || defaultRef;
+    const [fontString, setFontString] = useState('14px sans-serif');
+
+    const displayValue = useMemo(
+      () => value || rest.placeholder || '',
+      [value, rest.placeholder]
+    );
+
+    const textWidth = useTextWidth(displayValue, fontString);
+
+    const dynamicWidth = useMemo(
+      () => `${Math.max(textWidth + 16, 24)}px`,
+      [textWidth]
+    );
 
     useEffect(() => {
-      span.current && setWidth(span.current.offsetWidth);
-    }, [value]);
+      if (!('current' in inputRef) || !inputRef.current) return;
+      const element = inputRef.current;
+      const updateFont = (): void => {
+        const font = getFontString(element);
+        setFontString(font);
+      };
 
-    const changeHandler = useCallback<
+      updateFont();
+ 
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (
+            mutation.type === 'attributes' &&
+            (mutation.attributeName === 'style' ||
+              mutation.attributeName === 'class')
+          ) {
+            updateFont();
+          }
+        });
+      });
+
+      observer.observe(element, {
+        attributes: true,
+        attributeFilter: ['style', 'class'],
+      });
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [inputRef]);
+
+    // 단일 변경 핸들러로 통합
+    const handleChange = useCallback<
       React.ChangeEventHandler<HTMLInputElement>
     >(
       (evt) => {
+        const newValue = evt.target.value;
+ 
         onChange?.(evt);
-        setValue(evt.target.value);
+ 
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+ 
+        onChangeValue?.(newValue);
       },
-      [onChange]
+      [onChange, onChangeValue, isControlled]
     );
 
-    useEffect(() => {
-      setValue(_value || '');
-    }, [_value]);
-
-    useEffect(() => {
-      onChangeValue?.(value || '');
-    }, [value, onChangeValue]);
-
     const onClick = useCallback(() => {
       if ('current' in inputRef) {
         inputRef.current?.focus();
       }
     }, [inputRef]);
 
-    const onKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(
-      (evt) => {
-        if (evt.key === 'Enter') {
-          onClick();
-        }
-      },
-      [onClick]
-    );
-
     return (
-      <div
+      <Box
         className="auto-sizing-input wrapper"
+        maxWidth={maxWidth}
+        minWidth={minWidth}
         onClick={onClick}
-        onKeyDown={onKeyDown}
-        role="button"
-        style={{ width: `${width + 24}px` }}
-        tabIndex={0}
+        style={{ width: dynamicWidth }}
       >
-        <span aria-hidden="true" ref={span} style={rest.style}>
-          {value || rest.placeholder || ''}
-        </span>
-        <input
-          onChange={changeHandler}
-          ref={inputRef}
-          value={value}
-          {...rest}
-        />
-      </div>
+        <input onChange={handleChange} ref={inputRef} value={value} {...rest} />
+      </Box>
     );
   }
 );

package/src/atoms/icon-button.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { IconButton as RadixIconButton } from '@radix-ui/themes';
-import { convertSize } from '../utils/convert-button-size';
+import { convertSize } from '../utils/convert-icon-button-size';
 import type { ButtonProps } from './button.type';
 
 export type IconButtonProps = ButtonProps;

package/src/molecules/date-picker/date-picker-button.tsx

@@ -2,13 +2,13 @@ import React, { useMemo } from 'react';
 import { format } from 'date-fns';
 import { clsx } from 'clsx';
 import type { ButtonProps } from '../../atoms';
-import { Box, Button, Flex } from '../../atoms';
+import { Box, Button, TextField } from '../../atoms';
 import { CalendarIcon } from '../../icon';
 import type { DatePickerProps } from '.';
 import { DatePicker } from '.';
 
 export type DatePickerButtonProps = DatePickerProps & {
-  placeholder?: React.ReactNode;
+  placeholder?: string;
   format?: (date: Date) => string;
   size?: ButtonProps['size'];
 };
@@ -16,7 +16,8 @@ export type DatePickerButtonProps = DatePickerProps & {
 export function DatePickerButton(
   props: DatePickerButtonProps
 ): React.ReactNode {
-  const { size, placeholder, format: formatProps, disabled, ...rest } = props;
+  const { size, format: formatProps, disabled, ...rest } = props;
+  const placeholder = rest.placeholder || '날짜를 선택해주세요';
 
   const buttonProps = useMemo(() => {
     const variant: ButtonProps['variant'] = 'outline';
@@ -27,9 +28,9 @@ export function DatePickerButton(
   const selectFormat = useMemo(() => {
     if (formatProps) return formatProps;
     return (date?: Date) => {
-      return date ? format(date, 'yyyy년 MM월 dd일') : placeholder;
+      return date ? format(date, 'yyyy년 MM월 dd일') : '';
     };
-  }, [formatProps, placeholder]);
+  }, [formatProps]);
 
   const className = useMemo(() => {
     return clsx(
@@ -38,15 +39,26 @@ export function DatePickerButton(
     );
   }, [disabled, props.readOnly]);
 
+  const placeholderVisible = useMemo(() => {
+
+    return rest.selected ? '' : 'placeholder-visible';
+  }, [rest.selected]);
+
   return (
     <Box p="0" width="100%">
       <DatePicker
         customInput={
-          <Button className={className} type="button" {...buttonProps}>
-            <Flex align="center" gap="3" justify="between" width="100%">
-              {rest.selected ? selectFormat(rest.selected) : placeholder}
-              <CalendarIcon />
-            </Flex>
+          <Button asChild className={className} type="button" {...buttonProps}>
+            <TextField.Root
+              className={placeholderVisible}
+              placeholder={placeholder || ''}
+              value={rest.selected ? selectFormat(rest.selected) : placeholder}
+            >
+              <TextField.Slot className="hide-slot" />
+              <TextField.Slot>
+                <CalendarIcon />
+              </TextField.Slot>
+            </TextField.Root>
           </Button>
         }
         wrapperClassName="full-width"

package/src/molecules/date-picker/index.tsx

@@ -106,12 +106,13 @@ function DropdownSelector({
         }
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 트리거 최적화
   }, [isOpen]);
 
   return (
-    <Popover.Root onOpenChange={onOpenChange} open={isOpen} modal>
+    <Popover.Root modal onOpenChange={onOpenChange} open={isOpen}>
       <Popover.Trigger>
-        <Button variant="ghost">
+        <Button className="react-datepicker_dropdown_header" variant="ghost">
           <Heading variant="heading4" weight="regular">
             {selectedValue}
             {suffix}
@@ -128,17 +129,17 @@ function DropdownSelector({
           <Flex direction="column" gap="1">
             {options.map((item: number) => (
               <Button
+                className="react-datepicker_dropdown_item"
                 color="gray"
                 data-year-month-dropdown-tiem={item}
                 key={item}
-                className={'react-datepicker_dropdown_item'}
+                onClick={() => {
+                  onSelect(item);
+                }}
                 onMouseDown={(e) => {
                   e.stopPropagation();
                   e.preventDefault();
                 }}
-                onClick={() => {
-                  onSelect(item);
-                }}
                 variant="transparent"
               >
                 <Typo weight={item === selectedValue ? 'bold' : undefined}>
@@ -189,8 +190,9 @@ const getRenderCustomHeader: (
     const month = date ? new Date(date).getMonth() + 1 : '-';
 
     return (
-      <Flex align="center"  justify="between" pl="2" pr="2">
+      <Flex align="center" justify="between" pl="2" pr="2">
         <IconButton
+          className="react-datepicker_dropdown_header"
           disabled={prevMonthButtonDisabled}
           onClick={decreaseMonth}
           type="button"
@@ -224,6 +226,7 @@ const getRenderCustomHeader: (
         </Flex>
 
         <IconButton
+          className="react-datepicker_dropdown_header"
           disabled={nextMonthButtonDisabled}
           onClick={increaseMonth}
           type="button"

package/src/utils/convert-icon-button-size.ts

@@ -0,0 +1,41 @@
+import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';
+import type { Breakpoint } from '@radix-ui/themes/props';
+import type { ButtonProps } from '../atoms/button.type';
+
+export const convertSizeStr = (
+  size: ButtonProps['size']
+): '1' | '2' | '3' | '4' => {
+  switch (size) {
+    case 'small':
+      return '1';
+    case 'medium':
+      return '2';
+    case 'large':
+      return '4';
+    default:
+      return '2';
+  }
+};
+
+export const convertSizeResponse = (
+  size: ButtonProps['size']
+): RadixButtonProps['size'] => {
+  if (typeof size === 'string' || typeof size === 'undefined') {
+    return convertSizeStr(size);
+  }
+  const radixSize: RadixButtonProps['size'] = {};
+  let key: Breakpoint = 'initial';
+  for (key in size) {
+    radixSize[key] = convertSizeStr(size[key]);
+  }
+  return radixSize;
+};
+
+export const convertSize = (
+  size: ButtonProps['size']
+): RadixButtonProps['size'] => {
+  if (typeof size === 'string') {
+    return convertSizeStr(size);
+  }
+  return convertSizeResponse(size);
+};