@bigtablet/design-system 3.10.1 → 3.11.0

package/dist/index.css

@@ -4908,7 +4908,8 @@ select:-webkit-autofill:disabled {
   width: 20px;
   height: 20px;
 }
-.text_field_clear {
+.text_field_clear,
+.text_field_action > * {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4923,11 +4924,13 @@ select:-webkit-autofill:disabled {
   transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
   padding: 0;
 }
-.text_field_clear:hover {
+.text_field_clear:hover,
+.text_field_action > *:hover {
   color: var(--bt-color-text-heading);
   background: var(--bt-color-state-hover-on-light);
 }
-.text_field_clear:focus-visible {
+.text_field_clear:focus-visible,
+.text_field_action > *:focus-visible {
   outline: none;
   box-shadow: var(--bt-focus-ring);
 }
@@ -5001,6 +5004,7 @@ select:-webkit-autofill:disabled {
   .text_field_label,
   .text_field_container,
   .text_field_clear,
+  .text_field_action > *,
   .text_field_helper {
     transition: none;
   }

package/dist/index.d.ts

@@ -197,13 +197,17 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 declare const Badge: ({ variant, shape, size, appearance, count, max, className, children, ...props }: BadgeProps) => React$1.JSX.Element;
 
 interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** 일러스트 영역 (아이콘/이미지 등) */
+    /**
+     * 일러스트 영역 (아이콘/이미지 등). **장식 전용** - `aria-hidden="true"` 래퍼로 접근성 트리에서
+     * 제외된다. 포커스 가능한 요소(버튼/링크 등)를 넣으면 포커스는 가는데 보조기기엔 없는 요소가
+     * 되므로(WCAG 4.1.2) `action` 을 쓸 것.
+     */
     illustration?: React$1.ReactNode;
     /** 제목 */
     title?: React$1.ReactNode;
     /** 보조 설명 */
     description?: React$1.ReactNode;
-    /** 액션 영역 (Button 등) */
+    /** 액션 영역 (Button 등). `aria-hidden` 을 붙이지 않아 보조기기에 그대로 노출된다. */
     action?: React$1.ReactNode;
     /** 크기 (기본 "md") */
     size?: "sm" | "md" | "lg";
@@ -229,9 +233,14 @@ interface ErrorStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
     title?: React$1.ReactNode;
     /** 보조 설명 */
     description?: React$1.ReactNode;
-    /** 아이콘/일러스트 (미지정 시 기본 경고 아이콘. `null` 로 숨김) */
+    /**
+     * 아이콘/일러스트 (미지정 시 기본 경고 아이콘. `null` 로 숨김). **장식 전용** -
+     * `aria-hidden="true"` 래퍼로 접근성 트리에서 제외된다. 래퍼는 필수다: 기본 아이콘이
+     * 이름 없는 bare lucide svg 라서, 빼면 `role="alert"` 이 이름 없는 그래픽까지 읽는다.
+     * 포커스 가능한 요소는 `action` 을 쓸 것 (WCAG 4.1.2).
+     */
     icon?: React$1.ReactNode;
-    /** 액션 영역 (재시도 버튼 등) */
+    /** 액션 영역 (재시도 버튼 등). `aria-hidden` 을 붙이지 않아 보조기기에 그대로 노출된다. */
     action?: React$1.ReactNode;
     /**
      * 레이아웃 모드 (기본 "page").
@@ -1994,10 +2003,36 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
     error?: boolean;
     /** 성공(검증 통과) 상태 여부. `error` 가 true 면 무시된다. */
     success?: boolean;
-    /** 입력 필드 왼쪽에 표시할 아이콘 */
+    /**
+     * 입력 필드 왼쪽에 표시할 **장식** 아이콘. `aria-hidden` 으로 접근성 트리에서 제외된다.
+     * 포커스 가능한 요소(버튼 등)를 넣어야 하면 `leadingAction` 을 쓸 것.
+     */
     leadingIcon?: React$1.ReactNode;
-    /** 입력 필드 오른쪽에 표시할 아이콘 */
+    /**
+     * 입력 필드 오른쪽에 표시할 **장식** 아이콘. `aria-hidden` 으로 접근성 트리에서 제외된다.
+     * 포커스 가능한 요소(버튼 등)를 넣어야 하면 `trailingAction` 을 쓸 것.
+     */
     trailingIcon?: React$1.ReactNode;
+    /**
+     * 입력 필드 왼쪽 조작 요소(버튼 등). `aria-hidden` 을 붙이지 않아 보조기기에 그대로 노출된다.
+     * 아이콘 칸의 위치·크기 CSS 를 재사용하고, 넘긴 요소가 40x40 히트 영역을 채운다(WCAG 2.5.8).
+     */
+    leadingAction?: React$1.ReactNode;
+    /**
+     * 입력 필드 오른쪽 조작 요소(버튼 등). `aria-hidden` 을 붙이지 않아 보조기기에 그대로 노출된다.
+     * 아이콘 칸의 위치·크기 CSS 를 재사용하고, 넘긴 요소가 40x40 히트 영역을 채운다(WCAG 2.5.8).
+     */
+    trailingAction?: React$1.ReactNode;
+    /**
+     * 비밀번호 표시/숨기기 토글 버튼을 오른쪽에 내장한다.
+     * 켜면 `type` 을 토글이 직접 관리한다 - 숨김 상태는 넘긴 `type`(보통 `"password"`), 표시 상태는 `"text"`.
+     */
+    showPasswordToggle?: boolean;
+    /** 토글 버튼의 `aria-label`. i18n 은 앱이 주입한다 (기본값: 영문). */
+    passwordToggleLabels?: {
+        show: string;
+        hide: string;
+    };
     /** 값이 있을 때 오른쪽에 지우기(X) 버튼 표시 여부 */
     clearable?: boolean;
     /** 컨테이너 전체 너비 차지 여부 */
@@ -2028,7 +2063,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
  * @returns 렌더링된 텍스트 필드 UI
  */
 declare const TextField: {
-    ({ id, label, showLabel, supportingText, error, success, leadingIcon, trailingIcon, clearable, fullWidth, size, variant, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
+    ({ id, label, showLabel, supportingText, error, success, leadingIcon, trailingIcon, leadingAction, trailingAction, showPasswordToggle, passwordToggleLabels, clearable, type, fullWidth, size, variant, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -3,7 +3,7 @@ import './index.css';
 import * as React16 from 'react';
 import { createContext, useRef, useState, useId, useEffect, useContext, useCallback, useMemo, Fragment, useImperativeHandle, useLayoutEffect } from 'react';
 import { useSpring, animated } from '@react-spring/web';
-import { ChevronDown, ChevronRight, Globe, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, XCircle, AlertTriangle, CheckCircle2, Info, Bell, Search, Check, Image, X, TriangleAlert } from 'lucide-react';
+import { ChevronDown, ChevronRight, Globe, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, XCircle, AlertTriangle, CheckCircle2, Info, Bell, Search, Check, Image, X, EyeOff, Eye, TriangleAlert } from 'lucide-react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -4413,6 +4413,7 @@ var Textarea = ({
 };
 Textarea.displayName = "Textarea";
 var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: iconSize.lg, "aria-hidden": "true" });
+var DEFAULT_PASSWORD_TOGGLE_LABELS = { show: "Show password", hide: "Hide password" };
 var TextField = ({
   id,
   label,
@@ -4422,7 +4423,12 @@ var TextField = ({
   success,
   leadingIcon,
   trailingIcon,
+  leadingAction,
+  trailingAction,
+  showPasswordToggle,
+  passwordToggleLabels,
   clearable,
+  type,
   fullWidth,
   size = "md",
   variant = "outline",
@@ -4441,9 +4447,7 @@ var TextField = ({
   const helperId = supportingText ? `${inputId}-help` : void 0;
   const isControlled = value !== void 0;
   const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-  const [innerValue, setInnerValue] = useState(
-    () => applyTransform(value ?? defaultValue ?? "")
-  );
+  const [innerValue, setInnerValue] = useState(() => applyTransform(value ?? defaultValue ?? ""));
   const isComposingRef = useRef(false);
   const lastEmittedValueRef = useRef(innerValue);
   const [prevValue, setPrevValue] = useState(value);
@@ -4466,6 +4470,14 @@ var TextField = ({
   const handleClear = useCallback(() => {
     emit("");
   }, [emit]);
+  const [passwordRevealed, setPasswordRevealed] = useState(false);
+  const togglePassword = useCallback(() => {
+    setPasswordRevealed((revealed) => !revealed);
+  }, []);
+  let resolvedType = type;
+  if (showPasswordToggle) {
+    resolvedType = passwordRevealed ? "text" : type ?? "password";
+  }
   const isError = !!error;
   const isSuccess = !!success && !isError;
   const rootClassName = cn(
@@ -4479,11 +4491,32 @@ var TextField = ({
     props.disabled && "text_field_disabled",
     className
   );
-  const resolvedTrailing = clearable && innerValue ? /* @__PURE__ */ jsx("button", { type: "button", className: "text_field_clear", onClick: handleClear, "aria-label": "Clear", children: /* @__PURE__ */ jsx(ClearIcon, {}) }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
+  const passwordToggleLabel = passwordRevealed ? passwordToggleLabels?.hide ?? DEFAULT_PASSWORD_TOGGLE_LABELS.hide : passwordToggleLabels?.show ?? DEFAULT_PASSWORD_TOGGLE_LABELS.show;
+  const resolvedTrailing = showPasswordToggle ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: togglePassword,
+      "aria-label": passwordToggleLabel,
+      disabled: props.disabled,
+      children: passwordRevealed ? /* @__PURE__ */ jsx(EyeOff, { size: iconSize.lg, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { size: iconSize.lg, "aria-hidden": "true" })
+    }
+  ) }) : clearable && innerValue ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "text_field_clear",
+      onClick: handleClear,
+      "aria-label": "Clear",
+      disabled: props.disabled,
+      children: /* @__PURE__ */ jsx(ClearIcon, {})
+    }
+  ) : trailingAction ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: trailingAction }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
+  const resolvedLeading = leadingAction ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: leadingAction }) : leadingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }) : null;
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     label && showLabel && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text_field_label", children: label }),
     /* @__PURE__ */ jsx("div", { className: "text_field_container", children: /* @__PURE__ */ jsxs("div", { className: "text_field_inner", children: [
-      leadingIcon && /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }),
+      resolvedLeading,
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -4501,6 +4534,7 @@ var TextField = ({
               "aria-describedby": helperId,
               "aria-label": !showLabel ? label : void 0,
               ...props,
+              type: resolvedType,
               value: innerValue,
               onCompositionStart: () => {
                 isComposingRef.current = true;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.10.1",
+	"version": "3.11.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",
@@ -106,9 +106,9 @@
 		"storybook": "^10.4.6",
 		"stylelint": "^17.14.0",
 		"tsup": "^8.5.1",
-		"tsx": "^4.22.4",
+		"tsx": "^4.23.12",
 		"typescript": "^6.0.3",
-		"vite": "^8.1.0",
+		"vite": "^8.2.1",
 		"vitest": "^4.1.10"
 	},
 	"publishConfig": {