@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 4.0.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',

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.tsx

@@ -3,8 +3,10 @@ import { IconButton as ChakraIconButton } from '@chakra-ui/react';
 
 import { focusRing } from '@/utils/focusRing';
 
+import { polymorphic } from '../../types/polymorphic';
+import { buttonTransition } from '../Button/Button.styles';
 import { getIconButtonStyles } from './IconButton.styles';
-import { IconButtonProps } from './IconButton.types';
+import { IconButtonOwnProps, IconButtonProps } from './IconButton.types';
 
 /**
  * IconButton component with two-dimensional variant system.
@@ -19,7 +21,7 @@ import { IconButtonProps } from './IconButton.types';
  * <IconButton colorPalette="neutral" variant="ghost"><Icon /></IconButton>
  * ```
  */
-export const IconButton = forwardRef(
+const IconButtonImpl = forwardRef(
   (
     {
       colorPalette = 'neutral',
@@ -38,6 +40,12 @@ export const IconButton = forwardRef(
         rounded="full"
         {...styles}
         {...focusRing}
+        // Same press as Button: it inherits the `_active` scale from the shared
+        // styles, but Chakra's `common` transition list has no `scale`, so the
+        // press used to snap. Same clock and reduced-motion guard as Button.
+        scale="1"
+        transition={buttonTransition}
+        animationStyle="composite"
         {...rest}
       >
         {children}
@@ -46,4 +54,7 @@ export const IconButton = forwardRef(
   }
 );
 
-IconButton.displayName = 'IconButton';
+/** Type-level polymorphism over the same runtime — see the note on `Button`. */
+IconButtonImpl.displayName = 'IconButton';
+
+export const IconButton = polymorphic<IconButtonOwnProps>(IconButtonImpl);

package/src/components/IconButton/IconButton.types.ts

@@ -1,5 +1,8 @@
+import type { ElementType } from 'react';
 import { IconButtonProps as ChakraIconButtonProps } from '@chakra-ui/react';
 
+import type { PolymorphicProps } from '../../types/polymorphic';
+
 // Re-export Button types for consistency
 export type { ButtonVariant } from '../Button/Button.types';
 
@@ -35,9 +38,9 @@ export type IconButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
  * <IconButton colorPalette="danger" variant="soft"><Icon /></IconButton>
  * ```
  */
-export type IconButtonProps = Omit<
+export type IconButtonOwnProps = Omit<
   ChakraIconButtonProps,
-  'variant' | 'colorPalette' | 'colorScheme' | 'icon'
+  'variant' | 'colorPalette' | 'colorScheme' | 'icon' | 'as'
 > & {
   /**
    * The color scheme of the icon button (semantic color family).
@@ -52,3 +55,17 @@ export type IconButtonProps = Omit<
    */
   variant?: IconButtonVariant;
 };
+
+/**
+ * Props for `IconButton`, typed for whatever element `as` renders.
+ *
+ * Defaults to `'button'`, so `IconButtonProps` on its own is unchanged. Same
+ * shape and same reasoning as `ButtonProps` — see `Button.types.ts` and
+ * `src/types/polymorphic.ts`.
+ *
+ * ```tsx
+ * <IconButton as="a" href={file} download aria-label="내려받기"><Icon /></IconButton>
+ * ```
+ */
+export type IconButtonProps<TElement extends ElementType = 'button'> =
+  PolymorphicProps<TElement, IconButtonOwnProps>;

package/src/components/IconButton/index.tsx

@@ -7,6 +7,7 @@ export {
 } from './IconButton.styles';
 export type {
   IconButtonColorPalette,
+  IconButtonOwnProps,
   IconButtonProps,
   IconButtonVariant,
 } from './IconButton.types';

package/src/components/InfoSprinkle/InfoSprinkle.tsx

@@ -51,7 +51,6 @@ export const InfoSprinkle = ({
         <IconButton
           aria-label="Info"
           opacity={0.5}
-          transition="opacity 0.2s"
           _hover={{ opacity: 1, ...(iconButtonProps?._hover as any) }}
           {...iconButtonProps}
           onClick={(e) => {

package/src/components/InlineCode/InlineCode.tsx

@@ -8,8 +8,15 @@ export const InlineCode = ({ children, ...rest }: ChakraCodeProps) => {
     <ChakraCode
       bg="bg.subtle"
       color="primary.dark"
-      borderRadius="sm"
-      textStyle="p"
+      // `xs` (4px) rather than `sm` (6px): on the small, now-shorter chip a 6px
+      // radius reads a little bubbly; the tighter corner is crisper inline.
+      borderRadius="xs"
+      // `subtext` rather than `p`: inline code reads a step below body text so
+      // its chip (padding + ring) and the mono face's larger x-height don't make
+      // it bulge in running prose. `subtext` is the same tier as `p` — same
+      // family/weight/line-height — only one size down, so this changes size
+      // only (a mono override passed by callers still wins, as with `p`).
+      textStyle="subtext"
       // bg.subtle (gray.50) matches the bg.sunken page wash, so on a sunken
       // page the chip fill vanishes. The chip is too small for a fill bump to
       // register, so (like SegmentedControl) it gets an outline instead — a

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/Input/Input.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { Input as ChakraInput, InputGroup } from '@chakra-ui/react';
 
+import { noZoomOnFocus } from '@/theme/formControls';
 import { formatNumber } from '@/utils/formatNumber';
 import { mergeCss } from '@/utils/mergeCss';
 
@@ -357,6 +358,7 @@ export const Input = forwardRef(
           }}
           {...rest}
           css={mergeCss(
+            noZoomOnFocus,
             {
               paddingInlineEnd: rightElementWidth,
               '--focus-color': 'var(--chakra-colors-primary-main)',

package/src/components/Loaders/PageLoader.tsx

@@ -10,13 +10,16 @@ export const PageLoader = ({
     <Flex
       position="fixed"
       w="100vw"
-      h="100vh"
+      // `dvh`, not `vh`: on mobile `100vh` is the largest viewport, so the
+      // overlay ran under the URL bar.
+      h="100dvh"
       top={0}
       left={0}
       align="center"
       justify="center"
       opacity={isLoading ? 0.5 : 0}
-      transition="0.3s opacity ease"
+      animationStyle="feedback"
+      transitionProperty="opacity"
       bg="bg.canvas"
       zIndex={9999}
       {...rest}

package/src/components/Loaders/SectionLoader.tsx

@@ -17,7 +17,8 @@ export const SectionLoader = ({
       align="center"
       justify="center"
       bg="bg.canvas"
-      transition="0.3 opacity ease"
+      animationStyle="feedback"
+      transitionProperty="opacity"
       zIndex={9999}
       {...rest}
     >

package/src/components/Markdown/Markdown.tsx

@@ -22,7 +22,12 @@ const H2Wrapper = (props: any) => <H2 {...props} />;
 const H3Wrapper = (props: any) => <H3 {...props} />;
 const H4Wrapper = (props: any) => <H4 {...props} />;
 const H5Wrapper = (props: any) => <H5 {...props} />;
-const SubtitleWrapper = (props: any) => <Subtitle {...props} />;
+// `as="h6"` explicitly. `Subtitle` renders a paragraph by default now (its call
+// sites are overwhelmingly helper copy that was never a heading), but this
+// wrapper is markdown's `h6` — a heading the author actually wrote. Inheriting
+// the new default here would silently drop `###### 제목` out of the document
+// outline, which is the same KWCAG 5.2.4.2 (제목 제공) defect inverted.
+const SubtitleWrapper = (props: any) => <Subtitle as="h6" {...props} />;
 const TheadWrapper = (props: any) => <Thead {...props} />;
 const TbodyWrapper = (props: any) => <Tbody {...props} />;
 const TrWrapper = (props: any) => <Tr {...props} />;

package/src/components/Menu/MenuItem.tsx

@@ -2,16 +2,17 @@ import { Menu, Spacer } from '@chakra-ui/react';
 
 import { focusRing } from '@/utils/focusRing';
 
-import { ItemVariant, MenuItemProps } from './MenuItem.types';
+import { polymorphic } from '../../types/polymorphic';
+import { ItemVariant, MenuItemOwnProps } from './MenuItem.types';
 
-export const MenuItem = ({
+const MenuItemImpl = ({
   variant = ItemVariant.Default,
   value,
   children,
   icon,
   rightIcon,
   ...rest
-}: MenuItemProps) => {
+}: MenuItemOwnProps) => {
   const isDangerVariant = variant === ItemVariant.Danger;
 
   return (
@@ -26,6 +27,8 @@ export const MenuItem = ({
       fontWeight="semibold"
       gap={3}
       cursor="pointer"
+      // Same as `Button`: the style prop outranks the recipe's disabled cursor.
+      _disabled={{ cursor: 'not-allowed' }}
       _hover={{
         color: isDangerVariant ? 'danger.main' : 'fg.default',
         backgroundColor: isDangerVariant ? 'danger.lightest' : 'bg.subtle',
@@ -40,3 +43,8 @@ export const MenuItem = ({
     </Menu.Item>
   );
 };
+
+/** Type-level polymorphism over the same runtime — see the note on `Button`. */
+MenuItemImpl.displayName = 'MenuItem';
+
+export const MenuItem = polymorphic<MenuItemOwnProps, 'div'>(MenuItemImpl);

package/src/components/Menu/MenuItem.types.ts

@@ -1,5 +1,11 @@
+import type { ElementType } from 'react';
 import { MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
 
+// Relative, NOT `@/types/*`. Path aliases survive into the emitted `.d.ts` and
+// resolve against the CONSUMER's tsconfig, which silently degrades the type to
+// `any`. See `src/types/polymorphic.ts`.
+import type { PolymorphicProps } from '../../types/polymorphic';
+
 export const ItemVariant = {
   Default: 'default',
   Danger: 'danger',
@@ -7,9 +13,24 @@ export const ItemVariant = {
 
 export type ItemVariant = (typeof ItemVariant)[keyof typeof ItemVariant];
 
-export interface MenuItemProps extends ChakraMenuItemProps {
+export type MenuItemOwnProps = Omit<ChakraMenuItemProps, 'as'> & {
   value: string; // Required in Chakra v3 for menu item identification
   variant?: ItemVariant | null;
   icon?: React.ReactElement;
   rightIcon?: React.ReactElement;
-}
+};
+
+/**
+ * Props for `MenuItem`, typed for whatever element `as` renders.
+ *
+ * A menu item that navigates is the single most common `as` site in a menu —
+ * rendering it as a real link is also the accessible choice, since it keeps
+ * middle-click and "open in new tab" working. Defaults to `'div'` (what
+ * Chakra's `Menu.Item` renders), so bare `MenuItemProps` is unchanged.
+ *
+ * ```tsx
+ * <MenuItem value="admin" as={NextLink} href="/admin" target="_blank">관리자</MenuItem>
+ * ```
+ */
+export type MenuItemProps<TElement extends ElementType = 'div'> =
+  PolymorphicProps<TElement, MenuItemOwnProps>;

package/src/components/Menu/MenuList.tsx

@@ -1,21 +1,48 @@
-import { forwardRef } from 'react';
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
 import {
   Menu,
   MenuContentProps as ChakraMenuContentProps,
   Portal,
 } from '@chakra-ui/react';
 
+import { staggerProps } from '@/utils/staggerProps';
+
 import { ScaledContext } from '../ScaledContext';
 import { useMenuContext } from './Menu.types';
 
 export type MenuListProps = ChakraMenuContentProps & {
   portalled?: boolean;
+  /**
+   * Deal the rows in one after another instead of showing the menu as one
+   * block.
+   *
+   * Opt-in rather than the default: it suits a short menu opened deliberately,
+   * and works against a long one or a menu reopened repeatedly in the same
+   * gesture, where the reader already knows what is in it and is only waiting
+   * for the row they came for.
+   */
+  stagger?: boolean;
 };
 
 export const MenuList = forwardRef<HTMLDivElement, MenuListProps>(
-  ({ children, portalled = true, ...rest }, ref) => {
+  ({ children, portalled = true, stagger = false, ...rest }, ref) => {
     const { baseFontSize } = useMenuContext();
 
+    // Cloned rather than asking the call site to thread an index through every
+    // `Menu.Item`: the index is a fact about the list, and the list is here.
+    // Anything that is not an element — a bare string, the `false` from a
+    // `{cond && <Item/>}` branch — passes through untouched rather than
+    // throwing. Such a branch still consumes its index, so a hidden row leaves a
+    // gap in the rhythm; below the cap that is a 35ms hole nobody sees, and
+    // renumbering would cost a second pass to buy nothing.
+    const rows = stagger
+      ? Children.map(children, (child, index) =>
+          isValidElement(child)
+            ? cloneElement(child, staggerProps(index))
+            : child
+        )
+      : children;
+
     const content = (
       <Menu.Positioner>
         <Menu.Content
@@ -30,9 +57,14 @@ export const MenuList = forwardRef<HTMLDivElement, MenuListProps>(
             _dark: '0 5px 20px 1px rgba(0, 0, 0, 0.5)',
           }}
           p="1.5"
+          // Chakra's recipe opens the menu in 150ms and closes it in 100 —
+          // nearly symmetric, and shorter than everything else that appears
+          // over the page. `presence-anchored` puts it on the house enter/exit ratio;
+          // the slide-from-the-trigger movement is the recipe's and stays.
+          animationStyle="presence-anchored"
           {...rest}
         >
-          <ScaledContext fontSize={baseFontSize}>{children}</ScaledContext>
+          <ScaledContext fontSize={baseFontSize}>{rows}</ScaledContext>
         </Menu.Content>
       </Menu.Positioner>
     );