@mindlogic-ai/logician-ui 4.0.0-alpha.11 → 4.0.0-alpha.13

package/src/components/Icon/index.tsx

@@ -2,16 +2,215 @@ import { Icons } from './_constants/iconList';
 
 export type { CreatedIcon } from './_utils/createIcon';
 
-// 각 아이콘을 개별적으로 export (Icons. 없이 직접 사용 가능)
+// Individual named exports (use without the Icons. prefix).
 export const {
-  // BI Icons
+  ActivityIcon,
+  AlertCircleFilledIcon,
+  AlertCircleIcon,
+  AlertOctagonIcon,
+  AlertTriangleIcon,
+  AmountUsageIcon,
+  AnalyticsIcon,
+  AnnouncementIcon,
+  AppWindowFilledIcon,
+  ArchiveIcon,
+  ArrowBackUpIcon,
+  ArrowDownRightIcon,
+  ArrowForwardUpIcon,
+  ArrowsLeftRightIcon,
+  ArrowsMinimizeIcon,
+  ArrowUpRightIcon,
+  BeerIcon,
+  BellIcon,
+  BlockquoteIcon,
+  BoldIcon,
+  BoltFilledIcon,
+  BoltIcon,
+  BookFilledIcon,
+  BookIcon,
+  BugIcon,
+  BuildingBankIcon,
+  BuildingUserIcon,
+  BulbIcon,
+  CalendarIcon,
+  CardMembershipIcon,
+  CashIcon,
+  ChartBarIcon,
+  ChartLineIcon,
+  ChartPieIcon,
+  ChatIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  CircleCheckIcon,
+  CirclePlusIcon,
+  ClockFilledIcon,
+  ClockIcon,
+  CloseIcon,
+  CodeIcon,
+  CoinsIcon,
+  CopyIcon,
+  CreditCardFilledIcon,
+  CreditCardIcon,
+  DashboardIcon,
+  DetailIcon,
+  DotsHorizontalIcon,
+  DownloadIcon,
+  EditIcon,
+  ExamIcon,
+  ExpandAltIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FaceIcon,
+  FaqIcon,
+  FileCodeIcon,
+  FileFilledIcon,
+  FileIcon,
+  FileJsonIcon,
+  FileMusicIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  FileZipIcon,
+  FilledAmountUsageIcon,
+  FilledAnalyticsIcon,
+  FilledBulbIcon,
+  FilledChatIcon,
+  FilledEditIcon,
+  FilledFaceIcon,
+  FilledFaqIcon,
+  FilledLayoutIcon,
+  FilledMembersIcon,
+  FilterIcon,
+  GiftIcon,
+  GripVerticalIcon,
+  HeadsetIcon,
+  HelpCircleIcon,
+  Hierarchy3Icon,
+  HomeFilledIcon,
+  HomeIcon,
+  InfinityIcon,
+  InfoCircleIcon,
+  ItalicIcon,
+  KeyIcon,
+  LanguageIcon,
+  LayoutDashboardFilledIcon,
+  LayoutDashboardIcon,
+  LayoutIcon,
+  LayoutNavbarIcon,
+  LightbulbIcon,
+  LinkIcon,
+  ListIcon,
+  ListNumbersIcon,
+  LockCogIcon,
+  LockIcon,
+  LockOpenIcon,
+  LogoutIcon,
+  MailIcon,
+  Map2Icon,
+  MaximizeIcon,
+  MembersIcon,
+  MenuIcon,
+  MessageChatbotFilledIcon,
+  MessageDotsIcon,
+  MessageOffIcon,
+  MicrophoneIcon,
+  MicrophoneOffIcon,
+  MinusIcon,
+  MonitorIcon,
+  MoonIcon,
+  NewsIcon,
+  NotebookIcon,
+  NotesIcon,
+  PaperclipIcon,
+  PauseFilledIcon,
+  PendingIcon,
+  PhoneFilledIcon,
+  PhotoIcon,
+  PinFilledIcon,
+  PlayFilledIcon,
+  PlusIcon,
+  PresentationIcon,
+  PreviewIcon,
+  PrinterIcon,
+  ReceiptIcon,
+  ReceiptTextIcon,
+  RefreshIcon,
+  ReportIcon,
+  RotateClockwiseIcon,
+  RotateIcon,
+  SaveIcon,
+  ScaleIcon,
+  SchoolIcon,
+  SearchIcon,
+  SendIcon,
+  SettingsIcon,
+  Share3Icon,
+  ShareIcon,
+  ShieldCheckIcon,
+  SidebarCollapseIcon,
+  SidebarIcon,
+  SitemapIcon,
+  SortAscendingLettersIcon,
+  SortAscendingNumbersIcon,
+  SortDescendingLettersIcon,
+  SortDescendingNumbersIcon,
+  SourceCodeIcon,
+  SouthKoreaIcon,
+  SparklesIcon,
+  SpeakerphoneIcon,
+  StarFilledIcon,
+  StarIcon,
+  StickyNoteIcon,
+  StopFilledIcon,
+  StoreActiveIcon,
+  StoreIcon,
+  StrikethroughIcon,
+  StudioActiveIcon,
+  StudioIcon,
+  SumIcon,
+  SunIcon,
+  TableIcon,
+  TargetIcon,
+  ThumbDownFilledIcon,
+  ThumbDownIcon,
+  ThumbsUpDownIcon,
+  ThumbUpFilledIcon,
+  ThumbUpIcon,
+  TranslateIcon,
+  TrashIcon,
+  UnderlineIcon,
+  UnlinkIcon,
+  UploadIcon,
+  UserCheckIcon,
+  UserCircleIcon,
+  UserClockIcon,
+  UserFilledIcon,
+  UserIcon,
+  UserPinIcon,
+  UserPlusIcon,
+  UserShieldIcon,
+  UsersIcon,
+  VerifiedIcon,
+  VerticalEllipsisIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeMuteIcon,
+  WarningIcon,
+  WindowIcon,
+  WorldIcon,
+  WorldOffIcon,
+  WorldSearchIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+  ZoomQuestionIcon,
   BiDetail,
   BiExpandAlt,
-  // BS Icons
   BsTranslate,
-  // CI Icons
   CiFileOn,
-  // FA Icons
   FaArchive,
   FaBeer,
   FaChartPie,
@@ -33,7 +232,6 @@ export const {
   FaUserCheck,
   FaUserPlus,
   FaUsers,
-  // FA6 Icons
   FaCheck,
   FaCode,
   FaLock,
@@ -41,18 +239,13 @@ export const {
   FaRegCopy,
   FaRotateRight,
   FaUserClock,
-  // GI Icons
   GiTwoCoins,
-  // GO Icons
   GoArrowDownRight,
   GoArrowUpRight,
-  // GR Icons
   GrUserAdmin,
-  // HI Icons
   HiLightningBolt,
   HiRefresh,
   HiX,
-  // IO Icons
   IoIosAddCircleOutline,
   IoIosArrowBack,
   IoIosArrowForward,
@@ -66,7 +259,6 @@ export const {
   IoMdSettings,
   IoMdThumbsDown,
   IoMdThumbsUp,
-  // IO5 Icons
   IoAddCircleOutline,
   IoAddOutline,
   IoMinusOutline,
@@ -85,9 +277,7 @@ export const {
   IoSearch,
   IoWarning,
   IoWarningOutline,
-  // LIA Icons
   LiaNewspaper,
-  // LU Icons
   LuBookOpenText,
   LuDownload,
   LuExternalLink,
@@ -97,7 +287,12 @@ export const {
   LuReceipt,
   LuSendHorizontal,
   LuUpload,
-  // MD Icons
+  AlertTriangle,
+  AlertOctagon,
+  GripVertical,
+  StickyNote,
+  Minus,
+  Plus,
   MdAnnouncement,
   MdCardMembership,
   MdError,
@@ -109,16 +304,12 @@ export const {
   MdPreview,
   MdSpaceDashboard,
   MdThumbsUpDown,
-  // PI Icons
   PiChatSlashBold,
   PiExam,
   PiGlobe,
   PiGlobeX,
-  // RX Icons
   RxDotsHorizontal,
-  // SL Icons
   SlSettings,
-  // TB Icons
   TbAlertCircle,
   TbAppWindowFilled,
   TbArrowBackUp,
@@ -137,14 +328,6 @@ export const {
   TbSum,
   TbWorldSearch,
   TbX,
-  // Lucide icons surfaced under friendly names (Workflow chrome)
-  AlertTriangle,
-  AlertOctagon,
-  GripVertical,
-  StickyNote,
-  Minus,
-  Plus,
-  // Custom SVG Icons
   Analytics,
   Bulb,
   Chat,

package/src/components/Input/Input.stories.tsx

@@ -2,7 +2,7 @@ import { Stack, Box, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { IoCall, IoSearch, IoIosMail } from '@/components/Icon';
+import { PhoneFilledIcon, SearchIcon, MailIcon } from '@/components/Icon';
 import { MaxLengthIndicator } from '../MaxLengthIndicator';
 
 import { Input } from './Input';
@@ -148,7 +148,7 @@ export const LeftIcon: Story = {
     placeholder: 'Phone number',
     size: 'md',
     disabled: false,
-    leftIcon: <IoCall color="gray.300" />,
+    leftIcon: <PhoneFilledIcon color="gray.300" />,
   },
 };
 
@@ -157,15 +157,15 @@ export const RightIcon: Story = {
     placeholder: 'Search...',
     size: 'md',
     disabled: false,
-    rightIcon: <IoSearch color="gray.300" />,
+    rightIcon: <SearchIcon color="gray.300" />,
   },
 };
 
 export const BothIcons: Story = {
   args: {
     placeholder: 'Email address',
-    leftIcon: <IoIosMail color="gray.300" />,
-    rightIcon: <IoSearch color="gray.300" />,
+    leftIcon: <MailIcon color="gray.300" />,
+    rightIcon: <SearchIcon color="gray.300" />,
   },
 };
 

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { Flex } from '@chakra-ui/react';
 
-import { IoChevronForward, IoIosArrowBack } from '@/components/Icon';
+import { ChevronLeftIcon, ChevronRightIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Subtext, Subtitle } from '@/components/Typography';
 import { useTranslate } from '@/hooks/useTranslate';
@@ -108,7 +108,7 @@ export const Pagination = ({
               disabled={currentPage <= 1}
               color={currentPage === 1 ? 'fg.subtle' : 'fg.muted'}
             >
-              <IoIosArrowBack boxSize="sm" />
+              <ChevronLeftIcon boxSize="sm" />
             </IconButton>
             <IconButton
               colorPalette="neutral"
@@ -118,7 +118,7 @@ export const Pagination = ({
               disabled={currentPage >= maxPage}
               color={currentPage === maxPage ? 'fg.subtle' : 'fg.muted'}
             >
-              <IoChevronForward boxSize="sm" />
+              <ChevronRightIcon boxSize="sm" />
             </IconButton>
           </Flex>
         )}

package/src/components/PasswordInput/PasswordInput.tsx

@@ -1,5 +1,4 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { LuEye, LuEyeOff } from 'react-icons/lu';
 import {
   IconButton,
   InputGroup,
@@ -7,6 +6,8 @@ import {
   useControllableState,
 } from '@chakra-ui/react';
 
+import { EyeIcon, EyeOffIcon } from '@/components/Icon';
+
 import { Input } from '../Input';
 import { PasswordInputProps } from './PasswordInput.types';
 
@@ -17,7 +18,7 @@ export const PasswordInput = forwardRef(
       defaultVisible = false,
       visible: visibleProp,
       onVisibleChange,
-      visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
+      visibilityIcon = { on: <EyeIcon />, off: <EyeOffIcon /> },
       disabled,
       ...rest
     }: PasswordInputProps,

package/src/components/SeeMoreButton/SeeMoreButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@chakra-ui/react';
 
-import { IoChevronDownOutline } from '@/components/Icon';
+import { ChevronDownIcon } from '@/components/Icon';
 import { useTranslate } from '@/hooks/useTranslate';
 
 import { seeMoreButtonStyles } from './SeeMoreButton.styles';
@@ -25,7 +25,7 @@ export const SeeMoreButton = ({
   return (
     <Button {...seeMoreButtonStyles} {...rest}>
       {translate('see_more')} ({currentCount}/{maxCount}){' '}
-      <IoChevronDownOutline color="inherit" />
+      <ChevronDownIcon color="inherit" />
     </Button>
   );
 };

package/src/components/Toast/ToastIcon/ToastIcon.tsx

@@ -1,20 +1,20 @@
 import { ReactNode } from 'react';
 
 import {
-  IoIosCheckmarkCircle,
-  IoWarning,
-  LuInfo,
-  MdError,
+  AlertCircleFilledIcon,
+  CircleCheckIcon,
+  InfoCircleIcon,
+  WarningIcon,
 } from '@/components/Icon';
 
 import { ToastProps, ToastStatus } from '../Toast.types';
 
 export const ToastIcon = ({ status }: Required<Pick<ToastProps, 'status'>>) => {
   const iconProps: Record<ToastStatus, ReactNode> = {
-    info: <LuInfo boxSize="md" color="primary.main" />,
-    warning: <IoWarning boxSize="lg" color="warning.main" />,
-    success: <IoIosCheckmarkCircle boxSize="lg" color="success.main" />,
-    error: <MdError boxSize="lg" color="danger.main" />,
+    info: <InfoCircleIcon boxSize="md" color="primary.main" />,
+    warning: <WarningIcon boxSize="lg" color="warning.main" />,
+    success: <CircleCheckIcon boxSize="lg" color="success.main" />,
+    error: <AlertCircleFilledIcon boxSize="lg" color="danger.main" />,
   };
 
   return iconProps[status];

package/src/components/Tree/TreeBranchIndicator.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import { TreeView as ChakraTreeView } from '@chakra-ui/react';
 
-import { IoChevronForward } from '@/components/Icon';
+import { ChevronRightIcon } from '@/components/Icon';
 
 import { TreeBranchIndicatorProps } from './Tree.types';
 
@@ -20,7 +20,7 @@ export const TreeBranchIndicator = forwardRef<
       _motionReduce={{ transition: 'none' }}
       {...rest}
     >
-      {children ?? <IoChevronForward boxSize="xs" />}
+      {children ?? <ChevronRightIcon boxSize="xs" />}
     </ChakraTreeView.BranchIndicator>
   );
 });

package/src/components/Workflow/canvas/Canvas/BranchLabelBadge.tsx

@@ -3,7 +3,7 @@
 import type { MouseEvent, ReactNode } from 'react';
 
 import { Badge } from '@/components/Badge';
-import { TbCheck, TbX } from '@/components/Icon';
+import { CheckIcon, CloseIcon } from '@/components/Icon';
 
 import type { EdgeLabelVariant } from './edgeLabelVariant';
 
@@ -61,8 +61,8 @@ export function BranchLabelBadge({
       cursor={onClick ? 'pointer' : 'default'}
       onClick={onClick}
     >
-      {variant === 'pass' ? <TbCheck boxSize="xs" aria-hidden /> : null}
-      {variant === 'fail' ? <TbX boxSize="xs" aria-hidden /> : null}
+      {variant === 'pass' ? <CheckIcon boxSize="xs" aria-hidden /> : null}
+      {variant === 'fail' ? <CloseIcon boxSize="xs" aria-hidden /> : null}
       {children}
     </Badge>
   );

package/src/components/Workflow/canvas/Canvas/CanvasControls.tsx

@@ -10,14 +10,14 @@ import {
 } from '@xyflow/react';
 
 import {
-  Minus,
-  Plus,
-  TbArrowBackUp,
-  TbArrowForwardUp,
-  TbLock,
-  TbLockOpen,
-  TbMaximize,
-  TbSitemap,
+  ArrowBackUpIcon,
+  ArrowForwardUpIcon,
+  LockIcon,
+  LockOpenIcon,
+  MaximizeIcon,
+  MinusIcon,
+  PlusIcon,
+  SitemapIcon,
 } from '@/components/Icon';
 import { Tooltip } from '@/components/Tooltip';
 
@@ -115,12 +115,12 @@ export function CanvasControls({
     >
       <Tooltip content={zoomInLabel} placement="right">
         <ControlButton onClick={() => zoomIn()} aria-label={zoomInLabel}>
-          <Plus />
+          <PlusIcon />
         </ControlButton>
       </Tooltip>
       <Tooltip content={zoomOutLabel} placement="right">
         <ControlButton onClick={() => zoomOut()} aria-label={zoomOutLabel}>
-          <Minus />
+          <MinusIcon />
         </ControlButton>
       </Tooltip>
       <Tooltip content={fitViewLabel} placement="right">
@@ -128,7 +128,7 @@ export function CanvasControls({
           onClick={() => fitView(fitViewOptions)}
           aria-label={fitViewLabel}
         >
-          <TbMaximize />
+          <MaximizeIcon />
         </ControlButton>
       </Tooltip>
       {/* Undo/redo, the interactivity lock and auto-arrange are authoring
@@ -141,7 +141,7 @@ export function CanvasControls({
             disabled={!canUndo}
             aria-label={undoLabel}
           >
-            <TbArrowBackUp />
+            <ArrowBackUpIcon />
           </ControlButton>
         </Tooltip>
       )}
@@ -152,7 +152,7 @@ export function CanvasControls({
             disabled={!canRedo}
             aria-label={redoLabel}
           >
-            <TbArrowForwardUp />
+            <ArrowForwardUpIcon />
           </ControlButton>
         </Tooltip>
       )}
@@ -162,14 +162,14 @@ export function CanvasControls({
             onClick={onToggleInteractivity}
             aria-label={interactivityLabel}
           >
-            {isInteractive ? <TbLockOpen /> : <TbLock />}
+            {isInteractive ? <LockOpenIcon /> : <LockIcon />}
           </ControlButton>
         </Tooltip>
       )}
       {readOnly ? null : (
         <Tooltip content={autoArrangeLabel} placement="right">
           <ControlButton onClick={onAutoArrange} aria-label={autoArrangeLabel}>
-            <TbSitemap />
+            <SitemapIcon />
           </ControlButton>
         </Tooltip>
       )}

package/src/components/Workflow/canvas/Canvas/LabeledEdge.tsx

@@ -16,7 +16,7 @@ import {
   getSmoothStepPath,
 } from '@xyflow/react';
 
-import { TbX } from '@/components/Icon';
+import { CloseIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 
 import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
@@ -186,7 +186,7 @@ export function LabeledEdge({
                   bg="bg.surface"
                   borderRadius="full"
                 >
-                  <TbX boxSize="xs" />
+                  <CloseIcon boxSize="xs" />
                 </IconButton>
               </Box>
             ) : null}

package/src/components/Workflow/canvas/CollapsibleSection/CollapsibleSection.tsx

@@ -3,7 +3,11 @@
 import { ReactNode, useId, useState } from 'react';
 import { Box, HStack, Stack, type StackProps } from '@chakra-ui/react';
 
-import { TbAlertCircle, TbChevronDown, TbChevronUp } from '@/components/Icon';
+import {
+  AlertCircleIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@/components/Icon';
 import { Subtext } from '@/components/Typography';
 
 export type CollapsibleSectionProps = StackProps & {
@@ -77,11 +81,11 @@ export function CollapsibleSection({
           {headerAction}
           <Box color="slate.900" display="flex" alignItems="center">
             {showErrorGlyph ? (
-              <TbAlertCircle boxSize="xs" color="danger.main" />
+              <AlertCircleIcon boxSize="xs" color="danger.main" />
             ) : expanded ? (
-              <TbChevronUp boxSize="xs" />
+              <ChevronUpIcon boxSize="xs" />
             ) : (
-              <TbChevronDown boxSize="xs" />
+              <ChevronDownIcon boxSize="xs" />
             )}
           </Box>
         </HStack>

package/src/components/Workflow/canvas/DrawerShell/DrawerHeader.tsx

@@ -3,7 +3,7 @@
 import { type ReactNode } from 'react';
 import { HStack } from '@chakra-ui/react';
 
-import { RxDotsHorizontal, TbX } from '@/components/Icon';
+import { CloseIcon, DotsHorizontalIcon } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Menu } from '@/components/Menu';
 import { Subtext, Text } from '@/components/Typography';
@@ -83,7 +83,7 @@ export function DrawerHeader({
                 variant="ghost"
                 colorPalette="neutral"
               >
-                <RxDotsHorizontal boxSize="xs" />
+                <DotsHorizontalIcon boxSize="xs" />
               </IconButton>
             </Menu.Trigger>
             <Menu.List zIndex="popover">{menuItems}</Menu.List>
@@ -96,7 +96,7 @@ export function DrawerHeader({
           colorPalette="neutral"
           onClick={onClose}
         >
-          <TbX boxSize="xs" aria-hidden />
+          <CloseIcon boxSize="xs" aria-hidden />
         </IconButton>
       </HStack>
     </HStack>

package/src/components/Workflow/canvas/DrawerShell/DrawerIssues.tsx

@@ -3,7 +3,7 @@
 import { type ReactNode, useMemo } from 'react';
 import { Box, HStack, VStack } from '@chakra-ui/react';
 
-import { AlertTriangle, TbAlertCircle } from '@/components/Icon';
+import { AlertCircleIcon, AlertTriangleIcon } from '@/components/Icon';
 import { Subtext } from '@/components/Typography';
 
 import { useWorkflowIssueMessage } from '../../useWorkflowIssueMessage';
@@ -43,7 +43,7 @@ function IssueCallout({
   resolveMessage: (issue: Issue) => string;
 }) {
   const { bg, color, borderColor } = severityCalloutStyle(severity);
-  const Icon = severity === 'error' ? TbAlertCircle : AlertTriangle;
+  const Icon = severity === 'error' ? AlertCircleIcon : AlertTriangleIcon;
   return (
     <Box
       border="1px solid"

package/src/components/Workflow/canvas/DrawerShell/DrawerShell.tsx

@@ -4,7 +4,7 @@ import { type ComponentType, type ReactNode, useEffect, useMemo } from 'react';
 import { Box, chakra } from '@chakra-ui/react';
 
 import { Button } from '@/components/Button';
-import { TbX } from '@/components/Icon';
+import { CloseIcon } from '@/components/Icon';
 import { Menu } from '@/components/Menu';
 import { Text } from '@/components/Typography';
 
@@ -398,7 +398,7 @@ function EdgeDrawer({
             width="100%"
             onClick={onDelete}
           >
-            <TbX boxSize="xs" />
+            <CloseIcon boxSize="xs" />
             {translate('workflow_edge_delete') as string}
           </Button>
         </Box>