@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/src/components/Icon/_utils/createIcon.tsx

@@ -7,6 +7,7 @@ export type IconProps = Partial<SVGProps<SVGElement>> &
 
 // Static size mapping (SSR-safe)
 const sizeMapping: Record<string, string> = {
+  '2xs': '3.5',
   xs: '4',
   sm: '5',
   md: '6',
@@ -32,8 +33,8 @@ const sizeMapping: Record<string, string> = {
  * const BuildIcon = createIcon(FaBuildingUser, 'BuildIcon');
  *
  * // Usage
- * <CustomIcon boxSize="lg" color="blue.500" />
- * <BuildIcon boxSize="md" color="red.500" />
+ * <CustomIcon boxSize="lg" color="fg.icon" />
+ * <BuildIcon boxSize="md" color="danger.fg" />
  * ```
  */
 export const createIcon = (

package/src/components/Icon/_utils/createIconGroup.tsx

@@ -19,7 +19,7 @@ import createIcon, { CreatedIcon } from './createIcon';
  *
  * // Usage
  * <icons.Home boxSize="lg" />
- * <icons.User color="blue.500" />
+ * <icons.User color="fg.icon" />
  * <icons.Custom boxSize="md" />
  * ```
  */

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/IconButton/IconButton.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Box, Flex, VStack, HStack, Text } from '@chakra-ui/react';
-import { FaUniversity } from '../Icon';
-import { IconButton, iconButtonColorPalettes, iconButtonVariants } from '.';
-import { IconButtonColorPalette, IconButtonVariant } from './IconButton.types';
+import { Grid, HStack, Text, VStack } from '@chakra-ui/react';
+import { FaUniversity, SendIcon, TrashIcon } from '../Icon';
+import { IconButton, iconButtonVariants } from '.';
+import { IconButtonVariant } from './IconButton.types';
 
 const meta = {
   title: 'Components/IconButton',
@@ -13,15 +13,14 @@ const meta = {
     'aria-label': 'University',
   },
   argTypes: {
-    colorPalette: {
-      control: 'select',
-      options: iconButtonColorPalettes,
-      description: 'Semantic color family (overrides Chakra colorPalette)',
-    },
     variant: {
       control: 'select',
       options: iconButtonVariants,
-      description: 'Visual appearance (overrides Chakra variant)',
+      description: 'Role. Default `ghost`.',
+    },
+    isDestructive: {
+      control: 'boolean',
+      description: 'Danger icon on ghost / secondary',
     },
     children: {
       table: { disable: true },
@@ -35,8 +34,7 @@ type Story = StoryObj<typeof IconButton>;
 
 export const Basic: Story = {
   args: {
-    colorPalette: 'primary',
-    variant: 'solid',
+    variant: 'ghost',
   },
 };
 
@@ -46,231 +44,80 @@ export const Basic: Story = {
 export const Sizes: Story = {
   render: (args) => (
     <HStack gap={4} align="center">
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">xs</Text>
-        <IconButton {...args} size="xs" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">sm</Text>
-        <IconButton {...args} size="sm" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">md</Text>
-        <IconButton {...args} size="md" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">lg</Text>
-        <IconButton {...args} size="lg" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">xl</Text>
-        <IconButton {...args} size="xl" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">2xl</Text>
-        <IconButton {...args} size="2xl" colorPalette="primary" variant="solid" />
-      </VStack>
-    </HStack>
-  ),
-};
-
-/**
- * Complete icon button matrix showing all colorPalette × variant combinations.
- */
-export const AllCombinations: Story = {
-  render: (args) => (
-    <VStack gap={6} align="stretch">
-      {/* Header row */}
-      <HStack gap={4}>
-        <Box w="100px" />
-        {iconButtonVariants.map((variant) => (
-          <Box key={variant} w="80px" textAlign="center">
-            <Text fontWeight="bold" color="gray.600">
-              {variant}
-            </Text>
-          </Box>
-        ))}
-      </HStack>
-
-      {/* Color scheme rows */}
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <HStack key={colorPalette} gap={4}>
-          <Box w="100px">
-            <Text fontWeight="bold" color="gray.600">
-              {colorPalette}
-            </Text>
-          </Box>
-          {iconButtonVariants.map((variant) => (
-            <Box key={`${colorPalette}-${variant}`} w="80px" textAlign="center">
-              <IconButton
-                {...args}
-                colorPalette={colorPalette}
-                variant={variant}
-              />
-            </Box>
-          ))}
-        </HStack>
-      ))}
-    </VStack>
-  ),
-};
-
-/**
- * Primary color scheme in all variants.
- */
-export const Primary: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="primary" variant={variant} />
+      {(['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const).map((size) => (
+        <VStack key={size} gap={1}>
+          <Text fontSize="sm" color="fg.muted">
+            {size}
+          </Text>
+          <IconButton {...args} size={size} variant="primary" />
         </VStack>
       ))}
-    </Flex>
-  ),
-};
-
-/**
- * Secondary color scheme in all variants.
- */
-export const Secondary: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="secondary" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
-  ),
-};
-
-/**
- * Danger color scheme in all variants.
- */
-export const Danger: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="danger" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
-  ),
-};
-
-/**
- * Success color scheme in all variants.
- */
-export const Success: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="success" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
+    </HStack>
   ),
 };
 
-/**
- * Warning color scheme in all variants.
- */
-export const Warning: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="warning" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
-  ),
+const NOTES: Record<IconButtonVariant, string> = {
+  ghost: '기본 — fg.icon, hover 시 워시',
+  secondary: '테두리 있는 ghost',
+  primary: 'BAZE 블랙 면',
+  danger: '빨간 면',
+  action: '보내기 — 코랄 면 + 블랙 화살표',
 };
 
 /**
- * Neutral color scheme in all variants.
+ * Every role, enabled and disabled.
  */
-export const Neutral: Story = {
+export const Variants: Story = {
   render: (args) => (
-    <Flex gap={4} wrap="wrap">
+    <Grid templateColumns="max-content max-content max-content 1fr" gap={4}>
       {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="neutral" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
-  ),
-};
-
-/**
- * Solid variant across all color schemes.
- */
-export const SolidVariant: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <VStack key={colorPalette} gap={1}>
-          <Text color="gray.600">{colorPalette}</Text>
-          <IconButton {...args} colorPalette={colorPalette} variant="solid" />
-        </VStack>
-      ))}
-    </Flex>
-  ),
-};
-
-/**
- * Soft variant across all color schemes.
- */
-export const SoftVariant: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <VStack key={colorPalette} gap={1}>
-          <Text color="gray.600">{colorPalette}</Text>
-          <IconButton {...args} colorPalette={colorPalette} variant="soft" />
-        </VStack>
+        <HStack key={variant} display="contents">
+          <Text fontSize="sm" fontWeight="semibold" color="fg.default">
+            {variant}
+          </Text>
+          <IconButton {...args} variant={variant} />
+          <IconButton {...args} variant={variant} disabled />
+          <Text fontSize="sm" color="fg.muted">
+            {NOTES[variant]}
+          </Text>
+        </HStack>
       ))}
-    </Flex>
+    </Grid>
   ),
 };
 
 /**
- * Outline variant across all color schemes.
+ * `isDestructive`: a delete icon in a row. Ghost and secondary only.
  */
-export const OutlineVariant: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <VStack key={colorPalette} gap={1}>
-          <Text color="gray.600">{colorPalette}</Text>
-          <IconButton {...args} colorPalette={colorPalette} variant="outline" />
-        </VStack>
-      ))}
-    </Flex>
+export const Destructive: Story = {
+  render: () => (
+    <HStack gap={4}>
+      <IconButton aria-label="삭제" isDestructive>
+        <TrashIcon />
+      </IconButton>
+      <IconButton aria-label="삭제" variant="secondary" isDestructive>
+        <TrashIcon />
+      </IconButton>
+      <IconButton aria-label="삭제" isDestructive disabled>
+        <TrashIcon />
+      </IconButton>
+    </HStack>
   ),
 };
 
 /**
- * Ghost variant across all color schemes.
+ * `action` is the coral SEND button of a chat composer (`send.*` tokens).
+ * Disabled (nothing typed yet) is the fixed disabled pair.
  */
-export const GhostVariant: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <VStack key={colorPalette} gap={1}>
-          <Text color="gray.600">{colorPalette}</Text>
-          <IconButton {...args} colorPalette={colorPalette} variant="ghost" />
-        </VStack>
-      ))}
-    </Flex>
+export const ActionSend: Story = {
+  render: () => (
+    <HStack gap={4}>
+      <IconButton aria-label="보내기" variant="action">
+        <SendIcon />
+      </IconButton>
+      <IconButton aria-label="보내기" variant="action" disabled>
+        <SendIcon />
+      </IconButton>
+    </HStack>
   ),
 };