@telepix-lab/telepix-ui 0.7.0 → 0.7.1

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, Fragment, createElement, useState } from 'react';
+import { forwardRef, useEffect, useRef, useId, Fragment, createElement, useState } from 'react';
+import { id } from 'react-day-picker/locale';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -3303,28 +3304,28 @@ function cn(...inputs) {
 const StateColorContainer = ({ groupName = "state", isInverted, className, }) => {
     const fillClassMap = {
         wrapper: {
-            normal: "group-hover/wrapper:bg-fill-hovered bg-fill-default group-active/wrapper:bg-fill-pressed group-aria-selected/wrapper:bg-fill-selected",
-            invert: "group-hover/wrapper:bg-fill-invert-hovered group-active/wrapper:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/wrapper:bg-fill-invert-selected",
+            normal: "group-hover/wrapper:bg-fill-hovered bg-fill-default group-active/wrapper:bg-fill-pressed group-data-[focused=true]/wrapper:bg-fill-selected",
+            invert: "group-hover/wrapper:bg-fill-invert-hovered group-active/wrapper:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/wrapper:bg-fill-invert-selected",
         },
         item: {
-            normal: "group-hover/item:bg-fill-hovered bg-fill-default group-active/item:bg-fill-pressed group-aria-selected/item:bg-fill-selected",
-            invert: "group-hover/item:bg-fill-invert-hovered group-active/item:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/item:bg-fill-invert-selected",
+            normal: "group-hover/item:bg-fill-hovered bg-fill-default group-active/item:bg-fill-pressed group-data-[focused=true]/item:bg-fill-selected",
+            invert: "group-hover/item:bg-fill-invert-hovered group-active/item:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/item:bg-fill-invert-selected",
         },
         option: {
-            normal: "group-hover/option:bg-fill-hovered bg-fill-default group-active/option:bg-fill-pressed group-aria-selected/option:bg-fill-selected",
-            invert: "group-hover/option:bg-fill-invert-hovered group-active/option:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/option:bg-fill-invert-selected",
+            normal: "group-hover/option:bg-fill-hovered bg-fill-default group-active/option:bg-fill-pressed group-data-[focused=true]/option:bg-fill-selected",
+            invert: "group-hover/option:bg-fill-invert-hovered group-active/option:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/option:bg-fill-invert-selected",
         },
         tab: {
-            normal: "group-hover/tab:bg-fill-hovered bg-fill-default group-active/tab:bg-fill-pressed group-aria-selected/tab:bg-fill-selected",
-            invert: "group-hover/tab:bg-fill-invert-hovered group-active/tab:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/tab:bg-fill-invert-selected",
+            normal: "group-hover/tab:bg-fill-hovered bg-fill-default group-active/tab:bg-fill-pressed group-data-[focused=true]/tab:bg-fill-selected",
+            invert: "group-hover/tab:bg-fill-invert-hovered group-active/tab:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/tab:bg-fill-invert-selected",
         },
         chip: {
-            normal: "group-hover/chip:bg-fill-hovered bg-fill-default group-active/chip:bg-fill-pressed group-aria-selected/chip:bg-fill-selected",
-            invert: "group-hover/chip:bg-fill-invert-hovered group-active/chip:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/chip:bg-fill-invert-selected",
+            normal: "group-hover/chip:bg-fill-hovered bg-fill-default group-active/chip:bg-fill-pressed group-data-[focused=true]/chip:bg-fill-selected",
+            invert: "group-hover/chip:bg-fill-invert-hovered group-active/chip:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/chip:bg-fill-invert-selected",
         },
         state: {
-            normal: "group-hover/state:bg-fill-hovered bg-fill-default group-active/state:bg-fill-pressed group-aria-selected/state:bg-fill-selected",
-            invert: "group-hover/state:bg-fill-invert-hovered group-active/state:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/state:bg-fill-invert-selected",
+            normal: "group-hover/state:bg-fill-hovered bg-fill-default group-active/state:bg-fill-pressed group-data-[focused=true]/state:bg-fill-selected",
+            invert: "group-hover/state:bg-fill-invert-hovered group-active/state:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/state:bg-fill-invert-selected",
         },
     };
     const group = groupName || "state";
@@ -3372,25 +3373,25 @@ const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = f
         if (variant === BUTTON_VARIANTS.TEXT_DIM) {
             return [
                 "h-auto py-0.5 px-0 text-body leading-body-compact gap-1.5",
-                "bg-page-l-null text-comp-mono-subtle-default hover:text-comp-mono-default aria-selected:text-comp-mono-default disabled:bg-page-l-null disabled:text-comp-disabled disabled:hover:text-comp-disabled",
+                "bg-page-l-null text-comp-mono-subtle-default hover:text-comp-mono-default data-[focused=true]:text-comp-mono-default disabled:bg-page-l-null disabled:text-comp-disabled disabled:hover:text-comp-disabled",
             ];
         }
         const sizeClassName = {
             small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
             regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
-            large: "h-12 py-0 px-3 text-body leading-body-compact gap-2",
+            large: "h-12 py-0 px-3 text-base leading-base-compact gap-2",
         }[size];
         const variantClassName = {
             accent: "bg-page-accent-l0 disabled:bg-pure-transparent text-comp-accent-default disabled:text-comp-disabled",
-            outline: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent aria-selected:border-border-selected",
-            outline_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent aria-selected:border-border-selected aria-selected:bg-page-accent-l0 aria-selected:text-comp-accent-default",
+            outline: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent data-[focused=true]:border-border-selected",
+            outline_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent data-[focused=true]:border-border-selected data-[focused=true]:bg-page-accent-l0 data-[focused=true]:text-comp-accent-default",
             ghost: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled",
             thumbnail_ghost: "bg-page-l-null disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
-            ghost_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled aria-selected:bg-page-accent-l0 aria-selected:text-comp-accent-default",
-            subtle_filled: "bg-page-l3 disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
-            outline_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled border border-border-accent-bound disabled:border-pure-transparent aria-selected:border-border-accent-selected",
+            ghost_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled data-[focused=true]:bg-page-accent-l0 data-[focused=true]:text-comp-accent-default",
+            subtle_filled: "bg-page-l3 disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled data-[focused=true]:text-comp-mono-default",
+            outline_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled border border-border-accent-bound disabled:border-pure-transparent data-[focused=true]:border-border-accent-selected",
             ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
-            ghost_dim: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
+            ghost_dim: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-subtle-default disabled:text-comp-disabled data-[focused=true]:text-comp-mono-default",
             text_dim: "", // 위에서 처리되므로 여기서는 빈 문자열
         }[variant];
         return [sizeClassName, variantClassName];
@@ -3409,22 +3410,22 @@ const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = f
             return "size-5";
         return "size-6"; // 기본값은 regular 크기
     };
-    return (jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", className), ...rest, children: [variant !== BUTTON_VARIANTS.TEXT_DIM && (jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName })), isLoading && (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
+    return (jsxs("button", { ref: ref, disabled: disabled ?? isLoading, "aria-busy": isLoading, "aria-disabled": disabled ?? isLoading, "aria-pressed": rest["aria-pressed"], className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none border cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-border-focused", ...getClassName(size, variant), fullWidth && "w-full", className), ...rest, children: [variant !== BUTTON_VARIANTS.TEXT_DIM && (jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: cn("-inset-px", stateContainerClassName) })), isLoading && (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
                     "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
                     "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
                     "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
-                    "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
+                    "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsx("div", { className: "flex-1 truncate", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
 });
 Button.displayName = "Button";
 /**
  * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
  * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
- * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 focused 시 accent 색상으로 강조됩니다.<br/>
  * <br/>
  * ### 사용 예시
  * ```tsx
  * <ButtonTextDim>자세히 보기</ButtonTextDim>
- * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * <ButtonTextDim data-focused="true">포커스됨</ButtonTextDim>
  * ```
  */
 const ButtonTextDim = forwardRef((props, ref) => {
@@ -3467,6 +3468,33 @@ const CardFooter = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("py-4 px-6", className), children: rest.children }));
 });
 
+/**
+ * 전역 포커스 가시성 제어 훅
+ *
+ * - 마우스 클릭 시: body.using-mouse 추가 → outline 제거
+ * - Tab 키로 이동 시: using-mouse 제거 → outline 정상 표시
+ *
+ * Telepix-UI의 focus-visible outline 정책을 보완하기 위해 사용.
+ */
+function useFocusVisibleMode() {
+    useEffect(() => {
+        const handleMouseDown = () => {
+            document.body.classList.add("using-mouse");
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === "Tab") {
+                document.body.classList.remove("using-mouse");
+            }
+        };
+        window.addEventListener("mousedown", handleMouseDown);
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("mousedown", handleMouseDown);
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+}
+
 const TEXT_SIZES = {
     XSMALL: "xsmall",
     LABEL: "label",
@@ -3742,22 +3770,27 @@ const Input = forwardRef(({ size = "regular", variant = "outlined", leftIcon, ri
             ref.current = node;
         innerRef.current = node;
     };
-    return (jsxs(Fragment, { children: [jsxs("div", { "aria-disabled": rest.disabled, className: cn("relative group/state flex items-center justify-center rounded-lg border bg-Page-l-null border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", variant === INPUT_VARIANTS.OUTLINED &&
+    const generatedId = useId();
+    const inputId = id ?? `input-${generatedId}`;
+    useFocusVisibleMode();
+    return (jsxs(Fragment, { children: [jsxs("div", { "aria-disabled": rest.disabled, className: cn("relative group/state flex items-center justify-center rounded-lg border bg-Page-l-null border-border-bound has-[input:disabled]:border-transparent has-input-focus-visible", variant === INPUT_VARIANTS.OUTLINED &&
                     "border border-border-bound focus-within:border-border-focused", variant === INPUT_VARIANTS.FILLED &&
-                    "bg-page-l3 border-transparent focus-within:border-transparent", size === INPUT_SIZES.SMALL &&
+                    "bg-page-l3 border-transparent focus-within:border-border-focused", size === INPUT_SIZES.SMALL &&
                     "py-1.5 px-2 text-label leading-label-compact font-medium gap-1", size === INPUT_SIZES.REGULAR &&
                     "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
                     "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", isError &&
-                    "border-comp-chroma-error focus-within:border-comp-chroma-error", wrapperClassName), onClick: () => {
+                    "border-comp-chroma-error focus-within:border-comp-chroma-error focus-within:outline-comp-chroma-error", wrapperClassName), onClick: () => {
                     innerRef.current?.focus();
-                }, children: [jsx(StateColorContainer, { className: cn("group-focus-within/state:bg-page-l-null", (!useHoverStyle || rest.disabled) && "hover:bg-fill-default") }), leftIcon && (jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsx("input", { ref: mergedRef, className: cn("border-none outline-none p-0 flex-1 bg-transparent min-w-0 text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", useHoverStyle &&
+                }, children: [jsx(StateColorContainer, { className: cn("group-focus-within/state:bg-page-l-null", (!useHoverStyle || rest.disabled) && "hover:bg-fill-default") }), leftIcon && (jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsx("input", { id: inputId.toString(), ref: mergedRef, "aria-invalid": isError, "aria-describedby": isError && errorMessage
+                            ? `${rest.id || "input"}-error`
+                            : undefined, className: cn("border-none outline-none p-0 flex-1 bg-transparent min-w-0 text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled focus-visible:outline-none", useHoverStyle &&
                             "hover:placeholder:text-comp-mono-subtle-hovered", size === INPUT_SIZES.SMALL &&
                             "text-label leading-label-compact font-medium", size === INPUT_SIZES.REGULAR &&
                             "text-body leading-body-compact font-medium", size === INPUT_SIZES.LARGE &&
                             "text-base leading-base-compact font-medium", isError &&
                             "placeholder:text-comp-chroma-error text-comp-chroma-error hover:placeholder:text-comp-error focus:placeholder:text-comp-error", rest.type === "number" &&
                             !useIndicator &&
-                            "[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none", rest.className), ...rest }), rightIcon && (jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: rightIcon }))] }), errorMessage && (jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-chroma-error mt-2", children: errorMessage }))] }));
+                            "[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none", rest.className), ...rest }), rightIcon && (jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: rightIcon }))] }), errorMessage && (jsx(Text, { id: `${inputId}-error`, variant: "medLabelMedCompact", className: "text-comp-chroma-error mt-2", role: "alert", "aria-live": "polite", children: errorMessage }))] }));
 });
 Input.displayName = "Input";
 
@@ -3765,8 +3798,10 @@ const NOTIFY_ITEM_VARIANTS = {
     GHOST: "ghost",
     DYNAMIC_ACCENT: "dynamicAccent",
 };
-const NotifyItem = forwardRef(({ title, description, timestamp, icon, actionIcon, variant = NOTIFY_ITEM_VARIANTS.GHOST, unread = false, disabled, className, ...rest }, ref) => {
-    return (jsxs("div", { ref: ref, "data-unread": unread, "data-disabled": disabled, className: cn("relative group/state inline-flex items-center min-h-9 w-full p-1.5 rounded cursor-pointer border border-transparent", variant === NOTIFY_ITEM_VARIANTS.GHOST && [
+const NotifyItem = forwardRef(({ title, description, timestamp, icon, actionIcon, variant = NOTIFY_ITEM_VARIANTS.GHOST, unread = false, disabled, className, onClick, ...rest }, ref) => {
+    const ariaLabel = rest["aria-label"] ||
+        `${title}. ${description}${unread ? ". 읽지 않음" : ". 읽음"}${timestamp ? `. ${timestamp}` : ""}`;
+    return (jsxs("div", { ref: ref, role: onClick ? "button" : "article", tabIndex: onClick && !disabled ? 0 : undefined, "data-unread": unread, "data-disabled": disabled, "aria-label": ariaLabel, "aria-disabled": disabled, "aria-readonly": !onClick, "aria-live": unread ? "polite" : "off", className: cn("relative group/state inline-flex items-center min-h-9 w-full p-1.5 rounded cursor-pointer border border-transparent", variant === NOTIFY_ITEM_VARIANTS.GHOST && [
             !disabled && "bg-page-l-null *:text-comp-mono-subtle-default",
             "data-[unread=true]:border-border-bound data-[unread=true]:bg-page-l3 data-[unread=true]:*:text-comp-mono-default",
         ], variant === NOTIFY_ITEM_VARIANTS.DYNAMIC_ACCENT && [
@@ -3774,7 +3809,16 @@ const NotifyItem = forwardRef(({ title, description, timestamp, icon, actionIcon
             "data-[unread=true]:bg-page-accent-l0 data-[unread=true]:*:text-comp-accent-default",
         ], disabled && [
             "cursor-not-allowed pointer-events-none bg-page-l-null *:text-comp-disabled",
-        ], className), ...rest, children: [icon && (jsx("div", { className: "size-9 flex justify-center items-center flex-shrink-0", children: icon })), jsxs("div", { className: "flex-1 self-stretch px-1.5 inline-flex flex-col justify-center items-start gap-1 min-w-0 text-inherit", children: [jsx(Text, { variant: "medBodyMedCompact", className: "text-inherit", children: title }), jsx(Text, { variant: "regularLabelCompact", className: cn("text-inherit", variant === NOTIFY_ITEM_VARIANTS.GHOST &&
+        ], onClick &&
+            !disabled &&
+            "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-border-focused focus-visible:outline-solid", className), onClick: disabled ? undefined : onClick, onKeyDown: onClick && !disabled
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onClick(e);
+                }
+            }
+            : undefined, ...rest, children: [icon && (jsx("div", { className: "size-9 flex justify-center items-center flex-shrink-0", children: icon })), jsxs("div", { className: "flex-1 self-stretch px-1.5 inline-flex flex-col justify-center items-start gap-1 min-w-0 text-inherit", children: [jsx(Text, { variant: "medBodyMedCompact", className: "text-inherit", children: title }), jsx(Text, { variant: "regularLabelCompact", className: cn("text-inherit", variant === NOTIFY_ITEM_VARIANTS.GHOST &&
                             "group-data-[unread=true]/state:text-comp-mono-subtle-default", variant === NOTIFY_ITEM_VARIANTS.DYNAMIC_ACCENT &&
                             !disabled &&
                             "group-data-[unread=false]/state:text-comp-mono-subtle-default"), children: description })] }), timestamp && (jsx("div", { className: "h-9 flex justify-center items-center flex-shrink-0", children: jsx(Text, { variant: "medLabelMedCompact", className: cn("text-inherit", variant === NOTIFY_ITEM_VARIANTS.DYNAMIC_ACCENT &&
@@ -3953,7 +3997,10 @@ const PaginationItem = (props) => {
     return jsx("li", { "data-slot": "pagination-item", ...props });
 };
 const PaginationLink = ({ className, isActive, size = "regular", variant = "ghost", ...rest }) => {
-    return (jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: cn("h-9 min-h-9", isActive && "bg-fill-selected text-comp-mono-default", className), ...rest }));
+    return (jsx(Button, { "aria-current": isActive ? "page" : undefined, "aria-label": rest["aria-label"] ||
+            (isActive
+                ? `현재 페이지, ${rest.children}`
+                : `페이지 ${rest.children}로 이동`), "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: cn("h-9 min-h-9", isActive && "bg-fill-selected text-comp-mono-default", className), ...rest }));
 };
 const PaginationPrevious = ({ className, ...rest }) => {
     return (jsx(PaginationLink, { "aria-label": "Go to previous page", className: cn("flex items-center justify-center mr-4", className), leftIcon: jsx(ChevronLeft, { size: 20 }), ...rest }));
@@ -3962,14 +4009,14 @@ const PaginationNext = ({ className, ...rest }) => {
     return (jsx(PaginationLink, { "aria-label": "Go to next page", className: cn("ml-4", className), leftIcon: jsx(ChevronRight, { size: 20 }), ...rest }));
 };
 const PaginationEllipsis = ({ className, ...rest }) => {
-    return (jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex items-center justify-center size-9 rounded-md hover:bg-fill-mono-hovered", className), ...rest, children: jsx(Ellipsis, { className: "size-4 stroke-comp-mono-subtle-default" }) }));
+    return (jsx("span", { "aria-hidden": "true", role: "presentation", "data-slot": "pagination-ellipsis", className: cn("flex items-center justify-center size-9 rounded-md hover:bg-fill-mono-hovered", className), ...rest, children: jsx(Ellipsis, { className: "size-4 stroke-comp-mono-subtle-default", "aria-hidden": "true", focusable: false }) }));
 };
 
 const Tag = forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, useSelectedStyle = false, ...props }, ref) => {
-    const [isSelected, setIsSelected] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const handleClick = (event) => {
         if (useSelectedStyle)
-            setIsSelected((prev) => !prev);
+            setIsFocused((prev) => !prev);
         onClick?.(event);
     };
     const handleDeleteClick = (event) => {
@@ -3980,7 +4027,9 @@ const Tag = forwardRef(({ icon, value, variant = "filled", size = "regular", cla
             `bg-page-l4 text-comp-mono-subtle-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, variant === "accent" &&
             `bg-page-accent-l0 text-comp-accent-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, size === "regular" &&
             "text-body font-medium leading-body-compact px-2 py-1 gap-2", size === "small" &&
-            "text-label font-medium leading-label-compact px-1.5 py-0.5 gap-1.5", className), onClick: handleClick, "data-selected": isSelected, "aria-selected": isSelected, ...props, children: [icon && (jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0", children: icon })), jsx("span", { className: "flex-1 text-nowrap overflow-hidden text-ellipsis text-inherit text-size-inherit leading-inherit font-inherit", children: value.label }), onDeleteClick && (jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0 cursor-pointer text-comp-mono-default group-disabled/state:text-comp-disabled", onClick: handleDeleteClick, children: jsx(X, {}) })), jsx(StateColorContainer, { className: cn(useSelectedStyle
+            "text-label font-medium leading-label-compact px-1.5 py-0.5 gap-1.5", className), onClick: handleClick, "data-focused": isFocused, ...props, children: [icon && (jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0", children: icon })), jsx("span", { className: cn("flex-1 truncate text-inherit text-size-inherit font-inherit", size === "small" &&
+                    "leading-[calc(var(--spacing-label-compact)+3px)]", size === "regular" &&
+                    "leading-[calc(var(--spacing-body-compact)+3px)]"), children: value.label }), onDeleteClick && (jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0 cursor-pointer text-inherit group-disabled/state:text-comp-disabled", onClick: handleDeleteClick, children: jsx(X, {}) })), jsx(StateColorContainer, { className: cn(useSelectedStyle
                     ? ""
                     : "group-active/state:bg-fill-default group-active/state:border-transparent group-disabled/state:bg-fill-default"), isInverted: variant === "accent" })] }));
 });

package/dist/esm/input/hooks/useFocusVisibleMode.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 전역 포커스 가시성 제어 훅
+ *
+ * - 마우스 클릭 시: body.using-mouse 추가 → outline 제거
+ * - Tab 키로 이동 시: using-mouse 제거 → outline 정상 표시
+ *
+ * Telepix-UI의 focus-visible outline 정책을 보완하기 위해 사용.
+ */
+export declare function useFocusVisibleMode(): void;

package/dist/esm/interactive-list-item/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface InteractiveListItemProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    isSelected?: boolean;
     disabled?: boolean;
+    isSelected?: boolean;
     showHoverActions?: boolean;
 }
 export declare const InteractiveListItem: React.ForwardRefExoticComponent<Omit<InteractiveListItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/notify-item/index.d.ts

@@ -7,6 +7,7 @@ interface NotifyItemProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: "ghost" | "dynamicAccent";
     unread?: boolean;
     disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 export declare const NotifyItem: import("react").ForwardRefExoticComponent<NotifyItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/esm/radio-group/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import { RadioGroup as RadioGroupRadix } from "radix-ui";
+import { ReactNode } from "react";
 import { RadioGroupOrientation } from "./types";
 interface RadioGroupProps extends RadioGroupRadix.RadioGroupProps {
     className?: string;

package/dist/esm/select/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import { Select as SelectRadix } from "radix-ui";
+import React from "react";
 import { SelectTriggerSize, SelectTriggerVariant } from "./types";
 /**
  * Select 컴포넌트는 드롭다운 선택 상자를 생성하는 데 사용됩니다.<br/>
@@ -14,9 +14,9 @@ import { SelectTriggerSize, SelectTriggerVariant } from "./types";
  * <Select>
  *   <SelectTrigger placeholder="Select an option" />
  *   <SelectContent>
- *     <SelectItem value="option1">Option 1</SelectItem>
- *     <SelectItem value="option2">Option 2</SelectItem>
- *     <SelectItem value="option3">Option 3</SelectItem>
+ *     <SelectItem value="option1" textValue="Option 1"></SelectItem>
+ *     <SelectItem value="option2" textValue="Option 2"></SelectItem>
+ *     <SelectItem value="option3" textValue="Option 3"></SelectItem>
  *   </SelectContent>
  * </Select>
  */

package/dist/esm/table/index.d.ts

@@ -3,7 +3,7 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<React.DetailedH
 export declare const TableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
 export declare const TableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
 interface TableRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
-    isSelected?: boolean;
+    isFocused?: boolean;
     shouldLastBorderRender?: boolean;
 }
 export declare const TableRow: React.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/index.d.ts

@@ -50,12 +50,12 @@ declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps,
 /**
  * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
  * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
- * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 focused 시 accent 색상으로 강조됩니다.<br/>
  * <br/>
  * ### 사용 예시
  * ```tsx
  * <ButtonTextDim>자세히 보기</ButtonTextDim>
- * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * <ButtonTextDim data-focused="true">포커스됨</ButtonTextDim>
  * ```
  */
 declare const ButtonTextDim: React__default.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "variant">, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
@@ -141,6 +141,7 @@ interface NotifyItemProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: "ghost" | "dynamicAccent";
     unread?: boolean;
     disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 declare const NotifyItem: React$1.ForwardRefExoticComponent<NotifyItemProps & React$1.RefAttributes<HTMLDivElement>>;