sh-ui-cli 0.45.2 → 0.46.0

package/data/registry/react/components/header/index.tsx

@@ -4,10 +4,8 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
@@ -264,7 +262,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
     <HeaderContext.Provider value={ctx}>
       <header
         ref={setRefs}
-        className={cx("sh-ui-header", `sh-ui-header--${variant}`, className)}
+        className={cn("sh-ui-header", `sh-ui-header--${variant}`, className)}
         data-drawer-open={open ? "" : undefined}
         data-sticky-hide={stickyHide ? "" : undefined}
         data-hidden={hidden ? "" : undefined}
@@ -282,21 +280,21 @@ export const HeaderBrand = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(function HeaderBrand({ className, ...props }, ref) {
-  return <div ref={ref} className={cx("sh-ui-header__brand", className)} {...props} />;
+  return <div ref={ref} className={cn("sh-ui-header__brand", className)} {...props} />;
 });
 
 export const HeaderLogo = React.forwardRef<
   HTMLSpanElement,
   React.HTMLAttributes<HTMLSpanElement>
 >(function HeaderLogo({ className, ...props }, ref) {
-  return <span ref={ref} className={cx("sh-ui-header__logo", className)} {...props} />;
+  return <span ref={ref} className={cn("sh-ui-header__logo", className)} {...props} />;
 });
 
 export const HeaderTitle = React.forwardRef<
   HTMLSpanElement,
   React.HTMLAttributes<HTMLSpanElement>
 >(function HeaderTitle({ className, ...props }, ref) {
-  return <span ref={ref} className={cx("sh-ui-header__title", className)} {...props} />;
+  return <span ref={ref} className={cn("sh-ui-header__title", className)} {...props} />;
 });
 
 /* ───────── Trigger ─────────
@@ -322,7 +320,7 @@ export const HeaderTrigger = React.forwardRef<
     <button
       ref={setRefs}
       type="button"
-      className={cx("sh-ui-header__trigger", className)}
+      className={cn("sh-ui-header__trigger", className)}
       aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
       aria-expanded={open}
       data-open={open ? "" : undefined}
@@ -399,7 +397,7 @@ export const HeaderNav = React.forwardRef<HTMLElement, HeaderNavProps>(
     return (
       <NavMatchContext.Provider value={navMatch}>
         <NavLocationContext.Provider value="inline">
-          <nav ref={ref} className={cx("sh-ui-header__nav", className)} {...props}>
+          <nav ref={ref} className={cn("sh-ui-header__nav", className)} {...props}>
             {children}
           </nav>
         </NavLocationContext.Provider>
@@ -457,7 +455,7 @@ export const HeaderItem = React.forwardRef<
     <a
       ref={ref}
       href={href}
-      className={cx("sh-ui-header__item", className)}
+      className={cn("sh-ui-header__item", className)}
       data-active={computedActive ? "" : undefined}
       aria-current={computedActive ? "page" : undefined}
       onClick={(e) => {
@@ -478,7 +476,7 @@ export const HeaderActions = React.forwardRef<
   React.HTMLAttributes<HTMLDivElement>
 >(function HeaderActions({ className, ...props }, ref) {
   return (
-    <div ref={ref} className={cx("sh-ui-header__actions", className)} {...props} />
+    <div ref={ref} className={cn("sh-ui-header__actions", className)} {...props} />
   );
 });
 
@@ -493,7 +491,7 @@ export const HeaderDesktopOnly = React.forwardRef<
   React.HTMLAttributes<HTMLDivElement>
 >(function HeaderDesktopOnly({ className, ...props }, ref) {
   return (
-    <div ref={ref} className={cx("sh-ui-header__desktop-only", className)} {...props} />
+    <div ref={ref} className={cn("sh-ui-header__desktop-only", className)} {...props} />
   );
 });
 
@@ -503,7 +501,7 @@ export const HeaderMobileOnly = React.forwardRef<
   React.HTMLAttributes<HTMLDivElement>
 >(function HeaderMobileOnly({ className, ...props }, ref) {
   return (
-    <div ref={ref} className={cx("sh-ui-header__mobile-only", className)} {...props} />
+    <div ref={ref} className={cn("sh-ui-header__mobile-only", className)} {...props} />
   );
 });
 
@@ -524,7 +522,7 @@ export const HeaderNavGroup = React.forwardRef<HTMLDivElement, HeaderNavGroupPro
       return (
         <div
           ref={ref}
-          className={cx("sh-ui-header__group sh-ui-header__group--inline", className)}
+          className={cn("sh-ui-header__group sh-ui-header__group--inline", className)}
           {...props}
         >
           {children}
@@ -534,7 +532,7 @@ export const HeaderNavGroup = React.forwardRef<HTMLDivElement, HeaderNavGroupPro
     return (
       <div
         ref={ref}
-        className={cx("sh-ui-header__group sh-ui-header__group--drawer", className)}
+        className={cn("sh-ui-header__group sh-ui-header__group--drawer", className)}
         role="group"
         aria-label={typeof label === "string" ? label : undefined}
         {...props}
@@ -626,7 +624,7 @@ export function HeaderMenu({
     <MenuContext.Provider value={ctx}>
       <div
         ref={containerRef}
-        className={cx(
+        className={cn(
           "sh-ui-header__menu",
           `sh-ui-header__menu--${location}`,
           open && "is-open",
@@ -665,7 +663,7 @@ export const HeaderMenuTrigger = React.forwardRef<
       aria-expanded={open}
       aria-controls={contentId}
       data-open={open ? "" : undefined}
-      className={cx("sh-ui-header__menu-trigger", className)}
+      className={cn("sh-ui-header__menu-trigger", className)}
       onClick={(e) => {
         setOpen(!open);
         onClick?.(e);
@@ -704,7 +702,7 @@ export const HeaderMenuContent = React.forwardRef<
         aria-labelledby={triggerId}
         data-open={open ? "" : undefined}
         hidden={!open}
-        className={cx("sh-ui-header__menu-content", className)}
+        className={cn("sh-ui-header__menu-content", className)}
         style={style}
         {...props}
       >
@@ -754,7 +752,7 @@ export const HeaderMenuContent = React.forwardRef<
       role="menu"
       aria-labelledby={triggerId}
       data-open=""
-      className={cx("sh-ui-header__menu-content sh-ui-header__menu-content--portal", className)}
+      className={cn("sh-ui-header__menu-content sh-ui-header__menu-content--portal", className)}
       style={{
         position: "absolute",
         top: pos.top,

package/data/registry/react/components/input/index.module.tsx

@@ -0,0 +1,486 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import styles from "./styles.module.css";
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+  /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
+  suffix?: React.ReactNode;
+  /** input 좌측에 부착할 보조 노드. */
+  prefix?: React.ReactNode;
+}
+
+/* ───────── InputGroup + InputAdornment (compound) ─────────
+ * <InputGroup>
+ *   <InputAdornment><SearchIcon /></InputAdornment>
+ *   <Input placeholder="검색..." />
+ *   <InputAdornment><ClearButton /></InputAdornment>
+ * </InputGroup>
+ *
+ * InputGroup이 공용 보더/포커스 링을 담당하고, 내부 Input은 자신의 보더를
+ * 감춘다(data-in-group 기반). Adornment 위치는 children 순서로 결정한다.
+ */
+
+interface InputGroupContextValue {
+  inGroup: true;
+}
+
+const InputGroupContext = React.createContext<InputGroupContextValue | null>(null);
+
+function useInputGroup() {
+  return React.useContext(InputGroupContext);
+}
+
+export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  "aria-invalid"?: boolean | "true" | "false";
+  disabled?: boolean;
+}
+
+/**
+ * Input과 좌우 보조 요소(`InputAdornment`)를 한 박스로 묶는 컴파운드 래퍼.
+ * 그룹 영역 어디를 클릭해도 내부 input에 포커스가 이동하고, `aria-invalid`/`disabled`가 자식 전체에 전파된다.
+ */
+export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  (
+    {
+      className,
+      children,
+      "aria-invalid": ariaInvalid,
+      disabled,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const innerRef = React.useRef<HTMLDivElement | null>(null);
+    const mergedRef = React.useCallback(
+      (el: HTMLDivElement | null) => {
+        innerRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      },
+      [ref],
+    );
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      onClick?.(e);
+      if (e.defaultPrevented) return;
+      const target = e.target as HTMLElement;
+      if (target.closest("button, input, textarea, select, a")) return;
+      const input = innerRef.current?.querySelector<HTMLInputElement>("input");
+      input?.focus();
+    };
+
+    return (
+      <InputGroupContext.Provider value={{ inGroup: true }}>
+        <div
+          ref={mergedRef}
+          className={cn(styles.group, className)}
+          data-disabled={disabled || undefined}
+          aria-invalid={ariaInvalid}
+          onClick={handleClick}
+          {...props}
+        >
+          {children}
+        </div>
+      </InputGroupContext.Provider>
+    );
+  },
+);
+InputGroup.displayName = "InputGroup";
+
+export interface InputAdornmentProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * 클릭이 input으로 버블링되지 않도록 한다. 버튼·체크박스 등 인터랙티브 요소를
+   * Adornment에 담을 때 켤 것 — 그러지 않으면 클릭이 input 포커스로 가로채진다.
+   *
+   * @default false
+   */
+  interactive?: boolean;
+}
+
+/**
+ * InputGroup 안에 들어가는 보조 슬롯. 위치는 children 순서로 결정한다.
+ * 버튼 등 인터랙티브 요소를 담을 때는 `interactive`를 켜 input 포커스 가로채기를 막을 것.
+ */
+export const InputAdornment = React.forwardRef<HTMLSpanElement, InputAdornmentProps>(
+  ({ className, interactive, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(styles.adornment, className)}
+        data-interactive={interactive || undefined}
+        {...props}
+      />
+    );
+  },
+);
+InputAdornment.displayName = "InputAdornment";
+
+/**
+ * 한 줄 텍스트 입력. `prefix`/`suffix`로 아이콘이나 단위 등을 한 input 안에 붙일 수 있고,
+ * 더 많은 보조 요소가 필요하면 `InputGroup`+`InputAdornment` 조합을 사용한다.
+ */
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", prefix, suffix, ...props }, ref) => {
+    const group = useInputGroup();
+    const hasAffix = Boolean(prefix || suffix);
+    const input = (
+      <input
+        ref={ref}
+        type={type}
+        className={cn(
+          styles.input,
+          !!prefix && styles.withPrefix,
+          !!suffix && styles.withSuffix,
+          className,
+        )}
+        data-in-group={group ? "" : undefined}
+        {...props}
+      />
+    );
+
+    if (!hasAffix) return input;
+
+    return (
+      <div className={styles.inputWrap} data-in-group={group ? "" : undefined}>
+        {prefix && (
+          <span className={cn(styles.affix, styles.affixPrefix)}>{prefix}</span>
+        )}
+        {input}
+        {suffix && (
+          <span className={cn(styles.affix, styles.affixSuffix)}>{suffix}</span>
+        )}
+      </div>
+    );
+  },
+);
+Input.displayName = "Input";
+
+/* ───────── PasswordInput ───────── */
+
+function EyeIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" aria-hidden>
+      <path
+        d="M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <circle cx="10" cy="10" r="2.25" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+function EyeOffIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" aria-hidden>
+      <path
+        d="M3 3l14 14M8 5a8 8 0 0 1 2-.3c5 0 8 5.3 8 5.3a13 13 0 0 1-2.3 2.9M12 12a2.5 2.5 0 0 1-3.4-3.4m-2.3-2.5A13 13 0 0 0 2 10s3 5.5 8 5.5a8 8 0 0 0 3.3-.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export interface PasswordInputProps extends Omit<InputProps, "type" | "suffix"> {
+  /**
+   * 비밀번호 표시 토글 버튼을 숨긴다. 비밀번호를 절대 노출하면 안 되는 화면(결제 등)에서 사용.
+   *
+   * @default false
+   */
+  hideToggle?: boolean;
+}
+
+/**
+ * 비밀번호 입력. 기본으로 표시 토글 버튼이 suffix에 부착되며 `hideToggle`로 숨길 수 있다.
+ * 토글은 `aria-pressed`로 상태가 노출되고 Tab 흐름에서 제외(`tabIndex=-1`)된다.
+ */
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ hideToggle, ...props }, ref) => {
+    const [visible, setVisible] = React.useState(false);
+
+    const toggle = hideToggle ? undefined : (
+      <button
+        type="button"
+        className={styles.toggle}
+        onClick={() => setVisible((v) => !v)}
+        aria-label={visible ? "비밀번호 숨기기" : "비밀번호 표시"}
+        aria-pressed={visible}
+        tabIndex={-1}
+      >
+        {visible ? <EyeOffIcon /> : <EyeIcon />}
+      </button>
+    );
+
+    return (
+      <Input
+        ref={ref}
+        type={visible ? "text" : "password"}
+        suffix={toggle}
+        {...props}
+      />
+    );
+  },
+);
+PasswordInput.displayName = "PasswordInput";
+
+/* ───────── NumberInput ─────────
+ * 정수 입력 + 천 단위 콤마(옵션). value/onValueChange는 number | undefined.
+ */
+
+export interface NumberInputProps
+  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type"> {
+  /** 제어 모드 값. `undefined`는 빈 입력. */
+  value?: number;
+  /** 비제어 모드 초기값. */
+  defaultValue?: number;
+  /** 값 변경 콜백. 빈 입력일 때 `undefined`가 전달된다. */
+  onValueChange?: (value: number | undefined) => void;
+  /**
+   * 천 단위 콤마 자동 포맷.
+   * @default true
+   */
+  thousandsSeparator?: boolean;
+  /** 허용 최솟값. blur 시 자동 클램프된다. */
+  min?: number;
+  /** 허용 최댓값. blur 시 자동 클램프된다. */
+  max?: number;
+  /**
+   * 음수 입력 허용 여부.
+   * @default true
+   */
+  allowNegative?: boolean;
+}
+
+const formatNumber = (digits: string, thousandsSeparator: boolean): string => {
+  if (digits === "" || digits === "-") return digits;
+  const negative = digits.startsWith("-");
+  const body = negative ? digits.slice(1) : digits;
+  if (!body) return negative ? "-" : "";
+  const formatted = thousandsSeparator
+    ? body.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : body;
+  return negative ? `-${formatted}` : formatted;
+};
+
+const parseNumber = (s: string): number | undefined => {
+  const cleaned = s.replace(/[^\d-]/g, "");
+  if (!cleaned || cleaned === "-") return undefined;
+  const n = Number(cleaned);
+  return Number.isFinite(n) ? n : undefined;
+};
+
+/**
+ * 정수 입력 + 천 단위 콤마 자동 포맷. `value`는 `number | undefined`이고 표시 문자열과 분리되어 있다.
+ * blur 시 `min`/`max` 범위로 자동 클램프되며, 음수 허용은 `allowNegative`로 토글한다.
+ */
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      thousandsSeparator = true,
+      min,
+      max,
+      allowNegative = true,
+      onBlur,
+      ...rest
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const initial =
+      defaultValue !== undefined ? formatNumber(String(defaultValue), thousandsSeparator) : "";
+    const [internal, setInternal] = React.useState(initial);
+
+    const display = isControlled
+      ? value === undefined
+        ? ""
+        : formatNumber(String(value), thousandsSeparator)
+      : internal;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = e.target.value;
+      const allowedRe = allowNegative ? /[^\d-]/g : /[^\d]/g;
+      let cleaned = raw.replace(allowedRe, "");
+      if (allowNegative) cleaned = cleaned.replace(/(?!^)-/g, "");
+      const formatted = formatNumber(cleaned, thousandsSeparator);
+      if (!isControlled) setInternal(formatted);
+      onValueChange?.(parseNumber(cleaned));
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      const n = parseNumber(display);
+      if (n !== undefined) {
+        let clamped = n;
+        if (min !== undefined && clamped < min) clamped = min;
+        if (max !== undefined && clamped > max) clamped = max;
+        if (clamped !== n) {
+          const f = formatNumber(String(clamped), thousandsSeparator);
+          if (!isControlled) setInternal(f);
+          onValueChange?.(clamped);
+        }
+      }
+      onBlur?.(e);
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        inputMode="numeric"
+        value={display}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        {...rest}
+      />
+    );
+  },
+);
+NumberInput.displayName = "NumberInput";
+
+/* ───────── PhoneInput (KR) ───────── */
+
+const formatPhoneKR = (digits: string): string => {
+  const d = digits.replace(/\D/g, "").slice(0, 11);
+  if (d.length === 0) return "";
+
+  if (d.startsWith("02")) {
+    if (d.length <= 2) return d;
+    if (d.length <= 5) return `${d.slice(0, 2)}-${d.slice(2)}`;
+    if (d.length <= 9) return `${d.slice(0, 2)}-${d.slice(2, 5)}-${d.slice(5)}`;
+    return `${d.slice(0, 2)}-${d.slice(2, 6)}-${d.slice(6, 10)}`;
+  }
+
+  if (d.length <= 3) return d;
+  if (d.length <= 6) return `${d.slice(0, 3)}-${d.slice(3)}`;
+  if (d.length <= 10) return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
+  return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7, 11)}`;
+};
+
+export interface PhoneInputProps
+  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (digits: string) => void;
+}
+
+/**
+ * 한국 휴대폰·지역번호용 자동 하이픈 입력(010/02/031 등). `onValueChange`는 하이픈을 뺀
+ * 숫자 문자열만 콜백한다. 국제화가 필요하면 별도 컴포넌트로 분리해 사용할 것.
+ */
+export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  ({ value, defaultValue, onValueChange, onBlur, ...rest }, ref) => {
+    const isControlled = value !== undefined;
+    const initial = formatPhoneKR(defaultValue ?? "");
+    const [internal, setInternal] = React.useState(initial);
+
+    const display = isControlled ? formatPhoneKR(value ?? "") : internal;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const digits = e.target.value.replace(/\D/g, "").slice(0, 11);
+      const formatted = formatPhoneKR(digits);
+      if (!isControlled) setInternal(formatted);
+      onValueChange?.(digits);
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="tel"
+        inputMode="tel"
+        autoComplete="tel"
+        value={display}
+        onChange={handleChange}
+        onBlur={onBlur}
+        {...rest}
+      />
+    );
+  },
+);
+PhoneInput.displayName = "PhoneInput";
+
+/* ───────── BusinessNumberInput (KR) ───────── */
+
+const formatBRN = (digits: string): string => {
+  const d = digits.replace(/\D/g, "").slice(0, 10);
+  if (d.length <= 3) return d;
+  if (d.length <= 5) return `${d.slice(0, 3)}-${d.slice(3)}`;
+  return `${d.slice(0, 3)}-${d.slice(3, 5)}-${d.slice(5)}`;
+};
+
+/**
+ * 한국 사업자등록번호(10자리) 체크섬 검증.
+ */
+export function isValidBRN(digits: string): boolean {
+  const d = digits.replace(/\D/g, "");
+  if (d.length !== 10) return false;
+  const w = [1, 3, 7, 1, 3, 7, 1, 3, 5];
+  let sum = 0;
+  for (let i = 0; i < 9; i++) sum += parseInt(d[i], 10) * w[i];
+  sum += Math.floor((parseInt(d[8], 10) * 5) / 10);
+  const check = (10 - (sum % 10)) % 10;
+  return check === parseInt(d[9], 10);
+}
+
+export interface BusinessNumberInputProps
+  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (digits: string) => void;
+  /**
+   * 켜면 10자리 입력 시 사업자번호 체크섬을 검증해 `aria-invalid`를 자동 부여한다.
+   * 외부에서 `aria-invalid`를 명시하면 그 값이 우선한다.
+   *
+   * @default false
+   */
+  validateChecksum?: boolean;
+}
+
+/**
+ * 한국 사업자등록번호(XXX-XX-XXXXX) 자동 하이픈 입력.
+ */
+export const BusinessNumberInput = React.forwardRef<HTMLInputElement, BusinessNumberInputProps>(
+  (
+    { value, defaultValue, onValueChange, validateChecksum, onBlur, "aria-invalid": ariaInvalidProp, ...rest },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const initial = formatBRN(defaultValue ?? "");
+    const [internal, setInternal] = React.useState(initial);
+
+    const display = isControlled ? formatBRN(value ?? "") : internal;
+    const digits = display.replace(/\D/g, "");
+
+    const invalid =
+      ariaInvalidProp !== undefined
+        ? ariaInvalidProp
+        : validateChecksum && digits.length === 10 && !isValidBRN(digits);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const next = e.target.value.replace(/\D/g, "").slice(0, 10);
+      const formatted = formatBRN(next);
+      if (!isControlled) setInternal(formatted);
+      onValueChange?.(next);
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        inputMode="numeric"
+        value={display}
+        onChange={handleChange}
+        onBlur={onBlur}
+        aria-invalid={invalid || undefined}
+        {...rest}
+      />
+    );
+  },
+);
+BusinessNumberInput.displayName = "BusinessNumberInput";

package/data/registry/react/components/input/index.tailwind.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
   /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
   suffix?: React.ReactNode;
@@ -9,9 +10,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   prefix?: React.ReactNode;
 }
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /* ───────── Base utility 묶음 (반복 줄이기) ───────── */
 
@@ -69,7 +67,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       <InputGroupContext.Provider value={{ inGroup: true }}>
         <div
           ref={mergedRef}
-          className={cx(baseGroupClasses, className)}
+          className={cn(baseGroupClasses, className)}
           data-disabled={disabled || undefined}
           aria-invalid={ariaInvalid}
           onClick={handleClick}
@@ -91,7 +89,7 @@ export const InputAdornment = React.forwardRef<HTMLSpanElement, InputAdornmentPr
   ({ className, interactive, ...props }, ref) => (
     <span
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center flex-none text-foreground-muted px-[var(--space-1)] data-[interactive]:p-0",
         className,
       )}
@@ -112,7 +110,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         ref={ref}
         type={type}
-        className={cx(
+        className={cn(
           baseInputClasses,
           inGroupOverrides,
           !!prefix && "pl-[var(--space-10)]",