@tipp/ui 2.3.41 → 2.5.0

package/src/icon.ts

@@ -1,76 +1,322 @@
 export {
+  AccessibilityIcon,
+  ActivityLogIcon,
+  AlignBaselineIcon,
+  AlignBottomIcon,
+  AlignCenterHorizontallyIcon,
+  AlignCenterVerticallyIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  AlignTopIcon,
+  AllSidesIcon,
+  AngleIcon,
+  ArchiveIcon,
+  ArrowBottomLeftIcon,
+  ArrowBottomRightIcon,
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowTopLeftIcon,
+  ArrowTopRightIcon,
+  ArrowUpIcon,
+  AspectRatioIcon,
+  AvatarIcon,
+  BackpackIcon,
+  BadgeIcon,
+  BarChartIcon,
+  BellIcon,
+  BlendingModeIcon,
+  BookmarkFilledIcon,
   BookmarkIcon,
-  ExitIcon,
-  InfoCircledIcon,
-  ExclamationTriangleIcon,
-  MagnifyingGlassIcon,
-  DotsHorizontalIcon,
+  BorderAllIcon,
+  BorderBottomIcon,
+  BorderDashedIcon,
+  BorderDottedIcon,
+  BorderLeftIcon,
+  BorderNoneIcon,
+  BorderRightIcon,
+  BorderSolidIcon,
+  BorderSplitIcon,
+  BorderStyleIcon,
+  BorderTopIcon,
+  BorderWidthIcon,
+  BoxIcon,
+  BoxModelIcon,
+  ButtonIcon,
+  CalendarIcon,
+  CardStackIcon,
+  CardStackMinusIcon,
+  CardStackPlusIcon,
+  CaretDownIcon,
+  CaretLeftIcon,
+  CaretRightIcon,
+  CaretSortIcon,
+  CaretUpIcon,
   ChatBubbleIcon,
-  PlusIcon,
-  BookmarkFilledIcon,
-  MixerHorizontalIcon,
+  CheckboxIcon,
+  CheckCircledIcon,
+  CheckIcon,
+  ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronUpIcon,
+  CircleBackslashIcon,
+  CircleIcon,
+  ClipboardCopyIcon,
   ClipboardIcon,
-  BarChartIcon,
-  PersonIcon,
-  GearIcon,
-  DotsVerticalIcon,
-  Pencil1Icon,
+  ClockIcon,
+  CodeIcon,
+  CodeSandboxLogoIcon,
+  ColorWheelIcon,
+  ColumnsIcon,
+  ColumnSpacingIcon,
+  CommitIcon,
+  Component1Icon,
+  Component2Icon,
+  ComponentBooleanIcon,
+  ComponentInstanceIcon,
+  ComponentNoneIcon,
+  ComponentPlaceholderIcon,
+  ContainerIcon,
+  CookieIcon,
+  CopyIcon,
+  CornerBottomLeftIcon,
+  CornerBottomRightIcon,
+  CornersIcon,
+  CornerTopLeftIcon,
+  CornerTopRightIcon,
+  CountdownTimerIcon,
+  CounterClockwiseClockIcon,
+  CropIcon,
   Cross1Icon,
-  Link2Icon,
-  ChevronUpIcon,
-  ChevronDownIcon,
-  FileIcon,
-  TrashIcon,
+  Cross2Icon,
+  CrossCircledIcon,
+  Crosshair1Icon,
+  Crosshair2Icon,
+  CrumpledPaperIcon,
+  CubeIcon,
+  CursorArrowIcon,
+  CursorTextIcon,
+  DashboardIcon,
+  DashIcon,
+  DesktopIcon,
+  DimensionsIcon,
+  DiscIcon,
+  DiscordLogoIcon,
+  DividerHorizontalIcon,
+  DividerVerticalIcon,
+  DotFilledIcon,
+  DotIcon,
+  DotsHorizontalIcon,
+  DotsVerticalIcon,
+  DoubleArrowDownIcon,
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
+  DoubleArrowUpIcon,
+  DownloadIcon,
+  DragHandleDots1Icon,
+  DragHandleDots2Icon,
+  DragHandleHorizontalIcon,
+  DragHandleVerticalIcon,
+  DrawingPinFilledIcon,
+  DrawingPinIcon,
+  DropdownMenuIcon,
+  EnterFullScreenIcon,
+  EnterIcon,
+  EnvelopeClosedIcon,
+  EnvelopeOpenIcon,
+  EraserIcon,
+  ExclamationTriangleIcon,
+  ExitFullScreenIcon,
+  ExitIcon,
+  ExternalLinkIcon,
+  EyeClosedIcon,
+  EyeNoneIcon,
+  EyeOpenIcon,
+  FaceIcon,
+  FigmaLogoIcon,
+  FileIcon,
+  FileMinusIcon,
+  FilePlusIcon,
+  FileTextIcon,
+  FontBoldIcon,
+  FontFamilyIcon,
+  FontItalicIcon,
+  FontRomanIcon,
+  FontSizeIcon,
+  FontStyleIcon,
+  FrameIcon,
+  FramerLogoIcon,
+  GearIcon,
+  GitHubLogoIcon,
   GlobeIcon,
-  BackpackIcon,
-  CalendarIcon,
-  CheckIcon,
-  ArchiveIcon,
-  RowsIcon,
-  Share1Icon,
-  ClipboardCopyIcon,
-  CheckCircledIcon,
-  ArrowLeftIcon,
-  ArrowUpIcon,
+  GridIcon,
+  GroupIcon,
+  Half1Icon,
+  Half2Icon,
+  HamburgerMenuIcon,
+  HandIcon,
+  HeadingIcon,
+  HeartFilledIcon,
+  HeartIcon,
+  HeightIcon,
+  HobbyKnifeIcon,
+  HomeIcon,
+  IconJarLogoIcon,
+  IdCardIcon,
+  ImageIcon,
+  InfoCircledIcon,
+  InputIcon,
+  InstagramLogoIcon,
+  KeyboardIcon,
+  LapTimerIcon,
+  LaptopIcon,
+  LayersIcon,
+  LayoutIcon,
+  LetterCaseCapitalizeIcon,
+  LetterCaseLowercaseIcon,
+  LetterCaseToggleIcon,
+  LetterCaseUppercaseIcon,
+  LetterSpacingIcon,
+  LightningBoltIcon,
+  LineHeightIcon,
+  Link1Icon,
+  Link2Icon,
+  LinkBreak1Icon,
+  LinkBreak2Icon,
+  LinkedInLogoIcon,
+  LinkNone1Icon,
+  LinkNone2Icon,
+  ListBulletIcon,
+  LockClosedIcon,
+  LockOpen1Icon,
+  LockOpen2Icon,
+  LoopIcon,
+  MagicWandIcon,
+  MagnifyingGlassIcon,
+  MarginIcon,
+  MaskOffIcon,
+  MaskOnIcon,
+  MinusCircledIcon,
+  MinusIcon,
+  MixerHorizontalIcon,
+  MixerVerticalIcon,
+  MixIcon,
+  MobileIcon,
+  ModulzLogoIcon,
+  MoonIcon,
+  MoveIcon,
+  NotionLogoIcon,
+  OpacityIcon,
+  OpenInNewWindowIcon,
+  OverlineIcon,
+  PaddingIcon,
+  PaperPlaneIcon,
+  PauseIcon,
+  Pencil1Icon,
+  Pencil2Icon,
+  PersonIcon,
+  PieChartIcon,
+  PilcrowIcon,
+  PinBottomIcon,
+  PinLeftIcon,
+  PinRightIcon,
+  PinTopIcon,
+  PlayIcon,
+  PlusCircledIcon,
+  PlusIcon,
+  QuestionMarkCircledIcon,
+  QuestionMarkIcon,
+  QuoteIcon,
+  RadiobuttonIcon,
+  ReaderIcon,
   ReloadIcon,
+  ResetIcon,
+  ResumeIcon,
   RocketIcon,
-  ArrowRightIcon,
-  CopyIcon,
-  Pencil2Icon,
-  TargetIcon,
-  UpdateIcon,
-  DownloadIcon,
+  RotateCounterClockwiseIcon,
+  RowsIcon,
+  RowSpacingIcon,
+  RulerHorizontalIcon,
+  RulerSquareIcon,
+  ScissorsIcon,
+  SectionIcon,
+  SewingPinFilledIcon,
+  SewingPinIcon,
+  ShadowIcon,
+  ShadowInnerIcon,
+  ShadowNoneIcon,
+  ShadowOuterIcon,
+  Share1Icon,
+  Share2Icon,
+  ShuffleIcon,
+  SizeIcon,
+  SketchLogoIcon,
+  SlashIcon,
+  SliderIcon,
+  SpaceBetweenHorizontallyIcon,
+  SpaceBetweenVerticallyIcon,
+  SpaceEvenlyHorizontallyIcon,
+  SpaceEvenlyVerticallyIcon,
   SpeakerLoudIcon,
-  UploadIcon,
+  SpeakerModerateIcon,
   SpeakerOffIcon,
+  SpeakerQuietIcon,
+  SquareIcon,
+  StackIcon,
+  StarFilledIcon,
+  StarIcon,
+  StitchesLogoIcon,
+  StopIcon,
+  StopwatchIcon,
+  StretchHorizontallyIcon,
+  StretchVerticallyIcon,
+  StrikethroughIcon,
+  SunIcon,
+  SwitchIcon,
+  SymbolIcon,
+  TableIcon,
+  TargetIcon,
+  TextAlignBottomIcon,
+  TextAlignCenterIcon,
+  TextAlignJustifyIcon,
+  TextAlignLeftIcon,
+  TextAlignMiddleIcon,
+  TextAlignRightIcon,
+  TextAlignTopIcon,
+  TextIcon,
+  TextNoneIcon,
+  ThickArrowDownIcon,
+  ThickArrowLeftIcon,
+  ThickArrowRightIcon,
+  ThickArrowUpIcon,
   TimerIcon,
-  ArrowTopRightIcon,
+  TokensIcon,
+  TrackNextIcon,
+  TrackPreviousIcon,
+  TransformIcon,
+  TransparencyGridIcon,
+  TrashIcon,
+  TriangleDownIcon,
+  TriangleLeftIcon,
+  TriangleRightIcon,
+  TriangleUpIcon,
+  TwitterLogoIcon,
+  UnderlineIcon,
+  UpdateIcon,
+  UploadIcon,
+  ValueIcon,
+  ValueNoneIcon,
+  VercelLogoIcon,
   VideoIcon,
-  CubeIcon,
-  HamburgerMenuIcon,
-  FileTextIcon,
-  PaperPlaneIcon,
-  BellIcon,
-  ResetIcon,
-  HomeIcon,
-  StopIcon,
-  PlayIcon,
-  BoxIcon,
-  DashboardIcon,
-  SewingPinFilledIcon,
-  EnvelopeClosedIcon,
-  QuoteIcon,
-  FilePlusIcon,
-  QuestionMarkCircledIcon,
-  FaceIcon,
-  ImageIcon,
-  EnterFullScreenIcon,
-  ExitFullScreenIcon,
-  RotateCounterClockwiseIcon
+  ViewGridIcon,
+  ViewHorizontalIcon,
+  ViewNoneIcon,
+  ViewVerticalIcon,
+  WidthIcon,
+  ZoomInIcon,
+  ZoomOutIcon
 } from '@radix-ui/react-icons';
 
+// 로컬 아이콘 (CameraIcon은 로컬 정의가 우선하도록 radix export에서 제외)
 export * from './icons';

package/src/molecules/expand-table/index.tsx

@@ -75,6 +75,8 @@ export interface ExpandTableProps<Datum extends RowData> {
   /** pagination - 페이지 변경 시 호출되는 콜백 (0-based pageIndex) */
   onPageChange?: (pageIndex: number) => void;
   variant?: Variant;
+  /** 슬림 모드 - 행 높이·패딩을 줄여 컴팩트하게 표시, 기본값 false */
+  slim?: boolean;
 }
 
 export function ExpandTable<Datum extends RowData>(
@@ -96,6 +98,7 @@ export function ExpandTable<Datum extends RowData>(
     getRowStyle,
     getCellStyle,
     variant = 'card',
+    slim = false,
   } = props;
   const defaultAlign = 'left';
   const [pagination, setPagination] = useState<PaginationState>({
@@ -185,7 +188,7 @@ export function ExpandTable<Datum extends RowData>(
   }, [data, pageSize]);
 
   return (
-    <div className={`expand-table-wrapper ${variant}`}>
+    <div className={`expand-table-wrapper ${variant}${slim ? ' slim' : ''}`}>
       <div className="expand-table" style={tableStyle}>
         <div className="thead">
           {getHeaderGroups().map((headerGroup) => (

package/dist/chunk-JU7GB6R2.js

@@ -1,151 +0,0 @@
-// src/icon.ts
-import {
-  BookmarkIcon,
-  ExitIcon,
-  InfoCircledIcon,
-  ExclamationTriangleIcon,
-  MagnifyingGlassIcon,
-  DotsHorizontalIcon,
-  ChatBubbleIcon,
-  PlusIcon,
-  BookmarkFilledIcon,
-  MixerHorizontalIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ClipboardIcon,
-  BarChartIcon,
-  PersonIcon,
-  GearIcon,
-  DotsVerticalIcon,
-  Pencil1Icon,
-  Cross1Icon,
-  Link2Icon,
-  ChevronUpIcon,
-  ChevronDownIcon,
-  FileIcon,
-  TrashIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-  GlobeIcon,
-  BackpackIcon,
-  CalendarIcon,
-  CheckIcon,
-  ArchiveIcon,
-  RowsIcon,
-  Share1Icon,
-  ClipboardCopyIcon,
-  CheckCircledIcon,
-  ArrowLeftIcon,
-  ArrowUpIcon,
-  ReloadIcon,
-  RocketIcon,
-  ArrowRightIcon,
-  CopyIcon,
-  Pencil2Icon,
-  TargetIcon,
-  UpdateIcon,
-  DownloadIcon,
-  SpeakerLoudIcon,
-  UploadIcon,
-  SpeakerOffIcon,
-  TimerIcon,
-  ArrowTopRightIcon,
-  VideoIcon,
-  CubeIcon,
-  HamburgerMenuIcon,
-  FileTextIcon,
-  PaperPlaneIcon,
-  BellIcon,
-  ResetIcon,
-  HomeIcon,
-  StopIcon,
-  PlayIcon,
-  BoxIcon,
-  DashboardIcon,
-  SewingPinFilledIcon,
-  EnvelopeClosedIcon,
-  QuoteIcon,
-  FilePlusIcon,
-  QuestionMarkCircledIcon,
-  FaceIcon,
-  ImageIcon,
-  EnterFullScreenIcon,
-  ExitFullScreenIcon,
-  RotateCounterClockwiseIcon
-} from "@radix-ui/react-icons";
-
-export {
-  BookmarkIcon,
-  ExitIcon,
-  InfoCircledIcon,
-  ExclamationTriangleIcon,
-  MagnifyingGlassIcon,
-  DotsHorizontalIcon,
-  ChatBubbleIcon,
-  PlusIcon,
-  BookmarkFilledIcon,
-  MixerHorizontalIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ClipboardIcon,
-  BarChartIcon,
-  PersonIcon,
-  GearIcon,
-  DotsVerticalIcon,
-  Pencil1Icon,
-  Cross1Icon,
-  Link2Icon,
-  ChevronUpIcon,
-  ChevronDownIcon,
-  FileIcon,
-  TrashIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-  GlobeIcon,
-  BackpackIcon,
-  CalendarIcon,
-  CheckIcon,
-  ArchiveIcon,
-  RowsIcon,
-  Share1Icon,
-  ClipboardCopyIcon,
-  CheckCircledIcon,
-  ArrowLeftIcon,
-  ArrowUpIcon,
-  ReloadIcon,
-  RocketIcon,
-  ArrowRightIcon,
-  CopyIcon,
-  Pencil2Icon,
-  TargetIcon,
-  UpdateIcon,
-  DownloadIcon,
-  SpeakerLoudIcon,
-  UploadIcon,
-  SpeakerOffIcon,
-  TimerIcon,
-  ArrowTopRightIcon,
-  VideoIcon,
-  CubeIcon,
-  HamburgerMenuIcon,
-  FileTextIcon,
-  PaperPlaneIcon,
-  BellIcon,
-  ResetIcon,
-  HomeIcon,
-  StopIcon,
-  PlayIcon,
-  BoxIcon,
-  DashboardIcon,
-  SewingPinFilledIcon,
-  EnvelopeClosedIcon,
-  QuoteIcon,
-  FilePlusIcon,
-  QuestionMarkCircledIcon,
-  FaceIcon,
-  ImageIcon,
-  EnterFullScreenIcon,
-  ExitFullScreenIcon,
-  RotateCounterClockwiseIcon
-};
-//# sourceMappingURL=chunk-JU7GB6R2.js.map

package/dist/chunk-JU7GB6R2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n  CheckCircledIcon,\n  ArrowLeftIcon,\n  ArrowUpIcon,\n  ReloadIcon,\n  RocketIcon,\n  ArrowRightIcon,\n  CopyIcon,\n  Pencil2Icon,\n  TargetIcon,\n  UpdateIcon,\n  DownloadIcon,\n  SpeakerLoudIcon,\n  UploadIcon,\n  SpeakerOffIcon,\n  TimerIcon,\n  ArrowTopRightIcon,\n  VideoIcon,\n  CubeIcon,\n  HamburgerMenuIcon,\n  FileTextIcon,\n  PaperPlaneIcon,\n  BellIcon,\n  ResetIcon,\n  HomeIcon,\n  StopIcon,\n  PlayIcon,\n  BoxIcon,\n  DashboardIcon,\n  SewingPinFilledIcon,\n  EnvelopeClosedIcon,\n  QuoteIcon,\n  FilePlusIcon,\n  QuestionMarkCircledIcon,\n  FaceIcon,\n  ImageIcon,\n  EnterFullScreenIcon,\n  ExitFullScreenIcon,\n  RotateCounterClockwiseIcon\n} from '@radix-ui/react-icons';\n\nexport * from './icons';\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/chunk-SGMO4KBC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/charts/horizontal-bar-chart.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface HorizontalBarChartProps {\n  /** 100% 바가 뜻하는 전체 값 */\n  total: number;\n  /** 화면에 채워져보이는 값 */\n  value: number;\n  /** 배경 색상 */\n  backgroundColor?: string;\n  /** 바의 색상 */\n  barColor?: string;\n  /** 바의 높이 */\n  height?: number;\n}\n\nexport function HorizontalBarChart(\n  props: HorizontalBarChartProps\n): React.ReactNode {\n  const { total, value, backgroundColor, barColor, height } = props;\n  return (\n    <div\n      className=\"tipp_horizontal-bar-chart bar-wrapper\"\n      style={{ height, backgroundColor }}\n    >\n      <div\n        style={{\n          width: `${Math.round((value / total) * 100)}%`,\n          height: '100%',\n        }}\n      >\n        <div className=\"bar\" style={{ backgroundColor: barColor }} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA8BQ;AAfD,SAAS,mBACd,OACiB;AACjB,QAAM,EAAE,OAAO,OAAO,iBAAiB,UAAU,OAAO,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,QAAQ,gBAAgB;AAAA,MAEjC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO,GAAG,KAAK,MAAO,QAAQ,QAAS,GAAG,CAAC;AAAA,YAC3C,QAAQ;AAAA,UACV;AAAA,UAEA,8BAAC,SAAI,WAAU,OAAM,OAAO,EAAE,iBAAiB,SAAS,GAAG;AAAA;AAAA,MAC7D;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-U3BQT7ZO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/badge.tsx"],"sourcesContent":["import {\n  Badge as RadixBadge,\n  type BadgeProps as RadixBadgeProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {\n  size?: 'small' | 'medium' | 'large';\n  color?: 'error' | 'accent' | 'neutral' | 'success';\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (props: BadgeProps, ref): React.ReactNode => {\n    const { size = 'small', color = 'accent', ...rest } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n        default:\n          return '1';\n      }\n    }, [size]);\n\n    const radixColor = useMemo(() => {\n      switch (color) {\n        case 'error':\n          return 'red';\n        case 'neutral':\n          return 'gray';\n        case 'success':\n          return 'green';\n        case 'accent':\n        default:\n          return undefined;\n      }\n    }, [color]);\n\n    return (\n      <RadixBadge {...rest} color={radixColor} ref={ref} size={radixSize} />\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n"],"mappings":";;;;;;;AAAA;AAAA,EACE,SAAS;AAAA,OAEJ;AACP,SAAS,SAAS,kBAAkB;AAuC9B;AAhCC,IAAM,QAAQ;AAAA,EACnB,CAAC,OAAmB,QAAyB;AAC3C,UAAsD,YAA9C,SAAO,SAAS,QAAQ,SAbpC,IAa0D,IAAT,iBAAS,IAAT,CAArC,QAAgB;AAExB,UAAM,YAAY,QAAQ,MAAM;AAC9B,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACX;AAAA,IACF,GAAG,CAAC,IAAI,CAAC;AAET,UAAM,aAAa,QAAQ,MAAM;AAC/B,cAAQ,OAAO;AAAA,QACb,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MACX;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,WACE,oBAAC,6CAAe,OAAf,EAAqB,OAAO,YAAY,KAAU,MAAM,YAAW;AAAA,EAExE;AACF;AAEA,MAAM,cAAc;","names":[]}

package/dist/chunk-UTMCR27N.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type {\n  ColumnDef,\n  SortingState,\n  RowData,\n  Row as RowType,\n  PaginationState,\n} from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n  getSortedRowModel,\n  createColumnHelper,\n  getPaginationRowModel,\n} from '@tanstack/react-table';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ScrollArea } from '@radix-ui/themes';\nimport { Flex } from '@/atoms/flex';\nimport { Pagination } from '@/atoms/pagination';\nimport { Spinner } from '@/atoms/spinner';\nimport { Typo } from '@/atoms/typo';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef, RowType as Row };\nexport { createColumnHelper };\n\ntype Variant = 'card' | 'sprite' | 'sprite-border';\nconst sortButtonColorMapper: Record<\n  Variant,\n  { selected: string; unselected: string }\n> = {\n  card: {\n    selected: 'var(--iris-10)',\n    unselected: 'var(--iris-6)',\n  },\n  sprite: {\n    // selected: 'var(--gray-a12)',\n    // unselected: 'var(--gray-a6)',\n    selected: 'var(--iris-10)',\n    unselected: 'var(--iris-6)',\n  },\n  'sprite-border': {\n    selected: 'var(--iris-10)',\n    unselected: 'var(--iris-6)',\n  },\n};\n\nexport interface ExpandTableProps<Datum extends RowData> {\n  /** 렌더할 데이터 배열  */\n  data?: Datum[];\n  /** 테이블 컬럼의 메타 데이터 */\n  columns: ColumnDef<Datum>[];\n  /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n  ExpandComp?: ExpandComp<Datum>;\n  /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n  placeholder?: React.ReactNode;\n  /** 행 클릭 시 실행할 콜백 */\n  onRowClick?: OnRowClick<Datum>;\n  getRowStyle?: (data: Datum) => CSSProperties;\n  getCellStyle?: (data: Datum) => CSSProperties;\n  tableStyle?: CSSProperties;\n  isLoading?: boolean;\n\n  /** pagination - 표시 유무, 기본값 true */\n  showPagination?: boolean;\n  /** pagination - 현재 선택된 페이지, 0부터 시작 */\n  pageIndex?: number;\n  /** pagination - 한 페이지에 표시될 컬럼 개수, 기본값 10 */\n  pageSize?: number;\n  /** pagination -  */\n  siblingCount?: number;\n  /** pagination - 페이지 변경 시 호출되는 콜백 (0-based pageIndex) */\n  onPageChange?: (pageIndex: number) => void;\n  variant?: Variant;\n}\n\nexport function ExpandTable<Datum extends RowData>(\n  props: ExpandTableProps<Datum>\n): React.ReactNode {\n  const {\n    data,\n    columns,\n    ExpandComp,\n    placeholder,\n    onRowClick,\n    tableStyle,\n    showPagination = true,\n    isLoading,\n    pageIndex = 0,\n    pageSize = 10,\n    siblingCount = 2,\n    onPageChange,\n    getRowStyle,\n    getCellStyle,\n    variant = 'card',\n  } = props;\n  const defaultAlign = 'left';\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: pageIndex || 0,\n    pageSize: pageSize || 9999,\n  });\n\n  useEffect(() => {\n    setPagination((prev) => {\n      const next = pageIndex;\n      if (prev.pageIndex === next) return prev;\n      return { ...prev, pageIndex: next };\n    });\n  }, [pageIndex]);\n\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({\n    data: data || [],\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      sorting,\n      pagination,\n    },\n    onSortingChange: setSorting,\n    getPaginationRowModel: getPaginationRowModel(),\n    onPaginationChange: setPagination,\n  });\n\n  const gridTemplateColumns = useMemo<string>(() => {\n    return columns\n      .map((col) => {\n        if (col.meta?.autoSize) return `minmax(${col.size || 50}px, 1fr)`;\n        return `${col.size || 150}px`;\n      })\n      .join(' ');\n  }, [columns]);\n\n  const rowModels = getRowModel();\n\n  const onChangePagination = useCallback(\n    (page: number) => {\n      const idx = page - 1;\n      setPageIndex(idx);\n      onPageChange?.(idx);\n    },\n    [setPageIndex, onPageChange]\n  );\n\n  const helpCompRender = useCallback(\n    (rowLength: number) => {\n      if (isLoading) {\n        return (\n          <Flex\n            align=\"center\"\n            height=\"100%\"\n            justify=\"center\"\n            p=\"5\"\n            width=\"100%\"\n          >\n            <Spinner />\n          </Flex>\n        );\n      }\n      if (rowLength === 0) {\n        return (\n          <div className=\"tr\" key=\"expand_placeholder\">\n            <Flex align=\"center\" justify=\"center\">\n              {placeholder || (\n                <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n                  데이터가 없습니다\n                </Typo>\n              )}\n            </Flex>\n          </div>\n        );\n      }\n      return null;\n    },\n    [isLoading, placeholder]\n  );\n\n  const pageCount = useMemo(() => {\n    if (!data) return 0;\n    return Math.ceil(data.length / pageSize);\n  }, [data, pageSize]);\n\n  return (\n    <div className={`expand-table-wrapper ${variant}`}>\n      <div className=\"expand-table\" style={tableStyle}>\n        <div className=\"thead\">\n          {getHeaderGroups().map((headerGroup) => (\n            <div\n              className=\"tr\"\n              key={headerGroup.id}\n              style={{ gridTemplateColumns }}\n            >\n              {headerGroup.headers.map((header) => {\n                const sortable = header.column.getCanSort();\n                const sortedState = header.column.getIsSorted();\n                const justifyContent =\n                  header.column.columnDef.meta?.align || defaultAlign;\n\n                if (sortable) {\n                  return (\n                    <div className={`${justifyContent} th`} key={header.id}>\n                      <button\n                        onClick={header.column.getToggleSortingHandler()}\n                        style={{ cursor: 'pointer' }}\n                        type=\"button\"\n                      >\n                        <Typo as=\"div\" variant=\"body\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                        </Typo>\n                        <Flex\n                          direction=\"column\"\n                          style={{ marginLeft: 'var(--space-2)' }}\n                        >\n                          {sortedState === false && (\n                            <TriangleArrowDownIcon\n                              color={sortButtonColorMapper[variant].unselected}\n                            />\n                          )}\n                          {sortedState === 'asc' && (\n                            <TriangleArrowUpIcon\n                              color={sortButtonColorMapper[variant].selected}\n                            />\n                          )}\n                          {sortedState === 'desc' && (\n                            <TriangleArrowDownIcon\n                              color={sortButtonColorMapper[variant].selected}\n                            />\n                          )}\n                        </Flex>\n                      </button>\n                    </div>\n                  );\n                }\n\n                return (\n                  <div className={`${justifyContent} th`} key={header.id}>\n                    <Typo as=\"div\" variant=\"body\">\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext()\n                      )}\n                    </Typo>\n                  </div>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n        <ScrollArea className=\"tbody\">\n          {/* 조건에 따라 placeholder 또는 loading 렌더*/}\n          {helpCompRender(rowModels.rows.length) ||\n            rowModels.rows.map((row) => {\n              return (\n                <Row\n                  ExpandComp={ExpandComp}\n                  defaultAlign={defaultAlign}\n                  getCellStyle={getCellStyle}\n                  getRowStyle={getRowStyle}\n                  gridTemplateColumns={gridTemplateColumns}\n                  key={`row_${row.id}`}\n                  onRowClick={onRowClick}\n                  row={row}\n                />\n              );\n            })}\n        </ScrollArea>\n      </div>\n      {showPagination ? (\n        <Flex justify=\"end\" pt=\"4\" width=\"100%\">\n          <Pagination\n            count={pageCount}\n            onChange={onChangePagination}\n            page={pagination.pageIndex + 1}\n            siblingCount={siblingCount}\n          />\n        </Flex>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}