@t3q-ui/design-system 1.57.0 → 1.59.0

package/dist/index.d.cts

@@ -8,8 +8,8 @@ declare namespace class_variance_authority_types {
 }
 import { VariantProps } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { B as BadgeProps } from './index-ZIfOVixA.cjs';
-export { I as AgGridTable, K as AgGridTableType, d as BADGE_OUTLINE_ACCENT, a as Badge, c as BadgeTone, e as Button, g as ButtonProps, D as Dialog, k as DialogClose, l as DialogContent, p as DialogDescription, n as DialogFooter, m as DialogHeader, i as DialogOverlay, h as DialogPortal, o as DialogTitle, j as DialogTrigger, q as Drawer, x as DrawerBody, u as DrawerClose, v as DrawerContent, A as DrawerDescription, y as DrawerFooter, w as DrawerHeader, s as DrawerOverlay, r as DrawerPortal, z as DrawerTitle, t as DrawerTrigger, J as HeaderCheckboxRenderer, Q as NUMBER_COLUMN_WIDTH, H as PageHeader, G as PageHeaderProps, E as PageHeaderProvider, C as PageHeaderState, P as PageHeaderTabItem, R as RowCheckboxRenderer, S as SORT_ICON_OFFSET_CLASS, X as TwoLineCellRenderer, W as TwoLineCellRendererParams, b as badgeVariants, f as buttonVariants, N as estimateHeaderTextWidth, F as usePageHeader, L as withExplicitSortIcons, O as withFlexFill, V as withHeaderMinWidth, T as withNumberColumnWidth, M as withSortIconOffset, U as withTypeClasses } from './index-ZIfOVixA.cjs';
+import { B as BadgeProps } from './index-CHnIxzU2.cjs';
+export { I as AgGridTable, K as AgGridTableType, d as BADGE_OUTLINE_ACCENT, a as Badge, c as BadgeTone, e as Button, g as ButtonProps, D as Dialog, k as DialogClose, l as DialogContent, p as DialogDescription, n as DialogFooter, m as DialogHeader, i as DialogOverlay, h as DialogPortal, o as DialogTitle, j as DialogTrigger, q as Drawer, x as DrawerBody, u as DrawerClose, v as DrawerContent, A as DrawerDescription, y as DrawerFooter, w as DrawerHeader, s as DrawerOverlay, r as DrawerPortal, z as DrawerTitle, t as DrawerTrigger, J as HeaderCheckboxRenderer, Q as NUMBER_COLUMN_WIDTH, H as PageHeader, G as PageHeaderProps, E as PageHeaderProvider, C as PageHeaderState, P as PageHeaderTabItem, R as RowCheckboxRenderer, S as SORT_ICON_OFFSET_CLASS, X as TwoLineCellRenderer, W as TwoLineCellRendererParams, b as badgeVariants, f as buttonVariants, N as estimateHeaderTextWidth, F as usePageHeader, L as withExplicitSortIcons, O as withFlexFill, V as withHeaderMinWidth, T as withNumberColumnWidth, M as withSortIconOffset, U as withTypeClasses } from './index-CHnIxzU2.cjs';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { DayPicker, SelectSingleEventHandler, DateRange, SelectRangeEventHandler } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -376,7 +376,7 @@ declare namespace ColumnFilter {
 }
 
 interface ColumnFilterInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** 플레이스홀더 텍스트 */
+    /** 플레이스홀더 텍스트 — 무엇으로 찾는지만("모델 이름·요청 ID 검색"). "…하거나 조건을 추가하세요" 처럼 조작을 설명하지 않는다(2026-11-06 홀드아웃 20) */
     placeholder?: string;
 }
 declare function ColumnFilterInput({ placeholder, className, style, ...props }: ColumnFilterInputProps): react_jsx_runtime.JSX.Element;
@@ -1027,7 +1027,7 @@ interface ProgressProps extends React$1.ComponentPropsWithoutRef<typeof Progress
  * 언제 쓰나: 0~100 의 비율을 길이로 보여 줄 때. 이름은 `aria-label` 로 준다 — 표에서는 행마다 `'GPU 사용률 46%'` 처럼 **무엇의 비율인지**.
  * 이름을 안 주면 `'46%'`(값이 없으면 `'진행 중'`)를 기본 이름으로 붙인다 — 이름 없는 progressbar 는 axe serious(aria-progressbar-name, 2026-10-20 17차). 기본 이름은 숫자뿐이라 뜻이 약하니 호출자가 주는 것이 맞다.
  * 언제 안 쓰나: 단계가 있는 진행(→ Stepper), 불확정 대기(→ Spinner).
- * 대신/함께: 막대 옆에 % 글자를 같이 둔다(`tabular-nums`). 색은 `variant` 로 상태와 맞춘다.
+ * 대신/함께: 막대 옆에 % 글자를 같이 둔다(`tabular-nums`). 색(`variant`)은 **값의 뜻대로** — 높을수록 좋은 비율(정상 행·통과율·완료율)은 기본(primary)이나 success, 낮을수록 좋은 값의 경고 구간만 warning·danger. 페이지·항목의 실패 상태에 맞춰 칠하지 않는다(2026-11-06 홀드아웃 20: "정상 행 99%" 막대가 빨강).
  */
 declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -8,8 +8,8 @@ declare namespace class_variance_authority_types {
 }
 import { VariantProps } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { B as BadgeProps } from './index-ZIfOVixA.js';
-export { I as AgGridTable, K as AgGridTableType, d as BADGE_OUTLINE_ACCENT, a as Badge, c as BadgeTone, e as Button, g as ButtonProps, D as Dialog, k as DialogClose, l as DialogContent, p as DialogDescription, n as DialogFooter, m as DialogHeader, i as DialogOverlay, h as DialogPortal, o as DialogTitle, j as DialogTrigger, q as Drawer, x as DrawerBody, u as DrawerClose, v as DrawerContent, A as DrawerDescription, y as DrawerFooter, w as DrawerHeader, s as DrawerOverlay, r as DrawerPortal, z as DrawerTitle, t as DrawerTrigger, J as HeaderCheckboxRenderer, Q as NUMBER_COLUMN_WIDTH, H as PageHeader, G as PageHeaderProps, E as PageHeaderProvider, C as PageHeaderState, P as PageHeaderTabItem, R as RowCheckboxRenderer, S as SORT_ICON_OFFSET_CLASS, X as TwoLineCellRenderer, W as TwoLineCellRendererParams, b as badgeVariants, f as buttonVariants, N as estimateHeaderTextWidth, F as usePageHeader, L as withExplicitSortIcons, O as withFlexFill, V as withHeaderMinWidth, T as withNumberColumnWidth, M as withSortIconOffset, U as withTypeClasses } from './index-ZIfOVixA.js';
+import { B as BadgeProps } from './index-CHnIxzU2.js';
+export { I as AgGridTable, K as AgGridTableType, d as BADGE_OUTLINE_ACCENT, a as Badge, c as BadgeTone, e as Button, g as ButtonProps, D as Dialog, k as DialogClose, l as DialogContent, p as DialogDescription, n as DialogFooter, m as DialogHeader, i as DialogOverlay, h as DialogPortal, o as DialogTitle, j as DialogTrigger, q as Drawer, x as DrawerBody, u as DrawerClose, v as DrawerContent, A as DrawerDescription, y as DrawerFooter, w as DrawerHeader, s as DrawerOverlay, r as DrawerPortal, z as DrawerTitle, t as DrawerTrigger, J as HeaderCheckboxRenderer, Q as NUMBER_COLUMN_WIDTH, H as PageHeader, G as PageHeaderProps, E as PageHeaderProvider, C as PageHeaderState, P as PageHeaderTabItem, R as RowCheckboxRenderer, S as SORT_ICON_OFFSET_CLASS, X as TwoLineCellRenderer, W as TwoLineCellRendererParams, b as badgeVariants, f as buttonVariants, N as estimateHeaderTextWidth, F as usePageHeader, L as withExplicitSortIcons, O as withFlexFill, V as withHeaderMinWidth, T as withNumberColumnWidth, M as withSortIconOffset, U as withTypeClasses } from './index-CHnIxzU2.js';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { DayPicker, SelectSingleEventHandler, DateRange, SelectRangeEventHandler } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -376,7 +376,7 @@ declare namespace ColumnFilter {
 }
 
 interface ColumnFilterInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** 플레이스홀더 텍스트 */
+    /** 플레이스홀더 텍스트 — 무엇으로 찾는지만("모델 이름·요청 ID 검색"). "…하거나 조건을 추가하세요" 처럼 조작을 설명하지 않는다(2026-11-06 홀드아웃 20) */
     placeholder?: string;
 }
 declare function ColumnFilterInput({ placeholder, className, style, ...props }: ColumnFilterInputProps): react_jsx_runtime.JSX.Element;
@@ -1027,7 +1027,7 @@ interface ProgressProps extends React$1.ComponentPropsWithoutRef<typeof Progress
  * 언제 쓰나: 0~100 의 비율을 길이로 보여 줄 때. 이름은 `aria-label` 로 준다 — 표에서는 행마다 `'GPU 사용률 46%'` 처럼 **무엇의 비율인지**.
  * 이름을 안 주면 `'46%'`(값이 없으면 `'진행 중'`)를 기본 이름으로 붙인다 — 이름 없는 progressbar 는 axe serious(aria-progressbar-name, 2026-10-20 17차). 기본 이름은 숫자뿐이라 뜻이 약하니 호출자가 주는 것이 맞다.
  * 언제 안 쓰나: 단계가 있는 진행(→ Stepper), 불확정 대기(→ Spinner).
- * 대신/함께: 막대 옆에 % 글자를 같이 둔다(`tabular-nums`). 색은 `variant` 로 상태와 맞춘다.
+ * 대신/함께: 막대 옆에 % 글자를 같이 둔다(`tabular-nums`). 색(`variant`)은 **값의 뜻대로** — 높을수록 좋은 비율(정상 행·통과율·완료율)은 기본(primary)이나 success, 낮을수록 좋은 값의 경고 구간만 warning·danger. 페이지·항목의 실패 상태에 맞춰 칠하지 않는다(2026-11-06 홀드아웃 20: "정상 행 99%" 막대가 빨강).
  */
 declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -1,5 +1,5 @@
-import { cn, useRestoreFocusToOpener, Stack, sanitizeUserText, Button, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Checkbox, useFormControlContext, Table, TableHeader, TableRow, TableHead, TableBody, Spinner, IconButton, Separator, LucideIcon, TableCell, Dialog, DialogContent, DialogTitle, Badge } from './chunk-LEHEPAQO.js';
-export { AG_GRID_LOCALE_KR, AgGridContext, AgGridTable, Alert, AlertActions, AlertDescription, AlertTitle, BADGE_OUTLINE_ACCENT, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardThumbnail, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyBoxIllustration, Form, FormControl, FormDescription, FormField, FormFooter, FormHeader, FormItem, FormLabel, FormMessage, FormSection, FormSectionLevelContext, FormValidMessage, HeaderCheckboxRenderer, IconButton, LucideIcon, NUMBER_COLUMN_CLASS, NUMBER_COLUMN_WIDTH, PageHeader, PageHeaderProvider, Pagination, PaginationContent, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, PaginationWrapper, Panel, RowCheckboxRenderer, SORT_ICON_OFFSET_CLASS, Separator, Skeleton, SortIcon, Spinner, Stack, Table, TableBody, TableCell, TableHead, TableHeader, TablePagination, TableRow, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoLineCellRenderer, alignFromClassName, badgeVariants, buttonVariants, cn, estimateHeaderTextWidth, getPaginationRange, getSortedColumnState, sanitizeUserText, useFormControlContext, useFormField, usePageHeader, withExplicitSortIcons, withFlexFill, withHeaderMinWidth, withNumberColumnWidth, withSortIconOffset, withTypeClasses } from './chunk-LEHEPAQO.js';
+import { cn, useRestoreFocusToOpener, Stack, sanitizeUserText, Button, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Checkbox, useFormControlContext, Table, TableHeader, TableRow, TableHead, TableBody, Spinner, IconButton, Separator, LucideIcon, TableCell, Dialog, DialogContent, DialogTitle, Badge } from './chunk-GQFI5K5T.js';
+export { AG_GRID_LOCALE_KR, AgGridContext, AgGridTable, Alert, AlertActions, AlertDescription, AlertTitle, BADGE_OUTLINE_ACCENT, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardThumbnail, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyBoxIllustration, Form, FormControl, FormDescription, FormField, FormFooter, FormHeader, FormItem, FormLabel, FormMessage, FormSection, FormSectionLevelContext, FormValidMessage, HeaderCheckboxRenderer, IconButton, LucideIcon, NUMBER_COLUMN_CLASS, NUMBER_COLUMN_WIDTH, PageHeader, PageHeaderProvider, Pagination, PaginationContent, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, PaginationWrapper, Panel, RowCheckboxRenderer, SORT_ICON_OFFSET_CLASS, Separator, Skeleton, SortIcon, Spinner, Stack, Table, TableBody, TableCell, TableHead, TableHeader, TablePagination, TableRow, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoLineCellRenderer, alignFromClassName, badgeVariants, buttonVariants, cn, estimateHeaderTextWidth, getPaginationRange, getSortedColumnState, sanitizeUserText, useFormControlContext, useFormField, usePageHeader, withExplicitSortIcons, withFlexFill, withHeaderMinWidth, withNumberColumnWidth, withSortIconOffset, withTypeClasses } from './chunk-GQFI5K5T.js';
 import * as React17 from 'react';
 import React17__default, { forwardRef, useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -1372,6 +1372,8 @@ var CancelIcon = React17.forwardRef(
   }
 );
 CancelIcon.displayName = "CancelIcon";
+var CLEAR_HOST_CLASS = "group/clear-host";
+var CLEAR_REVEAL_CLASS = "opacity-0 group-hover/clear-host:opacity-100 group-focus-within/clear-host:opacity-100 [@media(hover:none)]:opacity-100";
 
 // src/utils/message.ts
 var message = {
@@ -4427,6 +4429,7 @@ var DatePickerTrigger = React17.forwardRef(
         "data-disabled": disabled || void 0,
         className: cn(
           datePickerTriggerVariants({ appearance, isInvalid }),
+          CLEAR_HOST_CLASS,
           "[&_[data-placeholder]]:text-sys-text-subtler",
           (showNotchedOutline || showNoneLabel) && "relative",
           showNotchedOutline && "!border-0 !py-[4px] !px-[6px]",
@@ -4477,6 +4480,7 @@ var DatePickerTrigger = React17.forwardRef(
               className: cn(
                 "shrink-0 flex items-center justify-center p-[2px] rounded-small hover:bg-secondary-o10 text-sys-text-subtler cursor-pointer outline-none",
                 "focus-visible:ring-[2px] focus-visible:ring-sys-focus-ring-main",
+                CLEAR_REVEAL_CLASS,
                 (!hasValue || disabled) && "invisible"
               ),
               "aria-label": "\uB0A0\uC9DC \uC9C0\uC6B0\uAE30",
@@ -4753,6 +4757,7 @@ var TextField = React17.forwardRef(
         "aria-disabled": disabled || void 0,
         className: cn(
           textFieldContainerVariants({ appearance, isInvalid }),
+          CLEAR_HOST_CLASS,
           // Focus styling (state-managed, standard appearance without notched outline only)
           isFocused && !isInvalid && appearance === "standard" && !showNotchedOutline && "border-[2px] border-sys-focus-ring-bold py-[2px] px-[4px]",
           // Floating label positioning
@@ -4828,6 +4833,7 @@ var TextField = React17.forwardRef(
               onClick: handleClear,
               className: cn(
                 "shrink-0 flex items-center justify-center p-[2px] rounded-small hover:bg-secondary-o10 text-sys-text-subtler",
+                CLEAR_REVEAL_CLASS,
                 (!hasValue || disabled || readOnly) && "invisible"
               ),
               "aria-label": "\uC785\uB825 \uC9C0\uC6B0\uAE30",
@@ -8133,6 +8139,7 @@ var MultiSelectTrigger = React17.forwardRef(
         tabIndex: -1,
         className: cn(
           selectTriggerVariants({ appearance, isInvalid }),
+          CLEAR_HOST_CLASS,
           "flex-wrap cursor-text",
           "[&_[data-placeholder]]:text-sys-text-placeholder",
           (showNotchedOutline || showNoneLabel) && "relative",
@@ -8208,7 +8215,10 @@ var MultiSelectTrigger = React17.forwardRef(
             {
               type: "button",
               onClick: handleClearAll,
-              className: "shrink-0 flex items-center justify-center p-[2px] rounded-small hover:bg-secondary-o10 text-sys-text-subtler",
+              className: cn(
+                "shrink-0 flex items-center justify-center p-[2px] rounded-small hover:bg-secondary-o10 text-sys-text-subtler",
+                CLEAR_REVEAL_CLASS
+              ),
               "aria-label": "\uC804\uCCB4 \uC0AD\uC81C",
               tabIndex: -1,
               children: /* @__PURE__ */ jsx(CancelIcon, { size: 20 })
@@ -9933,6 +9943,7 @@ var TimePickerTrigger = React17.forwardRef(
         "data-disabled": disabled || void 0,
         className: cn(
           timePickerTriggerVariants({ appearance, isInvalid, hourType }),
+          CLEAR_HOST_CLASS,
           "[&_[data-placeholder]]:text-sys-text-subtler",
           (showNotchedOutline || showNoneLabel) && "relative",
           showNotchedOutline && "!border-0 !py-[4px] !px-[6px]",
@@ -9983,6 +9994,7 @@ var TimePickerTrigger = React17.forwardRef(
               className: cn(
                 "shrink-0 flex items-center justify-center p-[2px] rounded-small hover:bg-secondary-o10 text-sys-text-subtler cursor-pointer outline-none",
                 "focus-visible:ring-[2px] focus-visible:ring-sys-focus-ring-main",
+                CLEAR_REVEAL_CLASS,
                 (!hasValue || disabled) && "invisible"
               ),
               "aria-label": "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30",