npm - @farmzone/fz-react-ui - Versions diffs - 1.1.5 → 1.1.7 - Mend

@farmzone/fz-react-ui 1.1.5 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -91,6 +91,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     showPasswordToggle?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
 }
 declare function Input(props: InputProps): react.JSX.Element;
@@ -194,6 +196,9 @@ interface SelectOptionType {
     label: string | ReactNode;
     value: string;
     disabled?: boolean;
+    icon?: ReactNode;
+    avatarUrl?: string;
+    avatarAlt?: string;
 }
 interface SelectProps<T extends SelectOptionType = SelectOptionType> extends Omit<React.ComponentProps<typeof Select$1>, "onValueChange" | "value" | "defaultValue"> {
@@ -973,6 +978,8 @@ type InputOption<P> = BaseOption<P> & {
     placeholder?: string;
     /** 입력창 왼쪽에 돋보기 아이콘을 보여줄지 여부. 기본값 true. */
     leftIcon?: boolean;
+    /** 입력값이 있을 때 x(clear) 버튼을 보여줄지 여부. 기본값 true. */
+    canReset?: boolean;
 };
 type SelectOption<P> = BaseOption<P> & {
     type: "select";
@@ -1089,18 +1096,42 @@ interface MultiTabBarProps {
      * 전달하지 않으면(undefined) 기존과 완전히 동일한 평면(flat) 탭 목록으로 렌더링됩니다.
      *
      * 전달하면: 같은 key를 가진 탭들이 배열 안에서 서로 떨어져 있어도(다른 그룹 탭 사이에 끼어
-     * 있어도) 항상 그 그룹이 처음 등장한 위치의 칩 하나로 합쳐져서 색상 칩(그룹 헤더) + 그 아래
-     * 탭들로 렌더링됩니다 — 지금 fizza 프로젝트가 쓰던 커스텀 그룹 탭바와 동일한 형태이고, 이미
+     * 있어도) 항상 그 그룹이 처음 등장한 위치의 칩 하나로 합쳐져서 Chrome 탭 그룹처럼 색상 칩(그룹
+     * 라벨) + 그 옆 탭들 + 탭들 바닥을 잇는 그룹 색 하단선으로 렌더링됩니다. 이미
      * 열려 있는 그룹에 새 탭이 추가될 때 중복 칩이 생기지 않습니다.
      * 그룹 색상은 고정된 팔레트(파랑/주황/빨강/초록 + 보조 6색)에서 등장 순서대로 할당되고,
-     * 배경은 12% 투명도 틴트, 테두리는 40% 투명도로 렌더링됩니다 — fizza 프로젝트가 쓰던
-     * GroupedTabBar와 동일한 색상 스펙입니다.
+     * 칩 배경·하단선·활성 탭 테두리에 같은 그룹 색이 쓰입니다.
      *
      * onTabsReorder를 같이 전달하면 그룹 모드에서도 드래그 앤 드롭 재정렬이 됩니다. 탭이 어느
      * 그룹에 속하는지는 getTabGroup이 반환하는 값으로만 정해지고 배열 위치와는 무관하므로,
      * 자유롭게 순서를 바꿔도 그룹 소속은 항상 그대로 유지됩니다.
      */
     getTabGroup?: (tab: MultiTab) => MultiTabGroupInfo | null | undefined;
+    /**
+     * 탭 라벨 왼쪽에 표시할 아이콘. null/undefined면 아이콘 없이 렌더링됩니다.
+     */
+    getTabIcon?: (tab: MultiTab) => ReactNode;
+    /**
+     * 탭의 더보기 메뉴 항목 — 더보기(⋯) 버튼을 줄지는 탭마다 이 함수의 반환값으로 정합니다.
+     *
+     * - 항목 배열을 반환한 탭: 아이콘에 마우스를 올리면 더보기 아이콘으로 바뀌고, 클릭하면 항목들이
+     *   Popover 메뉴로 열립니다(아이콘이 없는 탭이면 더보기 아이콘이 항상 보입니다).
+     * - null/undefined/빈 배열을 반환한 탭: 더보기 버튼 없이 아이콘만 표시됩니다.
+     *
+     * 예) 특정 탭에만 메뉴 제공: `getTabMenuItems={(tab) => (tab.id === "settings" ? items : null)}`
+     *
+     * 아이콘·메뉴 영역의 클릭·포인터 이벤트는 탭 전환이나 드래그로 이어지지 않습니다.
+     */
+    getTabMenuItems?: (tab: MultiTab) => Array<MultiTabMenuItem> | null | undefined;
+}
+interface MultiTabMenuItem {
+    key: string;
+    label: ReactNode;
+    /** 라벨 앞에 표시할 아이콘 (예: <Settings size={14} />) */
+    icon?: ReactNode;
+    /** 현재 화면에 해당하는 항목이면 true — 배경으로 강조됩니다 */
+    selected?: boolean;
+    onSelect: () => void;
 }
 declare function MultiTabBar(props: MultiTabBarProps): react.JSX.Element | null;
@@ -1602,4 +1633,4 @@ declare const Z_INDEX: {
 };
 type ZIndexKey = keyof typeof Z_INDEX;
-export { ArrowIcon, Badge, type BadgeProps, type BaseParams, BaseUploader, type BaseUploaderProps, BreadCrumb, type BreadCrumbItem, type BreadCrumbMenuItem, type BreadCrumbProps, type BreadCrumbRoot, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarYearRange, Carousel, type CarouselProps, type CarouselRef, Checkbox, type CheckboxProps, type Column, type ConfirmOptions, DatePicker, DebouncedButton, type DebouncedButtonProps, DetailContent, type DetailContentProps, type DetailField, type DetailFieldOrSection, DetailModalFrame, type DetailMode, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, type FilterRow, type FormFieldConfig, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, type MentionItem, type MenuChild, type MenuGrandchild, type MenuItem, type MenuSection, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, type ModalIconHeaderProps, ModalOverlay, type ModalProps, type ModalType, MultiTabBar as MultiTab, type MultiTabGroupInfo, type MultiTab as MultiTabItem, PageFilter, type PageParams, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverPosition, PopoverTitle, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, RichEditor, RichEditorContent, type RichEditorContentProps, type RichEditorHeadingLevel, type RichEditorProps, type RichEditorThemeOverride, RichEditorToolbar, type RichEditorToolbarConfig, type RichEditorToolbarProps, ScrollArea, ScrollBar, SearchAddress, type SearchAddressProps, SearchBar, type SearchBarProps, Select, Select$1 as SelectBase, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionType, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, type SidebarHeaderRenderProps, type SidebarProps, SimplePopover, type SimplePopoverProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOption, type SortOrder, type SortParams, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, SubmitForm, Switch, type SwitchProps, Tab, type TabItem, type TabProps, Table, Textarea, type TextareaProps, type ToastPosition, type ToastProps, ToastProvider, type ToastType, ToggleSwitch, Tooltip, type TooltipProps, type UseParams, type UseRichEditorOptions, type UseRichEditorReturn, type YmdDateString, type ZIndexKey, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useRichEditor, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };
+export { ArrowIcon, Badge, type BadgeProps, type BaseParams, BaseUploader, type BaseUploaderProps, BreadCrumb, type BreadCrumbItem, type BreadCrumbMenuItem, type BreadCrumbProps, type BreadCrumbRoot, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarYearRange, Carousel, type CarouselProps, type CarouselRef, Checkbox, type CheckboxProps, type Column, type ConfirmOptions, DatePicker, DebouncedButton, type DebouncedButtonProps, DetailContent, type DetailContentProps, type DetailField, type DetailFieldOrSection, DetailModalFrame, type DetailMode, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, type FilterRow, type FormFieldConfig, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, type MentionItem, type MenuChild, type MenuGrandchild, type MenuItem, type MenuSection, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, type ModalIconHeaderProps, ModalOverlay, type ModalProps, type ModalType, MultiTabBar as MultiTab, type MultiTabGroupInfo, type MultiTab as MultiTabItem, type MultiTabMenuItem, PageFilter, type PageParams, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverPosition, PopoverTitle, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, RichEditor, RichEditorContent, type RichEditorContentProps, type RichEditorHeadingLevel, type RichEditorProps, type RichEditorThemeOverride, RichEditorToolbar, type RichEditorToolbarConfig, type RichEditorToolbarProps, ScrollArea, ScrollBar, SearchAddress, type SearchAddressProps, SearchBar, type SearchBarProps, Select, Select$1 as SelectBase, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionType, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, type SidebarHeaderRenderProps, type SidebarProps, SimplePopover, type SimplePopoverProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOption, type SortOrder, type SortParams, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, SubmitForm, Switch, type SwitchProps, Tab, type TabItem, type TabProps, Table, Textarea, type TextareaProps, type ToastPosition, type ToastProps, ToastProvider, type ToastType, ToggleSwitch, Tooltip, type TooltipProps, type UseParams, type UseRichEditorOptions, type UseRichEditorReturn, type YmdDateString, type ZIndexKey, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useRichEditor, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };

package/dist/index.d.ts CHANGED Viewed

@@ -91,6 +91,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     showPasswordToggle?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
 }
 declare function Input(props: InputProps): react.JSX.Element;
@@ -194,6 +196,9 @@ interface SelectOptionType {
     label: string | ReactNode;
     value: string;
     disabled?: boolean;
+    icon?: ReactNode;
+    avatarUrl?: string;
+    avatarAlt?: string;
 }
 interface SelectProps<T extends SelectOptionType = SelectOptionType> extends Omit<React.ComponentProps<typeof Select$1>, "onValueChange" | "value" | "defaultValue"> {
@@ -973,6 +978,8 @@ type InputOption<P> = BaseOption<P> & {
     placeholder?: string;
     /** 입력창 왼쪽에 돋보기 아이콘을 보여줄지 여부. 기본값 true. */
     leftIcon?: boolean;
+    /** 입력값이 있을 때 x(clear) 버튼을 보여줄지 여부. 기본값 true. */
+    canReset?: boolean;
 };
 type SelectOption<P> = BaseOption<P> & {
     type: "select";
@@ -1089,18 +1096,42 @@ interface MultiTabBarProps {
      * 전달하지 않으면(undefined) 기존과 완전히 동일한 평면(flat) 탭 목록으로 렌더링됩니다.
      *
      * 전달하면: 같은 key를 가진 탭들이 배열 안에서 서로 떨어져 있어도(다른 그룹 탭 사이에 끼어
-     * 있어도) 항상 그 그룹이 처음 등장한 위치의 칩 하나로 합쳐져서 색상 칩(그룹 헤더) + 그 아래
-     * 탭들로 렌더링됩니다 — 지금 fizza 프로젝트가 쓰던 커스텀 그룹 탭바와 동일한 형태이고, 이미
+     * 있어도) 항상 그 그룹이 처음 등장한 위치의 칩 하나로 합쳐져서 Chrome 탭 그룹처럼 색상 칩(그룹
+     * 라벨) + 그 옆 탭들 + 탭들 바닥을 잇는 그룹 색 하단선으로 렌더링됩니다. 이미
      * 열려 있는 그룹에 새 탭이 추가될 때 중복 칩이 생기지 않습니다.
      * 그룹 색상은 고정된 팔레트(파랑/주황/빨강/초록 + 보조 6색)에서 등장 순서대로 할당되고,
-     * 배경은 12% 투명도 틴트, 테두리는 40% 투명도로 렌더링됩니다 — fizza 프로젝트가 쓰던
-     * GroupedTabBar와 동일한 색상 스펙입니다.
+     * 칩 배경·하단선·활성 탭 테두리에 같은 그룹 색이 쓰입니다.
      *
      * onTabsReorder를 같이 전달하면 그룹 모드에서도 드래그 앤 드롭 재정렬이 됩니다. 탭이 어느
      * 그룹에 속하는지는 getTabGroup이 반환하는 값으로만 정해지고 배열 위치와는 무관하므로,
      * 자유롭게 순서를 바꿔도 그룹 소속은 항상 그대로 유지됩니다.
      */
     getTabGroup?: (tab: MultiTab) => MultiTabGroupInfo | null | undefined;
+    /**
+     * 탭 라벨 왼쪽에 표시할 아이콘. null/undefined면 아이콘 없이 렌더링됩니다.
+     */
+    getTabIcon?: (tab: MultiTab) => ReactNode;
+    /**
+     * 탭의 더보기 메뉴 항목 — 더보기(⋯) 버튼을 줄지는 탭마다 이 함수의 반환값으로 정합니다.
+     *
+     * - 항목 배열을 반환한 탭: 아이콘에 마우스를 올리면 더보기 아이콘으로 바뀌고, 클릭하면 항목들이
+     *   Popover 메뉴로 열립니다(아이콘이 없는 탭이면 더보기 아이콘이 항상 보입니다).
+     * - null/undefined/빈 배열을 반환한 탭: 더보기 버튼 없이 아이콘만 표시됩니다.
+     *
+     * 예) 특정 탭에만 메뉴 제공: `getTabMenuItems={(tab) => (tab.id === "settings" ? items : null)}`
+     *
+     * 아이콘·메뉴 영역의 클릭·포인터 이벤트는 탭 전환이나 드래그로 이어지지 않습니다.
+     */
+    getTabMenuItems?: (tab: MultiTab) => Array<MultiTabMenuItem> | null | undefined;
+}
+interface MultiTabMenuItem {
+    key: string;
+    label: ReactNode;
+    /** 라벨 앞에 표시할 아이콘 (예: <Settings size={14} />) */
+    icon?: ReactNode;
+    /** 현재 화면에 해당하는 항목이면 true — 배경으로 강조됩니다 */
+    selected?: boolean;
+    onSelect: () => void;
 }
 declare function MultiTabBar(props: MultiTabBarProps): react.JSX.Element | null;
@@ -1602,4 +1633,4 @@ declare const Z_INDEX: {
 };
 type ZIndexKey = keyof typeof Z_INDEX;
-export { ArrowIcon, Badge, type BadgeProps, type BaseParams, BaseUploader, type BaseUploaderProps, BreadCrumb, type BreadCrumbItem, type BreadCrumbMenuItem, type BreadCrumbProps, type BreadCrumbRoot, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarYearRange, Carousel, type CarouselProps, type CarouselRef, Checkbox, type CheckboxProps, type Column, type ConfirmOptions, DatePicker, DebouncedButton, type DebouncedButtonProps, DetailContent, type DetailContentProps, type DetailField, type DetailFieldOrSection, DetailModalFrame, type DetailMode, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, type FilterRow, type FormFieldConfig, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, type MentionItem, type MenuChild, type MenuGrandchild, type MenuItem, type MenuSection, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, type ModalIconHeaderProps, ModalOverlay, type ModalProps, type ModalType, MultiTabBar as MultiTab, type MultiTabGroupInfo, type MultiTab as MultiTabItem, PageFilter, type PageParams, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverPosition, PopoverTitle, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, RichEditor, RichEditorContent, type RichEditorContentProps, type RichEditorHeadingLevel, type RichEditorProps, type RichEditorThemeOverride, RichEditorToolbar, type RichEditorToolbarConfig, type RichEditorToolbarProps, ScrollArea, ScrollBar, SearchAddress, type SearchAddressProps, SearchBar, type SearchBarProps, Select, Select$1 as SelectBase, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionType, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, type SidebarHeaderRenderProps, type SidebarProps, SimplePopover, type SimplePopoverProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOption, type SortOrder, type SortParams, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, SubmitForm, Switch, type SwitchProps, Tab, type TabItem, type TabProps, Table, Textarea, type TextareaProps, type ToastPosition, type ToastProps, ToastProvider, type ToastType, ToggleSwitch, Tooltip, type TooltipProps, type UseParams, type UseRichEditorOptions, type UseRichEditorReturn, type YmdDateString, type ZIndexKey, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useRichEditor, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };
+export { ArrowIcon, Badge, type BadgeProps, type BaseParams, BaseUploader, type BaseUploaderProps, BreadCrumb, type BreadCrumbItem, type BreadCrumbMenuItem, type BreadCrumbProps, type BreadCrumbRoot, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarYearRange, Carousel, type CarouselProps, type CarouselRef, Checkbox, type CheckboxProps, type Column, type ConfirmOptions, DatePicker, DebouncedButton, type DebouncedButtonProps, DetailContent, type DetailContentProps, type DetailField, type DetailFieldOrSection, DetailModalFrame, type DetailMode, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, type FilterRow, type FormFieldConfig, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, type MentionItem, type MenuChild, type MenuGrandchild, type MenuItem, type MenuSection, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, type ModalIconHeaderProps, ModalOverlay, type ModalProps, type ModalType, MultiTabBar as MultiTab, type MultiTabGroupInfo, type MultiTab as MultiTabItem, type MultiTabMenuItem, PageFilter, type PageParams, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverPosition, PopoverTitle, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, RichEditor, RichEditorContent, type RichEditorContentProps, type RichEditorHeadingLevel, type RichEditorProps, type RichEditorThemeOverride, RichEditorToolbar, type RichEditorToolbarConfig, type RichEditorToolbarProps, ScrollArea, ScrollBar, SearchAddress, type SearchAddressProps, SearchBar, type SearchBarProps, Select, Select$1 as SelectBase, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionType, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, type SidebarHeaderRenderProps, type SidebarProps, SimplePopover, type SimplePopoverProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOption, type SortOrder, type SortParams, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, SubmitForm, Switch, type SwitchProps, Tab, type TabItem, type TabProps, Table, Textarea, type TextareaProps, type ToastPosition, type ToastProps, ToastProvider, type ToastType, ToggleSwitch, Tooltip, type TooltipProps, type UseParams, type UseRichEditorOptions, type UseRichEditorReturn, type YmdDateString, type ZIndexKey, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useRichEditor, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };

package/dist/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ import * as React6 from 'react';
 import React6__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, memo, createContext, useContext, useMemo, useId, useLayoutEffect, useDeferredValue, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { ChevronLeft, ChevronRight, FileText, ZoomIn, ZoomOut, RotateCcw, RotateCw, Download, X, Heading1, Heading2, Heading3, Heading4, Bold, Italic, Strikethrough, Code, AlignLeft, AlignCenter, AlignRight, List, ListOrdered, Quote, FileCode, Table as Table$1, Plus, Minus, Trash2, EyeOff, Eye, Check, CircleX, ChevronDown, Calendar, CircleIcon, ChevronUp, Search, TriangleAlert, Info, Pencil, BadgePlus, FileSearch2, Upload, FileUp, PanelRightClose, PanelLeftClose, ChevronFirst, ChevronLast } from 'lucide-react';
+import { ChevronLeft, ChevronRight, FileText, ZoomIn, ZoomOut, RotateCcw, RotateCw, Download, X, Heading1, Heading2, Heading3, Heading4, Bold, Italic, Strikethrough, Code, AlignLeft, AlignCenter, AlignRight, List, ListOrdered, Quote, FileCode, Table as Table$1, Plus, Minus, Trash2, CircleX, EyeOff, Eye, Check, ChevronDown, Calendar, CircleIcon, ChevronUp, Search, TriangleAlert, Info, Pencil, BadgePlus, FileSearch2, Upload, FileUp, PanelRightClose, PanelLeftClose, ChevronFirst, ChevronLast, MoreHorizontal } from 'lucide-react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as RadixSlider from '@radix-ui/react-slider';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -445,6 +445,8 @@ function Input2(props) {
     leftIcon,
     rightIcon,
     showPasswordToggle = true,
+    clearable = false,
+    onClear,
     onChange,
     ...rest
   } = props;
@@ -474,7 +476,16 @@ function Input2(props) {
   const shouldShowPasswordToggle = type === "password" && showPasswordToggle;
   const actualType = type === "password" && showPassword ? "text" : type;
   const handlePasswordToggle = () => setShowPassword((prev) => !prev);
-  const finalRightIcon = rightIcon || (shouldShowPasswordToggle ? /* @__PURE__ */ jsx(
+  const handleClear = () => onClear?.();
+  const shouldShowClearButton = clearable && !disabled && typeof rest.value === "string" && rest.value.length > 0;
+  const finalRightIcon = rightIcon || (shouldShowClearButton ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: handleClear,
+      className: "text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
+      children: /* @__PURE__ */ jsx(CircleX, { className: "h-4 w-4" })
+    }
+  ) : null) || (shouldShowPasswordToggle ? /* @__PURE__ */ jsx(
     "div",
     {
       onClick: handlePasswordToggle,
@@ -940,6 +951,29 @@ function SelectScrollDownButton({
     }
   );
 }
+function SelectOptionVisual(props) {
+  const { icon, avatarUrl, avatarAlt, fallbackLabel } = props;
+  const [hasAvatarError, setHasAvatarError] = useState(false);
+  const handleAvatarError = () => setHasAvatarError(true);
+  if (avatarUrl && !hasAvatarError) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: avatarUrl,
+        alt: avatarAlt ?? "",
+        className: "size-5 shrink-0 rounded-full object-cover",
+        onError: handleAvatarError
+      }
+    );
+  }
+  if (avatarUrl && hasAvatarError) {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-gray-200 text-[10px] font-medium text-gray-500", children: fallbackLabel?.charAt(0).toUpperCase() ?? "?" });
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-gray-500", children: icon });
+  }
+  return null;
+}
 // src/components/Select/config/default.ts
 var SELECT_BORDER_COLORS = {
@@ -1031,7 +1065,18 @@ function Select2(props) {
                     itemClassName,
                     option.disabled && cn("opacity-50 cursor-not-allowed text-gray-300 bg-white", disabledItemClassName)
                   ),
-                  children: option.label
+                  children: /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      SelectOptionVisual,
+                      {
+                        icon: option.icon,
+                        avatarUrl: option.avatarUrl,
+                        avatarAlt: option.avatarAlt,
+                        fallbackLabel: typeof option.label === "string" ? option.label : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                  ] })
                 },
                 String(option.value)
               )) })
@@ -7847,6 +7892,9 @@ function PageFilter(props) {
   const handleInputChange = (key) => (e) => {
     onChange({ [key]: e.target.value });
   };
+  const handleInputClear = (key) => () => {
+    onChange({ [key]: "" });
+  };
   const handleSelectChange = (key, autoSubmit) => (value) => {
     onChange({ [key]: value });
     if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
@@ -7891,6 +7939,8 @@ function PageFilter(props) {
               if (e.key === "Enter") handleSubmit();
             },
             leftIcon: option.leftIcon !== false ? /* @__PURE__ */ jsx(Search, { size: 16 }) : void 0,
+            clearable: option.canReset ?? true,
+            onClear: handleInputClear(optionKey),
             className: option.className
           }
         ) }, String(optionKey));
@@ -7986,15 +8036,15 @@ var VARIANT_STYLES = {
     inactiveText: "font-normal",
     indicator: "bg-blue-500",
     closeBtn: "rounded hover:bg-gray-300/60",
-    closeBtnWH: "w-3.5 h-3.5",
-    closeBtnSize: 10,
+    closeBtnWH: "w-4 h-4",
+    closeBtnSize: 12,
     plusBtnArea: "border-l border-gray-100 bg-white",
     plusBtn: "text-gray-400 hover:text-gray-600 hover:bg-gray-100",
     fadeOpacity: 0.12,
-    tabPy: "py-1.5",
-    tabPx: "px-3",
-    tabTextSize: "text-xs",
-    scrollPadding: "px-3 pt-1.5",
+    tabHeight: "h-[38px]",
+    tabPx: "px-4",
+    tabTextSize: "text-sm",
+    scrollPadding: "px-3 pt-2",
     rounded: "rounded-t-md"
   },
   dark: {
@@ -8005,15 +8055,15 @@ var VARIANT_STYLES = {
     inactiveText: "font-normal",
     indicator: "bg-indigo-400",
     closeBtn: "rounded hover:bg-gray-600/60",
-    closeBtnWH: "w-3.5 h-3.5",
-    closeBtnSize: 10,
+    closeBtnWH: "w-4 h-4",
+    closeBtnSize: 12,
     plusBtnArea: "border-l border-gray-700 bg-gray-900",
     plusBtn: "text-gray-500 hover:text-gray-300 hover:bg-gray-700",
     fadeOpacity: 0.4,
-    tabPy: "py-1.5",
-    tabPx: "px-3",
-    tabTextSize: "text-xs",
-    scrollPadding: "px-3 pt-1.5",
+    tabHeight: "h-[38px]",
+    tabPx: "px-4",
+    tabTextSize: "text-sm",
+    scrollPadding: "px-3 pt-2",
     rounded: "rounded-t-md"
   },
   "system-light": {
@@ -8029,7 +8079,7 @@ var VARIANT_STYLES = {
     plusBtnArea: "border-l border-gray-300 bg-gray-200",
     plusBtn: "text-slate-400 hover:text-slate-600 hover:bg-gray-300",
     fadeOpacity: 0.15,
-    tabPy: "py-2.5",
+    tabHeight: "h-[38px]",
     tabPx: "px-5",
     tabTextSize: "text-sm",
     scrollPadding: "px-3 pt-2",
@@ -8048,7 +8098,7 @@ var VARIANT_STYLES = {
     plusBtnArea: "border-l border-slate-700 bg-slate-900",
     plusBtn: "text-slate-400 hover:text-slate-200 hover:bg-slate-700",
     fadeOpacity: 0.45,
-    tabPy: "py-2.5",
+    tabHeight: "h-[38px]",
     tabPx: "px-5",
     tabTextSize: "text-sm",
     scrollPadding: "px-4 pt-2",
@@ -8060,6 +8110,65 @@ function easedFade(dir, opacity) {
   const c = (t) => `rgba(0,0,0,${(opacity * t).toFixed(3)})`;
   return `linear-gradient(${dir}, ${c(1)} 0%, ${c(0.72)} 20%, ${c(0.38)} 45%, ${c(0.1)} 70%, transparent 100%)`;
 }
+var MENU_ITEM_CLASSNAME = "flex w-full cursor-pointer items-center gap-2 rounded-md border-none bg-transparent px-2 py-1.5 text-left text-[13px] whitespace-nowrap text-gray-900 hover:bg-gray-100";
+function TabIconMenu(props) {
+  const { icon, items, label } = props;
+  const [open, setOpen] = useState(false);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: "flex h-4.5 w-4.5 items-center justify-center", children: icon });
+  }
+  const showMore = (base) => open ? "flex" : base;
+  return /* @__PURE__ */ jsx(
+    SimplePopover,
+    {
+      open,
+      onOpenChange: setOpen,
+      align: "start",
+      contentClassName: "w-auto min-w-28 p-1",
+      trigger: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${label} \uBA54\uB274`,
+          className: "group/tab-menu relative flex h-4.5 w-4.5 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0",
+          children: [
+            icon != null && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `flex items-center justify-center ${open ? "invisible" : "group-hover/tab-menu:invisible"}`,
+                children: icon
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `absolute inset-0 items-center justify-center rounded bg-gray-200 text-gray-700 ${icon != null ? showMore("hidden group-hover/tab-menu:flex") : "flex"}`,
+                children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
+              }
+            )
+          ]
+        }
+      ),
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            item.onSelect();
+          },
+          className: MENU_ITEM_CLASSNAME,
+          style: item.selected ? { backgroundColor: "#F3F4F6" } : void 0,
+          children: [
+            item.icon != null && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-gray-500", children: item.icon }),
+            item.label
+          ]
+        },
+        item.key
+      ))
+    }
+  );
+}
 function clusterTabs(tabs, getTabGroup) {
   const clusters = [];
   const clusterByGroupKey = /* @__PURE__ */ new Map();
@@ -8127,8 +8236,13 @@ function MultiTabPill(props) {
     draggable = false,
     onPointerDown,
     dropIndicator = null,
-    isDraggingThis = false
+    isDraggingThis = false,
+    icon,
+    menuItems,
+    groupColor
   } = props;
+  const hasPrefix = icon != null || (menuItems?.length ?? 0) > 0;
+  const outlinedByGroup = isActive && !!groupColor;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8138,7 +8252,7 @@ function MultiTabPill(props) {
         if (!isActive) onClick();
       },
       className: `
-        group relative flex items-center gap-1.5 ${s.tabPx} ${s.tabPy} flex-shrink-0
+        group relative flex items-center gap-1.5 ${s.tabPx} ${s.tabHeight} flex-shrink-0
         ${s.rounded} border border-b-0 select-none
         transition-colors duration-100
         ${isActive ? s.activeTab : s.inactiveTab}
@@ -8146,7 +8260,9 @@ function MultiTabPill(props) {
         ${isDraggingThis ? "opacity-40" : ""}
         ${dropIndicator === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""}
         ${dropIndicator === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}
+        ${outlinedByGroup ? "z-[2]" : ""}
       `,
+      style: outlinedByGroup ? { borderColor: groupColor } : void 0,
       children: [
         isActive && /* @__PURE__ */ jsx(
           "div",
@@ -8155,6 +8271,15 @@ function MultiTabPill(props) {
             style: accentColor ? { backgroundColor: accentColor } : void 0
           }
         ),
+        hasPrefix && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex flex-shrink-0 items-center",
+            onPointerDown: (e) => e.stopPropagation(),
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx(TabIconMenu, { icon, items: menuItems ?? [], label: tab.label })
+          }
+        ),
         /* @__PURE__ */ jsx("span", { className: `${s.tabTextSize} max-w-35 truncate leading-none ${isActive ? s.activeText : s.inactiveText}`, children: tab.label }),
         showClose && /* @__PURE__ */ jsx(
           "button",
@@ -8186,7 +8311,9 @@ function MultiTabBar(props) {
     onTabsReorder,
     variant = "light",
     primaryColor,
-    getTabGroup
+    getTabGroup,
+    getTabIcon,
+    getTabMenuItems
   } = props;
   const s = VARIANT_STYLES[variant];
   const scrollRef = useRef(null);
@@ -8449,9 +8576,9 @@ function MultiTabBar(props) {
   const draggingGroupColor = draggingGroupKey ? groupColors.get(draggingGroupKey) : void 0;
   const ghost = draggingGroupKey && draggingGroupCluster?.group ? {
     label: draggingGroupCluster.group.label,
-    bg: (draggingGroupColor ?? TAB_PALETTE[0]).bg,
-    border: (draggingGroupColor ?? TAB_PALETTE[0]).border,
-    color: (draggingGroupColor ?? TAB_PALETTE[0]).base
+    bg: (draggingGroupColor ?? TAB_PALETTE[0]).base,
+    border: (draggingGroupColor ?? TAB_PALETTE[0]).base,
+    color: "white"
   } : draggingTab ? { label: draggingTab.label, bg: "white", border: draggingColor ?? "#e5e7eb", color: "#111827" } : null;
   if (tabs.length === 0) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8502,7 +8629,9 @@ function MultiTabBar(props) {
                     draggable: reorderEnabled,
                     isDraggingThis: tab.id === draggingId,
                     dropIndicator: isDropTarget ? dropSide : isGroupDropTarget2 ? groupDropSide : null,
-                    onPointerDown: (e) => handlePointerDown(e, tab.id)
+                    onPointerDown: (e) => handlePointerDown(e, tab.id),
+                    icon: getTabIcon?.(tab),
+                    menuItems: getTabMenuItems?.(tab)
                   },
                   tab.id
                 );
@@ -8511,76 +8640,76 @@ function MultiTabBar(props) {
             const { key, label } = cluster.group;
             const color = groupColors.get(key) ?? TAB_PALETTE[0];
             const collapsed = collapsedGroups.has(key);
-            const groupHasActiveTab = cluster.tabs.some((t) => t.id === activeTabId);
             const isGroupDropTarget = groupDropTargetKey === `group:${key}`;
             const isDraggingThisGroup = draggingGroupKey === key;
             return /* @__PURE__ */ jsxs(
               "div",
               {
                 ref: (el) => registerGroupRef(key, el),
-                className: "flex shrink-0 flex-col items-stretch",
+                className: `relative flex shrink-0 items-end gap-0.5 ${isDraggingThisGroup ? "opacity-40" : ""} ${isGroupDropTarget && groupDropSide === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""} ${isGroupDropTarget && groupDropSide === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}`,
                 children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsxs(
-                      "button",
+                  /* @__PURE__ */ jsx("div", { className: `flex ${s.tabHeight} shrink-0 items-center px-1`, children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        if (suppressClickRef.current) return;
+                        toggleGroupCollapsed(key);
+                      },
+                      onPointerDown: reorderEnabled ? (e) => handleGroupPointerDown(e, key) : void 0,
+                      "aria-expanded": !collapsed,
+                      title: collapsed ? "\uD558\uC704 \uD0ED \uD3BC\uCE58\uAE30" : "\uD558\uC704 \uD0ED \uC811\uAE30",
+                      className: `flex h-6.5 items-center gap-1 rounded-lg px-2.5 text-sm font-semibold whitespace-nowrap text-white select-none ${reorderEnabled ? isDraggingThisGroup ? "cursor-grabbing" : "cursor-grab" : "cursor-pointer"}`,
+                      style: { backgroundColor: color.base },
+                      children: [
+                        collapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 14 }),
+                        label,
+                        canClose && /* @__PURE__ */ jsx(
+                          X,
+                          {
+                            size: 14,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              cluster.tabs.forEach((t) => onTabClose(t.id));
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  !collapsed && cluster.tabs.map((tab) => {
+                    const isDropTarget = dropTargetId === tab.id;
+                    const isTabGroupDropTarget = groupDropTargetKey === `tab:${tab.id}`;
+                    return /* @__PURE__ */ jsx(
+                      MultiTabPill,
                       {
-                        type: "button",
+                        tab,
+                        isActive: tab.id === activeTabId,
+                        showClose: canClose,
+                        accentColor: color.base,
+                        style: s,
                         onClick: () => {
                           if (suppressClickRef.current) return;
-                          toggleGroupCollapsed(key);
-                        },
-                        onPointerDown: reorderEnabled ? (e) => handleGroupPointerDown(e, key) : void 0,
-                        "aria-expanded": !collapsed,
-                        title: collapsed ? "\uD558\uC704 \uD0ED \uD3BC\uCE58\uAE30" : "\uD558\uC704 \uD0ED \uC811\uAE30",
-                        className: `flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs font-bold whitespace-nowrap select-none ${reorderEnabled ? isDraggingThisGroup ? "cursor-grabbing" : "cursor-grab" : "cursor-pointer"} ${isDraggingThisGroup ? "opacity-40" : ""} ${isGroupDropTarget && groupDropSide === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""} ${isGroupDropTarget && groupDropSide === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}`,
-                        style: { backgroundColor: color.bg, borderColor: color.border, color: color.base },
-                        children: [
-                          collapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 12 }),
-                          label,
-                          canClose && /* @__PURE__ */ jsx(
-                            X,
-                            {
-                              size: 12,
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                cluster.tabs.forEach((t) => onTabClose(t.id));
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    !collapsed && cluster.tabs.map((tab) => {
-                      const isDropTarget = dropTargetId === tab.id;
-                      const isTabGroupDropTarget = groupDropTargetKey === `tab:${tab.id}`;
-                      return /* @__PURE__ */ jsx(
-                        MultiTabPill,
-                        {
-                          tab,
-                          isActive: tab.id === activeTabId,
-                          showClose: canClose,
-                          accentColor: color.base,
-                          style: s,
-                          onClick: () => {
-                            if (suppressClickRef.current) return;
-                            onTabClick(tab.id);
-                          },
-                          onClose: () => onTabClose(tab.id),
-                          registerRef: registerTabRef,
-                          draggable: reorderEnabled,
-                          isDraggingThis: tab.id === draggingId,
-                          dropIndicator: isDropTarget ? dropSide : isTabGroupDropTarget ? groupDropSide : null,
-                          onPointerDown: (e) => handlePointerDown(e, tab.id)
+                          onTabClick(tab.id);
                         },
-                        tab.id
-                      );
-                    })
-                  ] }),
-                  /* @__PURE__ */ jsx(
+                        onClose: () => onTabClose(tab.id),
+                        registerRef: registerTabRef,
+                        draggable: reorderEnabled,
+                        isDraggingThis: tab.id === draggingId,
+                        dropIndicator: isDropTarget ? dropSide : isTabGroupDropTarget ? groupDropSide : null,
+                        onPointerDown: (e) => handlePointerDown(e, tab.id),
+                        icon: getTabIcon?.(tab),
+                        menuItems: getTabMenuItems?.(tab),
+                        groupColor: color.base
+                      },
+                      tab.id
+                    );
+                  }),
+                  !collapsed && /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: "mt-1 h-0.75 rounded-full",
-                      style: { backgroundColor: color.base, opacity: groupHasActiveTab ? 1 : 0.35 }
+                      className: "pointer-events-none absolute right-0 bottom-0 left-1 z-[1] h-0.5 rounded-l-full",
+                      style: { backgroundColor: color.base }
                     }
                   )
                 ]
@@ -8606,7 +8735,9 @@ function MultiTabBar(props) {
                 draggable: reorderEnabled,
                 isDraggingThis: tab.id === draggingId,
                 dropIndicator: isDropTarget ? dropSide : null,
-                onPointerDown: (e) => handlePointerDown(e, tab.id)
+                onPointerDown: (e) => handlePointerDown(e, tab.id),
+                icon: getTabIcon?.(tab),
+                menuItems: getTabMenuItems?.(tab)
               },
               tab.id
             );
@@ -8634,7 +8765,7 @@ function MultiTabBar(props) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "pointer-events-none fixed z-50 flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-bold whitespace-nowrap shadow-lg",
+          className: "pointer-events-none fixed z-50 flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-bold whitespace-nowrap shadow-lg",
           style: {
             left: dragPos.x + 12,
             top: dragPos.y + 12,