sh-ui-cli 0.45.2 → 0.46.0

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

@@ -3,6 +3,7 @@
 import * as React from "react";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
   /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
   suffix?: React.ReactNode;
@@ -10,9 +11,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   prefix?: React.ReactNode;
 }
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /* ───────── InputGroup + InputAdornment (compound) ─────────
  * <InputGroup>
@@ -87,7 +85,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       <InputGroupContext.Provider value={{ inGroup: true }}>
         <div
           ref={mergedRef}
-          className={cx("sh-ui-input-group", className)}
+          className={cn("sh-ui-input-group", className)}
           data-disabled={disabled || undefined}
           aria-invalid={ariaInvalid}
           onClick={handleClick}
@@ -123,7 +121,7 @@ export const InputAdornment = React.forwardRef<
   return (
     <span
       ref={ref}
-      className={cx("sh-ui-input-group__adornment", className)}
+      className={cn("sh-ui-input-group__adornment", className)}
       data-interactive={interactive || undefined}
       {...props}
     />
@@ -143,7 +141,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         ref={ref}
         type={type}
-        className={cx(
+        className={cn(
           "sh-ui-input",
           !!prefix && "sh-ui-input--with-prefix",
           !!suffix && "sh-ui-input--with-suffix",

package/data/registry/react/components/input/styles.module.css

@@ -0,0 +1,200 @@
+.input {
+  display: block;
+  width: 100%;
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  line-height: 1;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 모바일/터치: 최소 탭 영역 + iOS 자동 줌 방지(16px) */
+@media (hover: none) and (pointer: coarse) {
+  .input {
+    height: 2.75rem;
+    font-size: var(--text-base);
+  }
+}
+
+.input::placeholder {
+  color: var(--foreground-subtle);
+}
+
+.input:hover:not(:disabled):not(:focus) {
+  border-color: var(--border-strong);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--foreground);
+  box-shadow: 0 0 0 1px var(--foreground);
+}
+
+.input:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  background: var(--background-subtle);
+}
+
+.input:read-only {
+  background: var(--background-subtle);
+}
+
+/* 숫자 input 화살표 제거 */
+.input[type="number"]::-webkit-outer-spin-button,
+.input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* ───────── prefix / suffix ───────── */
+
+.inputWrap {
+  position: relative;
+  width: 100%;
+  display: block;
+}
+
+.withPrefix { padding-left: var(--space-10); }
+.withSuffix { padding-right: var(--space-10); }
+
+.affix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground-muted);
+  pointer-events: none;
+}
+.affixPrefix { left: var(--space-3); }
+.affixSuffix { right: var(--space-1); }
+
+.affix > * { pointer-events: auto; }
+
+/* 비밀번호 토글 버튼 */
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+.toggle:hover { color: var(--foreground); background: var(--background-muted); }
+.toggle:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* 에러 상태 — aria-invalid="true" 기반 */
+.input[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+.input[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 1px var(--danger);
+}
+
+/* ───────── InputGroup + InputAdornment ───────── */
+
+.group {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--control-md);
+  padding: 0 var(--space-2);
+  gap: var(--space-2);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  cursor: text;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .group {
+    min-height: 2.75rem;
+  }
+}
+
+.group:hover:not([data-disabled]):not(:focus-within) {
+  border-color: var(--border-strong);
+}
+
+.group:focus-within {
+  border-color: var(--foreground);
+  box-shadow: 0 0 0 1px var(--foreground);
+}
+
+.group[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+.group[aria-invalid="true"]:focus-within {
+  box-shadow: 0 0 0 1px var(--danger);
+}
+
+.group[data-disabled] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  background: var(--background-subtle);
+}
+
+/* 그룹 내부의 Input은 자체 보더/배경/포커스 링을 모두 감춘다 */
+.input[data-in-group] {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.input[data-in-group]:focus,
+.input[data-in-group]:hover {
+  border: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.input[data-in-group]:disabled {
+  background: transparent;
+}
+
+.inputWrap[data-in-group] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.adornment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--foreground-muted);
+  padding: 0 var(--space-1);
+}
+
+.adornment[data-interactive] {
+  padding: 0;
+}

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * 필수 필드 표시. `true`면 LabelTitle 뒤에 `*` 표시.
@@ -10,15 +11,12 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
   isRequired?: boolean;
 }
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, children, isRequired, ...props }, ref) => (
     <label
       ref={ref}
-      className={cx(
+      className={cn(
         "flex flex-col gap-0.5 text-[length:var(--text-sm)] font-medium leading-snug text-foreground cursor-pointer select-none not-has-[[data-sh-ui-label-part]]:block",
         // 필수 표시 — title 이 있으면 title 뒤, 없으면 label 뒤에 * 부착
         isRequired &&
@@ -38,7 +36,7 @@ export function LabelTitle({ className, ...props }: React.HTMLAttributes<HTMLSpa
   return (
     <span
       data-sh-ui-label-part="title"
-      className={cx("font-semibold text-[length:var(--text-sm)] text-foreground", className)}
+      className={cn("font-semibold text-[length:var(--text-sm)] text-foreground", className)}
       {...props}
     />
   );
@@ -48,7 +46,7 @@ export function LabelSubtitle({ className, ...props }: React.HTMLAttributes<HTML
   return (
     <span
       data-sh-ui-label-part="subtitle"
-      className={cx("font-normal text-[0.8125rem] text-foreground", className)}
+      className={cn("font-normal text-[0.8125rem] text-foreground", className)}
       {...props}
     />
   );
@@ -58,7 +56,7 @@ export function LabelDescription({ className, ...props }: React.HTMLAttributes<H
   return (
     <p
       data-sh-ui-label-part="description"
-      className={cx("m-0 font-normal text-[0.8125rem] leading-snug text-foreground-muted", className)}
+      className={cn("m-0 font-normal text-[0.8125rem] leading-snug text-foreground-muted", className)}
       {...props}
     />
   );
@@ -68,7 +66,7 @@ export function LabelCaption({ className, ...props }: React.HTMLAttributes<HTMLP
   return (
     <p
       data-sh-ui-label-part="caption"
-      className={cx(
+      className={cn(
         "m-0 font-normal text-[length:var(--text-xs)] leading-tight text-[var(--foreground-subtle,var(--foreground-muted))] opacity-75",
         className,
       )}

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * 필수 필드 표시. `true`면 `::after`로 `*` 표시가 붙는다.
@@ -11,9 +12,6 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
   isRequired?: boolean;
 }
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 폼 컨트롤과 1:1로 연결되는 레이블. `htmlFor`로 컨트롤의 `id`와 매칭하거나
@@ -23,7 +21,7 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, children, isRequired, ...props }, ref) => (
     <label
       ref={ref}
-      className={cx("sh-ui-label", className)}
+      className={cn("sh-ui-label", className)}
       data-required={isRequired || undefined}
       {...props}
     >
@@ -35,20 +33,20 @@ Label.displayName = "Label";
 
 /** Label 안의 주 라벨 텍스트. 구조적 그룹핑이 필요할 때 Label과 함께 사용. */
 export function LabelTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cx("sh-ui-label__title", className)} {...props} />;
+  return <span className={cn("sh-ui-label__title", className)} {...props} />;
 }
 
 /** 라벨 옆에 약하게 표시되는 보조 텍스트(예: "선택 사항"). */
 export function LabelSubtitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cx("sh-ui-label__subtitle", className)} {...props} />;
+  return <span className={cn("sh-ui-label__subtitle", className)} {...props} />;
 }
 
 /** 라벨 아래에 붙는 안내 문구. 컨트롤과 `aria-describedby`로 연결할 것. */
 export function LabelDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cx("sh-ui-label__description", className)} {...props} />;
+  return <p className={cn("sh-ui-label__description", className)} {...props} />;
 }
 
 /** 라벨 아래의 보조 캡션(예: 입력 형식 예시, 글자 수 제한). */
 export function LabelCaption({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cx("sh-ui-label__caption", className)} {...props} />;
+  return <p className={cn("sh-ui-label__caption", className)} {...props} />;
 }

package/data/registry/react/components/markdown-editor/index.tailwind.tsx

@@ -5,6 +5,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { CodeEditor } from "../code-editor";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface MarkdownEditorProps {
   value?: string;
   defaultValue?: string;
@@ -19,9 +20,6 @@ export interface MarkdownEditorProps {
   "aria-label"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 마크다운 에디터 (Tailwind 변종) — react-markdown 의 출력 HTML 트리에 대한
@@ -50,7 +48,7 @@ export function MarkdownEditor({
 
   return (
     <div
-      className={cx("grid gap-[var(--space-3)]", layoutClass, className)}
+      className={cn("grid gap-[var(--space-3)]", layoutClass, className)}
       data-readonly={readOnly || undefined}
     >
       <div className="min-w-0">

package/data/registry/react/components/markdown-editor/index.tsx

@@ -6,6 +6,7 @@ import remarkGfm from "remark-gfm";
 import { CodeEditor } from "../code-editor";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface MarkdownEditorProps {
   /**
    * Controlled — 현재 마크다운. 명시 시 외부 상태가 진실원천.
@@ -42,9 +43,6 @@ export interface MarkdownEditorProps {
   "aria-label"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 마크다운 에디터 — CodeEditor(소스) + react-markdown(라이브 프리뷰)의 합성.
@@ -79,7 +77,7 @@ export function MarkdownEditor({
 
   return (
     <div
-      className={cx(
+      className={cn(
         "sh-ui-md-editor",
         preview && `sh-ui-md-editor--${previewPosition}`,
         !preview && "sh-ui-md-editor--no-preview",

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

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 상단 앱 메뉴바 (Tailwind 변종). DropdownMenu 와 함께 사용 — DropdownMenu 의
@@ -22,7 +20,7 @@ export const Menubar = React.forwardRef<
   return (
     <BaseMenubar
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center gap-[var(--space-1)] p-[var(--space-1)] bg-background border border-border rounded-[var(--radius)] shadow-[0_1px_2px_rgba(0,0,0,0.04)]",
         className,
       )}

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 상단 앱 메뉴바(파일/편집/보기 등). 내부에 DropdownMenu를 나란히 배치하여
@@ -27,7 +25,7 @@ export const Menubar = React.forwardRef<
   return (
     <BaseMenubar
       ref={ref}
-      className={cx("sh-ui-menubar", className)}
+      className={cn("sh-ui-menubar", className)}
       {...props}
     />
   );

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

@@ -2,10 +2,8 @@
 
 import * as React from "react";
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export interface NumericInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -59,7 +57,7 @@ export const NumericInput = React.forwardRef<HTMLInputElement, NumericInputProps
           ref={ref}
           type="text"
           inputMode="decimal"
-          className={cx(inputClasses, className)}
+          className={cn(inputClasses, className)}
           value={buffer}
           onChange={(e) => {
             const raw = e.target.value;

package/data/registry/react/components/numeric-input/index.tsx

@@ -3,10 +3,8 @@
 import * as React from "react";
 import "./styles.css";
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export interface NumericInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -93,7 +91,7 @@ export const NumericInput = React.forwardRef<HTMLInputElement, NumericInputProps
           ref={ref}
           type="text"
           inputMode="decimal"
-          className={cx("sh-ui-numeric-input__input", className)}
+          className={cn("sh-ui-numeric-input__input", className)}
           value={buffer}
           onChange={(e) => {
             const raw = e.target.value;

package/data/registry/react/components/page-toc/index.tailwind.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 export interface PageTOCProps {
@@ -120,7 +121,7 @@ export function PageTOC({
 
   return (
     <nav
-      className={cx(
+      className={cn(
         "fixed top-20 right-6 w-56 max-h-[calc(100vh-7rem)] overflow-y-auto pl-4 pr-2 py-3 border-l border-border text-[0.8125rem] z-[5] max-[80rem]:hidden",
         className,
       )}
@@ -135,7 +136,7 @@ export function PageTOC({
             <a
               href={`#${item.id}`}
               onClick={(e) => handleClick(e, item.id)}
-              className={cx(linkBase, linkClassesForLevel(item.level))}
+              className={cn(linkBase, linkClassesForLevel(item.level))}
               data-active={activeId === item.id ? "true" : undefined}
               aria-current={activeId === item.id ? "true" : undefined}
             >

package/data/registry/react/components/page-toc/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import "./styles.css";
 
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
@@ -52,8 +53,6 @@ interface TocItem {
   level: HeadingLevel;
 }
 
-const cx = (...args: (string | undefined | false | null)[]) =>
-  args.filter(Boolean).join(" ");
 
 /**
  * 페이지 내 자동 목차 (On this page).
@@ -151,7 +150,7 @@ export function PageTOC({
 
   return (
     <nav
-      className={cx("sh-ui-page-toc", className)}
+      className={cn("sh-ui-page-toc", className)}
       aria-label={typeof label === "string" ? label : "목차"}
     >
       <div className="sh-ui-page-toc__label">{label}</div>

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

@@ -1,16 +1,14 @@
 import * as React from "react";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export const Pagination = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
   function Pagination({ className, ...props }, ref) {
     return (
       <nav
         ref={ref}
         aria-label="Pagination"
-        className={cx("flex justify-center text-[length:var(--text-sm)] text-foreground", className)}
+        className={cn("flex justify-center text-[length:var(--text-sm)] text-foreground", className)}
         {...props}
       />
     );
@@ -22,7 +20,7 @@ export const PaginationContent = React.forwardRef<HTMLUListElement, React.HTMLAt
     return (
       <ul
         ref={ref}
-        className={cx("flex flex-wrap items-center gap-1 m-0 p-0 list-none", className)}
+        className={cn("flex flex-wrap items-center gap-1 m-0 p-0 list-none", className)}
         {...props}
       />
     );
@@ -31,7 +29,7 @@ export const PaginationContent = React.forwardRef<HTMLUListElement, React.HTMLAt
 
 export const PaginationItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
   function PaginationItem({ className, ...props }, ref) {
-    return <li ref={ref} className={cx("inline-flex items-center", className)} {...props} />;
+    return <li ref={ref} className={cn("inline-flex items-center", className)} {...props} />;
   },
 );
 
@@ -51,7 +49,7 @@ export const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLink
         aria-current={isActive ? "page" : undefined}
         data-active={isActive ? "" : undefined}
         data-size={size}
-        className={cx(linkBase, className)}
+        className={cn(linkBase, className)}
         {...props}
       />
     );
@@ -61,7 +59,7 @@ export const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLink
 export const PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
   function PaginationPrevious({ className, children, ...props }, ref) {
     return (
-      <PaginationLink ref={ref} aria-label="이전 페이지" className={cx("px-2.5", className)} {...props}>
+      <PaginationLink ref={ref} aria-label="이전 페이지" className={cn("px-2.5", className)} {...props}>
         <ChevronLeftIcon />
         {children ?? <span>이전</span>}
       </PaginationLink>
@@ -72,7 +70,7 @@ export const PaginationPrevious = React.forwardRef<HTMLAnchorElement, Pagination
 export const PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
   function PaginationNext({ className, children, ...props }, ref) {
     return (
-      <PaginationLink ref={ref} aria-label="다음 페이지" className={cx("px-2.5", className)} {...props}>
+      <PaginationLink ref={ref} aria-label="다음 페이지" className={cn("px-2.5", className)} {...props}>
         {children ?? <span>다음</span>}
         <ChevronRightIcon />
       </PaginationLink>
@@ -87,7 +85,7 @@ export const PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.HTMLAt
         ref={ref}
         role="presentation"
         aria-hidden="true"
-        className={cx("inline-flex items-center justify-center w-9 h-9 text-foreground-muted", className)}
+        className={cn("inline-flex items-center justify-center w-9 h-9 text-foreground-muted", className)}
         {...props}
       >
         <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>